Bug 2311867: Prepare cluster for disaster recovery - Greenfield

Signed-off-by: Gowtham Shanmugasundaram <[email protected]>

cypress/support.ts

@@ -56,6 +56,7 @@ Cypress.Commands.add('install', () => {
       cy.get('table').get('input[type="checkbox"]').first().check();
       cy.get('button').contains('Next').click();
       cy.get('button').contains('Next').click();
+      cy.get('button').contains('Next').click();
       cy.get('button')
         .contains('Create StorageSystem')
         .as('Create StorageSystem Button');

locales/en/plugin__odf-console.json

@@ -897,6 +897,8 @@
   "Selected versus Available Capacity": "Selected versus Available Capacity",
   "Out of {{capacity}}": "Out of {{capacity}}",
   "{{displayName}} connection details": "{{displayName}} connection details",
+  "Prepare cluster for disaster recovery (Regional-DR only)": "Prepare cluster for disaster recovery (Regional-DR only)",
+  "Set up the storage system for disaster recovery service with the essential configurations in place. This will subsequently allows seamless implementation of the disaster recovery strategies for your workloads.": "Set up the storage system for disaster recovery service with the essential configurations in place. This will subsequently allows seamless implementation of the disaster recovery strategies for your workloads.",
   "Not connected": "Not connected",
   "Backing storage": "Backing storage",
   "Deployment type: {{deployment}}": "Deployment type: {{deployment}}",
@@ -921,6 +923,8 @@
   "Encryption: {{encryptionStatus}}": "Encryption: {{encryptionStatus}}",
   "In-transit encryption: {{hasInTransitEncryption}}": "In-transit encryption: {{hasInTransitEncryption}}",
   "Network: {{networkType}}": "Network: {{networkType}}",
+  "Data protection": "Data protection",
+  "Regional-DR preparation: {{isRDRPreparationEnabled}}": "Regional-DR preparation: {{isRDRPreparationEnabled}}",
   "Public Network Interface": "Public Network Interface",
   "Select NetworkAttachmentDefinition": "Select NetworkAttachmentDefinition",
   "Cluster Network Interface": "Cluster Network Interface",

packages/ocs/dashboards/persistent-internal/status-card/osd-migration/osd-migration-modal.tsx

@@ -6,7 +6,14 @@ import { getName, getNamespace } from '@odf/shared/selectors';
 import { StorageClusterKind } from '@odf/shared/types';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
-import { Modal, ModalVariant, Button, Alert } from '@patternfly/react-core';
+import {
+  Modal,
+  ModalVariant,
+  Button,
+  Alert,
+  AlertVariant,
+  ButtonVariant,
+} from '@patternfly/react-core';
 
 export const OSDMigrationModal: React.FC<OSDMigrationModalProps> = ({
   isOpen,
@@ -56,16 +63,28 @@ export const OSDMigrationModal: React.FC<OSDMigrationModalProps> = ({
       )}
       <ModalBody>
         {!!errorMessage && (
-          <Alert isInline variant="danger" title={t('An error occurred')}>
+          <Alert
+            isInline
+            variant={AlertVariant.danger}
+            title={t('An error occurred')}
+          >
             {errorMessage}
           </Alert>
         )}
       </ModalBody>
       <ModalFooter>
-        <Button key="close" variant="secondary" onClick={closeModal}>
+        <Button
+          key="close"
+          variant={ButtonVariant.secondary}
+          onClick={closeModal}
+        >
           {t('Cancel')}
         </Button>
-        <Button key="optimize" variant="primary" onClick={handleOptimize}>
+        <Button
+          key="optimize"
+          variant={ButtonVariant.primary}
+          onClick={handleOptimize}
+        >
           {t('Yes, migrate OSDs')}
         </Button>
       </ModalFooter>

packages/ocs/modals/osd-migration/osd-migration-details.tsx

@@ -9,7 +9,7 @@ import {
   StatusIconAndText,
   useModal,
 } from '@openshift-console/dynamic-plugin-sdk';
-import { Button } from '@patternfly/react-core';
+import { Button, ButtonVariant } from '@patternfly/react-core';
 import OSDMigrationModal from '../../dashboards/persistent-internal/status-card/osd-migration/osd-migration-modal';
 
 type OSDMigrationDetailsProps = {
@@ -50,7 +50,7 @@ export const OSDMigrationDetails: React.FC<OSDMigrationDetailsProps> = ({
       <div className="pf-v5-l-flex__item">
         {osdMigrationStatus === OSDMigrationStatus.PENDING && (
           <Button
-            variant="link"
+            variant={ButtonVariant.link}
             onClick={() =>
               launcher(OSDMigrationModal, {
                 isOpen: true,

packages/ocs/modals/osd-migration/osd-migration-modal.tsx

@@ -6,7 +6,14 @@ import { getName, getNamespace } from '@odf/shared/selectors';
 import { StorageClusterKind } from '@odf/shared/types';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
-import { Modal, ModalVariant, Button, Alert } from '@patternfly/react-core';
+import {
+  Modal,
+  ModalVariant,
+  Button,
+  Alert,
+  AlertVariant,
+  ButtonVariant,
+} from '@patternfly/react-core';
 
 export const OSDMigrationModal: React.FC<OSDMigrationModalProps> = ({
   isOpen,
@@ -56,16 +63,28 @@ export const OSDMigrationModal: React.FC<OSDMigrationModalProps> = ({
       )}
       <ModalBody>
         {!!errorMessage && (
-          <Alert isInline variant="danger" title={t('An error occurred')}>
+          <Alert
+            isInline
+            variant={AlertVariant.danger}
+            title={t('An error occurred')}
+          >
             {errorMessage}
           </Alert>
         )}
       </ModalBody>
       <ModalFooter>
-        <Button key="close" variant="secondary" onClick={closeModal}>
+        <Button
+          key="close"
+          variant={ButtonVariant.secondary}
+          onClick={closeModal}
+        >
           {t('Cancel')}
         </Button>
-        <Button key="optimize" variant="primary" onClick={handleOptimize}>
+        <Button
+          key="optimize"
+          variant={ButtonVariant.primary}
+          onClick={handleOptimize}
+        >
           {t('Yes, migrate OSDs')}
         </Button>
       </ModalFooter>

packages/odf/components/create-storage-system/create-steps.tsx

@@ -12,6 +12,7 @@ import {
   CreateLocalVolumeSet,
   SecurityAndNetwork,
   Security,
+  DataProtection,
 } from './create-storage-system-steps';
 import { WizardDispatch, WizardState } from './reducer';
 
@@ -34,6 +35,7 @@ export const createSteps = (
     nodes,
     createLocalVolumeSet,
     connectionDetails,
+    dataProtection,
   } = state;
   const { systemNamespace, externalStorage, deployment } = backingStorage;
   const { encryption, kms } = securityAndNetwork;
@@ -152,6 +154,14 @@ export const createSteps = (
     ),
   };
 
+  // Internal specific step
+  const rhcsInternalProviderSteps: WizardStep = {
+    name: StepsName(t)[Steps.DataProtection],
+    component: (
+      <DataProtection dataProtection={dataProtection} dispatch={dispatch} />
+    ),
+  };
+
   switch (backingStorage.type) {
     case BackingStorageType.EXISTING:
       if (isMCG) {
@@ -200,6 +210,11 @@ export const createSteps = (
           {
             id: 4,
             canJumpTo: stepIdReached >= 4,
+            ...rhcsInternalProviderSteps,
+          },
+          {
+            id: 5,
+            canJumpTo: stepIdReached >= 5,
             ...commonSteps.reviewAndCreate,
           },
         ];
@@ -252,10 +267,15 @@ export const createSteps = (
           id: 4,
         },
         {
+          id: 5,
           canJumpTo: stepIdReached >= 5,
+          ...rhcsInternalProviderSteps,
+        },
+        {
+          canJumpTo: stepIdReached >= 6,
           name: StepsName(t)[Steps.ReviewAndCreate],
           ...commonSteps.reviewAndCreate,
-          id: 5,
+          id: 6,
         },
       ];
     case BackingStorageType.EXTERNAL:

packages/odf/components/create-storage-system/create-storage-system-steps/data-protection-step/data-protection-step.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
+import { Form, Checkbox } from '@patternfly/react-core';
+import { WizardDispatch, WizardState } from '../../reducer';
+
+export const DataProtection: React.FC<DataProtectionProps> = ({
+  dataProtection,
+  dispatch,
+}) => {
+  const { t } = useCustomTranslation();
+
+  return (
+    <Form>
+      <Checkbox
+        id="region-DR-preparation"
+        isChecked={dataProtection.enableRDRPreparation}
+        data-checked-state={dataProtection.enableRDRPreparation}
+        label={t('Prepare cluster for disaster recovery (Regional-DR only)')}
+        description={t(
+          'Set up the storage system for disaster recovery service with the essential configurations in place. This will subsequently allows seamless implementation of the disaster recovery strategies for your workloads.'
+        )}
+        onChange={() =>
+          dispatch({
+            type: 'dataProtection/enableRDRPreparation',
+            payload: !dataProtection.enableRDRPreparation,
+          })
+        }
+      />
+    </Form>
+  );
+};
+
+type DataProtectionProps = {
+  dataProtection: WizardState['dataProtection'];
+  dispatch: WizardDispatch;
+};

packages/odf/components/create-storage-system/create-storage-system-steps/index.ts

@@ -6,3 +6,4 @@ export { ReviewAndCreate } from './review-and-create-step/review-and-create-step
 export { CreateLocalVolumeSet } from './create-local-volume-set-step/create-local-volume-set-step';
 export { SecurityAndNetwork } from './security-and-network-step/security-and-network-step';
 export { EncryptionForm as Security } from './security-and-network-step/encryption';
+export { DataProtection } from './data-protection-step/data-protection-step';

packages/odf/components/create-storage-system/create-storage-system-steps/review-and-create-step/review-and-create-step.tsx

@@ -53,6 +53,7 @@ export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({
     connectionDetails,
     createStorageClass,
     nodes,
+    dataProtection,
   } = state;
   const { capacity, arbiterLocation, enableTaint, enableArbiter } =
     capacityAndNodes;
@@ -101,6 +102,9 @@ export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({
   const totalCpu = getTotalCpu(nodes);
   const totalMemory = getTotalMemory(nodes);
   const zones = getAllZone(nodes);
+  const isRDRPreparationEnabled = dataProtection.enableRDRPreparation
+    ? t('Enabled')
+    : t('Disabled');
 
   return (
     <>
@@ -237,6 +241,15 @@ export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({
           </ListItem>
         </ReviewItem>
       )}
+      {!isMCG && !isRhcs && !isStandaloneExternal && !isProviderMode && (
+        <ReviewItem title={t('Data protection')}>
+          <ListItem>
+            {t('Regional-DR preparation: {{isRDRPreparationEnabled}}', {
+              isRDRPreparationEnabled,
+            })}
+          </ListItem>
+        </ReviewItem>
+      )}
     </>
   );
 };

packages/odf/components/create-storage-system/footer.tsx

@@ -204,6 +204,8 @@ const canJumpToNextStep = (
       );
     case StepsName(t)[Steps.Security]:
       return encryption.hasHandled && kms.providerState.hasHandled;
+    case StepsName(t)[Steps.DataProtection]:
+      return true;
     case StepsName(t)[Steps.ReviewAndCreate]:
       return true;
     default:

packages/odf/components/create-storage-system/payloads.ts

@@ -152,6 +152,7 @@ export const createStorageCluster = async (
     securityAndNetwork,
     nodes,
     backingStorage,
+    dataProtection,
   } = state;
   const { capacity, enableArbiter, arbiterLocation, pvCount } =
     capacityAndNodes;
@@ -164,6 +165,7 @@ export const createStorageCluster = async (
     useExternalPostgres,
     externalPostgres,
   } = backingStorage;
+  const { enableRDRPreparation } = dataProtection;
 
   const isNoProvisioner = storageClass?.provisioner === NO_PROVISIONER;
 
@@ -206,6 +208,7 @@ export const createStorageCluster = async (
     isNFSEnabled,
     isProviderMode,
     shouldSetCephRBDAsDefault,
+    enableRDRPreparation,
     storageClusterNamespace,
     enableNoobaaClientSideCerts: externalPostgres.tls.enableClientSideCerts,
     useExternalPostgres: useExternalPostgres,

packages/odf/components/create-storage-system/reducer.ts

@@ -106,6 +106,9 @@ export const initialState: CreateStorageSystemState = {
     clusterNetwork: null,
     networkType: NetworkType.DEFAULT,
   },
+  dataProtection: {
+    enableRDRPreparation: false,
+  },
 };
 
 type CreateStorageSystemState = {
@@ -158,6 +161,9 @@ type CreateStorageSystemState = {
     networkType: NetworkType;
   };
   createLocalVolumeSet: LocalVolumeSet;
+  dataProtection: {
+    enableRDRPreparation: boolean;
+  };
 };
 
 export type WizardNodeState = {
@@ -393,6 +399,9 @@ export const reducer: WizardReducer = (prevState, action) => {
     case 'securityAndNetwork/setNetworkType':
       newState.securityAndNetwork.networkType = action.payload;
       break;
+    case 'dataProtection/enableRDRPreparation':
+      newState.dataProtection.enableRDRPreparation = action.payload;
+      break;
     default:
       throw new TypeError(`${action} is not a valid reducer action`);
   }
@@ -507,6 +516,10 @@ export type CreateStorageSystemAction =
       type: 'securityAndNetwork/setNetworkType';
       payload: WizardState['securityAndNetwork']['networkType'];
     }
+  | {
+      type: 'dataProtection/enableRDRPreparation';
+      payload: WizardState['dataProtection']['enableRDRPreparation'];
+    }
   | {
       type: 'backingStorage/useExternalPostgres';
       payload: WizardState['backingStorage']['useExternalPostgres'];