feat: [UIE-6576] - Dbaas total disk size and used disk size (#9638)

* Feat: [UIE-6576] - Dbaas total disk size and used disk size * improved responsive grid and feedback * remove old flag and improve comment --------- Co-authored-by: Banks Nussman <banks@nussman.us>
linode · Sep 13, 2023 · 1420641 · 1420641
1 parent cc2481a
commit 1420641
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 9 deletions.
diff --git a/packages/api-v4/.changeset/pr-9638-upcoming-features-1694022154737.md 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
@@ -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
@@ -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
@@ -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
@@ -180,6 +180,7 @@ export const databaseFactory = Factory.Sync.makeFactory<Database>({
   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<Database>({
     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
@@ -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> = (props) => {
   return (
     <Paper>
       <Grid container spacing={2}>
-        <Grid sm={4} xs={12}>
+        <Grid md={4} sm={12}>
           <ClusterConfiguration database={database} />
         </Grid>
-        <Grid sm={8} xs={12}>
+        <Grid md={8} sm={12}>
           <ConnectionDetails database={database} />
         </Grid>
       </Grid>

diff --git a/...features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx b/...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 (
     <>
       <Typography className={classes.header} variant="h3">
@@ -102,10 +111,28 @@ export const DatabaseSummaryClusterConfiguration = (props: Props) => {
           <Typography className={classes.label}>CPUs</Typography>
           {type.vcpus}
         </Box>
-        <Box display="flex">
-          <Typography className={classes.label}>Storage</Typography>
-          {convertMegabytesTo(type.disk, true)}
-        </Box>
+        {database.total_disk_size_gb ? (
+          <>
+            <Box display="flex">
+              <Typography className={classes.label}>Total Disk Size</Typography>
+              {database.total_disk_size_gb} GB
+              <TooltipIcon
+                status="help"
+                sxTooltipIcon={sxTooltipIcon}
+                text={STORAGE_COPY}
+              />
+            </Box>
+            <Box display="flex">
+              <Typography className={classes.label}>Used</Typography>
+              {database.used_disk_size_gb} GB
+            </Box>
+          </>
+        ) : (
+          <Box display="flex">
+            <Typography className={classes.label}>Storage</Typography>
+            {convertMegabytesTo(type.disk, true)}
+          </Box>
+        )}
       </div>
     </>
   );

diff --git 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
@@ -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,
+        ])
       )
     );
   }),