Refactor the Veeam summary page

scality · Nov 9, 2023 · 28a7f9e · 28a7f9e
1 parent 1694e4d
commit 28a7f9e
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 63 deletions.
diff --git a/src/react/ui-elements/Veeam/VeeamConfiguration.tsx b/src/react/ui-elements/Veeam/VeeamConfiguration.tsx
@@ -116,10 +116,10 @@ const Configuration = () => {
               }}
             ></Controller>
           }
-        ></FormGroup>
+        />
         <FormGroup
           id="name"
-          label="Repository name"
+          label="Bucket name"
           direction="vertical"
           required
           labelHelpTooltip="TODO"
@@ -129,16 +129,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={
@@ -158,13 +158,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/VeeamSummary.tsx b/src/react/ui-elements/Veeam/VeeamSummary.tsx
@@ -1,21 +1,15 @@
-import { Banner, Icon } from '@scality/core-ui';
-import { Box, Button, CopyButton } from '@scality/core-ui/dist/next';
+import { Banner, Icon, Text } from '@scality/core-ui';
+import { Button, CopyButton } from '@scality/core-ui/dist/next';
 import { Stack, Wrap } 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';
 import { CustomModal } from './VeeamTable';
 import { useState } from 'react';
 
-const StyledCopybutton = styled(CopyButton)({
-  height: '1.914rem',
-  width: '11rem',
-});
-
 export const VeeamSummary = () => {
   const [openSummary, setOpenSummaary] = useState<boolean>(true);
   const history = useHistory();
@@ -42,56 +36,68 @@ export const VeeamSummary = () => {
       }
     >
       <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.
@@ -102,10 +108,6 @@ export const VeeamSummary = () => {
           }}
         >
           <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>
@@ -127,16 +129,33 @@ export const VeeamSummary = () => {
             </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>
     </CustomModal>
   );

diff --git a/src/react/ui-elements/Veeam/VeeamTable.tsx b/src/react/ui-elements/Veeam/VeeamTable.tsx
@@ -26,8 +26,16 @@ export default function VeeamTable() {
 
   const columns: Column<{
     action: string;
+    step: number;
     status?: string;
   }>[] = [
+    {
+      Header: 'Step',
+      accessor: 'step',
+      Cell: ({ value }) => {
+        return <Text>{value}</Text>;
+      },
+    },
     {
       Header: 'Action',
       accessor: 'action',

diff --git a/src/react/ui-elements/Veeam/useMockData.ts b/src/react/ui-elements/Veeam/useMockData.ts
@@ -7,35 +7,39 @@ type MockTableData = {
 
 const mockTableData = [
   {
+    step: 1,
     action: 'Create an Account',
     status: undefined,
   },
   {
+    step: 2,
     action: 'Create an User',
     status: undefined,
   },
+  { step: 3, action: 'Create a Bucket', status: undefined },
   {
-    action: 'Create a Bucket',
-    status: undefined,
-  },
-  {
+    step: 4,
     action: 'Create the Veeam policy',
     status: undefined,
   },
   {
+    step: 5,
     action: 'Attach the Veeam policy to the User',
     status: undefined,
   },
   {
-    action: 'Store Veeam use case',
+    step: 6,
+    action: 'Tag bucket as Veeam Bucket',
     status: undefined,
   },
   {
+    step: 7,
     action: 'Enable Smart Object Storage support',
     status: undefined,
   },
   {
-    action: 'See Smart Object Storage capacity',
+    step: 8,
+    action: 'Set Smart Object Storage capacity',
     status: undefined,
   },
 ];