OU-1220: Add column to display dashboard id in perses dashboard list page

[zhuje]

JIRA

• https://redhat.atlassian.net/browse/OU-1220

Image

• quay.io/jezhu/monitoring-plugin:u1220-perses-dashboard-id-sep10-2

Screenshot

Summary by CodeRabbit

• New Features
  • Dashboard lists now show each dashboard’s immutable identifier in a separate sortable Name column.
  • Added explanatory tooltip text for the dashboard identifier.
  • The previous dashboard name column is now labeled Display Name for clearer distinction.
  • Dashboard rows can be sorted by name, identifier, project, creation date, modification date, or tag count.

[openshift-merge-bot]

Pipeline controller notification
This repo is configured to use the pipeline controller. Second-stage tests will be triggered either automatically or after lgtm label is added, depending on the repository configuration. The pipeline controller will automatically detect which contexts are required and will utilize /test Prow commands to trigger the second stage.

For optional jobs, comment /test ? to see a list of all defined jobs. To trigger manually all jobs from second stage use /pipeline required command.

This repository is configured in: LGTM mode

[openshift-ci-robot]

@zhuje: This pull request references OU-1220 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the task to target the "5.1.0" version, but no target version was set.

Details

In response to this:

JIRA

• https://redhat.atlassian.net/browse/OU-1220

Image

• quay.io/jezhu/monitoring-plugin:u1220-perses-dashboard-id-sep10-2

Screenshot

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited)

Review profile: CHILL

Plan: Enterprise

Run ID: 63f48f97-38a6-4d1a-a502-165ed10e4fd6

📥 Commits

Reviewing files that changed from the base of the PR and between eddd784 and d605bc9.

📒 Files selected for processing (3)

• web/src/features/perses-dashboards/pages/dashboard-list-page/DashboardList.tsx
• web/src/features/perses-dashboards/pages/dashboard-list-page/sort-dashboards.spec.ts
• web/src/features/perses-dashboards/pages/dashboard-list-page/sort-dashboards.ts

Included review availability: Your plan provides up to 12 included reviews per hour; 11 remain after this review.

---

Walkthrough

The dashboard list now separates immutable dashboard identifiers from display names. Sorting logic and row types move to a dedicated module. The table adds identifier sorting, tooltip and accessibility text, and identifier rendering.

Changes

Dashboard identity and sorting

Layer / File(s)	Summary
Centralized row contract and sorting web/src/features/perses-dashboards/pages/dashboard-list-page/sort-dashboards.ts, web/src/features/perses-dashboards/pages/dashboard-list-page/sort-dashboards.spec.ts	The shared row types and sortDashboardData helper support name, ID, project, creation time, modification time, and tag-count sorting. Tests cover fallback behavior, sort direction, and input-array immutability.
Dashboard table identity columns web/src/features/perses-dashboards/pages/dashboard-list-page/DashboardList.tsx	Rows store the dashboard metadata name as id. The table relabels the display-name column and adds a sortable “Name” column with tooltip and accessibility text. The identifier renders between display name and project.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Suggested reviewers: peteryurkovich

Merge Risk: ⚪ Minimal · up to d605b

The dashboard identifier column and its sorting behavior are ready to merge with no concrete unresolved risk identified.

🚥 Pre-merge checks | ✅ 15

✅ Passed checks (15 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: adding a dashboard ID column to the Perses dashboard list page. It matches the stated PR objective and the implemented “Name” column.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 3…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Stable And Deterministic Test Names	✅ Passed	No failure condition is introduced. The only added tests use static describe/it titles. The fixture IDs and dates appear in test data and assertions, not in titles. No title contains a generated v…
Test Structure And Quality	✅ Passed	PASS: The pull request does not add or modify Ginkgo test code. The only added test is a TypeScript Jest spec using describe, it, and expect; web/package.json configures Jest, and no changed f…
Microshift Test Compatibility	✅ Passed	PASS: The pull request adds a TypeScript Jest unit test (sort-dashboards.spec.ts), not a Ginkgo e2e test. The changed files contain no Ginkgo APIs, MicroShift guards, unavailable OpenShift API/resou…
Single Node Openshift (Sno) Test Compatibility	✅ Passed	The pull request changes only three TypeScript files under the Perses dashboard list page. It adds a unit spec using describe/it, not Ginkgo e2e tests, and adds no Go or OpenShift test files. Ther…
Topology-Aware Scheduling Compatibility	✅ Passed	PASS: The pull request changes only three web dashboard-list TypeScript files: DashboardList.tsx, sort-dashboards.ts, and its unit test. The diff adds dashboard ID display and sorting logic. It do…
Ote Binary Stdout Contract	✅ Passed	PASS: The pull request changes only three frontend TypeScript files under web/src/.../dashboard-list-page. The diff contains no OTE binary, Go entrypoint, main, TestMain, suite setup, logging, o…
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	PASS: The pull request adds a TypeScript Jest unit spec, not a Ginkgo e2e test. The scoped changes contain no IPv4 addresses, IP parsing, network policies, URLs, or external connectivity calls. The ch…
No-Weak-Crypto	✅ Passed	The pull request adds dashboard table columns, row typing, and locale-based sorting only. The authoritative diff contains no MD5, SHA1, DES, 3DES, RC4, Blowfish, ECB, cryptographic API, custom crypto …
Container-Privileges	✅ Passed	PASS. The authoritative pull-request range changes only three TypeScript/TSX files under the dashboard list page. It adds no container or Kubernetes manifest, Dockerfile, or security-context configura…
No-Sensitive-Data-In-Logs	✅ Passed	The pull request changes only dashboard table rendering, sorting logic, and tests. The authoritative diff adds no console, logger, telemetry, audit, or other logging calls, and the changed files conta…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

[PeterYurkovich]

Like 90% of the time this field is going to be very close or the same as the actual name. Could we add something like the console has on other pages where the user can select the visible columns, that way this can be hidden by default? I also believe the bug in the console has been fixed that made us use our own data table so we can swap to using theirs now if you don't want to add the implementation on top of our custom one.

If you want I can do that fix first so this PR can just use the console SDK datatable to add the hidden columns thing, just lmk

[zhuje]

Like 90% of the time this field is going to be very close or the same as the actual name. Could we add something like the console has on other pages where the user can select the visible columns, that way this can be hidden by default? I also believe the bug in the console has been fixed that made us use our own data table so we can swap to using theirs now if you don't want to add the implementation on top of our custom one. If you want I can do that fix first so this PR can just use the console SDK datatable to add the hidden columns thing, just lmk

Meaning, like swapping to use the console SDK's <VirtualizedTable />? I think the console is trying to deprecate it. If that's the case, we could build the 'Manage columns' feature into the existing data table (Patternfly example).

I don't want to add more work to your plate; I can add the hidden dashboard ID column, but I'll probably need to update the ticket scope /estimate and move it to the next sprint.

[zhuje]

/hold

[PeterYurkovich]

The console team had told me in april they were working towards distributing it in the SDK, but it looks like that isn't done yet https://redhat.atlassian.net/browse/CONSOLE-5131

It also looks like patternfly doesn't actually support this behavior already like I had expected it would have, so we would need to create a new modal, hook, tests, ect.

Lets not worry about it and whenever the SDK gets updated to include the ConsoleDataView we can swap to it and take add the behavior then

[PeterYurkovich]

/unhold

[PeterYurkovich]

/retest

[PeterYurkovich]

Could we pull this function out into a separate file similar to filter-silences.ts and add some unit tests like filter-silences.spec.ts

[PeterYurkovich]

/lgtm

[openshift-ci]

Scheduling required tests:
/test e2e-agnostic-cmo
/test e2e-monitoring

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: PeterYurkovich, zhuje

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:

• web/src/features/perses-dashboards/OWNERS [PeterYurkovich,zhuje]

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

[jgbernalp]

/retest

[jgbernalp]

/test e2e-agnostic-cmo
/test e2e-monitoring

[openshift-ci]

@zhuje: all tests passed!

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

[jgbernalp]

/label qe-approved