Adds Alert modal for 5 zone mon setup

Signed-off-by: Bipul Adhikari <[email protected]>

packages/odf/modals/configure-mons/configure-mons.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import {
+  ModalBody,
+  ModalFooter,
+  StorageClusterModel,
+  getName,
+  getNamespace,
+  useCustomTranslation,
+} from '@odf/shared';
+import { ModalHeader } from '@odf/shared/modals';
+import { ModalComponent } from '@openshift-console/dynamic-plugin-sdk/lib/app/modal-support/ModalProvider';
+import { k8sPatchResource } from '@openshift-console/dynamic-plugin-sdk/lib/utils/k8s';
+import { Trans } from 'react-i18next';
+import {
+  Alert,
+  Button,
+  Flex,
+  FlexItem,
+  Modal,
+  ModalVariant,
+  Text,
+} from '@patternfly/react-core';
+import { useSafeK8sGet } from '../../hooks';
+import { useODFNamespaceSelector } from '../../redux';
+
+const patch = [
+  {
+    op: 'replace',
+    path: '/spec/managedResources/cephCluster/monCount',
+    value: 5,
+  },
+];
+
+export const LowMonAlertModal: ModalComponent = ({ closeModal }) => {
+  const { odfNamespace } = useODFNamespaceSelector();
+  const { t } = useCustomTranslation();
+
+  const [errorMessage, setErrorMessage] = React.useState('');
+  const [inProgress, setProgress] = React.useState(false);
+
+  const [storageCluster] = useSafeK8sGet(
+    StorageClusterModel,
+    null,
+    odfNamespace
+  );
+  const Header = <ModalHeader>{t('Configure monitor count')}</ModalHeader>;
+
+  const onSubmit = () => {
+    k8sPatchResource({
+      model: StorageClusterModel,
+      resource: {
+        metadata: {
+          name: getName(storageCluster),
+          namespace: getNamespace(storageCluster),
+        },
+      },
+      data: patch,
+    })
+      .then(() => {
+        setProgress(false);
+      })
+      .catch((err) => {
+        setErrorMessage(err);
+      });
+  };
+
+  return (
+    <Modal
+      onClose={closeModal}
+      isOpen={true}
+      variant={ModalVariant.small}
+      header={Header}
+    >
+      <ModalBody>
+        <Trans t={t as any} ns="plugin__odf-console">
+          To enhance system resilience, align Ceph monitors with the available
+          node failure zones.
+        </Trans>
+        <Flex>
+          <FlexItem>{t('Failure domains: 5')}</FlexItem>
+          <FlexItem>{t('Monitor count: 3')}</FlexItem>
+        </Flex>
+        <Text>{t('Recommended monitor count: 5')}</Text>
+        {errorMessage && (
+          <Alert isInline variant="danger" title={t('An error occurred')}>
+            {(errorMessage as any)?.message || errorMessage}
+          </Alert>
+        )}
+      </ModalBody>
+      <ModalFooter inProgress={inProgress}>
+        <Button
+          key="cancel"
+          variant="secondary"
+          onClick={closeModal}
+          data-test-id="modal-cancel-action"
+        >
+          {t('Cancel')}
+        </Button>
+        <Button
+          key="Add"
+          data-test="modal-submit-action"
+          data-test-id="confirm-action"
+          variant="primary"
+          onClick={onSubmit}
+        >
+          {t('Add')}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};