upcoming: [UIE-9487] VPC UI not displaying DBaaS resources (#13504)

* fix: [UIE-9487] - Networking/DBaaS - Display DBaaS resource count and table in the VPC UI

* Making enhancements to the SubnetDatabasesTable and cleaning up

* Moving paginator in SubnetDatabasesTable

* Applying initial feedback

* Removing leftover change from old implementation

* Adding unit tests for various changes related to dbaas resource count and table feature

* adding changesets

* Applying secondary feedback

* Updating changeset and unit tests based on additional feedback

* Applying feedback to fix text for database table IPV4 Address header

Author: smans-akamai

packages/api-v4/.changeset/pr-13504-added-1775602581034.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Added
+---
+
+SubnetAssignedDatabaseData interface and update to Subnet to include databases property ([#13504](https://github.com/linode/manager/pull/13504))

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/.changeset/pr-13504-upcoming-features-1775679549160.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+DBaaS resource counts and databases resource table in VPC UI ([#13504](https://github.com/linode/manager/pull/13504))

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 @@ export const DatabaseLanding = () => {
       page_size: newDatabasesPagination.pageSize,
     },
     databasesFilter,
-    isDefaultEnabled // TODO (UIE-8634): Determine if check if still necessary
+    isDefaultEnabled, // TODO (UIE-8634): Determine if check is 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,6 @@ export const convertPrivateToPublicHostname = (host: string) => {
   const baseHostName = host.slice(privateStrIndex + 1);
   return `public-${baseHostName}`;
 };
+
+export const getIsLinkInactive = (status: DatabaseStatus) =>
+  ['migrated', 'resuming', 'suspended', 'suspending'].includes(status);