feat: redesign CPU section #2597
Conversation
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
astandrik
force-pushed
the
astandrik.2445-3
branch
from
05a4d25 to
f2d22c4
Compare
|
bugbot run |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
astandrik
force-pushed
the
astandrik.2445-3
branch
from
f2d22c4 to
b06dfdf
Compare
|
bugbot run |
There was a problem hiding this comment.
Pull Request Overview
Redesign of the CPU section in the tenant diagnostics interface to improve navigation and organization. This change transforms the previous linear layout into a tabbed interface with enhanced navigation controls.
- Restructures CPU section with tabs for Nodes, Shards, and Queries
- Adds node filtering modes (by load vs by pool usage) with "All Nodes" navigation link
- Refactors MetricsCards to MetricsTabs with updated CSS class names
Reviewed Changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
tests/suites/tenant/diagnostics/Diagnostics.ts |
Updates test selectors to use new CSS class names |
src/utils/metrics.ts |
Updates comment reference from MetricsCards to MetricsTabs |
src/store/state-url-mapping.ts |
Adds URL mapping for new cpuTab and nodesMode state |
src/store/reducers/tenant/types.ts |
Defines TypeScript types for CPU tab and nodes mode |
src/store/reducers/tenant/tenant.ts |
Implements Redux actions and state management for CPU navigation |
src/store/reducers/tenant/constants.ts |
Defines constants for CPU tabs and nodes mode options |
src/containers/Tenant/TenantPages.tsx |
Adds cpuTab to tenant tabs groups |
src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json |
Adds internationalization keys for new UI elements |
src/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.tsx |
Makes title prop optional for flexible table layouts |
src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx |
Updates component imports and layout structure |
src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss |
Updates CSS classes and typography mixins |
src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.tsx |
Removes title and navigation logic, simplifies component |
src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.tsx |
Removes title and navigation logic, simplifies component |
src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx |
Major redesign with tabbed interface and enhanced navigation |
src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.scss |
New stylesheet for redesigned CPU section |
src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/MetricsTabs.tsx |
Renames component from MetricsCards to MetricsTabs |
src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/MetricsTabs.scss |
Updates CSS class names throughout stylesheet |
CONTRIBUTING.md |
Adds development guidelines for updating documentation |
.github/copilot-instructions.md |
New file with GitHub Copilot instructions for the project |
src/store/reducers/tenant/tenant.ts
Outdated
| @@ -48,12 +52,31 @@ const slice = createSlice({ | |||
| const isValidTab = action.payload && validTabs.includes(action.payload as any); | |||
| state.metricsTab = isValidTab ? action.payload : TENANT_METRICS_TABS_IDS.cpu; | |||
| }, | |||
| setCpuTab: (state, action: PayloadAction<TenantCpuTab>) => { | |||
There was a problem hiding this comment.
Why do we need these in redux? It seems to be local state...
There was a problem hiding this comment.
These tabs are in Redux rather than local state because of URL synchronization- The cpuTab state is automatically synced with URL parameters through the state-url-mapping.ts middleware. This enables:
- Shareable URLs (e.g.,
/tenant?cpuTab=queries) - Browser back/forward navigation
- State persistence on page refresh
Without Redux, you'd lose the ability to share links to specific tabs, browser history wouldn't work correctly, and refreshing the page would reset to the default tab. The URL-state synchronization is the key reason - it's not truly "local" state when it needs to be reflected in the URL.
There was a problem hiding this comment.
As far as I see its common way to work with tabs in our app
There was a problem hiding this comment.
moved to search params pattern
Closes #2445
Stand
Figma
CI Results
Test Status:⚠️ FLAKY
📊 Full Report
Test Changes Summary ⏭️2
⏭️ Skipped Tests (2)
Bundle Size: 🔺
Current: 85.22 MB | Main: 85.21 MB
Diff: +0.01 MB (0.01%)
ℹ️ CI Information