Skip to content

feat(usage): break usage down by request type, project, environment or SDK - #8343

Draft
talissoncosta wants to merge 10 commits into
feat/usage-plan-limit-8185from
feat/usage-breakdown-8186
Draft

feat(usage): break usage down by request type, project, environment or SDK#8343
talissoncosta wants to merge 10 commits into
feat/usage-plan-limit-8185from
feat/usage-breakdown-8186

Conversation

@talissoncosta

@talissoncosta talissoncosta commented Aug 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Reviewing this

Stacked on #8320, so review that first. This diff is only the breakdown section.

Start with UsageBreakdownContainer.tsx for how each dimension gets its data. The one non-obvious piece is UsageScopeTotal.tsx, explained inline.

  • I have read the Contributing Guide.
  • I have added information to docs/ if required so people know about the feature.
  • I have filled in the "Changes" section below.
  • I have filled in the "How did you test this code" section below.

Changes

Contributes to #8186

A section under the chart showing where the usage came from, with a menu for request type, project, environment or SDK. Ranked rows, no plan limit: a single request type has no allowance of its own, so a limit line there would mean nothing.

Totals only, deliberately. The chart above answers "where am I heading against my plan", and that is where the projection lands in #8188. A second chart here would compete with it.

  • request type and SDK come from the response the charts already fetch, so they cost no extra requests
  • project and environment need one request per key, because the endpoint filters by them rather than grouping. A group_by would collapse that into one request, and would also remove the wait: rows only rank correctly once every scope has answered
  • usage recorded before user agents were captured is grouped as "Unknown" rather than dropped, so the rows still sum to the meter above

On whether this replaces the old tabs. It replaces them functionally: By Endpoint is now By request type, and By SDK is a dimension. The sidebar and the two old containers stay for now because they are what renders when usage_dashboard is off, which is everywhere today. Removing them, and retiring sdk_usage_charts with them, belongs to the flag-removal PR.

Two changes reach outside this feature:

  • shared/ValueBar is extracted from UsageBar, which had the same track-and-fill markup and duplicated its transition. ProjectUsageTab and EnvironmentOverrideUsage render it unchanged
  • the plan bar now reports role="meter" rather than role="progressbar". ARIA reserves progressbar for a task advancing, and usage against an allowance is a value in a known range. Meter has patchier screen-reader support, so it is a deliberate trade

How did you test this code?

11 unit tests over the derivations, including same-named projects and unattributed SDK usage.

With usage_dashboard on:

  • request type: four rows, biggest first, shares summing to 100%
  • SDK: one row per user agent
  • project: one row per project
  • environment with no project selected: prompt to pick one
  • environment with a project selected: one row per environment
  • change the period while on project or environment: no stale numbers from the previous period
  • Project Settings > Usage bars unchanged

Project and environment need an organisation with several of each, so use the preview deployment rather than localhost. Every state is also in Storybook under Pages > Usage Dashboard > Components > UsageBreakdown.

@vercel

vercel Bot commented Aug 21, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview Aug 22, 2026 2:07pm
flagsmith-frontend-staging Ready Ready Preview Aug 22, 2026 2:07pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Aug 22, 2026 2:07pm

Request Review

@github-actions github-actions Bot added the front-end Issue related to the React Front End Dashboard label Aug 21, 2026
@coderabbitai

coderabbitai Bot commented Aug 21, 2026 •
edited
Loading

Copy link
Copy Markdown

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 5cd3e8e5-f0f0-472a-8dde-bfa567acbf81

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions github-actions Bot added the feature New feature or request label Aug 21, 2026
@talissoncosta
talissoncosta force-pushed the feat/usage-breakdown-8186 branch from 6a7bc06 to dbf1eed Compare August 21, 2026 16:36
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Aug 21, 2026
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Aug 21, 2026
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Aug 21, 2026
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Aug 21, 2026
@talissoncosta talissoncosta changed the title feat(usage): Break usage down by request type, project, environment or SDK feat(usage): break usage down by request type, project, environment or SDK Aug 21, 2026
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Aug 21, 2026
@talissoncosta
talissoncosta force-pushed the feat/usage-breakdown-8186 branch from 80bb450 to 35abec8 Compare August 21, 2026 22:23
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Aug 21, 2026
talissoncosta and others added 10 commits August 22, 2026 11:05
@talissoncosta @claude
feat(usage): derive a usage breakdown from the response
577dc33 
Request type sums the four billable fields; SDK groups by user agent. Both
come from the response the charts already fetch, so neither costs a request.

Usage from before user agents were captured is grouped as Unknown rather than
dropped, otherwise the rows would not sum to the total shown above them.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@talissoncosta @claude
feat(usage): add the breakdown section and its rows
5ca6664 
Carries no plan limit: a single request type or project has no allowance of
its own, so a limit line would invite a comparison that means nothing.

Each bar is scaled to the largest row while the percentage is the share of the
total, because "which is biggest" and "how much of my usage is this" are
different questions and one bar cannot answer both.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@talissoncosta @claude
feat(usage): fetch per-project and per-environment totals
666f9ed 
The endpoint filters by project and environment rather than grouping by them,
so a breakdown needs one request per key. Those cannot be a loop of hooks: the
key list starts empty and fills once loaded, and React requires the same hooks
in the same order every render. Each scope gets a component that fetches its
own total and reports it up.

Rows appear as each request lands rather than waiting for the slowest.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@talissoncosta @claude
feat(usage): show the breakdown on the dashboard
f2be51d 
Contributes to #8186

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@talissoncosta @claude
docs(usage): cover the breakdown states in Storybook
1060d85 
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@talissoncosta @claude
fix(usage): correct the scoped breakdown and share the bar
80041c9 
Two defects in the per-scope breakdown:

- totals were keyed by name, so two projects sharing one would overwrite
  each other. They key on the scope now
- totals were never cleared, so changing the period or project left the
  previous numbers on screen while the new requests were in flight, with
  nothing to mark them stale. They reset when the query identity changes

The section also waits for every scope rather than filling in, because a
partial list ranks wrongly and ranking is the point.

Extracts shared/BarTrack from UsageBar and UsageBreakdownRow, which had
near-identical markup and each hand-wrote the same transition and
reduced-motion guard. Rows carry the colour each request type has always
had on the usage page.

Also: the barrel exports the container, so callers stop reaching past it;
UsageBreakdownList replaces a function-in-render; skipToken replaces a cast;
and the row's flex, spacing and border move to utilities.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@talissoncosta @claude
refactor(shared): name the bar primitive ValueBar
d464eed 
BarTrack led with the noun and named the groove. Everything else here is
<Noun>Bar: ButterBar, CalloutBar, DistributionBar, UsageBar.

Not ProgressBar: half its callers compare values against the largest row
rather than tracking a task, which is why the progressbar semantics are
optional rather than built in.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@talissoncosta @claude
fix(a11y): report plan usage as a meter, not a progress bar
c5968d6 
ARIA reserves progressbar for a task advancing and meter for a value inside
a known range. Usage against a plan allowance is the second, so a screen
reader was told a task was underway.

Changes what ProjectUsageTab and EnvironmentOverrideUsage announce as well,
since they share the bar. No selectors depend on the old role. Note that
meter has patchier assistive-tech support than progressbar, which is the
trade being taken deliberately.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@talissoncosta @claude
refactor(usage): drop the per-row colours
1b4ea39 
They were the legend for a stacked chart that is no longer there. Without it
the colour distinguished nothing the adjacent label and the bar length did not
already, and only request-type rows had one, so the same section looked
colour-coded on one dimension and plain on the next.

A categorical palette is still available in CHART_COLOURS if a chart ever
needs one; it does not have to live on a breakdown row to be reachable.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@talissoncosta @claude
refactor(usage): group the breakdown's sub-components
db6b895 
Three of them, so they move into components/ and drop the prefix the path
already supplies: Row, List, ScopeTotal.

The pair also matches UsageDashboard now. The bare name is the container, so
the folder, the file and the default export agree, and callers stop reaching
past the barrel for it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@talissoncosta
talissoncosta force-pushed the feat/usage-breakdown-8186 branch from 35abec8 to db6b895 Compare August 22, 2026 14:07
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Aug 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

feature New feature or request front-end Issue related to the React Front End Dashboard

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@talissoncosta