From 15436b33c3a6eb884ab46f69b4da420d7b861279 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Mon, 7 Dec 2020 14:51:33 +0100
Subject: [PATCH 01/19] ui/styles: Remove the breadcrumb in Create New Volume
 page

We KILL breadcrumb!

Refs: #2964
---
 ui/src/containers/CreateVolume.js | 27 +++------------------------
 1 file changed, 3 insertions(+), 24 deletions(-)

diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
index 0863a9be04..35621ef323 100644
--- a/ui/src/containers/CreateVolume.js
+++ b/ui/src/containers/CreateVolume.js
@@ -5,7 +5,7 @@ import { Formik, Form } from 'formik';
 import * as yup from 'yup';
 import styled from 'styled-components';
 import Loader from '../components/Loader';
-import { Input, Button, Breadcrumb, Banner, Tooltip } from '@scality/core-ui';
+import { Input, Button, Banner, Tooltip, Checkbox } from '@scality/core-ui';
 import isEmpty from 'lodash.isempty';
 import {
   fetchStorageClassAction,
@@ -18,11 +18,6 @@ import {
   fontWeight,
 } from '@scality/core-ui/dist/style/theme';
 import { SPARSE_LOOP_DEVICE, RAW_BLOCK_DEVICE } from '../constants';
-import {
-  BreadcrumbContainer,
-  BreadcrumbLabel,
-  StyledLink,
-} from '../components/BreadcrumbStyle';
 import { sizeUnits, useQuery } from '../services/utils';
 import { intl } from '../translations/IntlGlobalProvider';
 
@@ -159,7 +154,7 @@ const CreateVolume = (props) => {
 
   const nodes = useSelector((state) => state.app.nodes.list);
   const storageClass = useSelector((state) => state.app.volumes.storageClass);
-  const theme = useSelector((state) => state.config.theme);
+
   const api = useSelector((state) => state.config.api);
 
   useEffect(() => {
@@ -252,23 +247,7 @@ const CreateVolume = (props) => {
   ) : (
     <PageContainer>
       <CreateVolumeFormContainer>
-        <BreadcrumbContainer>
-          <Breadcrumb
-            activeColor={theme.brand.secondary}
-            paths={[
-              <BreadcrumbLabel title={intl.translate('platform')}>
-                {intl.translate('platform')}
-              </BreadcrumbLabel>,
-              <StyledLink to="/volumes">
-                {intl.translate('volumes')}
-              </StyledLink>,
-              <BreadcrumbLabel>
-                {intl.translate('create_new_volume')}
-              </BreadcrumbLabel>,
-            ]}
-          />
-        </BreadcrumbContainer>
-
+        <TitlePage>Create New Volume</TitlePage>
         {isStorageClassExist ? null : (
           <Banner
             variant="warning"

From 79d964d8493abd1b5d9c4d28bd40f0dc2f933bf2 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Tue, 8 Dec 2020 11:26:26 +0100
Subject: [PATCH 02/19] ui/volumes: Set up the form of batch volume creation

Refs: #2964
---
 ui/src/containers/CreateVolume.js | 171 ++++++++++++++++++++++++++++++
 1 file changed, 171 insertions(+)

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(
+                  <SingleVolumeContainer>
+                    <div style={{ paddingTop: `${padding.base}` }}>
+                      {i + 1}-
+                    </div>
+                    <SingleVolumeForm>
+                      <Input
+                        name="multiVolumeName"
+                        value={values.name && `${values.name}${i + 1}`}
+                        label={intl.translate('name')}
+                        error={touched.name && errors.name}
+                        onBlur={handleOnBlur}
+                        onChange={(e) => {
+                          console.log('e', e);
+                        }}
+                      />
+                      {values.type === RAW_BLOCK_DEVICE ? (
+                        <Input
+                          name="path"
+                          value={values.path}
+                          onChange={handleChange('path')}
+                          label={intl.translate('device_path')}
+                          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
+                              id="unit_input"
+                              label=""
+                              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>
+                      )}
+                    </SingleVolumeForm>
+                  </SingleVolumeContainer>,
+                );
+              }
+
               return (
                 <Form>
                   <FormSection>
@@ -497,7 +618,57 @@ const CreateVolume = (props) => {
                         onBlur={handleOnBlur}
                       />
                     )}
+                    <CheckboxContainer>
+                      <Checkbox
+                        name="multiVolumeCreation"
+                        label={'Create multiple volumes?'}
+                        checked={values.multiVolumeCreation}
+                        value={values.multiVolumeCreation}
+                        onChange={handleChange('multiVolumeCreation')}
+                        onBlur={handleOnBlur}
+                      />
+                    </CheckboxContainer>
                   </FormSection>
+
+                  {values.multiVolumeCreation === true && (
+                    <FormSection>
+                      <MultiCreationFormContainer>
+                        <div
+                          style={{
+                            paddingLeft: '40px',
+                            paddingTop: `${padding.large}`,
+                          }}
+                        >
+                          <span
+                            style={{
+                              paddingRight: `${padding.base}`,
+                            }}
+                          >
+                            Number of volume to create
+                          </span>
+                          {/* TODO: Generalize the number input component to core-ui. */}
+                          <InputNumberComponentStyle
+                            type="number"
+                            name="numberOfVolumes"
+                            value={values.numberOfVolumes}
+                            min="1"
+                            onChange={handleChange('numberOfVolumes')}
+                          />
+                        </div>
+                        <div
+                          style={{
+                            paddingLeft: '40px',
+                            paddingTop: `${padding.large}`,
+                          }}
+                        >
+                          Name the Volumes and provide the Device paths. You may
+                          use the defaults or override them.
+                        </div>
+                        {multiVolumeInputs}
+                      </MultiCreationFormContainer>
+                      }
+                    </FormSection>
+                  )}
                   <ActionContainer>
                     <Button
                       text={intl.translate('cancel')}

From 091781ae6388ea82b700758ad213aba70caf0473 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Thu, 10 Dec 2020 15:35:09 +0100
Subject: [PATCH 03/19] ui/utils: Add utility function to generate the linux
 drive name

Refs: #2964
---
 ui/src/services/utils.js      | 45 +++++++++++++++++++++++++++++++++++
 ui/src/services/utils.test.js | 27 +++++++++++++++++++++
 2 files changed, 72 insertions(+)

diff --git a/ui/src/services/utils.js b/ui/src/services/utils.js
index 4f3f51aab1..2e28cc6e4f 100644
--- a/ui/src/services/utils.js
+++ b/ui/src/services/utils.js
@@ -432,3 +432,48 @@ export const usePrevious = (value) => {
   }, [value]); // Only re-run if value changes
   return ref.current;
 };
+
+/**
+ * This function provides the name of the next nth drive name of virtualization-aware disk driver, used by batch volume creation.
+ *
+ * Note that:
+ * the recommended device path only happens with '/dev/vda'. We maybe want to support more kinds of disk drivers depends on the users' needs.
+ *
+ * Drive # —	Name
+ * 1	        vda
+ * 26	        vdz
+ * 27	        vdaa
+ * 28	        vdab
+ * 52	        vdaz
+ * 53	        vdba
+ * 54	        vdbb
+ * 702	      vdzz
+ * 703	      vdaaa
+ * 704	      vdaab
+ * 18278	    vdzzz
+ *
+ * @param {string} devicePath - The device path of the virtualization-aware disk driver.
+ * @param {number} increment  - The number of drive to increase compare to the targe the drive.
+ *
+ * @example
+ * const devicePath = '/dev/vda'
+ *
+ * const nextDevicePath = linuxDrivesNamingIncrement(devicePath, 2)
+ */
+export const linuxDrivesNamingIncrement = (devicePath, increment) => {
+  if (devicePath.match(/^\/dev\/vd[a-z]/) && increment >= 1) {
+    while (increment--) {
+      const lastChar = devicePath.slice(-1);
+      let sub = devicePath.slice(0, -1);
+
+      if (lastChar === 'z' && devicePath.length === 8) {
+        devicePath = '/dev/vdaa';
+      } else {
+        devicePath = sub + String.fromCharCode(lastChar.charCodeAt() + 1);
+      }
+    }
+    return devicePath;
+  } else {
+    return '';
+  }
+};
diff --git a/ui/src/services/utils.test.js b/ui/src/services/utils.test.js
index d923adc7df..c3665ccba9 100644
--- a/ui/src/services/utils.test.js
+++ b/ui/src/services/utils.test.js
@@ -3,6 +3,7 @@ import {
   addMissingDataPoint,
   fromMilliSectoAge,
   useTableSortURLSync,
+  linuxDrivesNamingIncrement,
 } from './utils';
 import { renderHook } from '@testing-library/react-hooks';
 
@@ -272,3 +273,29 @@ describe('useTableSortURLSync hook', () => {
     expect(mockHistoryReplace).toHaveBeenCalledWith('?');
   });
 });
+
+// the tests of the recommended device path
+it('should return next driver', () => {
+  const result = linuxDrivesNamingIncrement('/dev/vda', 1);
+  expect(result).toEqual('/dev/vdb');
+});
+
+it('should return /dev/vdaa after /dev/vdz', () => {
+  const result = linuxDrivesNamingIncrement('/dev/vdz', 1);
+  expect(result).toEqual('/dev/vdaa');
+});
+
+it('should return an empty string if the driver is not virtualization-aware disk driver', () => {
+  const result = linuxDrivesNamingIncrement('/dev/sda', 2);
+  expect(result).toEqual('');
+});
+
+it('should return an empty string if the device path is empty', () => {
+  const result = linuxDrivesNamingIncrement('', 2);
+  expect(result).toEqual('');
+});
+
+it('should return an empty string if the increment is smaller than 1', () => {
+  const result = linuxDrivesNamingIncrement('/dev/vda', 0);
+  expect(result).toEqual('');
+});

From dc105508aa93e2cb07d892e0efa8004e576efa8b Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Thu, 10 Dec 2020 15:38:38 +0100
Subject: [PATCH 04/19] ui/volumes: Add dependents field base on the base field

---
 ui/src/containers/CreateVolume.js | 276 +++++++++++++++++-------------
 1 file changed, 157 insertions(+), 119 deletions(-)

diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
index 36280b3977..84dc315b77 100644
--- a/ui/src/containers/CreateVolume.js
+++ b/ui/src/containers/CreateVolume.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
-import { Formik, Form } from 'formik';
+import { Formik, Form, FieldArray, useFormikContext, useField } from 'formik';
 import * as yup from 'yup';
 import styled from 'styled-components';
 import Loader from '../components/Loader';
@@ -18,7 +18,11 @@ import {
   fontWeight,
 } from '@scality/core-ui/dist/style/theme';
 import { SPARSE_LOOP_DEVICE, RAW_BLOCK_DEVICE } from '../constants';
-import { sizeUnits, useQuery } from '../services/utils';
+import {
+  sizeUnits,
+  useQuery,
+  linuxDrivesNamingIncrement,
+} from '../services/utils';
 import { intl } from '../translations/IntlGlobalProvider';
 
 // We might want to do a factorization later for
@@ -237,16 +241,55 @@ const CreateVolume = (props) => {
     sizeInput: '',
     labels: {},
     multiVolumeCreation: false,
-    // When the multi-volume creation mode is active, the default number is 1.
+    // When the multi-volume creation mode is active, the default/min 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: [],
+    volumes: [{ name: '', path: '' }],
+  };
+
+  // Set the dependend /recommand fields based on the default values of other fields (DevicePath / Size / SizeUnit) in Formik.
+  const RecommendNameField = (props) => {
+    const {
+      values: { name },
+      touched,
+      setFieldValue,
+    } = useFormikContext();
+    const [field, meta] = useField(props);
+    React.useEffect(() => {
+      if (name.trim() !== '' && touched.name) {
+        setFieldValue(props.name, `${name}${props.index + 1}`);
+      }
+    }, [name, touched.name, setFieldValue, props.name, props.index]);
+
+    return (
+      <>
+        <Input {...props} {...field} />
+        {!!meta.touched && !!meta.error && <div>{meta.error}</div>}
+      </>
+    );
+  };
+
+  const RecommendDevicePathField = (props) => {
+    const {
+      values: { path },
+      touched,
+      setFieldValue,
+    } = useFormikContext();
+    const [field, meta] = useField(props);
+    React.useEffect(() => {
+      if (path.trim() !== '' && touched.path) {
+        setFieldValue(
+          props.name,
+          linuxDrivesNamingIncrement(path, props.index + 1),
+        );
+      }
+    }, [path, touched.path, setFieldValue, props.name, props.index]);
+
+    return (
+      <>
+        <Input {...props} {...field} />
+        {!!meta.touched && !!meta.error && <div>{meta.error}</div>}
+      </>
+    );
   };
 
   const volumeNameRegex = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/;
@@ -291,6 +334,14 @@ const CreateVolume = (props) => {
       then: yup.string(),
     }),
     labels: yup.object(),
+    volumes: yup.array().of(
+      yup.object().shape({
+        name: yup
+          .string()
+          .matches(volumeNameRegex, intl.translate('name_error'))
+          .required(''),
+      }),
+    ),
   });
 
   const isStorageClassExist = storageClassesName.length > 0;
@@ -362,6 +413,34 @@ const CreateVolume = (props) => {
                 setFieldValue('labels', labels);
               };
 
+              // Update the volume list base on the current input number
+              const setVolumeNumber = (field, arrayHelpers) => (
+                selectedObj,
+              ) => {
+                const inputVolNum = selectedObj.target.value;
+                const preVolNum = values.numberOfVolumes;
+
+                setFieldValue(field, inputVolNum);
+                var diff = preVolNum - inputVolNum;
+                if (diff > 0) {
+                  // REMOVE volume object from `values.volumes` base on the index
+                  for (var i = inputVolNum; i < preVolNum; i++) {
+                    arrayHelpers.remove(i);
+                  }
+                } else if (diff < 0) {
+                  // PUSH new volume object to `values.volumes`
+                  var absDiff = Math.abs(diff);
+                  while (absDiff--) {
+                    arrayHelpers.push({
+                      name: '',
+                      path: '',
+                      sizeInput: '',
+                      selectedUnit: sizeUnits[3].value,
+                    });
+                  }
+                }
+              };
+
               const optionsStorageClasses = storageClassesName.map((SCName) => {
                 return {
                   label: SCName,
@@ -401,74 +480,6 @@ const CreateVolume = (props) => {
                 };
               });
 
-              const multiVolumeInputs = [];
-              for (let i = 0; i < values.numberOfVolumes; i++) {
-                multiVolumeInputs.push(
-                  <SingleVolumeContainer>
-                    <div style={{ paddingTop: `${padding.base}` }}>
-                      {i + 1}-
-                    </div>
-                    <SingleVolumeForm>
-                      <Input
-                        name="multiVolumeName"
-                        value={values.name && `${values.name}${i + 1}`}
-                        label={intl.translate('name')}
-                        error={touched.name && errors.name}
-                        onBlur={handleOnBlur}
-                        onChange={(e) => {
-                          console.log('e', e);
-                        }}
-                      />
-                      {values.type === RAW_BLOCK_DEVICE ? (
-                        <Input
-                          name="path"
-                          value={values.path}
-                          onChange={handleChange('path')}
-                          label={intl.translate('device_path')}
-                          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
-                              id="unit_input"
-                              label=""
-                              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>
-                      )}
-                    </SingleVolumeForm>
-                  </SingleVolumeContainer>,
-                );
-              }
-
               return (
                 <Form>
                   <FormSection>
@@ -589,8 +600,6 @@ const CreateVolume = (props) => {
                         />
                         <SizeUnitFieldSelectContainer>
                           <Input
-                            id="unit_input"
-                            label=""
                             clearable={false}
                             type="select"
                             options={optionsSizeUnits}
@@ -630,44 +639,73 @@ const CreateVolume = (props) => {
                     </CheckboxContainer>
                   </FormSection>
 
-                  {values.multiVolumeCreation === true && (
-                    <FormSection>
-                      <MultiCreationFormContainer>
-                        <div
-                          style={{
-                            paddingLeft: '40px',
-                            paddingTop: `${padding.large}`,
-                          }}
-                        >
-                          <span
-                            style={{
-                              paddingRight: `${padding.base}`,
-                            }}
-                          >
-                            Number of volume to create
-                          </span>
-                          {/* TODO: Generalize the number input component to core-ui. */}
-                          <InputNumberComponentStyle
-                            type="number"
-                            name="numberOfVolumes"
-                            value={values.numberOfVolumes}
-                            min="1"
-                            onChange={handleChange('numberOfVolumes')}
-                          />
-                        </div>
-                        <div
-                          style={{
-                            paddingLeft: '40px',
-                            paddingTop: `${padding.large}`,
-                          }}
-                        >
-                          Name the Volumes and provide the Device paths. You may
-                          use the defaults or override them.
-                        </div>
-                        {multiVolumeInputs}
-                      </MultiCreationFormContainer>
-                      }
-                    </FormSection>
+                  {values.multiVolumeCreation && (
+                    <MultiCreationFormContainer>
+                      <FieldArray
+                        name="volumes"
+                        render={(arrayHelpers) => (
+                          <div>
+                            <div
+                              style={{
+                                paddingLeft: '40px',
+                                paddingTop: `${padding.large}`,
+                              }}
+                            >
+                              <span
+                                style={{
+                                  paddingRight: `${padding.base}`,
+                                }}
+                              >
+                                Number of volume to create
+                              </span>
+                              {/* TODO: Generalize the number input component to core-ui. */}
+                              <InputNumberComponentStyle
+                                type="number"
+                                name="numberOfVolumes"
+                                value={values.numberOfVolumes}
+                                min="1"
+                                onChange={setVolumeNumber(
+                                  'numberOfVolumes',
+                                  arrayHelpers,
+                                )}
+                              />
+                            </div>
+                            <div
+                              style={{
+                                paddingLeft: '40px',
+                                paddingTop: `${padding.large}`,
+                              }}
+                            >
+                              Name the Volumes and provide the Device paths. You
+                              may use the defaults or override them.
+                            </div>
+                            {values.volumes.map((volume, index) => (
+                              <SingleVolumeContainer key={`volume${index}`}>
+                                <div style={{ paddingTop: `${padding.base}` }}>
+                                  {index + 1}-
+                                </div>
+                                <SingleVolumeForm>
+                                  <RecommendNameField
+                                    name={`volumes[${index}]name`}
+                                    label={intl.translate('name')}
+                                    onBlur={handleOnBlur}
+                                    index={index}
+                                  />
+                                  {values.type === RAW_BLOCK_DEVICE ? (
+                                    <RecommendDevicePathField
+                                      name={`volumes.${index}.path`}
+                                      label={intl.translate('device_path')}
+                                      onBlur={handleOnBlur}
+                                      index={index}
+                                    />
+                                  ) : null}
+                                </SingleVolumeForm>
+                              </SingleVolumeContainer>
+                            ))}
+                          </div>
+                        )}
+                      ></FieldArray>
+                    </MultiCreationFormContainer>
                   )}
                   <ActionContainer>
                     <Button

From 214b5d1e8f9c4ed69a5d2de7cc1fc16ca420772a Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Thu, 10 Dec 2020 16:07:52 +0100
Subject: [PATCH 05/19] ui/package: Upgrade the version of formik to v2

Refs: #2964
---
 ui/package-lock.json | 71 ++++++++++++--------------------------------
 ui/package.json      |  2 +-
 2 files changed, 20 insertions(+), 53 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 0cdeeb1e74..8b1b034f85 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -4144,8 +4144,7 @@
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
           "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "string_decoder": {
           "version": "1.1.1",
@@ -6065,15 +6064,6 @@
         "sha.js": "^2.4.8"
       }
     },
-    "create-react-context": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
-      "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
-      "requires": {
-        "fbjs": "^0.8.0",
-        "gud": "^1.0.0"
-      }
-    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -6644,21 +6634,13 @@
           "dev": true
         },
         "jsonfile": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
+          "integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.6",
-            "universalify": "^2.0.0"
-          },
-          "dependencies": {
-            "universalify": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-              "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-              "dev": true
-            }
+            "universalify": "^1.0.0"
           }
         },
         "lodash": {
@@ -6667,16 +6649,6 @@
           "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
           "dev": true
         },
-        "jsonfile": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
-          "integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.6",
-            "universalify": "^1.0.0"
-          }
-        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -8969,19 +8941,17 @@
       }
     },
     "formik": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/formik/-/formik-1.5.1.tgz",
-      "integrity": "sha512-FBWGBKQkcCE4d5b5l2fKccD9d1QxNxw/0bQTRvp3EjzA8Bnjmsm9H/Oy0375UA8P3FPmfJkF4cXLLdEqK7fP5A==",
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.5.tgz",
+      "integrity": "sha512-KkOsyYmh5xsow+wlbdL9QSkqvbiHSb1RIToBKiooCFW4lyypn+ZlHGjTuuOqUWBqZaI5nCEupeI275Mo6tFBzg==",
       "requires": {
-        "create-react-context": "^0.2.2",
         "deepmerge": "^2.1.1",
-        "hoist-non-react-statics": "^2.5.5",
-        "lodash": "^4.17.11",
-        "lodash-es": "^4.17.11",
-        "prop-types": "^15.6.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.14",
+        "lodash-es": "^4.17.14",
         "react-fast-compare": "^2.0.1",
         "tiny-warning": "^1.0.2",
-        "tslib": "^1.9.3"
+        "tslib": "^1.10.0"
       }
     },
     "forwarded": {
@@ -9301,11 +9271,6 @@
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
     },
-    "gud": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
-      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
-    },
     "gzip-size": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@@ -9466,9 +9431,12 @@
       }
     },
     "hoist-non-react-statics": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
-      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
     },
     "hosted-git-info": {
       "version": "2.8.8",
@@ -18948,8 +18916,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "optional": true
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
         },
         "string_decoder": {
           "version": "1.1.1",
diff --git a/ui/package.json b/ui/package.json
index 4edb2b2d95..29ab26cd8c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -7,7 +7,7 @@
     "@kubernetes/client-node": "github:scality/kubernetes-client-javascript.git#browser-0.10.2-62-g61d8543",
     "@scality/core-ui": "github:scality/core-ui.git#3a7cd45",
     "axios": "^0.18.0",
-    "formik": "1.5.1",
+    "formik": "2.2.5",
     "lodash.isempty": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "oidc-client": "^1.8.0",

From 03e4f76bb2289c8bb55cbe2b7cb4f116f392fc90 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Mon, 14 Dec 2020 09:29:43 +0100
Subject: [PATCH 06/19] ui/ducks/volumes: Change the payload of createVolume to
 an array

Refs: #2964
---
 ui/src/ducks/app/volumes.js      | 132 +++++++++++++++----------------
 ui/src/ducks/app/volumes.test.js | 109 +++++++++++++------------
 2 files changed, 124 insertions(+), 117 deletions(-)

diff --git a/ui/src/ducks/app/volumes.js b/ui/src/ducks/app/volumes.js
index 21b2c8dd83..e4e2189454 100644
--- a/ui/src/ducks/app/volumes.js
+++ b/ui/src/ducks/app/volumes.js
@@ -118,8 +118,8 @@ export const updateStorageClassAction = (payload) => {
   return { type: UPDATE_STORAGECLASS, payload };
 };
 
-export const createVolumeAction = (newVolume) => {
-  return { type: CREATE_VOLUMES, payload: { newVolume } };
+export const createVolumeAction = (newVolumes) => {
+  return { type: CREATE_VOLUMES, payload: { newVolumes } };
 };
 
 export const refreshVolumesAction = () => {
@@ -205,7 +205,7 @@ export function* fetchStorageClass() {
  * This function construct the body that is needed to create a volume.
  * Then it calls K8s API to create it.
  *
- * @param {object} newVolume - fields of the createVolume form
+ * @param {array} newVolume - The array of fields of the createVolume form
  * @param {string} nodeName
  *
  * More examples in volumes.test.js
@@ -213,89 +213,89 @@ export function* fetchStorageClass() {
  *
  * const action = {
  *  payload: {
- *    newVolume: {
+ *    newVolume: [{
  *      name: 'volume1',
  *      node: 'bootrap',
  *      storageClass: 'metalk8s-default',
  *      type: 'sparseLoopDevice',
  *      size: '1Gi'
- *    },
+ *    }],
  *  }
  * };
  *
  * createVolumes(action)
  */
 export function* createVolumes({ payload }) {
-  const { newVolume } = payload;
-
-  const body = {
-    apiVersion: 'storage.metalk8s.scality.com/v1alpha1',
-    kind: 'Volume',
-    metadata: {
-      name: newVolume.name,
-      labels: newVolume.labels,
-    },
-    spec: {
-      nodeName: newVolume.node,
-      storageClassName: newVolume.storageClass,
-      template: {
-        metadata: {
-          labels: newVolume.labels,
+  const { newVolumes } = payload;
+  for (var i = 0; i < newVolumes?.length; i++) {
+    const body = {
+      apiVersion: 'storage.metalk8s.scality.com/v1alpha1',
+      kind: 'Volume',
+      metadata: {
+        name: newVolumes[i].name,
+        labels: newVolumes[i].labels,
+      },
+      spec: {
+        nodeName: newVolumes[i].node,
+        storageClassName: newVolumes[i].storageClass,
+        template: {
+          metadata: {
+            labels: newVolumes[i].labels,
+          },
         },
       },
-    },
-  };
-
-  /**
-   * Size should be set for SPARSE_LOOP_DEVICE
-   * Path should be set for RAW_BLOCK_DEVICE
-   */
-  let isNewVolumeValid =
-    newVolume &&
-    newVolume.name &&
-    newVolume.storageClass &&
-    ((newVolume.type === SPARSE_LOOP_DEVICE && newVolume.size) ||
-      (newVolume.type === RAW_BLOCK_DEVICE && newVolume.path));
-
-  if (isNewVolumeValid) {
-    if (newVolume.type === SPARSE_LOOP_DEVICE) {
-      body.spec.sparseLoopDevice = { size: newVolume.size };
-    } else {
-      body.spec.rawBlockDevice = { devicePath: newVolume.path };
-    }
-
-    const result = yield call(VolumesApi.createVolume, body);
-    if (!result.error) {
-      yield call(
-        history.push,
-        `/volumes/${newVolume.name}/overview?node=${newVolume.node}`,
-      );
-      yield put(
-        addNotificationSuccessAction({
-          title: intl.translate('volume_creation'),
-          message: intl.translate('volume_creation_success', {
-            name: newVolume.name,
+    };
+    /**
+     * Size should be set for SPARSE_LOOP_DEVICE
+     * Path should be set for RAW_BLOCK_DEVICE
+     */
+    let isNewVolumeValid =
+      newVolumes[i] &&
+      newVolumes[i].name &&
+      newVolumes[i].storageClass &&
+      ((newVolumes[i].type === SPARSE_LOOP_DEVICE && newVolumes[i].size) ||
+        (newVolumes[i].type === RAW_BLOCK_DEVICE && newVolumes[i].path));
+
+    if (isNewVolumeValid) {
+      if (newVolumes[i].type === SPARSE_LOOP_DEVICE) {
+        body.spec.sparseLoopDevice = { size: newVolumes[i].size };
+      } else {
+        body.spec.rawBlockDevice = { devicePath: newVolumes[i].path };
+      }
+
+      const result = yield call(VolumesApi.createVolume, body);
+      if (!result.error) {
+        yield call(
+          history.push,
+          `/volumes/${newVolumes[i].name}/overview?node=${newVolumes[i].node}`,
+        );
+        yield put(
+          addNotificationSuccessAction({
+            title: intl.translate('volume_creation'),
+            message: intl.translate('volume_creation_success', {
+              name: newVolumes[i].name,
+            }),
           }),
-        }),
-      );
+        );
+      } else {
+        yield put(
+          addNotificationErrorAction({
+            title: intl.translate('volume_creation'),
+            message: intl.translate('volume_creation_failed', {
+              name: newVolumes[i].name,
+            }),
+          }),
+        );
+      }
     } else {
+      // We might want to change this behavior later
       yield put(
         addNotificationErrorAction({
-          title: intl.translate('volume_creation'),
-          message: intl.translate('volume_creation_failed', {
-            name: newVolume.name,
-          }),
+          title: 'Volume Form Error',
+          message: 'Volume not created, some fields are missing.',
         }),
       );
     }
-  } else {
-    // We might want to change this behavior later
-    yield put(
-      addNotificationErrorAction({
-        title: 'Volume Form Error',
-        message: 'Volume not created, some fields are missing.',
-      }),
-    );
   }
 }
 
diff --git a/ui/src/ducks/app/volumes.test.js b/ui/src/ducks/app/volumes.test.js
index cb3e8b8611..698797a37c 100644
--- a/ui/src/ducks/app/volumes.test.js
+++ b/ui/src/ducks/app/volumes.test.js
@@ -281,20 +281,22 @@ it('does not update PV if there is an error', () => {
 it('create volume with the type sparseloopdevice', () => {
   const action = {
     payload: {
-      newVolume: {
-        name: 'volume1',
-        node: 'bootstrap',
-        storageClass: 'metalk8s-default',
-        type: 'sparseLoopDevice',
-        size: '1Gi',
-        labels: {
-          name: 'carlito',
+      newVolumes: [
+        {
+          name: 'volume1',
+          node: 'bootstrap',
+          storageClass: 'metalk8s-default',
+          type: 'sparseLoopDevice',
+          size: '1Gi',
+          labels: {
+            name: 'carlito',
+          },
         },
-      },
+      ],
     },
   };
 
-  const { newVolume } = action.payload;
+  const { newVolumes } = action.payload;
 
   const gen = createVolumes(action);
 
@@ -302,16 +304,15 @@ it('create volume with the type sparseloopdevice', () => {
     apiVersion: 'storage.metalk8s.scality.com/v1alpha1',
     kind: 'Volume',
     metadata: {
-      name: newVolume.name,
+      name: newVolumes[0].name,
       labels: {
         name: 'carlito',
       },
     },
     spec: {
-      nodeName: newVolume.node,
-      storageClassName: newVolume.storageClass,
-      sparseLoopDevice: { size: newVolume.size },
-      storageClassName: 'metalk8s-default',
+      nodeName: newVolumes[0].node,
+      storageClassName: newVolumes[0].storageClass,
+      sparseLoopDevice: { size: newVolumes[0].size },
       template: {
         metadata: {
           labels: {
@@ -349,7 +350,7 @@ it('create volume with the type sparseloopdevice', () => {
   expect(gen.next(result).value).toEqual(
     call(
       history.push,
-      `/volumes/${newVolume.name}/overview?node=${newVolume.node}`,
+      `/volumes/${newVolumes[0].name}/overview?node=${newVolumes[0].node}`,
     ),
   );
 
@@ -363,34 +364,36 @@ it('create volume with the type sparseloopdevice', () => {
 it('create a volume with the type rawBlockdevice', () => {
   const action = {
     payload: {
-      newVolume: {
-        name: 'volume1',
-        node: 'bootstrap',
-        storageClass: 'metalk8s-default',
-        type: 'rawBlockDevice',
-        path: '/dev/disk1',
-        labels: {
-          name: 'carlito',
+      newVolumes: [
+        {
+          name: 'volume1',
+          node: 'bootstrap',
+          storageClass: 'metalk8s-default',
+          type: 'rawBlockDevice',
+          path: '/dev/disk1',
+          labels: {
+            name: 'carlito',
+          },
         },
-      },
+      ],
     },
   };
-  const { newVolume } = action.payload;
+  const { newVolumes } = action.payload;
   const gen = createVolumes(action);
 
   const body = {
     apiVersion: 'storage.metalk8s.scality.com/v1alpha1',
     kind: 'Volume',
     metadata: {
-      name: newVolume.name,
+      name: newVolumes[0].name,
       labels: {
         name: 'carlito',
       },
     },
     spec: {
-      nodeName: newVolume.node,
-      storageClassName: newVolume.storageClass,
-      rawBlockDevice: { devicePath: newVolume.path },
+      nodeName: newVolumes[0].node,
+      storageClassName: newVolumes[0].storageClass,
+      rawBlockDevice: { devicePath: newVolumes[0].path },
       template: {
         metadata: {
           labels: {
@@ -426,7 +429,7 @@ it('create a volume with the type rawBlockdevice', () => {
   expect(gen.next(result).value).toEqual(
     call(
       history.push,
-      `/volumes/${newVolume.name}/overview?node=${newVolume.node}`,
+      `/volumes/${newVolumes[0].name}/overview?node=${newVolumes[0].node}`,
     ),
   );
   expect(gen.next().value.payload.action.type).toEqual(
@@ -439,12 +442,14 @@ it('create a volume with the type rawBlockdevice', () => {
 it('display a notification when the params are wrong', () => {
   const action = {
     payload: {
-      newVolume: {
-        name: 'volume1',
-        storageClass: 'metalk8s-default',
-        type: 'rawBlockDevice',
-        path: '',
-      },
+      newVolumes: [
+        {
+          name: 'volume1',
+          storageClass: 'metalk8s-default',
+          type: 'rawBlockDevice',
+          path: '',
+        },
+      ],
       nodeName: 'bootstrap',
     },
   };
@@ -458,33 +463,35 @@ it('display a notification when the params are wrong', () => {
 it('does not create a volume when there is an error', () => {
   const action = {
     payload: {
-      newVolume: {
-        name: 'volume1',
-        node: 'bootstrap',
-        storageClass: 'metalk8s-default',
-        type: 'rawBlockDevice',
-        path: '/dev/disk1',
-        labels: {
-          name: 'carlito',
+      newVolumes: [
+        {
+          name: 'volume1',
+          node: 'bootstrap',
+          storageClass: 'metalk8s-default',
+          type: 'rawBlockDevice',
+          path: '/dev/disk1',
+          labels: {
+            name: 'carlito',
+          },
         },
-      },
+      ],
     },
   };
-  const { newVolume } = action.payload;
+  const { newVolumes } = action.payload;
   const gen = createVolumes(action);
   const body = {
     apiVersion: 'storage.metalk8s.scality.com/v1alpha1',
     kind: 'Volume',
     metadata: {
-      name: newVolume.name,
+      name: newVolumes[0].name,
       labels: {
         name: 'carlito',
       },
     },
     spec: {
-      nodeName: newVolume.node,
-      storageClassName: newVolume.storageClass,
-      rawBlockDevice: { devicePath: newVolume.path },
+      nodeName: newVolumes[0].node,
+      storageClassName: newVolumes[0].storageClass,
+      rawBlockDevice: { devicePath: newVolumes[0].path },
       template: {
         metadata: {
           labels: {

From a5cf6a16944c588279070166da2f53022e514d46 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Mon, 14 Dec 2020 10:14:58 +0100
Subject: [PATCH 07/19] ui/utils: Add util function to format the data for
 batch volume

Refs: #2964
---
 ui/src/services/NodeVolumesUtils.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/ui/src/services/NodeVolumesUtils.js b/ui/src/services/NodeVolumesUtils.js
index d94e91870a..f369e41420 100644
--- a/ui/src/services/NodeVolumesUtils.js
+++ b/ui/src/services/NodeVolumesUtils.js
@@ -276,3 +276,28 @@ export const getVolumeListData = createSelector(
     return nodeVolumes.sort((a, b) => compareHealth(b.health, a.health));
   },
 );
+
+export const formatDataForBatchVolumeCreation = (newVolumes) => {
+  const {
+    multiVolumeCreation,
+    volumes,
+    node,
+    labels,
+    type,
+    size,
+    storageClass,
+  } = newVolumes;
+  if (multiVolumeCreation) {
+    // multi volume creation mode
+    return (
+      volumes?.map((volume) => {
+        volume.node = node;
+        volume.labels = labels;
+        volume.type = type;
+        volume.size = size;
+        volume.storageClass = storageClass;
+        return volume;
+      }) ?? []
+    );
+  }
+};

From f53301de7549c667ca115de20fddf8d48e910074 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Mon, 14 Dec 2020 11:02:59 +0100
Subject: [PATCH 08/19] ui/volumes: Adapt the creationVolume container for
 batch volume creation

Refs: #2964
---
 ui/src/containers/CreateVolume.js | 55 ++++++++++++++++++++++++-------
 1 file changed, 44 insertions(+), 11 deletions(-)

diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
index 84dc315b77..9b33979dbc 100644
--- a/ui/src/containers/CreateVolume.js
+++ b/ui/src/containers/CreateVolume.js
@@ -23,6 +23,7 @@ import {
   useQuery,
   linuxDrivesNamingIncrement,
 } from '../services/utils';
+import { formatDataForBatchVolumeCreation } from '../services/NodeVolumesUtils';
 import { intl } from '../translations/IntlGlobalProvider';
 
 // We might want to do a factorization later for
@@ -54,6 +55,8 @@ const ActionContainer = styled.div`
 const CreateVolumeLayout = styled.div`
   display: inline-block;
   margin-top: ${padding.base};
+  overflow-y: scroll;
+  height: 85vh;
   form {
     .sc-input {
       display: inline-flex;
@@ -138,7 +141,8 @@ const LabelsName = styled(LabelsValue)`
 
 const PageContainer = styled.div`
   display: flex;
-  justify-content: space-between;
+  // To avoid the big empty space on the right side of page
+  justify-content: space-around;
 `;
 
 const DocumentationIcon = styled.div`
@@ -153,7 +157,7 @@ const DocumentationIcon = styled.div`
 const TitlePage = styled.div`
   color: ${(props) => props.theme.brand.textPrimary};
   font-size: 24px;
-  padding-left: 40px;
+  padding: ${padding.small} 0 0 ${padding.large};
 `;
 
 const CheckboxContainer = styled.div`
@@ -183,13 +187,18 @@ const MultiCreationFormContainer = styled.div`
 const SingleVolumeContainer = styled.div`
   display: flex;
   align-items: flex-start;
-  padding-top: ${padding.base};
+  padding: ${padding.base} 0 0 ${padding.larger};
 `;
 
 const SingleVolumeForm = styled.div`
   display: flex;
   flex-direction: column;
-  padding-left: ${padding.base};
+  padding-left: ${padding.smaller};
+`;
+
+const InputQuestionMark = styled.i`
+  padding-left: ${padding.small};
+  color: ${(props) => props.theme.brand.info};
 `;
 
 const CreateVolume = (props) => {
@@ -373,9 +382,18 @@ const CreateVolume = (props) => {
             initialValues={initialValues}
             validationSchema={validationSchema}
             onSubmit={(values) => {
-              const newVolume = { ...values };
-              newVolume.size = `${values.sizeInput}${values.selectedUnit}`;
-              createVolume(newVolume);
+              const newVolumes = { ...values };
+              newVolumes.size = `${values.sizeInput}${values.selectedUnit}`;
+              if (newVolumes.multiVolumeCreation) {
+                // batch volume creation
+                const formattedVolumes = formatDataForBatchVolumeCreation(
+                  newVolumes,
+                );
+                createVolume(formattedVolumes);
+              } else {
+                // single volume creation
+                createVolume([newVolumes]);
+              }
             }}
           >
             {(formikProps) => {
@@ -622,7 +640,22 @@ const CreateVolume = (props) => {
                         name="path"
                         value={values.path}
                         onChange={handleChange('path')}
-                        label={intl.translate('device_path')}
+                        label={
+                          <>
+                            {intl.translate('device_path')}
+                            <Tooltip
+                              placement="right"
+                              overlay={
+                                <div style={{ minWidth: '200px' }}>
+                                  A devicePath or a partition mount point.
+                                  Example: "/dev/sdb"
+                                </div>
+                              }
+                            >
+                              <InputQuestionMark className="fas fa-question-circle"></InputQuestionMark>
+                            </Tooltip>
+                          </>
+                        }
                         error={touched.path && errors.path}
                         onBlur={handleOnBlur}
                       />
@@ -647,7 +680,7 @@ const CreateVolume = (props) => {
                           <div>
                             <div
                               style={{
-                                paddingLeft: '40px',
+                                paddingLeft: '60px',
                                 paddingTop: `${padding.large}`,
                               }}
                             >
@@ -672,7 +705,7 @@ const CreateVolume = (props) => {
                             </div>
                             <div
                               style={{
-                                paddingLeft: '40px',
+                                paddingLeft: '60px',
                                 paddingTop: `${padding.large}`,
                               }}
                             >
@@ -728,7 +761,7 @@ const CreateVolume = (props) => {
         </CreateVolumeLayout>
       </CreateVolumeFormContainer>
       <DocumentationIcon>
-        <Tooltip placement="left" overlay={intl.translate('documentation')}>
+        <Tooltip placement="top" overlay={intl.translate('documentation')}>
           <Button
             icon={<i className="fas fa-book-reader fa-lg" />}
             inverted={true}

From 6b4ee9e07c11b19b07380062f8e664d71b33dc86 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Thu, 17 Dec 2020 15:06:26 +0100
Subject: [PATCH 09/19] ui/styles: Fix the scroll bar issue by overflow:auto

"overflow-y: scroll" protentially would display the scrollbar by default
even for non scrollable content, which casue the issue of we have the
scrollbar everywhere.

Refs: #2964
---
 ui/src/components/CommonLayoutStyle.js | 2 +-
 ui/src/components/NodeListTable.js     | 4 ++--
 ui/src/components/NodePageAlertsTab.js | 2 +-
 ui/src/components/NodePagePodsTab.js   | 4 ++--
 ui/src/components/VolumeAlertsTab.js   | 2 +-
 ui/src/components/VolumeListTable.js   | 4 ++--
 ui/src/containers/CreateVolume.js      | 2 +-
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/CommonLayoutStyle.js b/ui/src/components/CommonLayoutStyle.js
index d91068ddc9..fc840db2f0 100644
--- a/ui/src/components/CommonLayoutStyle.js
+++ b/ui/src/components/CommonLayoutStyle.js
@@ -23,7 +23,7 @@ export const RightSidePanel = styled.div`
   flex-direction: column;
   width: 51%;
   /* Make it scrollable for the small laptop screen */
-  overflow-y: scroll;
+  overflow-y: auto;
   margin: 0 ${padding.small} 0 8px;
 `;
 
diff --git a/ui/src/components/NodeListTable.js b/ui/src/components/NodeListTable.js
index 42ba695e0f..2f64eaee83 100644
--- a/ui/src/components/NodeListTable.js
+++ b/ui/src/components/NodeListTable.js
@@ -39,7 +39,7 @@ const NodeListContainer = styled.div`
     width: 100%;
   }
   .ReactTable .rt-thead {
-    overflow-y: scroll;
+    overflow-y: auto;
   }
   table {
     border-spacing: 0;
@@ -112,7 +112,7 @@ const Body = styled.tbody`
   display: block;
   height: calc(100vh - 250px);
   overflow: auto;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 const Cell = styled.td`
diff --git a/ui/src/components/NodePageAlertsTab.js b/ui/src/components/NodePageAlertsTab.js
index 19e619ba0f..eb57dc622b 100644
--- a/ui/src/components/NodePageAlertsTab.js
+++ b/ui/src/components/NodePageAlertsTab.js
@@ -60,7 +60,7 @@ const Body = styled.tbody`
   display: block;
   height: calc(100vh - 250px);
   overflow: auto;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 const ActiveAlertsText = styled.div`
diff --git a/ui/src/components/NodePagePodsTab.js b/ui/src/components/NodePagePodsTab.js
index 85b5dca2d1..770b40d367 100644
--- a/ui/src/components/NodePagePodsTab.js
+++ b/ui/src/components/NodePagePodsTab.js
@@ -19,7 +19,7 @@ const PodTableContainer = styled.div`
   font-size: ${fontSize.base};
   border-color: ${(props) => props.theme.brand.borderLight};
   .ReactTable .rt-thead {
-    overflow-y: scroll;
+    overflow-y: auto;
   }
   table {
     border-spacing: 0;
@@ -49,7 +49,7 @@ const Body = styled.tbody`
   display: block;
   height: calc(100vh - 250px);
   overflow: auto;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 const Cell = styled.td`
diff --git a/ui/src/components/VolumeAlertsTab.js b/ui/src/components/VolumeAlertsTab.js
index 23273930ca..68cca42a75 100644
--- a/ui/src/components/VolumeAlertsTab.js
+++ b/ui/src/components/VolumeAlertsTab.js
@@ -84,7 +84,7 @@ const Body = styled.tbody`
   display: block;
   height: calc(100vh - 250px);
   overflow: auto;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 const ActiveAlertsCard = (props) => {
diff --git a/ui/src/components/VolumeListTable.js b/ui/src/components/VolumeListTable.js
index bbbcfb95d6..1d7eb856a9 100644
--- a/ui/src/components/VolumeListTable.js
+++ b/ui/src/components/VolumeListTable.js
@@ -49,7 +49,7 @@ const VolumeListContainer = styled.div`
     background-color: ${(props) => props.theme.brand.secondaryDark1};
   }
   .ReactTable .rt-thead {
-    overflow-y: scroll;
+    overflow-y: auto;
   }
   table {
     border-spacing: 0;
@@ -126,7 +126,7 @@ const Body = styled.tbody`
   display: block;
   height: calc(100vh - 250px);
   overflow: auto;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 const Cell = styled.td`
diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
index 9b33979dbc..7e10d1c7e4 100644
--- a/ui/src/containers/CreateVolume.js
+++ b/ui/src/containers/CreateVolume.js
@@ -55,7 +55,7 @@ const ActionContainer = styled.div`
 const CreateVolumeLayout = styled.div`
   display: inline-block;
   margin-top: ${padding.base};
-  overflow-y: scroll;
+  overflow-y: auto;
   height: 85vh;
   form {
     .sc-input {

From 317c0c85316e9d9e21c3c0ede42fa8051d974577 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Fri, 18 Dec 2020 10:08:17 +0100
Subject: [PATCH 10/19] ui/volumes: Add unit test for formatVolumeCreationData
 function

Handle the single volume creation case in the utility function instead
of in the createVolume component so that the return of this function
is always an array.

For single volume, return an array with the origin volume.
For batch volume, return an array with the formatted volumes.

Refs: #2964
---
 ui/src/containers/CreateVolume.js        |  15 +--
 ui/src/services/NodeVolumesUtils.js      |   7 +-
 ui/src/services/NodeVolumesUtils.test.js | 145 +++++++++++++++++++++++
 3 files changed, 154 insertions(+), 13 deletions(-)

diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
index 7e10d1c7e4..89b505956a 100644
--- a/ui/src/containers/CreateVolume.js
+++ b/ui/src/containers/CreateVolume.js
@@ -23,7 +23,7 @@ import {
   useQuery,
   linuxDrivesNamingIncrement,
 } from '../services/utils';
-import { formatDataForBatchVolumeCreation } from '../services/NodeVolumesUtils';
+import { formatVolumeCreationData } from '../services/NodeVolumesUtils';
 import { intl } from '../translations/IntlGlobalProvider';
 
 // We might want to do a factorization later for
@@ -384,16 +384,9 @@ const CreateVolume = (props) => {
             onSubmit={(values) => {
               const newVolumes = { ...values };
               newVolumes.size = `${values.sizeInput}${values.selectedUnit}`;
-              if (newVolumes.multiVolumeCreation) {
-                // batch volume creation
-                const formattedVolumes = formatDataForBatchVolumeCreation(
-                  newVolumes,
-                );
-                createVolume(formattedVolumes);
-              } else {
-                // single volume creation
-                createVolume([newVolumes]);
-              }
+
+              const formattedVolumes = formatVolumeCreationData(newVolumes);
+              createVolumes(formattedVolumes);
             }}
           >
             {(formikProps) => {
diff --git a/ui/src/services/NodeVolumesUtils.js b/ui/src/services/NodeVolumesUtils.js
index f369e41420..eb0983af77 100644
--- a/ui/src/services/NodeVolumesUtils.js
+++ b/ui/src/services/NodeVolumesUtils.js
@@ -277,7 +277,7 @@ export const getVolumeListData = createSelector(
   },
 );
 
-export const formatDataForBatchVolumeCreation = (newVolumes) => {
+export const formatVolumeCreationData = (newVolumes) => {
   const {
     multiVolumeCreation,
     volumes,
@@ -288,7 +288,7 @@ export const formatDataForBatchVolumeCreation = (newVolumes) => {
     storageClass,
   } = newVolumes;
   if (multiVolumeCreation) {
-    // multi volume creation mode
+    // multi-volume creation mode
     return (
       volumes?.map((volume) => {
         volume.node = node;
@@ -299,5 +299,8 @@ export const formatDataForBatchVolumeCreation = (newVolumes) => {
         return volume;
       }) ?? []
     );
+  } else {
+    // single volume creation
+    return [newVolumes];
   }
 };
diff --git a/ui/src/services/NodeVolumesUtils.test.js b/ui/src/services/NodeVolumesUtils.test.js
index a1c2fe3377..cefa97d8d4 100644
--- a/ui/src/services/NodeVolumesUtils.test.js
+++ b/ui/src/services/NodeVolumesUtils.test.js
@@ -10,6 +10,7 @@ import {
   isVolumeDeletable,
   volumeGetError,
   getVolumeListData,
+  formatVolumeCreationData,
 } from './NodeVolumesUtils';
 import { stateApp } from './NodeVolumesUtilsData';
 
@@ -506,3 +507,147 @@ it('should return an empty array when there is no volume at all in this platform
   const result = getVolumeListData(stateEmptyVolume, props);
   expect(result).toEqual([]);
 });
+
+// The tests of `formatVolumeCreationData` function
+const singleVolume = {
+  name: 'volume-test',
+  node: 'expansion',
+  storageClass: 'metalk8s',
+  type: 'sparseLoopDevice',
+  path: '',
+  selectedUnit: 'Gi',
+  sizeInput: '2',
+  labels: {},
+  multiVolumeCreation: false,
+  numberOfVolumes: 1,
+  volumes: [
+    {
+      name: '',
+      path: '',
+    },
+  ],
+  size: '2Gi',
+};
+it('should return a single array containing one volume', () => {
+  const result = formatVolumeCreationData(singleVolume);
+  expect(result).toEqual([singleVolume]);
+});
+
+const sparseLoopVolumes = {
+  name: 'batch-volume',
+  node: 'expansion',
+  storageClass: 'metalk8s',
+  type: 'sparseLoopDevice',
+  path: '',
+  selectedUnit: 'Gi',
+  sizeInput: '1',
+  labels: {},
+  multiVolumeCreation: true,
+  numberOfVolumes: '3',
+  volumes: [
+    {
+      name: 'batch-volume1',
+      path: '',
+    },
+    {
+      name: 'batch-volume2',
+      path: '',
+    },
+    {
+      name: 'batch-volume3',
+      path: '',
+    },
+  ],
+  size: '3Gi',
+};
+const rawBlockVolumes = {
+  name: 'batch-volume',
+  node: 'expansion',
+  storageClass: 'metalk8s',
+  type: 'rawBlockDevice',
+  path: '/dev/vda',
+  labels: {},
+  multiVolumeCreation: true,
+  numberOfVolumes: '3',
+  volumes: [
+    {
+      name: 'batch-volume1',
+      path: '/dev/vda',
+    },
+    {
+      name: 'batch-volume2',
+      path: '/dev/vdb',
+    },
+    {
+      name: 'batch-volume3',
+      path: '/dev/vdc',
+    },
+  ],
+};
+
+const batchSparseLoopVolume = [
+  {
+    name: 'batch-volume1',
+    node: 'expansion',
+    path: '',
+    labels: {},
+    type: 'sparseLoopDevice',
+    size: '3Gi',
+    storageClass: 'metalk8s',
+  },
+  {
+    name: 'batch-volume2',
+    node: 'expansion',
+    path: '',
+    labels: {},
+    type: 'sparseLoopDevice',
+    size: '3Gi',
+    storageClass: 'metalk8s',
+  },
+  {
+    name: 'batch-volume3',
+    node: 'expansion',
+    path: '',
+    labels: {},
+    type: 'sparseLoopDevice',
+    size: '3Gi',
+    storageClass: 'metalk8s',
+  },
+];
+
+const batchRawVolume = [
+  {
+    name: 'batch-volume1',
+    node: 'expansion',
+    path: '/dev/vda',
+    labels: {},
+    type: 'rawBlockDevice',
+    storageClass: 'metalk8s',
+  },
+  {
+    name: 'batch-volume2',
+    node: 'expansion',
+    path: '/dev/vdb',
+    labels: {},
+    type: 'rawBlockDevice',
+    storageClass: 'metalk8s',
+  },
+  {
+    name: 'batch-volume3',
+    node: 'expansion',
+    path: '/dev/vdc',
+    labels: {},
+    type: 'rawBlockDevice',
+    storageClass: 'metalk8s',
+  },
+];
+
+it('should return an array with formatted batch volume', () => {
+  const result = formatVolumeCreationData(sparseLoopVolumes);
+  expect(result).toEqual(batchSparseLoopVolume);
+});
+
+it('should return an array with formatted batch rawblock device volume', () => {
+  const result = formatVolumeCreationData(rawBlockVolumes);
+  expect(result).toEqual(batchRawVolume);
+});

From 4ecfc4e73da5fc946e4c6ac03a0d2bb76696f3f7 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Fri, 18 Dec 2020 11:30:02 +0100
Subject: [PATCH 11/19] ui/volumes: Factorize the recommendField

Correct the variable declaration too

Refs: #2964
---
 ui/src/containers/CreateVolume.js | 77 ++++++++++++++-----------------
 ui/src/ducks/app/volumes.js       |  2 +-
 2 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
index 89b505956a..f393e6581a 100644
--- a/ui/src/containers/CreateVolume.js
+++ b/ui/src/containers/CreateVolume.js
@@ -9,7 +9,7 @@ import { Input, Button, Banner, Tooltip, Checkbox } from '@scality/core-ui';
 import isEmpty from 'lodash.isempty';
 import {
   fetchStorageClassAction,
-  createVolumeAction,
+  createVolumesAction,
 } from '../ducks/app/volumes';
 import { fetchNodesAction } from '../ducks/app/nodes';
 import {
@@ -205,7 +205,8 @@ const CreateVolume = (props) => {
   const dispatch = useDispatch();
   const history = useHistory();
 
-  const createVolume = (newVolumes) => dispatch(createVolumeAction(newVolumes));
+  const createVolumes = (newVolumes) =>
+    dispatch(createVolumesAction(newVolumes));
 
   const nodes = useSelector((state) => state.app.nodes.list);
   const storageClass = useSelector((state) => state.app.volumes.storageClass);
@@ -255,43 +256,35 @@ const CreateVolume = (props) => {
     volumes: [{ name: '', path: '' }],
   };
 
-  // Set the dependend /recommand fields based on the default values of other fields (DevicePath / Size / SizeUnit) in Formik.
-  const RecommendNameField = (props) => {
-    const {
-      values: { name },
-      touched,
-      setFieldValue,
-    } = useFormikContext();
+  // Factorized field for the recommended device path and name
+  const RecommendField = (props) => {
+    const { fieldname, name, index } = props;
+    const { values, touched, setFieldValue } = useFormikContext();
     const [field, meta] = useField(props);
-    React.useEffect(() => {
-      if (name.trim() !== '' && touched.name) {
-        setFieldValue(props.name, `${name}${props.index + 1}`);
-      }
-    }, [name, touched.name, setFieldValue, props.name, props.index]);
-
-    return (
-      <>
-        <Input {...props} {...field} />
-        {!!meta.touched && !!meta.error && <div>{meta.error}</div>}
-      </>
-    );
-  };
 
-  const RecommendDevicePathField = (props) => {
-    const {
-      values: { path },
-      touched,
-      setFieldValue,
-    } = useFormikContext();
-    const [field, meta] = useField(props);
     React.useEffect(() => {
-      if (path.trim() !== '' && touched.path) {
-        setFieldValue(
-          props.name,
-          linuxDrivesNamingIncrement(path, props.index + 1),
-        );
+      if (fieldname === 'name') {
+        if (values.name.trim() !== '' && touched.name) {
+          setFieldValue(name, `${values.name}${index + 1}`);
+        }
+      } else if (fieldname === 'path') {
+        if (values.path.trim() !== '' && touched.path) {
+          setFieldValue(
+            name,
+            linuxDrivesNamingIncrement(values.path, index + 1),
+          );
+        }
       }
-    }, [path, touched.path, setFieldValue, props.name, props.index]);
+    }, [
+      setFieldValue,
+      fieldname,
+      name,
+      index,
+      values.name,
+      values.path,
+      touched.path,
+      touched.name,
+    ]);
 
     return (
       <>
@@ -432,21 +425,19 @@ const CreateVolume = (props) => {
                 const preVolNum = values.numberOfVolumes;
 
                 setFieldValue(field, inputVolNum);
-                var diff = preVolNum - inputVolNum;
+                const diff = preVolNum - inputVolNum;
                 if (diff > 0) {
                   // REMOVE volume object from `values.volumes` base on the index
-                  for (var i = inputVolNum; i < preVolNum; i++) {
+                  for (let i = inputVolNum; i < preVolNum; i++) {
                     arrayHelpers.remove(i);
                   }
                 } else if (diff < 0) {
                   // PUSH new volume object to `values.volumes`
-                  var absDiff = Math.abs(diff);
+                  let absDiff = Math.abs(diff);
                   while (absDiff--) {
                     arrayHelpers.push({
                       name: '',
                       path: '',
-                      sizeInput: '',
-                      selectedUnit: sizeUnits[3].value,
                     });
                   }
                 }
@@ -711,18 +702,20 @@ const CreateVolume = (props) => {
                                   {index + 1}-
                                 </div>
                                 <SingleVolumeForm>
-                                  <RecommendNameField
+                                  <RecommendField
                                     name={`volumes[${index}]name`}
                                     label={intl.translate('name')}
                                     onBlur={handleOnBlur}
                                     index={index}
+                                    fieldname="name"
                                   />
                                   {values.type === RAW_BLOCK_DEVICE ? (
-                                    <RecommendDevicePathField
+                                    <RecommendField
                                       name={`volumes.${index}.path`}
                                       label={intl.translate('device_path')}
                                       onBlur={handleOnBlur}
                                       index={index}
+                                      fieldname="path"
                                     />
                                   ) : null}
                                 </SingleVolumeForm>
diff --git a/ui/src/ducks/app/volumes.js b/ui/src/ducks/app/volumes.js
index e4e2189454..c5a2f2842b 100644
--- a/ui/src/ducks/app/volumes.js
+++ b/ui/src/ducks/app/volumes.js
@@ -118,7 +118,7 @@ export const updateStorageClassAction = (payload) => {
   return { type: UPDATE_STORAGECLASS, payload };
 };
 
-export const createVolumeAction = (newVolumes) => {
+export const createVolumesAction = (newVolumes) => {
   return { type: CREATE_VOLUMES, payload: { newVolumes } };
 };
 

From ac5c3ffb0d21c3023ed2bbde2616dd7026826a98 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Fri, 18 Dec 2020 11:46:12 +0100
Subject: [PATCH 12/19] ui/translation: Add missing translation for batch
 volume creation

Refs: #2964
---
 ui/src/containers/CreateVolume.js | 12 ++++++------
 ui/src/translations/en.json       |  6 +++++-
 ui/src/translations/fr.json       |  6 +++++-
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
index f393e6581a..fc3751fc24 100644
--- a/ui/src/containers/CreateVolume.js
+++ b/ui/src/containers/CreateVolume.js
@@ -631,8 +631,7 @@ const CreateVolume = (props) => {
                               placement="right"
                               overlay={
                                 <div style={{ minWidth: '200px' }}>
-                                  A devicePath or a partition mount point.
-                                  Example: "/dev/sdb"
+                                  {intl.translate('device_path_explanation')}
                                 </div>
                               }
                             >
@@ -647,7 +646,7 @@ const CreateVolume = (props) => {
                     <CheckboxContainer>
                       <Checkbox
                         name="multiVolumeCreation"
-                        label={'Create multiple volumes?'}
+                        label={intl.translate('create_multiple_volumes')}
                         checked={values.multiVolumeCreation}
                         value={values.multiVolumeCreation}
                         onChange={handleChange('multiVolumeCreation')}
@@ -673,7 +672,7 @@ const CreateVolume = (props) => {
                                   paddingRight: `${padding.base}`,
                                 }}
                               >
-                                Number of volume to create
+                                {intl.translate('number_volume_create')}
                               </span>
                               {/* TODO: Generalize the number input component to core-ui. */}
                               <InputNumberComponentStyle
@@ -693,8 +692,9 @@ const CreateVolume = (props) => {
                                 paddingTop: `${padding.large}`,
                               }}
                             >
-                              Name the Volumes and provide the Device paths. You
-                              may use the defaults or override them.
+                              {intl.translate(
+                                'default_batch_volume_values_explanation',
+                              )}
                             </div>
                             {values.volumes.map((volume, index) => (
                               <SingleVolumeContainer key={`volume${index}`}>
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
index f7c35a4103..c7dcb86b89 100644
--- a/ui/src/translations/en.json
+++ b/ui/src/translations/en.json
@@ -177,5 +177,9 @@
   "volume_usage": "Volume Usage",
   "usage": "Usage",
   "error_volume_details": "Volume details request has failed.",
-  "not_found": "not found."
+  "not_found": "not found.",
+  "device_path_explanation": "A device or partition path. Example: '/dev/sdb'",
+  "number_volume_create": "Number of volume to create",
+  "default_batch_volume_values_explanation": "Name the Volumes and provide the Device paths. You may use the defaults or override them.",
+  "create_multiple_volumes": "Create multiple volumes?"
 }
diff --git a/ui/src/translations/fr.json b/ui/src/translations/fr.json
index 3a75030484..910130f723 100644
--- a/ui/src/translations/fr.json
+++ b/ui/src/translations/fr.json
@@ -177,5 +177,9 @@
   "volume_usage": "Utilisation du Volume",
   "usage": "Utilisation",
   "error_volume_details": "Échec de la récuperation des details du volume.",
-  "not_found": "introuvable."
+  "not_found": "introuvable.",
+  "device_path_explanation": "Chemin du disque ou de la partition. Exemple : « /dev/sdb »",
+  "number_volume_create": "Nombre de volume à créer",
+  "default_batch_volume_values_explanation": "Nommez les volumes et fournissez les chemins des disques. Vouz pouvez utiliser les valeurs par défaut ou les modifier.",
+  "create_multiple_volumes": "Créer plusieurs volumes?"
 }

From 2083cee0d902f8bad0485f6b9eed7a73926d0906 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Sun, 20 Dec 2020 18:05:10 +0100
Subject: [PATCH 13/19] ui/volumes: Fix the bug of input number doesn't sync
 with form

Ref: #2964
---
 ui/src/containers/CreateVolume.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
index fc3751fc24..66f465f1ee 100644
--- a/ui/src/containers/CreateVolume.js
+++ b/ui/src/containers/CreateVolume.js
@@ -417,7 +417,7 @@ const CreateVolume = (props) => {
                 setFieldValue('labels', labels);
               };
 
-              // Update the volume list base on the current input number
+              // Update the number of the volumes to create base on the input number
               const setVolumeNumber = (field, arrayHelpers) => (
                 selectedObj,
               ) => {
@@ -428,7 +428,7 @@ const CreateVolume = (props) => {
                 const diff = preVolNum - inputVolNum;
                 if (diff > 0) {
                   // REMOVE volume object from `values.volumes` base on the index
-                  for (let i = inputVolNum; i < preVolNum; i++) {
+                  for (let i = preVolNum - 1; i >= inputVolNum; i--) {
                     arrayHelpers.remove(i);
                   }
                 } else if (diff < 0) {

From 5cd9a8738a069a7453a5674dec65f7beebb6c510 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Sun, 20 Dec 2020 18:13:12 +0100
Subject: [PATCH 14/19] ui/volumes: Fix the defaults path start from the input
 path

The recommend default device path should start from the global one

Refs: #2964
---
 ui/src/containers/CreateVolume.js | 5 +----
 ui/src/services/utils.js          | 2 ++
 ui/src/services/utils.test.js     | 9 +++++++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
index 66f465f1ee..192989c8be 100644
--- a/ui/src/containers/CreateVolume.js
+++ b/ui/src/containers/CreateVolume.js
@@ -269,10 +269,7 @@ const CreateVolume = (props) => {
         }
       } else if (fieldname === 'path') {
         if (values.path.trim() !== '' && touched.path) {
-          setFieldValue(
-            name,
-            linuxDrivesNamingIncrement(values.path, index + 1),
-          );
+          setFieldValue(name, linuxDrivesNamingIncrement(values.path, index));
         }
       }
     }, [
diff --git a/ui/src/services/utils.js b/ui/src/services/utils.js
index 2e28cc6e4f..f5d65f7e0f 100644
--- a/ui/src/services/utils.js
+++ b/ui/src/services/utils.js
@@ -473,6 +473,8 @@ export const linuxDrivesNamingIncrement = (devicePath, increment) => {
       }
     }
     return devicePath;
+  } else if (devicePath.match(/^\/dev\/vd[a-z]/) && increment === 0) {
+    return devicePath;
   } else {
     return '';
   }
diff --git a/ui/src/services/utils.test.js b/ui/src/services/utils.test.js
index c3665ccba9..c4b83d0366 100644
--- a/ui/src/services/utils.test.js
+++ b/ui/src/services/utils.test.js
@@ -285,6 +285,11 @@ it('should return /dev/vdaa after /dev/vdz', () => {
   expect(result).toEqual('/dev/vdaa');
 });
 
+it('should return the original path if the increment is 0', () => {
+  const result = linuxDrivesNamingIncrement('/dev/vdc', 0);
+  expect(result).toEqual('/dev/vdc');
+});
+
 it('should return an empty string if the driver is not virtualization-aware disk driver', () => {
   const result = linuxDrivesNamingIncrement('/dev/sda', 2);
   expect(result).toEqual('');
@@ -295,7 +300,7 @@ it('should return an empty string if the device path is empty', () => {
   expect(result).toEqual('');
 });
 
-it('should return an empty string if the increment is smaller than 1', () => {
-  const result = linuxDrivesNamingIncrement('/dev/vda', 0);
+it('should return an empty string if the increment is smaller than 0', () => {
+  const result = linuxDrivesNamingIncrement('/dev/vda', -1);
   expect(result).toEqual('');
 });

From ec0309fa29a41d0716f9002d2c395c70ce900a07 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Mon, 21 Dec 2020 12:17:33 +0100
Subject: [PATCH 15/19] ui/volumes: Change the behaviour of the default
 name/path

We only recommend the name/path for the empty field, means if the global
name/page get updated, the defaults won't change.

Refs: #2964
---
 ui/src/containers/CreateVolume.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
index 192989c8be..4b17a4bba6 100644
--- a/ui/src/containers/CreateVolume.js
+++ b/ui/src/containers/CreateVolume.js
@@ -264,11 +264,19 @@ const CreateVolume = (props) => {
 
     React.useEffect(() => {
       if (fieldname === 'name') {
-        if (values.name.trim() !== '' && touched.name) {
+        if (
+          values.name.trim() !== '' &&
+          touched.name &&
+          values.volumes[index].name === ''
+        ) {
           setFieldValue(name, `${values.name}${index + 1}`);
         }
       } else if (fieldname === 'path') {
-        if (values.path.trim() !== '' && touched.path) {
+        if (
+          values.path.trim() !== '' &&
+          touched.path &&
+          values.volumes[index].path === ''
+        ) {
           setFieldValue(name, linuxDrivesNamingIncrement(values.path, index));
         }
       }
@@ -281,6 +289,7 @@ const CreateVolume = (props) => {
       values.path,
       touched.path,
       touched.name,
+      values.volumes,
     ]);
 
     return (

From 743ce673c5cc7ed9163656946de194d3f71738dd Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Mon, 21 Dec 2020 15:44:47 +0100
Subject: [PATCH 16/19] ui/volumes: Improve the name of the batch volume

Refs: #2964
---
 ui/src/containers/CreateVolume.js        |  9 +++++++--
 ui/src/services/NodeVolumesUtils.js      | 20 ++++++++++++++++++++
 ui/src/services/NodeVolumesUtils.test.js | 16 ++++++++++++++++
 ui/src/services/utils.test.js            |  1 +
 4 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
index 4b17a4bba6..bbb1a0906c 100644
--- a/ui/src/containers/CreateVolume.js
+++ b/ui/src/containers/CreateVolume.js
@@ -23,7 +23,10 @@ import {
   useQuery,
   linuxDrivesNamingIncrement,
 } from '../services/utils';
-import { formatVolumeCreationData } from '../services/NodeVolumesUtils';
+import {
+  formatVolumeCreationData,
+  formatBatchName,
+} from '../services/NodeVolumesUtils';
 import { intl } from '../translations/IntlGlobalProvider';
 
 // We might want to do a factorization later for
@@ -264,12 +267,14 @@ const CreateVolume = (props) => {
 
     React.useEffect(() => {
       if (fieldname === 'name') {
+        // Set the defaults when the field is empty, means even if we change the global value afterwards,
+        // the field of batch volumes will not be override.
         if (
           values.name.trim() !== '' &&
           touched.name &&
           values.volumes[index].name === ''
         ) {
-          setFieldValue(name, `${values.name}${index + 1}`);
+          setFieldValue(name, formatBatchName(values.name, index + 1));
         }
       } else if (fieldname === 'path') {
         if (
diff --git a/ui/src/services/NodeVolumesUtils.js b/ui/src/services/NodeVolumesUtils.js
index eb0983af77..c5f26ab648 100644
--- a/ui/src/services/NodeVolumesUtils.js
+++ b/ui/src/services/NodeVolumesUtils.js
@@ -304,3 +304,23 @@ export const formatVolumeCreationData = (newVolumes) => {
     return [newVolumes];
   }
 };
+
+/**
+ * This function formats the name base on the index
+ * @param {string} name - The name the default volume name
+ * @param {number} index  - The number of index
+ *
+ * @example
+ * const name = 'volume-test'
+ *
+ * const formatedVolumeName = formatBatchName(name, 1)
+ */
+export const formatBatchName = (name, index) => {
+  if (index >= 1) {
+    if (index <= 9) {
+      return `${name}0${index}`;
+    } else if (index >= 10) return `${name}${index}`;
+  } else {
+    return '';
+  }
+};
diff --git a/ui/src/services/NodeVolumesUtils.test.js b/ui/src/services/NodeVolumesUtils.test.js
index cefa97d8d4..9fd7b170f2 100644
--- a/ui/src/services/NodeVolumesUtils.test.js
+++ b/ui/src/services/NodeVolumesUtils.test.js
@@ -11,6 +11,7 @@ import {
   volumeGetError,
   getVolumeListData,
   formatVolumeCreationData,
+  formatBatchName,
 } from './NodeVolumesUtils';
 import { stateApp } from './NodeVolumesUtilsData';
 
@@ -651,3 +652,18 @@ it('should return an array with formatted batch rawblock device volume', () => {
   const result = formatVolumeCreationData(rawBlockVolumes);
   expect(result).toEqual(batchRawVolume);
 });
+
+it('should volume01 when the index is 1', () => {
+  const result = formatBatchName('volume', 1);
+  expect(result).toEqual('volume01');
+});
+
+it('should volume09 when the index is 9', () => {
+  const result = formatBatchName('volume', 9);
+  expect(result).toEqual('volume09');
+});
+
+it('should volume09 when the index is 10', () => {
+  const result = formatBatchName('volume', 10);
+  expect(result).toEqual('volume10');
+});
diff --git a/ui/src/services/utils.test.js b/ui/src/services/utils.test.js
index c4b83d0366..c7ccd2a1f8 100644
--- a/ui/src/services/utils.test.js
+++ b/ui/src/services/utils.test.js
@@ -4,6 +4,7 @@ import {
   fromMilliSectoAge,
   useTableSortURLSync,
   linuxDrivesNamingIncrement,
+  formatBatchName,
 } from './utils';
 import { renderHook } from '@testing-library/react-hooks';
 

From ed0b77cda4206457a86babbd011179f32bc15e12 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Mon, 21 Dec 2020 18:32:27 +0100
Subject: [PATCH 17/19] ui/volumes: Fix the default path bug when the index is
 over 53

Set the max number of the input volume creation to 70, since it frozes
the UI when rendering the form.
We may even want to lower the max number depents on the use case.

Refs: #2964
---
 ui/src/containers/CreateVolume.js | 2 ++
 ui/src/services/utils.js          | 8 +++++++-
 ui/src/services/utils.test.js     | 5 +++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
index bbb1a0906c..61d7cd84a5 100644
--- a/ui/src/containers/CreateVolume.js
+++ b/ui/src/containers/CreateVolume.js
@@ -691,6 +691,8 @@ const CreateVolume = (props) => {
                                 name="numberOfVolumes"
                                 value={values.numberOfVolumes}
                                 min="1"
+                                // Max number of the batch volume creation is 70.
+                                max="70"
                                 onChange={setVolumeNumber(
                                   'numberOfVolumes',
                                   arrayHelpers,
diff --git a/ui/src/services/utils.js b/ui/src/services/utils.js
index f5d65f7e0f..6e2d8bf51c 100644
--- a/ui/src/services/utils.js
+++ b/ui/src/services/utils.js
@@ -464,10 +464,16 @@ export const linuxDrivesNamingIncrement = (devicePath, increment) => {
   if (devicePath.match(/^\/dev\/vd[a-z]/) && increment >= 1) {
     while (increment--) {
       const lastChar = devicePath.slice(-1);
-      let sub = devicePath.slice(0, -1);
+      const sub = devicePath.slice(0, -1);
 
       if (lastChar === 'z' && devicePath.length === 8) {
         devicePath = '/dev/vdaa';
+      } else if (lastChar === 'z' && devicePath.length === 9) {
+        // when the path is `/dev/vdaz`, `/dev/vdbz`,
+        const last2ndChar = devicePath.slice(-2);
+        const subBefore = devicePath.slice(0, -2);
+        devicePath =
+          subBefore + String.fromCharCode(last2ndChar.charCodeAt() + 1) + 'a';
       } else {
         devicePath = sub + String.fromCharCode(lastChar.charCodeAt() + 1);
       }
diff --git a/ui/src/services/utils.test.js b/ui/src/services/utils.test.js
index c7ccd2a1f8..5c6f944fdc 100644
--- a/ui/src/services/utils.test.js
+++ b/ui/src/services/utils.test.js
@@ -286,6 +286,11 @@ it('should return /dev/vdaa after /dev/vdz', () => {
   expect(result).toEqual('/dev/vdaa');
 });
 
+it('should return /dev/vdaa after /dev/vdz', () => {
+  const result = linuxDrivesNamingIncrement('/dev/vdaz', 1);
+  expect(result).toEqual('/dev/vdba');
+});
+
 it('should return the original path if the increment is 0', () => {
   const result = linuxDrivesNamingIncrement('/dev/vdc', 0);
   expect(result).toEqual('/dev/vdc');

From 1db10a8aa70bfad3b137234e7e0f8cca322f9c99 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Tue, 22 Dec 2020 17:19:14 +0100
Subject: [PATCH 18/19] ui/volumes: Set the max number of volume batch creation
 to 70

Refs: #2964
---
 ui/src/containers/CreateVolume.js | 60 +++++++++++++++++++------------
 1 file changed, 38 insertions(+), 22 deletions(-)

diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
index 61d7cd84a5..b629122222 100644
--- a/ui/src/containers/CreateVolume.js
+++ b/ui/src/containers/CreateVolume.js
@@ -29,6 +29,8 @@ import {
 } from '../services/NodeVolumesUtils';
 import { intl } from '../translations/IntlGlobalProvider';
 
+const MAX_VOLUME_BATCH_CREATION = 70;
+
 // We might want to do a factorization later for
 // form styled components
 const CreateVolumeFormContainer = styled.div`
@@ -347,6 +349,11 @@ const CreateVolume = (props) => {
       then: yup.string(),
     }),
     labels: yup.object(),
+    numberOfVolumes: yup
+      .number()
+      .positive()
+      .max(MAX_VOLUME_BATCH_CREATION)
+      .integer(),
     volumes: yup.array().of(
       yup.object().shape({
         name: yup
@@ -692,11 +699,16 @@ const CreateVolume = (props) => {
                                 value={values.numberOfVolumes}
                                 min="1"
                                 // Max number of the batch volume creation is 70.
-                                max="70"
+                                max={`${MAX_VOLUME_BATCH_CREATION}`}
                                 onChange={setVolumeNumber(
                                   'numberOfVolumes',
                                   arrayHelpers,
                                 )}
+                                onBlur={handleOnBlur}
+                                error={
+                                  touched.numberOfVolumes &&
+                                  errors.numberOfVolumes
+                                }
                               />
                             </div>
                             <div
@@ -709,31 +721,35 @@ const CreateVolume = (props) => {
                                 'default_batch_volume_values_explanation',
                               )}
                             </div>
-                            {values.volumes.map((volume, index) => (
-                              <SingleVolumeContainer key={`volume${index}`}>
-                                <div style={{ paddingTop: `${padding.base}` }}>
-                                  {index + 1}-
-                                </div>
-                                <SingleVolumeForm>
-                                  <RecommendField
-                                    name={`volumes[${index}]name`}
-                                    label={intl.translate('name')}
-                                    onBlur={handleOnBlur}
-                                    index={index}
-                                    fieldname="name"
-                                  />
-                                  {values.type === RAW_BLOCK_DEVICE ? (
+                            {values.numberOfVolumes <=
+                              MAX_VOLUME_BATCH_CREATION &&
+                              values.volumes.map((volume, index) => (
+                                <SingleVolumeContainer key={`volume${index}`}>
+                                  <div
+                                    style={{ paddingTop: `${padding.base}` }}
+                                  >
+                                    {index + 1}-
+                                  </div>
+                                  <SingleVolumeForm>
                                     <RecommendField
-                                      name={`volumes.${index}.path`}
-                                      label={intl.translate('device_path')}
+                                      name={`volumes[${index}]name`}
+                                      label={intl.translate('name')}
                                       onBlur={handleOnBlur}
                                       index={index}
-                                      fieldname="path"
+                                      fieldname="name"
                                     />
-                                  ) : null}
-                                </SingleVolumeForm>
-                              </SingleVolumeContainer>
-                            ))}
+                                    {values.type === RAW_BLOCK_DEVICE ? (
+                                      <RecommendField
+                                        name={`volumes.${index}.path`}
+                                        label={intl.translate('device_path')}
+                                        onBlur={handleOnBlur}
+                                        index={index}
+                                        fieldname="path"
+                                      />
+                                    ) : null}
+                                  </SingleVolumeForm>
+                                </SingleVolumeContainer>
+                              ))}
                           </div>
                         )}
                       ></FieldArray>

From 5d584ae766f86d1e515e2400e12731eb3745b099 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Tue, 22 Dec 2020 17:19:40 +0100
Subject: [PATCH 19/19] ui/volumes: When re-check the box only update the
 untouched fields

In order to keep the user customization, edit the global value
(name/path) should not affect the defaults pre-fill of the touched
field.

Unless the users uncheck the box of multi-volume creation and re-check
again, we only update the untouched field with the new global value.

Refs: #2964
---
 ui/src/containers/CreateVolume.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
index b629122222..01c0c1eb3a 100644
--- a/ui/src/containers/CreateVolume.js
+++ b/ui/src/containers/CreateVolume.js
@@ -421,6 +421,21 @@ const CreateVolume = (props) => {
                 return items.find((item) => item.value === selectedValue);
               };
 
+              //if re-check the box again, we should only update/pre-fill the defaults for unchanged field.
+              // to make sure to keep the user customization.
+              const handleCheckboxChange = (field) => (selectedObj) => {
+                setFieldValue(field, selectedObj.target.checked);
+                // Clear the untouched field to get the update from the global value
+                for (let i = 0; i < values.numberOfVolumes; i++) {
+                  if (!touched?.volumes?.[i]?.name) {
+                    setFieldValue(`volumes[${i}]name`, '');
+                  }
+                  if (!touched?.volumes?.[i]?.path) {
+                    setFieldValue(`volumes[${i}]path`, '');
+                  }
+                }
+              };
+
               const addLabel = () => {
                 const labels = values.labels;
                 labels[labelName] = labelValue;
@@ -667,7 +682,7 @@ const CreateVolume = (props) => {
                         label={intl.translate('create_multiple_volumes')}
                         checked={values.multiVolumeCreation}
                         value={values.multiVolumeCreation}
-                        onChange={handleChange('multiVolumeCreation')}
+                        onChange={handleCheckboxChange('multiVolumeCreation')}
                         onBlur={handleOnBlur}
                       />
                     </CheckboxContainer>