diff --git a/litellm/proxy/proxy_server.py b/litellm/proxy/proxy_server.py index c43cc510990..1d3455615fd 100644 --- a/litellm/proxy/proxy_server.py +++ b/litellm/proxy/proxy_server.py @@ -13474,6 +13474,27 @@ def _is_auto_router_model(model: Mapping[str, object]) -> bool: return isinstance(litellm_model, str) and litellm_model.startswith("auto_router/") +def _model_in_access_group(model: Mapping[str, object], access_group: str) -> bool: + model_info: Final = model.get("model_info") + if not isinstance(model_info, Mapping): + return False + access_groups: Final = model_info.get("access_groups") + return isinstance(access_groups, (list, tuple)) and access_group in access_groups + + +def _matches_model_info_filters( + model: Mapping[str, object], + exclude_auto_routers: bool | None, + access_group: str | None, + wildcard_only: bool | None, +) -> bool: + if exclude_auto_routers is True and _is_auto_router_model(model): + return False + if isinstance(access_group, str) and not _model_in_access_group(model, access_group): + return False + return wildcard_only is not True or "*" in str(model.get("model_name") or "") + + def _paginate_models_response( all_models: list[dict[str, Any]], page: int, @@ -13784,6 +13805,14 @@ async def model_info_v2( "existing callers are unaffected" ), ), + access_group: str | None = fastapi.Query( + None, + description="Only return deployments whose `model_info.access_groups` contains this access group", + ), + wildcard_only: bool | None = fastapi.Query( + False, + description="Only return wildcard deployments, i.e. those whose `model_name` contains `*`", + ), ): """ Paginated model metadata for proxy deployments (pricing, provider, team access). @@ -13801,6 +13830,8 @@ async def model_info_v2( modelId: Return a single deployment by LiteLLM model id. teamId: Filter to models with direct access or team membership for this team id. sortBy / sortOrder: Sort by model_name, created_at, updated_at, costs, or status. + access_group: Only return deployments in this model access group. + wildcard_only: Only return deployments whose `model_name` contains `*`. Example request: ``` @@ -13954,8 +13985,9 @@ async def model_info_v2( # `is True` because direct-call tests bypass FastAPI, so the Query default arrives as a # truthy sentinel object rather than False. - if exclude_auto_routers is True: - all_models = [m for m in all_models if not _is_auto_router_model(m)] + all_models = [ + m for m in all_models if _matches_model_info_filters(m, exclude_auto_routers, access_group, wildcard_only) + ] # Update total count to include agents search_total_count = len(all_models) diff --git a/tests/test_litellm/proxy/proxy_server/test_routes_model_info.py b/tests/test_litellm/proxy/proxy_server/test_routes_model_info.py index cb38e7edbe2..4c141bcf698 100644 --- a/tests/test_litellm/proxy/proxy_server/test_routes_model_info.py +++ b/tests/test_litellm/proxy/proxy_server/test_routes_model_info.py @@ -452,3 +452,92 @@ async def test_model_info_v2_query_sentinel_does_not_filter(monkeypatch, mixed_a ) assert "tri-tier-router" in [m["model_name"] for m in resp["data"]] + + +# --------------------------------------------------------------------------- +# GET /v2/model/info?access_group / ?wildcard_only +# --------------------------------------------------------------------------- + + +@pytest.fixture +def access_group_router(monkeypatch): + """Router with one sales-team deployment, one wildcard sales-team deployment and one ungrouped one.""" + model_list = [ + { + "model_name": "gpt-4o-mini", + "litellm_params": {"model": "openai/gpt-4o-mini"}, + "model_info": {"id": "sales-1", "db_model": False, "access_groups": ["sales-team"]}, + }, + { + "model_name": "openai/*", + "litellm_params": {"model": "openai/*"}, + "model_info": {"id": "sales-wildcard", "db_model": False, "access_groups": ["sales-team", "eng"]}, + }, + { + "model_name": "claude-opus", + "litellm_params": {"model": "anthropic/claude-opus-4-6"}, + "model_info": {"id": "plain-1", "db_model": False}, + }, + ] + from unittest.mock import AsyncMock + + router = MagicMock() + router.model_list = model_list + monkeypatch.setattr(proxy_server, "llm_router", router) + monkeypatch.setattr(proxy_server, "llm_model_list", model_list) + monkeypatch.setattr(proxy_server, "prisma_client", MagicMock()) + monkeypatch.setattr(proxy_server, "user_model", None) + monkeypatch.setattr(proxy_server.proxy_config, "get_config", AsyncMock(return_value={})) + monkeypatch.setattr( + proxy_server, + "_apply_search_filter_to_models", + AsyncMock(side_effect=lambda all_models, **kw: (all_models, len(all_models))), + ) + monkeypatch.setattr(proxy_server, "_enrich_model_info_with_litellm_data", lambda model, **kw: model) + + import litellm.proxy.agent_endpoints.model_list_helpers as mlh + + monkeypatch.setattr(mlh, "append_agents_to_model_info", AsyncMock(side_effect=lambda models, **kw: models)) + yield router + + +def test_v2_model_info_without_new_filters_returns_everything(client, auth_as, access_group_router): + with auth_as(): + response = client.get("/v2/model/info") + payload = response.json() + assert payload["total_count"] == 3 + assert len(payload["data"]) == 3 + + +def test_v2_model_info_access_group_filters_rows_and_total(client, auth_as, access_group_router): + """The table pages off total_count, so the filter must shrink the total, not only the page.""" + with auth_as(): + response = client.get("/v2/model/info", params={"access_group": "sales-team"}) + payload = response.json() + assert _model_names(payload) == ["gpt-4o-mini", "openai/*"] + assert payload["total_count"] == 2 + + +def test_v2_model_info_unknown_access_group_is_empty(client, auth_as, access_group_router): + with auth_as(): + response = client.get("/v2/model/info", params={"access_group": "nobody"}) + payload = response.json() + assert payload["data"] == [] + assert payload["total_count"] == 0 + + +def test_v2_model_info_wildcard_only_filters_rows_and_total(client, auth_as, access_group_router): + with auth_as(): + response = client.get("/v2/model/info", params={"wildcard_only": "true"}) + payload = response.json() + assert _model_names(payload) == ["openai/*"] + assert payload["total_count"] == 1 + + +def test_v2_model_info_access_group_paginates_over_the_filtered_set(client, auth_as, access_group_router): + with auth_as(): + response = client.get("/v2/model/info", params={"access_group": "sales-team", "page": 2, "size": 1}) + payload = response.json() + assert _model_names(payload) == ["openai/*"] + assert payload["total_count"] == 2 + assert payload["total_pages"] == 2 diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/AgentsTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/AgentsTable.tsx index aceb07e2e9a..d737a9250eb 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/AgentsTable.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/AgentsTable.tsx @@ -72,6 +72,7 @@ const AgentsTable: React.FC = ({ return ( agent.agent_id || String(index)} sortingMode="client" diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_table.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_table.tsx index e6a14b2b2f4..bbab01e346d 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_table.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_table.tsx @@ -46,6 +46,7 @@ const GuardrailTable: React.FC = ({ return ( guardrail.guardrail_id || String(index)} sortingMode="client" diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.ts index a9f7c54698a..b3a783a71dc 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.ts @@ -39,6 +39,8 @@ export const useModelsInfo = ( sortOrder?: string, excludeAutoRouters: boolean = false, modelName?: string, + accessGroup?: string, + wildcardOnly: boolean = false, ) => { const { accessToken, userId, userRole } = useAuthorized(); return useQuery({ @@ -57,6 +59,8 @@ export const useModelsInfo = ( // Part of the key: callers that exclude auto-routers must not share a cache entry // with callers that keep them. ...(excludeAutoRouters && { excludeAutoRouters: "true" }), + ...(accessGroup && { accessGroup }), + ...(wildcardOnly && { wildcardOnly: "true" }), }, }), queryFn: async () => @@ -73,6 +77,8 @@ export const useModelsInfo = ( sortOrder, excludeAutoRouters, modelName, + accessGroup, + wildcardOnly, ), enabled: Boolean(accessToken && userId && userRole), }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/teams/useTeams.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/teams/useTeams.test.ts index fa3f15124cf..eccd8a80748 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/teams/useTeams.test.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/teams/useTeams.test.ts @@ -671,7 +671,7 @@ describe("useDeletedTeams", () => { it("should return deleted teams data when query is successful", async () => { (global.fetch as any).mockResolvedValue({ ok: true, - json: async () => ({ teams: mockDeletedTeams }), + json: async () => ({ teams: mockDeletedTeams, total: 2, page: 1, page_size: 10, total_pages: 1 }), }); const { result } = renderHook(() => useDeletedTeams(1, 10, {}), { wrapper }); @@ -684,10 +684,26 @@ describe("useDeletedTeams", () => { expect(result.current.isSuccess).toBe(true); }); - expect(result.current.data).toEqual(mockDeletedTeams); + expect(result.current.data).toEqual({ teams: mockDeletedTeams, total: 2 }); expect(result.current.error).toBeNull(); }); + it("should keep the server total so the table can paginate beyond the current page", async () => { + (global.fetch as any).mockResolvedValue({ + ok: true, + json: async () => ({ teams: mockDeletedTeams, total: 137, page: 1, page_size: 2, total_pages: 69 }), + }); + + const { result } = renderHook(() => useDeletedTeams(1, 2, {}), { wrapper }); + + await waitFor(() => { + expect(result.current.isSuccess).toBe(true); + }); + + expect(result.current.data?.total).toBe(137); + expect((global.fetch as any).mock.calls[0][0]).toContain("page_size=2"); + }); + it("should handle error when API call fails", async () => { (global.fetch as any).mockResolvedValue({ ok: false, @@ -744,7 +760,7 @@ describe("useDeletedTeams", () => { rerender({ page: 2 }); - expect(result.current.data).toEqual(mockDeletedTeams); + expect(result.current.data?.teams).toEqual(mockDeletedTeams); }); it("should pass options to API call", async () => { @@ -785,7 +801,7 @@ describe("useDeletedTeams", () => { expect(result.current.isSuccess).toBe(true); }); - expect(result.current.data).toEqual(mockDeletedTeams); + expect(result.current.data).toEqual({ teams: mockDeletedTeams, total: 2 }); expect(result.current.error).toBeNull(); }); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/teams/useTeams.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/teams/useTeams.ts index e209a1d7273..14e95bcd543 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/teams/useTeams.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/teams/useTeams.ts @@ -20,6 +20,11 @@ export interface DeletedTeam extends Team { deleted_by: string; } +export interface DeletedTeamsResponse { + teams: DeletedTeam[]; + total: number; +} + export interface TeamListCallOptions { organizationID?: string | null; teamID?: string | null; @@ -209,7 +214,7 @@ const deletedTeamListCall = async ( page: number, pageSize: number, options: TeamListCallOptions = {}, -) => { +): Promise => { /** * Get deleted teams from proxy */ @@ -251,14 +256,12 @@ const deletedTeamListCall = async ( throw new Error(errorMessage); } - const data = await response.json(); + const data: DeletedTeam[] | (Partial & { teams: DeletedTeam[] }) = await response.json(); - // Extract teams array from response if it's wrapped in a response object - // Otherwise return the data directly if it's already an array - if (data && typeof data === "object" && "teams" in data) { - return data.teams as DeletedTeam[]; + if (Array.isArray(data)) { + return { teams: data, total: data.length }; } - return data as DeletedTeam[]; + return { teams: data.teams, total: data.total ?? data.teams.length }; } catch (error) { console.error("Failed to list deleted teams:", error); throw error; @@ -270,10 +273,10 @@ export const useDeletedTeams = ( page: number, pageSize: number, options: TeamListCallOptions = {}, -): UseQueryResult => { +): UseQueryResult => { const { accessToken } = useAuthorized(); - return useQuery({ + return useQuery({ queryKey: deletedTeamKeys.list({ page, limit: pageSize, ...options }), queryFn: async () => await deletedTeamListCall(accessToken!, page, pageSize, options), enabled: Boolean(accessToken), diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.tsx index c637655d665..60a1da40d08 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.tsx @@ -451,6 +451,7 @@ export function MCPToolsetsTab({ accessToken, userRole }: MCPToolsetsTabProps) { toolset.toolset_id || String(index)} sortingMode="client" diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx index 65faa85e29e..7e47be3f5d1 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx @@ -34,6 +34,8 @@ interface ModelsInfoArgs { sortBy?: string; sortOrder?: string; modelName?: string; + accessGroup?: string; + wildcardOnly?: boolean; } const modelsInfoCalls: ModelsInfoArgs[] = []; @@ -50,12 +52,24 @@ type UseModelsInfoArgs = [ sortOrder?: string, excludeAutoRouters?: boolean, modelName?: string, + accessGroup?: string, + wildcardOnly?: boolean, ]; vi.mock("../../hooks/models/useModels", () => ({ useModelsInfo: (...args: UseModelsInfoArgs) => { - const [page, size, search, , teamId, sortBy, sortOrder, , modelName] = args; - const call: ModelsInfoArgs = { page, size, search, teamId, sortBy, sortOrder, modelName }; + const [page, size, search, , teamId, sortBy, sortOrder, , modelName, accessGroup, wildcardOnly] = args; + const call: ModelsInfoArgs = { + page, + size, + search, + teamId, + sortBy, + sortOrder, + modelName, + accessGroup, + wildcardOnly, + }; modelsInfoCalls.push(call); return { ...modelsInfoResult, refetch: mockRefetch }; }, @@ -254,13 +268,38 @@ describe("AllModelsTab", () => { }); }); - it("filters the fetched page down to the selected model group", () => { - setModelsInfo([makeRow(), { ...makeRow(), model_name: "claude-opus" }], 2); + it("renders every row the server returned for the selected model group so rows match the footer total", () => { + setModelsInfo([makeRow(), { ...makeRow({ model_info: { id: "model-2" } }), model_name: "claude-opus" }], 2); render(); const table = screen.getByRole("table"); expect(within(table).getByText("claude-opus")).toBeInTheDocument(); - expect(within(table).queryByText("gpt-4")).not.toBeInTheDocument(); + expect(within(table).getByText("gpt-4")).toBeInTheDocument(); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-2 of 2"); + }); + + it("asks the server for wildcard deployments instead of hiding rows client-side", () => { + setModelsInfo([makeRow(), { ...makeRow({ model_info: { id: "model-2" } }), model_name: "openai/*" }], 2); + render(); + + expect(lastModelsInfoCall().wildcardOnly).toBe(true); + expect(within(screen.getByRole("table")).getByText("gpt-4")).toBeInTheDocument(); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-2 of 2"); + }); + + it("asks the server for the selected access group instead of hiding rows client-side", async () => { + const user = userEvent.setup(); + render(); + expect(lastModelsInfoCall().wildcardOnly).toBe(false); + + await user.click(screen.getByTestId("datatable-filters-trigger")); + await user.click(await screen.findByPlaceholderText("Filter by Model Access Group")); + await user.click(await screen.findByRole("option", { name: "sales-team" })); + await user.click(screen.getByTestId("filter-drawer-apply")); + + await waitFor(() => expect(lastModelsInfoCall().accessGroup).toBe("sales-team")); + expect(within(screen.getByRole("table")).getByText("gpt-4")).toBeInTheDocument(); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-1 of 1"); }); it("asks the server for the exact selected model group so deployments beyond the first page are found", () => { diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.tsx index be2cf22d71a..3b4058a28fa 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.tsx @@ -86,6 +86,11 @@ const AllModelsTab = ({ selectedModelGroup !== ALL_MODEL_GROUPS_VALUE && selectedModelGroup !== WILDCARD_MODEL_GROUP_VALUE; const modelNameForQuery = isConcreteModelGroup ? selectedModelGroup ?? undefined : undefined; + const accessGroupForQuery = + selectedModelAccessGroupFilter && selectedModelAccessGroupFilter !== ALL_MODEL_GROUPS_VALUE + ? selectedModelAccessGroupFilter + : undefined; + const wildcardOnlyForQuery = selectedModelGroup === WILDCARD_MODEL_GROUP_VALUE; const sortBy = useMemo(() => { if (sorting.length === 0) return undefined; @@ -114,6 +119,8 @@ const AllModelsTab = ({ // lists and manages them. Excluded server-side so total_count stays honest. true, modelNameForQuery, + accessGroupForQuery, + wildcardOnlyForQuery, ); const isLoading = isLoadingModelsInfo || isLoadingModelCostMap; @@ -129,32 +136,11 @@ const AllModelsTab = ({ [modelCostMapData], ); - const modelData = useMemo(() => { + const modelData = useMemo<{ data: ModelData[] }>(() => { if (!rawModelData) return { data: [] }; return transformModelData(rawModelData, getProviderFromModel); }, [rawModelData, getProviderFromModel]); - const filteredData = useMemo(() => { - if (!modelData || !modelData.data || modelData.data.length === 0) { - return []; - } - - return modelData.data.filter((model: ModelData) => { - const modelNameMatch = - selectedModelGroup === ALL_MODEL_GROUPS_VALUE || - model.model_name === selectedModelGroup || - !selectedModelGroup || - (selectedModelGroup === WILDCARD_MODEL_GROUP_VALUE && model.model_name?.includes("*")); - - const accessGroupMatch = - selectedModelAccessGroupFilter === ALL_MODEL_GROUPS_VALUE || - model.model_info["access_groups"]?.includes(selectedModelAccessGroupFilter ?? "") || - !selectedModelAccessGroupFilter; - - return modelNameMatch && accessGroupMatch; - }); - }, [modelData, selectedModelGroup, selectedModelAccessGroupFilter]); - const columnFilters = useMemo( () => [ @@ -270,7 +256,7 @@ const AllModelsTab = ({
group.access_group} sortingMode="client" diff --git a/ui/litellm-dashboard/src/app/(dashboard)/organizations/_components/OrganizationsTable.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/organizations/_components/OrganizationsTable.test.tsx index 1ac33a27186..4bf465b847b 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/organizations/_components/OrganizationsTable.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/organizations/_components/OrganizationsTable.test.tsx @@ -192,6 +192,23 @@ describe("OrganizationsTable", () => { expect(screen.queryByText("ShouldNotShow")).not.toBeInTheDocument(); }); + it("pages long lists client-side with the shared size selector and footer", async () => { + const user = userEvent.setup(); + const organizations = Array.from({ length: 30 }, (_, index) => + makeOrganization({ organization_id: `org-${index}`, organization_alias: `Org ${index}` }), + ); + render(); + + expect(screen.getAllByRole("row")).toHaveLength(26); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-25 of 30"); + + await user.click(screen.getByTestId("pagination-page-size")); + await user.click(await screen.findByRole("option", { name: "50" })); + + expect(screen.getAllByRole("row")).toHaveLength(31); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-30 of 30"); + }); + it("uses a search-aware empty state", () => { const { rerender } = render(); expect(screen.getByText("No organizations yet")).toBeInTheDocument(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/organizations/_components/OrganizationsTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/organizations/_components/OrganizationsTable.tsx index 8e68a57d2f7..dbf516d75ae 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/organizations/_components/OrganizationsTable.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/organizations/_components/OrganizationsTable.tsx @@ -59,6 +59,7 @@ const OrganizationsTable: React.FC = ({ return ( organization.organization_id || String(index)} sortingMode="client" diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/AttachmentTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/AttachmentTable.tsx index bd8458e6f96..a432a53bca4 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/AttachmentTable.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/AttachmentTable.tsx @@ -50,6 +50,7 @@ const AttachmentTable: React.FC = ({ return ( row.attachment_id} sortingMode="client" diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/PolicyTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/PolicyTable.tsx index 3405ac6b6bb..d78ec28c486 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/PolicyTable.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/PolicyTable.tsx @@ -71,6 +71,7 @@ const PolicyTable: React.FC = ({ return ( `${row.primaryPolicy.definition_location ?? "db"}:${row.policy_name}`} sortingMode="client" diff --git a/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/PromptTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/PromptTable.tsx index c766042ac44..e810c3622d1 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/PromptTable.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/PromptTable.tsx @@ -73,6 +73,7 @@ const PromptTable: React.FC = ({ return ( prompt.prompt_id ? `${prompt.prompt_id}::${prompt.environment || "development"}` : String(index) diff --git a/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchToolTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchToolTable.tsx index 70fc6a376df..f60f4f3d1da 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchToolTable.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchToolTable.tsx @@ -50,6 +50,7 @@ const SearchToolTable: React.FC = ({ return ( searchToolKey(tool) || String(index)} sortingMode="client" diff --git a/ui/litellm-dashboard/src/app/(dashboard)/skills/_components/PluginTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/skills/_components/PluginTable.tsx index c581b0dfdeb..1b1ccb0932a 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/skills/_components/PluginTable.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/skills/_components/PluginTable.tsx @@ -42,6 +42,7 @@ const PluginTable: React.FC = ({ pluginsList, isLoading, onDel return ( plugin.id || String(index)} sortingMode="client" diff --git a/ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/TagTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/TagTable.tsx index 488190a0fdf..076166ac827 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/TagTable.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/TagTable.tsx @@ -39,6 +39,7 @@ const TagTable: React.FC = ({ data, onEdit, onDelete, onSelectTag return ( tag.name || String(index)} sortingMode="client" diff --git a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/IndexesTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/IndexesTable.tsx index 927fd48acb6..a0b0c02f99d 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/IndexesTable.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/IndexesTable.tsx @@ -46,6 +46,7 @@ const IndexesTable: React.FC = ({ return ( row.id || String(index)} sortingMode="client" diff --git a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreTable.tsx index 2f8508dc7c6..32e7bc2324d 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreTable.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreTable.tsx @@ -41,6 +41,7 @@ const VectorStoreTable: React.FC = ({ data, onView, onEdi return ( vectorStore.vector_store_id || String(index)} sortingMode="client" diff --git a/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx b/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx index 475e3dcd70b..5f6f26bd16c 100644 --- a/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx +++ b/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx @@ -474,6 +474,7 @@ const ModelHubTable: React.FC = ({ accessToken, publicPage, {/* Model Table */} model.model_group || String(index)} sortingMode="client" @@ -540,6 +541,7 @@ const ModelHubTable: React.FC = ({ accessToken, publicPage, {/* Agent Table */} agent.agent_id || agent.name || String(index)} sortingMode="client" @@ -581,6 +583,7 @@ const ModelHubTable: React.FC = ({ accessToken, publicPage, {/* MCP Server Table */} server.server_id || String(index)} sortingMode="client" diff --git a/ui/litellm-dashboard/src/components/AIHub/SkillHubDashboard.tsx b/ui/litellm-dashboard/src/components/AIHub/SkillHubDashboard.tsx index 992ef49742d..9cede3b4497 100644 --- a/ui/litellm-dashboard/src/components/AIHub/SkillHubDashboard.tsx +++ b/ui/litellm-dashboard/src/components/AIHub/SkillHubDashboard.tsx @@ -162,6 +162,7 @@ const SkillHubDashboard: React.FC = ({
skill.id || String(index)} sortingMode="client" diff --git a/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsPage.test.tsx b/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsPage.test.tsx index 6bf5d1caf61..952d8764463 100644 --- a/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsPage.test.tsx +++ b/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsPage.test.tsx @@ -1,4 +1,5 @@ -import { screen } from "@testing-library/react"; +import { fireEvent, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import { vi, it, expect, beforeEach, MockedFunction } from "vitest"; import { renderWithProviders } from "../../../tests/test-utils"; import DeletedTeamsPage from "./DeletedTeamsPage"; @@ -31,7 +32,7 @@ beforeEach(() => { vi.clearAllMocks(); mockUseDeletedTeams.mockReturnValue({ - data: [mockDeletedTeam], + data: { teams: [mockDeletedTeam], total: 1 }, isLoading: false, } as unknown as ReturnType); }); @@ -42,6 +43,49 @@ it("should render DeletedTeamsPage component", () => { expect(screen.getByText("Test Team")).toBeInTheDocument(); }); +it("requests the first page of 25 deleted teams and shows the server total in the footer", () => { + mockUseDeletedTeams.mockReturnValue({ + data: { teams: [mockDeletedTeam], total: 137 }, + isLoading: false, + } as unknown as ReturnType); + + renderWithProviders(); + + expect(mockUseDeletedTeams).toHaveBeenLastCalledWith(1, 25); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-25 of 137"); + expect(screen.getByTestId("pagination-next")).toBeEnabled(); +}); + +it("requests the next page from the server when Next is clicked", () => { + mockUseDeletedTeams.mockReturnValue({ + data: { teams: [mockDeletedTeam], total: 137 }, + isLoading: false, + } as unknown as ReturnType); + + renderWithProviders(); + fireEvent.click(screen.getByTestId("pagination-next")); + + expect(mockUseDeletedTeams).toHaveBeenLastCalledWith(2, 25); +}); + +it("offers the shared page sizes and refetches with the selected one", async () => { + const user = userEvent.setup(); + mockUseDeletedTeams.mockReturnValue({ + data: { teams: [mockDeletedTeam], total: 137 }, + isLoading: false, + } as unknown as ReturnType); + + renderWithProviders(); + await user.click(screen.getByTestId("pagination-page-size")); + + const options = await screen.findAllByRole("option"); + expect(options.map((option) => option.textContent)).toEqual(["25", "50", "100"]); + + await user.click(screen.getByRole("option", { name: "100" })); + + expect(mockUseDeletedTeams).toHaveBeenLastCalledWith(1, 100); +}); + it("should show the enterprise notice for a non-premium user", () => { renderWithProviders(); diff --git a/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsPage.tsx b/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsPage.tsx index eab150d6ab5..8c3aac2cac7 100644 --- a/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsPage.tsx +++ b/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsPage.tsx @@ -1,13 +1,20 @@ "use client"; +import { PaginationState } from "@tanstack/react-table"; import { Info } from "lucide-react"; +import { useState } from "react"; import { Alert, AlertDescription, AlertTitle } from "@/components/shared/Alert"; +import { DEFAULT_PAGE_SIZE_OPTIONS } from "@/components/shared/DataTable"; import { useDeletedTeams } from "@/app/(dashboard)/hooks/teams/useTeams"; import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; import { DeletedTeamsTable } from "./DeletedTeamsTable/DeletedTeamsTable"; export default function DeletedTeamsPage() { const { premiumUser } = useAuthorized(); - const { data: teamsData, isLoading } = useDeletedTeams(1, 100); + const [pagination, setPagination] = useState({ + pageIndex: 0, + pageSize: DEFAULT_PAGE_SIZE_OPTIONS[0], + }); + const { data: teamsData, isLoading } = useDeletedTeams(pagination.pageIndex + 1, pagination.pageSize); return (
@@ -20,7 +27,13 @@ export default function DeletedTeamsPage() { )} - +
); } diff --git a/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.test.tsx b/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.test.tsx index c0cc5a342a8..e166f6b0d1b 100644 --- a/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.test.tsx +++ b/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.test.tsx @@ -22,12 +22,19 @@ const makeDeletedTeam = (overrides: Partial = {}): DeletedTeam => ( ...overrides, }); +const paginationProps = { + pagination: { pageIndex: 0, pageSize: 25 }, + onPaginationChange: vi.fn(), +}; + beforeEach(() => { vi.clearAllMocks(); }); it("should display team information", () => { - renderWithProviders(); + renderWithProviders( + , + ); expect(screen.getByText("Test Team")).toBeInTheDocument(); expect(screen.getByText("team-1")).toBeInTheDocument(); @@ -39,7 +46,7 @@ it("should sort teams by deleted_at descending by default", () => { makeDeletedTeam({ team_id: "team-old", team_alias: "older-team", deleted_at: "2024-01-01T10:00:00Z" }), makeDeletedTeam({ team_id: "team-new", team_alias: "newer-team", deleted_at: "2024-06-01T10:00:00Z" }), ]; - renderWithProviders(); + renderWithProviders(); const rows = screen.getAllByRole("row").slice(1); expect(within(rows[0]).getByText("newer-team")).toBeInTheDocument(); @@ -47,13 +54,30 @@ it("should sort teams by deleted_at descending by default", () => { }); it("should show skeleton rows when loading", () => { - renderWithProviders(); + renderWithProviders(); expect(screen.getAllByTestId("skeleton-row").length).toBeGreaterThan(0); }); it("should show the empty state when there are no deleted teams", () => { - renderWithProviders(); + renderWithProviders(); expect(screen.getByText("No deleted teams found")).toBeInTheDocument(); }); + +it("renders the shared pagination footer with the server row count", () => { + renderWithProviders( + , + ); + + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 101-137 of 137"); + expect(screen.getByTestId("pagination-page-size")).toHaveTextContent("50"); + expect(screen.getByTestId("pagination-prev")).toBeEnabled(); + expect(screen.getByTestId("pagination-next")).toBeDisabled(); +}); diff --git a/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.tsx b/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.tsx index 9578a52453f..c7e759754b8 100644 --- a/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.tsx +++ b/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.tsx @@ -1,6 +1,6 @@ "use client"; -import { SortingState } from "@tanstack/react-table"; +import { OnChangeFn, PaginationState, SortingState } from "@tanstack/react-table"; import { Inbox } from "lucide-react"; import { useMemo, useState } from "react"; @@ -12,6 +12,9 @@ import { getDeletedTeamsTableColumns } from "./DeletedTeamsTableColumns"; interface DeletedTeamsTableProps { teams: DeletedTeam[]; isLoading: boolean; + pagination: PaginationState; + onPaginationChange: OnChangeFn; + rowCount: number; } const DEFAULT_SORTING: SortingState = [{ id: "deleted_at", desc: true }]; @@ -28,7 +31,13 @@ function EmptyState() { ); } -export function DeletedTeamsTable({ teams, isLoading }: DeletedTeamsTableProps) { +export function DeletedTeamsTable({ + teams, + isLoading, + pagination, + onPaginationChange, + rowCount, +}: DeletedTeamsTableProps) { const [sorting, setSorting] = useState(DEFAULT_SORTING); const columns = useMemo(() => getDeletedTeamsTableColumns(), []); @@ -41,6 +50,10 @@ export function DeletedTeamsTable({ teams, isLoading }: DeletedTeamsTableProps) sortingMode="client" sorting={sorting} onSortingChange={setSorting} + paginationMode="server" + pagination={pagination} + onPaginationChange={onPaginationChange} + rowCount={rowCount} isLoading={isLoading} loadingMessage="Loading deleted teams…" noDataMessage={} diff --git a/ui/litellm-dashboard/src/components/PassThroughSettings/PassThroughEndpointsTable.tsx b/ui/litellm-dashboard/src/components/PassThroughSettings/PassThroughEndpointsTable.tsx index 754e7ff68dd..35f0bd4bc62 100644 --- a/ui/litellm-dashboard/src/components/PassThroughSettings/PassThroughEndpointsTable.tsx +++ b/ui/litellm-dashboard/src/components/PassThroughSettings/PassThroughEndpointsTable.tsx @@ -41,6 +41,7 @@ export function PassThroughEndpointsTable({ return ( endpoint.id || endpoint.path || String(index)} isLoading={isLoading} diff --git a/ui/litellm-dashboard/src/components/model_add/CredentialsTable.tsx b/ui/litellm-dashboard/src/components/model_add/CredentialsTable.tsx index 33d63e87a5b..835cd57ae92 100644 --- a/ui/litellm-dashboard/src/components/model_add/CredentialsTable.tsx +++ b/ui/litellm-dashboard/src/components/model_add/CredentialsTable.tsx @@ -48,6 +48,7 @@ const CredentialsTable: React.FC = ({ return ( credential.credential_name || String(index)} sortingMode="client" diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index 1384679a88a..8787b8111c6 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/ui/litellm-dashboard/src/components/networking.tsx @@ -1692,6 +1692,8 @@ export const modelInfoCall = async ( sortOrder?: string, excludeAutoRouters?: boolean, modelName?: string, + accessGroup?: string, + wildcardOnly?: boolean, ) => { /** * Get all models on proxy @@ -1723,6 +1725,12 @@ export const modelInfoCall = async ( if (excludeAutoRouters) { params.append("exclude_auto_routers", "true"); } + if (accessGroup && accessGroup.trim()) { + params.append("access_group", accessGroup.trim()); + } + if (wildcardOnly) { + params.append("wildcard_only", "true"); + } if (params.toString()) { url += `?${params.toString()}`; } 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..5cd0591bb15 100644 --- a/ui/litellm-dashboard/src/components/per_user_usage.test.tsx +++ b/ui/litellm-dashboard/src/components/per_user_usage.test.tsx @@ -78,6 +78,25 @@ describe("PerUserUsage", () => { }); }); + it("shows every fetched row with a footer that matches the server total and page size", async () => { + const results = Array.from({ length: 25 }, (_, index) => userRow(`user-${index}`, "curl/8.0", index)); + mockPerUserAnalyticsCall.mockResolvedValue({ ...mockResponse, results, total_count: 60, total_pages: 3 }); + render(); + + await waitFor(() => { + expect(screen.getByText("user-24")).toBeInTheDocument(); + }); + + expect(mockPerUserAnalyticsCall).toHaveBeenLastCalledWith("test-token", 1, 25, undefined); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-25 of 60"); + + fireEvent.click(screen.getByTestId("pagination-next")); + + await waitFor(() => { + expect(mockPerUserAnalyticsCall).toHaveBeenLastCalledWith("test-token", 2, 25, undefined); + }); + }); + it("keeps both tab panels mounted so switching tabs does not reset their state", 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..5bdf02e61ca 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 type { ColumnDef, PaginationState } from "@tanstack/react-table"; import { BarChart } from "@/components/shared/charts"; -import { DataTable } from "@/components/shared/DataTable"; -import { Button } from "@/components/ui/button"; +import { DataTable, DEFAULT_PAGE_SIZE_OPTIONS } from "@/components/shared/DataTable"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { perUserAnalyticsCall } from "./networking"; @@ -42,7 +41,10 @@ const PerUserUsage: React.FC = ({ accessToken, selectedTags, total_pages: 0, }); - const [currentPage, setCurrentPage] = useState(1); + const [pagination, setPagination] = useState({ + pageIndex: 0, + pageSize: DEFAULT_PAGE_SIZE_OPTIONS[0], + }); const fetchPerUserData = async () => { if (!accessToken) return; @@ -50,8 +52,8 @@ const PerUserUsage: React.FC = ({ accessToken, selectedTags, try { const response = await perUserAnalyticsCall( accessToken, - currentPage, - 50, + pagination.pageIndex + 1, + pagination.pageSize, selectedTags.length > 0 ? selectedTags : undefined, ); setPerUserData(response); @@ -62,19 +64,7 @@ const PerUserUsage: React.FC = ({ accessToken, selectedTags, useEffect(() => { fetchPerUserData(); - }, [accessToken, selectedTags, currentPage]); - - const handleNextPage = () => { - if (currentPage < perUserData.total_pages) { - setCurrentPage(currentPage + 1); - } - }; - - const handlePrevPage = () => { - if (currentPage > 1) { - setCurrentPage(currentPage - 1); - } - }; + }, [accessToken, selectedTags, pagination.pageIndex, pagination.pageSize]); const columns: ColumnDef[] = [ { @@ -137,30 +127,15 @@ const PerUserUsage: React.FC = ({ accessToken, selectedTags, row.user_id} + paginationMode="server" + pagination={pagination} + onPaginationChange={setPagination} + 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 */} diff --git a/ui/litellm-dashboard/src/components/public_model_hub.tsx b/ui/litellm-dashboard/src/components/public_model_hub.tsx index f6364b5d9d1..546c3b4e018 100644 --- a/ui/litellm-dashboard/src/components/public_model_hub.tsx +++ b/ui/litellm-dashboard/src/components/public_model_hub.tsx @@ -587,6 +587,7 @@ const PublicModelHub: React.FC = ({ accessToken, isEmbedded model.model_group || String(index)} sortingMode="client" @@ -656,6 +657,7 @@ const PublicModelHub: React.FC = ({ accessToken, isEmbedded agent.name || String(index)} sortingMode="client" @@ -722,6 +724,7 @@ const PublicModelHub: React.FC = ({ accessToken, isEmbedded server.server_id || String(index)} sortingMode="client" diff --git a/ui/litellm-dashboard/src/components/routing_groups/RoutingGroupsTable.tsx b/ui/litellm-dashboard/src/components/routing_groups/RoutingGroupsTable.tsx index fce887fc63b..1d2ef75361f 100644 --- a/ui/litellm-dashboard/src/components/routing_groups/RoutingGroupsTable.tsx +++ b/ui/litellm-dashboard/src/components/routing_groups/RoutingGroupsTable.tsx @@ -64,6 +64,7 @@ const RoutingGroupsTable: React.FC = ({ return ( group.group_name} sortingMode="client" diff --git a/ui/litellm-dashboard/src/components/team/AvailableTeamsTable.tsx b/ui/litellm-dashboard/src/components/team/AvailableTeamsTable.tsx index 6719cc09780..11c430d05d8 100644 --- a/ui/litellm-dashboard/src/components/team/AvailableTeamsTable.tsx +++ b/ui/litellm-dashboard/src/components/team/AvailableTeamsTable.tsx @@ -46,6 +46,7 @@ const AvailableTeamsTable: React.FC = ({ teams, isLoad return ( team.team_id || String(index)} sortingMode="client" diff --git a/ui/litellm-dashboard/src/components/view_logs/RequestLogsPanel.test.tsx b/ui/litellm-dashboard/src/components/view_logs/RequestLogsPanel.test.tsx index be0d0049c13..b10b2584548 100644 --- a/ui/litellm-dashboard/src/components/view_logs/RequestLogsPanel.test.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/RequestLogsPanel.test.tsx @@ -148,13 +148,60 @@ describe("RequestLogsPanel", () => { }); describe("server-grouped session pagination (#38060)", () => { - it("requests session-grouped pages of 10 rows by default without a cursor", async () => { + it("requests session-grouped pages of 25 rows by default without a cursor", async () => { renderPanel(); await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalled()); expect(lastCall()?.params?.group_by_session).toBe(true); expect(lastCall()?.params?.session_cursor).toBeUndefined(); - expect(lastCall()?.page_size).toBe(10); + expect(lastCall()?.page_size).toBe(25); + }); + + it("offers the same page sizes as the other tables", async () => { + const user = userEvent.setup(); + respondWith([logEntry({ request_id: "req-a" })]); + renderPanel(); + + await waitFor(() => expect(row("req-a")).not.toBeNull()); + await user.click(screen.getByTestId("pagination-page-size")); + + const options = await screen.findAllByRole("option"); + expect(options.map((option) => option.textContent)).toEqual(["25", "50", "100"]); + }); + + it("counts the rendered rows in the footer instead of the server's session total", async () => { + vi.mocked(uiSpendLogsCall).mockResolvedValue({ + data: [logEntry({ request_id: "req-a" }), logEntry({ request_id: "req-b" }), logEntry({ request_id: "req-c" })], + total: 40, + page: 1, + page_size: 25, + total_pages: 2, + next_session_cursor: null, + has_more: false, + }); + renderPanel(); + + await waitFor(() => expect(row("req-a")).not.toBeNull()); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-3 of 3"); + expect(screen.getByTestId("pagination-next")).toBeDisabled(); + }); + + it("keeps Next enabled from the server total while more session pages remain", async () => { + const firstPage = Array.from({ length: 25 }, (_, index) => logEntry({ request_id: `req-${index}` })); + vi.mocked(uiSpendLogsCall).mockResolvedValue({ + data: firstPage, + total: 80, + page: 1, + page_size: 25, + total_pages: 4, + next_session_cursor: "2026-07-07 09:50:13|key-1|sess-1", + has_more: true, + }); + renderPanel(); + + await waitFor(() => expect(row("req-0")).not.toBeNull()); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-25 of 80"); + expect(screen.getByTestId("pagination-next")).toBeEnabled(); }); it("renders every row the server returns without client-side collapsing", async () => { diff --git a/ui/litellm-dashboard/src/components/view_logs/RequestLogsPanel.tsx b/ui/litellm-dashboard/src/components/view_logs/RequestLogsPanel.tsx index 9b99c6af923..6e984297bf2 100644 --- a/ui/litellm-dashboard/src/components/view_logs/RequestLogsPanel.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/RequestLogsPanel.tsx @@ -6,13 +6,13 @@ import type { ColumnFiltersState, OnChangeFn, PaginationState, SortingState } fr import moment from "moment"; import { useCallback, useEffect, useMemo, useState } from "react"; +import { DEFAULT_PAGE_SIZE_OPTIONS } from "@/components/shared/DataTable"; import { AutoRouterModelGroupsProvider } from "@/components/shared/table_cells"; import { DEBOUNCE_WAIT_MS } from "@/utils/debounceConstants"; import type { KeyResponse } from "../key_team_helpers/key_list"; import { keyInfoV1Call, uiSpendLogsCall } from "../networking"; import KeyInfoView from "../templates/key_info_view"; import type { LogEntry } from "./columns"; -import { LOGS_PAGE_SIZE_OPTIONS } from "./constants"; import { DEFAULT_LOGS_SORTING, formatLogsWindow, @@ -26,7 +26,7 @@ import { LogDetailsDrawer } from "./LogDetailsDrawer"; import { LiveTailBanner, LogsTableToolbar } from "./LogsTableToolbar"; import { RequestLogsTable } from "./RequestLogsTable"; -const PAGE_SIZE = LOGS_PAGE_SIZE_OPTIONS[0]; +const PAGE_SIZE = DEFAULT_PAGE_SIZE_OPTIONS[0]; const DEFAULT_INTERVAL = { value: 24, unit: "hours" }; interface RequestLogsPanelProps { @@ -166,6 +166,10 @@ export default function RequestLogsPanel({ accessToken, token, userRole, userID, const isDrawerOpen = displayLog !== null || displaySessionId !== null; const rows: LogEntry[] = filteredLogs.data; + const rowsThroughThisPage = pagination.pageIndex * pagination.pageSize + rows.length; + const isLastPage = + filteredLogs.has_more === false || (filteredLogs.has_more === undefined && rows.length < pagination.pageSize); + const rowCount = isLastPage ? rowsThroughThisPage : Math.max(filteredLogs.total, rowsThroughThisPage); const handleSearchChange = useCallback((value: string) => { setColumnFilters((previous) => { @@ -290,7 +294,7 @@ export default function RequestLogsPanel({ accessToken, token, userRole, userID,