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

🦋 Changeset detected

Latest commit: b59e55f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudoperators/juno-app-greenhouse	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another 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>

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 :)

Already agreed with design, it's on the list to make all linkable details clickable (planned). I'll attach an issue number asap.

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

For now it's consistent. But already agreed with design, it's on the list (planned). I'll attach an issue number asap.

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.

In discussion. I've added it to the list of improvements, will link ticket asap. Since it wasn't in original ACs, I don't want to wait longer and push this chunky PR. Does that work?

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

And version?

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

github-actions · 2026-05-22T09:48:15Z

PR Preview Action v1.8.1
🚀 View preview at https://cloudoperators.github.io/juno/pr-preview/pr-1634/
Built to branch `gh-pages` at 2026-05-22 09:48 UTC. Preview will be ready when the GitHub Pages deployment is complete.

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

guoda-puidokaite · 2026-05-26T05:25:00Z

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

As designed - Since no plugin preset is returned, the path would be undefined -> plugin instance name.

I don't want to spam the PR with these comments that can't be replied to inline so I'll mention them here:

feat(greenhouse): new Clusters dashboard #1634 (comment) - already discussed in previous "exposed services" PR.
feat(greenhouse): new Clusters dashboard #1634 (comment) - existing issue already on improvement list, agreed improvement with design. I'll link the issue asap, after merge to both PRs.
feat(greenhouse): new Clusters dashboard #1634 (comment) - not in scope of this PR. Will add to improvements.

Note @ArtieReus:

I'll go over all comments in previous two PRs to make sure nothing is missed from your comments in the next ticket.
I want to merge this PR, it's already chunky. The focus here has been to make changes to the new dashboard only, sticking to ACs.
I've found many functional and design issues, we've gone through a through review with design. Therefore, if something is an existing problem across different pages (even if small), this will be fixed in a different PR where it can be thoroughly fixed across pages and tested.

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

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

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

merge main

4665a62

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

guoda-puidokaite requested a review from franzheidl as a code owner May 22, 2026 09:46

github-actions Bot added greenhouse-pr-preview THIS LABEL IS SET AUTOMATICALLY. and removed greenhouse-pr-preview THIS LABEL IS SET AUTOMATICALLY. labels May 22, 2026

undo push

13865f1

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

github-actions Bot added greenhouse-pr-preview THIS LABEL IS SET AUTOMATICALLY. and removed greenhouse-pr-preview THIS LABEL IS SET AUTOMATICALLY. labels May 22, 2026

Merge branch 'main' into guoda-clusters

7e5137f

github-actions Bot added greenhouse-pr-preview THIS LABEL IS SET AUTOMATICALLY. and removed greenhouse-pr-preview THIS LABEL IS SET AUTOMATICALLY. labels May 22, 2026

Merge branch 'main' into guoda-clusters

068c183

github-actions Bot added greenhouse-pr-preview THIS LABEL IS SET AUTOMATICALLY. and removed greenhouse-pr-preview THIS LABEL IS SET AUTOMATICALLY. labels May 22, 2026

update clear all button location

d95db69

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

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

guoda-puidokaite requested review from ArtieReus, edda and taymoor89 May 26, 2026 05:31

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

View reviewed changes

Comment thread apps/greenhouse/src/components/admin/Clusters/ClustersFilters.tsx Fixed

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

remove unused import

b59e55f

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

github-actions Bot added greenhouse-pr-preview THIS LABEL IS SET AUTOMATICALLY. and removed greenhouse-pr-preview THIS LABEL IS SET AUTOMATICALLY. labels May 26, 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!

🦋 Changeset detected

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!

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!

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!

github-actions Bot commented May 22, 2026

Built to branch gh-pages at 2026-05-22 09:48 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

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

Uh oh!

Uh oh!

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

Built to branch `gh-pages` at 2026-05-22 09:48 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

guoda-puidokaite commented May 26, 2026 •

edited

Loading