CONSOLE-4951: Add Health tab to Node View, remove events tab

[jeff-phillips-18]

Closes CONSOLE-4951
Closes CONSOLE-4956

Note
This feature is available in Tech Preview only.

Analysis / Root cause:
The Node Details page needed a dedicated Health tab to consolidate performance and operational health metrics. The previous structure had Logs and Events as separate top-level tabs, which didn't align with the new node management UX when the FLAG_NODE_MGMT_V1 feature flag is enabled.

Solution description:
This PR implements a new Health tab for the Node Details page that appears when FLAG_NODE_MGMT_V1 is enabled. The Health tab uses a sub-navigation structure with two tabs:

• Performance: Displays USE (Utilization, Saturation, Errors) metrics across 4 categories:
  • CPU: Utilization and Saturation (Load per CPU)
  • Memory: Utilization and Saturation (Major Page Faults)
  • Network: Utilization (Bytes Receive/Transmit) and Saturation (Drops)
  • Disk IO: Utilization and Saturation
• Logs: Moved from top-level tab to Health sub-tab

Each performance metric section is expandable/collapsible and displays Prometheus queries via QueryBrowser. The implementation reuses existing query definitions from node-dashboard/queries.ts to avoid duplication.

Key changes:

• Added NodeHealth component that integrates with NodeSubNavPage for extensible sub-navigation
• Added NodePerformance component with 4 expandable metric sections
• Modified NodeDetailsPage to conditionally show Health tab when FLAG_NODE_MGMT_V1 is enabled
• When flag is enabled: tabs are [Overview, Details, Configuration, Health, YAML, Pods]
• When flag is disabled: tabs remain [Overview, Details, YAML, Pods, Logs, Events]
• Updated extension schema documentation for new console.node/sub-nav-tab parent option
• Added comprehensive test coverage (346 new test lines across 4 test files)

Screenshots / screen recording:

Test setup:

1. Enable the feature flag: FLAG_NODE_MGMT_V1=true
2. Navigate to a Node Details page (Compute → Nodes → select a node)

Test cases:

• Verify Health tab appears when FLAG_NODE_MGMT_V1 is enabled
• Verify Health tab does NOT appear when FLAG_NODE_MGMT_V1 is disabled
• Click Health tab → Performance sub-tab should be selected by default
• Verify all 4 performance sections render: CPU, Memory, Network, Disk IO
• Verify each section displays 2 charts (Utilization and Saturation)
• Click section toggle to collapse → charts should hide
• Click section toggle again to expand → charts should reappear
• Verify Prometheus queries include the correct node name
• Click Health tab → Logs sub-tab → verify logs display correctly
• Verify Events tab is NOT present when flag is enabled (intentional removal)
• Verify Logs and Events tabs ARE present at top-level when flag is disabled
• Run unit tests: cd frontend && yarn test NodePerformance NodeHealth NodeDetailsPage

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:

• This PR is behind a feature flag and TechPreview, so there's no breaking change to existing functionality
• The Events tab removal when FLAG_NODE_MGMT_V1=true is intentional per the new UX design
• Prometheus query definitions are properly reused from existing node-dashboard/queries.ts

Reviewers and assignees:
Console Approver:
/assign @jhadvig

Docs approver:
/assign @jseseCCS

PX approver:
/assign @rh-joshbeverly

🤖 Generated with https://claude.com/claude-code

Summary by CodeRabbit

• New Features

  • Added a Node Health tab with a Performance dashboard (CPU, Memory, Network, Disk IO) and integrated logs view
  • Expandable/collapsible metric sections for cleaner layout

• Localization

  • Updated English UI strings to include performance and health metric labels

• Improvements

  • Node details tabs now adapt which sub-tabs are shown based on configuration and node OS

• Tests

  • Added comprehensive tests for health, performance, and logs behavior

• Documentation

  • Updated node sub-navigation tab configuration docs

[openshift-ci-robot]

@jeff-phillips-18: This pull request references CONSOLE-4951 which is a valid jira issue.

Details

In response to this:

Closes CONSOLE-4951
Closes CONSOLE-4956

Note
This feature is available in Tech Preview only.

Analysis / Root cause:
The Node Details page needed a dedicated Health tab to consolidate performance and operational health metrics. The previous structure had Logs and Events as separate top-level tabs, which didn't align with the new node management UX when the FLAG_NODE_MGMT_V1 feature flag is enabled.

Solution description:
This PR implements a new Health tab for the Node Details page that appears when FLAG_NODE_MGMT_V1 is enabled. The Health tab uses a sub-navigation structure with two tabs:

• Performance: Displays USE (Utilization, Saturation, Errors) metrics across 4 categories:
• CPU: Utilization and Saturation (Load per CPU)
• Memory: Utilization and Saturation (Major Page Faults)
• Network: Utilization (Bytes Receive/Transmit) and Saturation (Drops)
• Disk IO: Utilization and Saturation
• Logs: Moved from top-level tab to Health sub-tab

Each performance metric section is expandable/collapsible and displays Prometheus queries via QueryBrowser. The implementation reuses existing query definitions from node-dashboard/queries.ts to avoid duplication.

Key changes:

• Added NodeHealth component that integrates with NodeSubNavPage for extensible sub-navigation
• Added NodePerformance component with 4 expandable metric sections
• Modified NodeDetailsPage to conditionally show Health tab when FLAG_NODE_MGMT_V1 is enabled
• When flag is enabled: tabs are [Overview, Details, Configuration, Health, YAML, Pods]
• When flag is disabled: tabs remain [Overview, Details, YAML, Pods, Logs, Events]
• Updated extension schema documentation for new console.node/sub-nav-tab parent option
• Added comprehensive test coverage (346 new test lines across 4 test files)

Screenshots / screen recording:

Test setup:

1. Enable the feature flag: FLAG_NODE_MGMT_V1=true
2. Navigate to a Node Details page (Compute → Nodes → select a node)

Test cases:

• Verify Health tab appears when FLAG_NODE_MGMT_V1 is enabled
• Verify Health tab does NOT appear when FLAG_NODE_MGMT_V1 is disabled
• Click Health tab → Performance sub-tab should be selected by default
• Verify all 4 performance sections render: CPU, Memory, Network, Disk IO
• Verify each section displays 2 charts (Utilization and Saturation)
• Click section toggle to collapse → charts should hide
• Click section toggle again to expand → charts should reappear
• Verify Prometheus queries include the correct node name
• Click Health tab → Logs sub-tab → verify logs display correctly
• Verify Events tab is NOT present when flag is enabled (intentional removal)
• Verify Logs and Events tabs ARE present at top-level when flag is disabled
• Run unit tests: cd frontend && yarn test NodePerformance NodeHealth NodeDetailsPage

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:

• This PR is behind a feature flag and TechPreview, so there's no breaking change to existing functionality
• The Events tab removal when FLAG_NODE_MGMT_V1=true is intentional per the new UX design
• Prometheus query definitions are properly reused from existing node-dashboard/queries.ts

Reviewers and assignees:
Console Approver:
/assign @jhadvig

Docs approver:
/assign @jseseCCS

PX approver:
/assign @rh-joshbeverly

🤖 Generated with https://claude.com/claude-code

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: openshift/coderabbit/.coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: bec5c3ec-d14c-4dcd-b943-017136e576f5

📥 Commits

Reviewing files that changed from the base of the PR and between 3f5284f and 7fc2883.

📒 Files selected for processing (11)

• frontend/packages/console-app/locales/en/console-app.json
• frontend/packages/console-app/src/components/nodes/NodeDetailsPage.tsx
• frontend/packages/console-app/src/components/nodes/NodeLogs.tsx
• frontend/packages/console-app/src/components/nodes/__tests__/NodeDetailsPage.spec.tsx
• frontend/packages/console-app/src/components/nodes/__tests__/NodeLogs.spec.tsx
• frontend/packages/console-app/src/components/nodes/health/NodeHealth.tsx
• frontend/packages/console-app/src/components/nodes/health/NodePerformance.tsx
• frontend/packages/console-app/src/components/nodes/health/__tests__/NodeHealth.spec.tsx
• frontend/packages/console-app/src/components/nodes/health/__tests__/NodePerformance.spec.tsx
• frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md
• frontend/packages/console-dynamic-plugin-sdk/src/extensions/node.ts

✅ Files skipped from review due to trivial changes (3)

• frontend/packages/console-app/src/components/nodes/health/NodeHealth.tsx
• frontend/packages/console-dynamic-plugin-sdk/src/extensions/node.ts
• frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md

🚧 Files skipped from review as they are similar to previous changes (8)

• frontend/packages/console-app/src/components/nodes/health/tests/NodePerformance.spec.tsx
• frontend/packages/console-app/src/components/nodes/NodeLogs.tsx
• frontend/packages/console-app/src/components/nodes/tests/NodeDetailsPage.spec.tsx
• frontend/packages/console-app/src/components/nodes/NodeDetailsPage.tsx
• frontend/packages/console-app/src/components/nodes/health/NodePerformance.tsx
• frontend/packages/console-app/src/components/nodes/health/tests/NodeHealth.spec.tsx
• frontend/packages/console-app/locales/en/console-app.json
• frontend/packages/console-app/src/components/nodes/tests/NodeLogs.spec.tsx

---

Walkthrough

This PR introduces a new Health tab for node details pages. The Health tab displays performance metrics (CPU, Memory, Network, Disk IO) via Prometheus queries and includes a Logs sub-section. The feature is controlled by the FLAG_NODE_MGMT_V1 feature flag. Supporting translations and SDK documentation are updated to reflect the new tab structure.

Changes

Node Health Dashboard Feature

Layer / File(s)	Summary
Translations and Documentation frontend/packages/console-app/locales/en/console-app.json, frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md, frontend/packages/console-dynamic-plugin-sdk/src/extensions/node.ts	Added i18n labels for Performance, Logs, CPU/Memory/Network/Disk IO utilization/saturation metrics, and Health. Updated SDK documentation to list health sub-tabs (performance/70, logs/30) in the built-in tab priorities.
Health Page Container frontend/packages/console-app/src/components/nodes/health/NodeHealth.tsx, frontend/packages/console-app/src/components/nodes/health/__tests__/NodeHealth.spec.tsx	Introduced NodeHealth component and HEALTH_PAGE_ID constant. Defined standardPages configuration registering two sub-tabs: performance (priority 70, uses NodePerformance) and logs (priority 30, uses NodeLogs). Tests verify correct prop forwarding, tab count, and tab metadata.
Performance Metrics Dashboard frontend/packages/console-app/src/components/nodes/health/NodePerformance.tsx, frontend/packages/console-app/src/components/nodes/health/__tests__/NodePerformance.spec.tsx	Implemented NodePerformance component that builds memoized row configurations for CPU, Memory, Network, and Disk IO with localized titles and Prometheus queries. Uses PerformanceRow (expandable sections) and PerformanceChart (QueryBrowser wrappers) to render metrics. Tests verify heading/section labels, chart rendering, toggle interaction, and query content.
Node Details Page Tab Integration frontend/packages/console-app/src/components/nodes/NodeDetailsPage.tsx, frontend/packages/console-app/src/components/nodes/__tests__/NodeDetailsPage.spec.tsx	Refactored tab configuration into constants (overviewTab, detailsTab, configurationTab, healthTab). Rewrote pagesFor to conditionally return one of two tab sets based on FLAG_NODE_MGMT_V1 (health/config vs events/logs/workload), and conditionally appends terminal tab for non-Windows nodes. Tests verify feature-flag-driven tab presence/absence and Windows detection logic.
Node Logs Conditional Section Heading frontend/packages/console-app/src/components/nodes/NodeLogs.tsx, frontend/packages/console-app/src/components/nodes/__tests__/NodeLogs.spec.tsx	Added feature-flagged conditional rendering of SectionHeading ("Logs") when FLAG_NODE_MGMT_V1 is enabled. Tests verify the heading appears/disappears based on feature flag state and that core log rendering elements (PaneBody, path selector, log viewer) still render.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• openshift/console#16124: Both PRs modify frontend/packages/console-app/src/components/nodes/NodeDetailsPage.tsx to extend the Node details tab list based on the node-mgmt feature flag, with overlapping tab-setup logic.

Suggested labels

docs-approved

Suggested reviewers

• spadgett
• TheRealJon

---

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error)

Check name	Status	Explanation	Resolution
No-Sensitive-Data-In-Logs	❌ Error	New console.warn in QueryBrowser.tsx (line 819-822) logs Prometheus queries containing node names (internal hostnames) to browser console when stacked graphs have invalid values.	Remove or redact the query from the console.warn statement, or log only a sanitized query without the instance identifier containing the node name.

✅ Passed checks (14 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and specifically describes the main changes: adding a Health tab and removing the events tab from the Node View, with a relevant CONSOLE Jira issue reference.
Description check	✅ Passed	The PR description is comprehensive and well-structured, covering analysis, solution details, test setup, test cases, browser conformance, screenshots, and reviewer assignments—all required template sections are completed.
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	All 27 test cases across 4 test files use stable, deterministic test names with no dynamic values in test titles.
Test Structure And Quality	✅ Passed	The custom check requests review of Ginkgo test code (Go integration/e2e tests), but this PR adds only Jest/React unit tests (.spec.tsx files). The check is not applicable to this codebase context.
Microshift Test Compatibility	✅ Passed	This PR contains only frontend React components and Jest unit tests—no Ginkgo e2e tests. The check is not applicable to this PR.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	No Ginkgo e2e tests are present in this PR. All test files are Jest/TypeScript unit tests for frontend React components. The check is not applicable.
Topology-Aware Scheduling Compatibility	✅ Passed	PR modifies only frontend UI code (React components, tests, localization). No deployment manifests, operator code, or controllers changed, so topology-aware scheduling check does not apply.
Ote Binary Stdout Contract	✅ Passed	PR contains only frontend code (React, TypeScript, JSON, docs); no Go files or test binaries present. OTE stdout contract check does not apply to frontend projects.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	No Ginkgo e2e tests added. PR contains only TypeScript/React unit tests (.spec.tsx) for frontend components. Check targets Go/Ginkgo tests only.
No-Weak-Crypto	✅ Passed	No weak cryptographic patterns detected. PR adds UI components for node monitoring; no crypto imports, weak algorithms, custom crypto implementations, or insecure secret comparisons found.
Container-Privileges	✅ Passed	No container/K8s manifest files with unjustified privileges added. NodeTerminal.tsx source code generates privileged debug pods per OpenShift's documented oc debug pattern.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

frontend/packages/console-dynamic-plugin-sdk/src/extensions/node.ts (1)

63-75: ⚡ Quick win

Clarify that health priorities are informational, not currently extensible

The JSDoc now lists health defaults, but parentTab still only accepts 'configuration'. Add a short note so plugin authors don’t infer they can register health sub-tabs yet.

Proposed doc tweak

     /**
      * The page to be shown in node sub-tabs. It takes tab name as name and priority of the tab.
      *
      * Notes:
      * The UI displays tabs in priority order from highest to lowest. Default built-in tab priorities include:
      * - **configuration:**
      *   - storage/70
      *   - machine/50
-     * - **health:**
+     * - **health:** (built-in only; custom sub-tabs are not supported yet because `parentTab` is `'configuration'`)
      *   - performance/70
      *   - logs/30
      */

🤖 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 `@frontend/packages/console-dynamic-plugin-sdk/src/extensions/node.ts` around
lines 63 - 75, The JSDoc lists default priorities for the 'health' tab which
could mislead authors into thinking they can register sub-tabs there even though
parentTab only accepts 'configuration'; update the comment near parentTab and
the node sub-tab JSDoc (reference symbols: parentTab and the node sub-tabs
description) to add a short clarifying sentence stating that the 'health'
priority list is informational only and that at present only the 'configuration'
tab supports adding sub-tabs (i.e., health is not currently extensible).

🤖 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.

Inline comments:
In
`@frontend/packages/console-app/src/components/nodes/__tests__/NodeDetailsPage.spec.tsx`:
- Around line 171-192: The test references a non-existent workload tab; update
the NodeDetailsPage spec to remove the incorrect workloadTab check and assert
the actual tabs produced by pagesFor(mockNode) when FLAG_NODE_MGMT_V1 is
disabled: ensure events and logs are defined and verify presence/absence of the
real tabs (e.g., overview, details, yaml, pods) instead of checking for
`workload`; update the assertions that currently reference `workloadTab` to
check for `podsTab` or the appropriate real tab names obtained from
DetailsPage.mock.calls[0][0].pagesFor(mockNode).

---

Nitpick comments:
In `@frontend/packages/console-dynamic-plugin-sdk/src/extensions/node.ts`:
- Around line 63-75: The JSDoc lists default priorities for the 'health' tab
which could mislead authors into thinking they can register sub-tabs there even
though parentTab only accepts 'configuration'; update the comment near parentTab
and the node sub-tab JSDoc (reference symbols: parentTab and the node sub-tabs
description) to add a short clarifying sentence stating that the 'health'
priority list is informational only and that at present only the 'configuration'
tab supports adding sub-tabs (i.e., health is not currently extensible).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository: openshift/coderabbit/.coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: b0168fca-fd73-4636-921d-d5538408659c

📥 Commits

Reviewing files that changed from the base of the PR and between 9d30029 and 3f5284f.

📒 Files selected for processing (11)

• frontend/packages/console-app/locales/en/console-app.json
• frontend/packages/console-app/src/components/nodes/NodeDetailsPage.tsx
• frontend/packages/console-app/src/components/nodes/NodeLogs.tsx
• frontend/packages/console-app/src/components/nodes/__tests__/NodeDetailsPage.spec.tsx
• frontend/packages/console-app/src/components/nodes/__tests__/NodeLogs.spec.tsx
• frontend/packages/console-app/src/components/nodes/health/NodeHealth.tsx
• frontend/packages/console-app/src/components/nodes/health/NodePerformance.tsx
• frontend/packages/console-app/src/components/nodes/health/__tests__/NodeHealth.spec.tsx
• frontend/packages/console-app/src/components/nodes/health/__tests__/NodePerformance.spec.tsx
• frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md
• frontend/packages/console-dynamic-plugin-sdk/src/extensions/node.ts

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: jeff-phillips-18
Once this PR has been reviewed and has the lgtm label, please ask for approval from jhadvig. For more information see the Code Review Process.

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

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS

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

[jeff-phillips-18]

/retest

[jeff-phillips-18]

/retest

[openshift-ci]

@jeff-phillips-18: 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.