feat: [WD-32447] Rich tooltips for pools #1698

Kxiru · 2026-01-07T02:47:57Z

Done

Created and added a Rich tooltip for pools in multiple places in the codebase.

Notes:

Please critique on whether the chip content is appropriate, should be spliced, or needds amendments.

QA

Run the LXD-UI:
- On the demo server via the link posted by @webteam-app below. This is only available for PRs created by collaborators of the repo. Ask @Kxiru or @edlerd for access.
- With a local copy of this branch, build and run as described in the docs.
Perform the following QA steps:
- [List the steps to QA the new feature(s) or prove that a bug has been resolved]

Screenshots

webteam-app · 2026-01-07T02:48:04Z

Demo

Jenkins

demos.haus

Copilot

Pull request overview

This PR introduces rich tooltips for storage pools throughout the LXD-UI application. The new StoragePoolRichChip component replaces simple ResourceLink components with an interactive tooltip that displays detailed pool information (description, status, driver, and used-by count) when users hover over pool references.

Key Changes:

Created new StoragePoolRichChip and StoragePoolRichTooltip components with associated styling
Replaced ResourceLink components with StoragePoolRichChip across 12 files for consistent pool display
Added responsive behavior to hide tooltips on smaller screens

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`src/pages/storage/StoragePoolRichChip.tsx`	New component that wraps pool links with rich tooltip functionality
`src/pages/storage/StoragePoolRichTooltip.tsx`	New component that renders the tooltip content with pool details
`src/sass/_storage_pool_rich_tooltip.scss`	Styling for the rich tooltip table layout
`src/sass/styles.scss`	Imports the new stylesheet
`src/util/instanceMigration.tsx`	Replaced ResourceLink with StoragePoolRichChip in migration success message
`src/pages/storage/StorageVolumes.tsx`	Updated pool column to use StoragePoolRichChip
`src/pages/storage/StorageVolumeOverview.tsx`	Updated pool display in overview table
`src/pages/storage/StoragePoolHeader.tsx`	Updated pool reference in rename success message
`src/pages/storage/StorageBuckets.tsx`	Updated pool column to use StoragePoolRichChip
`src/pages/storage/MigrateVolumeBtn.tsx`	Updated pool references in migration notifications
`src/pages/storage/EditStoragePool.tsx`	Updated pool reference in edit success message
`src/pages/storage/CreateStoragePool.tsx`	Updated pool reference in creation success message
`src/pages/profiles/ProfileStorageList.tsx`	Updated pool display in profile storage device list
`src/pages/instances/InstanceDetailPanelContent.tsx`	Updated root storage pool display
`src/components/DeviceDetails.tsx`	Updated pool references in device details

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/pages/storage/StoragePoolRichChip.tsx

src/pages/storage/StoragePoolRichTooltip.tsx

Copilot

Pull request overview

Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/pages/storage/StoragePoolRichTooltip.tsx

src/pages/storage/StoragePoolRichChip.tsx

kimanhou · 2026-01-07T09:20:12Z

On your screenshot, the instance icon in the Used by section doesn't have the same color as the other icons.

kimanhou · 2026-01-07T09:21:07Z

I thought we agreed yesterday not to use ExpandableList in a rich tooltip.

omarelkashef

Really nice! some observations below

src/pages/profiles/ProfileStorageList.tsx

src/pages/storage/StoragePoolHeader.tsx

src/pages/storage/StoragePoolRichTooltip.tsx

src/sass/_storage_pool_rich_tooltip.scss

Kxiru · 2026-01-08T03:36:03Z

@edlerd , could you please let me know where you wanted the PoolRichChips with the Memory bar to be? There are quite a lot of layers of abstraction, eg, in order to display the memory bar in the poolchip on the instance page, the cluster member has to go from InstanceOverview to DeviceDetails OR, be called with a hook within Device details. What do you think?

omarelkashef

Thank you for the improvements! A few more comments below

src/pages/storage/StoragePoolRichTooltip.tsx

omarelkashef · 2026-01-08T10:18:59Z

src/pages/storage/StoragePoolRichTooltip.tsx

@@ -0,0 +1,83 @@
+import { type FC } from "react";


If we can not find other rows for the tooltip, maybe having an exception and overriding the min-height is our best choice because the spacing does not look right. What do you think?

I agree but @edlerd wishes for there to be consistency in the sizing across all the tooltips. @edlerd , what do you think of the current implementation? Would you add more rows or are you happy with it as is?

We discussed earlier this week having an exception for the pool tooltip due to a lack of things to show in it.

src/pages/profiles/ProfileStorageList.tsx

edlerd · 2026-01-08T16:09:27Z

There are quite a lot of layers of abstraction, eg, in order to display the memory bar in the poolchip on the instance page, the cluster member has to go from InstanceOverview to DeviceDetails OR, be called with a hook within Device details. What do you think?

Let's forward a location prop from InstanceOverview to DeviceListTable down to DeviceDetails and StoragePoolRichChip. Yes, this is prop drilling through many layers. It seems fine, as all the interfaces are fairly small, so adding a prop is ok. Of course the new location prop shall be optional, as we will not have it set from the profile components.

edlerd

I think there was a misunderstanding between cluster member memory and storage pool size. See below.

src/pages/storage/StoragePoolRichTooltip.tsx

Kxiru · 2026-01-08T22:23:35Z

Can this be done in the component?

No, as the URL needs to access the device in the ..map and filter.

Signed-off-by: Nkeiruka <[email protected]>

edlerd · 2026-01-09T06:39:39Z

src/pages/storage/StoragePoolRichTooltipSize.tsx

+  return member && location ? (
+    <ClusterMemberMemoryUsage member={member} />
+  ) : (
+    <StoragePoolSize pool={pool} />


We want the graphical version with a meter bar here, not the plain text one.

src/pages/storage/StoragePoolRichTooltip.tsx

edlerd · 2026-01-09T06:46:51Z

src/pages/storage/StoragePoolRichTooltipSize.tsx

+
+const StoragePoolRichTooltipSize: FC<Props> = ({ pool, member, location }) => {
+  return member && location ? (
+    <ClusterMemberMemoryUsage member={member} />


We want the storage pool size for a cluster member, but only if the pool is local and the environment is clustered and if the pool is local. This is the wrong component, pulling the cluster member memory. It should be the storage pool usage for the given cluster member instead.

If no cluster member is given here, we check if there is only one cluster member. If there is only one, we show the pool usage for the pool on that member

If the pool is not having a isClusterLocalDriver then StoragePoolSize is already doing the right thing.

If no cluster member is given here and there is more than one cluster member and isClusterLocalDriver for that pool driver, then we should show a fallback.

edlerd · 2026-01-09T06:47:41Z

src/pages/storage/StoragePoolRichTooltip.tsx

@@ -0,0 +1,83 @@
+import { type FC } from "react";


We discussed earlier this week having an exception for the pool tooltip due to a lack of things to show in it.

Kxiru requested review from Copilot, edlerd, kimanhou and omarelkashef January 7, 2026 02:47

Copilot AI reviewed Jan 7, 2026

View reviewed changes

src/pages/storage/StoragePoolRichChip.tsx Outdated Show resolved Hide resolved

src/pages/storage/StoragePoolRichTooltip.tsx Outdated Show resolved Hide resolved

Kxiru force-pushed the pools-rich-tooltips branch from 9547f26 to d9b15bb Compare January 7, 2026 02:50

Kxiru requested a review from Copilot January 7, 2026 02:50

Copilot AI reviewed Jan 7, 2026

View reviewed changes

src/pages/storage/StoragePoolRichTooltip.tsx Outdated Show resolved Hide resolved

src/pages/storage/StoragePoolRichChip.tsx Show resolved Hide resolved

Kxiru force-pushed the pools-rich-tooltips branch from d9b15bb to 5b355ce Compare January 7, 2026 02:58

Kxiru self-assigned this Jan 7, 2026

Kxiru added Review: Code needed Review: QA needed labels Jan 7, 2026

Kxiru force-pushed the pools-rich-tooltips branch from 5b355ce to e5c29ec Compare January 7, 2026 14:16

omarelkashef reviewed Jan 7, 2026

View reviewed changes

Kxiru force-pushed the pools-rich-tooltips branch 2 times, most recently from 56081b8 to 4e591a3 Compare January 8, 2026 03:35

Kxiru requested a review from omarelkashef January 8, 2026 04:24

omarelkashef reviewed Jan 8, 2026

View reviewed changes

edlerd reviewed Jan 8, 2026

View reviewed changes

src/pages/storage/StoragePoolRichTooltip.tsx Outdated Show resolved Hide resolved

src/pages/storage/StoragePoolRichTooltip.tsx Outdated Show resolved Hide resolved

Kxiru force-pushed the pools-rich-tooltips branch from 4e591a3 to afecfee Compare January 8, 2026 23:23

feat: [WD-32447] Rich tooltips for pools

a1fd971

Signed-off-by: Nkeiruka <[email protected]>

Kxiru force-pushed the pools-rich-tooltips branch from afecfee to a1fd971 Compare January 8, 2026 23:26

edlerd reviewed Jan 9, 2026

View reviewed changes

feat: [WD-32447] Rich tooltips for pools #1698

Are you sure you want to change the base?

feat: [WD-32447] Rich tooltips for pools #1698

Uh oh!

Conversation

Kxiru commented Jan 7, 2026

Done

QA

Screenshots

Uh oh!

webteam-app commented Jan 7, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

kimanhou commented Jan 7, 2026

Uh oh!

kimanhou commented Jan 7, 2026

Uh oh!

omarelkashef left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Kxiru commented Jan 8, 2026

Uh oh!

omarelkashef left a comment

Choose a reason for hiding this comment

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!

Uh oh!

edlerd commented Jan 8, 2026

Uh oh!

edlerd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Kxiru commented Jan 8, 2026

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants