Add Veeam constants and update Veeam configuration

UI
scality · Nov 10, 2023 · 5e99185 · 5e99185
1 parent 9e78f8a
commit 5e99185
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 67 deletions.
diff --git a/src/react/ui-elements/Veeam/VeeamConfiguration.tsx b/src/react/ui-elements/Veeam/VeeamConfiguration.tsx
@@ -6,9 +6,7 @@ import { Button, Input, Select } from '@scality/core-ui/dist/next';
 import { useRef } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { VEEAM_STEPS, VeeamStepsIndexes } from './VeeamSteps';
-
-const VEEAMVERSION11 = 'Veeam 11';
-const VEEAMVERSION12 = 'Veeam 12';
+import { VEEAMVERSION11, VEEAMVERSION12 } from './VeeamConstants';
 
 const schema = Joi.object({
   name: Joi.string().required(),
@@ -67,7 +65,6 @@ const Configuration = () => {
         title: 'Configure ARTESCA for your Use case',
         kind: 'page',
       }}
-      style={{ marginLeft: '10rem' }}
       rightActions={
         <Stack gap="r16">
           <Button
@@ -114,10 +111,10 @@ const Configuration = () => {
               }}
             ></Controller>
           }
-        ></FormGroup>
+        />
         <FormGroup
           id="name"
-          label="Repository name"
+          label="Bucket name"
           direction="vertical"
           required
           labelHelpTooltip="TODO"
@@ -127,16 +124,16 @@ const Configuration = () => {
               id="name"
               type="text"
               autoComplete="off"
-              placeholder="Veeam-repository name"
+              placeholder="Veeam bucket name"
               {...register('name')}
             />
           }
-        ></FormGroup>
+        />
         <FormGroup
           id="enableImmutableBackup"
           label="Immutable backup"
           direction="vertical"
-          help="Enables permanent, unchangeable backups of objects in bucket."
+          help="It enables object-lock on the bucket which means backups will be permanent and unchangeable."
           helpErrorPosition="bottom"
           labelHelpTooltip="TODO"
           content={
@@ -156,13 +153,14 @@ const Configuration = () => {
               }}
             ></Controller>
           }
-        ></FormGroup>
+        />
         {isVeeam12 ? (
           <FormGroup
             id="capacity"
-            label="Repository capacity"
+            label="Max repository capacity"
             direction="vertical"
             error={errors.capacity?.message ?? ''}
+            help="The recommended value is 80% of the platform's total capacity."
             helpErrorPosition="bottom"
             labelHelpTooltip="TODO"
             content={

diff --git a/src/react/ui-elements/Veeam/VeeamConstants.ts b/src/react/ui-elements/Veeam/VeeamConstants.ts
@@ -0,0 +1,3 @@
+export const BUCKET_TAG_USECASE = 'X-Scality-Usecase';
+export const VEEAMVERSION11 = 'Veeam 11';
+export const VEEAMVERSION12 = 'Veeam 12';
diff --git a/src/react/ui-elements/Veeam/VeeamSteps.tsx b/src/react/ui-elements/Veeam/VeeamSteps.tsx
@@ -1,12 +1,12 @@
 import VeeamTable from './VeeamTable';
-import Configuration from './VeeamConfiguration';
+import VeeamConfiguration from './VeeamConfiguration';
 import { VeeamSummary } from './VeeamSummary';
 import { Stepper } from '@scality/core-ui';
 
 export const VEEAM_STEPS = [
   {
     label: 'Configuration',
-    Component: Configuration,
+    Component: VeeamConfiguration,
   },
   {
     label: 'Repository Table',

diff --git a/src/react/ui-elements/Veeam/VeeamSummary.tsx b/src/react/ui-elements/Veeam/VeeamSummary.tsx
@@ -1,19 +1,13 @@
-import { Banner, Form, Icon } from '@scality/core-ui';
-import { Box, Button, CopyButton } from '@scality/core-ui/dist/next';
+import { Banner, Form, Icon, Text } from '@scality/core-ui';
+import { Button, CopyButton } from '@scality/core-ui/dist/next';
 import { Stack } from '@scality/core-ui/dist/spacing';
 import { spacing } from '@scality/core-ui/dist/style/theme';
 import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
 import { Clipboard } from '../Clipboard';
 import { HideCredential } from '../Hide';
 import { ModalBody } from '../Modal';
 import Table, * as T from '../TableKeyValue';
 
-const StyledCopybutton = styled(CopyButton)({
-  height: '1.914rem',
-  width: '11rem',
-});
-
 type VeeamSummaryProps = Record<string, never>;
 
 export const VeeamSummary = (_: VeeamSummaryProps) => {
@@ -25,7 +19,6 @@ export const VeeamSummary = (_: VeeamSummaryProps) => {
         title: 'Veeam Repository preparation summary',
         kind: 'page',
       }}
-      style={{ marginLeft: '10rem' }}
       rightActions={
         <Stack gap="r16">
           <p></p>
@@ -40,56 +33,68 @@ export const VeeamSummary = (_: VeeamSummaryProps) => {
       }
     >
       <ModalBody>
-        <b>
+        <Text isEmphazed>
           The following configuration has been applied in order to make ARTESCA
-          ready for Veeam.
-        </b>
-        <br />
-        <Table
-          style={{
-            marginTop: spacing.sp16,
+          ready for Veeam. <br />
+          You can now use this information to set up the Veeam Server.
+        </Text>{' '}
+        <CopyButton
+          textToCopy={`Username\tveeam\nAccess key ID\tJLVWC9DX45XLY0K9PVEX\nSecret Access key\tEPJGOdLwTK`}
+          label="all"
+          variant="outline"
+          tooltip={{
+            overlay:
+              'Copy all the information below and paste it in a safe place. You will not be able to retrieve the Secret Access key afterwards.',
+            placement: 'right',
           }}
-        >
+          size="inline"
+        />
+        <br />
+        <Table style={{ marginTop: spacing.sp16 }}>
           <T.Body>
             <T.Row>
               <T.Key> Account name </T.Key>
-              <T.Value>veeam-backup</T.Value>
-              <T.ExtraCell>
-                {' '}
-                <Clipboard text={'veeam-backup'} />{' '}
-              </T.ExtraCell>
+              <T.Value> veeam </T.Value>
             </T.Row>
             <T.Row>
-              <T.Key> Bucket </T.Key>
-              <T.Value>veeam-repository</T.Value>
+              <T.Key> Certificate </T.Key>
+              <T.Value>
+                <Button
+                  label="Artesca-CA Root"
+                  variant="outline"
+                  size="inline"
+                  icon={<Icon name="Download" />}
+                  tooltip={{
+                    overlay:
+                      'Download the Artesca-CA root certificate and add it to your Veeam Server.',
+                    placement: 'right',
+                  }}
+                ></Button>{' '}
+              </T.Value>
+            </T.Row>
+            <T.Row>
+              <T.Key> Service point </T.Key>
+              <T.Value> https://s3.pod-choco.local </T.Value>
               <T.ExtraCell>
                 {' '}
-                <Clipboard text={'veeam-repository'} />{' '}
+                <Clipboard text={'https://s3.pod-choco.local'} />{' '}
               </T.ExtraCell>
             </T.Row>
             <T.Row>
-              <T.Key> Immutable backup </T.Key>
-              <T.Value>Active</T.Value>
-            </T.Row>
-            <T.Row>
-              <T.Key> Service point </T.Key>
-              <T.Value>https://s3.pod-choco.local</T.Value>
+              <T.Key> Region </T.Key>
+              <T.Value> us-east-1 </T.Value>
               <T.ExtraCell>
                 {' '}
-                <Clipboard text={'https://s3.pod-choco.local'} />{' '}
+                <Clipboard text={'us-east-1'} />{' '}
               </T.ExtraCell>
             </T.Row>
           </T.Body>
         </Table>
         <br />
-        <br />
-        <br />
-        <b>Access keys creation</b>
+        <b>Credentials</b>
         <br />
         <br />
         <Banner icon={<Icon name="Exclamation-triangle" />} variant="warning">
-          A Root user Access key ID and its Secret Access key have been created.{' '}
-          <br />
           The Secret Access key cannot be retrieved afterwards, so make sure to
           keep and secure it now. <br />
           You will be able to create new Access keys at any time.
@@ -100,10 +105,6 @@ export const VeeamSummary = (_: VeeamSummaryProps) => {
           }}
         >
           <T.Body>
-            <T.Row>
-              <T.Key> Account name </T.Key>
-              <T.Value>veeam</T.Value>
-            </T.Row>
             <T.Row>
               <T.Key> Access key ID </T.Key>
               <T.Value>JLVWC9DX45XLY0K9PVEX</T.Value>
@@ -125,16 +126,33 @@ export const VeeamSummary = (_: VeeamSummaryProps) => {
             </T.Row>
           </T.Body>
         </Table>
-        <Box
-          display={'flex'}
-          style={{ alignItems: 'end', flexDirection: 'column' }}
-        >
-          <StyledCopybutton
-            textToCopy={`Username\tveeam\nAccess key ID\tJLVWC9DX45XLY0K9PVEX\nSecret Access key\tEPJGOdLwTK`}
-            label="to Clipboard"
-            variant="outline"
-          />
-        </Box>
+        <br />
+        <b>Bucket</b>
+        <br />
+        <br />
+        <Table>
+          <T.Body>
+            <T.Row>
+              <T.Key> Name </T.Key>
+              <T.Value> veeam-bucket </T.Value>
+              <T.ExtraCell>
+                {' '}
+                <Clipboard text={'veeam-repository'} />{' '}
+              </T.ExtraCell>
+            </T.Row>
+            <T.Row>
+              <T.Key> Immutable backup </T.Key>
+              <T.Value>
+                Active
+                <br />
+                <Text variant="Smaller" color="textSecondary">
+                  Make sure to check the "Make recent backups immutable"
+                  checkbox when configuring the bucket in the Veeam Server.
+                </Text>
+              </T.Value>
+            </T.Row>
+          </T.Body>
+        </Table>
       </ModalBody>
     </Form>
   );

diff --git a/src/react/ui-elements/Veeam/VeeamTable.tsx b/src/react/ui-elements/Veeam/VeeamTable.tsx
@@ -111,7 +111,6 @@ export default function VeeamTable(_: VeeamTableProps) {
         title: 'Configure ARTESCA for Veeam',
         kind: 'page',
       }}
-      style={{ marginLeft: '10rem' }}
       rightActions={
         <Stack gap="r16">
           <Button

diff --git a/src/react/ui-elements/Veeam/useMockData.ts b/src/react/ui-elements/Veeam/useMockData.ts
@@ -27,15 +27,15 @@ const mockTableData = [
     status: undefined,
   },
   {
-    action: 'Store Veeam use case',
+    action: 'Tag bucket as Veeam Bucket',
     status: undefined,
   },
   {
     action: 'Enable Smart Object Storage support',
     status: undefined,
   },
   {
-    action: 'See Smart Object Storage capacity',
+    action: 'Set Smart Object Storage capacity',
     status: undefined,
   },
 ];