[UI] EVEREST-1320 Display PITR warning on backups page #793

percona · Oct 30, 2024 · 36d02d2 · 36d02d2
1 parent 1e163e1
commit 36d02d2
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 6 deletions.
diff --git a/ui/apps/everest/src/pages/databases/lastBackup/LastBackup.tsx b/ui/apps/everest/src/pages/databases/lastBackup/LastBackup.tsx
@@ -10,6 +10,7 @@ import {
 import { WarningIcon } from '@percona/ui-lib';
 import { BackupStatus } from 'shared-types/backups.types';
 import { useDbCluster } from 'hooks/api/db-cluster/useDbCluster';
+import { useNavigate } from 'react-router-dom';
 
 export const LastBackup = ({ dbName, namespace }: LastBackupProps) => {
   const { data: backups = [] } = useDbBackups(dbName!, namespace, {
@@ -29,6 +30,8 @@ export const LastBackup = ({ dbName, namespace }: LastBackupProps) => {
   const lastFinishedBackup = sortedBackups[sortedBackups.length - 1];
   const lastFinishedBackupDate = lastFinishedBackup?.completed || new Date();
 
+  const navigate = useNavigate();
+
   return (
     <>
       {finishedBackups.length ? (
@@ -42,7 +45,12 @@ export const LastBackup = ({ dbName, namespace }: LastBackupProps) => {
               placement="right"
               arrow
             >
-              <IconButton>
+              <IconButton
+                onClick={(e) => {
+                  e.stopPropagation();
+                  navigate(`${namespace}/${dbName}/backups`);
+                }}
+              >
                 <WarningIcon />
               </IconButton>
             </Tooltip>

diff --git a/ui/apps/everest/src/pages/db-cluster-details/backups/backups-list/backups-list.tsx b/ui/apps/everest/src/pages/db-cluster-details/backups/backups-list/backups-list.tsx
@@ -21,17 +21,19 @@ import { format } from 'date-fns';
 import {
   BACKUPS_QUERY_KEY,
   useDbBackups,
+  useDbClusterPitr,
   useDeleteBackup,
 } from 'hooks/api/backups/useBackups';
 import { MRT_ColumnDef } from 'material-react-table';
-import { Typography } from '@mui/material';
+import { Alert, Typography } from '@mui/material';
 import { RestoreDbModal } from 'modals/index.ts';
 import { useContext, useMemo, useState } from 'react';
 import { Backup, BackupStatus } from 'shared-types/backups.types';
 import { DbClusterStatus } from 'shared-types/dbCluster.types.ts';
 import { ScheduleModalContext } from '../backups.context.ts';
 import { BACKUP_STATUS_TO_BASE_STATUS } from './backups-list.constants';
 import { Messages } from './backups-list.messages';
+import { Messages as DbDetailsMessages } from '../../db-cluster-details.messages';
 import BackupListTableHeader from './table-header';
 import { CustomConfirmDialog } from 'components/custom-confirm-dialog/custom-confirm-dialog.tsx';
 import { DbEngineType } from '@percona/types';
@@ -64,6 +66,13 @@ export const BackupsList = () => {
       refetchInterval: 10 * 1000,
     }
   );
+  const { data: pitrData } = useDbClusterPitr(
+    dbCluster.metadata.name!,
+    dbCluster.metadata.namespace,
+    {
+      enabled: !!dbCluster.metadata.name && !!dbCluster.metadata.namespace,
+    }
+  );
   const { data: backupStorages = [] } = useBackupStoragesByNamespace(
     dbCluster?.metadata.namespace
   );
@@ -187,6 +196,9 @@ export const BackupsList = () => {
 
   return (
     <>
+      {pitrData?.gaps && (
+        <Alert severity="error">{DbDetailsMessages.pitrError}</Alert>
+      )}
       {dbType === DbEngineType.POSTGRESQL && (
         <Typography variant="body2" mt={2} px={1}>
           {Messages.pgMaximum(uniqueStoragesInUse.length)}

diff --git a/ui/apps/everest/src/pages/db-cluster-details/db-cluster-details.messages.ts b/ui/apps/everest/src/pages/db-cluster-details/db-cluster-details.messages.ts
@@ -25,4 +25,7 @@ export const Messages = {
   dbActions: 'Actions',
   restoringDb:
     'We are recovering your database. Do not perform any actions on the database until recovery is complete.',
+  pitrError: `PITR can experience issues resulting from gaps, which may occur due to reasons such as disabling and then enabling PITR or technical issues like data loss.
+    To ensure proper functioning of PITR, you need to take an additional full backup.
+    `,
 };
diff --git a/ui/apps/everest/src/pages/db-cluster-details/restores/restores.messages.tsx b/ui/apps/everest/src/pages/db-cluster-details/restores/restores.messages.tsx
@@ -1,7 +1,4 @@
 export const Messages = {
-  pitrError: `PITR can experience issues resulting from gaps, which may occur due to reasons such as disabling and then enabling PITR or technical issues like data loss.
-              To ensure proper functioning of PITR, you need to take an additional full backup.
-              `,
   deleteDialog: {
     header: 'Delete restore',
     content: (restoreName: string) => (

diff --git a/ui/apps/everest/src/pages/db-cluster-details/restores/restores.tsx b/ui/apps/everest/src/pages/db-cluster-details/restores/restores.tsx
@@ -14,6 +14,7 @@ import {
   Restore,
 } from 'shared-types/restores.types';
 import { Messages } from './restores.messages';
+import { Messages as DbDetailsMessages } from '../db-cluster-details.messages';
 import {
   RESTORES_QUERY_KEY,
   useDbClusterRestores,
@@ -104,7 +105,9 @@ const Restores = () => {
 
   return (
     <>
-      {pitrData?.gaps && <Alert severity="error">{Messages.pitrError}</Alert>}
+      {pitrData?.gaps && (
+        <Alert severity="error">{DbDetailsMessages.pitrError}</Alert>
+      )}
       <Table
         state={{ isLoading: loadingRestores }}
         tableName={`${dbClusterName}-restore`}