diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js index 35621ef323..36280b3977 100644 --- a/ui/src/containers/CreateVolume.js +++ b/ui/src/containers/CreateVolume.js @@ -146,6 +146,48 @@ const DocumentationIcon = styled.div` } `; +const TitlePage = styled.div` + color: ${(props) => props.theme.brand.textPrimary}; + font-size: 24px; + padding-left: 40px; +`; + +const CheckboxContainer = styled.div` + padding: ${padding.base} 0 0 ${padding.small}; + .text { + font-size: ${fontSize.base}; + } +`; + +const InputNumberComponentStyle = styled.input` + width: 60px; + height: 25px; + border: solid 1px ${(props) => props.theme.brand.border}; + border-radius: 4px; + background-color: ${(props) => props.theme.brand.primary}; + color: ${(props) => props.theme.brand.textPrimary}; +`; + +const MultiCreationFormContainer = styled.div` + padding-left: ${padding.base}; + display: flex; + flex-direction: column; + color: ${(props) => props.theme.brand.textPrimary}; + font-size: ${fontSize.base}; +`; + +const SingleVolumeContainer = styled.div` + display: flex; + align-items: flex-start; + padding-top: ${padding.base}; +`; + +const SingleVolumeForm = styled.div` + display: flex; + flex-direction: column; + padding-left: ${padding.base}; +`; + const CreateVolume = (props) => { const dispatch = useDispatch(); const history = useHistory(); @@ -194,6 +236,17 @@ const CreateVolume = (props) => { selectedUnit: sizeUnits[3].value, sizeInput: '', labels: {}, + multiVolumeCreation: false, + // When the multi-volume creation mode is active, the default number is 1. + numberOfVolumes: 1, + // MultiVolumes should be the array of objects. + // For example: + // [ + // { name: "volume01'", devicePath: '/dev/sdb' }, + // { name: "volume02'", devicePath: '/dev/sdc' }, + // ... + // ]; + multiVolumes: [], }; const volumeNameRegex = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/; @@ -348,6 +401,74 @@ const CreateVolume = (props) => { }; }); + const multiVolumeInputs = []; + for (let i = 0; i < values.numberOfVolumes; i++) { + multiVolumeInputs.push( + +
+ {i + 1}- +
+ + { + console.log('e', e); + }} + /> + {values.type === RAW_BLOCK_DEVICE ? ( + + ) : ( + + + + + intl.translate('no_results') + } + name="selectedUnit" + onChange={handleSelectChange('selectedUnit')} + value={getSelectedObjectItem( + optionsSizeUnits, + values?.selectedUnit, + )} + error={ + touched.selectedUnit && errors.selectedUnit + } + onBlur={handleOnBlur} + /> + + + )} + +
, + ); + } + return (
@@ -497,7 +618,57 @@ const CreateVolume = (props) => { onBlur={handleOnBlur} /> )} + + + + + {values.multiVolumeCreation === true && ( + + +
+ + Number of volume to create + + {/* TODO: Generalize the number input component to core-ui. */} + +
+
+ Name the Volumes and provide the Device paths. You may + use the defaults or override them. +
+ {multiVolumeInputs} +
+ } +
+ )}