[UI] EVEREST-1066 Add backups list to db overview card #796

percona · Oct 31, 2024 · 623a63c · 623a63c
1 parent 7f2dbea
commit 623a63c
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 4 deletions.
diff --git a/ui/apps/everest/src/components/status-field/status-field.types.ts b/ui/apps/everest/src/components/status-field/status-field.types.ts
@@ -11,7 +11,7 @@ export type BaseStatus =
 
 export type StatusFieldProps<T extends string | number | symbol> = {
   status: T;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   statusMap: Record<T, BaseStatus>;
   dataTestId?: string;
   iconProps?: StatusIconProps;

diff --git a/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/backups-details.tsx b/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/backups-details.tsx
@@ -18,14 +18,25 @@ import OverviewSection from '../overview-section';
 import { BackupsDetailsOverviewCardProps } from './card.types';
 import OverviewSectionRow from '../overview-section-row';
 import { Messages } from '../cluster-overview.messages';
-import { Button, Stack } from '@mui/material';
+import { Box, Button, Stack, Typography } from '@mui/material';
 import { Link, useMatch } from 'react-router-dom';
 import { DBClusterDetailsTabs } from '../../db-cluster-details.types';
 import OverviewSectionText from '../overview-section-text/overview-section-text';
 import { getTimeSelectionPreviewMessage } from '../../../database-form/database-preview/database.preview.messages';
 import { getFormValuesFromCronExpression } from '../../../../components/time-selection/time-selection.utils';
+import { useDbBackups } from 'hooks';
+import { Table } from '@percona/ui-lib';
+import { Backup, BackupStatus } from 'shared-types/backups.types';
+import { BACKUP_STATUS_TO_BASE_STATUS } from 'pages/db-cluster-details/backups/backups-list/backups-list.constants';
+import StatusField from 'components/status-field';
+import { useMemo } from 'react';
+import { MRT_ColumnDef } from 'material-react-table';
+import { DATE_FORMAT } from 'consts';
+import { format } from 'date-fns';
 
 export const BackupsDetails = ({
+  dbClusterName,
+  namespace,
   schedules,
   pitrEnabled,
   pitrStorageName,
@@ -34,6 +45,43 @@ export const BackupsDetails = ({
   showStorage = true,
 }: BackupsDetailsOverviewCardProps) => {
   const routeMatch = useMatch('/databases/:namespace/:dbClusterName/:tabs');
+  const { data: backups = [] } = useDbBackups(dbClusterName!, namespace!, {
+    refetchInterval: 10 * 1000,
+  });
+
+  const columns = useMemo<MRT_ColumnDef<Backup>[]>(
+    () => [
+      {
+        accessorKey: 'state',
+        header: '',
+        maxSize: 20,
+        Cell: ({ cell }) => (
+          <StatusField
+            status={cell.getValue<BackupStatus>()}
+            statusMap={BACKUP_STATUS_TO_BASE_STATUS}
+          />
+        ),
+      },
+      {
+        accessorKey: 'created',
+        header: '',
+        maxSize: 150,
+        Cell: ({ cell }) =>
+          cell.getValue<Date>()
+            ? format(cell.getValue<Date>(), DATE_FORMAT)
+            : '',
+      },
+      {
+        accessorKey: 'completed',
+        header: '',
+        Cell: ({ cell }) =>
+          cell.getValue<Date>()
+            ? format(cell.getValue<Date>(), DATE_FORMAT)
+            : '',
+      },
+    ],
+    []
+  );
 
   return (
     <OverviewCard
@@ -53,7 +101,46 @@ export const BackupsDetails = ({
       }}
     >
       <Stack gap={3}>
-        {/*//TODO EVEREST-1066 backups statuses list*/}
+        <OverviewSection
+          dataTestId="schedules"
+          title={
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                width: '350px',
+              }}
+            >
+              <Typography
+                color="text.primary"
+                variant="sectionHeading"
+                sx={{ marginLeft: '60px' }}
+              >
+                Started
+              </Typography>
+              <Typography color="text.primary" variant="sectionHeading">
+                Finished
+              </Typography>
+            </Box>
+          }
+          loading={loading}
+        >
+          <Table
+            muiTopToolbarProps={{ sx: { display: 'none' } }}
+            muiTableHeadCellProps={{ sx: { display: 'none' } }}
+            initialState={{
+              pagination: {
+                pageSize: 5,
+                pageIndex: 0,
+              },
+            }}
+            tableName="backupList"
+            noDataMessage={Messages.titles.noData}
+            data={backups}
+            columns={columns}
+          />
+        </OverviewSection>
         <OverviewSection
           dataTestId="schedules"
           title={Messages.titles.schedules}

diff --git a/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/card.types.ts b/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/card.types.ts
@@ -70,4 +70,6 @@ export type BackupsDetailsOverviewCardProps = {
     NonNullable<DbCluster['spec']['backup']>['pitr']
   >['backupStorageName'];
   showStorage: boolean;
+  dbClusterName: string;
+  namespace: string;
 } & OverviewCardProps;
diff --git a/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cluster-overview.messages.ts b/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cluster-overview.messages.ts
@@ -12,6 +12,7 @@ export const Messages = {
     schedules: 'Schedules',
     pitr: 'Point-in-time Recovery (PITR)',
     editMonitoring: 'Edit Monitoring',
+    noData: 'You currently do not have any backups. Create one to get started.',
   },
   actions: {
     edit: 'Edit',

diff --git a/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cluster-overview.tsx b/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cluster-overview.tsx
@@ -106,6 +106,8 @@ export const ClusterOverview = () => {
       {canReadBackups && (
         <BackupsDetails
           backup={dbCluster?.spec.backup!}
+          dbClusterName={dbCluster?.metadata.name}
+          namespace={dbCluster?.metadata.namespace}
           schedules={dbCluster?.spec.backup?.schedules}
           pitrEnabled={pitrEnabled}
           pitrStorageName={dbCluster?.spec.backup?.pitr?.backupStorageName!}

diff --git a/.../src/pages/db-cluster-details/cluster-overview/overview-section/overview-section.types.ts b/.../src/pages/db-cluster-details/cluster-overview/overview-section/overview-section.types.ts
@@ -1,8 +1,9 @@
 import { LoadableChildrenProps } from '@percona/ui-lib';
 import { ButtonProps } from '@mui/material';
+import { ReactNode } from 'react';
 
 export type OverviewSectionProps = {
-  title: string;
+  title: string | ReactNode;
   dataTestId?: string;
   actionButtonProps?: ButtonProps;
   editable?: boolean;