feat: rework metric cards to tabs #2580
Open
+837
−752
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
astandrik
force-pushed
the
astandrik.2443
branch
2 times, most recently
from
33d70ca to
e6bb453
Compare
astandrik
force-pushed
the
astandrik.2443
branch
from
c8570bb to
ad482b6
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR reworks the metric cards from a traditional card-based interface to a tab-based navigation system for better UX and visual consistency. The changes improve state management, modernize UI components, and enhance the overall user experience with charts and metrics visualization.
- Replaced traditional metric cards with tab-style navigation using TabCard components
- Updated state management to ensure metrics tab always has a valid default value
- Modernized chart components with integrated time frame controls and improved layout
- Removed deprecated components and consolidated utility functions
Reviewed Changes
Copilot reviewed 32 out of 32 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/metrics.ts | New utility functions for metric calculations and aggregation |
| src/store/reducers/tenant/types.ts | Made metricsTab required instead of optional |
| src/store/reducers/tenant/tenant.ts | Added validation for metricsTab with CPU fallback |
| src/containers/Tenant/Diagnostics/TenantOverview/TabCard/TabCard.tsx | New tab-style card component with doughnut metrics visualization |
| src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricsCards.tsx | Complete refactor to use TabCard components with flex layout |
| src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricsCards.scss | Extensive new styling for tab interface with pseudo-elements |
| src/components/MetricChart/MetricChart.tsx | Simplified chart component with integrated time frame controls |
| src/components/QueriesActivityBar/QueriesActivityBar.tsx | Updated from Disclosure to Card component |
| tests/suites/tenant/diagnostics/tabs/info.test.ts | Updated test assertions for new metric structure |
| tests/suites/tenant/diagnostics/Diagnostics.ts | Updated page object model for new CSS selectors |
Comments suppressed due to low confidence (1)
src/components/MetricChart/MetricChart.tsx:29
- The variable name and comment reference 'fullWidth' which is no longer a prop in this component. Consider renaming to DEFAULT_CHART_WIDTH or updating the comment to reflect current usage.
const DEFAULT_EFFECTIVE_WIDTH = 600; // Used for maxDataPoints calculation when using fullWidth
Comment on lines
+88
to
+89
| const totalUsed = Number(items.reduce((sum, item) => sum + (item.used || 0), 0).toFixed(2)); | ||
| const totalLimit = Number(items.reduce((sum, item) => sum + (item.limit || 0), 0).toFixed(2)); |
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
|
bugbot run |
![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.
|
bugbot run |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #2443
Stand
CI Results
Test Status:⚠️ FLAKY
📊 Full Report
Test Changes Summary ⏭️2
⏭️ Skipped Tests (2)
Bundle Size: 🔺
Current: 85.19 MB | Main: 85.18 MB
Diff: +9.81 KB (0.01%)
ℹ️ CI Information