OCPBUGS-14473: Guard against undefined data in dashboard charts

[ericahinkleRH]

Problem

Visiting Home → Overview and leaving the page open for an extended period causes a crash:

TypeError: Cannot read properties of undefined (reading 'description')

This happens when Prometheus polling returns empty results for individual network utilization queries at different times. The mapTranslatedData function in UtilizationItem only checks if the first sub-array is empty, but subsequent sub-arrays can also be empty, causing query[0].description to throw. Similarly, AreaChart accesses d[0].description without optional chaining in the legend data mapping.

Root Cause

• PrometheusMultilineUtilizationItem builds a stats array where individual queries can return empty: [[valid_data], []]
• The guard in mapTranslatedData only checks originalData[0].length === 0, so it passes when the first query has data but a later one is empty
• In AreaChart, legendData mapping accesses d[0].description without optional chaining, despite d[0] potentially being undefined

Solution

• UtilizationItem.tsx: Skip empty/null sub-arrays in the mapTranslatedData loop instead of crashing
• area.tsx: Add optional chaining (?.) on d[0] accesses in legendData mapping and formatDate callback, matching the existing safe pattern already used elsewhere in the same file

Testing

• Verify Home → Overview page loads without errors
• Leave the Overview page open for an extended period and confirm no crash occurs
• Verify network utilization charts render correctly when data is available
• Verify charts handle gracefully when individual Prometheus queries return empty results

Fixes: https://redhat.atlassian.net/browse/OCPBUGS-14473

Summary by CodeRabbit

• Bug Fixes
  • Improved dashboard utilization charts to handle empty or missing query data without errors.
  • Updated area chart legends and tooltips to display safely when the first data point is unavailable.

[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]

@ericahinkleRH: This pull request references Jira Issue OCPBUGS-14473, which is invalid:

• expected the bug to target the "5.0.0" version, but no target version was set

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

The bug has been updated to refer to the pull request using the external bug tracker.

Details

In response to this:

Problem

Visiting Home → Overview and leaving the page open for an extended period causes a crash:

TypeError: Cannot read properties of undefined (reading 'description')

This happens when Prometheus polling returns empty results for individual network utilization queries at different times. The mapTranslatedData function in UtilizationItem only checks if the first sub-array is empty, but subsequent sub-arrays can also be empty, causing query[0].description to throw. Similarly, AreaChart accesses d[0].description without optional chaining in the legend data mapping.

Root Cause

• PrometheusMultilineUtilizationItem builds a stats array where individual queries can return empty: [[valid_data], []]
• The guard in mapTranslatedData only checks originalData[0].length === 0, so it passes when the first query has data but a later one is empty
• In AreaChart, legendData mapping accesses d[0].description without optional chaining, despite d[0] potentially being undefined

Solution

• UtilizationItem.tsx: Skip empty/null sub-arrays in the mapTranslatedData loop instead of crashing
• area.tsx: Add optional chaining (?.) on d[0] accesses in legendData mapping and formatDate callback, matching the existing safe pattern already used elsewhere in the same file

Testing

• Verify Home → Overview page loads without errors
• Leave the Overview page open for an extended period and confirm no crash occurs
• Verify network utilization charts render correctly when data is available
• Verify charts handle gracefully when individual Prometheus queries return empty results

Fixes: https://redhat.atlassian.net/browse/OCPBUGS-14473

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: b20a3f6b-ab33-4e3f-b33f-40d5b2986802

📥 Commits

Reviewing files that changed from the base of the PR and between ed52791 and 09a370c.

📒 Files selected for processing (1)

• frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationItem.tsx

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

• frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationItem.tsx

---

Walkthrough

Empty query series and area chart datasets remain safe when they contain no data points. Translation, legend formatting, and tooltip date formatting avoid accessing missing entries.

Changes

Empty dataset handling

Layer / File(s)	Summary
Guard empty query and chart data frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationItem.tsx, frontend/public/components/graphs/area.tsx	Empty query series are preserved without translation. Area chart legend and tooltip formatting safely access missing first data points.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Suggested reviewers: fsgreco, rawagner

🚥 Pre-merge checks | ✅ 15

✅ Passed checks (15 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the Jira issue and the primary fix for undefined data in dashboard charts.
Description check	✅ Passed	The description clearly documents the problem, root cause, solution, testing, and Jira issue, despite omitting some template sections.
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 two TSX source files and adds no Ginkgo test declarations or test titles; therefore no unstable or dynamic test names are present.
Test Structure And Quality	✅ Passed	Not applicable: the commit changes only two .tsx files and adds no test files, Ginkgo code, assertions, or cluster operations.
Microshift Test Compatibility	✅ Passed	The commit modifies only two frontend TSX files and adds no Ginkgo tests or test files, so MicroShift compatibility rules do not apply.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	The PR changes only two frontend TSX files and adds no Go files or Ginkgo e2e constructs, so SNO compatibility checks are not applicable.
Topology-Aware Scheduling Compatibility	✅ Passed	The commit modifies only two frontend chart components and adds no manifests, operators, controllers, or scheduling constraints.
Ote Binary Stdout Contract	✅ Passed	The PR changes only two frontend TSX files; no OTE binary, Go suite setup, or process-level stdout write is introduced.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	The commit changes only two frontend TSX files. It adds no Ginkgo e2e tests, IPv4 assumptions, or external connectivity requirements.
No-Weak-Crypto	✅ Passed	The two changed TypeScript files add only empty-series handling and optional chaining; scans found no MD5, SHA1, DES, RC4, Blowfish, ECB, crypto APIs, or secret comparisons.
Container-Privileges	✅ Passed	The PR changes only two TSX source files; no container/Kubernetes manifests or privilege indicators were added.
No-Sensitive-Data-In-Logs	✅ Passed	The commit changes only data guards and optional property access; no logging calls or sensitive-data logging were added in either changed file.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: ericahinkleRH
Once this PR has been reviewed and has the lgtm label, please assign rawagner for approval. 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

[ericahinkleRH]

/jira refresh

[openshift-ci-robot]

@ericahinkleRH: This pull request references Jira Issue OCPBUGS-14473, which is valid. The bug has been moved to the POST state.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (5.0.0) matches configured target version for branch (5.0.0)
• bug is in the state New, which is one of the valid states (NEW, ASSIGNED, POST)

No GitHub users were found matching the public email listed for the QA contact in Jira (yapei@redhat.com), skipping review request.

Details

In response to this:

/jira refresh

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]

Actionable comments posted: 1

🤖 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-shared/src/components/dashboard/utilization-card/UtilizationItem.tsx`:
- Around line 78-80: Remove the first-series fast path that checks
originalData[0].length before the per-query loop in the translation logic. Let
the loop in UtilizationItem handle null and empty queries independently,
preserving them while still translating later non-empty series. Add regression
tests covering [null, data] and [[], data].

🪄 Autofix

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: 637fd756-0201-42d5-a10d-efbc0f1264d1

📥 Commits

Reviewing files that changed from the base of the PR and between b143108 and 4c0126d.

📒 Files selected for processing (2)

• frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationItem.tsx
• frontend/public/components/graphs/area.tsx

[openshift-ci-robot]

@ericahinkleRH: This pull request references Jira Issue OCPBUGS-14473, which is valid.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (5.0.0) matches configured target version for branch (5.0.0)
• bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)

No GitHub users were found matching the public email listed for the QA contact in Jira (yapei@redhat.com), skipping review request.

Details

In response to this:

Problem

Visiting Home → Overview and leaving the page open for an extended period causes a crash:

TypeError: Cannot read properties of undefined (reading 'description')

This happens when Prometheus polling returns empty results for individual network utilization queries at different times. The mapTranslatedData function in UtilizationItem only checks if the first sub-array is empty, but subsequent sub-arrays can also be empty, causing query[0].description to throw. Similarly, AreaChart accesses d[0].description without optional chaining in the legend data mapping.

Root Cause

• PrometheusMultilineUtilizationItem builds a stats array where individual queries can return empty: [[valid_data], []]
• The guard in mapTranslatedData only checks originalData[0].length === 0, so it passes when the first query has data but a later one is empty
• In AreaChart, legendData mapping accesses d[0].description without optional chaining, despite d[0] potentially being undefined

Solution

• UtilizationItem.tsx: Skip empty/null sub-arrays in the mapTranslatedData loop instead of crashing
• area.tsx: Add optional chaining (?.) on d[0] accesses in legendData mapping and formatDate callback, matching the existing safe pattern already used elsewhere in the same file

Testing

• Verify Home → Overview page loads without errors
• Leave the Overview page open for an extended period and confirm no crash occurs
• Verify network utilization charts render correctly when data is available
• Verify charts handle gracefully when individual Prometheus queries return empty results

Fixes: https://redhat.atlassian.net/browse/OCPBUGS-14473

Summary by CodeRabbit

• Bug Fixes
• Improved dashboard utilization charts to handle empty or missing query data without errors.
• Updated area chart legends and tooltips to display safely when the first data point is unavailable.

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.

[ericahinkleRH]

/test backend

[openshift-ci]

@ericahinkleRH: 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.

[ericahinkleRH]

/test e2e-gcp-console
/test e2e-playwright

[ericahinkleRH]

/test e2e-gcp-console

[ericahinkleRH]

/test e2e-playwright