+
+ {selectedTeamValue === PERSONAL_TEAM_VALUE ? (
+
+ To access these models, create a Virtual Key without selecting a team on the{" "}
+
+ Virtual Keys page
+
+ .
+
+ ) : (
+
+ To access these models, create a Virtual Key and select Team as "{teamAccessLabel}" on the{" "}
+
+ Virtual Keys page
+
+ .
+
+ )}
-
-
+ )}
+
({
+ default: { success: vi.fn(), fromBackend: vi.fn() },
+}));
+
+const makeModel = (overrides: Partial = {}): ModelData =>
+ ({
+ model_name: "gpt-4-public",
+ litellm_model_name: "openai/gpt-4",
+ provider: "openai",
+ input_cost: 30 as unknown as number,
+ output_cost: 60 as unknown as number,
+ max_tokens: 8192,
+ max_input_tokens: 8192,
+ litellm_params: { model: "openai/gpt-4" },
+ cleanedLitellmParams: {},
+ ...overrides,
+ model_info: {
+ id: "model-1",
+ created_at: "2024-01-02T00:00:00Z",
+ updated_at: "2024-03-04T00:00:00Z",
+ created_by: "alice",
+ team_id: "team-1",
+ db_model: true,
+ access_groups: null,
+ ...(overrides.model_info ?? {}),
+ },
+ }) as ModelData;
+
+const baseProps = {
+ data: [makeModel()],
+ rowCount: 1,
+ isLoading: false,
+ isRefreshing: false,
+ onRefresh: vi.fn(),
+ sorting: [],
+ onSortingChange: vi.fn(),
+ pagination: { pageIndex: 0, pageSize: 50 },
+ onPaginationChange: vi.fn(),
+ columnFilters: [],
+ onColumnFiltersChange: vi.fn(),
+ onResetFilters: vi.fn(),
+ searchValue: "",
+ onSearchChange: vi.fn(),
+ teamOptions: [
+ { value: "personal", label: "Personal" },
+ { value: "team-1", label: "Engineering" },
+ ],
+ selectedTeamValue: "personal",
+ onTeamChange: vi.fn(),
+ isLoadingTeams: false,
+ viewMode: "current_team" as const,
+ onViewModeChange: vi.fn(),
+ onOpenModelSettings: vi.fn(),
+ availableModelGroups: ["gpt-4", "gpt-3.5-turbo"],
+ availableModelAccessGroups: ["sales-team"],
+ userRole: "Admin",
+ userID: "alice",
+ onModelIdClick: vi.fn(),
+ onTeamIdClick: vi.fn(),
+ onDeleteClick: vi.fn(),
+ onTogglePauseClick: vi.fn(),
+ pausingModelId: null,
+};
+
+const row = (modelId: string): HTMLElement => {
+ const element = document.querySelector(`[data-row-id="${modelId}"]`);
+ if (!(element instanceof HTMLElement)) {
+ throw new Error(`row ${modelId} not rendered`);
+ }
+ return element;
+};
+
+describe("AllModelsTable", () => {
+ it("renders the nine design columns and hides Status behind the Columns menu", async () => {
+ const user = userEvent.setup();
+ render();
+
+ for (const header of [
+ "Model ID",
+ "Model Information",
+ "Credentials",
+ "Created By",
+ "Updated At",
+ "Costs",
+ "Team ID",
+ "Model Access Group",
+ "Actions",
+ ]) {
+ expect(screen.getByRole("columnheader", { name: new RegExp(header, "i") })).toBeInTheDocument();
+ }
+
+ expect(screen.queryByRole("columnheader", { name: /^status$/i })).not.toBeInTheDocument();
+ expect(screen.queryByText("DB Model")).not.toBeInTheDocument();
+
+ await user.click(screen.getByRole("button", { name: /columns/i }));
+ await user.click(await screen.findByRole("menuitemcheckbox", { name: /status/i }));
+
+ expect(await screen.findByText("DB Model")).toBeInTheDocument();
+ });
+
+ it("opens the model detail from the model ID cell", async () => {
+ const user = userEvent.setup();
+ const onModelIdClick = vi.fn();
+ render();
+
+ await user.click(screen.getByTestId("model-id-model-1"));
+
+ expect(onModelIdClick).toHaveBeenCalledWith("model-1");
+ });
+
+ it("opens the team detail from the team ID cell", async () => {
+ const user = userEvent.setup();
+ const onTeamIdClick = vi.fn();
+ render();
+
+ await user.click(screen.getByTestId("model-team-id-model-1"));
+
+ expect(onTeamIdClick).toHaveBeenCalledWith("team-1");
+ });
+
+ it("shows a dash when the model has no team", () => {
+ render(
+ ,
+ );
+
+ expect(within(row("model-1")).getAllByText("-").length).toBeGreaterThan(0);
+ expect(screen.queryByTestId("model-team-id-model-1")).not.toBeInTheDocument();
+ });
+
+ it("renders the model name over the litellm model name", () => {
+ render();
+
+ const cell = screen.getByTestId("model-information-model-1");
+ expect(within(cell).getByText("gpt-4-public")).toBeInTheDocument();
+ expect(within(cell).getByText("openai/gpt-4")).toBeInTheDocument();
+ });
+
+ it("renders a reusable credential by name and falls back to Manual", () => {
+ const { rerender } = render(
+ ,
+ );
+ expect(screen.getByText("openai-prod")).toBeInTheDocument();
+ expect(screen.queryByText("Manual")).not.toBeInTheDocument();
+
+ rerender();
+ expect(screen.getByText("Manual")).toBeInTheDocument();
+ });
+
+ it("shows 'Defined in config' for a config model and the creator for a DB model", () => {
+ const { rerender } = render();
+ expect(screen.getByText("alice")).toBeInTheDocument();
+
+ rerender(
+ ,
+ );
+ expect(screen.getByText("Defined in config")).toBeInTheDocument();
+ });
+
+ it("renders input and output costs and a dash when both are missing", () => {
+ const { rerender } = render();
+ expect(screen.getByText("$30")).toBeInTheDocument();
+ expect(screen.getByText("$60")).toBeInTheDocument();
+
+ rerender(
+ ,
+ );
+ expect(screen.queryByText(/^\$/)).not.toBeInTheDocument();
+ });
+
+ it("collapses extra access groups behind a +N more badge", () => {
+ render(
+ ,
+ );
+
+ expect(screen.getByText("sales-team")).toBeInTheDocument();
+ expect(screen.getByText("+2 more")).toBeInTheDocument();
+ });
+
+ describe("pause / resume", () => {
+ it("renders the toggle on for an active DB model and off for a blocked one", () => {
+ const { rerender } = render();
+ expect(screen.getByTestId("model-pause-toggle-model-1")).toBeChecked();
+
+ rerender(
+ ,
+ );
+ expect(screen.getByTestId("model-pause-toggle-model-1")).not.toBeChecked();
+ });
+
+ it("pauses an active model and resumes a blocked one", async () => {
+ const user = userEvent.setup();
+ const onTogglePauseClick = vi.fn();
+ const { rerender } = render();
+
+ await user.click(screen.getByTestId("model-pause-toggle-model-1"));
+ expect(onTogglePauseClick).toHaveBeenCalledWith("model-1", true);
+
+ onTogglePauseClick.mockClear();
+ rerender(
+ ,
+ );
+
+ await user.click(screen.getByTestId("model-pause-toggle-model-1"));
+ expect(onTogglePauseClick).toHaveBeenCalledWith("model-1", false);
+ });
+
+ it("does not let a non-admin toggle a model", async () => {
+ const user = userEvent.setup();
+ const onTogglePauseClick = vi.fn();
+ render();
+
+ const toggle = screen.getByTestId("model-pause-toggle-model-1");
+ expect(toggle).toHaveAttribute("data-disabled");
+ await user.click(toggle);
+ expect(onTogglePauseClick).not.toHaveBeenCalled();
+ });
+
+ it("does not let anyone toggle a config model", async () => {
+ const user = userEvent.setup();
+ const onTogglePauseClick = vi.fn();
+ render(
+ ,
+ );
+
+ const toggle = screen.getByTestId("model-pause-toggle-model-1");
+ expect(toggle).toHaveAttribute("data-disabled");
+ await user.click(toggle);
+ expect(onTogglePauseClick).not.toHaveBeenCalled();
+ });
+
+ it("replaces the toggle with a pending indicator while a PATCH is in flight", () => {
+ render();
+
+ expect(screen.getByTestId("model-pause-pending-model-1")).toBeInTheDocument();
+ expect(screen.queryByTestId("model-pause-toggle-model-1")).not.toBeInTheDocument();
+ });
+ });
+
+ describe("delete", () => {
+ it("lets an admin delete a DB model", async () => {
+ const user = userEvent.setup();
+ const onDeleteClick = vi.fn();
+ render();
+
+ await user.click(screen.getByTestId("model-delete-model-1"));
+ expect(onDeleteClick).toHaveBeenCalledWith("model-1");
+ });
+
+ it("lets the creator delete their own DB model", async () => {
+ const user = userEvent.setup();
+ const onDeleteClick = vi.fn();
+ render();
+
+ await user.click(screen.getByTestId("model-delete-model-1"));
+ expect(onDeleteClick).toHaveBeenCalledWith("model-1");
+ });
+
+ it("blocks deleting a model the user did not create", async () => {
+ const user = userEvent.setup();
+ const onDeleteClick = vi.fn();
+ render();
+
+ const deleteButton = screen.getByTestId("model-delete-model-1");
+ expect(deleteButton).toBeDisabled();
+ await user.click(deleteButton);
+ expect(onDeleteClick).not.toHaveBeenCalled();
+ });
+
+ it("blocks deleting a config model", async () => {
+ const user = userEvent.setup();
+ const onDeleteClick = vi.fn();
+ render(
+ ,
+ );
+
+ const deleteButton = screen.getByTestId("model-delete-model-1");
+ expect(deleteButton).toBeDisabled();
+ await user.click(deleteButton);
+ expect(onDeleteClick).not.toHaveBeenCalled();
+ });
+ });
+
+ describe("toolbar", () => {
+ it("wires search, refresh, team, view and model settings", async () => {
+ const user = userEvent.setup();
+ const onSearchChange = vi.fn();
+ const onRefresh = vi.fn();
+ const onOpenModelSettings = vi.fn();
+ render(
+ ,
+ );
+
+ await user.type(screen.getByTestId("datatable-search"), "gpt");
+ expect(onSearchChange).toHaveBeenCalled();
+
+ await user.click(screen.getByTestId("datatable-refresh"));
+ expect(onRefresh).toHaveBeenCalled();
+
+ await user.click(screen.getByTestId("models-settings-trigger"));
+ expect(onOpenModelSettings).toHaveBeenCalled();
+
+ expect(screen.getByTestId("models-team-select")).toHaveTextContent("Personal");
+ expect(screen.getByTestId("models-view-select")).toHaveTextContent("Current Team Models");
+ });
+
+ it("switches the current team", async () => {
+ const user = userEvent.setup();
+ const onTeamChange = vi.fn();
+ render();
+
+ await user.click(screen.getByTestId("models-team-select"));
+ await user.click(await screen.findByRole("option", { name: "Engineering" }));
+
+ expect(onTeamChange).toHaveBeenCalledWith("team-1");
+ });
+
+ it("runs the full reset from the filter drawer", async () => {
+ const user = userEvent.setup();
+ const onResetFilters = vi.fn();
+ render();
+
+ await user.click(screen.getByTestId("datatable-filters-trigger"));
+ await user.click(await screen.findByTestId("filter-drawer-reset"));
+
+ expect(onResetFilters).toHaveBeenCalled();
+ });
+
+ it("renders active filters as removable chips", async () => {
+ const user = userEvent.setup();
+ const onColumnFiltersChange = vi.fn();
+ render(
+ ,
+ );
+
+ const chip = screen.getByTestId("filter-chip-model_name");
+ expect(chip).toHaveTextContent("Public Model Name");
+ expect(chip).toHaveTextContent("Wildcard Models (*)");
+
+ await user.click(screen.getByTestId("filter-chip-remove-model_name"));
+ expect(onColumnFiltersChange).toHaveBeenCalled();
+ });
+ });
+
+ it("shows the server row count in the pagination footer", () => {
+ render();
+
+ expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-50 of 137");
+ });
+
+ it("shows the empty state when there are no models", () => {
+ render();
+
+ expect(screen.getByText("No models found")).toBeInTheDocument();
+ });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTable.tsx
new file mode 100644
index 00000000000..d073519d162
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTable.tsx
@@ -0,0 +1,298 @@
+"use client";
+
+import { ColumnFiltersState, OnChangeFn, PaginationState, SortingState } from "@tanstack/react-table";
+import { Search, Settings } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { ModelData } from "@/components/model_dashboard/types";
+import {
+ DataTable,
+ DataTableFilterDrawer,
+ DataTableFilterField,
+ DataTableToolbar,
+} from "@/components/shared/DataTable";
+import { SearchSelect } from "@/components/shared/SearchSelect";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/cva.config";
+
+import {
+ ACCESS_GROUPS_COLUMN_ID,
+ getModelsTableColumns,
+ MODEL_NAME_COLUMN_ID,
+ STATUS_COLUMN_ID,
+} from "./ModelsTableColumns";
+
+export type ModelViewMode = "all" | "current_team";
+
+export const PERSONAL_TEAM_VALUE = "personal";
+export const ALL_MODEL_GROUPS_VALUE = "all";
+export const WILDCARD_MODEL_GROUP_VALUE = "wildcard";
+
+const MODEL_TABLE_BODY_HEIGHT = 600;
+
+const FILTER_LABELS: Record = {
+ [MODEL_NAME_COLUMN_ID]: "Public Model Name",
+ [ACCESS_GROUPS_COLUMN_ID]: "Model Access Group",
+};
+
+const VIEW_MODE_LABELS: Record = {
+ current_team: "Current Team Models",
+ all: "All Available Models",
+};
+
+export interface ModelsTableTeamOption {
+ value: string;
+ label: string;
+}
+
+interface AllModelsTableProps {
+ data: ModelData[];
+ rowCount: number;
+ isLoading: boolean;
+ isRefreshing: boolean;
+ onRefresh: () => void;
+ sorting: SortingState;
+ onSortingChange: OnChangeFn;
+ pagination: PaginationState;
+ onPaginationChange: OnChangeFn;
+ columnFilters: ColumnFiltersState;
+ onColumnFiltersChange: OnChangeFn;
+ onResetFilters: () => void;
+ searchValue: string;
+ onSearchChange: (value: string) => void;
+ teamOptions: ModelsTableTeamOption[];
+ selectedTeamValue: string;
+ onTeamChange: (value: string) => void;
+ isLoadingTeams: boolean;
+ viewMode: ModelViewMode;
+ onViewModeChange: (viewMode: ModelViewMode) => void;
+ onOpenModelSettings: () => void;
+ availableModelGroups: string[];
+ availableModelAccessGroups: string[];
+ userRole: string;
+ userID: string;
+ onModelIdClick: (modelId: string) => void;
+ onTeamIdClick: (teamId: string) => void;
+ onDeleteClick: (modelId: string) => void;
+ onTogglePauseClick: (modelId: string, blocked: boolean) => void | Promise;
+ pausingModelId: string | null;
+}
+
+function EmptyState() {
+ return (
+
+
+
+
+
No models found
+
+ No models match your search or filters. Try resetting them.
+