upcoming: [UIE-9378] - DBaaS - Display connection pool section and table in Networking tab #13195

smans-akamai · 2025-12-11T20:24:14Z

Description 📝

This pull request is an update to DBaaS to display the Connection Pools section and table in the Networking tab in database details.

Changes 🔄

List any change(s) relevant to the reviewer.

A Connection Pools section can now be displayed in the Networking tab for PostgreSQL database clusters.
Updating connection pools queries to accept parameters for pagination.
Move shared styles for settings item and action menu wrapper to shared file.

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 🗓️

TBD

Preview 📷

Before	After

How to test 🧪

Prerequisites

(How to setup test environment)

Have the databasePgBouncer feature flag enabled. This will appear as Database PgBouncer in the dev tools.
Have access to the Databases tab
Enable mock data as backend is not yet available
To make sure you're accessing postgresql databases, update this line in the serverHandler by adding a new line after the database variable and add the following lines:

    database.engine = 'postgresql';
    database.platform = 'rdbms-default';

Verification steps

(How to verify changes)
Verifying Display Behavior for section and table

Access the databases tab
Click on a database cluster label to access the details
Navigate to the Networking tab for that cluster
Confirm that, for the postgresql databases, the new Manage PgBouncer Connection Pools section is now displayed

Verify Feature Flag Rendering Checks

Switch off the databasePgBouncer feature flag
Verify that the Manage PgBouncer Connection Pools section is no longer displayed in the Networking tab

Verify PostgreSQL Engine Check

Switch on the databasePgBouncer feature flag
Update the previously modified line in the serverHandler file so that the database engine is assigned mysql instead.
Verify that, after the page has reloaded, the Manage PgBouncer Connection Pools is no longer displayed even though the feature flag is switched on.

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 · 2025-12-11T21:06:55Z

packages/queries/src/databases/databases.ts

-      ._ctx.pools,
+    ...databaseQueries
+      .database('postgresql', databaseId)
+      ._ctx.connectionPools._ctx.paginated(params),


The connection pools query needed to accept pagination parameters, so I've updated this query and made a change in the keys.ts file. I also updated function name to include query for consistency with other similar functions in the file.

smans-akamai · 2025-12-11T21:09:21Z

packages/manager/src/features/Databases/shared.styles.ts

+      flexDirection: 'column',
+    },
+  },
+}));


These were common styles that I ended up reusing for the ActionsMenuWrapper used in the landing page table and for the new table for connection pools and for positioning settings items.

I've moved these shared styles to this new shared.styles.ts file to make it easier to reuse them. These styles can be seen in the DatabaseManageNetworking and the new DatabaseConnectionPools and DatabaseRow components. You'll see them pointing to this file now.

There may be other styles we can move here, so I plan to move them here as I go through other changes and come across them.

smans-akamai · 2025-12-11T21:10:14Z

...ages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseNetworking.tsx

        <DatabaseManageNetworking database={database} />
+        {flags.databasePgBouncer && database.engine === 'postgresql' && (
+          <DatabaseConnectionPools database={database} />
+        )}


Added these checks at the networking tab to conditionally render the new section based on the feature flag and database engine. It will only appear for postgresql database clusters.

smans-akamai · 2025-12-11T21:11:05Z

...anager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseManageNetworking.tsx

-
  const flags = useFlags();
-  const { classes } = useStyles();
+  const { classes } = makeSettingsItemStyles();


Moved these styles above to a shared file. See my other comment

smans-akamai · 2025-12-11T21:11:46Z

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

-    color: theme.tokens.alias.Content.Icon.Primary.Hover,
-  },
-}));
+})(({ theme }) => getActionMenuWrapperStyles(theme));


Moved these styles above to a shared file. See my other comment

smans-akamai · 2025-12-11T21:15:22Z

packages/api-v4/src/databases/databases.ts

    ),
    setMethod('GET'),
+    setParams(params),
  );


Updated to accept params as we need to be able to pass pageSize and pageNumber to the request.

hana-akamai

I'm not sure if this is due to the mocks, but can we fix the extra padding on the sides for the table (noticed this issue on the database landing table as well)?

...manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx

hana-akamai · 2025-12-12T18:11:48Z

...manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx

+      <div style={{ overflowX: 'auto', width: '100%' }}>
+        <Table
+          aria-label={'List of Connection pools'}
+          style={


Can we move this style into a styled component since it's taking up a few lines?

Do you mean a styled table component?

...manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx

hana-akamai · 2025-12-12T18:32:28Z

...manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx

+          page={pagination.page}
+          pageSize={pagination.pageSize}
+          pageSizes={PAGE_SIZES}
+          style={{


Same here, can we move styles to a styled component?

As discussed, we'll look into addressing the additional styled components separately.

smans-akamai · 2025-12-12T19:21:41Z

I'm not sure if this is due to the mocks, but can we fix the extra padding on the sides for the table (noticed this issue on the database landing table as well)?

I believe the padding for the tables is from the cds-web-component styles. That seems to be the way they chose to implement it, so it may be intentional so that it matches the cds library table styles. I don't think we should change that here if there's an issue with the padding. It should probably be raised with the CDS team so we can discuss it if it's an issue.

hana-akamai · 2025-12-12T19:29:22Z

Semi-related, the placement of the action menu kebab looks off (not aligned to the right) on mobile

hana-akamai · 2025-12-12T21:23:17Z

packages/queries/src/databases/databases.ts

      .database('postgresql', databaseId)
      ._ctx.connectionPools._ctx.pool(poolName),
    enabled,
+    refetchInterval: 20000,


Is this refetchInterval intentional?

ah right! I copied that logic from the calls we make for the table. I wasn't sure if we needed to refetch this. I can remove it for now and verify with their team if we need to refetch this data. I they do want to refetch it, I can verify how often we should and add it back later. Would that work?

I've removed it for now as it looks like it's applied to the wrong query. This was meant for the table data query. I can ask the backend team about refetching to see if we need it and how often it should be.

bnussman-akamai

Looks good! Just had one question about loading/error states in this context

bnussman-akamai · 2025-12-17T18:03:10Z

...manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx

+  if (connectionPoolsLoading) {
+    return <CircleProgress />;
+  }


Is this the desired loading and error state?

We could inline the loading state and error state into the table itself using https://design.linode.com/?path=/docs/components-table-tablerowloading--documentation

@bnussman-akamai So the DatabaseConnectionPool component is currently using the cds table web component that was integrated in a previous pull request (#12989) for the database landing page. I opted to use the same setup from the DatabaseLanding for this component for consistency.

After checking the code for the cds-web component table, that table doesn't have an inline error state/loading behavior like we see in the Linode Table component linked above. So we can't implement this behavior for the connection pool table. So for now, I'm planning to follow the same state pattern we see on the landing page.

Ah right. My fault. I forgot DBaaS uses the CDS Web component table. If there isn't an equivalent I don't have any issues with the current approach

…ble in Networking tab

…r and applying paginator min, results and page sizes

…Styles

linode-gh-bot · 2025-12-17T21:39:39Z

Cloud Manager UI test results

🎉 865 passing tests on test run #6 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`0 Failing`	`865 Passing`	`11 Skipped`	`42m 53s`

github-project-automation bot added this to Cloud Manager Dec 11, 2025

github-project-automation bot moved this to Review in Cloud Manager Dec 11, 2025

smans-akamai self-assigned this Dec 11, 2025

smans-akamai added the DBaaS Relates to Database as a Service label Dec 11, 2025

smans-akamai marked this pull request as ready for review December 11, 2025 21:05

smans-akamai requested a review from a team as a code owner December 11, 2025 21:05

smans-akamai requested a review from hana-akamai December 11, 2025 21:05

smans-akamai commented Dec 11, 2025

View reviewed changes

smans-akamai mentioned this pull request Dec 12, 2025

upcoming: [UIE-9380] - Service URI PG Bouncer Connection Details Section #13182

Open

9 tasks

hana-akamai reviewed Dec 12, 2025

View reviewed changes

smans-akamai force-pushed the UIE-9378-dbaas-networking-connection-pools branch from 1a7819d to fa11cc7 Compare December 12, 2025 19:39

hana-akamai reviewed Dec 12, 2025

View reviewed changes

hana-akamai approved these changes Dec 12, 2025

View reviewed changes

bnussman-akamai approved these changes Dec 17, 2025

View reviewed changes

github-project-automation bot moved this from Review to Approved in Cloud Manager Dec 17, 2025

smans-akamai added 5 commits December 17, 2025 15:47

upcoming: [UIE-9378] - DBaaS - Display connection pool section and ta…

b4776f3

…ble in Networking tab

Adding changesets

a66b053

Applying feedback part 1: Updating to exported StyledActionMenuWrappe…

c9abc3f

…r and applying paginator min, results and page sizes

Feedback part 2: Applying feedback on Stack usage in makeSettingsItem…

eb4c5cd

…Styles

Removing refretchInterval

8fee513

smans-akamai force-pushed the UIE-9378-dbaas-networking-connection-pools branch from a631c31 to 8fee513 Compare December 17, 2025 20:47

upcoming: [UIE-9378] - DBaaS - Display connection pool section and table in Networking tab #13195

Are you sure you want to change the base?

upcoming: [UIE-9378] - DBaaS - Display connection pool section and table in Networking tab #13195

Uh oh!

Conversation

smans-akamai commented Dec 11, 2025 • 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

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!

smans-akamai Dec 11, 2025 • 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 Dec 11, 2025 • 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!

Choose a reason for hiding this comment

Uh oh!

hana-akamai left a comment

Choose a reason for hiding this comment

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!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smans-akamai Dec 12, 2025 • 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 commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hana-akamai commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

bnussman-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smans-akamai Dec 17, 2025 • 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!

linode-gh-bot commented Dec 17, 2025

Cloud Manager UI test results

🎉 865 passing tests on test run #6 ↗︎

Uh oh!

Reviewers

Assignees

smans-akamai commented Dec 11, 2025 •

edited

Loading

smans-akamai Dec 11, 2025 •

edited

Loading

smans-akamai Dec 11, 2025 •

edited

Loading

smans-akamai Dec 12, 2025 •

edited

Loading

smans-akamai commented Dec 12, 2025 •

edited

Loading

hana-akamai commented Dec 12, 2025 •

edited

Loading

smans-akamai Dec 17, 2025 •

edited

Loading