in frontend/src/old-pages/Configure/Storage.tsx [865:1190]
function StorageInstance({index}: any) {
const path = [...storagePath, index]
const uiSettingsForStorage = ['app', 'wizard', 'storage', 'ui', index]
const storageType: StorageType = useState([...path, 'StorageType'])
const storageName = useState([...path, 'Name']) || ''
const storageNameErrors = useState([...errorsPath, index, 'Name'])
const mountPoint = useState([...path, 'MountDir'])
const settingsPath = [...path, `${storageType}Settings`]
const errorsInstancePath = [...errorsPath, index, `${storageType}Settings`]
const useExisting =
useState([...uiSettingsForStorage, 'useExisting']) ||
!(STORAGE_TYPE_PROPS[storageType].maxToCreate > 0)
//TODO Add idType as an attribute within STORAGE_TYPE_PROPS to avoid nested ternary operations.
const existingPath = STORAGE_TYPE_PROPS[storageType].mountFilesystem
? [...settingsPath, 'FileSystemId']
: storageType == 'FileCache'
? [...settingsPath, 'FileCacheId']
: [...settingsPath, 'VolumeId']
//TODO Add idType as an attribute within STORAGE_TYPE_PROPS to avoid nested ternary operations.
const existingPathError = useState(
STORAGE_TYPE_PROPS[storageType].mountFilesystem
? [...errorsInstancePath, 'FileSystemId']
: storageType == 'FileCache'
? [...errorsInstancePath, 'FileCacheId']
: [...errorsInstancePath, 'VolumeId'],
)
const existingId = useState(existingPath) || ''
const storages = useState(storagePath)
const uiSettings = useState(['app', 'wizard', 'storage', 'ui'])
const {t} = useTranslation()
const fsxFilesystems = useState(['aws', 'fsxFilesystems'])
const fileCaches = useState(['aws', 'fileCaches'])
const fsxVolumes = useState(['aws', 'fsxVolumes'])
const efsFilesystems = useState(['aws', 'efs_filesystems']) || []
const canEditFilesystems = useDynamicStorage()
const canToggle =
(useExisting && canCreateStorage(storageType, storages, uiSettings)) ||
(!useExisting &&
canAttachExistingStorage(storageType, storages, uiSettings))
const removeStorage = () => {
if (index === 0 && storages.length === 1) {
clearState(['app', 'wizard', 'storage', 'ui'])
clearState(storagePath)
} else {
clearState(uiSettingsForStorage)
clearState(path)
}
// Rename storages to keep indices correct and names unique
const updatedStorages = getState(storagePath)
if (updatedStorages)
for (let i = 0; i < updatedStorages.length; i++) {
const storage = getState([...storagePath, i])
setState([...storagePath, i, 'Name'], `${storage.StorageType}${i}`)
}
}
const toggleUseExisting = () => {
const value = !useExisting
clearState(settingsPath)
setState([...uiSettingsForStorage, 'useExisting'], value)
}
const idToOption = (id: any) => {
return {label: id, value: id}
}
const updateStorageName = useCallback<
NonCancelableEventHandler<BaseChangeDetail>
>(
({detail}) => {
setState([...storagePath, index, 'Name'], detail.value)
},
[index],
)
const useExistingFooterLinks = useMemo(
() => [
{
title: t('wizard.storage.instance.useExisting.fsxLink.title'),
href: t('wizard.storage.instance.useExisting.fsxLink.href'),
},
{
title: t('wizard.storage.instance.useExisting.efsLink.title'),
href: t('wizard.storage.instance.useExisting.efsLink.href'),
},
{
title: t('wizard.storage.instance.useExisting.ebsLink.title'),
href: t('wizard.storage.instance.useExisting.ebsLink.href'),
},
],
[t],
)
const storageTypeDisplay = ALL_STORAGES.find(
([type]) => type === storageType,
)?.[1]
return (
<Container
header={
<Header
variant="h3"
actions={
<Button disabled={!canEditFilesystems} onClick={removeStorage}>
{t('wizard.storage.container.removeStorage')}
</Button>
}
>
{t('wizard.storage.container.sourceTitle', {
index: index + 1,
name: storageTypeDisplay,
})}
</Header>
}
>
<SpaceBetween direction="vertical" size="m">
<ColumnLayout columns={2}>
<FormField
label={t('wizard.storage.instance.sourceName.label')}
errorText={storageNameErrors}
>
<Input
value={storageName}
onChange={updateStorageName}
placeholder={t('wizard.storage.instance.sourceName.placeholder')}
/>
</FormField>
</ColumnLayout>
<ColumnLayout columns={2}>
<FormField
label={t('wizard.storage.instance.mountPoint.label')}
info={
<InfoLink
helpPanel={
<TitleDescriptionHelpPanel
title={t('wizard.storage.instance.mountPoint.label')}
description={t('wizard.storage.instance.mountPoint.help')}
/>
}
/>
}
>
<Input
value={mountPoint}
placeholder={t('wizard.storage.instance.mountPoint.placeholder')}
onChange={({detail}) => {
setState([...storagePath, index, 'MountDir'], detail.value)
}}
/>
</FormField>
</ColumnLayout>
<ColumnLayout columns={2}>
<SpaceBetween direction="vertical" size="xxs">
{STORAGE_TYPE_PROPS[storageType].maxToCreate > 0 ? (
<SpaceBetween direction="horizontal" size="s">
<Checkbox
disabled={!canToggle}
checked={useExisting}
onChange={toggleUseExisting}
>
<Trans i18nKey="wizard.storage.instance.useExisting.label" />
</Checkbox>
<InfoLink
helpPanel={
<TitleDescriptionHelpPanel
title={t('wizard.storage.instance.useExisting.label')}
description={t(
'wizard.storage.instance.useExisting.help',
)}
footerLinks={useExistingFooterLinks}
/>
}
/>
</SpaceBetween>
) : null}
{useExisting &&
{
Ebs: (
<FormField
label={t('wizard.storage.Ebs.existing.label')}
errorText={existingPathError}
>
<Input
placeholder={t(
'wizard.storage.Ebs.existing.placeholder',
)}
value={existingId}
onChange={({detail}) => {
setState(existingPath, detail.value)
}}
/>
</FormField>
),
FsxLustre: (
<FormField
label={t('wizard.storage.Fsx.existing.fsxLustre')}
errorText={existingPathError}
>
<Select
placeholder={t(
'wizard.storage.container.volumePlaceholder',
)}
selectedOption={existingId && idToOption(existingId)}
onChange={({detail}) => {
setState(existingPath, detail.selectedOption.value)
}}
options={fsxFilesystems.lustre.map((fs: any) => ({
value: fs.id,
label: fs.displayName,
}))}
empty={t('wizard.storage.instance.useExisting.empty')}
/>
</FormField>
),
FsxOpenZfs: (
<FormField
label={t('wizard.storage.Fsx.existing.fsxOpenZfs')}
errorText={existingPathError}
>
<Select
placeholder={t(
'wizard.storage.container.volumePlaceholder',
)}
selectedOption={existingId && idToOption(existingId)}
onChange={({detail}) => {
setState(existingPath, detail.selectedOption.value)
}}
options={fsxVolumes.zfs.map((vol: any) => ({
value: vol.id,
label: vol.displayName,
}))}
empty={t('wizard.storage.instance.useExisting.empty')}
/>
</FormField>
),
FsxOntap: (
<FormField
label={t('wizard.storage.Fsx.existing.fsxOnTap')}
errorText={existingPathError}
>
<Select
placeholder={t(
'wizard.storage.container.volumePlaceholder',
)}
selectedOption={existingId && idToOption(existingId)}
onChange={({detail}) => {
setState(existingPath, detail.selectedOption.value)
}}
options={fsxVolumes.ontap.map((vol: any) => ({
value: vol.id,
label: vol.displayName,
}))}
empty={t('wizard.storage.instance.useExisting.empty')}
/>
</FormField>
),
FileCache: (
<FormField
label={t('wizard.storage.Fsx.existing.fileCache')}
errorText={existingPathError}
>
<Select
placeholder={t(
'wizard.storage.container.cachePlaceholder',
)}
selectedOption={existingId && idToOption(existingId)}
onChange={({detail}) => {
setState(existingPath, detail.selectedOption.value)
}}
options={fileCaches.lustre.map((x: any) => {
return {
value: x.id,
label: x.id + (x.Name ? ` (${x.Name})` : ''),
}
})}
empty={t('wizard.storage.instance.useExisting.empty')}
/>
</FormField>
),
Efs: (
<FormField
label="EFS Filesystem"
errorText={existingPathError}
>
<Select
placeholder={t(
'wizard.storage.container.volumePlaceholder',
)}
selectedOption={existingId && idToOption(existingId)}
onChange={({detail}) => {
setState(existingPath, detail.selectedOption.value)
}}
options={efsFilesystems.map((x: any) => {
return {
value: x.FileSystemId,
label:
x.FileSystemId + (x.Name ? ` (${x.Name})` : ''),
}
})}
empty={t('wizard.storage.instance.useExisting.empty')}
/>
</FormField>
),
}[storageType]}
</SpaceBetween>
</ColumnLayout>
{!useExisting &&
{
FsxLustre: <FsxLustreSettings index={index} />,
Efs: <EfsSettings index={index} />,
Ebs: <EbsSettings index={index} />,
FsxOntap: null,
FsxOpenZfs: null,
FileCache: null,
}[storageType]}
</SpaceBetween>
</Container>
)
}