feat: [UIE-7995] DBaaS Monitor GA

linode · Oct 16, 2024 · ebabf10 · ebabf10
1 parent 436c010
commit ebabf10
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 8 deletions.
diff --git a/packages/manager/.changeset/pr-11105-added-1729023730319.md b/packages/manager/.changeset/pr-11105-added-1729023730319.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+DBaaS GA Monitor tab ([#11105](https://github.com/linode/manager/pull/11105))
diff --git a/packages/manager/src/components/Tabs/TabLinkList.tsx b/packages/manager/src/components/Tabs/TabLinkList.tsx
@@ -7,6 +7,7 @@ import { TabList } from 'src/components/Tabs/TabList';
 export interface Tab {
   routeName: string;
   title: string;
+  chip?: React.JSX.Element | null;
 }
 
 interface TabLinkListProps {
@@ -30,6 +31,7 @@ export const TabLinkList = ({ noLink, tabs }: TabLinkListProps) => {
             {...extraTemporaryProps}
           >
             {tab.title}
+            {tab.chip}
           </Tab>
         );
       })}

diff --git a/packages/manager/src/dev-tools/FeatureFlagTool.tsx b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
@@ -31,6 +31,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'selfServeBetas', label: 'Self Serve Betas' },
   { flag: 'supportTicketSeverity', label: 'Support Ticket Severity' },
   { flag: 'dbaasV2', label: 'Databases V2 Beta' },
+  { flag: 'dbaasV2MonitorMetrics', label: 'Databases V2 Monitor' },
   { flag: 'databaseResize', label: 'Database Resize' },
   { flag: 'apicliDxToolsAdditions', label: 'APICLI DX Tools Additions' },
   { flag: 'apicliButtonCopy', label: 'APICLI Button Copy' },

diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts
@@ -95,6 +95,7 @@ export interface Flags {
   databaseResize: boolean;
   databases: boolean;
   dbaasV2: BetaFeatureFlag;
+  dbaasV2MonitorMetrics: BetaFeatureFlag;
   disableLargestGbPlans: boolean;
   disallowImageUploadToNonObjRegions: boolean;
   gecko2: GeckoFeatureFlag;

diff --git a/...es/manager/src/features/Databases/DatabaseDetail/DatabaseMonitor/DatabaseMonitor.test.tsx b/...es/manager/src/features/Databases/DatabaseDetail/DatabaseMonitor/DatabaseMonitor.test.tsx
@@ -0,0 +1,29 @@
+import { waitForElementToBeRemoved } from '@testing-library/react';
+import * as React from 'react';
+import { databaseFactory } from 'src/factories';
+import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
+import { DatabaseMonitor } from './DatabaseMonitor';
+
+const loadingTestId = 'circle-progress';
+
+beforeAll(() => mockMatchMedia());
+
+describe('database monitor', () => {
+  const database = databaseFactory.build({ id: 12 });
+  it('should render a loading state', async () => {
+    const { getByTestId } = renderWithTheme(
+      <DatabaseMonitor database={database} />
+    );
+    // Should render a loading state
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+  });
+
+  it('should render CloudPulseDashboardWithFilters', async () => {
+    const { getByTestId } = renderWithTheme(
+      <DatabaseMonitor database={database} />
+    );
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+    expect(getByTestId('cloudpulse-time-duration')).toBeInTheDocument();
+  });
+});
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseMonitor/DatabaseMonitor.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseMonitor/DatabaseMonitor.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { CloudPulseDashboardWithFilters } from 'src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters';
+import { Database } from '@linode/api-v4';
+
+interface Props {
+  database: Database;
+}
+
+export const DatabaseMonitor = ({ database }: Props) => {
+  const databaseId = database?.id;
+  const dbaasDashboardId = 1;
+  return (
+    <CloudPulseDashboardWithFilters
+      dashboardId={dbaasDashboardId}
+      resource={databaseId}
+    />
+  );
+};
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
@@ -8,7 +8,7 @@ import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { Notice } from 'src/components/Notice/Notice';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
-import { TabLinkList } from 'src/components/Tabs/TabLinkList';
+import { Tab, TabLinkList } from 'src/components/Tabs/TabLinkList';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
 import DatabaseLogo from 'src/features/Databases/DatabaseLanding/DatabaseLogo';
@@ -24,6 +24,8 @@ import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import type { Engine } from '@linode/api-v4/lib/databases/types';
 import type { APIError } from '@linode/api-v4/lib/types';
+import { BetaChip } from 'src/components/BetaChip/BetaChip';
+import { useIsDatabasesEnabled } from '../utilities';
 
 const DatabaseSummary = React.lazy(() => import('./DatabaseSummary'));
 const DatabaseBackups = React.lazy(
@@ -35,7 +37,11 @@ const DatabaseResize = React.lazy(() =>
     default: DatabaseResize,
   }))
 );
-
+const DatabaseMonitor = React.lazy(() =>
+  import('./DatabaseMonitor/DatabaseMonitor').then(({ DatabaseMonitor }) => ({
+    default: DatabaseMonitor,
+  }))
+);
 export const DatabaseDetail = () => {
   const history = useHistory();
   const flags = useFlags();
@@ -66,6 +72,11 @@ export const DatabaseDetail = () => {
     setEditableLabelError,
   } = useEditableLabelState();
 
+  const {
+    isDatabasesMonitorEnabled,
+    isDatabasesMonitorBeta,
+  } = useIsDatabasesEnabled();
+
   if (error) {
     return (
       <ErrorState
@@ -84,7 +95,10 @@ export const DatabaseDetail = () => {
     return null;
   }
 
-  const tabs = [
+  const isDefault = database.platform === 'rdbms-default';
+  const isMonitorEnabled = isDefault && isDatabasesMonitorEnabled;
+
+  const tabs: Tab[] = [
     {
       routeName: `/databases/${engine}/${id}/summary`,
       title: 'Summary',
@@ -99,8 +113,19 @@ export const DatabaseDetail = () => {
     },
   ];
 
+  const resizeIndex = isMonitorEnabled ? 3 : 2;
+  const backupsIndex = isMonitorEnabled ? 2 : 1;
+
+  if (isMonitorEnabled) {
+    tabs.splice(1, 0, {
+      routeName: `/databases/${engine}/${id}/monitor`,
+      title: 'Monitor',
+      chip: isDatabasesMonitorBeta ? <BetaChip /> : null,
+    });
+  }
+
   if (flags.databaseResize) {
-    tabs.splice(2, 0, {
+    tabs.splice(resizeIndex, 0, {
       routeName: `/databases/${engine}/${id}/resize`,
       title: 'Resize',
     });
@@ -187,26 +212,31 @@ export const DatabaseDetail = () => {
               disabled={isDatabasesGrantReadOnly}
             />
           </SafeTabPanel>
-          <SafeTabPanel index={1}>
+          {isMonitorEnabled ? (
+            <SafeTabPanel index={1}>
+              <DatabaseMonitor database={database} />
+            </SafeTabPanel>
+          ) : null}
+          <SafeTabPanel index={backupsIndex}>
             <DatabaseBackups disabled={isDatabasesGrantReadOnly} />
           </SafeTabPanel>
           {flags.databaseResize ? (
-            <SafeTabPanel index={2}>
+            <SafeTabPanel index={resizeIndex}>
               <DatabaseResize
                 database={database}
                 disabled={isDatabasesGrantReadOnly}
               />
             </SafeTabPanel>
           ) : null}
-          <SafeTabPanel index={flags.databaseResize ? 3 : 2}>
+          <SafeTabPanel index={tabs.length - 1}>
             <DatabaseSettings
               database={database}
               disabled={isDatabasesGrantReadOnly}
             />
           </SafeTabPanel>
         </TabPanels>
       </Tabs>
-      {database.platform === 'rdbms-default' && <DatabaseLogo />}
+      {isDefault && <DatabaseLogo />}
     </>
   );
 };

diff --git a/packages/manager/src/features/Databases/utilities.ts b/packages/manager/src/features/Databases/utilities.ts
@@ -66,6 +66,8 @@ export const useIsDatabasesEnabled = () => {
     return {
       isDatabasesEnabled: isDatabasesV1Enabled || isDatabasesV2Enabled,
       isDatabasesGAEnabled: isDatabasesV1Enabled && isDatabasesGA,
+      isDatabasesMonitorEnabled: flags.dbaasV2MonitorMetrics?.enabled,
+      isDatabasesMonitorBeta: flags.dbaasV2MonitorMetrics?.beta,
       isDatabasesV1Enabled,
       isDatabasesV2Beta: isDatabasesV2Enabled && flags.dbaasV2?.beta,
       isDatabasesV2Enabled,