Repository navigation
feat(customer-portal): usage metrics UI improvements and chat widget cleanup - #1046
Merged
Merged
Conversation
…cleanup - Rewrite UsageEnvironmentProductsPanel with flat instance rows showing OS/Java/U2 only; product headers right-justified with Avg/Min/Max stats (Curr removed); CPU Usage label - Rename data source toggle labels to Live / Upload and lock it read-only (always Live) - Default deployment tab to first with productCount > 0 instead of instanceCount - Fix productCount field name in ProjectDeploymentItem type (was deployedProductCount) - Add OS derivation with defensive date sort in usageMetricsEnvironmentProducts util - Remove token request feature from NoveraChatPage chat widget - Minor: trim "Escalation" suffix from escalation modal title Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ddressed) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
github-actions
Bot
added
App/Customer Portal
Area/Frontend
Platform/Web
Type/New Feature
Contributor
📝 WalkthroughWalkthroughThis PR refactors Usage & Metrics UI to derive tabs directly from deployment data, replacing the overview drill-down with a flat instance-row display and disabling data-source selection. It updates related type/constant contracts, adjusts instance metric derivation, and removes the token-request modal flow from the Novera chat page. ChangesUsage Metrics Tab and Panel Refactor
Estimated code review effort: 3 (Moderate) | ~25 minutes Novera Chat Token Modal Removal
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/customer-portal/webapp/src/features/usage-metrics/components/UsageAndMetricsTabContent.tsx (1)
132-146: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winUse
disabledinstead ofpointerEvents: nonefor the locked toggle.
pointerEvents: noneonly blocks mouse interaction; the toggle buttons remain focusable via keyboard and are still announced as interactive controls by screen readers, even though nothing happens on activation (noonChangehandler exists). Use MUI'sdisabledprop on theToggleButtonGroup/ToggleButtons for correct semantics (removes from tab order, announces disabled state).♿ Proposed fix
<ToggleButtonGroup size="small" exclusive value={dataSource} aria-label="data source filter" - sx={{ pointerEvents: "none" }} + disabled > - <ToggleButton value={DataSource.API_CALL} aria-label={USAGE_METRICS_DATA_SOURCE_API_CALL}> + <ToggleButton value={DataSource.API_CALL} aria-label={USAGE_METRICS_DATA_SOURCE_API_CALL} disabled> {USAGE_METRICS_DATA_SOURCE_API_CALL} </ToggleButton> - <ToggleButton value={DataSource.FILE_UPLOAD} aria-label={USAGE_METRICS_DATA_SOURCE_FILE_UPLOAD}> + <ToggleButton value={DataSource.FILE_UPLOAD} aria-label={USAGE_METRICS_DATA_SOURCE_FILE_UPLOAD} disabled> {USAGE_METRICS_DATA_SOURCE_FILE_UPLOAD} </ToggleButton> </ToggleButtonGroup>🤖 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 `@apps/customer-portal/webapp/src/features/usage-metrics/components/UsageAndMetricsTabContent.tsx` around lines 132 - 146, The locked usage/source toggle in UsageAndMetricsTabContent should use proper disabled semantics instead of pointerEvents styling. Update the ToggleButtonGroup and/or its ToggleButton children to be disabled so the controls are removed from tab order and announced correctly by assistive tech, and remove the sx pointerEvents: "none" workaround. Keep the existing DataSource.API_CALL and DataSource.FILE_UPLOAD options intact while making the toggle non-interactive.
🤖 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
`@apps/customer-portal/webapp/src/features/usage-metrics/components/UsageAndMetricsTabContent.tsx`:
- Around line 72-94: Handle the empty-deployments branch in
UsageAndMetricsTabContent so users see an explicit no-data state instead of only
the tab bar and time range selector. In the component’s deployment tab logic,
where defaultTab and activeDeploymentId are derived from deploymentsData, add a
guard for the empty deploymentsData case and render a dedicated empty-state UI
before UsageEnvironmentProductsPanel is considered. Keep the existing behavior
for non-empty data and use the current symbols deploymentTabs, defaultTab,
activeTab, and activeDeploymentId to place the fix.
---
Nitpick comments:
In
`@apps/customer-portal/webapp/src/features/usage-metrics/components/UsageAndMetricsTabContent.tsx`:
- Around line 132-146: The locked usage/source toggle in
UsageAndMetricsTabContent should use proper disabled semantics instead of
pointerEvents styling. Update the ToggleButtonGroup and/or its ToggleButton
children to be disabled so the controls are removed from tab order and announced
correctly by assistive tech, and remove the sx pointerEvents: "none" workaround.
Keep the existing DataSource.API_CALL and DataSource.FILE_UPLOAD options intact
while making the toggle non-interactive.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 435baf87-4d2e-4075-bd9e-ef4e198c94d5
📒 Files selected for processing (8)
apps/customer-portal/webapp/src/features/project-details/types/deployments.tsapps/customer-portal/webapp/src/features/project-details/types/usage.tsapps/customer-portal/webapp/src/features/support/pages/NoveraChatPage.tsxapps/customer-portal/webapp/src/features/usage-metrics/components/UsageAndMetricsTabContent.tsxapps/customer-portal/webapp/src/features/usage-metrics/components/UsageEnvironmentProductsPanel.tsxapps/customer-portal/webapp/src/features/usage-metrics/constants/usageMetricsConstants.tsapps/customer-portal/webapp/src/features/usage-metrics/types/usageMetrics.tsapps/customer-portal/webapp/src/features/usage-metrics/utils/usageMetricsEnvironmentProducts.ts
💤 Files with no reviewable changes (2)
- apps/customer-portal/webapp/src/features/usage-metrics/types/usageMetrics.ts
- apps/customer-portal/webapp/src/features/support/pages/NoveraChatPage.tsx
Rashmika998
approved these changes
Jul 5, 2026
2 tasks
This was referenced Jul 6, 2026
6 of 7 tasks
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary
UsageEnvironmentProductsPanel): flat instance rows (no per-instance accordion), product header stats right-justified showing Avg/Min/Max only (Curr removed), instances show OS / Java Version / U2 Level onlypointerEvents: noneprevents user interaction (reflects live API data source)productCount > 0instead ofinstanceCount > 0ProjectDeploymentItem.deployedProductCount→productCountto match actual API response field nameusageMetricsEnvironmentProductsnow extractsos/osVersionfrom deployment metadata; defensive ascending date sort before.at(-1)to handle SN ordering differencesTokenRequestModal, WebSocket handler, state) fromNoveraChatPageTest plan
Summary by CodeRabbit
New Features
Improvements
Bug Fixes