upcoming: [UIE-9487] VPC UI not displaying DBaaS resources by smans-akamai · Pull Request #13504 · linode/manager

smans-akamai · 2026-03-17T20:10:53Z

Description 📝

This pull request updates the VPC UI to display DBaaS resources and update existing resource counts to include databases

This issue consists of the following:

The Resource counts shown in the VPC Landing page, VPC Details Summary, and VPC Details Subnets tables aren't including the number of databases in the count
In the VPC Details Subnets table, the resource tables shown under each expanded Subnet don't include a databases table in addition to the pre-existing Linode and Nodebalancer tables.

Changes 🔄

List any change(s) relevant to the reviewer.

Updating any Resource counts shown in the VPC Landing page, table, VPC Details Summary, and Subnets table to include the number of databases in the count.
In the VPC Details Subnets table, under an expanded Subnet, display a databases table in addition to the pre-existing Linode and Nodebalancer tables.
Introducing and integrating the new vpcDbaasResources feature flag

Scope 🚢

Upon production release, changes in this PR will be visible to:

All customers
Some customers (e.g. in Beta or Limited Availability)
No customers / Not applicable

Target release date 🗓️

4/29/2026

Preview 📷

Note: The screenshots below are using mock data, so the data shown may not be accurate. The resource counts behavior will need to be checked using the verification steps that follow.

Databases Resource Tables Not displaying under expanded Subnet in VPC Details View

Before	After

Resource Count Locations in VPC: UI
VPC Landing Table

VPC Detail Summary and Subnets Table
*Note: The count in the summary is inaccurate due to mock data. Use the verification steps to test this behavior.

How to test 🧪

Prerequisites

(How to setup test environment)

Have the vpcDbaasResources feature flag enabled in your local environment via VPC DBaaS Resources
Have access to the Staging environment and have a VPC and Subnet created.

Reproduction steps

Test the VPC workflow

In the staging environment, access the VPC tab, select the Create VPC and create a new VPC and Subnet in a region. Preferably one that doesn't currently have one. For example, US, Chicago, IL. Keep track of the region for this new VPC/Subnet.
Once created, it should navigate you back to the VPC landing page and you should see your new VPC in the table.
Observe that the resource count for that VPC in the table is currently 0, which is accurate.
Open the Dev tools Networking tab and keep it open
Click the VPC label in the table to navigate to the VPC details view.
In the Dev Tools networking tab, search for the subnets call (*/vpcs/{vpcID}/subnets) and inspect the response to see that the databases property is currently an empty array
Observe that the VPC Summary and Subnets table below show a resource count of 0, which is accurate
Expand the Subnets table and see that the linodes table is displayed in an empty state.

Create a new database and assign the VPC/Subnet you created and retest the steps above

Access the databases tab and select Create Database Cluster
Create a database cluster in the same region, select 3 nodes for the cluster, and make sure to select the VPC and Subnet you just created. This will assign it as the resource for that VPC/Subnet.
Access the VPC tab and follow the Test the VPC workflow steps above.
See that the subnets call returns the databases property with a single database in the array, but the resource counts on all pages are still 0.
See that, when the subnet you created is expanded, it still only displays an empty linodes table and no databases table is shown.

Verification steps

(How to verify changes)
Testing the Resource Counts

In your local environment on the branch for this pull request, point it to staging.
Access the VPC tab and see that the resources count for the VPC you created in the verification steps now shows an accurate count (1 for the database that was assigned)
Click the VPC label to access the details view and see that the resource counts in the summary and subnets table is also updated to include this count.

Testing the database resources table under the expanded Subnet using mock data

Enable mock data in the local environment
In the ServerHandler.ts file, uncomment the newly added mock data under the */v4beta/vpcs/:vpcId/subnets listener.
Access the VPC tab and open the networking tab in Dev tools.
Click on one of the VPC labels to access the VPC details
In the dev tools Networking tab, search for the subnets call (*/vpcs/{vpcID}/subnets) and inspect the response to see that databases property has 5 items listed.
In this view, expand the single Subnet from the mock data and see that the databases table now appears in addition the Linodes and Nodebalancers table and lists these 5 items.

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All tests and CI checks are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

smans-akamai · 2026-03-25T16:44:18Z

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

+          borderTop: `1px solid ${theme.tokens.component.Table.Row.Border}`,
+        }}
+      />
+    </>


Added pagination since the databases table will be using the database list GET request which is paginated. The other tables (Linodes and Nodebalancers) loop through the IDs from the subnets response and make their instance calls, so they don't have to be paginated.

This is using the default page size options (25, 50, 75, 100) and is set to default to 25 as that's the minimum size for the Get database list request.

Here's a screenshot of the pagination appearing below the table. This can only be seen with mock data is you make the database list response at least 26 databases in the serverHandler.ts file.

smans-akamai · 2026-03-25T16:47:12Z

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

+  const theme = useTheme();
+
+  const [pageSize, setPageSize] = React.useState(25);
+  const [page, setPage] = React.useState(1);


I chose to store the page and pageSize property in state instead of using the usePaginationV2 hook that's used in the DatabaseLanding since there can be many of these and it might not make sense to store this information in preferences as the VPCs and Subnets can also be deleted.

Does this approach make sense for this unique case?

I'm fine with this

smans-akamai · 2026-03-25T16:52:22Z

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

+  const numResources = isNodebalancerVPCEnabled
+    ? getUniqueResourcesFromSubnets(
+        vpc.subnets,
+        flags.vpcDbaasResources ?? false


For the new vpcDbaasResources feature flag, in addition to hiding the databases table, the resource count fix is also behind this flag. I assumed we want the table to appear along with the updated count, so I've chosen to keep both changes behind the new feature flag for this reason.

smans-akamai · 2026-03-25T16:54:11Z

packages/manager/src/mocks/serverHandlers.ts

-      id: 5,
-      label: 'database-instance-5',
-    });
+    const ids = Array.from({ length: 5 }, (_, i) => i + 1); // Update length to change the number of databases


Added this to make it a bit easier to control the length of the mock data. You can see something similar in the */v4beta/vpcs/:vpcId/subnets listener below that was also updated in this pull request.

packages/queries/src/databases/databases.ts

smans-akamai · 2026-03-25T16:58:11Z

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

    databasesFilter,
-    isDefaultEnabled // TODO (UIE-8634): Determine if check if still necessary
+    isDefaultEnabled, // TODO (UIE-8634): Determine if check if still necessary
+    20000


For more info, refer to my previous comment on the databases query.

smans-akamai · 2026-03-25T17:05:24Z

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

+    }
+
+    return [primaryIPv4, ...failoverIPv4s].join(', ');
+  };


This logic uses the members property to get the content for the IPv4 field that can be seen in the wireframes.

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

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

hana-akamai · 2026-03-27T20:23:18Z

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

+  const theme = useTheme();
+
+  const [pageSize, setPageSize] = React.useState(25);
+  const [page, setPage] = React.useState(1);


I'm fine with this

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

packages/queries/src/databases/databases.ts

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

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

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

packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx

… table in the VPC UI

… and table feature

hana-akamai · 2026-04-08T19:17:06Z

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

+    const dbWithPrimary = {
+      ...mockDatabase,
+      members: { '2.2.2.2': 'primary' },
+    } as DatabaseInstance;


Do we need the as DatabaseInstance castings?

I ran into some issues with the type when trying to modify the members property, so I cast it to work around these, but let me see if there's a way to accomplish this without casting.

@hana-akamai I've removing the casting in favor of specifying the type for the mock database variables when needed.

hana-akamai · 2026-04-08T19:32:28Z

packages/manager/.changeset/pr-13504-fixed-1775602514569.md

@@ -0,0 +1,5 @@
+---
+'@linode/manager': Fixed


I would say this is more Upcoming Features than a bug fix

Alright! I'll update this changeset and the pull request title to Upcoming Features.

@hana-akamai I've updated the change set included with this pull request and updated the pull request title and description!

dwiley-akamai

Verification steps ✅
Code review ✅

dwiley-akamai · 2026-04-09T17:01:19Z

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

+export const SubnetDatabasesTableRowHead = (
+  <TableRow>
+    <TableCell sx={{ width: '20%' }}>Database Cluster</TableCell>
+    <TableCell>IPv4 Address(s)</TableCell>


Suggested change

<TableCell>IPv4 Address(s)</TableCell>

<TableCell>IPv4 Address(es)</TableCell>

Thanks for catching this @dwiley-akamai! I've pushed up a change to fix the header text for this.

dwiley-akamai · 2026-04-09T17:01:33Z

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

+      await userEvent.click(expandTableButton);
+
+      await findByText('Database Cluster');
+      await findByText('IPv4 Address(s)');


Suggested change

await findByText('IPv4 Address(s)');

await findByText('IPv4 Address(es)');

In addition to the related text change, I've included this update to fix the test checking the header text.

linode-gh-bot · 2026-04-09T18:43:12Z

Cloud Manager UI test results

🔺 14 failing tests on test run #12 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`14 Failing`	`888 Passing`	`11 Skipped`	`63m 36s`

Details

Failing Tests
	Spec	Test
❌	`images-empty-landing-page.spec.ts`	Cloud Manager Cypress Tests→Images empty landing page » shows the empty state when there are no images
❌	`images-empty-landing-page.spec.ts`	Cloud Manager Cypress Tests→Images empty landing page » checks restricted user has no access to create Image on Image landing page
❌	`object-storage.e2e.spec.ts`	Cloud Manager Cypress Tests→object storage end-to-end tests » can update bucket access
❌	`create-image.spec.ts`	Cloud Manager Cypress Tests→create image (e2e) » create image from a linode
❌	`smoke-create-image.spec.ts`	Cloud Manager Cypress Tests→create image (using mocks) » create image from a linode
❌	`create-linode-from-image.spec.ts`	Cloud Manager Cypress Tests→create linode from image, mocked data » creates linode from image on images tab
❌	`rebuild-linode.spec.ts`	Cloud Manager Cypress Tests→rebuild linode » rebuilds a linode from Image
❌	`rebuild-linode.spec.ts`	Cloud Manager Cypress Tests→rebuild linode » rebuilds a linode from Community StackScript
❌	`rebuild-linode.spec.ts`	Cloud Manager Cypress Tests→rebuild linode » rebuilds a linode from Account StackScript
❌	`rebuild-linode.spec.ts`	Cloud Manager Cypress Tests→rebuild linode » cannot rebuild a provisioning linode
❌	`rebuild-linode.spec.ts`	Cloud Manager Cypress Tests→rebuild linode » can rebuild a Linode reusing existing user data
❌	`rebuild-linode.spec.ts`	Cloud Manager Cypress Tests→rebuild linode » can rebuild a linode with the GECKO is enabled
❌	`restricted-user-details-pages.spec.ts`	Cloud Manager Cypress Tests→restricted user details pages » should disable action elements and buttons in the 'Images' details page
❌	`images-non-empty-landing-page.spec.ts`	Cloud Manager Cypress Tests→image landing checks for non-empty state with restricted user » checks restricted user with read access has no access to create image and can see existing images

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/images/images-empty-landing-page.spec.ts,cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts,cypress/e2e/core/images/create-image.spec.ts,cypress/e2e/core/images/smoke-create-image.spec.ts,cypress/e2e/core/images/create-linode-from-image.spec.ts,cypress/e2e/core/linodes/rebuild-linode.spec.ts,cypress/e2e/core/account/restricted-user-details-pages.spec.ts,cypress/e2e/core/images/images-non-empty-landing-page.spec.ts"

smans-akamai added DBaaS Relates to Database as a Service VPC Relating to VPC project labels Mar 17, 2026

github-project-automation bot added this to Cloud Manager Mar 17, 2026

github-project-automation bot moved this to Review in Cloud Manager Mar 17, 2026

smans-akamai self-assigned this Mar 17, 2026

smans-akamai force-pushed the UIE-9487-display-vpc-ui-display-dbaas-resources branch from 5eb6f67 to 80d3e4c Compare March 24, 2026 20:43

smans-akamai commented Mar 25, 2026

View reviewed changes

packages/queries/src/databases/databases.ts Outdated Show resolved Hide resolved

smans-akamai commented Mar 25, 2026

View reviewed changes

smans-akamai requested a review from hana-akamai March 25, 2026 16:58

smans-akamai commented Mar 25, 2026

View reviewed changes

hana-akamai reviewed Mar 27, 2026

View reviewed changes

smans-akamai force-pushed the UIE-9487-display-vpc-ui-display-dbaas-resources branch from 80d3e4c to b308124 Compare March 30, 2026 15:17

smans-akamai force-pushed the UIE-9487-display-vpc-ui-display-dbaas-resources branch from 2c35b3b to f1f379c Compare April 7, 2026 16:03

hana-akamai reviewed Apr 7, 2026

View reviewed changes

smans-akamai marked this pull request as ready for review April 7, 2026 23:02

smans-akamai requested a review from a team as a code owner April 7, 2026 23:02

smans-akamai requested a review from dwiley-akamai April 8, 2026 16:08

smans-akamai added 8 commits April 8, 2026 15:09

fix: [UIE-9487] - Networking/DBaaS - Display DBaaS resource count and…

2e41109

… table in the VPC UI

Making enhancements to the SubnetDatabasesTable and cleaning up

74a2739

Moving paginator in SubnetDatabasesTable

d9b58d5

Applying initial feedback

7068c61

Removing leftover change from old implementation

d53ca80

Adding unit tests for various changes related to dbaas resource count…

15ffa37

… and table feature

adding changesets

7d5948e

Applying secondary feedback

367fdec

smans-akamai force-pushed the UIE-9487-display-vpc-ui-display-dbaas-resources branch from 532a8d1 to 367fdec Compare April 8, 2026 19:09

hana-akamai approved these changes Apr 8, 2026

View reviewed changes

Updating changeset and unit tests based on additional feedback

06e17b4

smans-akamai changed the title ~~fix: [UIE-9487] VPC UI not displaying DBaaS resources~~ upcoming: [UIE-9487] VPC UI not displaying DBaaS resources Apr 8, 2026

dwiley-akamai approved these changes Apr 9, 2026

View reviewed changes

github-project-automation bot moved this from Review to Approved in Cloud Manager Apr 9, 2026

Applying feedback to fix text for database table IPV4 Address header

1dc80e9

jdamore-linode merged commit cdab569 into linode:develop Apr 9, 2026
33 of 35 checks passed

github-project-automation bot moved this from Approved to Merged in Cloud Manager Apr 9, 2026

	<TableCell>IPv4 Address(s)</TableCell>
	<TableCell>IPv4 Address(es)</TableCell>

	await findByText('IPv4 Address(s)');
	await findByText('IPv4 Address(es)');

Conversation

smans-akamai commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Changes 🔄

Scope 🚢

Target release date 🗓️

Preview 📷

How to test 🧪

Prerequisites

Reproduction steps

Verification steps

As an Author, to speed up the review process, I considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smans-akamai Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smans-akamai Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smans-akamai Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dwiley-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

linode-gh-bot commented Apr 9, 2026

Cloud Manager UI test results

smans-akamai commented Mar 17, 2026 •

edited

Loading

smans-akamai Mar 30, 2026 •

edited

Loading

smans-akamai Mar 25, 2026 •

edited

Loading

smans-akamai Mar 25, 2026 •

edited

Loading