-
Notifications
You must be signed in to change notification settings - Fork 592
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
(feat): Setup create storage system wizard
- Adds Backing Storage step - implements a wizard with [incrementally enabled steps](https://www.patternfly.org/v4/components/wizard/#incrementally-enabled-steps) - This step creates the Storage System for an external Provider other than RHCS on clicking Next. - This step otherwise, allow choosing the backing storage for Storage Cluster. The Storage Cluster is hidden from UI but it is created internally by wizard flow. The creation of storage cluster happens in the last step. - https://issues.redhat.com/browse/ODFE-83 Signed-off-by: Afreen Rahman <afrahman@redhat.com>
- Loading branch information
Afreen Rahman
committed
Jul 13, 2021
1 parent
cb618e6
commit 2d06224
Showing
19 changed files
with
831 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
...eate-storage-system/create-storage-system-steps/backing-storage-step/backing-storage.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .odf-backing-storage__selection--width { | ||
| width: 22rem; | ||
| } |
188 changes: 188 additions & 0 deletions
188
...reate-storage-system/create-storage-system-steps/backing-storage-step/backing-storage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,188 @@ | ||
| import * as React from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { TFunction } from 'i18next'; | ||
| import { Form, FormSelect, FormSelectOption, FormSelectProps, Radio } from '@patternfly/react-core'; | ||
| import { StorageClassDropdown } from '@console/internal/components/utils/storage-class-dropdown'; | ||
| import { StorageClassResourceKind } from '@console/internal/module/k8s'; | ||
| import './backing-storage.scss'; | ||
| import { | ||
| ODF_EXTERNAL_PROVIDERS, | ||
| ExternalProvider, | ||
| StorageClusterIdentifier, | ||
| } from '../../../../odf-external-providers/external-providers'; | ||
| import { StorageSystemKind } from '../../../../types'; | ||
| import { filterSCWithoutNoProv } from '../../../../utils/install'; | ||
| import { WizardCommonProps, WizardReducer, WizardState, WizardDispatch } from '../../reducer'; | ||
| import { BackingStorageType } from '../../../../constants/create-storage-system'; | ||
| import { ErrorHandler } from '../../error-handler'; | ||
|
|
||
| const ExternalSystemSelection: React.FC<ExternalSystemSelectionProps> = ({ | ||
| dispatch, | ||
| providersList, | ||
| selectedProvider, | ||
| t, | ||
| }) => { | ||
| const handleSelection: FormSelectProps['onChange'] = (value) => | ||
| dispatch({ | ||
| type: 'backingStorage/setExternalProvider', | ||
| payload: value, | ||
| }); | ||
|
|
||
| return ( | ||
| <FormSelect | ||
| aria-label={t('ceph-storage-plugin~Select external system from list')} | ||
| value={selectedProvider} | ||
| className="odf-backing-storage__selection--width" | ||
| onChange={handleSelection} | ||
| > | ||
| {providersList.map((p) => ( | ||
| <FormSelectOption key={p.id} value={p.id} label={p.label} /> | ||
| ))} | ||
| </FormSelect> | ||
| ); | ||
| }; | ||
|
|
||
| type ExternalSystemSelectionProps = { | ||
| dispatch: React.Dispatch<React.ReducerAction<WizardReducer>>; | ||
| selectedProvider: WizardState['backingStorage']['externalProvider']; | ||
| providersList: ExternalProvider[]; | ||
| t: TFunction; | ||
| }; | ||
|
|
||
| const StorageClassSelection: React.FC<StorageClassSelectionProps> = ({ dispatch, selected }) => { | ||
| const onStorageClassSelect = (sc: StorageClassResourceKind) => | ||
| dispatch({ | ||
| type: 'wizard/setStorageClass', | ||
| payload: { name: sc?.metadata?.name, provisioner: sc?.provisioner }, | ||
| }); | ||
| return ( | ||
| <div className="odf-backing-storage__selection--width"> | ||
| <StorageClassDropdown | ||
| noSelection | ||
| onChange={onStorageClassSelect} | ||
| selectedKey={selected.name} | ||
| filter={filterSCWithoutNoProv} | ||
| data-test="storage-class-dropdown" | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| type StorageClassSelectionProps = { | ||
| dispatch: WizardDispatch; | ||
| selected: WizardState['storageClass']; | ||
| }; | ||
|
|
||
| const formatStorageSystemList = (storageSystems: StorageSystemKind[] = []): StorageSystemSet => | ||
| storageSystems.reduce( | ||
| (kinds: StorageSystemSet, ss: StorageSystemKind) => kinds.add(ss.spec.kind), | ||
| new Set(), | ||
| ); | ||
|
|
||
| type StorageSystemSet = Set<StorageSystemKind['spec']['kind']>; | ||
|
|
||
| export const BackingStorage: React.FC<BackingStorageProps> = ({ | ||
| state, | ||
| dispatch, | ||
| storageSystems, | ||
| error, | ||
| loaded, | ||
| }) => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| const formattedSS: StorageSystemSet = formatStorageSystemList(storageSystems); | ||
|
|
||
| const hasOCS: boolean = formattedSS.has(StorageClusterIdentifier); | ||
|
|
||
| const externalProviders = ODF_EXTERNAL_PROVIDERS.filter( | ||
| (provider) => !formattedSS.has(provider.kind), | ||
| ); | ||
|
|
||
| React.useEffect(() => { | ||
| /* | ||
| Allow pre selecting the "external connection" option instead of the "existing" option | ||
| if an OCS Storage System is already created and no external system is created. | ||
| */ | ||
| if (hasOCS && externalProviders.length) { | ||
| dispatch({ type: 'backingStorage/setType', payload: BackingStorageType.EXTERNAL }); | ||
| } | ||
| }, [dispatch, externalProviders.length, hasOCS]); | ||
|
|
||
| const { type, externalProvider } = state.backingStorage; | ||
| const { storageClass } = state; | ||
|
|
||
| const showExternalSystemSelection = type === BackingStorageType.EXTERNAL; | ||
| const showStorageClassSelection = !hasOCS && type === BackingStorageType.EXISTING; | ||
| const RADIO_GROUP_NAME = 'backing-storage-radio-group'; | ||
|
|
||
| const onRadioSelect = (_, event) => { | ||
| dispatch({ type: 'backingStorage/setType', payload: event.target.value }); | ||
| dispatch({ | ||
| type: 'currentStep/resetCount', | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <ErrorHandler error={error} loaded={loaded}> | ||
| <Form> | ||
| <Radio | ||
| label={t('ceph-storage-plugin~Use an existing storage class')} | ||
| description={t( | ||
| 'ceph-storage-plugin~Can be used on all platforms except BareMetal. OpenShift Data Foundation will use an infrastructure storage class provided by the hosting platform.', | ||
| )} | ||
| name={RADIO_GROUP_NAME} | ||
| value={BackingStorageType.EXISTING} | ||
| isChecked={type === BackingStorageType.EXISTING} | ||
| onChange={onRadioSelect} | ||
| isDisabled={hasOCS} | ||
| body={ | ||
| showStorageClassSelection && ( | ||
| <StorageClassSelection dispatch={dispatch} selected={storageClass} /> | ||
| ) | ||
| } | ||
| id={`bs-${BackingStorageType.EXISTING}`} | ||
| /> | ||
| <Radio | ||
| label={t('ceph-storage-plugin~Create a new storage class using local devices')} | ||
| description={t( | ||
| 'ceph-storage-plugin~Can be used on any platform having nodes with local devices. The infrastructure storage class is provided by Local Storage Operator on top of the local devices.', | ||
| )} | ||
| name={RADIO_GROUP_NAME} | ||
| value={BackingStorageType.LOCAL_DEVICES} | ||
| isChecked={type === BackingStorageType.LOCAL_DEVICES} | ||
| onChange={onRadioSelect} | ||
| isDisabled={hasOCS} | ||
| id={`bs-${BackingStorageType.LOCAL_DEVICES}`} | ||
| /> | ||
| <Radio | ||
| label={t('ceph-storage-plugin~Connect a new external storage system')} | ||
| description={t( | ||
| 'ceph-storage-plugin~Can be used to connect an external storage platform to OpenShift Data Foundation.', | ||
| )} | ||
| name={RADIO_GROUP_NAME} | ||
| value={BackingStorageType.EXTERNAL} | ||
| isChecked={type === BackingStorageType.EXTERNAL} | ||
| onChange={onRadioSelect} | ||
| isDisabled={externalProviders.length === 0} | ||
| body={ | ||
| showExternalSystemSelection && ( | ||
| <ExternalSystemSelection | ||
| selectedProvider={externalProvider} | ||
| dispatch={dispatch} | ||
| providersList={externalProviders} | ||
| t={t} | ||
| /> | ||
| ) | ||
| } | ||
| id={`bs-${BackingStorageType.EXTERNAL}`} | ||
| /> | ||
| </Form> | ||
| </ErrorHandler> | ||
| ); | ||
| }; | ||
|
|
||
| type BackingStorageProps = WizardCommonProps & { | ||
| storageSystems: StorageSystemKind[]; | ||
| error: any; | ||
| loaded: boolean; | ||
| }; |
114 changes: 114 additions & 0 deletions
114
...e-plugin/src/components/create-storage-system/create-storage-system-steps/create-steps.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import { TFunction } from 'i18next'; | ||
| import { WizardStep } from '@patternfly/react-core'; | ||
| import { ExternalProviderId } from '../../../odf-external-providers/external-providers'; | ||
| import { WizardState } from '../reducer'; | ||
| import { BackingStorageType, StepsId } from '../../../constants/create-storage-system'; | ||
|
|
||
| export const createSteps = ( | ||
| t: TFunction, | ||
| state: WizardState, | ||
| hasStorageCluster: boolean, | ||
| ): WizardStep[] => { | ||
| const { backingStorage, currentStep } = state; | ||
|
|
||
| const commonSteps = { | ||
| capacityAndNodes: { | ||
| id: StepsId.CapacityAndNodes, | ||
| name: t('ceph-storage-plugin~Capacity and nodes'), | ||
| }, | ||
| securityAndNetwork: { | ||
| id: StepsId.SecurityAndNetwork, | ||
| name: t('ceph-storage-plugin~Security and network'), | ||
| }, | ||
| reviewAndCreate: { | ||
| id: StepsId.ReviewAndCreate, | ||
| name: t('ceph-storage-plugin~Review and create'), | ||
| }, | ||
| }; | ||
|
|
||
| const rhcsExternalProviderSteps = [ | ||
| { | ||
| id: StepsId.ConnectionDetails, | ||
| canJumpTo: currentStep >= 2, | ||
| name: t('ceph-storage-plugin~Connection details'), | ||
| }, | ||
| { | ||
| id: StepsId.ReviewAndCreate, | ||
| canJumpTo: currentStep >= 3, | ||
| ...commonSteps.reviewAndCreate, | ||
| }, | ||
| ]; | ||
|
|
||
| const nonRhcsExternalProviderStep = { | ||
| canJumpTo: currentStep >= 2, | ||
| id: StepsId.CreateStorageClass, | ||
| name: t('ceph-storage-plugin~Create storage class'), | ||
| }; | ||
|
|
||
| switch (backingStorage.type) { | ||
| case BackingStorageType.EXISTING: | ||
| return [ | ||
| { | ||
| canJumpTo: currentStep >= 2, | ||
| ...commonSteps.capacityAndNodes, | ||
| }, | ||
| { | ||
| canJumpTo: currentStep >= 3, | ||
| ...commonSteps.securityAndNetwork, | ||
| }, | ||
| { | ||
| canJumpTo: currentStep >= 4, | ||
| ...commonSteps.reviewAndCreate, | ||
| }, | ||
| ]; | ||
| case BackingStorageType.LOCAL_DEVICES: | ||
| return [ | ||
| { | ||
| id: StepsId.CreateLocalVolumeSet, | ||
| canJumpTo: currentStep >= 2, | ||
| name: t('ceph-storage-plugin~Create local volume set'), | ||
| }, | ||
| { | ||
| canJumpTo: currentStep >= 3, | ||
| ...commonSteps.capacityAndNodes, | ||
| }, | ||
| { | ||
| canJumpTo: currentStep >= 4, | ||
| id: StepsId.SecurityAndNetwork, | ||
| ...commonSteps.securityAndNetwork, | ||
| }, | ||
| { | ||
| canJumpTo: currentStep >= 5, | ||
| id: StepsId.ReviewAndCreate, | ||
| ...commonSteps.reviewAndCreate, | ||
| }, | ||
| ]; | ||
| case BackingStorageType.EXTERNAL: | ||
| if (backingStorage.externalProvider === ExternalProviderId.RHCS) { | ||
| return rhcsExternalProviderSteps; | ||
| } | ||
| if (!hasStorageCluster) { | ||
| return [ | ||
| nonRhcsExternalProviderStep, | ||
| { canJumpTo: currentStep >= 3, ...commonSteps.capacityAndNodes }, | ||
| { | ||
| canJumpTo: currentStep >= 4, | ||
| ...commonSteps.securityAndNetwork, | ||
| }, | ||
| { | ||
| canJumpTo: currentStep >= 5, | ||
| ...commonSteps.reviewAndCreate, | ||
| }, | ||
| ]; | ||
| } | ||
| return [ | ||
| nonRhcsExternalProviderStep, | ||
| { | ||
| canJumpTo: currentStep >= 3, | ||
| ...commonSteps.reviewAndCreate, | ||
| }, | ||
| ]; | ||
| default: | ||
| return []; | ||
| } | ||
| }; |
2 changes: 2 additions & 0 deletions
2
...-storage-plugin/src/components/create-storage-system/create-storage-system-steps/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { BackingStorage } from './backing-storage-step/backing-storage'; | ||
| export { createSteps } from './create-steps'; |
Oops, something went wrong.