EVEREST-881 Added monitoring name to db detail (#79)

percona · Mar 12, 2024 · d97d2e6 · d97d2e6
1 parent ed90412
commit d97d2e6
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
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
@@ -15,7 +15,7 @@ export type DatabaseDetailsOverviewCardProps = {
   memory: number | string;
   disk: number | string;
   externalAccess: boolean;
-  monitoring: boolean;
+  monitoring?: string;
   backup?: Backup;
 } & OverviewCardProps;
 

diff --git a/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/database-details.tsx b/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cards/database-details.tsx
@@ -40,6 +40,7 @@ export const DatabaseDetails = ({
   monitoring,
 }: DatabaseDetailsOverviewCardProps) => {
   const schedules = backup?.schedules;
+
   return (
     <Card
       title={Messages.titles.dbDetails}
@@ -115,6 +116,11 @@ export const DatabaseDetails = ({
             <OverviewSectionText>
               {monitoring ? Messages.fields.enabled : Messages.fields.disabled}
             </OverviewSectionText>
+            {monitoring && (
+              <OverviewSectionText>
+                {Messages.fields.monitoring(monitoring)}
+              </OverviewSectionText>
+            )}
           </OverviewSection>
         </Grid>
       }

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
@@ -26,6 +26,7 @@ export const Messages = {
     disk: (disk: string | number) => `Disk: ${disk}`,
     enabled: `Enabled`,
     disabled: `Disabled`,
+    monitoring: (name: string) => `Name: ${name}`,
     pitr: (isEnabled: string) =>
       `${Messages.titles.pitr} ${isEnabled.toLocaleLowerCase()}`,
   },

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
@@ -1,10 +1,10 @@
 import { Stack } from '@mui/material';
-import { useParams } from 'react-router-dom';
+import { dbEngineToDbType } from '@percona/utils';
 import { useDbClusterCredentials } from 'hooks/api/db-cluster/useCreateDbCluster';
 import { useDbCluster } from 'hooks/api/db-cluster/useDbCluster';
 import { useDbClusters } from 'hooks/api/db-clusters/useDbClusters';
+import { useParams } from 'react-router-dom';
 import { ProxyExposeType } from 'shared-types/dbCluster.types';
-import { dbEngineToDbType } from '@percona/utils';
 import { ConnectionDetails, DatabaseDetails } from './cards';
 
 export const ClusterOverview = () => {
@@ -52,7 +52,7 @@ export const ClusterOverview = () => {
         externalAccess={
           dbCluster?.spec.proxy.expose.type === ProxyExposeType.external
         }
-        monitoring={!!dbCluster?.spec.monitoring.monitoringConfigName}
+        monitoring={dbCluster?.spec.monitoring.monitoringConfigName}
       />
       <ConnectionDetails
         loading={fetchingCluster}