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) => {