mirror of https://github.com/portainer/portainer
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { truncate } from '@/portainer/filters/filters';
|
|
import { useVolumes } from '@/react/docker/volumes/queries/useVolumes';
|
|
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
|
|
|
|
import { Select } from '@@/form-components/ReactSelect';
|
|
|
|
export function VolumeSelector({
|
|
value,
|
|
onChange,
|
|
inputId,
|
|
}: {
|
|
value: string;
|
|
onChange: (value?: string) => void;
|
|
inputId?: string;
|
|
}) {
|
|
const environmentId = useEnvironmentId();
|
|
const volumesQuery = useVolumes(environmentId, {
|
|
select(volumes) {
|
|
return volumes.sort((vol1, vol2) => vol1.Name.localeCompare(vol2.Name));
|
|
},
|
|
});
|
|
|
|
if (!volumesQuery.data) {
|
|
return null;
|
|
}
|
|
|
|
const volumes = volumesQuery.data;
|
|
|
|
const selectedValue = volumes.find((vol) => vol.Name === value);
|
|
|
|
return (
|
|
<Select
|
|
placeholder="Select a volume"
|
|
options={volumes}
|
|
getOptionLabel={(vol) =>
|
|
`${truncate(vol.Name, 30)} - ${truncate(vol.Driver, 30)}`
|
|
}
|
|
getOptionValue={(vol) => vol.Name}
|
|
isMulti={false}
|
|
value={selectedValue}
|
|
onChange={(vol) => onChange(vol?.Name)}
|
|
inputId={inputId}
|
|
/>
|
|
);
|
|
}
|