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