[ACM-17770] Add labels column and filtering to Application table by Ginxo · Pull Request #5720 · stolostron/console

Ginxo · 2026-02-18T06:23:08Z

📝 Summary

Evidences

Video_2026-02-18_10-30-02.mp4

Ticket Summary (Title):
Add labels column and filtering to Application table

Ticket Link:
https://issues.redhat.com/browse/ACM-17770

Type of Change:

✅ Checklist

General

PR title follows the convention (e.g. ACM-12340 Fix bug with...)
Code builds and runs locally without errors
No console logs, commented-out code, or unnecessary files
All commits are meaningful and well-labeled
All new display strings are externalized for localization (English only)
(Nice to have) JSDoc comments added for new functions and interfaces

If Feature

UI/UX reviewed (if applicable)
All acceptance criteria met
Unit test coverage added or updated
Relevant documentation or comments included

If Bugfix

Root cause and fix summary are documented in the ticket (for future reference / errata)
Fix tested thoroughly and resolves the issue
Test(s) added to prevent regression

🗒️ Notes for Reviewers

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

openshift-ci · 2026-02-18T06:23:14Z

Skipping CI for Draft Pull Request.
If you want CI signal for your change, please convert it to an actual PR.
You can still manually trigger a test run with /test all

openshift-ci · 2026-02-18T06:23:25Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: Ginxo

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

~~OWNERS~~ [Ginxo]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

Ginxo · 2026-02-18T09:01:22Z

frontend/src/routes/Applications/utils.ts

+const getApplicationId = (resource: IResource, clusters: string[]): string => {
+  const stringified = JSON.stringify(clusters)
+  const hash = sha256(stringified)
+  return `${resource.metadata?.name}-${resource.metadata?.namespace}-${hash}`


I'm not able to see a better way to uniquely identify a single application, so name+ns+clusters (as hash)

Ginxo · 2026-02-18T09:01:45Z

frontend/src/routes/Applications/utils.ts

+import { sha256 } from 'js-sha256'
+import { IResource } from '../../resources'
+
+const isOCPAppResource = (


old method moved here as it is needed by the new useFetchApplicationLabels hook

Ginxo · 2026-02-18T09:02:47Z

frontend/src/routes/Applications/model/application-resource.ts

+import { IResource, OCPAppResource } from '../../../resources'
+import { ApplicationStatus } from './application-status'
+
+export type IApplicationResource = (IResource<ApplicationStatus> | OCPAppResource<ApplicationStatus>) & { id: string }


old type moved here as it is needed by the new utils.ts
id property also added to identify Application (for the LabelMap)

Ginxo · 2026-02-18T09:03:24Z

frontend/src/routes/Applications/model/application-status.ts

@@ -0,0 +1,6 @@
+/* Copyright Contributors to the Open Cluster Management project */
+
+export type ApplicationStatus = {


old type moved here as it is needed by the new utils.ts and useFetchApplicationLabels hook

Ginxo · 2026-02-18T09:03:58Z

frontend/src/routes/Applications/Overview.tsx

+const LabelCell = ({ labels }: { labels: string[] | Record<string, string> }) => (
+  <AcmLabels labels={labels} isCompact={true} />
+)


new inner component for rendering label

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

Ginxo · 2026-02-18T09:06:19Z

frontend/src/routes/Applications/Overview.tsx

      // Cannot add properties directly to objects in typescript
-      return { ...tableItem, ...transformedObject }
+      return {
+        id: getApplicationId(tableItem, clusters),


new id for table elements, it is needed for label filtering

Ginxo · 2026-02-18T09:07:29Z

frontend/src/routes/Applications/Overview.tsx

    return items.map((app) => generateTransformData(app))
  }, [allApplications, deletedApps, generateTransformData, resultCounts])

+  const { labelOptions, labelMap } = useFetchApplicationLabels(tableItems)


the different labelOptions for the filter
the LabelMap representing application.id: labels

Ginxo · 2026-02-18T09:09:51Z

frontend/src/routes/Applications/useFetchApplicationLabels.ts

+    if (applicationData && applicationData.length !== storedApplicationData?.length) {
+      const allLabels = new Set<string>()
+      const labelMap: LabelMap = {}
+      applicationData.filter(isOCPAppResource).forEach((resource) => {
+        const labels: string[] = []
+        const pairs: Record<string, string> = {}
+        resource.label?.split(';').forEach((label) => {
+          labels.push(label.trim())
+          const [key, value] = label.split('=').map((seg) => seg.trim())
+          pairs[key] = value
+          allLabels.add(label.trim())
+        })
+        labelMap[resource.id] = { pairs, labels }
+      })
+      setLabelMap(labelMap)
+      setLabelOptions(Array.from(allLabels).map((label) => ({ label, value: label })))
+      setStoredApplicationData(applicationData)


adapted from already existing code for DiscoveryPolicies, see https://github.com/stolostron/console/blob/e6ed850825a9bbb921fc7a45ceaa72279b59a363/frontend/src/routes/Governance/common/util.tsx#L767C17-L767C44

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

Ginxo · 2026-02-18T10:56:08Z

/retest

Ginxo · 2026-02-18T12:12:21Z

/test unit-tests-sonarcloud

Ginxo · 2026-02-18T13:54:45Z

/retest

fxiang1 · 2026-02-18T15:33:51Z

frontend/src/routes/Applications/Overview.tsx

+      {
+        header: t('table.labels'),
+        cell: (resource) => (
+          <AcmLabels labels={getLabels(resource as OCPAppResource<ApplicationStatus>)} isCompact={true} />


@Ginxo I think this looks great! One issue I see is that only OCP apps are supported. There are also other app types that we need to support ie. ArgoCD, Application Set. For Subscription apps we can probably skip since that's deprecated. Thanks!

I would like to do so but according to the object contract just OCP applications contain label, check this for instance.

Ah ok that's a good point. In that case can you add a tooltip for the Labels column and just explain that only OCP and Flux apps have labels. It might be confusing to users why some apps have labels and other don't.

I've checked again the different objects coming from multicloud/aggregate/applications request and ApplicationSet is also containing labels at

{ "apiVersion": "argoproj.io/v1alpha1", "kind": "ApplicationSet", "metadata": { "name": "kikes", "namespace": "openshift-gitops", ... }, "spec": { "template": { "metadata": { "name": "kikes-{{name}}", "labels": { "apps.open-cluster-management.io/pull-to-ocm-managed-cluster": "true", "velero.io/exclude-from-backup": "true" } ... }, ...

I'm not able to check ArgoCD kind of applications, could you please guide me on creating one @fxiang1 ? thanks for your help here 😊

Yes, the ArgoCD apps are actually created from the ArgoCD console

You will need to click Log In with OpenShift, use the kubeadmin creds.

Click New App

Fill in all the fields

You can take a look at the example app I have in the console weekly cluster to see what values to use
https://openshift-gitops-server-openshift-gitops.apps.cs-aws-420-4mccv.dev02.red-chesterfield.com/applications/openshift-gitops/feng-standalone-argo?view=tree&resource=

Once the app is created it should get discovered in the ACM Applications page.

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

Ginxo · 2026-02-23T14:25:03Z

/retest

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

Labels added to Application table

ae6fdc1

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

openshift-ci bot added the do-not-merge/work-in-progress label Feb 18, 2026

openshift-ci bot added the dco-signoff: yes label Feb 18, 2026

openshift-ci bot added the approved label Feb 18, 2026

Ginxo added 4 commits February 18, 2026 09:59

draft proposal

8d22100

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

filter applied

c64ca05

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

check:fix:frontend

03ed74b

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

tests provided adapted

c859155

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

Ginxo force-pushed the ACM-17770 branch from a35c701 to c859155 Compare February 18, 2026 08:59

Ginxo commented Feb 18, 2026

View reviewed changes

LabelCell removed

06cec54

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

Ginxo commented Feb 18, 2026

View reviewed changes

Ginxo added 4 commits February 18, 2026 10:12

utils comments

6009a26

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

getLabels simplified

33be0fc

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

getApplicationId tests

d2988b5

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

useFetchApplicationLabels reduce approach

23d5939

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

Ginxo marked this pull request as ready for review February 18, 2026 09:31

fxiang1 reviewed Feb 18, 2026

View reviewed changes

openshift-merge-robot added the needs-rebase label Feb 19, 2026

Merge remote-tracking branch 'upstream/main' into ACM-17770

d322868

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

openshift-merge-robot removed the needs-rebase label Feb 23, 2026

Overview TS errors fixed

8f2b51a

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>

		@@ -0,0 +1,6 @@
		/* Copyright Contributors to the Open Cluster Management project */

		export type ApplicationStatus = {

Conversation

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

Uh oh!

📝 Summary

Evidences

✅ Checklist

General

If Feature

If Bugfix

🗒️ Notes for Reviewers

Uh oh!

openshift-ci bot commented Feb 18, 2026

Uh oh!

openshift-ci bot commented Feb 18, 2026

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!

Ginxo commented Feb 18, 2026

Uh oh!

Ginxo commented Feb 18, 2026

Uh oh!

Ginxo commented Feb 18, 2026

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!

fxiang1 Feb 24, 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!

Ginxo commented Feb 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Ginxo commented Feb 18, 2026 •

edited

Loading

fxiang1 Feb 24, 2026 •

edited

Loading