diff --git a/packages/manager/.changeset/pr-11180-changed-1730803608188.md b/packages/manager/.changeset/pr-11180-changed-1730803608188.md new file mode 100644 index 00000000000..53ae4f23340 --- /dev/null +++ b/packages/manager/.changeset/pr-11180-changed-1730803608188.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Changed +--- + +Refactored DatabaseResize to use shared components for node selection and summary section. ([#11180](https://github.com/linode/manager/pull/11180)) diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index d2407183f9a..06bc649e980 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx @@ -138,7 +138,7 @@ const DatabaseCreate = () => { ...values, allow_list: _allow_list, }; - if (isDatabasesV2Enabled || isDatabasesV2GA) { + if (isDatabasesV2Enabled) { delete createPayload.replication_type; } try { diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx index a29ae8a5bfe..b8b17ed60a8 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx @@ -2,6 +2,7 @@ import { queryByAttribute, waitForElementToBeRemoved, } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { createMemoryHistory } from 'history'; import * as React from 'react'; import { Router } from 'react-router-dom'; @@ -16,7 +17,6 @@ import { HttpResponse, http, server } from 'src/mocks/testServer'; import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers'; import { DatabaseResize } from './DatabaseResize'; -import userEvent from '@testing-library/user-event'; const loadingTestId = 'circle-progress'; @@ -169,6 +169,20 @@ describe('database resize', () => { }); describe('on rendering of page and isDatabasesV2GA is true and the Shared CPU tab is preselected ', () => { + const mockDatabase = databaseFactory.build({ + cluster_size: 3, + engine: 'mysql', + platform: 'rdbms-default', + type: 'g6-nanode-1', + }); + + const flags = { + dbaasV2: { + beta: false, + enabled: true, + }, + }; + beforeEach(() => { // Mock database types const standardTypes = [ @@ -206,17 +220,6 @@ describe('database resize', () => { }); it('should render set node section', async () => { - const flags = { - dbaasV2: { - beta: false, - enabled: true, - }, - }; - const mockDatabase = databaseFactory.build({ - cluster_size: 3, - type: 'g6-nanode-1', - engine: 'mysql', - }); const { getByTestId, getByText } = renderWithTheme( , { flags } @@ -232,16 +235,6 @@ describe('database resize', () => { }); it('should render the correct number of node radio buttons, associated costs, and summary', async () => { - const flags = { - dbaasV2: { - beta: false, - enabled: true, - }, - }; - const mockDatabase = databaseFactory.build({ - cluster_size: 3, - type: 'g6-nanode-1', - }); const { getByTestId } = renderWithTheme( , { flags } @@ -252,10 +245,12 @@ describe('database resize', () => { expect(nodeRadioBtns).toHaveTextContent('$60/month $0.09/hr'); expect(nodeRadioBtns).toHaveTextContent('$140/month $0.21/hr'); - const expectedCurrentSummary = - 'Current Cluster: New DBaaS - Nanode 1 GB $60/month 3 Nodes - HA $140/month'; const currentSummary = getByTestId('currentSummary'); - expect(currentSummary).toHaveTextContent(expectedCurrentSummary); + const selectedPlanText = + 'Current Cluster: New DBaaS - Nanode 1 GB $60/month'; + expect(currentSummary).toHaveTextContent(selectedPlanText); + const selectedNodesText = '3 Nodes - HA $140/month'; + expect(currentSummary).toHaveTextContent(selectedNodesText); const expectedResizeSummary = 'Resized Cluster: Please select a plan or set the number of nodes.'; @@ -264,16 +259,6 @@ describe('database resize', () => { }); it('should preselect cluster size in Set Number of Nodes', async () => { - const flags = { - dbaasV2: { - beta: false, - enabled: true, - }, - }; - const mockDatabase = databaseFactory.build({ - cluster_size: 3, - type: 'g6-nanode-1', - }); const { getByTestId } = renderWithTheme( , { flags } @@ -286,16 +271,6 @@ describe('database resize', () => { }); it('should disable visible lower node selections', async () => { - const flags = { - dbaasV2: { - beta: false, - enabled: true, - }, - }; - const mockDatabase = databaseFactory.build({ - cluster_size: 3, - type: 'g6-nanode-1', - }); const { getByTestId } = renderWithTheme( , { flags } @@ -307,14 +282,9 @@ describe('database resize', () => { }); it('should set price, enable resize button, and update resize summary when a new number of nodes is selected', async () => { - const flags = { - dbaasV2: { - beta: false, - enabled: true, - }, - }; const mockDatabase = databaseFactory.build({ cluster_size: 1, + platform: 'rdbms-default', type: 'g6-nanode-1', }); const { getByTestId, getByText } = renderWithTheme( @@ -331,21 +301,18 @@ describe('database resize', () => { ) as HTMLButtonElement; expect(resizeButton.disabled).toBeFalsy(); - const expectedSummaryText = - 'Resized Cluster: New DBaaS - Nanode 1 GB $60/month 3 Nodes - HA $140/month'; const summary = getByTestId('resizeSummary'); - expect(summary).toHaveTextContent(expectedSummaryText); + const selectedPlanText = + 'Resized Cluster: New DBaaS - Nanode 1 GB $60/month'; + expect(summary).toHaveTextContent(selectedPlanText); + const selectedNodesText = '3 Nodes - HA $140/month'; + expect(summary).toHaveTextContent(selectedNodesText); }); it('should disable the resize button if node selection is set back to current', async () => { - const flags = { - dbaasV2: { - beta: false, - enabled: true, - }, - }; const mockDatabase = databaseFactory.build({ cluster_size: 1, + platform: 'rdbms-default', type: 'g6-nanode-1', }); const { getByTestId, getByText } = renderWithTheme( @@ -416,8 +383,9 @@ describe('database resize', () => { it('should render node selection for dedicated tab with default summary', async () => { const mockDatabase = databaseFactory.build({ - type: 'g6-dedicated-2', cluster_size: 3, + platform: 'rdbms-default', + type: 'g6-dedicated-2', }); const flags = { @@ -441,8 +409,9 @@ describe('database resize', () => { it('should disable lower node selections', async () => { const mockDatabase = databaseFactory.build({ - type: 'g6-dedicated-2', cluster_size: 3, + platform: 'rdbms-default', + type: 'g6-dedicated-2', }); const flags = { @@ -452,8 +421,14 @@ describe('database resize', () => { }, }; + // Mock route history so the Plan Selection table displays prices without requiring a region in the DB resize flow. + const history = createMemoryHistory(); + history.push(`databases/${database.engine}/${database.id}/resize`); + const { getByTestId } = renderWithTheme( - , + + + , { flags } ); expect(getByTestId(loadingTestId)).toBeInTheDocument(); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx index d18366b16a6..89e06beb12f 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx @@ -2,34 +2,29 @@ import { Box, Paper } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { makeStyles } from 'tss-react/mui'; import { CircleProgress } from 'src/components/CircleProgress'; import { Divider } from 'src/components/Divider'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { FormControlLabel } from 'src/components/FormControlLabel'; import { Notice } from 'src/components/Notice/Notice'; -import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; -import { StyledChip } from 'src/features/components/PlansPanel/PlanSelection.styles'; import { determineInitialPlanCategoryTab } from 'src/features/components/PlansPanel/utils'; +import { DatabaseNodeSelector } from 'src/features/Databases/DatabaseCreate/DatabaseNodeSelector'; +import { DatabaseSummarySection } from 'src/features/Databases/DatabaseCreate/DatabaseSummarySection'; +import { DatabaseResizeCurrentConfiguration } from 'src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration'; +import { useIsDatabasesEnabled } from 'src/features/Databases/utilities'; import { typeLabelDetails } from 'src/features/Linodes/presentation'; -import { useDatabaseTypesQuery } from 'src/queries/databases/databases'; import { useDatabaseMutation } from 'src/queries/databases/databases'; +import { useDatabaseTypesQuery } from 'src/queries/databases/databases'; import { formatStorageUnits } from 'src/utilities/formatStorageUnits'; -import { useIsDatabasesEnabled } from '../../utilities'; import { StyledGrid, - StyledPlanSummarySpan, StyledPlansPanel, StyledResizeButton, } from './DatabaseResize.style'; -import { DatabaseResizeCurrentConfiguration } from './DatabaseResizeCurrentConfiguration'; -import type { NodePricing } from '../../DatabaseCreate/DatabaseNodeSelector'; import type { ClusterSize, Database, @@ -39,56 +34,19 @@ import type { Engine, UpdateDatabasePayload, } from '@linode/api-v4'; -import type { Theme } from '@mui/material/styles'; import type { PlanSelectionWithDatabaseType } from 'src/features/components/PlansPanel/types'; -const useStyles = makeStyles()((theme: Theme) => ({ - disabledOptionLabel: { - color: - theme.palette.mode === 'dark' ? theme.color.grey6 : theme.color.grey1, - }, - formControlLabel: { - marginBottom: theme.spacing(), - }, - nodeSpanSpacing: { - marginRight: theme.spacing(1), - }, - summarySpanBorder: { - borderRight: `1px solid ${theme.borderColors.borderTypography}`, - color: theme.textColors.tableStatic, - marginLeft: theme.spacing(1), - marginRight: theme.spacing(1), - paddingRight: theme.spacing(1), - }, -})); - interface Props { database: Database; disabled?: boolean; } export const DatabaseResize = ({ database, disabled = false }: Props) => { - const { classes } = useStyles(); const history = useHistory(); - const [planSelected, setPlanSelected] = React.useState( - database.type - ); - const [summaryText, setSummaryText] = React.useState<{ - basePrice: string; - numberOfNodes: ClusterSize; - plan: string; - price: string; - }>(); - const [nodePricing, setNodePricing] = React.useState< - NodePricing | undefined - >(); - // This will be set to `false` once one of the configuration is selected from available plan. This is used to disable the - // "Resize" button unless there have been changes to the form. - const [ - shouldSubmitBeDisabled, - setShouldSubmitBeDisabled, - ] = React.useState(true); + const [selectedPlanId, setSelectedPlanId] = React.useState< + string | undefined + >(database.type); const [ isResizeConfirmationDialogOpen, @@ -96,7 +54,9 @@ export const DatabaseResize = ({ database, disabled = false }: Props) => { ] = React.useState(false); const [selectedTab, setSelectedTab] = React.useState(0); - const { isDatabasesV2Enabled, isDatabasesV2GA } = useIsDatabasesEnabled(); + const { isDatabasesV2GA } = useIsDatabasesEnabled(); + const isNewDatabaseGA = + isDatabasesV2GA && database.platform !== 'rdbms-legacy'; const [clusterSize, setClusterSize] = React.useState( database.cluster_size ); @@ -122,8 +82,8 @@ export const DatabaseResize = ({ database, disabled = false }: Props) => { payload.cluster_size = clusterSize; } - if (planSelected) { - payload.type = planSelected; + if (selectedPlanId) { + payload.type = selectedPlanId; } updateDatabase(payload).then(() => { @@ -144,49 +104,51 @@ export const DatabaseResize = ({ database, disabled = false }: Props) => { ); - const resizeSummary = ( - ({ - marginTop: theme.spacing(2), - })} - data-testid="resizeSummary" - > - {summaryText ? ( - <> - - {isDatabasesV2GA - ? 'Resized Cluster: ' + summaryText.plan - : summaryText.plan} - {' '} - {isDatabasesV2GA ? ( - - {summaryText.basePrice} - - ) : null} - - {' '} - {summaryText.numberOfNodes} Node - {summaryText.numberOfNodes > 1 ? 's' : ''} - {!isDatabasesV2GA ? ': ' : ' - HA '} - - {summaryText.price} - - ) : isDatabasesV2GA ? ( - <> - Resized Cluster: Please - select a plan or set the number of nodes. - - ) : ( - 'Please select a plan.' - )} - - ); + const selectedEngine = database.engine.split('/')[0] as Engine; + + const summaryText = React.useMemo(() => { + const nodeSelected = clusterSize && clusterSize > database.cluster_size; + + const isSamePlanSelected = selectedPlanId === database.type; + if (!dbTypes) { + return undefined; + } + // Set default message and disable submit when no new selection is made + if (!nodeSelected && (!selectedPlanId || isSamePlanSelected)) { + return undefined; + } + + const selectedPlanType = dbTypes.find( + (type: DatabaseType) => type.id === selectedPlanId + ); + + if (!selectedPlanType || !clusterSize) { + return undefined; + } + + const price = selectedPlanType.engines[selectedEngine].find( + (cluster: DatabaseClusterSizeObject) => cluster.quantity === clusterSize + )?.price as DatabasePriceObject; + const resizeBasePrice = selectedPlanType.engines[selectedEngine][0] + .price as DatabasePriceObject; + const currentPlanPrice = `$${resizeBasePrice?.monthly}/month`; + + return { + basePrice: currentPlanPrice, + numberOfNodes: clusterSize, + plan: formatStorageUnits(selectedPlanType.label), + price: isNewDatabaseGA + ? `$${price?.monthly}/month` + : `$${price?.monthly}/month or $${price?.hourly}/hour`, + }; + }, [selectedPlanId, clusterSize, selectedTab]); const costSummary = ( {`The cost of the resized database is ${summaryText?.price}.`} ); + const confirmationPopUpMessage = database.cluster_size === 1 ? ( <> @@ -204,93 +166,6 @@ export const DatabaseResize = ({ database, disabled = false }: Props) => { ); - const setSummaryAndPrices = ( - databaseTypeId: string, - engine: Engine, - dbTypes: DatabaseType[] - ) => { - const selectedPlanType = dbTypes.find( - (type: DatabaseType) => type.id === databaseTypeId - ); - if (selectedPlanType) { - // When plan is found, set node pricing - const nodePricingDetails = { - double: selectedPlanType.engines[engine]?.find( - (cluster: DatabaseClusterSizeObject) => cluster.quantity === 2 - )?.price, - multi: selectedPlanType.engines[engine]?.find( - (cluster: DatabaseClusterSizeObject) => cluster.quantity === 3 - )?.price, - single: selectedPlanType.engines[engine]?.find( - (cluster: DatabaseClusterSizeObject) => cluster.quantity === 1 - )?.price, - }; - setNodePricing(nodePricingDetails); - } else { - // If plan is not found, clear plan selection - setPlanSelected(undefined); - } - - if (!selectedPlanType || !clusterSize) { - setSummaryText(undefined); - setShouldSubmitBeDisabled(true); - return; - } - - const price = selectedPlanType.engines[engine].find( - (cluster: DatabaseClusterSizeObject) => cluster.quantity === clusterSize - )?.price as DatabasePriceObject; - const resizeBasePrice = selectedPlanType.engines[engine][0] - .price as DatabasePriceObject; - const currentPlanPrice = `$${resizeBasePrice?.monthly}/month`; - - setSummaryText({ - basePrice: currentPlanPrice, - numberOfNodes: clusterSize, - plan: formatStorageUnits(selectedPlanType.label), - price: isDatabasesV2GA - ? `$${price?.monthly}/month` - : `$${price?.monthly}/month or $${price?.hourly}/hour`, - }); - - setShouldSubmitBeDisabled(false); - return; - }; - - React.useEffect(() => { - const nodeSelected = clusterSize && clusterSize > database.cluster_size; - const isSamePlanSelected = planSelected === database.type; - if (!dbTypes) { - return; - } - // Set default message and disable submit when no new selection is made - if (!nodeSelected && (!planSelected || isSamePlanSelected)) { - setShouldSubmitBeDisabled(true); - setSummaryText(undefined); - return; - } - const engineType = database.engine.split('/')[0] as Engine; - // When only a higher node selection is made and plan has not been changed - if (isDatabasesV2GA && nodeSelected && isSamePlanSelected) { - setSummaryAndPrices(database.type, engineType, dbTypes); - } - // No plan selection or plan selection is unchanged - if (!planSelected || isSamePlanSelected) { - return; - } - // When a new plan is selected - setSummaryAndPrices(planSelected, engineType, dbTypes); - }, [ - dbTypes, - database.engine, - database.type, - planSelected, - database.cluster_size, - clusterSize, - ]); - - const selectedEngine = database.engine.split('/')[0] as Engine; - const displayTypes: PlanSelectionWithDatabaseType[] = React.useMemo(() => { if (!dbTypes) { return []; @@ -321,78 +196,36 @@ export const DatabaseResize = ({ database, disabled = false }: Props) => { }, [database.cluster_size, dbTypes, selectedEngine]); const currentPlan = displayTypes?.find((type) => type.id === database.type); - const currentPlanDisk = currentPlan ? currentPlan.disk : 0; - const disabledPlans = displayTypes?.filter((type) => - type.class === 'dedicated' - ? type.disk < currentPlanDisk - : type.disk <= currentPlanDisk - ); - const currentEngine = database.engine.split('/')[0] as Engine; - const currentPrice = currentPlan?.engines[currentEngine].find( - (cluster: DatabaseClusterSizeObject) => - cluster.quantity === database.cluster_size - )?.price as DatabasePriceObject; - const currentBasePrice = currentPlan?.engines[currentEngine][0] - .price as DatabasePriceObject; - const currentNodePrice = `$${currentPrice?.monthly}/month`; - const currentPlanPrice = `$${currentBasePrice?.monthly}/month`; - const currentSummary = ( - - - Current Cluster: {currentPlan?.heading} - {' '} - - {currentPlanPrice} - - - {' '} - {database.cluster_size} Node - {database.cluster_size > 1 ? 's - HA ' : ' '} - - {currentNodePrice} - - ); - - const isDisabledSharedTab = database.cluster_size === 2; React.useEffect(() => { const initialTab = determineInitialPlanCategoryTab( displayTypes, - planSelected, + database.type, currentPlan?.heading ); setSelectedTab(initialTab); + }, [database.type, displayTypes]); - if (isDatabasesV2GA) { - const engineType = database.engine.split('/')[0] as Engine; - const nodePricingDetails = { - double: currentPlan?.engines[engineType]?.find( - (cluster: DatabaseClusterSizeObject) => cluster.quantity === 2 - )?.price, - multi: currentPlan?.engines[engineType]?.find( - (cluster: DatabaseClusterSizeObject) => cluster.quantity === 3 - )?.price, - single: currentPlan?.engines[engineType]?.find( - (cluster: DatabaseClusterSizeObject) => cluster.quantity === 1 - )?.price, - }; - setNodePricing(nodePricingDetails); - } - }, [dbTypes, displayTypes]); + const currentPlanDisk = currentPlan ? currentPlan.disk : 0; + const disabledPlans = displayTypes?.filter((type) => + type.class === 'dedicated' + ? type.disk < currentPlanDisk + : type.disk <= currentPlanDisk + ); + const isDisabledSharedTab = database.cluster_size === 2; + + const shouldSubmitBeDisabled = React.useMemo(() => { + return !summaryText; + }, [summaryText]); - const handleNodeChange = ( - event: React.ChangeEvent - ): void => { - const size = Number(event.currentTarget.value) as ClusterSize; + const handleNodeChange = (size: ClusterSize | undefined): void => { const selectedPlanTab = determineInitialPlanCategoryTab( displayTypes, - planSelected + selectedPlanId ); // If 2 Nodes is selected for an incompatible plan, clear selected plan and related information if (size === 2 && selectedPlanTab !== 0) { - setNodePricing(undefined); - setPlanSelected(undefined); - setSummaryText(undefined); + setSelectedPlanId(undefined); } setClusterSize(size); }; @@ -401,95 +234,24 @@ export const DatabaseResize = ({ database, disabled = false }: Props) => { if (selectedTab === index) { return; } - // Clear plan and related info when when 2 nodes option is selected for incompatible plan. - if (isDatabasesV2GA && selectedTab === 0 && clusterSize === 2) { - setClusterSize(undefined); - setPlanSelected(undefined); - setNodePricing(undefined); - setSummaryText(undefined); - } - setSelectedTab(index); - }; - - const nodeOptions = React.useMemo(() => { - const hasDedicated = displayTypes.some( - (type) => type.class === 'dedicated' - ); - const currentChip = ( - + const initialTab = determineInitialPlanCategoryTab( + displayTypes, + database.type, + currentPlan?.heading ); - const isDisabled = (nodeSize: ClusterSize) => { - return nodeSize < database.cluster_size; - }; - - const options = [ - { - label: ( - - 1 Node {` `} - {database.cluster_size === 1 && currentChip} -
- - {`$${nodePricing?.single?.monthly || 0}/month $${ - nodePricing?.single?.hourly || 0 - }/hr`} - - - ), - value: 1, - }, - ]; - - if (hasDedicated && selectedTab === 0 && isDatabasesV2Enabled) { - options.push({ - label: ( - - 2 Nodes - High Availability - {database.cluster_size === 2 && currentChip} -
- - {`$${nodePricing?.double?.monthly || 0}/month $${ - nodePricing?.double?.hourly || 0 - }/hr`} - - - ), - value: 2, - }); + if (isNewDatabaseGA) { + if (initialTab === index) { + setSelectedPlanId(database.type); + setClusterSize(database.cluster_size); + } else { + setClusterSize(undefined); + setSelectedPlanId(undefined); + } } - - options.push({ - label: ( - - 3 Nodes - High Availability (recommended) - {database.cluster_size === 3 && currentChip} -
- - {`$${nodePricing?.multi?.monthly || 0}/month $${ - nodePricing?.multi?.hourly || 0 - }/hr`} - - - ), - value: 3, - }); - - return options; - }, [selectedTab, nodePricing, displayTypes, isDatabasesV2Enabled]); + setSelectedTab(index); + }; if (typesLoading) { return ; @@ -498,6 +260,7 @@ export const DatabaseResize = ({ database, disabled = false }: Props) => { if (typesError) { return ; } + return ( <> @@ -515,56 +278,41 @@ export const DatabaseResize = ({ database, disabled = false }: Props) => { disabledTabs={isDisabledSharedTab ? ['shared'] : []} handleTabChange={handleTabChange} header="Choose a Plan" - onSelect={(selected: string) => setPlanSelected(selected)} - selectedId={planSelected} - tabDisabledMessage="Resizing a 2-nodes cluster is only allowed with Dedicated plans." + onSelect={(selected: string) => setSelectedPlanId(selected)} + selectedId={selectedPlanId} + tabDisabledMessage="Resizing a 2-node cluster is only allowed with Dedicated plans." types={displayTypes} /> - {isDatabasesV2GA && ( + {isNewDatabaseGA && ( <> - - - Set Number of Nodes{' '} - - - We recommend 3 nodes in a database cluster to avoid downtime - during upgrades and maintenance. - - - - {nodeOptions.map((nodeOption) => ( - } - data-qa-radio={nodeOption.label} - data-testid={`database-node-${nodeOption.value}`} - disabled={nodeOption.value < database.cluster_size} - key={nodeOption.value} - label={nodeOption.label} - value={nodeOption.value} - /> - ))} - + { + handleNodeChange(size); + }} + selectedPlan={displayTypes?.find( + (type) => type.id === selectedPlanId + )} + currentClusterSize={database.cluster_size} + currentPlan={currentPlan} + displayTypes={displayTypes} + selectedClusterSize={clusterSize} + selectedEngine={selectedEngine} + selectedTab={selectedTab} + /> )} - ({ - marginBottom: isDatabasesV2GA ? theme.spacing(2) : 0, - })} - variant="h2" - > - Summary {isDatabasesV2GA ? database.label : ''} - - {isDatabasesV2GA && currentPlan ? currentSummary : null} - {resizeSummary} + import('./DatabaseSummary')); const DatabaseBackups = React.lazy( @@ -72,11 +72,6 @@ export const DatabaseDetail = () => { setEditableLabelError, } = useEditableLabelState(); - const { - isDatabasesMonitorEnabled, - isDatabasesMonitorBeta, - } = useIsDatabasesEnabled(); - if (error) { return ( { } const isDefault = database.platform === 'rdbms-default'; - const isMonitorEnabled = isDefault && isDatabasesMonitorEnabled; + const isMonitorEnabled = isDefault && flags.dbaasV2MonitorMetrics?.enabled; const tabs: Tab[] = [ { @@ -118,9 +113,9 @@ export const DatabaseDetail = () => { if (isMonitorEnabled) { tabs.splice(1, 0, { + chip: flags.dbaasV2MonitorMetrics?.beta ? : null, routeName: `/databases/${engine}/${id}/monitor`, title: 'Monitor', - chip: isDatabasesMonitorBeta ? : null, }); } diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx index 80c6bb91b6d..d66ca38c4e0 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx +++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx @@ -181,7 +181,7 @@ const DatabaseLanding = () => { onButtonClick={() => history.push('/databases/create')} title="Database Clusters" /> - {showTabs && } + {showTabs && !isDatabasesV2GA && } {showTabs ? ( diff --git a/packages/manager/src/features/Databases/utilities.ts b/packages/manager/src/features/Databases/utilities.ts index 4da443b71e6..9f01754f3fa 100644 --- a/packages/manager/src/features/Databases/utilities.ts +++ b/packages/manager/src/features/Databases/utilities.ts @@ -15,8 +15,6 @@ import type { DatabaseFork } from '@linode/api-v4'; export interface IsDatabasesEnabled { isDatabasesEnabled: boolean; - isDatabasesMonitorBeta?: boolean; - isDatabasesMonitorEnabled?: boolean; isDatabasesV2Beta: boolean; isDatabasesV2Enabled: boolean; isDatabasesV2GA: boolean;