OU-1323: Refactor dashboards state to prevent desync

[PeterYurkovich]

This PR looks to refactor the legacy dashboards state to prevent state desync through 2 primary methods:

• remove non-variable dashboard state from the redux store and make all usage rely wholly on the query params
• change the redux store to save variables into their own dashboard key so that the variable state isn't constantly deleted and recreated

It also introduces the usage of the withDefault from the use-query-params package to simplify initial loading state

Summary by CodeRabbit

• Refactor
  • Time range, end time and refresh interval now persist as numeric URL query parameters and drive chart/zoom/poll behavior; dashboard components accept a dashboard identifier so variables are scoped per-dashboard.
• Bug Fixes
  • Query views no longer override built-in timespan defaults; URL-driven values take precedence.
• Chores
  • Internal action/state wiring updated to support per-dashboard variable handling and query-param-driven timing.

[openshift-ci-robot]

@PeterYurkovich: This pull request references OU-1323 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 bug to target the "5.0.0" version, but no target version was set.

Details

In response to this:

This PR looks to refactor the legacy dashboards state to prevent state desync through 2 primary methods:

• remove non-variable dashboard state from the redux store and make all usage rely wholly on the query params
• change the redux store to save variables into their own dashboard key so that the variable state isn't constantly deleted and recreated

It also introduces the usage of the withDefault from the use-query-params package to simplify initial loading state

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.

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: PeterYurkovich

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

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

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

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: ea50e6e2-bb04-4d78-a326-cd294ee50e3f

📥 Commits

Reviewing files that changed from the base of the PR and between 5b838b2 and 35ee0c4.

📒 Files selected for processing (1)

• web/src/components/dashboards/legacy/useLegacyDashboards.ts

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

• web/src/components/dashboards/legacy/useLegacyDashboards.ts

---

Walkthrough

Dashboard timing/refresh state moved from Redux to typed numeric URL query parameters; legacy dashboard variables re-scoped per-dashboard under dashboards.legacy[dashboardName].variables; components, hooks, and actions updated to accept and propagate dashboardName; QueryBrowser explicit defaultTimespan removed. (≤50 words)

Changes

Cohort / File(s)	Summary
Store restructuring web/src/store/store.ts, web/src/store/actions.ts, web/src/store/reducers.ts	Nest legacy dashboard variables under dashboards.legacy[dashboardName].variables. Remove Redux timing/polling/clear actions. Bump dashboard variable action types to v3 and add dashboardName argument; reducers lazily init per-dashboard entries.
Legacy dashboard core & props web/src/components/dashboards/legacy/legacy-dashboard.tsx, web/src/components/dashboards/legacy/legacy-dashboard-page.tsx, web/src/components/dashboards/legacy/dashboard-skeleton-legacy.tsx	Thread dashboardName prop through legacy dashboard components and pass it to panels/variable dropdowns; update component signatures and keys to include dashboardName.
Variable dropdowns & scoping web/src/components/dashboards/legacy/legacy-variable-dropdowns.tsx, web/src/components/dashboards/legacy/useLegacyDashboardsProject.ts, web/src/components/dashboards/legacy/useLegacyDashboards.ts	Scope variable reads/patches to dashboards.legacy[dashboardName].variables. Action creators now take dashboardName. LegacyDashboardsAllVariableDropdowns requires dashboardName; effects and patch logic updated; unmount clear removed.
Query-param time/refresh integration web/src/components/dashboards/legacy/graph.tsx, web/src/components/dashboards/legacy/time-dropdowns.tsx, web/src/components/dashboards/legacy/custom-time-range-modal.tsx, web/src/components/dashboards/legacy/utils.ts	Replace Redux time/refresh state with use-query-params numeric params (EndTime, TimeRange, RefreshInterval / NumberParam/TimeRangeParam). Handlers write numeric query params instead of dispatching Redux time/poll actions; modal submit writes EndTime/TimeRange as numbers.
Panel & chart props web/src/components/dashboards/legacy/graph.tsx, web/src/components/dashboards/legacy/legacy-dashboard.tsx, web/src/components/dashboards/legacy/.../Card	Charts receive pollInterval/fixedEndTime/timespan from query-param values. Remove onZoomHandle prop; onZoom now updates query params directly.
Hooks & logic updates web/src/components/dashboards/legacy/useLegacyDashboards.ts, web/src/components/dashboards/legacy/useLegacyDashboardsProject.ts	Change hook signatures to accept/derive dashboardName; simplify board switching and URL query construction; gate variable patching on dashboardName and include it in dispatches.
Utilities & small updates web/src/components/MetricsPage.tsx, web/src/components/dashboards/legacy/utils.ts	Remove explicit defaultTimespan prop from QueryBrowser. Add TimeRangeParam and RefreshIntervalParam (typed NumberParam defaults).

Sequence Diagram(s)

sequenceDiagram
  participant User as User
  participant UI as Legacy UI (Graph / Dropdown / Modal)
  participant URL as Browser URL (query params)
  participant Store as Redux Store
  participant QB as QueryBrowser/Charts

  User->>UI: interact (zoom / set timespan / submit modal / change dropdown)
  UI->>URL: write numeric query params (EndTime, TimeRange, RefreshInterval)
  UI--xStore: stop dispatching timing/poll actions
  URL-->>QB: QueryBrowser/Charts read query params
  QB-->>UI: render charts with fixedEndTime / timespan / pollInterval
  UI->>Store: variable-related actions include dashboardName (patch/load)
  Store-->>UI: per-dashboard variables from dashboards.legacy[dashboardName]

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 11 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Test Structure And Quality	❓ Inconclusive	PR contains component and Redux state refactoring without test file modifications, but custom check assumes Ginkgo tests incompatible with repository's Jest framework.	Clarify if test coverage is required for state management refactoring and verify Jest unit tests have been added for query parameter logic.

✅ Passed checks (11 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'OU-1323: Refactor dashboards state to prevent desync' clearly and specifically summarizes the main change: a refactoring to prevent state desynchronization by moving dashboard state from Redux to URL query parameters and reorganizing variable storage per-dashboard.
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	This custom check regarding stable and deterministic Ginkgo test names is not applicable to this pull request. The PR exclusively modifies TypeScript/React component files in the web/src/ directory related to dashboard state refactoring and does not introduce or modify any Go test files.
Microshift Test Compatibility	✅ Passed	PR contains only frontend/web and Redux changes (TypeScript/JavaScript); no new Ginkgo e2e or Go test files included; custom check not applicable.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	PR modifies only TypeScript/React web UI components and does not touch Go-based Ginkgo test files, making SNO compatibility check not applicable.
Topology-Aware Scheduling Compatibility	✅ Passed	PR modifies only React UI components and Redux state management in web/src/ directory with no changes to deployment manifests, operator code, or Kubernetes controllers.
Ote Binary Stdout Contract	✅ Passed	PR modifies only TypeScript files in web/src/ directory; no Go code or OTE stdout contract changes detected.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	PR introduces only Cypress e2e tests (TypeScript/JavaScript) and no new Ginkgo tests, making IPv6 and disconnected network compatibility check inapplicable.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Review rate limit: 9/10 reviews remaining, refill in 6 minutes.}

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

[etmurasaki]

/label qe-approved

[openshift-ci]

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