Skip to content

Commit

Permalink
feat: [UIE-8074] - DBaaS GA Summary tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@corya-akamai
corya-akamai committed Oct 21, 2024
1 parent 3eaf8c0 commit 16746ce
Show file tree
Hide file tree
Showing 13 changed files with 1,371 additions and 314 deletions.
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-11091-upcoming-features-1728668394698.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Upcoming Features
---

DBaaS GA summary tab enhancements ([#11091](https://github.com/linode/manager/pull/11091))
2 changes: 1 addition & 1 deletion packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ export const DatabaseBackups = (props: Props) => {
) : (
<span>
Select a date and time within the last 10 days you want to create a
forkfrom.
fork from.
</span>
)}
</StyledTypography>
Expand Down
215 changes: 215 additions & 0 deletions ...es/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummary.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
import { waitFor } from '@testing-library/react';
import * as React from 'react';
import { vi } from 'vitest';

import { databaseFactory } from 'src/factories';
import { renderWithTheme } from 'src/utilities/testHelpers';

import * as utils from '../../utilities';
import { DatabaseSummary } from './DatabaseSummary';

import type { Database } from '@linode/api-v4';

const CLUSTER_CONFIGURATION = 'Cluster Configuration';
const THREE_NODE = 'Primary +2 replicas';
const TWO_NODE = 'Primary +1 replicas';
const VERSION = 'Version';

const CONNECTION_DETAILS = 'Connection Details';
const PRIVATE_NETWORK_HOST = 'Private Network Host';
const PRIVATE_NETWORK_HOST_LABEL = 'private network host';
const READONLY_HOST_LABEL = 'read-only host';
const GA_READONLY_HOST_LABEL = 'Read-only Host';

const ACCESS_CONTROLS = 'Access Controls';

const DEFAULT_PLATFORM = 'rdbms-default';
const DEFAULT_PRIMARY = 'db-mysql-default-primary.net';
const DEFAULT_STANDBY = 'db-mysql-default-standby.net';

const LEGACY_PLATFORM = 'rdbms-legacy';
const LEGACY_PRIMARY = 'db-mysql-legacy-primary.net';
const LEGACY_SECONDARY = 'db-mysql-legacy-secondary.net';

const spy = vi.spyOn(utils, 'useIsDatabasesEnabled');
spy.mockReturnValue({
isDatabasesEnabled: true,
isDatabasesV1Enabled: true,
isDatabasesV2Beta: false,
isDatabasesV2Enabled: true,
isDatabasesV2GA: true,
isUserExistingBeta: false,
isUserNewBeta: false,
});

describe('Database Summary', () => {
it('should render V2GA view default db', async () => {
const database = databaseFactory.build({
cluster_size: 2,
hosts: {
primary: DEFAULT_PRIMARY,
standby: DEFAULT_STANDBY,
},
platform: DEFAULT_PLATFORM,
}) as Database;

const { queryAllByText } = renderWithTheme(
<DatabaseSummary database={database} />
);

await waitFor(() => {
expect(queryAllByText(CLUSTER_CONFIGURATION)).toHaveLength(1);
expect(queryAllByText(TWO_NODE)).toHaveLength(1);
expect(queryAllByText(VERSION)).toHaveLength(0);

expect(queryAllByText(CONNECTION_DETAILS)).toHaveLength(1);
expect(queryAllByText(PRIVATE_NETWORK_HOST)).toHaveLength(0);
expect(queryAllByText(GA_READONLY_HOST_LABEL)).toHaveLength(1);
expect(queryAllByText(DEFAULT_STANDBY)).toHaveLength(1);

expect(queryAllByText(ACCESS_CONTROLS)).toHaveLength(0);
});
});

it('should render V2GA view legacy db', async () => {
const database = databaseFactory.build({
cluster_size: 3,
hosts: {
primary: LEGACY_PRIMARY,
secondary: LEGACY_SECONDARY,
},
platform: LEGACY_PLATFORM,
}) as Database;

const { queryAllByText } = renderWithTheme(
<DatabaseSummary database={database} />
);

await waitFor(() => {
expect(queryAllByText(CLUSTER_CONFIGURATION)).toHaveLength(1);
expect(queryAllByText(THREE_NODE)).toHaveLength(1);
expect(queryAllByText(VERSION)).toHaveLength(0);

expect(queryAllByText(CONNECTION_DETAILS)).toHaveLength(1);
expect(queryAllByText(PRIVATE_NETWORK_HOST)).toHaveLength(1);
expect(queryAllByText(GA_READONLY_HOST_LABEL)).toHaveLength(0);
expect(queryAllByText(LEGACY_SECONDARY)).toHaveLength(1);

expect(queryAllByText(ACCESS_CONTROLS)).toHaveLength(0);
});
});

it('should render Beta view default db', async () => {
spy.mockReturnValue({
isDatabasesEnabled: true,
isDatabasesV1Enabled: true,
isDatabasesV2Beta: true,
isDatabasesV2Enabled: true,
isDatabasesV2GA: false,
isUserExistingBeta: true,
isUserNewBeta: false,
});
const database = databaseFactory.build({
cluster_size: 2,
hosts: {
primary: DEFAULT_PRIMARY,
secondary: undefined,
standby: DEFAULT_STANDBY,
},
platform: DEFAULT_PLATFORM,
}) as Database;

const { queryAllByText } = renderWithTheme(
<DatabaseSummary database={database} />
);

await waitFor(() => {
expect(queryAllByText(CLUSTER_CONFIGURATION)).toHaveLength(1);
expect(queryAllByText(TWO_NODE)).toHaveLength(1);
expect(queryAllByText(VERSION)).toHaveLength(1);

expect(queryAllByText(CONNECTION_DETAILS)).toHaveLength(1);
expect(queryAllByText(PRIVATE_NETWORK_HOST_LABEL)).toHaveLength(0);
expect(queryAllByText(READONLY_HOST_LABEL)).toHaveLength(1);
expect(queryAllByText(/db-mysql-default-standby.net/)).toHaveLength(1);

expect(queryAllByText(ACCESS_CONTROLS)).toHaveLength(1);
});
});

it('should render Beta view legacy db', async () => {
spy.mockReturnValue({
isDatabasesEnabled: true,
isDatabasesV1Enabled: true,
isDatabasesV2Beta: true,
isDatabasesV2Enabled: true,
isDatabasesV2GA: false,
isUserExistingBeta: true,
isUserNewBeta: false,
});
const database = databaseFactory.build({
cluster_size: 3,
hosts: {
primary: LEGACY_PRIMARY,
secondary: LEGACY_SECONDARY,
standby: undefined,
},
platform: LEGACY_PLATFORM,
}) as Database;

const { queryAllByText } = renderWithTheme(
<DatabaseSummary database={database} />
);

await waitFor(() => {
expect(queryAllByText(CLUSTER_CONFIGURATION)).toHaveLength(1);
expect(queryAllByText(THREE_NODE)).toHaveLength(1);
expect(queryAllByText(VERSION)).toHaveLength(1);

expect(queryAllByText(CONNECTION_DETAILS)).toHaveLength(1);
expect(queryAllByText(PRIVATE_NETWORK_HOST_LABEL)).toHaveLength(1);
expect(queryAllByText(READONLY_HOST_LABEL)).toHaveLength(0);
expect(queryAllByText(/db-mysql-legacy-secondary.net/)).toHaveLength(1);

expect(queryAllByText(ACCESS_CONTROLS)).toHaveLength(1);
});
});

it('should render V1 view legacy db', async () => {
spy.mockReturnValue({
isDatabasesEnabled: true,
isDatabasesV1Enabled: true,
isDatabasesV2Beta: false,
isDatabasesV2Enabled: false,
isDatabasesV2GA: false,
isUserExistingBeta: false,
isUserNewBeta: false,
});
const database = databaseFactory.build({
cluster_size: 3,
hosts: {
primary: LEGACY_PRIMARY,
secondary: LEGACY_SECONDARY,
standby: undefined,
},
platform: LEGACY_PLATFORM,
}) as Database;

const { queryAllByText } = renderWithTheme(
<DatabaseSummary database={database} />
);

await waitFor(() => {
expect(queryAllByText(CLUSTER_CONFIGURATION)).toHaveLength(1);
expect(queryAllByText(THREE_NODE)).toHaveLength(1);
expect(queryAllByText(VERSION)).toHaveLength(1);

expect(queryAllByText(CONNECTION_DETAILS)).toHaveLength(1);
expect(queryAllByText(PRIVATE_NETWORK_HOST_LABEL)).toHaveLength(1);
expect(queryAllByText(READONLY_HOST_LABEL)).toHaveLength(0);
expect(queryAllByText(/db-mysql-legacy-secondary.net/)).toHaveLength(1);

expect(queryAllByText(ACCESS_CONTROLS)).toHaveLength(1);
});
});
});
47 changes: 33 additions & 14 deletions packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@ import { Divider } from 'src/components/Divider';
import { Link } from 'src/components/Link';
import { Paper } from 'src/components/Paper';
import { Typography } from 'src/components/Typography';

import AccessControls from '../AccessControls';
import ClusterConfiguration from './DatabaseSummaryClusterConfiguration';
import ConnectionDetails from './DatabaseSummaryConnectionDetails';
import AccessControls from 'src/features/Databases/DatabaseDetail/AccessControls';
import ClusterConfiguration from 'src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration';
import ConnectionDetails from 'src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails';
import ClusterConfigurationLegacy from 'src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryClusterConfigurationLegacy';
import ConnectionDetailsLegacy from 'src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy';
import { useIsDatabasesEnabled } from 'src/features/Databases/utilities';

import type { Database } from '@linode/api-v4/lib/databases/types';

Expand All @@ -19,6 +21,7 @@ interface Props {

export const DatabaseSummary: React.FC<Props> = (props) => {
const { database, disabled } = props;
const { isDatabasesV2GA } = useIsDatabasesEnabled();

const description = (
<>
Expand All @@ -40,19 +43,35 @@ export const DatabaseSummary: React.FC<Props> = (props) => {
return (
<Paper>
<Grid container spacing={2}>
<Grid md={4} sm={12}>
<ClusterConfiguration database={database} />
<Grid md={isDatabasesV2GA ? 12 : 4} sm={12}>
{isDatabasesV2GA ? (
<ClusterConfiguration database={database} />
) : (
// Deprecated @since DBaaS V2 GA. Will be removed remove post GA release ~ Dec 2024
<ClusterConfigurationLegacy database={database} />
)}
</Grid>
<Grid md={8} sm={12}>
<ConnectionDetails database={database} />
<Grid md={isDatabasesV2GA ? 12 : 8} sm={12}>
{isDatabasesV2GA ? (
<ConnectionDetails database={database} />
) : (
// Deprecated @since DBaaS V2 GA. Will be removed remove post GA release ~ Dec 2024
<ConnectionDetailsLegacy database={database} />
)}
</Grid>
</Grid>
<Divider spacingBottom={16} spacingTop={28} />
<AccessControls
database={database}
description={description}
disabled={disabled}
/>
{!isDatabasesV2GA && (
// Deprecated @since DBaaS V2 GA. Will be removed remove post GA release ~ Dec 2024
// AccessControls accessible through dropdown menu on landing page table and on settings tab
<>
<Divider spacingBottom={16} spacingTop={28} />
<AccessControls
database={database}
description={description}
disabled={disabled}
/>
</>
)}
</Paper>
);
};
Expand Down
18 changes: 0 additions & 18 deletions ...r/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryAccessControls.tsx
View file

This file was deleted.

50 changes: 50 additions & 0 deletions ...res/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.style.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { styled } from '@mui/material/styles';
import Grid2 from '@mui/material/Unstable_Grid2/Grid2';

import { Box } from 'src/components/Box';
import { Typography } from 'src/components/Typography';

export const StyledGridContainer = styled(Grid2, {
label: 'StyledGridContainer',
})(({ theme }) => ({
'&>*:nth-of-type(even)': {
boxShadow: `inset 0px -1px 0px 0 ${
theme.palette.mode === 'dark'
? theme.color.white
: theme.palette.grey[200]
}`,
},
'&>*:nth-of-type(odd)': {
boxShadow: `inset 0px -1px 0px 0 ${theme.color.white}`,
marginBottom: '1px',
},
boxShadow: `inset 0 -1px 0 0 ${
theme.palette.mode === 'dark' ? theme.color.white : theme.palette.grey[200]
}, inset 0 1px 0 0 ${
theme.palette.mode === 'dark' ? theme.color.white : theme.palette.grey[200]
}, inset -1px 0 0 ${
theme.palette.mode === 'dark' ? theme.color.white : theme.palette.grey[200]
}`,
}));

export const StyledLabelTypography = styled(Typography, {
label: 'StyledLabelTypography',
})(({ theme }) => ({
background:
theme.palette.mode === 'dark'
? theme.bg.tableHeader
: theme.palette.grey[200],
color: theme.palette.mode === 'dark' ? theme.color.grey6 : 'inherit',
fontFamily: theme.font.bold,
height: '100%',
padding: '4px 15px',
}));

export const StyledValueBox = styled(Box, {
label: 'StyledValueBox',
})(({ theme }) => ({
alignItems: 'center',
color: theme.palette.mode === 'dark' ? theme.color.grey8 : theme.color.black,
display: 'flex',
padding: `0 ${theme.spacing()}`,
}));
Loading

0 comments on commit 16746ce

Please sign in to comment.