[UI] EVEREST-1381-db-status-details-modal: adding db-details (#628)

* feat: add sharding inputs * chore: disable switching off sharding * fix: reset shards on db type change * chore: improve disabled sharding logic * feat: disable sharding if cluster is paused * EVEREST-1305 sharding API * use operator branch * EVEREST-1303-mongo-sharding: integration of sharding * trigger * EVEREST-1303-mongo-sharding: hiding of some functions * make gen * validation & tests * pretty * make gen * EVEREST-1303-mongo-sharding: fix * EVEREST-1381-db-status-details-modal: adding db-details * EVEREST-1381-db-status-details-modal: hide menu item if no details * chore: lint/format --------- Co-authored-by: Fabio Silva <[email protected]> Co-authored-by: Oksana Grishchenko <[email protected]> Co-authored-by: solovevayaroslavna <[email protected]>
percona · Aug 30, 2024 · c4d9a18 · c4d9a18
1 parent ab02e8c
commit c4d9a18
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 42 deletions.
diff --git a/ui/apps/everest/src/modals/db-status-details-dialog/db-status-details-dialog.messages.ts b/ui/apps/everest/src/modals/db-status-details-dialog/db-status-details-dialog.messages.ts
@@ -0,0 +1,4 @@
+export const Messages = {
+  headerMessage: 'DB status details',
+  cancelMessage: 'Ok',
+};
diff --git a/ui/apps/everest/src/modals/db-status-details-dialog/db-status-details-dialog.tsx b/ui/apps/everest/src/modals/db-status-details-dialog/db-status-details-dialog.tsx
@@ -0,0 +1,45 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  Typography,
+} from '@mui/material';
+import { DialogTitle } from '@percona/ui-lib';
+import { DbCluster } from 'shared-types/dbCluster.types';
+import { Messages } from './db-status-details-dialog.messages';
+
+interface DbStatusDetailsModalProps {
+  isOpen: boolean;
+  closeModal: () => void;
+  dbClusterDetails: NonNullable<DbCluster['status']>['details'];
+}
+const DbStatusDetailsDialog = ({
+  isOpen,
+  closeModal,
+  dbClusterDetails,
+}: DbStatusDetailsModalProps) => {
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={closeModal}
+      data-testid="db-status-details-modal"
+    >
+      <DialogTitle onClose={closeModal}>{Messages.headerMessage}</DialogTitle>
+      <DialogContent sx={{ whiteSpace: 'pre-wrap' }}>
+        <Typography variant="body1">{dbClusterDetails}</Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          onClick={closeModal}
+          data-testid={`db-status-details-modal`}
+        >
+          {Messages.cancelMessage}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default DbStatusDetailsDialog;
diff --git a/ui/apps/everest/src/modals/db-status-details-dialog/index.ts b/ui/apps/everest/src/modals/db-status-details-dialog/index.ts
@@ -0,0 +1 @@
+export { default } from './db-status-details-dialog';
diff --git a/ui/apps/everest/src/pages/databases/dbClusterView.messages.tsx b/ui/apps/everest/src/pages/databases/dbClusterView.messages.tsx
@@ -59,6 +59,7 @@ export const Messages = {
     resume: 'Resume',
     restoreFromBackup: 'Restore from a backup',
     createNewDbFromBackup: 'Create DB from a backup',
+    dbStatusDetails: 'View DB status details',
   },
   dbCluster: {
     noData:

diff --git a/ui/apps/everest/src/pages/db-cluster-details/db-action-button.tsx b/ui/apps/everest/src/pages/db-cluster-details/db-action-button.tsx
@@ -3,6 +3,7 @@ import {
   DeleteOutline,
   PauseCircleOutline,
 } from '@mui/icons-material';
+import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
 import AddIcon from '@mui/icons-material/Add';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import KeyboardReturnIcon from '@mui/icons-material/KeyboardReturn';
@@ -23,6 +24,7 @@ import {
   useGetPermissions,
   useGetPermittedNamespaces,
 } from 'utils/useGetPermissions';
+import DbStatusDetailsDialog from 'modals/db-status-details-dialog/db-status-details-dialog';
 
 export const DbActionButton = ({
   dbCluster,
@@ -36,6 +38,8 @@ export const DbActionButton = ({
   const { dbClusterName, namespace = '' } = useParams();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [openRestoreDbModal, setOpenRestoreDbModal] = useState(false);
+  const [openDbStatusDetailsModal, setOpenDbStatusDetailsModal] =
+    useState(false);
   const [isNewClusterMode, setIsNewClusterMode] = useState(false);
   const isOpen = !!anchorEl;
   const restoring = dbCluster.status?.status === DbClusterStatus.restoring;
@@ -77,6 +81,15 @@ export const DbActionButton = ({
     namespace: namespace,
   });
 
+  //TODO: refactoring: move to component ?
+  const sx = {
+    display: 'flex',
+    gap: 1,
+    alignItems: 'center',
+    px: 2,
+    py: '10px',
+  };
+
   return (
     <Box>
       <Button
@@ -106,13 +119,7 @@ export const DbActionButton = ({
               component={Link}
               to="/databases/edit"
               state={{ selectedDbCluster: dbClusterName, namespace }}
-              sx={{
-                display: 'flex',
-                gap: 1,
-                alignItems: 'center',
-                px: 2,
-                py: '10px',
-              }}
+              sx={sx}
             >
               <BorderColor fontSize="small" /> {Messages.menuItems.edit}
             </MenuItem>
@@ -125,13 +132,7 @@ export const DbActionButton = ({
                 handleDbRestart(dbCluster);
                 closeMenu();
               }}
-              sx={{
-                display: 'flex',
-                gap: 1,
-                alignItems: 'center',
-                px: 2,
-                py: '10px',
-              }}
+              sx={sx}
             >
               <RestartAltIcon /> {Messages.menuItems.restart}
             </MenuItem>
@@ -146,13 +147,7 @@ export const DbActionButton = ({
                 setOpenRestoreDbModal(true);
                 closeMenu();
               }}
-              sx={{
-                display: 'flex',
-                gap: 1,
-                alignItems: 'center',
-                px: 2,
-                py: '10px',
-              }}
+              sx={sx}
             >
               <AddIcon /> {Messages.menuItems.createNewDbFromBackup}
             </MenuItem>
@@ -167,17 +162,23 @@ export const DbActionButton = ({
                 setOpenRestoreDbModal(true);
                 closeMenu();
               }}
-              sx={{
-                display: 'flex',
-                gap: 1,
-                alignItems: 'center',
-                px: 2,
-                py: '10px',
-              }}
+              sx={sx}
             >
               <KeyboardReturnIcon /> {Messages.menuItems.restoreFromBackup}
             </MenuItem>
           )}
+          {dbCluster?.status?.details && (
+            <MenuItem
+              key={6}
+              sx={sx}
+              onClick={() => {
+                setOpenDbStatusDetailsModal(true);
+                closeMenu();
+              }}
+            >
+              <VisibilityOutlinedIcon /> {Messages.menuItems.dbStatusDetails}
+            </MenuItem>
+          )}
           {canUpdate && (
             <MenuItem
               disabled={restoring}
@@ -186,13 +187,7 @@ export const DbActionButton = ({
                 handleDbSuspendOrResumed(dbCluster);
                 closeMenu();
               }}
-              sx={{
-                display: 'flex',
-                gap: 1,
-                alignItems: 'center',
-                px: 2,
-                py: '10px',
-              }}
+              sx={sx}
             >
               <PauseCircleOutline />{' '}
               {isPaused(dbCluster)
@@ -208,13 +203,7 @@ export const DbActionButton = ({
                 handleDeleteDbCluster(dbCluster);
                 closeMenu();
               }}
-              sx={{
-                display: 'flex',
-                gap: 1,
-                alignItems: 'center',
-                px: 2,
-                py: '10px',
-              }}
+              sx={sx}
             >
               <DeleteOutline /> {Messages.menuItems.delete}
             </MenuItem>
@@ -230,6 +219,13 @@ export const DbActionButton = ({
           closeModal={() => setOpenRestoreDbModal(false)}
         />
       )}
+      {openDbStatusDetailsModal && dbCluster?.status?.details && (
+        <DbStatusDetailsDialog
+          isOpen={openDbStatusDetailsModal}
+          closeModal={() => setOpenDbStatusDetailsModal(false)}
+          dbClusterDetails={dbCluster?.status?.details}
+        />
+      )}
       {openDeleteDialog && (
         <CustomConfirmDialog
           inputLabel={Messages.deleteModal.databaseName}

diff --git a/ui/apps/everest/src/shared-types/dbCluster.types.ts b/ui/apps/everest/src/shared-types/dbCluster.types.ts
@@ -118,6 +118,7 @@ export interface StatusSpec {
   activeStorage?: string;
   crVersion: string;
   recommendedCRVersion?: string;
+  details?: string;
 }
 
 export interface DbClusterMetadata {