Skip to content

console: add redesigned cluster details layout behind a UI preview - #39446

Open
leedqin wants to merge 2 commits into
mainfrom
cluster-page-layout
Open

leedqin wants to merge 2 commits into
mainfrom
cluster-page-layout

Conversation

@leedqin

@leedqin leedqin commented Oct 1, 2026 •

Copy link
Copy Markdown
Contributor

Motivation

First PR in a stack that redesigns the cluster details page. The redesign puts the object lists under one tab, moves cluster configuration into a drawer, and replaces the overview charts with a combined resource usage view. This PR lands only the page shell, so each later PR adds one piece behind the same flag.

Description

  • The new page sits behind a new UI preview, clusterDetailsRedesign, offered by the LaunchDarkly flag cluster-details-page-cns-173. Users who are offered it opt in per browser from the pill in the breadcrumb bar ("Show the new cluster details page" / "Show classic cluster details page"). Self-managed keeps the classic page: it has no preview toggle and treats unlisted flags as on, so disabledFlexibleDeploymentFlags pins cluster-details-page-cns-173 off.
  • Tabs:
    • Metrics renders the existing ClusterOverview until the resource usage PR replaces it.
    • Objects shows the existing materialized view, index, source and sink lists behind a type switcher, at objects/:objectType.
    • Replicas is temporary. The configuration drawer PR moves replica management into the drawer and removes this tab.
  • A title row shows the cluster name with its size and replica count. The name becomes the drawer trigger in the configuration PR.
  • Links work across both pages. Classic tab URLs (/indexes and the rest) redirect into the Objects tab, and objects/<type> URLs redirect to the matching classic tab, or to Overview for an unknown type. A bare objects link opens the first classic object tab.
  • ClusterDetailBreadcrumbs moves to its own module so both pages share it. Its only change is hosting the preview pill.

Next in the stack: the resource usage data (#39507) and charts (#39508), then memory by object, worker skew, and the configuration drawer.

The cluster-details-page-cns-173 flag is on in LaunchDarkly's Staging environment, which PR previews read. Production needs it too before the preview can be offered there.

Verification

ClusterDetail.test.tsx adds tests for:

  • the preview switch in both directions;
  • the new title and tabs;
  • the Objects type switcher;
  • the redirects in both directions, including an unknown object type;
  • keeping the current tab when switching clusters from the breadcrumb menu.

useUiPreview.test.tsx adds a test that self-managed keeps the redesign off.

🤖 Generated with Claude Code

@leedqin
leedqin force-pushed the cluster-page-layout branch from 0d3a2b7 to 9748a34 Compare October 2, 2026 23:17
@leedqin
leedqin added this pull request to stack #39509 October 2, 2026 23:17
@leedqin
leedqin force-pushed the cluster-page-layout branch from 9748a34 to da596f5 Compare October 5, 2026 15:19
@leedqin
leedqin marked this pull request as ready for review October 5, 2026 15:20
@leedqin
leedqin requested a review from a team as a code owner October 5, 2026 15:20
@leedqin
leedqin requested a review from jdonelson October 5, 2026 15:20
@leedqin
leedqin force-pushed the cluster-page-layout branch 2 times, most recently from 86b3a41 to 3ebaa38 Compare October 7, 2026 02:24
<Route path="sources" element={<Sources key={clusterName} />} />
<Route path="sinks" element={<Sinks key={clusterName} />} />
<Route
path="objects/:objectType"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new page's Objects tab links to bare objects, but the classic page only matches objects/:objectType. So a copied Objects tab link opens an empty body for someone who's opted out. Worth adding an objects route here that redirects too?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The flag is on for everyone that is why I linked it here. Will make a note to remove Maintained Objects flag

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. The classic page now has an objects route that opens the first object tab, with a test.

@leedqin
leedqin force-pushed the cluster-page-layout branch 3 times, most recently from bb11a98 to 2e4d2c8 Compare October 12, 2026 23:36
@leedqin
leedqin force-pushed the cluster-page-layout branch 4 times, most recently from 7482674 to 0ef356b Compare October 15, 2026 17:50
First of a stack that redesigns the cluster details page. It sits behind
the clusterDetailsRedesign UI preview (LaunchDarkly flag
cluster-details-page-cns-173), which users opt into per browser from the
page header. Without the opt-in the classic page is unchanged.

The new page adds a title row with the cluster's size and replica count,
and three tabs: Metrics (the existing overview for now), Objects (the
existing materialized view, index, source and sink lists under one tab)
and Replicas. Replicas is temporary until a configuration drawer manages
replicas.

Classic tab URLs redirect into the Objects tab, and objects/ URLs
redirect to the classic tabs, so shared links work for both groups. The
breadcrumbs move to their own module so both pages share them.
Self-managed deployments read flags from flexibleDeploymentFlags, where a
flag that's absent counts as on, and they have no preview toggle. Without
an entry, self-managed users would get the unfinished redesign with no way
to opt out. Pin cluster-details-page-cns-173 to false there.

Also switch the new page's relative imports to `~/` and spell the object
type label "Materialized Views", matching the classic tabs.
@leedqin
leedqin force-pushed the cluster-page-layout branch 2 times, most recently from be135e0 to f8a6ef1 Compare October 15, 2026 21:55

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants