Repository navigation
feat(cost): filter rail, provider marks and drill-down on the Cost page - #2548
Conversation
The Cost page gets the filter rail the other list pages use: one checkbox
section per dimension (provider, connected account, service, category,
region), each value with its mark and its cost, searchable where long, with
Only and Clear all. Each section reads under every filter but its own, so
its other values stay on offer.
Every key carries a mark in the table, the chart legend and the filter
chips: AWS services and regions the AWS logo, OpenRouter models their
vendor's, categories a glyph. A connected account reads as the provider
that bills it ("AWS 4657...", "OpenRouter") instead of a bare id, and an
AWS region names its place.
A row click now filters and regroups to the next dimension (service to
region, provider/account/category/region to service), skipping one already
narrowed. Usage type leaves the grouping control and the URL.
|
Warning Review limit reachedYou've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Next included review available in 6 minutes. View limit details
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. |
Maple review🟡 Confidence 6/10 · needs attention. Held at 6 because a correctness warning is open. Moves the
Findings🟠 Warning · F1 ·
|
![maple-review-bot[bot]](https://avatars.githubusercontent.com/in/4108169?s=60&v=4){kind=small}
| sections: model.filterSections, | ||
| toSectionsMessage: toSections, | ||
| onToggle: (value) => Message.ToggledFacetValue({ dimension, value }), | ||
| onOnly: (value) => Message.ClickedOnlyFacetValue({ dimension, value }), |
There was a problem hiding this comment.
Warning
onOnly without onExclude renders no Only button, so the rail has none
F1 · Warning · correctness
filter-section.ts:270 draws the Only/Exclude hover overlay only when onExclude is set, and this section passes onOnly alone. No rail row ever shows Only: Message.ClickedOnlyFacetValue is never sent and onlyFilter is dead. Every other rail (services/list/view-filters.ts:39) passes both.
Pass an `onExclude` too, or in `filter-section.ts:270` render the overlay when either action exists: `...(config.onExclude === undefined && config.onOnly === undefined ? [] : [...])`.
🤖 Prompt to fix with an AI agent
In `apps/web/src/page/cost/view-filters.ts:69`: `onOnly` without `onExclude` renders no Only button, so the rail has none.
`filter-section.ts:270` draws the Only/Exclude hover overlay only when `onExclude` is set, and this section passes `onOnly` alone. No rail row ever shows Only: `Message.ClickedOnlyFacetValue` is never sent and `onlyFilter` is dead. Every other rail (`services/list/view-filters.ts:39`) passes both.
Suggested fix: Pass an `onExclude` too, or in `filter-section.ts:270` render the overlay when either action exists: `...(config.onExclude === undefined && config.onOnly === undefined ? [] : [...])`.
Verify the problem exists at that location before changing it, and keep the fix to those lines.
Keeps the Cost page rework (#2548) as it landed and re-applies the provider on top: the provider mark reads an entry without a tint, the lab's facet read leaves out removed sources like its other reads, and the empty state names Cloudflare beside the reworked sentence.
What
The Cost page was hard to explore: filtering only happened by clicking a table row, connected accounts showed as bare ids (
465760687006,user_2zZ0…), nothing showed what a key was, and the Usage type grouping wasn't useful.globala globe.Kit additions: an optional
markon legend series (BarChartseriesMarks) and on active filter chips,formatCountonfilterSection, andmodelSlugIconinai-vendor.Cost of the rail
The rail's values come from one breakdown read per dimension (5 reads, run side by side, limit 100 each) on every load and filter change.
Not in this PR
Screenshots (
/lab/cost, dark)Verification
tsrs --noEmit(apps/web, packages/views), oxlint with.oxlintrc.effect.json,ui:patterns:checksrc/page/cost,src/lab,src/route/route.test.ts,packages/viewscharts and filters. Newmarks.test.tscovers account labels, marks, region names, facet filters and toggle/Only. The row-link scene test now asserts the drill-down.Open in [code]smith · Need help on this PR? Tag
@codesmith-botwith what you need.