From 86173d27b8ebe9da0762f634a06befe9cbbf8c82 Mon Sep 17 00:00:00 2001 From: Sam Mans Date: Mon, 14 Oct 2024 15:11:57 -0400 Subject: [PATCH] feat: [UIE-7995] DBaaS Monitor GA --- .../pr-11105-added-1729023730319.md | 5 ++ .../src/components/Tabs/TabLinkList.tsx | 2 + .../manager/src/dev-tools/FeatureFlagTool.tsx | 1 + packages/manager/src/featureFlags.ts | 1 + .../DatabaseMonitor/DatabaseMonitor.test.tsx | 29 +++++++++ .../DatabaseMonitor/DatabaseMonitor.tsx | 18 ++++++ .../Databases/DatabaseDetail/index.tsx | 61 ++++++++++++++++--- .../src/features/Databases/utilities.ts | 2 + 8 files changed, 111 insertions(+), 8 deletions(-) create mode 100644 packages/manager/.changeset/pr-11105-added-1729023730319.md create mode 100644 packages/manager/src/features/Databases/DatabaseDetail/DatabaseMonitor/DatabaseMonitor.test.tsx create mode 100644 packages/manager/src/features/Databases/DatabaseDetail/DatabaseMonitor/DatabaseMonitor.tsx diff --git a/packages/manager/.changeset/pr-11105-added-1729023730319.md b/packages/manager/.changeset/pr-11105-added-1729023730319.md new file mode 100644 index 00000000000..38c14c9a4a8 --- /dev/null +++ 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 index 5d621068ae1..486f8a088b6 100644 --- 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} ); })} diff --git a/packages/manager/src/dev-tools/FeatureFlagTool.tsx b/packages/manager/src/dev-tools/FeatureFlagTool.tsx index 3c58f58ae6d..581371a7740 100644 --- 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 index 444dadd7e16..dbfe0b87ff2 100644 --- 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/packages/manager/src/features/Databases/DatabaseDetail/DatabaseMonitor/DatabaseMonitor.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseMonitor/DatabaseMonitor.test.tsx new file mode 100644 index 00000000000..ec6c413ebb5 --- /dev/null +++ b/packages/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( + + ); + // Should render a loading state + expect(getByTestId(loadingTestId)).toBeInTheDocument(); + }); + + it('should render CloudPulseDashboardWithFilters', async () => { + const { getByTestId } = renderWithTheme( + + ); + 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 new file mode 100644 index 00000000000..5a255785977 --- /dev/null +++ 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 ( + + ); +}; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx index 177cfd28b05..fd8cd3c6b76 100644 --- 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,9 @@ 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 { useTheme } from '@mui/material/styles'; +import { useIsDatabasesEnabled } from '../utilities'; const DatabaseSummary = React.lazy(() => import('./DatabaseSummary')); const DatabaseBackups = React.lazy( @@ -35,10 +38,15 @@ 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(); + const theme = useTheme(); const { databaseId, engine } = useParams<{ databaseId: string; @@ -66,6 +74,11 @@ export const DatabaseDetail = () => { setEditableLabelError, } = useEditableLabelState(); + const { + isDatabasesMonitorEnabled, + isDatabasesMonitorBeta, + } = useIsDatabasesEnabled(); + if (error) { return ( { return null; } - const tabs = [ + const isDefault = database.platform === 'rdbms-default'; + const isMonitorEnabled = isDefault && isDatabasesMonitorEnabled; + + const tabBetaChip = ( + + ); + + const tabs: Tab[] = [ { routeName: `/databases/${engine}/${id}/summary`, title: 'Summary', @@ -99,8 +128,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 ? tabBetaChip : null, + }); + } + if (flags.databaseResize) { - tabs.splice(2, 0, { + tabs.splice(resizeIndex, 0, { routeName: `/databases/${engine}/${id}/resize`, title: 'Resize', }); @@ -187,18 +227,23 @@ export const DatabaseDetail = () => { disabled={isDatabasesGrantReadOnly} /> - + {isMonitorEnabled ? ( + + + + ) : null} + {flags.databaseResize ? ( - + ) : null} - + { - {database.platform === 'rdbms-default' && } + {isDefault && } ); }; diff --git a/packages/manager/src/features/Databases/utilities.ts b/packages/manager/src/features/Databases/utilities.ts index 2842a0d96a5..16a68852e7a 100644 --- 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,