Skip to content

Commit

Permalink
ui/volumes: Add switch case for the volume type specific fields
Browse files Browse the repository at this point in the history 
Refs: #3244
  • Loading branch information
@ChengYanJin
ChengYanJin committed Jun 3, 2021
1 parent 5f65079 commit 9e0ba21
Showing 1 changed file with 83 additions and 98 deletions.
181 changes: 83 additions & 98 deletions ui/src/containers/CreateVolume.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -582,6 +582,88 @@ const CreateVolume = (props) => {
};
});

const sizeInputCombinedField = () => {
return (
<SizeFieldContainer>
<Input
name="sizeInput"
type="number"
min="1"
value={values.sizeInput}
onChange={handleChange('sizeInput')}
label={`${intl.translate('volume_size')}*`}
error={touched.sizeInput && errors.sizeInput}
onBlur={handleOnBlur}
/>
<SizeUnitFieldSelectContainer>
<Input
clearable={false}
type="select"
options={optionsSizeUnits}
noOptionsMessage={() => intl.translate('no_results')}
name="selectedUnit"
onChange={handleSelectChange('selectedUnit')}
value={getSelectedObjectItem(
optionsSizeUnits,
values?.selectedUnit,
)}
error={touched.selectedUnit && errors.selectedUnit}
onBlur={handleOnBlur}
/>
</SizeUnitFieldSelectContainer>
</SizeFieldContainer>
);
};

// render the fields specifically for different volume types
const renderVolumeTypeSpecificFields = (volumeType) => {
switch (volumeType) {
case SPARSE_LOOP_DEVICE:
return sizeInputCombinedField();
case RAW_BLOCK_DEVICE:
return (
<Input
name="path"
value={values.path}
onChange={handleChange('path')}
label={
<>
{`${intl.translate('device_path')}*`}
<Tooltip
placement="right"
overlay={
<div style={{ minWidth: '200px' }}>
{intl.translate('device_path_explanation')}
</div>
}
>
<InputQuestionMark className="fas fa-question-circle"></InputQuestionMark>
</Tooltip>
</>
}
error={touched.path && errors.path}
onBlur={handleOnBlur}
/>
);
case LVM_LOGICAL_VOLUME:
return (
<>
{sizeInputCombinedField()}
<Input
name="vgName"
value={values.vgName}
onChange={handleChange('vgName')}
label={`Volume Group Name*`}
error={touched.vgName && errors.vgName}
onBlur={handleOnBlur}
/>
</>
);
default:
return;
}
};

return (
<Form>
<FormSection>
Expand Down Expand Up @@ -701,104 +783,7 @@ const CreateVolume = (props) => {
error={touched.type && errors.type}
onBlur={handleOnBlur}
/>
{values.type === SPARSE_LOOP_DEVICE ? (
<SizeFieldContainer>
<Input
name="sizeInput"
type="number"
min="1"
value={values.sizeInput}
onChange={handleChange('sizeInput')}
label={`${intl.translate('volume_size')}*`}
error={touched.sizeInput && errors.sizeInput}
onBlur={handleOnBlur}
/>
<SizeUnitFieldSelectContainer>
<Input
clearable={false}
type="select"
options={optionsSizeUnits}
noOptionsMessage={() =>
intl.translate('no_results')
}
name="selectedUnit"
onChange={handleSelectChange('selectedUnit')}
value={getSelectedObjectItem(
optionsSizeUnits,
values?.selectedUnit,
)}
error={touched.selectedUnit && errors.selectedUnit}
onBlur={handleOnBlur}
/>
</SizeUnitFieldSelectContainer>
</SizeFieldContainer>
) : values.type === RAW_BLOCK_DEVICE ? (
<Input
name="path"
value={values.path}
onChange={handleChange('path')}
label={
<>
{`${intl.translate('device_path')}*`}
<Tooltip
placement="right"
overlay={
<div style={{ minWidth: '200px' }}>
{intl.translate('device_path_explanation')}
</div>
}
>
<InputQuestionMark className="fas fa-question-circle"></InputQuestionMark>
</Tooltip>
</>
}
error={touched.path && errors.path}
onBlur={handleOnBlur}
/>
) : (
<>
<SizeFieldContainer>
<Input
name="sizeInput"
type="number"
min="1"
value={values.sizeInput}
onChange={handleChange('sizeInput')}
label={`${intl.translate('volume_size')}*`}
error={touched.sizeInput && errors.sizeInput}
onBlur={handleOnBlur}
/>
<SizeUnitFieldSelectContainer>
<Input
clearable={false}
type="select"
options={optionsSizeUnits}
noOptionsMessage={() =>
intl.translate('no_results')
}
name="selectedUnit"
onChange={handleSelectChange('selectedUnit')}
value={getSelectedObjectItem(
optionsSizeUnits,
values?.selectedUnit,
)}
error={
touched.selectedUnit && errors.selectedUnit
}
onBlur={handleOnBlur}
/>
</SizeUnitFieldSelectContainer>
</SizeFieldContainer>
<Input
name="vgName"
value={values.vgName}
onChange={handleChange('vgName')}
label={`Volume Group Name*`}
error={touched.vgName && errors.vgName}
onBlur={handleOnBlur}
/>
</>
)}
{renderVolumeTypeSpecificFields(values.type)}
<CheckboxContainer>
<Checkbox
name="multiVolumeCreation"
Expand Down

0 comments on commit 9e0ba21

Please sign in to comment.