From d8d6f665edabf0a01fd26a6406827cb54abfbf9e Mon Sep 17 00:00:00 2001
From: thementalcoding <312162298+thementalcoding@users.noreply.github.com>
Date: Tue, 29 Sep 2026 12:44:28 +0200
Subject: [PATCH] fix(ui): inverted routing-status filter mapping and compact
 Status column

Selecting "Active" in the Filters drawer sent blocked=true to the server,
showing the paused deployments instead of the active ones (and vice
versa). The mapping now lives in routingStatusToBlocked() with unit
tests, and the Status column is narrower so the row actions stay in
view.
---
 .../components/AllModelsTab.tsx                  |  4 ++--
 .../components/ModelsTableColumns.tsx            |  4 ++--
 .../utils/routingStatus.test.ts                  | 16 ++++++++++++++++
 .../models-and-endpoints/utils/routingStatus.ts  |  9 +++++++++
 4 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/utils/routingStatus.test.ts
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/utils/routingStatus.ts

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<PaginationState>(
     () => ({ 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 }) => <DataTableSortHeader column={column} title="Status" />,
     enableSorting: true,
-    size: 110,
-    minSize: 90,
+    size: 90,
+    minSize: 70,
     cell: ({ row }) => <RoutingStatusCell blocked={row.original.model_info?.blocked} />,
   },
   {
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";