scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-10 03:28:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 85

fix(ui): title usage overview chart "Daily usage" and label the model table "Top models" (#45604)

Browse source 
* fix(ui): title usage overview chart "Daily usage" and label the model table "Top models"

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* fix(ui): clarify usage chart subtitle as top 8 models plus Other

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

---------

Co-authored-by: Krrish Dholakia <krrishdholakia@berri.ai>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Krrish Dholakia 2026-10-09 09:56:59 -07:00 • committed by GitHub
parent 5e1c5c0bd1
commit 18e87d3039
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx
View file

@ -620,10 +620,29 @@ describe("UsagePage", () => {
expect(totalTokensElements.length).toBeGreaterThan(0);
// Check for chart titles (these are in the Overview tab)
expect(screen.getByText("Daily usage")).toBeInTheDocument();
expect(screen.getByText("Daily spend by model (top 8, rest grouped as Other)")).toBeInTheDocument();
expect(screen.getByText("Top models")).toBeInTheDocument();
expect(screen.getByText("Top Virtual Keys")).toBeInTheDocument();
});
it("should rename the usage chart when the weekly bucket is selected", async () => {
const user = userEvent.setup();
renderWithProviders(<UsagePage {...defaultProps} />);
await waitFor(() => {
expect(mockUserDailyActivityAggregatedCall).toHaveBeenCalled();
});
expect(screen.getByText("Daily usage")).toBeInTheDocument();
await user.click(screen.getByRole("radio", { name: "Weekly" }));
expect(screen.getByText("Weekly usage")).toBeInTheDocument();
expect(screen.getByText("Weekly spend by model (top 8, rest grouped as Other)")).toBeInTheDocument();
expect(screen.queryByText("Daily usage")).not.toBeInTheDocument();
});
it("should render the top models chart stacked in the shared usage palette", async () => {
const { container } = renderWithProviders(<UsagePage {...defaultProps} />);
@ -660,7 +679,7 @@ describe("UsagePage", () => {
});
// Default view should show Global Usage (for admin)
expect(screen.getByText("Top models")).toBeInTheDocument();
expect(screen.getByText("Daily usage")).toBeInTheDocument();
// Switch to Team Usage view
const usageSelect = screen.getByTestId("usage-view-select");

7
ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/overview/UsageOverview.tsx
View file

@ -120,8 +120,8 @@ export default function UsageOverview({
</div>
<Panel
title="Top models"
subtitle={`${granularity === "day" ? "Daily" : "Weekly"} ${METRIC_NOUN[state.metric]}, top 8 stacked`}
title={`${granularity === "day" ? "Daily" : "Weekly"} usage`}
subtitle={`${granularity === "day" ? "Daily" : "Weekly"} ${METRIC_NOUN[state.metric]} by model (top 8, rest grouped as Other)`}
action={
<>
<BreakdownControls state={state} onChange={setState} showDimension={false} />
@ -153,7 +153,8 @@ export default function UsageOverview({
/>
)}
</div>
<div className={cn("border-t py-2", PANEL_INSET_X)}>
<div className={cn("border-t pt-3 pb-2", PANEL_INSET_X)}>
<h4 className="text-sm leading-5 font-medium text-foreground">Top models</h4>
<Leaderboard
ranking={ranking}
series={dailySeries}