From 11f272e08bdb954a9938a7370eec2765fe388502 Mon Sep 17 00:00:00 2001 From: ryan Date: Thu, 3 Sep 2026 23:30:51 +0000 Subject: [PATCH 1/4] fix(ui): paginate per-user usage with the shared server-side DataTable footer Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .../src/components/per_user_usage.test.tsx | 100 ++++++++++++++++++ .../src/components/per_user_usage.tsx | 87 ++++++--------- 2 files changed, 135 insertions(+), 52 deletions(-) diff --git a/ui/litellm-dashboard/src/components/per_user_usage.test.tsx b/ui/litellm-dashboard/src/components/per_user_usage.test.tsx index 9cd199d786c..f92039e55b8 100644 --- a/ui/litellm-dashboard/src/components/per_user_usage.test.tsx +++ b/ui/litellm-dashboard/src/components/per_user_usage.test.tsx @@ -1,4 +1,5 @@ import { render, screen, fireEvent, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import { describe, it, expect, vi, beforeEach } from "vitest"; import PerUserUsage from "./per_user_usage"; import * as networking from "./networking"; @@ -94,6 +95,105 @@ describe("PerUserUsage", () => { expect(screen.getByText("u1")).toBeInTheDocument(); }); + describe("server pagination", () => { + const TOTAL_USERS = 120; + + const pageOfUsers = (page: number, pageSize: number): UserRow[] => { + const start = (page - 1) * pageSize; + const count = Math.max(0, Math.min(pageSize, TOTAL_USERS - start)); + return Array.from({ length: count }, (_, index) => userRow(`user-${start + index + 1}`, "curl/8.0", 5)); + }; + + beforeEach(() => { + mockPerUserAnalyticsCall.mockImplementation(async (_token, page = 1, pageSize = 50) => ({ + results: pageOfUsers(page, pageSize), + total_count: TOTAL_USERS, + page, + page_size: pageSize, + total_pages: Math.ceil(TOTAL_USERS / pageSize), + })); + }); + + const lastCall = () => mockPerUserAnalyticsCall.mock.calls[mockPerUserAnalyticsCall.mock.calls.length - 1]; + + it("renders every row the server returns and shows the range from total_count", async () => { + render(); + + expect(await screen.findByText("user-50")).toBeInTheDocument(); + expect(screen.getByText("user-1")).toBeInTheDocument(); + expect(screen.getAllByRole("row")).toHaveLength(51); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-50 of 120"); + expect(screen.getByTestId("pagination-prev")).toBeDisabled(); + expect(screen.getByTestId("pagination-next")).toBeEnabled(); + }); + + it("refetches the next page when Next is clicked", async () => { + const user = userEvent.setup(); + render(); + await screen.findByText("user-1"); + + await user.click(screen.getByTestId("pagination-next")); + + expect(await screen.findByText("user-51")).toBeInTheDocument(); + expect(lastCall()).toEqual(["test-token", 2, 50, undefined]); + expect(screen.queryByText("user-1")).not.toBeInTheDocument(); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 51-100 of 120"); + expect(screen.getByTestId("pagination-prev")).toBeEnabled(); + }); + + it("disables Next once the response says this is the last page", async () => { + const user = userEvent.setup(); + render(); + await screen.findByText("user-1"); + + await user.click(screen.getByTestId("pagination-last")); + + expect(await screen.findByText("user-120")).toBeInTheDocument(); + expect(lastCall()).toEqual(["test-token", 3, 50, undefined]); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 101-120 of 120"); + expect(screen.getByTestId("pagination-next")).toBeDisabled(); + }); + + it("refetches with the selected page size and goes back to the first page", async () => { + const user = userEvent.setup(); + render(); + await screen.findByText("user-1"); + await user.click(screen.getByTestId("pagination-next")); + await screen.findByText("user-51"); + + await user.click(screen.getByTestId("pagination-page-size")); + await user.click(await screen.findByRole("option", { name: "100" })); + + expect(await screen.findByText("user-100")).toBeInTheDocument(); + expect(lastCall()).toEqual(["test-token", 1, 100, undefined]); + expect(screen.getAllByRole("row")).toHaveLength(101); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-100 of 120"); + }); + + it("goes back to the first page when the tag filter changes", async () => { + const user = userEvent.setup(); + const { rerender } = render(); + await screen.findByText("user-1"); + await user.click(screen.getByTestId("pagination-next")); + await screen.findByText("user-51"); + + rerender(); + + await waitFor(() => { + expect(lastCall()).toEqual(["test-token", 1, 50, ["curl/8.0"]]); + }); + expect(await screen.findByText("user-1")).toBeInTheDocument(); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-50 of 120"); + }); + + it("does not request anything without an access token", () => { + render(); + + expect(mockPerUserAnalyticsCall).not.toHaveBeenCalled(); + expect(screen.getByText("No per-user usage data")).toBeInTheDocument(); + }); + }); + it("renders the usage distribution as a stacked bar chart with the explicit palette and users formatter", async () => { render(); diff --git a/ui/litellm-dashboard/src/components/per_user_usage.tsx b/ui/litellm-dashboard/src/components/per_user_usage.tsx index 6f29077de84..6e5cbb26014 100644 --- a/ui/litellm-dashboard/src/components/per_user_usage.tsx +++ b/ui/litellm-dashboard/src/components/per_user_usage.tsx @@ -1,8 +1,7 @@ -import React, { useState, useEffect } from "react"; -import type { ColumnDef } from "@tanstack/react-table"; +import React, { useState, useEffect, useCallback } from "react"; +import type { ColumnDef, OnChangeFn, PaginationState } from "@tanstack/react-table"; import { BarChart } from "@/components/shared/charts"; import { DataTable } from "@/components/shared/DataTable"; -import { Button } from "@/components/ui/button"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { perUserAnalyticsCall } from "./networking"; @@ -42,39 +41,38 @@ const PerUserUsage: React.FC = ({ accessToken, selectedTags, total_pages: 0, }); - const [currentPage, setCurrentPage] = useState(1); - - const fetchPerUserData = async () => { - if (!accessToken) return; - - try { - const response = await perUserAnalyticsCall( - accessToken, - currentPage, - 50, - selectedTags.length > 0 ? selectedTags : undefined, - ); - setPerUserData(response); - } catch (error) { - console.error("Failed to fetch per-user data:", error); - } - }; + const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 }); useEffect(() => { - fetchPerUserData(); - }, [accessToken, selectedTags, currentPage]); + setPagination((prev) => (prev.pageIndex === 0 ? prev : { ...prev, pageIndex: 0 })); + }, [selectedTags]); - const handleNextPage = () => { - if (currentPage < perUserData.total_pages) { - setCurrentPage(currentPage + 1); - } - }; + useEffect(() => { + if (!accessToken) return; - const handlePrevPage = () => { - if (currentPage > 1) { - setCurrentPage(currentPage - 1); - } - }; + let stale = false; + perUserAnalyticsCall( + accessToken, + pagination.pageIndex + 1, + pagination.pageSize, + selectedTags.length > 0 ? selectedTags : undefined, + ) + .then((response) => { + if (!stale) setPerUserData(response); + }) + .catch((error) => console.error("Failed to fetch per-user data:", error)); + + return () => { + stale = true; + }; + }, [accessToken, selectedTags, pagination]); + + const handlePaginationChange = useCallback>((updaterOrValue) => { + setPagination((prev) => { + const next = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue; + return next.pageSize === prev.pageSize ? next : { pageIndex: 0, pageSize: next.pageSize }; + }); + }, []); const columns: ColumnDef[] = [ { @@ -137,30 +135,15 @@ const PerUserUsage: React.FC = ({ accessToken, selectedTags, row.user_id} + paginationMode="server" + pagination={pagination} + onPaginationChange={handlePaginationChange} + rowCount={perUserData.total_count} noDataMessage="No per-user usage data" size="compact" /> - - {perUserData.results.length > 10 && ( -
-

Showing 10 of {perUserData.total_count} results

-
- - -
-
- )} {/* Tab 2: Usage Distribution Histogram */} From fd42bddee66d93bdab85145685b15e63daacb230 Mon Sep 17 00:00:00 2001 From: ryan Date: Thu, 3 Sep 2026 23:52:12 +0000 Subject: [PATCH 2/4] fix(ui): reset per-user usage page in the same render as the tag filter change Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .../src/components/per_user_usage.test.tsx | 4 ++++ ui/litellm-dashboard/src/components/per_user_usage.tsx | 10 ++++++---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/ui/litellm-dashboard/src/components/per_user_usage.test.tsx b/ui/litellm-dashboard/src/components/per_user_usage.test.tsx index f92039e55b8..3ce85580ca8 100644 --- a/ui/litellm-dashboard/src/components/per_user_usage.test.tsx +++ b/ui/litellm-dashboard/src/components/per_user_usage.test.tsx @@ -176,12 +176,16 @@ describe("PerUserUsage", () => { await screen.findByText("user-1"); await user.click(screen.getByTestId("pagination-next")); await screen.findByText("user-51"); + const callsBeforeTagChange = mockPerUserAnalyticsCall.mock.calls.length; rerender(); await waitFor(() => { expect(lastCall()).toEqual(["test-token", 1, 50, ["curl/8.0"]]); }); + expect(mockPerUserAnalyticsCall.mock.calls.slice(callsBeforeTagChange)).toEqual([ + ["test-token", 1, 50, ["curl/8.0"]], + ]); expect(await screen.findByText("user-1")).toBeInTheDocument(); expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-50 of 120"); }); diff --git a/ui/litellm-dashboard/src/components/per_user_usage.tsx b/ui/litellm-dashboard/src/components/per_user_usage.tsx index 6e5cbb26014..215a2032d4f 100644 --- a/ui/litellm-dashboard/src/components/per_user_usage.tsx +++ b/ui/litellm-dashboard/src/components/per_user_usage.tsx @@ -42,10 +42,12 @@ const PerUserUsage: React.FC = ({ accessToken, selectedTags, }); const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 }); + const [pagedTags, setPagedTags] = useState(selectedTags); - useEffect(() => { + if (pagedTags !== selectedTags) { + setPagedTags(selectedTags); setPagination((prev) => (prev.pageIndex === 0 ? prev : { ...prev, pageIndex: 0 })); - }, [selectedTags]); + } useEffect(() => { if (!accessToken) return; @@ -55,7 +57,7 @@ const PerUserUsage: React.FC = ({ accessToken, selectedTags, accessToken, pagination.pageIndex + 1, pagination.pageSize, - selectedTags.length > 0 ? selectedTags : undefined, + pagedTags.length > 0 ? pagedTags : undefined, ) .then((response) => { if (!stale) setPerUserData(response); @@ -65,7 +67,7 @@ const PerUserUsage: React.FC = ({ accessToken, selectedTags, return () => { stale = true; }; - }, [accessToken, selectedTags, pagination]); + }, [accessToken, pagedTags, pagination]); const handlePaginationChange = useCallback>((updaterOrValue) => { setPagination((prev) => { From 7fde31fe08c56778681901d5ff667bf821882e42 Mon Sep 17 00:00:00 2001 From: ryan Date: Fri, 4 Sep 2026 00:16:06 +0000 Subject: [PATCH 3/4] fix(ui): fall back to the last page when per-user usage shrinks under the current page Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .../src/components/per_user_usage.test.tsx | 36 +++++++++++++++---- .../src/components/per_user_usage.tsx | 6 +++- 2 files changed, 35 insertions(+), 7 deletions(-) diff --git a/ui/litellm-dashboard/src/components/per_user_usage.test.tsx b/ui/litellm-dashboard/src/components/per_user_usage.test.tsx index 3ce85580ca8..d5c2216dfd5 100644 --- a/ui/litellm-dashboard/src/components/per_user_usage.test.tsx +++ b/ui/litellm-dashboard/src/components/per_user_usage.test.tsx @@ -98,20 +98,24 @@ describe("PerUserUsage", () => { describe("server pagination", () => { const TOTAL_USERS = 120; - const pageOfUsers = (page: number, pageSize: number): UserRow[] => { + const pageOfUsers = (page: number, pageSize: number, total: number): UserRow[] => { const start = (page - 1) * pageSize; - const count = Math.max(0, Math.min(pageSize, TOTAL_USERS - start)); + const count = Math.max(0, Math.min(pageSize, total - start)); return Array.from({ length: count }, (_, index) => userRow(`user-${start + index + 1}`, "curl/8.0", 5)); }; - beforeEach(() => { + const serveUsers = (total: number) => { mockPerUserAnalyticsCall.mockImplementation(async (_token, page = 1, pageSize = 50) => ({ - results: pageOfUsers(page, pageSize), - total_count: TOTAL_USERS, + results: pageOfUsers(page, pageSize, total), + total_count: total, page, page_size: pageSize, - total_pages: Math.ceil(TOTAL_USERS / pageSize), + total_pages: Math.ceil(total / pageSize), })); + }; + + beforeEach(() => { + serveUsers(TOTAL_USERS); }); const lastCall = () => mockPerUserAnalyticsCall.mock.calls[mockPerUserAnalyticsCall.mock.calls.length - 1]; @@ -154,6 +158,26 @@ describe("PerUserUsage", () => { expect(screen.getByTestId("pagination-next")).toBeDisabled(); }); + it("falls back to the last existing page when the data shrinks under the current page", async () => { + const user = userEvent.setup(); + render(); + await screen.findByText("user-1"); + await user.click(screen.getByTestId("pagination-next")); + await screen.findByText("user-51"); + + serveUsers(60); + await user.click(screen.getByTestId("pagination-next")); + + expect(await screen.findByText("user-60")).toBeInTheDocument(); + expect(mockPerUserAnalyticsCall.mock.calls.slice(-2)).toEqual([ + ["test-token", 3, 50, undefined], + ["test-token", 2, 50, undefined], + ]); + expect(screen.getAllByRole("row")).toHaveLength(11); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 51-60 of 60"); + expect(screen.getByTestId("pagination-next")).toBeDisabled(); + }); + it("refetches with the selected page size and goes back to the first page", async () => { const user = userEvent.setup(); render(); diff --git a/ui/litellm-dashboard/src/components/per_user_usage.tsx b/ui/litellm-dashboard/src/components/per_user_usage.tsx index 215a2032d4f..57b1a926ec0 100644 --- a/ui/litellm-dashboard/src/components/per_user_usage.tsx +++ b/ui/litellm-dashboard/src/components/per_user_usage.tsx @@ -60,7 +60,11 @@ const PerUserUsage: React.FC = ({ accessToken, selectedTags, pagedTags.length > 0 ? pagedTags : undefined, ) .then((response) => { - if (!stale) setPerUserData(response); + if (stale) return; + setPerUserData(response); + if (response.total_pages > 0 && pagination.pageIndex >= response.total_pages) { + setPagination({ ...pagination, pageIndex: response.total_pages - 1 }); + } }) .catch((error) => console.error("Failed to fetch per-user data:", error)); From 3bdc5ecd0e2775ff7f79a7166f16f5e7cb746371 Mon Sep 17 00:00:00 2001 From: ryan-crabbe-berri Date: Fri, 4 Sep 2026 12:47:37 -0700 Subject: [PATCH 4/4] refactor(ui): drop the per-user usage page clamp now handled by the shared DataTable The shared DataTable clamps a server-mode page index whenever rowCount no longer reaches it (#39776), including the empty-dataset case this table's own clamp skipped because it required total_pages > 0. Remove the local clamp and cover the empty case through the component so the wiring into the shared behavior is what the tests prove --- .../src/components/per_user_usage.test.tsx | 24 +++++++++++++++++++ .../src/components/per_user_usage.tsx | 3 --- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/ui/litellm-dashboard/src/components/per_user_usage.test.tsx b/ui/litellm-dashboard/src/components/per_user_usage.test.tsx index d5c2216dfd5..30b3059b7d2 100644 --- a/ui/litellm-dashboard/src/components/per_user_usage.test.tsx +++ b/ui/litellm-dashboard/src/components/per_user_usage.test.tsx @@ -178,6 +178,30 @@ describe("PerUserUsage", () => { expect(screen.getByTestId("pagination-next")).toBeDisabled(); }); + it("goes back to the first page when the data disappears under the current page", async () => { + const user = userEvent.setup(); + render(); + await screen.findByText("user-1"); + await user.click(screen.getByTestId("pagination-next")); + await screen.findByText("user-51"); + + serveUsers(0); + await user.click(screen.getByTestId("pagination-next")); + + await waitFor(() => { + expect(lastCall()).toEqual(["test-token", 1, 50, undefined]); + }); + expect(mockPerUserAnalyticsCall.mock.calls.slice(-2)).toEqual([ + ["test-token", 3, 50, undefined], + ["test-token", 1, 50, undefined], + ]); + expect(screen.getByText("No per-user usage data")).toBeInTheDocument(); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("No results"); + expect(screen.getByText("Page 1 of 1")).toBeInTheDocument(); + expect(screen.getByTestId("pagination-first")).toBeDisabled(); + expect(screen.getByTestId("pagination-prev")).toBeDisabled(); + }); + it("refetches with the selected page size and goes back to the first page", async () => { const user = userEvent.setup(); render(); diff --git a/ui/litellm-dashboard/src/components/per_user_usage.tsx b/ui/litellm-dashboard/src/components/per_user_usage.tsx index 57b1a926ec0..f600cd6c45d 100644 --- a/ui/litellm-dashboard/src/components/per_user_usage.tsx +++ b/ui/litellm-dashboard/src/components/per_user_usage.tsx @@ -62,9 +62,6 @@ const PerUserUsage: React.FC = ({ accessToken, selectedTags, .then((response) => { if (stale) return; setPerUserData(response); - if (response.total_pages > 0 && pagination.pageIndex >= response.total_pages) { - setPagination({ ...pagination, pageIndex: response.total_pages - 1 }); - } }) .catch((error) => console.error("Failed to fetch per-user data:", error));