fix: [UIE-9487] VPC UI not displaying DBaaS resources

packages/api-v4/src/vpcs/types.ts

@@ -42,6 +42,7 @@ export interface CreateSubnetPayload {
 
 export interface Subnet extends CreateSubnetPayload {
   created: string;
+  databases: SubnetAssignedDatabaseData[];
   id: number;
   linodes: SubnetAssignedLinodeData[];
   nodebalancers: SubnetAssignedNodeBalancerData[];
@@ -68,6 +69,12 @@ export interface SubnetAssignedNodeBalancerData {
   ipv4_range: string;
 }
 
+export interface SubnetAssignedDatabaseData {
+  id: number;
+  ipv4_range: string;
+  ipv6_ranges: null | { range: string }[];
+}
+
 export interface VPCIP {
   active: boolean;
   address: null | string;

packages/manager/src/dev-tools/FeatureFlagTool.tsx

@@ -94,6 +94,7 @@ const options: { flag: keyof Flags; label: string }[] = [
     label: 'Object Storage Contextual Metrics',
   },
   { flag: 'objSummaryPage', label: 'OBJ Summary Page' },
+  { flag: 'vpcDbaasResources', label: 'VPC DBaaS Resources' },
   { flag: 'vpcIpv6', label: 'VPC IPv6' },
   { flag: 'reserveIp', label: 'Reserve IP' },
   { flag: 'marketplaceV2GlobalBanner', label: 'Marketplace V2 Global Banner' },

packages/manager/src/factories/databases.ts

@@ -199,6 +199,8 @@ export const databaseInstanceFactory =
     label: Factory.each((i) => `example.com-database-${i}`),
     members: {
       '2.2.2.2': 'primary',
+      '2.2.2.3': 'failover',
+      '2.2.2.4': 'failover',
     },
     platform: 'rdbms-default',
     region: Factory.each((i) => possibleRegions[i % possibleRegions.length]),
@@ -268,6 +270,8 @@ export const databaseFactory = Factory.Sync.makeFactory<Database>({
   label: Factory.each((i) => `database-${i}`),
   members: {
     '2.2.2.2': 'primary',
+    '2.2.2.3': 'failover',
+    '2.2.2.4': 'failover',
   },
   oldest_restore_time: '2024-09-15T17:15:12',
   platform: 'rdbms-default',

packages/manager/src/factories/subnets.ts

@@ -2,6 +2,7 @@ import { Factory } from '@linode/utilities';
 
 import type {
   Subnet,
+  SubnetAssignedDatabaseData,
   SubnetAssignedLinodeData,
   SubnetAssignedNodeBalancerData,
 } from '@linode/api-v4/lib/vpcs/types';
@@ -27,6 +28,23 @@ export const subnetAssignedNodebalancerDataFactory =
     ipv4_range: Factory.each((i) => `192.168.${i}.0/30`),
   });
 
+export const subnetAssignedDatabaseDataFactory =
+  Factory.Sync.makeFactory<SubnetAssignedDatabaseData>({
+    id: Factory.each((i) => i),
+    ipv4_range: Factory.each((i) => `192.168.${i}.0/30`),
+    ipv6_ranges: Factory.each((i) => [
+      {
+        range: `2600:3c11:e41c:${i}::/64`,
+      },
+      {
+        range: `2600:3c11:e41c:${i}::/64`,
+      },
+      {
+        range: `2600:3c11:e41c:${i}::/64`,
+      },
+    ]),
+  });
+
 export const subnetFactory = Factory.Sync.makeFactory<Subnet>({
   created: '2023-07-12T16:08:53',
   id: Factory.each((i) => i),
@@ -46,5 +64,12 @@ export const subnetFactory = Factory.Sync.makeFactory<Subnet>({
       })
     )
   ),
+  databases: Factory.each((i) =>
+    Array.from({ length: 3 }, (_, arrIdx) =>
+      subnetAssignedDatabaseDataFactory.build({
+        id: i * 10 + arrIdx,
+      })
+    )
+  ),
   updated: '2023-07-12T16:08:53',
 });

packages/manager/src/featureFlags.ts

@@ -294,6 +294,7 @@ export interface Flags {
   udp: boolean;
   vmHostMaintenance: VMHostMaintenanceFlag;
   volumeSummaryPage: boolean;
+  vpcDbaasResources: boolean;
   vpcIpv6: boolean;
 }
 

packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx

@@ -68,7 +68,8 @@
       page_size: newDatabasesPagination.pageSize,
     },
     databasesFilter,
-    isDefaultEnabled // TODO (UIE-8634): Determine if check if still necessary
+    isDefaultEnabled, // TODO (UIE-8634): Determine if check if still necessary
+    20000
   );
 
   if (databasesError) {

packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx

@@ -12,7 +12,10 @@ import { Link } from 'src/components/Link';
 import { DatabaseStatusDisplay } from 'src/features/Databases/DatabaseDetail/DatabaseStatusDisplay';
 import { DatabaseEngineVersion } from 'src/features/Databases/DatabaseEngineVersion';
 import { DatabaseActionMenu } from 'src/features/Databases/DatabaseLanding/DatabaseActionMenu';
-import { useIsDatabasesEnabled } from 'src/features/Databases/utilities';
+import {
+  getIsLinkInactive,
+  useIsDatabasesEnabled,
+} from 'src/features/Databases/utilities';
 import { isWithinDays, parseAPIDate } from 'src/utilities/date';
 import { formatDate } from 'src/utilities/formatDate';
 
@@ -64,11 +67,6 @@ export const DatabaseRow = ({
   const plan = types?.find((t: DatabaseType) => t.id === type);
   const formattedPlan = plan && formatStorageUnits(plan.label);
   const actualRegion = regions?.find((r) => r.id === region);
-  const isLinkInactive =
-    status === 'suspended' ||
-    status === 'suspending' ||
-    status === 'resuming' ||
-    status === 'migrated';
   const { isDatabasesV2GA } = useIsDatabasesEnabled();
 
   const configuration =
@@ -97,7 +95,7 @@ export const DatabaseRow = ({
           flex: '0 1 20.5%',
         }}
       >
-        {isDatabasesV2GA && isLinkInactive ? (
+        {isDatabasesV2GA && getIsLinkInactive(status) ? (
           label
         ) : (
           <Link to={`/databases/${engine}/${id}`}>{label}</Link>

packages/manager/src/features/Databases/utilities.ts

@@ -9,6 +9,7 @@ import type {
   DatabaseEngine,
   DatabaseFork,
   DatabaseInstance,
+  DatabaseStatus,
   Engine,
   PendingUpdates,
 } from '@linode/api-v4';
@@ -256,3 +257,9 @@ export const convertPrivateToPublicHostname = (host: string) => {
   const baseHostName = host.slice(privateStrIndex + 1);
   return `public-${baseHostName}`;
 };
+
+export const getIsLinkInactive = (status: DatabaseStatus) =>
+  status === 'suspended' ||
+  status === 'suspending' ||
+  status === 'resuming' ||
+  status === 'migrated';

packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.test.tsx

@@ -52,6 +52,7 @@ const props = {
     label: 'subnet-1',
     linodes: [],
     nodebalancers: [],
+    databases: [],
     created: '',
     updated: '',
   } as Subnet,

packages/manager/src/features/VPCs/VPCDetail/SubnetDatabaseRow.tsx

@@ -0,0 +1,99 @@
+import { Box, Chip } from '@linode/ui';
+import * as React from 'react';
+
+import { Link } from 'src/components/Link';
+import { TableCell } from 'src/components/TableCell';
+import { TableRow } from 'src/components/TableRow';
+import { getIsLinkInactive } from 'src/features/Databases/utilities';
+import { determineNoneSingleOrMultipleWithChip } from 'src/utilities/noneSingleOrMultipleWithChip';
+
+import type {
+  DatabaseInstance,
+  SubnetAssignedDatabaseData,
+} from '@linode/api-v4';
+
+interface Props {
+  assignedDatabase: SubnetAssignedDatabaseData;
+  database: DatabaseInstance;
+}
+
+export const SubnetDatabaseRow = ({ assignedDatabase, database }: Props) => {
+  const ipv6Ranges =
+    assignedDatabase?.ipv6_ranges
+      ?.map((rangeObj) => rangeObj.range)
+      .filter((range) => range !== undefined) ?? [];
+
+  const noneSingleOrMultipleWithChipIPV6 =
+    determineNoneSingleOrMultipleWithChip(ipv6Ranges);
+  const ipv6RangeContent = assignedDatabase?.ipv6_ranges
+    ? noneSingleOrMultipleWithChipIPV6
+    : '—';
+
+  // For IPv4 addresses column, we display the primary and failover IPs for the database instance.
+  const getIPv4AddressesContent = () => {
+    const memberKeys = Object.keys(database.members);
+
+    if (memberKeys.length === 0) {
+      return '—';
+    }
+
+    const primaryIPv4 = memberKeys.find(
+      (key) => database.members[key] === 'primary'
+    );
+    // Retrieve failover IPv4 addresses as there can be multiple
+    const failoverIPv4s = memberKeys.filter(
+      (key) => database.members[key] === 'failover'
+    );
+
+    if (failoverIPv4s.length === 0) {
+      return primaryIPv4;
+    }
+
+    return [primaryIPv4, ...failoverIPv4s].join(', ');
+  };
+
+  return (
+    <TableRow>
+      <TableCell>
+        <Box
+          sx={(theme) => ({
+            display: 'flex',
+            alignItems: 'center',
+            gap: theme.spacingFunction(8),
+          })}
+        >
+          {getIsLinkInactive(database.status) ? (
+            database?.label
+          ) : (
+            <Link
+              className="secondaryLink"
+              to={`/databases/${database?.engine}/${database?.id}/summary`}
+            >
+              {database?.label}
+            </Link>
+          )}
+          {database.cluster_size > 1 && (
+            <Chip
+              label="HA"
+              size="small"
+              sx={(theme) => ({ borderColor: theme.color.green, mx: 0, my: 0 })}
+              variant="outlined"
+            />
+          )}
+        </Box>
+      </TableCell>
+      <TableCell>{getIPv4AddressesContent()}</TableCell>
+      <TableCell noWrap>{assignedDatabase?.ipv4_range}</TableCell>
+      <TableCell noWrap>{ipv6RangeContent}</TableCell>
+    </TableRow>
+  );
+};
+
+export const SubnetDatabasesTableRowHead = (
+  <TableRow>
+    <TableCell sx={{ width: '20%' }}>Database Cluster</TableCell>
+    <TableCell>IPv4 Address(s)</TableCell>
+    <TableCell>VPC IPv4 Range</TableCell>
+    <TableCell>VPC IPv6 Range</TableCell>
+  </TableRow>
+);