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(
+