feat(greenhouse): new Clusters dashboard by guoda-puidokaite · Pull Request #1634 · cloudoperators/juno

guoda-puidokaite · 2026-04-27T06:50:06Z

Summary

Changes Made

Added Clusters overview according to ACs that allows navigation to Cluster Detail page and from there, Plugin Instance page

Other agreed on ACs:

Added Cluster Type and Region fields and allowed to filter by them
No ‘Reconcile’ button needed

Design guidelines:
https://www.figma.com/design/xsRjypqDB8lGT8LsrxIFKs/%F0%9F%AB%9F--Greenhouse-UX-work?node-id=984-5344&p=f&t=R89RR3K513x3o3rM-0

Related Issues

Testing Instructions

pnpm i
pnpm TASK

Checklist

I have performed a self-review of my code.
I have commented my code, particularly in hard-to-understand areas.
I have added tests that prove my fix is effective or that my feature works.
New and existing unit tests pass locally with my changes.
I have made corresponding changes to the documentation (if applicable).
My changes generate no new warnings or errors.
I have created a changeset for my changes.

PR Manifesto

Review the PR Manifesto for best practises.

changeset-bot · 2026-04-27T06:50:13Z

⚠️ No Changeset found

Latest commit: 2d7adfd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copilot

Pull request overview

Adds a new Greenhouse “Clusters” dashboard flow under /admin/clusters, including an overview grid with filtering and a new cluster detail page that links into plugin-instance details.

Changes:

Replaced the legacy /admin/clusters route with nested routes for clusters list and cluster detail (/admin/clusters/$clusterName).
Added new UI components for clusters overview (filters + grid) and cluster detail (overview/YAML + plugin instances).
Added new API helpers and types for fetching clusters and plugins-by-cluster, plus shared utility updates.

Reviewed changes

Copilot reviewed 29 out of 30 changed files in this pull request and generated 28 comments.

Show a summary per file

File	Description
apps/greenhouse/src/routeTree.gen.ts	Updates generated route tree to reflect new nested clusters routes.
apps/greenhouse/src/routes/admin/clusters/route.tsx	Adds parent “Clusters” route with breadcrumb + Outlet.
apps/greenhouse/src/routes/admin/clusters/index.tsx	Adds clusters index route with search validation and default filter redirect.
apps/greenhouse/src/routes/admin/clusters/$clusterName/route.tsx	Adds cluster-name route with crumb label based on param.
apps/greenhouse/src/routes/admin/clusters/$clusterName/index.tsx	Adds cluster detail index route to render `ClusterDetail`.
apps/greenhouse/src/routes/admin/clusters.tsx	Removes legacy clusters route implementation.
apps/greenhouse/src/components/admin/utils.ts	Expands readiness helpers to clusters and adds `formatAge`.
apps/greenhouse/src/components/admin/types/schema.d.ts	Updates Cluster schema typing (note: file is auto-generated).
apps/greenhouse/src/components/admin/types/k8sTypes.ts	Adds `Cluster` type alias alongside existing types.
apps/greenhouse/src/components/admin/Layout/Breadcrumb.test.tsx	Updates breadcrumb test for nested routes (currently mismatched path).
apps/greenhouse/src/components/admin/constants.ts	Adds cluster-related label keys and filter IDs.
apps/greenhouse/src/components/admin/Clusters/index.tsx	Implements clusters overview page (counts, refresh, filters, grid).
apps/greenhouse/src/components/admin/Clusters/ClustersGrid/index.tsx	Adds clusters overview data grid header + suspense/error handling.
apps/greenhouse/src/components/admin/Clusters/ClustersGrid/index.test.tsx	Adds tests for clusters grid rendering and error state.
apps/greenhouse/src/components/admin/Clusters/ClustersGrid/DataRows/index.tsx	Adds suspense data rows fetching clusters and navigating to detail.
apps/greenhouse/src/components/admin/Clusters/ClustersFilters.tsx	Adds filter UI (select + chips + search) for clusters.
apps/greenhouse/src/components/admin/ClusterDetail/Overview/PluginInstances.tsx	Adds cluster-scoped plugin instances table with navigation to plugin instance detail.
apps/greenhouse/src/components/admin/ClusterDetail/Overview/PluginInstances.test.tsx	Adds tests for plugin instances view (currently mismatched route/expectations).
apps/greenhouse/src/components/admin/ClusterDetail/Overview/index.tsx	Adds cluster detail “Overview” composition (conditions/details/plugins).
apps/greenhouse/src/components/admin/ClusterDetail/Overview/Details.tsx	Adds cluster detail “Details” panel, including age + node status.
apps/greenhouse/src/components/admin/ClusterDetail/Overview/Details.test.tsx	Adds tests for Details (currently mismatched props/types/expectations).
apps/greenhouse/src/components/admin/ClusterDetail/Overview/Conditions.tsx	Adds cluster readiness conditions section.
apps/greenhouse/src/components/admin/ClusterDetail/Overview/Conditions.test.tsx	Adds tests for Conditions (currently mismatched props/types).
apps/greenhouse/src/components/admin/ClusterDetail/index.tsx	Adds cluster detail page with tabs and data fetching.
apps/greenhouse/src/components/admin/ClusterDetail/index.test.tsx	Adds tests for cluster detail page (currently imports/route mismatches).
apps/greenhouse/src/components/admin/api/plugins/fetchPluginsByCluster.ts	Adds API helper to fetch plugins filtered by cluster label.
apps/greenhouse/src/components/admin/api/clusters/fetchClustersFilters.ts	Adds API helper to derive filter values from clusters list.
apps/greenhouse/src/components/admin/api/clusters/fetchClusters.ts	Adds API helper to fetch clusters and apply client-side filtering/sorting.
apps/greenhouse/src/components/admin/api/clusters/fetchCluster.ts	Adds API helper to fetch a single cluster by name.
apps/greenhouse/src/components/admin/mocks/pluginPresets.ts	Refactors mocks to provide cluster mock data (file name now misleading).

Signed-off-by: I531348 <guoda.puidokaite@sap.com>

taymoor89 · 2026-05-18T11:04:27Z

+  )
+}
+
+export const PluginInstances = () => {


I'd suggest to make it a reusable component as in putting in common and reusing in both PluginPresetDetail and ClusterDetail view.

ArtieReus

Please add a change set

ArtieReus · 2026-05-18T12:27:19Z

Why not fixing the filtering already in the new implementations?

ArtieReus · 2026-05-18T12:30:10Z

Isn't it duplicate status on the grid??

ArtieReus · 2026-05-18T12:33:04Z

First 2 rows from Plugin Instances can be clicked. The Details Button also doesn't work.

Screen.Recording.2026-05-18.at.14.31.58.mov

ArtieReus · 2026-05-18T12:37:10Z

This content can't be read if the screen is small. The 2 columns should be transformed into two rows:

See possible fix here, which I already implemented:
https://github.com/SAP-cloud-infrastructure/elektra/pull/2012/changes#diff-125a464b364d1e80c9b7e76315761b4195f218827dc12a4ef7efc16a837f19d0R407

ArtieReus · 2026-05-18T12:10:21Z

+  filterSettings?: FilterSettings
+}): Promise<Cluster[]> => {
+  const response = await apiClient.get(`/apis/greenhouse.sap/v1alpha1/namespaces/${namespace}/clusters`)
+  return Array.isArray(response?.items) ? applySorting(applyFilterSettings(response.items, filterSettings)) : []


Looks like you are mutating here the original array. Since response.items comes straight from the API result and may also be cached/reused by React Query, mutating it in place can create subtle bugs or stale-cache surprises.

ArtieReus

Great! very cool!! I like it 💪
Just left comments with minor fixes to be done before merging. Thx!!!

edda · 2026-05-18T14:41:45Z

+            }}
+          />
+        </InputGroup>
+        <Button


Please use the new pattern of adding an xs button directly after the filter pills for the "Clear all filters" functionality. Also this button should only be visible if there are filters to be cleared.

edda · 2026-05-18T14:45:56Z

+            <DataGridCell nowrap>
+              <PopupMenu onClick={(e) => e.stopPropagation()}>
+                <PopupMenuOptions>
+                  <PopupMenuItem label="View Details" onClick={canNavigateToDetails ? navigateToDetails : undefined} />


In the case of the onClick handler on the Row this is fine but the problem here is that the "View Details" action is still visible even if no details exist. It just doesn't do anything on click in this case.

Instead the whole PopupMenu shouldn't be rendered if there are no actions that can be taken.

edda · 2026-05-18T14:49:25Z

+          {/* Support Group */}
+          <DataGridCell>{preset.metadata?.labels?.[SUPPORT_GROUP_LABEL] || NO_VALUE_DEFAULT}</DataGridCell>
+          {/* Actions */}
+          <DataGridCell nowrap>


Please ensure that the PopupMenu kebap icon is aligned all the way to the right of the row (easiest way to do this is to set the cell as a minWidthColumn in the DataGrid).

edda · 2026-05-18T14:53:36Z

+        const navigateToDetails = () => {
+          if (!pluginPresetName) return
+          navigate({
+            to: "/admin/plugin-presets/$pluginPresetName/plugin-instances/$pluginInstance",


This links from the cluster detail view to the plugin instance detail view. However from there you can't navigate back to the cluster detail view. The cluster the plugin instance is running on is shown in the metadata section but it's not clickable. Please make it clickable :)

edda · 2026-05-18T14:55:04Z

+            </DataGridCell>
+            <DataGridCell>{plugin.metadata?.name || NO_VALUE_DEFAULT}</DataGridCell>
+            <DataGridCell>{pluginPresetName || NO_VALUE_DEFAULT}</DataGridCell>
+            <DataGridCell>{ready ? "Ready" : "Not Ready"}</DataGridCell>


Please move this directly after the cell containing the status icon. Icon and text belong next to each other

edda · 2026-05-18T15:00:07Z

+        <DataGridHeadCell>Version</DataGridHeadCell>
+        <DataGridHeadCell>Cluster Type</DataGridHeadCell>
+        <DataGridHeadCell>Region</DataGridHeadCell>
+        <DataGridHeadCell>Connectivity</DataGridHeadCell>


It would be nice if already on the list view we could see how many total/running/failing plugin instances the respective cluster has. Looking at the fetch functions you have defined I assume this would cause an n+1 problem. But maybe we can check with the backend colleagues if they'll consider adding this info in the status of the cluster resource.

edda · 2026-05-18T15:02:35Z

+        <DataGridHeadCell className="align-center">
+          <Icon icon="monitorHeart" />
+        </DataGridHeadCell>
+        <DataGridHeadCell>Name</DataGridHeadCell>


IMO, column order should be status -> name -> region -> cluster type -> support group -> (plugin counts if possible, see below), connectivity -> message -> action

guoda-puidokaite self-assigned this Apr 27, 2026

guoda-puidokaite added greenhouse Greenhouse core related task app Any app that is not specific label that lives under apps/ greenhouse-pr-preview THIS LABEL IS SET AUTOMATICALLY. labels Apr 27, 2026

This was linked to issues Apr 27, 2026

[EPIC](greenhouse): Admin Area - Clusters list and details #1513

Open

[Task](greenhouse): Cluster List View #1516

Open

[Task](greenhouse): Cluster Detail View #1517

Open

guoda-puidokaite changed the title ~~DRAFT clusters dashboard~~ feat(greenhouse): new Clusters dashboard Apr 27, 2026

github-code-quality Bot found potential problems May 4, 2026

View reviewed changes

guoda-puidokaite requested a review from Copilot May 4, 2026 20:55

Copilot started reviewing on behalf of guoda-puidokaite May 4, 2026 20:55 View session

github-code-quality Bot found potential problems May 4, 2026

View reviewed changes

Comment thread apps/greenhouse/src/components/admin/ClusterDetail/index.test.tsx Fixed

Copilot AI reviewed May 4, 2026

View reviewed changes

guoda-puidokaite marked this pull request as ready for review May 5, 2026 07:41

guoda-puidokaite requested a review from a team as a code owner May 5, 2026 07:41

guoda-puidokaite added 9 commits May 5, 2026 12:00

clusters dashboard

10099b3

Signed-off-by: I531348 <guoda.puidokaite@sap.com>

typo

3d64aa4

Signed-off-by: I531348 <guoda.puidokaite@sap.com>

new requirements and design fixes

961f48e

Signed-off-by: I531348 <guoda.puidokaite@sap.com>

new requirements and design fixes

308a936

Signed-off-by: I531348 <guoda.puidokaite@sap.com>

fix types

aabae55

Signed-off-by: I531348 <guoda.puidokaite@sap.com>

fix types

1d8765a

Signed-off-by: I531348 <guoda.puidokaite@sap.com>

fix types

56f85f7

Signed-off-by: I531348 <guoda.puidokaite@sap.com>

fix tests and improvements

2661786

Signed-off-by: I531348 <guoda.puidokaite@sap.com>

fix tests and improvements

ccceb1d

Signed-off-by: I531348 <guoda.puidokaite@sap.com>

guoda-puidokaite force-pushed the guoda-clusters branch from 4c56b7a to ccceb1d Compare May 5, 2026 10:01

taymoor89 reviewed May 5, 2026

View reviewed changes

Comment thread apps/greenhouse/src/components/admin/ClusterDetail/Overview/PluginInstances.test.tsx

taymoor89 requested changes May 5, 2026

View reviewed changes

test fix

c00a8fa

Signed-off-by: I531348 <guoda.puidokaite@sap.com>

ArtieReus removed the greenhouse-pr-preview THIS LABEL IS SET AUTOMATICALLY. label May 13, 2026

taymoor89 reviewed May 18, 2026

View reviewed changes

Merge branch 'main' into guoda-clusters

2d7adfd

ArtieReus reviewed May 18, 2026

View reviewed changes

edda requested changes May 18, 2026

View reviewed changes

ArtieReus added the greenhouse-pr-build Set this label to create a preview image which will automatically set the `greenhouse-pr-preview` label May 19, 2026

github-actions Bot added the greenhouse-pr-preview THIS LABEL IS SET AUTOMATICALLY. label May 19, 2026

Conversation

guoda-puidokaite commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes Made

Related Issues

Testing Instructions

Checklist

PR Manifesto

Uh oh!

changeset-bot Bot commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

taymoor89 May 18, 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!

ArtieReus left a comment

Choose a reason for hiding this comment

Uh oh!

ArtieReus commented May 18, 2026

Uh oh!

ArtieReus commented May 18, 2026

Uh oh!

ArtieReus commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ArtieReus commented May 18, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ArtieReus 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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

guoda-puidokaite commented Apr 27, 2026 •

edited

Loading

changeset-bot Bot commented Apr 27, 2026 •

edited

Loading

taymoor89 May 18, 2026 •

edited

Loading

ArtieReus commented May 18, 2026 •

edited

Loading