ZKUI-397: Refactor the bucket overview tab for Veeam usecase

scality · Nov 6, 2023 · 613649e · 613649e
1 parent 56175e8
commit 613649e
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 24 deletions.
diff --git a/src/react/databrowser/buckets/details/Overview.tsx b/src/react/databrowser/buckets/details/Overview.tsx
@@ -10,7 +10,10 @@ import type { BucketInfo } from '../../../../types/s3';
 import type { AppState } from '../../../../types/state';
 import { useCurrentAccount } from '../../../DataServiceRoleProvider';
 import { getBucketInfo, toggleBucketVersioning } from '../../../actions';
-import { useChangeBucketVersionning } from '../../../next-architecture/domain/business/buckets';
+import {
+  useBucketTagging,
+  useChangeBucketVersionning,
+} from '../../../next-architecture/domain/business/buckets';
 import { Bucket } from '../../../next-architecture/domain/entities/bucket';
 import { ButtonContainer } from '../../../ui-elements/Container';
 import { DeleteBucket } from '../../../ui-elements/DeleteBucket';
@@ -26,6 +29,10 @@ import {
 import { useWorkflows } from '../../../workflow/Workflows';
 import { useEffect, useState } from 'react';
 import { Button } from '@scality/core-ui/dist/next';
+import {
+  VEEAMVERSION11,
+  VEEAMVERSION12,
+} from '../../../ui-elements/Veeam/VeeamConfiguration';
 
 function capitalize(string: string) {
   return string.toLowerCase().replace(/^\w/, (c) => {
@@ -89,6 +96,15 @@ function Overview({ bucket, ingestionStates }: Props) {
   const { account } = useCurrentAccount();
   const [isErrorModalOpen, setIsErrorModalOpen] = useState(false);
 
+  const { tags } = useBucketTagging({ bucketName: bucket.name });
+
+  const isVeeamBucket =
+    tags.status === 'success' &&
+    (tags.value.Usecase === VEEAMVERSION11 ||
+      tags.value.Usecase === VEEAMVERSION12) &&
+    features.includes('Veeam');
+  const isVeeam12 = isVeeamBucket && tags.value.Usecase === VEEAMVERSION12;
+
   useEffect(() => {
     dispatch(getBucketInfo(bucket.name));
   }, [dispatch, bucket.name]);
@@ -208,12 +224,67 @@ function Overview({ bucket, ingestionStates }: Props) {
                   )}
                 </T.Value>
               </T.Row>
+              <T.Row>
+                <T.Key> Location </T.Key>
+                <T.Value>
+                  {bucketInfo.locationConstraint || 'us-east-1'}
+                  {' / '}
+                  <small>
+                    {locations &&
+                      getLocationType(locations[bucketInfo.locationConstraint])}
+                  </small>
+                </T.Value>
+              </T.Row>
+              {features.includes(XDM_FEATURE) && (
+                <T.Row>
+                  <T.Key> Async Metadata updates </T.Key>
+                  <T.Value>
+                    {ingestionValue}
+                    {isIngestion && <HelpAsyncNotification />}
+                  </T.Value>
+                </T.Row>
+              )}
+            </T.GroupContent>
+          </T.Group>
+          {isVeeamBucket && (
+            <T.Group>
+              <T.GroupName>Use-case</T.GroupName>
+              <T.Row>
+                <T.Key>Use-case</T.Key>
+                <T.Value>Backup - {tags.value.Usecase}</T.Value>
+              </T.Row>
+              {isVeeam12 && (
+                <T.Row>
+                  <T.Key> SOSAPI Capacity </T.Key>
+                  <T.GroupValues>
+                    {/* TODO */}
+                    <>5TB</>
+                    <Button
+                      variant="outline"
+                      label="Edit"
+                      icon={<Icon name="Pencil" />}
+                      onClick={() => {
+                        //TODO: open the modal to modify the capacity
+                      }}
+                    />
+                  </T.GroupValues>
+                </T.Row>
+              )}
+            </T.Group>
+          )}
+          <T.Group>
+            <T.GroupName>Data protection</T.GroupName>
+            <T.GroupContent>
               {bucketInfo.objectLockConfiguration.ObjectLockEnabled ===
                 'Enabled' && (
                 <T.Row>
                   <T.Key> Default Object-lock Retention </T.Key>
                   <T.GroupValues>
-                    <div>{getDefaultBucketRetention(bucketInfo)}</div>
+                    {isVeeamBucket ? (
+                      <>Managed by Veeam</>
+                    ) : (
+                      <div>{getDefaultBucketRetention(bucketInfo)}</div>
+                    )}
                     <Button
                       id="edit-retention-btn"
                       variant="outline"
@@ -224,6 +295,7 @@ function Overview({ bucket, ingestionStates }: Props) {
                           `/accounts/${account?.Name}/buckets/${bucket.name}/retention-setting`,
                         );
                       }}
+                      disabled={isVeeamBucket}
                     />
                   </T.GroupValues>
                 </T.Row>
@@ -235,26 +307,6 @@ function Overview({ bucket, ingestionStates }: Props) {
                   <T.Value>Disabled</T.Value>
                 </T.Row>
               )}
-              <T.Row>
-                <T.Key> Location </T.Key>
-                <T.Value>
-                  {bucketInfo.locationConstraint || 'us-east-1'}
-                  {' / '}
-                  <small>
-                    {locations &&
-                      getLocationType(locations[bucketInfo.locationConstraint])}
-                  </small>
-                </T.Value>
-              </T.Row>
-              {features.includes(XDM_FEATURE) && (
-                <T.Row>
-                  <T.Key> Async Metadata updates </T.Key>
-                  <T.Value>
-                    {ingestionValue}
-                    {isIngestion && <HelpAsyncNotification />}
-                  </T.Value>
-                </T.Row>
-              )}
             </T.GroupContent>
           </T.Group>
           <T.Group>

diff --git a/src/react/ui-elements/Veeam/VeeamConfiguration.tsx b/src/react/ui-elements/Veeam/VeeamConfiguration.tsx
@@ -5,8 +5,8 @@ import { Button, Input, Select } from '@scality/core-ui/dist/next';
 import { useRef } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
-const VEEAMVERSION11 = 'Veeam 11';
-const VEEAMVERSION12 = 'Veeam 12';
+export const VEEAMVERSION11 = 'Veeam 11';
+export const VEEAMVERSION12 = 'Veeam 12';
 
 const schema = Joi.object({
   name: Joi.string().required(),