OU-1416 OU-1415 fix histogram and table colors themes, fix volume legend background

[zhuje]

JIRA

https://redhat.atlassian.net/browse/OU-1416
https://redhat.atlassian.net/browse/OU-1415

Note: Update chart colors associates to align with patternfly guidelines https://www.patternfly.org/ai/guidelines/color/#color-associations-and-statuses

Image

quay.io/jezhu/logging-view-plugin:ou1416-ou1415-jul17

Screenshots

Figure. Fix log volume legend background to be transparent (OU-1416)

Figure. Fix histogram and table row colors to match (OU-1415)

Summary by CodeRabbit

• Bug Fixes

  • Improved log table row indicators so severity colors display consistently across virtualized rows.
  • Updated severity color handling to use the appropriate interface color variables.
  • Refined sticky-cell backgrounds in the metrics legend table for clearer presentation.

• Accessibility

  • Added an accessible label to the metrics legend table.

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: 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:

• OWNERS [zhuje]

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

[coderabbitai]

Walkthrough

Log severity indicators now use CSS variables applied through virtualized row styles. Severity color mappings return CSS variable references, and the metrics legend table receives transparent sticky-cell backgrounds.

Changes

Severity styling and metrics presentation

Layer / File(s)	Summary
Severity color and row indicator styling web/src/severity.ts, web/src/components/logs-table.tsx, web/src/components/logs-table.css	Severity colors are returned as CSS variables and applied through row styles instead of severity-specific classes.
Virtualized row style propagation web/src/components/virtualized-logs-table.tsx	Virtualized table rows merge virtualization styles with optional caller-provided row styles.
Metrics legend table styling web/src/components/logs-metrics.tsx, web/src/components/logs-metrics.css	The legend table receives a dedicated class, and sticky-cell backgrounds are made transparent.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: jgbernalp

🚥 Pre-merge checks | ✅ 15

✅ Passed checks (15 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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	The PR changes only component/style files; no It/Describe/Context/When test titles were added or modified.
Test Structure And Quality	✅ Passed	PR only changes UI component/style files; no Ginkgo tests were added or modified, so the test-quality checklist is not applicable.
Microshift Test Compatibility	✅ Passed	PR changes only frontend TSX/CSS and severity logic; no Ginkgo e2e tests or MicroShift-sensitive OpenShift APIs were added.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	No Ginkgo e2e tests were added in the touched files; the PR only changes web UI/CSS code.
Topology-Aware Scheduling Compatibility	✅ Passed	Changes are limited to web UI CSS/React components; no manifests, controllers, affinity, node selectors, or topology-aware scheduling logic were added.
Ote Binary Stdout Contract	✅ Passed	The PR only changes frontend component/CSS code; no main/init/TestMain/suite setup or stdout/logging writes were added in the touched files.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	No Ginkgo e2e tests were added; the PR only changes frontend TS/CSS files, and exact modified-file scans found no IPv4 or external-connectivity assumptions.
No-Weak-Crypto	✅ Passed	Touched files only adjust UI colors/styles; no MD5/SHA1/DES/RC4/3DES/Blowfish/ECB, custom crypto, or secret/token comparisons were introduced.
Container-Privileges	✅ Passed	PR only changes frontend TSX/CSS files; no container/K8s manifests were modified and no privileged, hostPID/Network/IPC, SYS_ADMIN, or allowPrivilegeEscalation settings were added.
No-Sensitive-Data-In-Logs	✅ Passed	The patch only changes log/table styling and severity coloring; no new console/logger calls or secret-bearing strings were added.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title matches the main changes: histogram/table color theme fixes and the transparent volume legend background.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[coderabbitai]

🧹 Nitpick comments (1)

web/src/components/virtualized-logs-table.tsx (1)

223-223: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Preserve virtualization layout styles.

getRowStyle is spread after the react-virtualized style, so any callback returning top, height, width, or position can break row placement. Apply the callback first; the severity custom property will still be retained.

Proposed fix

-            style={{ ...style, ...getRowStyle?.(rowArgs.obj) }}
+            style={{ ...getRowStyle?.(rowArgs.obj), ...style }}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/components/virtualized-logs-table.tsx` at line 223, Update the row
style merge in the virtualized logs table so getRowStyle?.(rowArgs.obj) is
applied before the react-virtualized style, ensuring virtualization-controlled
top, height, width, and position values always win while retaining custom
properties such as severity.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@web/src/components/virtualized-logs-table.tsx`:
- Line 223: Update the row style merge in the virtualized logs table so
getRowStyle?.(rowArgs.obj) is applied before the react-virtualized style,
ensuring virtualization-controlled top, height, width, and position values
always win while retaining custom properties such as severity.

---

ℹ️ Review info

⚙️ Run configuration

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

Review profile: CHILL

Plan: Enterprise

Run ID: 42269667-8ee4-48e9-9005-0f26be620821

📥 Commits

Reviewing files that changed from the base of the PR and between 79326c0 and 4ce49b3.

📒 Files selected for processing (6)

• web/src/components/logs-metrics.css
• web/src/components/logs-metrics.tsx
• web/src/components/logs-table.css
• web/src/components/logs-table.tsx
• web/src/components/virtualized-logs-table.tsx
• web/src/severity.ts

[zhuje]

/retest

[openshift-ci]

@zhuje: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/test-e2e	4ce49b3	link	true	/test test-e2e

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.