diff --git a/packages/api-v4/.changeset/pr-9638-upcoming-features-1694022154737.md b/packages/api-v4/.changeset/pr-9638-upcoming-features-1694022154737.md new file mode 100644 index 00000000000..c0f5da8548b --- /dev/null +++ b/packages/api-v4/.changeset/pr-9638-upcoming-features-1694022154737.md @@ -0,0 +1,5 @@ +--- +"@linode/api-v4": Upcoming Features +--- + +DbaaS disk size and used size ([#9638](https://github.com/linode/manager/pull/9638)) diff --git a/packages/api-v4/src/account/types.ts b/packages/api-v4/src/account/types.ts index 3b1e03fe2de..37d0206fbda 100644 --- a/packages/api-v4/src/account/types.ts +++ b/packages/api-v4/src/account/types.ts @@ -249,6 +249,7 @@ export type EventAction = | 'community_mention' | 'community_question_reply' | 'credit_card_updated' + | 'database_low_disk_space_remaining' | 'database_backup_restore' | 'database_create' | 'database_credentials_reset' diff --git a/packages/api-v4/src/databases/types.ts b/packages/api-v4/src/databases/types.ts index 70af55d0410..e764162e8dd 100644 --- a/packages/api-v4/src/databases/types.ts +++ b/packages/api-v4/src/databases/types.ts @@ -128,6 +128,16 @@ export interface BaseDatabase { hosts: DatabaseHosts; port: number; updates: UpdatesSchedule; + /** + * total_disk_size_gb is feature flagged by the API. + * It may not be defined. + */ + total_disk_size_gb?: number; + /** + * used_disk_size_gb is feature flagged by the API. + * It may not be defined. + */ + used_disk_size_gb?: number; } export interface MySQLDatabase extends BaseDatabase { diff --git a/packages/manager/.changeset/pr-9638-upcoming-features-1694022186629.md b/packages/manager/.changeset/pr-9638-upcoming-features-1694022186629.md new file mode 100644 index 00000000000..46a06f8fc04 --- /dev/null +++ b/packages/manager/.changeset/pr-9638-upcoming-features-1694022186629.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +DbaaS disk size and used size ([#9638](https://github.com/linode/manager/pull/9638)) diff --git a/packages/manager/src/factories/databases.ts b/packages/manager/src/factories/databases.ts index a7749d6d9ee..856d20ff021 100644 --- a/packages/manager/src/factories/databases.ts +++ b/packages/manager/src/factories/databases.ts @@ -180,6 +180,7 @@ export const databaseFactory = Factory.Sync.makeFactory({ region: 'us-east', ssl_connection: false, status: pickRandom(possibleStatuses), + total_disk_size_gb: 15, type: 'g6-standard-0', updated: '2021-12-16T17:15:12', updates: { @@ -189,6 +190,7 @@ export const databaseFactory = Factory.Sync.makeFactory({ hour_of_day: 20, week_of_month: null, }, + used_disk_size_gb: 5, version: '5.8.13', }); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummary.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummary.tsx index d34701eb70e..691f76f5968 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummary.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummary.tsx @@ -4,8 +4,8 @@ import * as React from 'react'; import { Divider } from 'src/components/Divider'; import { Link } from 'src/components/Link'; -import { Typography } from 'src/components/Typography'; import { Paper } from 'src/components/Paper'; +import { Typography } from 'src/components/Typography'; import AccessControls from '../AccessControls'; import ClusterConfiguration from './DatabaseSummaryClusterConfiguration'; @@ -38,10 +38,10 @@ export const DatabaseSummary: React.FC = (props) => { return ( - + - + diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx index 15e7bc00e6c..2d5125724e2 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx @@ -5,6 +5,7 @@ import { makeStyles } from 'tss-react/mui'; import { Box } from 'src/components/Box'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; +import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { useDatabaseTypesQuery } from 'src/queries/databases'; import { useRegionsQuery } from 'src/queries/regions'; @@ -27,7 +28,7 @@ const useStyles = makeStyles()((theme: Theme) => ({ label: { fontFamily: theme.font.bold, lineHeight: '22px', - width: theme.spacing(7), + width: theme.spacing(13), }, status: { alignItems: 'center', @@ -65,6 +66,14 @@ export const DatabaseSummaryClusterConfiguration = (props: Props) => { ? 'Primary' : `Primary +${database.cluster_size - 1} replicas`; + const sxTooltipIcon = { + marginLeft: '4px', + padding: '0px', + }; + + const STORAGE_COPY = + 'The total disk size is smaller than the selected plan capacity due to the OS overhead.'; + return ( <> @@ -102,10 +111,28 @@ export const DatabaseSummaryClusterConfiguration = (props: Props) => { CPUs {type.vcpus} - - Storage - {convertMegabytesTo(type.disk, true)} - + {database.total_disk_size_gb ? ( + <> + + Total Disk Size + {database.total_disk_size_gb} GB + + + + Used + {database.used_disk_size_gb} GB + + + ) : ( + + Storage + {convertMegabytesTo(type.disk, true)} + + )} ); diff --git a/packages/manager/src/features/Events/eventMessageGenerator.ts b/packages/manager/src/features/Events/eventMessageGenerator.ts index 0af31239c62..0ce574bba2b 100644 --- a/packages/manager/src/features/Events/eventMessageGenerator.ts +++ b/packages/manager/src/features/Events/eventMessageGenerator.ts @@ -101,6 +101,12 @@ export const eventMessageCreators: { [index: string]: CreatorsForStatus } = { database_delete: { notification: (e) => `Database ${e.entity!.label} has been deleted.`, }, + database_low_disk_space_remaining: { + finished: (e) => + `Low disk space alert for database ${e.entity!.label} has cleared.`, + notification: (e) => + `Database ${e.entity!.label} has low disk space remaining.`, + }, database_update: { finished: (e) => `Database ${e.entity!.label} has been updated.`, }, diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts index a86e245d577..7dad2d4d944 100644 --- a/packages/manager/src/mocks/serverHandlers.ts +++ b/packages/manager/src/mocks/serverHandlers.ts @@ -1110,6 +1110,11 @@ export const handlers = [ 'Rebooting this thing and showing an extremely long event message for no discernible reason other than the fairly obvious reason that we want to do some testing of whether or not these messages wrap.', percent_complete: 15, }); + const dbEvents = eventFactory.buildList(1, { + action: 'database_low_disk_space_remaining', + entity: { id: 999, label: 'database-1', type: 'database' }, + message: 'Low disk space.', + }); const oldEvents = eventFactory.buildList(20, { action: 'account_update', percent_complete: 100, @@ -1128,7 +1133,12 @@ export const handlers = [ }); return res.once( ctx.json( - makeResourcePage([...events, ...oldEvents, eventWithSpecialCharacters]) + makeResourcePage([ + ...events, + ...dbEvents, + ...oldEvents, + eventWithSpecialCharacters, + ]) ) ); }),