Usage dashboard prototype: show every state on fixture data - #8192
Draft
talissoncosta wants to merge 20 commits into
Draft
Usage dashboard prototype: show every state on fixture data#8192talissoncosta wants to merge 20 commits into
talissoncosta wants to merge 20 commits into
Conversation
Reframes OrganisationUsagePage with a "usage vs plan limit" summary: % of plan consumed, a meter, and a cumulative-vs-limit chart, all wired to the existing usage-data + max_api_calls (no backend change). Everything the API cannot feed yet is marked TODO(BE) and listed in the component so the diff doubles as the backend ask: reset date / billing period boundaries, the current-billing-period date-range bug, projection, grace-period status, and cost in currency. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Expands the prototype to the full v0.2 layout for the global view: billing-period strip, hero meter with Notify markers, stat tiles, cumulative usage-vs-limit chart (Area + plan-limit ReferenceLine + today dot), and the request-type breakdown. Global view now renders this in place of the old totals + bar chart; By SDK view is unchanged. Still wired only to existing data; reset date, projection and cost remain TODO(BE). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Swaps the hardcoded hex (accent/danger/success/warning + panel/border/ text/track) for the --color-* semantic tokens via common/theme/tokens, so the prototype flips correctly under .dark. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
`_get_start_date_and_stop_date_for_subscribed_organisation` derived the current period start from relativedelta(...).months only, dropping the years component, so terms that started >12 months ago (annual plans) resolved to the wrong year. Add years*12, mirroring the existing PREVIOUS_BILLING_PERIOD branch, and cover the annual case with a test. Note: api env (uv) not available locally; needs CI to run. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The reframed design drops the left "By Endpoint / By SDK" sidebar (SDK becomes a breakdown-dimension option instead), so remove the sidebar and the global/user-agents toggle from the page. Keep the Period/Project/Environment filters. Per the agreed behaviour, the plan limit is org-level, so the meter + cumulative chart use an org-wide query (period only) while Project/Environment filter a second query that feeds only the request-type breakdown. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Environment is a drill-down within a project and too granular for org-level usage; project is the meaningful pivot. Remove the environment select from UsageChartFilters and the page's filtered query. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Match the design: Usage title on the left, Period + Project selects on the right of the page header (dropping the separate labelled filter row). Give the surface a max-width and centre it instead of the left-aligned, narrow app-container layout. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Recharts auto-scaled the y-axis to usage, so with tiny usage against a large limit the plan-limit ceiling fell off-screen and the "usage vs limit" comparison was lost. Fix the domain to [0, max(limit, usage)] so the ceiling is always visible (and over-limit usage still shows above it). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The end marker's label was centred on the far-right point and half of it overflowed the panel; right-align it so it stays within bounds. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adds a scenario switch backed by fixtures so the over-limit, restricted and grace states can be shown on demand, fills in the tiles that were printing "needs BE", and adds the notifications screen. Restores the existing usage page and puts the prototype behind the usage_billing_prototype flag, so nothing changes until the flag is on. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
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 |
github-actions
Bot
added
front-end
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8192 +/- ##
=======================================
Coverage 98.71% 98.71%
=======================================
Files 1531 1531
Lines 61234 61272 +38
=======================================
+ Hits 60446 60484 +38
Misses 788 788 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
The branch is never merged, so gating it behind a flag only means creating one in Flagsmith before anyone can look at it. Check the branch out and the prototype is there. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Swaps the hand-rolled pieces for what already exists: StatItem for the tiles, Chip for the grace status, BareButton for the state and screen switches, and Format.shortenNumber instead of a local copy. Adds progressbar semantics to the meter and group labels to the switches. The tile badges go with this: StatItem has no badge slot, so the state now reads from the meter colour, the banner and the chart. Whether StatItem should grow one is a question for #8185. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
StatItem and Chip pulled the page away from the design: the tiles lost their badge and sub-label and grew icon blocks, and the grace chip read as a flat pill. Both are back to the designed layout. Badges now follow the dot-and-label pattern from experiments/StatusBadge, which looks like where the app is heading. That component is typed to experiment statuses, so this is a local copy with a tone prop rather than a change to shared code. Generalising it is a question for #8185. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
StatItem was a label, a value and an icon block, so anything richer got hand-rolled next to it: the admin metrics cards render their sub-line in a <small> outside the component, and the usage prototype had its own tiles. It now carries its own card: label and optional badge on one line, the value, then an optional sub-line. The icon is optional, since dense rows of figures read better without one. Call sites: the admin metrics cards drop their external <small>, Billing loses the panel that was wrapping the limit cards, and the usage prototype uses StatItem instead of its own tiles. Stories cover the new slots. Lives on the prototype branch by choice, so it needs porting when this becomes real work. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The plan, organisation id and management email were hand-rolled versions of the same tile, inside a panel that boxed them in. They are StatItem cards now, matching the subscription limits below. Adds a small size to StatItem for text values: an email at 28px overflows the card, which is why the old markup dropped to an h6 for it. Long values also wrap rather than stretching the card. The organisation id renders as a string, since numbers get thousands separators and "7,528" is not an id. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Adds the inline note under the meter, which is the only line on the page that draws a conclusion rather than stating a number: on track, over by how much, what it costs, what happens next. Wording follows the state, so the restricted and grace-countdown screens explain themselves. Adds the breakdown dimension menu (request type, project, environment, SDK) with obviously invented project and environment names, so nobody mistakes the demo for their own data. Live data only has request type, and says so. Labels the dashed projection on the chart, which was an unexplained line. Two fixes the screenshots turned up: - the period selector read "Last 90 days" while the strip underneath said "Billing period 18 Jul to 17 Aug". It follows the fixture now - rolling windows claimed a reset date. They are "Usage window" now, with no reset, since a rolling window never resets Also adds the "See docs" link the notifications design has. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The y-axis top was the projected value itself, so its label had nowhere to render and got cut off by the edge of the chart. The axis now carries 8% headroom above the highest value, and the label sits above the endpoint rather than inside the corner. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
You could add a notification but never get rid of one. Each row now has a remove control next to its toggle, labelled for screen readers. Rows above 100% claimed "You have reached your plan limit", which is wrong once you are past it. They now read "You are over your plan limit", and only the 100% row claims to be at it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The settings screen kept its own copy of the notifications, so removing 75% left the "Notify 75%" marker sitting on the meter, and edits vanished on tab switch. State lives on the page now and both screens read the same list. Changing scenario drops the edits, so each fixture still shows its own notifications. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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
1 participant
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.
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature.Changes
Contributes to #8184
Prototype, not for merge. It replaces the usage page on this branch so the v0.2 designs can be reviewed before we commit to building them. The production work is tracked under #8183.
The page runs on fixtures, so every designed state can be shown without depending on what an organisation has actually used:
A "Live data" option uses the real usage endpoints.
On the page: billing period with reset date and grace chip, "% of plan consumed" meter with notification markers, tiles that change per state, cumulative usage against the plan limit with a shaded overage zone and a dashed projection, request-type breakdown, and the notifications screen.
Reset date, grace state and cost are faked here. The API work that would make them real is in #8183.
Also included: the fix for #6099, current billing period ignoring terms longer than a year. One line and a test, no dependency on the prototype, and it can be split out to merge on its own.
How did you test this code?
Type checking and linting only. The page has not been rendered yet, I had no local API running to load it against.
To try it: check out the branch, run the frontend against an API, and open Organisation Settings, then Usage. The state switch at the top moves between the six fixtures, and the tabs move between the usage and notifications screens. Only "Live data" needs the API to return anything.