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 a7ead51bdc5..f2c4337ce40 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 @@ -17,6 +17,7 @@ import { createParser, parseAsInteger, parseAsString, parseAsStringLiteral, useQ import { useCallback, useMemo, useState } from "react"; import { useModelsInfo } from "../../hooks/models/useModels"; +import { routingStatusToBlocked } from "../utils/routingStatus"; import { transformModelData } from "../utils/modelDataTransformer"; import { ALL_MODEL_GROUPS_VALUE, @@ -92,8 +93,7 @@ const AllModelsTab = ({ const selectedModelAccessGroupFilter = tableState.access_group || null; const routingStatusFilter = tableState.status === "active" || tableState.status === "paused" ? tableState.status : null; - const blockedForQuery: boolean | undefined = - routingStatusFilter === null ? undefined : routingStatusFilter === "active"; + const blockedForQuery: boolean | undefined = routingStatusToBlocked(routingStatusFilter); const pagination = useMemo( () => ({ pageIndex: tableState.page - 1, pageSize: tableState.page_size }), [tableState.page, tableState.page_size], diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelsTableColumns.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelsTableColumns.tsx index ccd12474f2e..3f3708e0a75 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelsTableColumns.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelsTableColumns.tsx @@ -461,8 +461,8 @@ export const getModelsTableColumns = ({ meta: { title: "Status", skeleton: "badge" }, header: ({ column }) => , enableSorting: true, - size: 110, - minSize: 90, + size: 90, + minSize: 70, cell: ({ row }) => , }, { diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/utils/routingStatus.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/utils/routingStatus.test.ts new file mode 100644 index 00000000000..fc93b99cc6c --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/utils/routingStatus.test.ts @@ -0,0 +1,16 @@ +import { describe, expect, it } from "vitest"; + +import { routingStatusToBlocked } from "./routingStatus"; + +describe("routingStatusToBlocked", () => { + it.each([ + ["active", false], + ["paused", true], + ] as const)("maps %s to blocked=%s", (status, expected) => { + expect(routingStatusToBlocked(status)).toBe(expected); + }); + + it("returns undefined when there is no status filter", () => { + expect(routingStatusToBlocked(null)).toBeUndefined(); + }); +}); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/utils/routingStatus.ts b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/utils/routingStatus.ts new file mode 100644 index 00000000000..dd247b0b188 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/utils/routingStatus.ts @@ -0,0 +1,9 @@ +export type RoutingStatusFilter = "active" | "paused" | null; + +/** + * Maps the URL-state status filter to the `blocked` query param of + * `/v2/model/info`: "active" → false (not blocked), "paused" → true, + * null → undefined (no filtering). + */ +export const routingStatusToBlocked = (status: RoutingStatusFilter): boolean | undefined => + status === null ? undefined : status === "paused";