+
+ );
+}
+
+const BudgetTable: React.FC
+
+ No budgets yet
+
+ Create a budget to set spend, TPM and RPM limits for customers.
+
+
+
+ ),
+ } satisfies ColumnDef
+ {tools.slice(0, 4).map((tool) => (
+
+ {displayToolName(serverPrefixById.get(tool.server_id), tool.tool_name)}
+
+ ))}
+ {tools.length > 4 && (
+ +{tools.length - 4} more
+ )}
+
+ );
+ },
+ },
+ {
+ id: "created_at",
+ accessorKey: "created_at",
+ meta: { title: "Created" },
+ header: ({ column }) =>
+
+ ),
+ },
+];
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 fa44694887b..0bced76e24e 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
@@ -1,13 +1,13 @@
import React, { useState, useCallback } from "react";
import { Button, Text, Title } from "@tremor/react";
-import { Modal, Form, Input, message, Spin, Card, Typography, Space } from "antd";
-import { PlusIcon, PencilIcon, TrashIcon } from "@heroicons/react/outline";
-import { ColumnDef } from "@tanstack/react-table";
+import { Modal, Form, Input, message, Spin } from "antd";
+import { PlusIcon } from "@heroicons/react/outline";
+import { SortingState } from "@tanstack/react-table";
+import { Inbox } from "lucide-react";
import { useMCPToolsets } from "@/app/(dashboard)/hooks/mcpServers/useMCPToolsets";
import { useMCPServers } from "@/app/(dashboard)/hooks/mcpServers/useMCPServers";
import { useQueryClient } from "@tanstack/react-query";
-import { DateCell, IdCell } from "@/components/shared/table_cells";
-import { DataTable } from "@/components/view_logs/table";
+import { DataTable } from "@/components/shared/DataTable";
import {
createMCPToolset,
updateMCPToolset,
@@ -16,19 +16,7 @@ import {
getProxyBaseUrl,
} from "@/components/networking";
import { MCPToolset, MCPToolsetTool } from "@/components/mcp_tools/types";
-
-const { Text: AntdText } = Typography;
-
-// Display-only. Toolsets persist {server_id, bare tool_name}; the gateway serves
-// each tool prefixed as "{server-prefix}-{tool}". Render that qualified form so
-// the same tool name on different servers stays distinguishable. This mirrors the
-// backend default MCP_TOOL_PREFIX_SEPARATOR; overriding that env var only changes
-// this cosmetic label, never what is stored or how tools are matched.
-const MCP_TOOL_PREFIX_SEPARATOR = "-";
-
-function displayToolName(serverPrefix: string | undefined, toolName: string): string {
- return serverPrefix ? `${serverPrefix}${MCP_TOOL_PREFIX_SEPARATOR}${toolName}` : toolName;
-}
+import { displayToolName, getMCPToolsetTableColumns } from "./MCPToolsetTableColumns";
interface MCPToolsetsTabProps {
accessToken: string | null;
@@ -298,99 +286,18 @@ function CreateToolsetModal({ open, onClose, onSave, accessToken, initialToolset
);
}
-function toolsetColumns(
- isAdmin: boolean,
- onEdit: (t: MCPToolset) => void,
- onDelete: (id: string) => void,
- serverPrefixById: Map
-
- );
- },
- },
- {
- header: "Description",
- accessorKey: "description",
- cell: ({ row }) => {row.original.description || "—"},
- },
- {
- header: "Tools",
- accessorKey: "tools",
- cell: ({ row }) => {
- const tools = row.original.tools;
- return (
-
-
- {row.original.toolset_name}
-
-
-
- {tools.slice(0, 4).map((t, i) => (
-
- {displayToolName(serverPrefixById.get(t.server_id), t.tool_name)}
-
- ))}
- {tools.length > 4 && +{tools.length - 4} more}
-
- );
- },
- },
- {
- header: "Created",
- accessorKey: "created_at",
- cell: ({ row }) =>
-
-
-
- ),
- } as ColumnDef
+
+ );
}
function ToolsetUsageGuide() {
@@ -484,7 +391,16 @@ export function MCPToolsetsTab({ accessToken, userRole }: MCPToolsetsTabProps) {
() => new Map(mcpServers.map((s) => [s.server_id, s.alias || s.server_name || s.server_id])),
[mcpServers],
);
- const columns = toolsetColumns(isAdmin, setEditToolset, setDeleteId, serverPrefixById);
+ const [sorting, setSorting] = useState
+
+ No toolsets yet
+
+ Create a toolset to give keys and teams a curated set of MCP tools.
+
+
@@ -508,10 +424,14 @@ export function MCPToolsetsTab({ accessToken, userRole }: MCPToolsetsTabProps) {
toolset.toolset_id || String(index)}
+ sortingMode="client"
+ sorting={sorting}
+ onSortingChange={setSorting}
isLoading={isLoading}
- noDataMessage="No toolsets yet. Click 'New Toolset' to create one."
- loadingMessage="Loading toolsets..."
- enableSorting={true}
+ loadingMessage="Loading toolsets…"
+ noDataMessage={ = ({
>
+ = ({
credentials: isClientForwardedTokenMode(values.auth_type)
? preservedDeclaredAppCredentials(values.credentials)
: { ...((values.credentials as Record | undefined) ?? {}), ...(dcrClientRef.current ?? {}) },
+ issuer: values.issuer,
authorization_url: values.authorization_url,
token_url: values.token_url,
registration_url: values.registration_url,
@@ -759,7 +760,7 @@ const CreateMCPServer: React.FC = ({
if ("credentials" in changedValues) {
setAppMayNotMatchUpstream(false);
} else {
- const upstreamChanged = ["url", "spec_path", "authorization_url", "token_url", "registration_url"].some(
+ const upstreamChanged = ["url", "spec_path", "issuer", "authorization_url", "token_url", "registration_url"].some(
(key) => key in changedValues,
);
const hasDeclaredApp = preservedDeclaredAppCredentials(form.getFieldValue("credentials")) !== undefined;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_edit.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_edit.tsx
index 455fe69455d..8646ab192c9 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_edit.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_edit.tsx
@@ -117,6 +117,7 @@ const MCPServerEdit: React.FC = ({
const currentAuthType = Form.useWatch("auth_type", form);
const currentStaticHeaders = Form.useWatch("static_headers", form);
const currentCredentials = Form.useWatch("credentials", form);
+ const currentIssuer = Form.useWatch("issuer", form);
const currentAuthorizationUrl = Form.useWatch("authorization_url", form);
const currentTokenUrl = Form.useWatch("token_url", form);
const currentRegistrationUrl = Form.useWatch("registration_url", form);
@@ -471,7 +472,7 @@ const MCPServerEdit: React.FC = ({
if ("credentials" in changedValues) {
setAppMayNotMatchUpstream(false);
} else {
- const upstreamChanged = ["url", "spec_path", "authorization_url", "token_url", "registration_url"].some(
+ const upstreamChanged = ["url", "spec_path", "issuer", "authorization_url", "token_url", "registration_url"].some(
(key) => key in changedValues,
);
const hasDeclaredApp = preservedDeclaredAppCredentials(form.getFieldValue("credentials")) !== undefined;
@@ -517,6 +518,7 @@ const MCPServerEdit: React.FC = ({
transport: rawTransport === TRANSPORT.OPENAPI ? TRANSPORT.HTTP : rawTransport,
auth_type: AUTH_TYPE.OAUTH2,
oauth2_flow: MCP_OAUTH2_FLOW_INTERACTIVE,
+ issuer: values.issuer,
authorization_url: values.authorization_url,
token_url: values.token_url,
registration_url: values.registration_url,
@@ -636,6 +638,7 @@ const MCPServerEdit: React.FC = ({
spec_path: undefined,
auth_type: undefined,
credentials: undefined,
+ issuer: undefined,
authorization_url: undefined,
token_url: undefined,
registration_url: undefined,
@@ -845,7 +848,7 @@ const MCPServerEdit: React.FC = ({
stdio_config: undefined,
env_json: undefined,
...(mcpServer.auth_type === AUTH_TYPE.OAUTH2 && restValues.auth_type !== AUTH_TYPE.OAUTH2
- ? { authorization_url: null, token_url: null, registration_url: null }
+ ? { issuer: null, authorization_url: null, token_url: null, registration_url: null }
: {}),
...(mcpServer.auth_type === AUTH_TYPE.OAUTH2_TOKEN_EXCHANGE &&
restValues.auth_type !== AUTH_TYPE.OAUTH2_TOKEN_EXCHANGE
@@ -1301,6 +1304,22 @@ const MCPServerEdit: React.FC = ({
size="large"
/>
+
+ Issuer (optional)
+
+
+
+ }
+ name="issuer"
+ >
+
+
@@ -1588,6 +1607,7 @@ const MCPServerEdit: React.FC = ({
oauthFlowTypeValue ?? oauth2FlowToFormValue(mcpServer.oauth2_flow) ?? OAUTH_FLOW.INTERACTIVE,
static_headers: currentStaticHeaders ?? mcpServer.static_headers,
credentials: currentCredentials,
+ issuer: currentIssuer ?? mcpServer.issuer,
authorization_url: currentAuthorizationUrl ?? mcpServer.authorization_url,
token_url: currentTokenUrl ?? mcpServer.token_url,
registration_url: currentRegistrationUrl ?? mcpServer.registration_url,
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.tsx
index 4bf4af0c7f6..aac5405ce6b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.tsx
@@ -26,7 +26,7 @@ import HealthCheckComponent from "../../../components/model_dashboard/HealthChec
import ModelGroupAliasSettings from "../../../components/model_group_alias_settings";
import ModelInfoView from "../../../components/model_info_view";
import NotificationsManager from "../../../components/molecules/notifications_manager";
-import PassThroughSettings from "../../../components/pass_through_settings";
+import PassThroughSettings from "../../../components/PassThroughSettings/PassThroughSettings";
import TeamInfoView from "../../../components/team/TeamInfo";
import useAuthorized from "../hooks/useAuthorized";
@@ -396,7 +396,6 @@ const ModelsAndEndpointsView: React.FC = ({ premiumUser, te
accessToken={accessToken}
userRole={userRole}
userID={userID}
- modelData={processedModelData}
premiumUser={premiumUser}
/>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/page.tsx
index 6c0d780183a..02b2ccf5357 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/page.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/page.tsx
@@ -7,6 +7,7 @@ import { useAuth } from "@/contexts/AuthContext";
import {
buildLoginUrlWithReturn,
consumeReturnUrl,
+ getLoginUrl,
isValidReturnUrl,
normalizeUrlForCompare,
storeReturnUrl,
@@ -33,7 +34,7 @@ function CreateKeyPageContent() {
// Store the current URL so we can redirect back after login
storeReturnUrl();
// Build login URL with return URL parameter
- const baseLoginUrl = (proxyBaseUrl || "") + "/ui/login";
+ const baseLoginUrl = getLoginUrl(proxyBaseUrl || "");
const dest = buildLoginUrlWithReturn(baseLoginUrl);
// Replace instead of assigning to avoid back-button loops
window.location.replace(dest);
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/policy_table.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/PolicyTable.test.tsx
similarity index 58%
rename from ui/litellm-dashboard/src/app/(dashboard)/policies/_components/policy_table.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/policies/_components/PolicyTable.test.tsx
index 934114f5405..06c939aa151 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/policy_table.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/PolicyTable.test.tsx
@@ -1,47 +1,11 @@
import React from "react";
-import { screen } from "@testing-library/react";
+import { screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderWithProviders } from "@/../tests/test-utils";
import { beforeEach, describe, expect, it, vi } from "vitest";
-import PolicyTable from "./policy_table";
+import PolicyTable from "./PolicyTable";
import { Policy } from "@/components/policies/types";
-vi.mock("@heroicons/react/outline", () => ({
- TrashIcon: function TrashIcon() {
- return null;
- },
- PencilIcon: function PencilIcon() {
- return null;
- },
- SwitchVerticalIcon: function SwitchVerticalIcon() {
- return null;
- },
- ChevronUpIcon: function ChevronUpIcon() {
- return null;
- },
- ChevronDownIcon: function ChevronDownIcon() {
- return null;
- },
-}));
-
-vi.mock("@tremor/react", async (importOriginal) => {
- const actual = await importOriginal();
- return {
- ...actual,
- Button: React.forwardRef(({ children, ...props }, ref) =>
- React.createElement("button", { ...props, ref }, children),
- ),
- Icon: ({ icon: IconComp, onClick, className }: any) =>
- React.createElement(
- "button",
- { type: "button", onClick, className },
- IconComp?.displayName ?? IconComp?.name ?? "icon",
- ),
- Tooltip: ({ children }: { children?: React.ReactNode }) => React.createElement(React.Fragment, null, children),
- Badge: ({ children }: { children?: React.ReactNode }) => React.createElement("span", null, children),
- };
-});
-
const makePolicy = (overrides: Partial = {}): Policy => ({
policy_id: "policy-id-1",
policy_name: "test-policy",
@@ -71,20 +35,21 @@ describe("PolicyTable", () => {
renderWithProviders( = {
+ policy_name: "versioned",
+ policy_id: "v1",
+ version_status: "published",
+ version_number: 1,
+ };
+ const productionVersion: Partial = {
+ policy_name: "versioned",
+ policy_id: "v2",
+ version_status: "production",
+ version_number: 2,
+ };
+ const policies = [makePolicy(publishedVersion), makePolicy(productionVersion)];
renderWithProviders( = ({
+ policies,
+ isLoading,
+ onDeleteClick,
+ onEditClick,
+ onViewClick,
+ isAdmin = false,
+}) => {
+ const [sorting, setSorting] = useState(DEFAULT_SORTING);
+
+ const rows = useMemo(() => groupPoliciesByName(policies), [policies]);
+
+ const columns = useMemo(() => {
+ const deps = { isAdmin, onViewClick, onEditClick, onDeleteClick };
+ return getPolicyTableColumns(deps);
+ }, [isAdmin, onViewClick, onEditClick, onDeleteClick]);
+
+ return (
+ row.policy_name}
+ sortingMode="client"
+ sorting={sorting}
+ onSortingChange={setSorting}
+ isLoading={isLoading}
+ loadingMessage="Loading policies…"
+ noDataMessage={
+
+
+
+ onEditClick(policy)}>
+
+ onDeleteClick(policy.policy_id, policy.policy_name || "Unnamed Policy")}
+ >
+
+
+
+ );
+}
+
+interface PolicyTableColumnsDeps {
+ isAdmin: boolean;
+ onViewClick: (policyId: string) => void;
+ onEditClick: (policy: Policy) => void;
+ onDeleteClick: (policyId: string, policyName: string) => void;
+}
+
+export const getPolicyTableColumns = ({
+ isAdmin,
+ onViewClick,
+ onEditClick,
+ onDeleteClick,
+}: PolicyTableColumnsDeps): ColumnDef[] => [
+ {
+ id: "policy_name",
+ accessorKey: "policy_name",
+ meta: { title: "Name", skeleton: "twoLine" },
+ header: ({ column }) => 1 ? (
+ ,
+ ]
+ : []),
+];
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_attachment_form.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_attachment_form.test.tsx
index 6788e97d25d..fca487df14e 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_attachment_form.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_attachment_form.test.tsx
@@ -18,6 +18,10 @@ vi.mock("./impact_preview_alert", () => ({
React.createElement("div", { "data-testid": "impact-preview" }, `${impactResult.affected_keys_count} keys`),
}));
+vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({
+ default: () => ({ userId: "admin-user-id", userRole: "Admin", accessToken: "test-token" }),
+}));
+
const makePolicy = (overrides: Partial = {}): Policy => ({
policy_id: "policy-id-1",
policy_name: "test-policy",
@@ -71,6 +75,12 @@ describe("AddAttachmentForm", () => {
});
});
+ it("fetches all teams, not just teams the caller is a member of (LIT-4199)", async () => {
+ renderWithProviders( = ({
setIsLoadingTeams(true);
setTeamsLoaded(false);
try {
- const teamsResponse = await teamListCall(accessToken, null, userId);
+ const teamsResponse = await teamListCall(accessToken, null, null);
const teamsArray = Array.isArray(teamsResponse) ? teamsResponse : teamsResponse?.data || [];
const teamAliases = teamsArray.map((t: any) => t.team_alias).filter(Boolean);
setAvailableTeams(teamAliases);
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/index.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/index.tsx
index 0545e2f86dc..df55d2c386b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/index.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/index.tsx
@@ -5,7 +5,7 @@ import { Alert } from "antd";
import MessageManager from "@/components/molecules/message_manager";
import { InfoCircleOutlined } from "@ant-design/icons";
import { isAdminRole } from "@/utils/roles";
-import PolicyTable from "./policy_table";
+import PolicyTable from "./PolicyTable";
import PolicyInfoView from "./policy_info";
import AddPolicyForm from "./add_policy_form";
import { FlowBuilderPage } from "./pipeline_flow_builder";
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/policy_table.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/policy_table.tsx
deleted file mode 100644
index 278773069e6..00000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/policy_table.tsx
+++ /dev/null
@@ -1,326 +0,0 @@
-import React, { useMemo, useState } from "react";
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Icon, Button, Badge } from "@tremor/react";
-import { TrashIcon, PencilIcon, SwitchVerticalIcon, ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/outline";
-import { Tooltip, Tag } from "antd";
-import {
- ColumnDef,
- flexRender,
- getCoreRowModel,
- getSortedRowModel,
- SortingState,
- useReactTable,
-} from "@tanstack/react-table";
-import { DateCell } from "@/components/shared/table_cells";
-import { Policy } from "@/components/policies/types";
-
-/** One row per policy name; primaryPolicy is used for display and for Edit (FlowBuilder loads all versions) */
-interface PolicyRow {
- policy_name: string;
- primaryPolicy: Policy;
- versionCount: number;
-}
-
-function groupPoliciesByName(policies: Policy[]): PolicyRow[] {
- const byName = new Map();
- for (const p of policies) {
- const name = p.policy_name || "(unnamed)";
- if (!byName.has(name)) byName.set(name, []);
- byName.get(name)!.push(p);
- }
- const rows: PolicyRow[] = [];
- for (const [policyName, versions] of byName) {
- // Prefer production, then highest version_number
- const primary =
- versions.find((v) => v.version_status === "production") ??
- [...versions].sort((a, b) => (b.version_number ?? 0) - (a.version_number ?? 0))[0] ??
- versions[0];
- rows.push({ policy_name: policyName, primaryPolicy: primary, versionCount: versions.length });
- }
- return rows.sort((a, b) => a.policy_name.localeCompare(b.policy_name));
-}
-
-interface PolicyTableProps {
- policies: Policy[];
- isLoading: boolean;
- onDeleteClick: (policyId: string, policyName: string) => void;
- onEditClick: (policy: Policy) => void;
- onViewClick: (policyId: string) => void;
- isAdmin?: boolean;
-}
-
-const PolicyTable: React.FC = ({
- policies,
- isLoading,
- onDeleteClick,
- onEditClick,
- onViewClick,
- isAdmin = false,
-}) => {
- const [sorting, setSorting] = useState([{ id: "policy_name", desc: false }]);
-
- const rows = useMemo(() => groupPoliciesByName(policies), [policies]);
-
- const columns: ColumnDef[] = [
- {
- header: "Name",
- accessorKey: "policy_name",
- cell: ({ row }) => {
- const { primaryPolicy, versionCount } = row.original;
- return (
-
- {policy.description || "-"}
-
- );
- },
- },
- {
- header: "Inherits From",
- accessorFn: (row) => row.primaryPolicy.inherit ?? "",
- cell: ({ row }) => {
- const policy = row.original.primaryPolicy;
- return policy.inherit ? (
-
- {policy.inherit}
-
- ) : (
- -
- );
- },
- },
- {
- header: "Guardrails (Add)",
- accessorFn: (row) => (row.primaryPolicy.guardrails_add ?? []).join(", "),
- cell: ({ row }) => {
- const policy = row.original.primaryPolicy;
- const guardrails = policy.guardrails_add || [];
- if (guardrails.length === 0) {
- return -;
- }
- return (
-
-
- );
- },
- },
- {
- header: "Created At",
- id: "created_at",
- accessorFn: (row) => row.primaryPolicy.created_at ?? "",
- cell: ({ row }) =>
-
+ {
isLoading: false,
});
renderWithProviders(({ pageIndex: 0, pageSize: PAGE_SIZE });
const [keyAlias, setKeyAlias] = useState("");
- const { data, isLoading } = useKeys(page, PAGE_SIZE, {
+ const { data, isLoading } = useKeys(pagination.pageIndex + 1, pagination.pageSize, {
projectID: projectId,
selectedKeyAlias: keyAlias || null,
});
- // Reset to page 1 when filter changes
useEffect(() => {
- setPage(1);
+ setPagination((current) => ({ ...current, pageIndex: 0 }));
}, [keyAlias]);
const keys = data?.keys ?? [];
@@ -38,7 +37,7 @@ export function ProjectKeysSection({ projectId }: ProjectKeysSectionProps) {
}
style={{ height: "100%" }}
>
-
+
}
placeholder="Filter by key name..."
@@ -48,19 +47,13 @@ export function ProjectKeysSection({ projectId }: ProjectKeysSectionProps) {
allowClear
size="small"
/>
- `${total} keys`}
- />
);
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectKeysTable.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectKeysTable.test.tsx
index c0f12f77cfb..3685d30b414 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectKeysTable.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectKeysTable.test.tsx
@@ -1,4 +1,5 @@
import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
import { renderWithProviders, screen } from "../../../../../tests/test-utils";
import { ProjectKeysTable } from "./ProjectKeysTable";
import { KeyResponse } from "@/components/key_team_helpers/key_list";
@@ -7,6 +8,13 @@ vi.mock("@/components/common_components/DefaultProxyAdminTag", () => ({
default: ({ userId }: { userId: string }) => {userId},
}));
+const defaultProps = {
+ totalCount: 0,
+ isLoading: false,
+ pagination: { pageIndex: 0, pageSize: 5 },
+ onPaginationChange: vi.fn(),
+};
+
function makeKey(overrides: Partial = {}): KeyResponse {
return {
token: "tok-abc123",
@@ -70,52 +78,78 @@ function makeKey(overrides: Partial = {}): KeyResponse {
describe("ProjectKeysTable", () => {
it("should render", () => {
- renderWithProviders(;
}
-const columns: ColumnsType = [
- {
- title: "Key Name",
- dataIndex: "key_alias",
- key: "key_alias",
- render: (alias: string | null) => alias || "—",
- },
- {
- title: "Owner",
- key: "owner",
- render: (_: unknown, record: KeyResponse) => {
- const email = record.user?.user_email ?? record.user_id ?? null;
- if (!email) return "—";
- return (
-
-
- );
- },
- },
- {
- title: "Created",
- dataIndex: "created_at",
- key: "created_at",
- render: (date: string) =>
+
+
+ );
+}
+
+const PolicyTable: React.FC
+
+ No policies found
+
+ Create a policy to bundle guardrails and apply them across teams.
+
+
+ {guardrails.slice(0, 2).map((guardrail) => (
+
+ );
+}
+
+interface PolicyRowActionsProps {
+ policy: Policy;
+ onEditClick: (policy: Policy) => void;
+ onDeleteClick: (policyId: string, policyName: string) => void;
+}
+
+function PolicyRowActions({ policy, onEditClick, onDeleteClick }: PolicyRowActionsProps) {
+ return (
+
+ {model}
+
+ );
+ },
+ },
+ {
+ id: "created_at",
+ accessorFn: (row) => row.primaryPolicy.created_at ?? "",
+ meta: { title: "Created At" },
+ header: ({ column }) =>
+
+ ),
+ } satisfies ColumnDef
- 1 ? ` (${versionCount} versions)` : ""}`}
- >
-
-
- {versionCount > 1 && (
-
- {versionCount} version{versionCount !== 1 ? "s" : ""}
-
- )}
-
- );
- },
- },
- {
- header: "Description",
- accessorFn: (row) => row.primaryPolicy.description ?? "",
- cell: ({ row }) => {
- const policy = row.original.primaryPolicy;
- return (
-
- {guardrails.slice(0, 2).map((g, i) => (
-
- {g}
-
- ))}
- {guardrails.length > 2 && (
-
- +{guardrails.length - 2}
-
- )}
-
- );
- },
- },
- {
- header: "Guardrails (Remove)",
- accessorFn: (row) => (row.primaryPolicy.guardrails_remove ?? []).join(", "),
- cell: ({ row }) => {
- const policy = row.original.primaryPolicy;
- const guardrails = policy.guardrails_remove || [];
- if (guardrails.length === 0) {
- return -;
- }
- return (
-
- {guardrails.slice(0, 2).map((g, i) => (
-
- {g}
-
- ))}
- {guardrails.length > 2 && (
-
- +{guardrails.length - 2}
-
- )}
-
- );
- },
- },
- {
- header: "Model Condition",
- accessorFn: (row) => {
- const m = row.primaryPolicy.condition?.model;
- return typeof m === "string" ? m : JSON.stringify(m ?? "");
- },
- cell: ({ row }) => {
- const policy = row.original.primaryPolicy;
- const modelCondition = policy.condition?.model;
- if (!modelCondition) {
- return -;
- }
- return (
-
- {typeof modelCondition === "string"
- ? modelCondition.length > 20
- ? modelCondition.slice(0, 20) + "..."
- : modelCondition
- : "Multiple"}
-
-
- {isAdmin && (
- <>
-
- onEditClick(policy)}
- className="cursor-pointer hover:text-blue-500"
- />
-
-
-
- policy.policy_id && onDeleteClick(policy.policy_id, policy.policy_name || "Unnamed Policy")
- }
- className="cursor-pointer hover:text-red-500"
- />
-
-
- )}
-
- );
- },
- },
- ];
-
- const table = useReactTable({
- data: rows,
- columns,
- state: {
- sorting,
- },
- onSortingChange: setSorting,
- getCoreRowModel: getCoreRowModel(),
- getSortedRowModel: getSortedRowModel(),
- enableSorting: true,
- });
-
- return (
-
-
- );
-};
-
-export default PolicyTable;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectDetailsPage.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectDetailsPage.test.tsx
index 6f8676360c4..61d42f2aac6 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectDetailsPage.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectDetailsPage.test.tsx
@@ -22,6 +22,12 @@ vi.mock("@/components/common_components/DefaultProxyAdminTag", () => ({
default: ({ userId }: { userId: string }) => {userId},
}));
+vi.mock("./ProjectKeysSection", () => ({
+ ProjectKeysSection: ({ projectId }: { projectId: string }) => (
+
-
-
-
- {projectId}
+ ),
+}));
+
const mockProject: ProjectResponse = {
project_id: "proj-1",
project_alias: "My Project",
@@ -98,6 +104,11 @@ describe("ProjectDetail", () => {
expect(screen.getByRole("heading", { name: "My Project" })).toBeInTheDocument();
});
+ it("should render the project keys section for the project", () => {
+ renderWithProviders(
- {
- if (toolId && !isFromConfig) {
- onEdit(toolId);
- }
- }}
- />
- {
- if (toolId && !isFromConfig) {
- onDelete(toolId);
- }
- }}
- />
-
- );
- },
- },
-];
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchToolTable.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchToolTable.test.tsx
new file mode 100644
index 00000000000..c4c05f97dce
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchToolTable.test.tsx
@@ -0,0 +1,117 @@
+import { screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@/../tests/test-utils";
+import SearchToolTable from "./SearchToolTable";
+import { AvailableSearchProvider, SearchTool } from "./types";
+
+const makeSearchTool = (overrides: Partial
+
+ );
+}
+
+const SearchToolTable: React.FC
+
+ No search tools configured
+ Add a search tool to enable web search for your models.
+
+
+ ),
+ },
+];
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchTools.tsx b/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchTools.tsx
index 65aee211271..c9e2a46a861 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchTools.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchTools.tsx
@@ -1,8 +1,7 @@
import { isAdminRole } from "@/utils/roles";
-import { LoadingOutlined } from "@ant-design/icons";
import { useQuery } from "@tanstack/react-query";
import { Button, Text, Title } from "@tremor/react";
-import { Form, Input, Modal, Select, Spin, Table } from "antd";
+import { Form, Input, Modal, Select } from "antd";
import React, { useState } from "react";
import DeleteResourceModal from "@/components/common_components/DeleteResourceModal";
import NotificationsManager from "@/components/molecules/notifications_manager";
@@ -13,7 +12,7 @@ import {
updateSearchTool,
} from "@/components/networking";
import CreateSearchTool from "./CreateSearchTools";
-import { searchToolColumns } from "./SearchToolColumn";
+import SearchToolTable from "./SearchToolTable";
import { SearchToolView } from "./SearchToolView";
import { AvailableSearchProvider, SearchTool } from "./types";
@@ -58,34 +57,29 @@ const SearchTools: React.FC
- record.search_tool_id || record.search_tool_name}
- pagination={false}
- locale={{
- emptyText: "No search tools configured",
- }}
- size="small"
- />
-
+
+
+ );
+}
+
const DocumentsTable: React.FC
+
+ No documents uploaded yet
+ Upload documents above to get started.
+
- {name}
- {record.size && ({formatFileSize(record.size)})}
-
- ),
- },
- {
- title: "Status",
- dataIndex: "status",
- key: "status",
- width: 150,
- render: (status: DocumentUpload["status"]) => getStatusBadge(status),
- },
- {
- title: "Actions",
- key: "actions",
- width: 120,
- render: (_: any, record: DocumentUpload) => (
-
-
- {}} />
-
-
- handleCopyId(record.uid)}
- />
-
-
- onRemove(record.uid)}
- />
-
-
- ),
- },
- ];
+ const columns = useMemo(() => getDocumentsTableColumns({ onRemove }), [onRemove]);
return (
-
- {children}
-
- ),
-}));
-
-// Mock Heroicons
-vi.mock("@heroicons/react/outline", () => ({
- ChevronDownIcon: (props: any) => ,
- ChevronUpIcon: (props: any) => ,
- SwitchVerticalIcon: (props: any) => ,
-}));
-
-// Test data
const mockVectorStores: VectorStore[] = [
{
- vector_store_id: "short-id",
+ vector_store_id: "vs-newer",
custom_llm_provider: "openai",
vector_store_name: "My OpenAI Store",
vector_store_description: "A store for OpenAI vectors",
+ vector_store_metadata: {
+ ingested_files: [
+ { filename: "a.pdf", ingested_at: "2024-01-15T10:00:00Z" },
+ { filename: "b.pdf", ingested_at: "2024-01-15T10:00:00Z" },
+ ],
+ },
created_at: "2024-01-15T10:30:00Z",
updated_at: "2024-01-15T11:00:00Z",
- created_by: "user-1",
- updated_by: "user-1",
},
{
- vector_store_id: "very-long-vector-store-id-that-should-be-truncated",
+ vector_store_id: "vs-older",
custom_llm_provider: "azure",
- vector_store_name: undefined, // Test missing name
- vector_store_description: "A store for Azure vectors with a very long description that should show a tooltip",
+ vector_store_name: undefined,
+ vector_store_description: undefined,
created_at: "2024-01-10T09:15:00Z",
updated_at: "2024-01-12T14:20:00Z",
},
- {
- vector_store_id: "store-3",
- custom_llm_provider: "pg_vector",
- vector_store_name: "PostgreSQL Store",
- vector_store_description: undefined, // Test missing description
- created_at: "2024-01-05T08:00:00Z",
- updated_at: "2024-01-08T16:45:00Z",
- },
];
-// Mock functions
const mockOnView = vi.fn();
const mockOnEdit = vi.fn();
const mockOnDelete = vi.fn();
@@ -96,319 +52,71 @@ const defaultProps = {
onDelete: mockOnDelete,
};
-// Helper function to render component
-const renderComponent = (props = {}) => {
- return render(
- {logo && 
}
- {displayName}
-
- );
- },
- },
- {
- header: "Created At",
- accessorKey: "created_at",
- sortingFn: "datetime",
- cell: ({ row }) =>
- onEdit(vectorStore.vector_store_id)}
- />
- onDelete(vectorStore.vector_store_id)}
- />
-
- );
- },
- },
- ];
-
- const table = useReactTable({
- data,
- columns,
- state: {
- sorting,
- },
- onSortingChange: setSorting,
- getCoreRowModel: getCoreRowModel(),
- getSortedRowModel: getSortedRowModel(),
- enableSorting: true,
- });
+const DEFAULT_SORTING: SortingState = [{ id: "created_at", desc: true }];
+function EmptyState() {
return (
-
- ;
- copyToClipboard?: ReturnType;
-}) {
- const columns = getAgentHubTableColumns(showModal, copyToClipboard, publicPage);
- const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
-
- return (
-
-
- {table.getHeaderGroups().map((hg) => (
-
+function renderTable(data: AgentHubData[], onAgentClick = vi.fn()) {
+ render(
+ agent.agent_id || String(index)}
+ sortingMode="client"
+ size="compact"
+ />,
);
+ return onAgentClick;
}
-describe("AgentHubTableColumns", () => {
+describe("getAgentHubTableColumns", () => {
it("should render", () => {
- render([] => {
- const allColumns: ColumnDef[] = [
- {
- header: "Agent Name",
- accessorKey: "name",
- enableSorting: true,
- sortingFn: "alphanumeric",
- cell: ({ row }) => {
- const agent = row.original;
+interface AgentHubRowActionsProps {
+ agent: AgentHubData;
+ onAgentClick: (agent: AgentHubData) => void;
+}
- return (
-
+
+
+
+ onAgentClick(agent)}>
+
+ void copyToClipboard(agent.name, "Agent name copied")}
+ >
+
+
+
+ );
+}
- return {agent.description || "-"} ;
- },
- meta: {
- className: "hidden md:table-cell",
- },
- },
- {
- header: "Version",
- accessorKey: "version",
- enableSorting: true,
- sortingFn: "alphanumeric",
- cell: ({ row }) => {
- const agent = row.original;
+interface AgentHubTableColumnsDeps {
+ onAgentClick: (agent: AgentHubData) => void;
+}
- return (
-
- v{agent.version}
-
- );
- },
- meta: {
- className: "hidden lg:table-cell",
- },
- },
- {
- header: "Protocol",
- accessorKey: "protocolVersion",
- enableSorting: true,
- sortingFn: "alphanumeric",
- cell: ({ row }) => {
- const agent = row.original;
-
- return {agent.protocolVersion || "-"} ;
- },
- meta: {
- className: "hidden lg:table-cell",
- },
- },
- {
- header: "Skills",
- accessorKey: "skills",
- enableSorting: false,
- cell: ({ row }) => {
- const agent = row.original;
- const skills = agent.skills || [];
-
- return (
- server.server_id}
+ sortingMode="client"
+ size="compact"
+ />,
+ );
+ return onServerClick;
+}
+
+describe("getMCPHubTableColumns", () => {
+ it("renders the server row", () => {
+ renderTable();
+ expect(screen.getByText("exa_test")).toBeInTheDocument();
+ });
+
+ it("keeps the non-sensitive columns", () => {
+ renderTable();
+ expect(screen.getByText("Server Name")).toBeInTheDocument();
+ expect(screen.getByText("Transport")).toBeInTheDocument();
+ expect(screen.getByText("Auth Type")).toBeInTheDocument();
+ });
+
+ it("does not expose a URL column", () => {
+ renderTable();
+ expect(screen.queryByText("URL")).not.toBeInTheDocument();
+ const columns = getMCPHubTableColumns({ onServerClick: vi.fn() });
+ expect(columns.some((c) => c.header === "URL" || c.meta?.title === "URL")).toBe(false);
+ });
+
+ it("does not render the server url anywhere in the table", () => {
+ renderTable();
+ expect(screen.queryByText(SERVER_URL)).not.toBeInTheDocument();
+ });
+
+ it("opens the server details when the name is clicked", async () => {
+ const user = userEvent.setup();
+ const onServerClick = renderTable();
+ await user.click(screen.getByRole("button", { name: "exa_test" }));
+ expect(onServerClick).toHaveBeenCalledWith(mockServer);
+ });
+
+ it("opens the server details from the actions menu", async () => {
+ const user = userEvent.setup();
+ const onServerClick = renderTable();
+ await user.click(screen.getByTestId("mcp-hub-actions-server-1"));
+ await user.click(await screen.findByTestId("mcp-hub-action-details"));
+ expect(onServerClick).toHaveBeenCalledWith(mockServer);
+ });
+
+ it("copies the server name from the actions menu", async () => {
+ const user = userEvent.setup();
+ renderTable();
+ await user.click(screen.getByTestId("mcp-hub-actions-server-1"));
+ await user.click(await screen.findByTestId("mcp-hub-action-copy"));
+ expect(await window.navigator.clipboard.readText()).toBe("exa_test");
+ });
+});
diff --git a/ui/litellm-dashboard/src/components/AIHub/MCPHubTableColumns.tsx b/ui/litellm-dashboard/src/components/AIHub/MCPHubTableColumns.tsx
new file mode 100644
index 00000000000..6a1ede11201
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/AIHub/MCPHubTableColumns.tsx
@@ -0,0 +1,227 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { Copy, Info, MoreHorizontal } from "lucide-react";
+
+import { DataTableSortHeader } from "@/components/shared/DataTable";
+import { IdentityCell, StatusBadge, type StatusTone } from "@/components/shared/table_cells";
+import { Badge } from "@/components/ui/badge";
+import { buttonVariants } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/cva.config";
+import { copyToClipboard } from "@/utils/dataUtils";
+
+export interface MCPServerData {
+ server_id: string;
+ server_name: string;
+ alias?: string | null;
+ description?: string | null;
+ url: string;
+ transport: string;
+ auth_type: string;
+ credentials?: any;
+ created_at: string;
+ created_by: string;
+ updated_at: string;
+ updated_by: string;
+ teams: string[];
+ mcp_access_groups: string[];
+ allowed_tools: string[];
+ extra_headers: any[];
+ mcp_info: Record;
+ static_headers: Record;
+ status: string;
+ last_health_check?: string | null;
+ health_check_error?: string | null;
+ command?: string | null;
+ args: string[];
+ env: Record;
+ [key: string]: any;
+}
+
+const STATUS_TONES: Record = {
+ active: "success",
+ inactive: "error",
+ unknown: "neutral",
+ healthy: "success",
+ unhealthy: "error",
+};
+
+interface MCPHubRowActionsProps {
+ server: MCPServerData;
+ onServerClick: (server: MCPServerData) => void;
+}
+
+function MCPHubRowActions({ server, onServerClick }: MCPHubRowActionsProps) {
+ return (
+
+
+
+
+ onServerClick(server)}>
+
+ void copyToClipboard(server.server_name, "Server name copied")}
+ >
+
+
+
+ );
+}
+
+interface MCPHubTableColumnsDeps {
+ onServerClick: (server: MCPServerData) => void;
+}
+
+export const getMCPHubTableColumns = ({ onServerClick }: MCPHubTableColumnsDeps): ColumnDef[] => [
+ {
+ id: "server_name",
+ accessorKey: "server_name",
+ meta: { title: "Server Name" },
+ header: ({ column }) => onServerClick(row.original)} />
+ ),
+ },
+ {
+ id: "description",
+ accessorKey: "description",
+ meta: { title: "Description", className: "hidden md:table-cell" },
+ header: ({ column }) =>
+ {row.original.transport}
+
+ ),
+ },
+ {
+ id: "auth_type",
+ accessorKey: "auth_type",
+ meta: { title: "Auth Type", skeleton: "badge", className: "hidden md:table-cell" },
+ header: ({ column }) => = ({ accessToken, publicPage, premiumUser, userRole }) => {
@@ -66,12 +61,12 @@ const ModelHubTable: React.FC = ({ accessToken, publicPage,
const canModify = isProxyAdminRole(userRole || "");
const [publicPageAllowed, setPublicPageAllowed] = useState(false);
- const [modelHubData, setModelHubData] = useState(null);
+ const [modelHubData, setModelHubData] = useState(null);
const [loading, setLoading] = useState(true);
const [isModalVisible, setIsModalVisible] = useState(false);
const [isPublicPageModalVisible, setIsPublicPageModalVisible] = useState(false);
- const [selectedModel, setSelectedModel] = useState(null);
- const [filteredData, setFilteredData] = useState([]);
+ const [selectedModel, setSelectedModel] = useState(null);
+ const [filteredData, setFilteredData] = useState([]);
const [isMakePublicModalVisible, setIsMakePublicModalVisible] = useState(false);
// Agent Hub state
const [agentHubData, setAgentHubData] = useState(null);
@@ -108,12 +103,12 @@ const ModelHubTable: React.FC = ({ accessToken, publicPage,
// If token is invalid, redirect to login
if (!isTokenValid) {
- router.replace(`${getProxyBaseUrl()}/ui/login`);
+ window.location.replace(getLoginUrl(getProxyBaseUrl()));
return;
}
}
// If require_auth_for_public_ai_hub is false, allow public access (no change)
- }, [isUISettingsLoading, publicPage, uiSettings, router]);
+ }, [isUISettingsLoading, publicPage, uiSettings]);
useEffect(() => {
const fetchData = async (accessToken: string) => {
@@ -152,17 +147,23 @@ const ModelHubTable: React.FC = ({ accessToken, publicPage,
}
};
- if (accessToken) {
- fetchData(accessToken);
- } else if (publicPage) {
- fetchPublicData();
- }
+ const fetchModelData = async () => {
+ if (accessToken) {
+ await fetchData(accessToken);
+ } else if (publicPage) {
+ await fetchPublicData();
+ } else {
+ setLoading(false);
+ }
+ };
+ fetchModelData();
}, [accessToken, publicPage]);
// Fetch Agent Hub data
useEffect(() => {
const fetchAgentData = async () => {
if (!accessToken) {
+ setAgentLoading(false);
return;
}
@@ -192,6 +193,7 @@ const ModelHubTable: React.FC = ({ accessToken, publicPage,
useEffect(() => {
const fetchMcpData = async () => {
if (!accessToken) {
+ setMcpLoading(false);
return;
}
@@ -230,20 +232,20 @@ const ModelHubTable: React.FC = ({ accessToken, publicPage,
fetchSkillData();
}, [accessToken, publicPage]);
- const showModal = (model: ModelGroupInfo) => {
+ const showModal = useCallback((model: ModelHubData) => {
setSelectedModel(model);
setIsModalVisible(true);
- };
+ }, []);
- const showAgentModal = (agent: AgentHubData) => {
+ const showAgentModal = useCallback((agent: AgentHubData) => {
setSelectedAgent(agent);
setIsAgentModalVisible(true);
- };
+ }, []);
- const showMcpModal = (server: MCPServerData) => {
+ const showMcpModal = useCallback((server: MCPServerData) => {
setSelectedMcpServer(server);
setIsMcpModalVisible(true);
- };
+ }, []);
const goToPublicModelPage = () => {
router.replace(`/model_hub_table?key=${accessToken}`);
@@ -296,11 +298,6 @@ const ModelHubTable: React.FC = ({ accessToken, publicPage,
setSelectedMcpServer(null);
};
- const copyToClipboard = (text: string) => {
- navigator.clipboard.writeText(text);
- NotificationsManager.success("Copied to clipboard!");
- };
-
const formatCapabilityName = (key: string) => {
// Remove 'supports_' prefix and convert snake_case to Title Case
return key
@@ -310,7 +307,7 @@ const ModelHubTable: React.FC = ({ accessToken, publicPage,
.join(" ");
};
- const getModelCapabilities = (model: ModelGroupInfo) => {
+ const getModelCapabilities = (model: ModelHubData) => {
// Find all properties that start with 'supports_' and are true
return Object.entries(model)
.filter(([key, value]) => key.startsWith("supports_") && value === true)
@@ -372,10 +369,18 @@ const ModelHubTable: React.FC = ({ accessToken, publicPage,
}
};
- const handleFilteredDataChange = useCallback((newFilteredData: ModelGroupInfo[]) => {
+ const handleFilteredDataChange = useCallback((newFilteredData: ModelHubData[]) => {
setFilteredData(newFilteredData);
}, []);
+ const [modelSorting, setModelSorting] = useState([{ id: "model_group", desc: false }]);
+ const [agentSorting, setAgentSorting] = useState([{ id: "name", desc: false }]);
+ const [mcpSorting, setMcpSorting] = useState([{ id: "server_name", desc: false }]);
+
+ const modelColumns = useMemo(() => getModelHubTableColumns({ onModelClick: showModal }), [showModal]);
+ const agentColumns = useMemo(() => getAgentHubTableColumns({ onAgentClick: showAgentModal }), [showAgentModal]);
+ const mcpColumns = useMemo(() => getMCPHubTableColumns({ onServerClick: showMcpModal }), [showMcpModal]);
+
// If this is a public page, use the dedicated PublicModelHub component
if (publicPage && publicPageAllowed) {
return = ({ accessToken, publicPage,
{`${getProxyBaseUrl()}/ui/model_hub_table`}
- setSelectedSkill(skill), copyToClipboard, publicPage)}
+ skill.id || String(index)}
+ sortingMode="client"
+ sorting={sorting}
+ onSortingChange={setSorting}
+ isLoading={isLoading}
+ loadingMessage="Loading skills…"
+ noDataMessage={
diff --git a/ui/litellm-dashboard/src/components/AIHub/SkillHubTableColumns.test.tsx b/ui/litellm-dashboard/src/components/AIHub/SkillHubTableColumns.test.tsx
new file mode 100644
index 00000000000..5a625d384f1
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/AIHub/SkillHubTableColumns.test.tsx
@@ -0,0 +1,73 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { DataTable } from "@/components/shared/DataTable";
+import { Plugin } from "@/components/claude_code_plugins/types";
+import { getSkillHubTableColumns } from "./SkillHubTableColumns";
+
+const mockSkill: Plugin = {
+ id: "skill-1",
+ name: "pdf-tools",
+ description: "Work with PDF files",
+ source: { source: "github", repo: "org/pdf-tools" },
+ category: "documents",
+ domain: "Productivity",
+ enabled: true,
+};
+
+function renderTable(data: Plugin[], onSkillClick = vi.fn()) {
+ render(
+
-
-
+ = ({ data, onView, onEdit, onDelete, isLoading = false }) => {
+ const [sorting, setSorting] = useState(DEFAULT_SORTING);
+
+ const columns = useMemo(() => getVectorStoreTableColumns({ onView, onEdit, onDelete }), [onView, onEdit, onDelete]);
+
+ return (
+ vectorStore.vector_store_id || String(index)}
+ sortingMode="client"
+ sorting={sorting}
+ onSortingChange={setSorting}
+ isLoading={isLoading}
+ loadingMessage="Loading vector stores…"
+ noDataMessage={{displayText}}
+ />
+ );
+}
+
+interface VectorStoreRowActionsProps {
+ vectorStore: VectorStore;
+ onEdit: (vectorStoreId: string) => void;
+ onDelete: (vectorStoreId: string) => void;
+}
+
+function VectorStoreRowActions({ vectorStore, onEdit, onDelete }: VectorStoreRowActionsProps) {
+ return (
+
+
+
+
+ onEdit(vectorStore.vector_store_id)}>
+
+ void copyToClipboard(vectorStore.vector_store_id, "Vector store ID copied")}
+ >
+
+ onDelete(vectorStore.vector_store_id)}
+ >
+
+
+
+ );
+}
+
+interface VectorStoreTableColumnsDeps {
+ onView: (vectorStoreId: string) => void;
+ onEdit: (vectorStoreId: string) => void;
+ onDelete: (vectorStoreId: string) => void;
+}
+
+export const getVectorStoreTableColumns = ({
+ onView,
+ onEdit,
+ onDelete,
+}: VectorStoreTableColumnsDeps): ColumnDef[] => [
+ {
+ id: "vector_store_id",
+ accessorKey: "vector_store_id",
+ meta: { title: "Vector Store ID" },
+ header: ({ column }) => onView(row.original.vector_store_id)}
+ />
+ ),
+ },
+ {
+ id: "vector_store_name",
+ accessorKey: "vector_store_name",
+ meta: { title: "Name" },
+ header: ({ column }) => = ({ accessToken, userID, userRole }) => {
const [vectorStores, setVectorStores] = useState([]);
+ const [isLoadingVectorStores, setIsLoadingVectorStores] = useState(true);
const [isCreateModalVisible, setIsCreateModalVisible] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [vectorStoreToDelete, setVectorStoreToDelete] = useState(null);
@@ -46,13 +47,18 @@ const VectorStoreManagement: React.FC = ({ accessToken, userID
const [isDeleting, setIsDeleting] = useState(false);
const fetchVectorStores = async () => {
- if (!accessToken) return;
+ if (!accessToken) {
+ setIsLoadingVectorStores(false);
+ return;
+ }
try {
const response = await vectorStoreListCall(accessToken);
setVectorStores(response.data || []);
} catch (error) {
console.error("Error fetching vector stores:", error);
NotificationsManager.fromBackend("Error fetching vector stores: " + error);
+ } finally {
+ setIsLoadingVectorStores(false);
}
};
@@ -181,6 +187,7 @@ const VectorStoreManagement: React.FC = ({ accessToken, userID
{
expect(screen.getByText("The invitation link may be invalid or expired.")).toBeInTheDocument();
});
- it("should render a Back to Login link pointing to /ui/login", () => {
+ it("should render a Back to Login link pointing to /ui/login/", () => {
render(
);
diff --git a/ui/litellm-dashboard/src/components/AIHub/AgentHubTableColumns.test.tsx b/ui/litellm-dashboard/src/components/AIHub/AgentHubTableColumns.test.tsx
index f980aee3c2c..487cbf90c81 100644
--- a/ui/litellm-dashboard/src/components/AIHub/AgentHubTableColumns.test.tsx
+++ b/ui/litellm-dashboard/src/components/AIHub/AgentHubTableColumns.test.tsx
@@ -1,7 +1,7 @@
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
-import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { describe, expect, it, vi } from "vitest";
+import { DataTable } from "@/components/shared/DataTable";
import { getAgentHubTableColumns, AgentHubData } from "./AgentHubTableColumns";
const mockAgent: AgentHubData = {
@@ -22,123 +22,106 @@ const mockAgent: AgentHubData = {
is_public: true,
};
-function TestTable({
- data,
- publicPage = false,
- showModal = vi.fn(),
- copyToClipboard = vi.fn(),
-}: {
- data: AgentHubData[];
- publicPage?: boolean;
- showModal?: ReturnType
+
);
+}
+
+const VectorStoreTable: React.FC
+
+ No vector stores
+
+ Connect a vector store to enable retrieval-augmented generation.
+ {logo ? (
+ {
+ (event.currentTarget as HTMLImageElement).style.display = "none";
+ }}
+ />
+ ) : null}
+ {displayName}
+
+ );
+}
+
+function VectorStoreFilesCell({ vectorStore }: { vectorStore: VectorStore }) {
+ const ingestedFiles = vectorStore.vector_store_metadata?.ingested_files || [];
+ if (ingestedFiles.length === 0) {
+ return -;
+ }
+
+ const filenames = ingestedFiles.map((file) => file.filename || file.file_url || "Unknown").join(", ");
+ const displayText =
+ ingestedFiles.length === 1
+ ? ingestedFiles[0].filename || ingestedFiles[0].file_url || "1 file"
+ : `${ingestedFiles.length} files`;
+
+ return (
+
+
+ ),
+ },
+];
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/index.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/index.test.tsx
new file mode 100644
index 00000000000..2931372f384
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/index.test.tsx
@@ -0,0 +1,53 @@
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { vectorStoreListCall } from "@/components/networking";
+
+import VectorStoreManagement from "./index";
+
+vi.mock("@/components/networking", () => ({
+ vectorStoreListCall: vi.fn(),
+ vectorStoreDeleteCall: vi.fn(),
+ credentialListCall: vi.fn(),
+}));
+
+vi.mock("./VectorStoreTable", () => ({
+ __esModule: true,
+ default: ({ isLoading }: { isLoading?: boolean }) => (
+ {isLoading ? "table-loading" : "table-loaded"}
+ ),
+}));
+
+vi.mock("./VectorStoreForm", () => ({ __esModule: true, default: () => null }));
+vi.mock("./vector_store_info", () => ({ __esModule: true, default: () => null }));
+vi.mock("./CreateVectorStore", () => ({ __esModule: true, default: () => null }));
+vi.mock("./TestVectorStoreTab", () => ({ __esModule: true, default: () => null }));
+
+const mockVectorStoreListCall = vi.mocked(vectorStoreListCall);
+
+describe("VectorStoreManagement loading state", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("should resolve the loading state when accessToken is null instead of showing the skeleton forever", async () => {
+ render(
-
+
| {flexRender(h.column.columnDef.header, h.getContext())} | - ))} -
|---|
| {flexRender(cell.column.columnDef.cell, cell.getContext())} | - ))} -
-
- );
- },
- },
- {
- header: "Description",
- accessorKey: "description",
- enableSorting: true,
- sortingFn: "alphanumeric",
- cell: ({ row }) => {
- const agent = row.original;
+function AgentHubRowActions({ agent, onAgentClick }: AgentHubRowActionsProps) {
+ return (
+
- {agent.name}
-
- copyToClipboard(agent.name)}
- className="cursor-pointer text-gray-500 hover:text-blue-500 text-xs"
- />
-
-
- {/* Show description on mobile */}
-
- {agent.description}
-
-
-
- {skills.length} skill{skills.length !== 1 ? "s" : ""}
-
- {skills.length > 0 && (
-
- );
- },
- },
- {
- header: "Capabilities",
- accessorKey: "capabilities",
- enableSorting: false,
- cell: ({ row }) => {
- const agent = row.original;
- const capabilities = agent.capabilities || {};
- const capabilityList = Object.entries(capabilities)
- .filter(([_, value]) => value === true)
- .map(([key]) => key);
-
- return (
-
- {skills.slice(0, 2).map((skill) => (
-
- {skill.name}
-
- ))}
- {skills.length > 2 && +{skills.length - 2} }
-
- )}
-
- {capabilityList.length === 0 ? (
- -
- ) : (
- capabilityList.map((capability) => (
-
- {capability}
+export const getAgentHubTableColumns = ({ onAgentClick }: AgentHubTableColumnsDeps): ColumnDef[] => [
+ {
+ id: "name",
+ accessorKey: "name",
+ meta: { title: "Agent Name" },
+ header: ({ column }) => onAgentClick(row.original)} />
+ ),
+ },
+ {
+ id: "description",
+ accessorKey: "description",
+ meta: { title: "Description", className: "hidden md:table-cell" },
+ header: ({ column }) =>
+ v{row.original.version}
+
+ ),
+ },
+ {
+ id: "protocolVersion",
+ accessorKey: "protocolVersion",
+ meta: { title: "Protocol", className: "hidden lg:table-cell" },
+ header: ({ column }) =>
+ );
},
- {
- header: "I/O Modes",
- accessorKey: "defaultInputModes",
- enableSorting: false,
- cell: ({ row }) => {
- const agent = row.original;
- const inputModes = agent.defaultInputModes || [];
- const outputModes = agent.defaultOutputModes || [];
-
- return (
-
+
+ {skills.length} skill{skills.length !== 1 ? "s" : ""}
+
+ {skills.length > 0 && (
+
+ )}
+
+ {skills.slice(0, 2).map((skill) => (
+
+ {skill.name}
- ))
- )}
-
- );
- },
+ ))}
+ {skills.length > 2 && +{skills.length - 2}}
+
-
- In: {inputModes.join(", ") || "-"}
-
-
- Out: {outputModes.join(", ") || "-"}
-
-
- );
- },
- meta: {
- className: "hidden xl:table-cell",
- },
+ },
+ {
+ id: "capabilities",
+ meta: { title: "Capabilities", skeleton: "chips" },
+ header: "Capabilities",
+ size: 160,
+ enableSorting: false,
+ cell: ({ row }) => {
+ const capabilityList = Object.entries(row.original.capabilities || {})
+ .filter(([, value]) => value === true)
+ .map(([key]) => key);
+ if (capabilityList.length === 0) {
+ return -;
+ }
+ return (
+
+ {capabilityList.map((capability) => (
+
+ {capability}
+
+ ))}
+
+ );
},
- {
- header: "Public",
- accessorKey: "is_public",
- enableSorting: true,
- sortingFn: (rowA, rowB) => {
- const publicA = rowA.original.is_public === true ? 1 : 0;
- const publicB = rowB.original.is_public === true ? 1 : 0;
- return publicA - publicB;
- },
- cell: ({ row }) => {
- const isPublic = row.original.is_public === true;
-
- return
+
+ In: {inputModes.join(", ") || "-"}
+
+
+ Out: {outputModes.join(", ") || "-"}
+
+
+ );
},
- {
- header: "Details",
- id: "details",
- enableSorting: false,
- cell: ({ row }) => {
- const agent = row.original;
-
- return (
-
- );
- },
+ },
+ {
+ id: "is_public",
+ accessorKey: "is_public",
+ meta: { title: "Public", skeleton: "badge", className: "hidden md:table-cell" },
+ header: ({ column }) =>
+
+ ),
+ },
+];
diff --git a/ui/litellm-dashboard/src/components/AIHub/MCPHubTableColumns.test.tsx b/ui/litellm-dashboard/src/components/AIHub/MCPHubTableColumns.test.tsx
new file mode 100644
index 00000000000..e32c861f13a
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/AIHub/MCPHubTableColumns.test.tsx
@@ -0,0 +1,91 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { DataTable } from "@/components/shared/DataTable";
+import { getMCPHubTableColumns, MCPServerData } from "./MCPHubTableColumns";
+
+const SERVER_URL = "https://mcp.exa.ai/mcp";
+
+const mockServer: MCPServerData = {
+ server_id: "server-1",
+ server_name: "exa_test",
+ description: "Fast, intelligent web search and web crawling",
+ url: SERVER_URL,
+ transport: "http",
+ auth_type: "none",
+ created_at: "2026-01-01T00:00:00Z",
+ created_by: "admin",
+ updated_at: "2026-01-01T00:00:00Z",
+ updated_by: "admin",
+ teams: [],
+ mcp_access_groups: [],
+ allowed_tools: [],
+ extra_headers: [],
+ mcp_info: {},
+ static_headers: {},
+ status: "active",
+ args: [],
+ env: {},
+};
+
+function renderTable(onServerClick = vi.fn()) {
+ render(
+
+
+ {tools.length > 0 ? `${tools.length} tool${tools.length !== 1 ? "s" : ""}` : "All tools"}
+
+ {tools.length > 0 && (
+
+ );
+ },
+ },
+ {
+ id: "created_by",
+ accessorKey: "created_by",
+ meta: { title: "Created By", className: "hidden xl:table-cell" },
+ header: ({ column }) =>
+ {tools.slice(0, 2).map((tool) => (
+
+ {tool}
+
+ ))}
+ {tools.length > 2 && +{tools.length - 2}}
+
+ )}
+
+
+ ),
+ },
+];
diff --git a/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.test.tsx b/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.test.tsx
index 3a22a55298e..5c4fa4eed43 100644
--- a/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.test.tsx
+++ b/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.test.tsx
@@ -1,5 +1,5 @@
import * as networking from "@/components/networking";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { renderWithProviders, screen, waitFor } from "../../../tests/test-utils";
import ModelHubTable from "./ModelHubTable";
@@ -7,6 +7,7 @@ const mockUseUISettings = vi.hoisted(() => vi.fn());
const mockGetCookie = vi.hoisted(() => vi.fn());
const mockCheckTokenValidity = vi.hoisted(() => vi.fn());
const mockRouterReplace = vi.hoisted(() => vi.fn());
+const mockLocationReplace = vi.hoisted(() => vi.fn());
vi.mock("@/components/networking", () => ({
getUiConfig: vi.fn(),
@@ -18,6 +19,7 @@ vi.mock("@/components/networking", () => ({
fetchMCPServers: vi.fn(),
getUiSettings: vi.fn(),
getClaudeCodeMarketplace: vi.fn(),
+ getClaudeCodePluginsList: vi.fn(() => Promise.resolve({ plugins: [] })),
}));
vi.mock("next/navigation", () => ({
@@ -43,7 +45,28 @@ vi.mock("@/utils/jwtUtils", () => ({
}));
describe("ModelHubTable", () => {
+ const originalLocation = window.location;
+
+ beforeEach(() => {
+ Object.defineProperty(window, "location", {
+ value: {
+ href: "http://localhost:4000/ui/model_hub_table",
+ origin: "http://localhost:4000",
+ hostname: "localhost",
+ pathname: "/ui/model_hub_table",
+ search: "",
+ protocol: "http:",
+ replace: mockLocationReplace,
+ },
+ writable: true,
+ });
+ });
+
afterEach(() => {
+ Object.defineProperty(window, "location", {
+ value: originalLocation,
+ writable: true,
+ });
vi.clearAllMocks();
});
@@ -60,6 +83,7 @@ describe("ModelHubTable", () => {
mockGetCookie.mockReturnValue(tokenValue);
mockCheckTokenValidity.mockReturnValue(isTokenValid);
mockRouterReplace.mockClear();
+ mockLocationReplace.mockClear();
// Setup other required mocks
vi.mocked(networking.getUiConfig).mockResolvedValue({
@@ -92,9 +116,10 @@ describe("ModelHubTable", () => {
await waitFor(() => {
if (shouldRedirect) {
- expect(mockRouterReplace).toHaveBeenCalledWith("http://localhost:4000/ui/login");
- } else {
+ expect(mockLocationReplace).toHaveBeenCalledWith("http://localhost:4000/ui/login/");
expect(mockRouterReplace).not.toHaveBeenCalled();
+ } else {
+ expect(mockLocationReplace).not.toHaveBeenCalled();
}
});
});
@@ -128,6 +153,21 @@ describe("ModelHubTable", () => {
});
});
+ it("should resolve loading to the empty state when there is no access token on the admin page", async () => {
+ vi.mocked(networking.getUiSettings).mockResolvedValue({
+ values: {},
+ });
+ mockUseUISettings.mockReturnValue({
+ data: { values: {} },
+ isLoading: false,
+ });
+
+ renderWithProviders(
+
+ );
}
const ModelHubTable: React.FC
+
+ {title}
+ {body}
+
-
+
+
Showing {filteredSkills.length} of {totalSkills} skill{totalSkills !== 1 ? "s" : ""} -
+
+ ),
+ },
+];
diff --git a/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.test.tsx b/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.test.tsx
index 08dc64767ff..994a920b2e4 100644
--- a/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.test.tsx
+++ b/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.test.tsx
@@ -1,7 +1,7 @@
import { render, screen, fireEvent, act, waitFor } from "@testing-library/react";
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import MakeMCPPublicForm from "./MakeMCPPublicForm";
-import { MCPServerData } from "../../mcp_hub_table_columns";
+import { MCPServerData } from "@/components/AIHub/MCPHubTableColumns";
// Mock the networking function
vi.mock("../../networking", () => ({
diff --git a/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.tsx b/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.tsx
index cc194775faa..b590c3cc1dd 100644
--- a/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.tsx
+++ b/ui/litellm-dashboard/src/components/AIHub/forms/MakeMCPPublicForm.tsx
@@ -3,7 +3,7 @@ import { Modal, Form, Steps, Button, Checkbox } from "antd";
import { Text, Title, Badge } from "@tremor/react";
import { makeMCPPublicCall } from "../../networking";
import NotificationsManager from "../../molecules/notifications_manager";
-import { MCPServerData } from "@/components/mcp_hub_table_columns";
+import { MCPServerData } from "@/components/AIHub/MCPHubTableColumns";
const { Step } = Steps;
diff --git a/ui/litellm-dashboard/src/components/DashboardHeader.tsx b/ui/litellm-dashboard/src/components/DashboardHeader.tsx
index 8b928f8e6fe..babf007d475 100644
--- a/ui/litellm-dashboard/src/components/DashboardHeader.tsx
+++ b/ui/litellm-dashboard/src/components/DashboardHeader.tsx
@@ -18,7 +18,7 @@ import WorkerDropdown from "@/components/Navbar/WorkerDropdown/WorkerDropdown";
import { useWorker } from "@/hooks/useWorker";
import { useDisableShowPrompts } from "@/app/(dashboard)/hooks/useDisableShowPrompts";
import { clearTokenCookies } from "@/utils/cookieUtils";
-import { clearStoredReturnUrl } from "@/utils/returnUrlUtils";
+import { clearStoredReturnUrl, getLoginUrl } from "@/utils/returnUrlUtils";
interface DashboardHeaderProps {
page: string;
@@ -37,7 +37,7 @@ export function DashboardHeader({ page }: DashboardHeaderProps) {
clearStoredReturnUrl();
localStorage.removeItem("litellm_selected_worker_id");
localStorage.removeItem("litellm_worker_url");
- window.location.href = `/ui/login?worker=${encodeURIComponent(workerId)}`;
+ window.location.href = `${getLoginUrl()}?worker=${encodeURIComponent(workerId)}`;
};
return (
diff --git a/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysPage.test.tsx b/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysPage.test.tsx
index 46df98a31de..05361f1c858 100644
--- a/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysPage.test.tsx
+++ b/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysPage.test.tsx
@@ -1,4 +1,5 @@
import { 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 DeletedKeysPage from "./DeletedKeysPage";
@@ -13,6 +14,9 @@ const mockUseDeletedKeys = useDeletedKeys as MockedFunction
@@ -27,10 +27,8 @@ export default function DeletedKeysPage() {
keys={keysData?.keys || []}
totalCount={keysData?.total_count || 0}
isLoading={isLoading}
- isFetching={isFetching}
- pageIndex={pageIndex}
- pageSize={pageSize}
- onPageChange={setPageIndex}
+ pagination={pagination}
+ onPaginationChange={setPagination}
/>
);
diff --git a/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysTable/DeletedKeysTable.test.tsx b/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysTable/DeletedKeysTable.test.tsx
index 081ae0a80b5..7e30ef2c135 100644
--- a/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysTable/DeletedKeysTable.test.tsx
+++ b/ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysTable/DeletedKeysTable.test.tsx
@@ -1,101 +1,88 @@
-import { screen } from "@testing-library/react";
+import { screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
import { vi, it, expect, beforeEach } from "vitest";
import { renderWithProviders } from "../../../../tests/test-utils";
import { DeletedKeysTable } from "./DeletedKeysTable";
import { DeletedKeyResponse } from "@/app/(dashboard)/hooks/keys/useKeys";
-const mockDeletedKey: DeletedKeyResponse = {
- token: "sk-1234567890abcdef",
- token_id: "key-1",
- key_name: "test-key",
- key_alias: "Test Key Alias",
- spend: 5.5,
- max_budget: 100,
- expires: "2024-12-31T23:59:59Z",
- models: ["gpt-3.5-turbo"],
- aliases: {},
- config: {},
- user_id: "user-1",
- team_id: "team-1",
- max_parallel_requests: 10,
- metadata: {},
- tpm_limit: 1000,
- rpm_limit: 100,
- duration: "30d",
- budget_duration: "1m",
- budget_reset_at: "2024-12-01T00:00:00Z",
- allowed_cache_controls: [],
- allowed_routes: [],
- permissions: {},
- model_spend: {},
- model_max_budget: {},
- soft_budget_cooldown: false,
- blocked: false,
- litellm_budget_table: {},
- organization_id: "org-1",
- created_at: "2024-11-01T10:00:00Z",
- updated_at: "2024-11-15T10:00:00Z",
- team_spend: 5.5,
- team_alias: "Test Team",
- team_tpm_limit: 5000,
- team_rpm_limit: 500,
- team_max_budget: 500,
- team_models: ["gpt-3.5-turbo"],
- team_blocked: false,
- soft_budget: 50,
- team_model_aliases: {},
- team_member_spend: 0,
- team_metadata: {},
- end_user_id: "end-user-1",
- end_user_tpm_limit: 100,
- end_user_rpm_limit: 10,
- end_user_max_budget: 10,
- last_refreshed_at: Date.now(),
- api_key: "sk-1234567890abcdef",
- user_role: "user",
- rpm_limit_per_model: {},
- tpm_limit_per_model: {},
- user_tpm_limit: 1000,
- user_rpm_limit: 100,
- user_email: "user@example.com",
- deleted_at: "2024-11-15T10:00:00Z",
- deleted_by: "user-1",
+const makeDeletedKey = (overrides: Partial
+
+ );
}
export function DeletedKeysTable({
keys,
totalCount,
isLoading,
- isFetching,
- pageIndex,
- pageSize,
- onPageChange,
+ pagination,
+ onPaginationChange,
}: DeletedKeysTableProps) {
- const [sorting, setSorting] = useState
+
+ No deleted keys found
+ Keys deleted from this proxy will show up here.
+
-
+
-
-
- {isLoading || isFetching ? (
- Loading...
- ) : (
-
- Showing {rangeLabel} of {totalCount} results
-
- )}
-
-
-
- {isLoading || isFetching ? (
- Loading...
- ) : (
-
- Page {currentPageIndex + 1} of {table.getPageCount()}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -19,7 +19,7 @@ export default function DeletedTeamsPage() {
description="Deleted team auditing is graduating from beta into our Enterprise audit & compliance suite."
/>
)}
-
);
}
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 358a9e90fa1..c0cc5a342a8 100644
--- a/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.test.tsx
+++ b/ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.test.tsx
@@ -1,10 +1,10 @@
-import { screen } from "@testing-library/react";
+import { screen, within } from "@testing-library/react";
import { vi, it, expect, beforeEach } from "vitest";
import { renderWithProviders } from "../../../../tests/test-utils";
import { DeletedTeamsTable } from "./DeletedTeamsTable";
import { DeletedTeam } from "@/app/(dashboard)/hooks/teams/useTeams";
-const mockDeletedTeam: DeletedTeam = {
+const makeDeletedTeam = (overrides: Partial
- {models.slice(0, 3).map((model: string, index: number) =>
- model === "all-proxy-models" ? (
-
- All Proxy Models
-
- ) : (
-
-
- {model.length > 30 ? `${getModelDisplayName(model).slice(0, 30)}...` : getModelDisplayName(model)}
-
-
- ),
- )}
- {models.length > 3 && (
-
-
- +{models.length - 3} {models.length - 3 === 1 ? "more model" : "more models"}
-
-
- )}
-
- );
- },
- },
- {
- id: "organization_id",
- accessorKey: "organization_id",
- header: "Organization",
- size: 150,
- maxSize: 200,
- cell: (info) =>
- [] => [
+ {
+ id: "model_group",
+ accessorKey: "model_group",
+ meta: { title: "Model Name" },
+ header: ({ column }) => onModelClick(row.original)}
+ />
+ ),
+ },
+ {
+ id: "providers",
+ accessorKey: "providers",
+ meta: { title: "Providers", skeleton: "chips" },
+ header: ({ column }) =>
+ [] => [
+ {
+ id: "name",
+ accessorKey: "name",
+ meta: { title: "Agent Name" },
+ header: ({ column }) => onAgentClick(row.original)}
+ />
+ ),
+ },
+ {
+ id: "description",
+ accessorKey: "description",
+ meta: { title: "Description" },
+ header: "Description",
+ size: 260,
+ enableSorting: false,
+ cell: ({ row }) => (
+
+ {row.original.description || "-"}
+
+ ),
+ },
+ {
+ id: "version",
+ accessorKey: "version",
+ meta: { title: "Version" },
+ header: ({ column }) => skill.name)} />,
+ },
+ {
+ id: "capabilities",
+ meta: { title: "Capabilities", skeleton: "chips" },
+ header: "Capabilities",
+ size: 160,
+ enableSorting: false,
+ cell: ({ row }) => {
+ const capabilityList = Object.entries(row.original.capabilities || {})
+ .filter(([, value]) => value === true)
+ .map(([key]) => key);
+ if (capabilityList.length === 0) {
+ return -;
+ }
+ return (
+ [] => [
+ {
+ id: "server_name",
+ accessorKey: "server_name",
+ meta: { title: "Server Name" },
+ header: ({ column }) => onServerClick(row.original)}
+ />
+ ),
+ },
+ {
+ id: "description",
+ meta: { title: "Description" },
+ header: "Description",
+ size: 260,
+ enableSorting: false,
+ cell: ({ row }) => {
+ const description = String(row.original.mcp_info?.description ?? "-");
+ return (
+
+ {description}
+
+ );
+ },
+ },
+ {
+ id: "transport",
+ accessorKey: "transport",
+ meta: { title: "Transport", skeleton: "badge" },
+ header: ({ column }) =>
+ {row.original.transport}
+
+ ),
+ },
+ {
+ id: "auth_type",
+ accessorKey: "auth_type",
+ meta: { title: "Auth Type", skeleton: "badge" },
+ header: ({ column }) => {
}}
/>,
);
- expect(getByText("OpenTelemetry")).toBeInTheDocument();
+ expect(screen.getByText("OpenTelemetry")).toBeInTheDocument();
});
it("should fallback to original callback name when not in availableCallbacks", () => {
- const { getByText } = render(
+ render(
{
}}
/>,
);
- // Both rows show the same display name, but distinct mode badges.
- expect(getAllByText("Custom Callback API")).toHaveLength(2);
- expect(getByText("Success")).toBeInTheDocument();
- expect(getByText("Failure")).toBeInTheDocument();
+ expect(screen.getAllByText("Custom Callback API")).toHaveLength(2);
+ expect(screen.getByText("Success")).toBeInTheDocument();
+ expect(screen.getByText("Failure")).toBeInTheDocument();
});
});
diff --git a/ui/litellm-dashboard/src/components/Settings/LoggingAndAlerts/LoggingCallbacks/LoggingCallbacksTable.tsx b/ui/litellm-dashboard/src/components/Settings/LoggingAndAlerts/LoggingCallbacks/LoggingCallbacksTable.tsx
index 4f1889cbc99..d27b0cfd340 100644
--- a/ui/litellm-dashboard/src/components/Settings/LoggingAndAlerts/LoggingCallbacks/LoggingCallbacksTable.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/LoggingAndAlerts/LoggingCallbacks/LoggingCallbacksTable.tsx
@@ -1,118 +1,75 @@
-import { Button } from "@tremor/react";
-import type { TableProps } from "antd";
-import { Table } from "antd";
-import Title from "antd/es/typography/Title";
-import React from "react";
-import { StatusBadge, type StatusTone } from "@/components/shared/table_cells";
-import TableIconActionButton from "../../../common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
+"use client";
+
+import { Inbox, Plus } from "lucide-react";
+import React, { useMemo } from "react";
+
+import { DataTable } from "@/components/shared/DataTable";
+import { Button } from "@/components/ui/button";
+
+import {
+ AvailableCallbacks,
+ CallbackRow,
+ callbackRowMode,
+ getLoggingCallbacksTableColumns,
+} from "./LoggingCallbacksTableColumns";
import { AlertingObject } from "./types";
type LoggingCallbacksProps = {
callbacks: AlertingObject[];
- availableCallbacks?: Record<
- string,
- {
- litellm_callback_name: string;
- litellm_callback_params: string[];
- ui_callback_name: string;
- }
- >;
+ availableCallbacks?: AvailableCallbacks;
+ isLoading?: boolean;
onTest?: (callback: AlertingObject) => void | Promise;
onEdit?: (callback: AlertingObject) => void;
onDelete?: (callback: AlertingObject) => void;
onAdd?: () => void;
};
-type CallbackRow = AlertingObject & {
- id?: string;
- mode?: "success" | "failure" | "info" | string;
-};
-
-const CALLBACK_MODES: { value: string; label: string }[] = [
- { value: "success", label: "Success" },
- { value: "failure", label: "Failure" },
- { value: "success_and_failure", label: "Success & Failure" },
-];
+function EmptyState() {
+ return (
+ = ({
callbacks,
availableCallbacks = {},
+ isLoading = false,
onTest = () => {},
onEdit = () => {},
onDelete = () => {},
onAdd = () => {},
}) => {
- const columns: TableProps["columns"] = [
- {
- title: Callback Name,
- dataIndex: "name",
- key: "name",
- render: (_: string, record: CallbackRow) => {
- const id = record.name;
- const displayName = availableCallbacks[id]?.ui_callback_name || id;
- return
- (DEFAULT_SORTING);
+
+ const columns = useMemo(() => getDeletedTeamsTableColumns(), []);
+
+ return (
+ team.team_id || String(index)}
+ sortingMode="client"
+ sorting={sorting}
+ onSortingChange={setSorting}
+ isLoading={isLoading}
+ loadingMessage="Loading deleted teams…"
+ noDataMessage={[] => [
+ {
+ id: "team_alias",
+ accessorKey: "team_alias",
+ meta: { title: "Team Name" },
+ header: "Team Name",
+ size: 150,
+ enableSorting: false,
+ cell: ({ row }) => {
+ const value = row.original.team_alias;
+ if (!value) {
+ return -;
+ }
+ return (
+
+ {value}
+
+ );
+ },
+ },
+ {
+ id: "team_id",
+ accessorKey: "team_id",
+ meta: { title: "Team ID" },
+ header: "Team ID",
+ size: 150,
+ enableSorting: false,
+ cell: ({ row }) => endpoint.id || endpoint.path || String(index)}
+ isLoading={isLoading}
+ loadingMessage="Loading pass-through endpoints…"
+ noDataMessage={ALL ;
+ }
+ return (
+
+
+
+
+ endpointId && onEndpointClick(endpointId)}
+ >
+
+ endpointId && onDeleteClick(endpointId)}
+ >
+
+
+
+ );
+}
+
+interface PassThroughEndpointsTableColumnsDeps {
+ onEndpointClick: (endpointId: string) => void;
+ onDeleteClick: (endpointId: string) => void;
+}
+
+export const getPassThroughEndpointsTableColumns = ({
+ onEndpointClick,
+ onDeleteClick,
+}: PassThroughEndpointsTableColumnsDeps): ColumnDef[] => [
+ {
+ id: "id",
+ accessorKey: "id",
+ meta: { title: "ID" },
+ header: "ID",
+ size: 190,
+ enableSorting: false,
+ cell: ({ row }) => {
+ const endpointId = row.original.id;
+ if (!endpointId) return —;
+ return (
+ onEndpointClick(endpointId)}
+ />
+ );
+ },
+ },
+ {
+ id: "path",
+ accessorKey: "path",
+ meta: { title: "Path" },
+ header: "Path",
+ size: 200,
+ enableSorting: false,
+ cell: ({ row }) => (
+
+ {row.original.path}
+
+ ),
+ },
+ {
+ id: "target",
+ accessorKey: "target",
+ meta: { title: "Target" },
+ header: "Target",
+ size: 240,
+ enableSorting: false,
+ cell: ({ row }) => (
+
+ {row.original.target}
+
+ ),
+ },
+ {
+ id: "methods",
+ meta: { title: "Methods", skeleton: "chips" },
+ header: () => ) => (
+ ;
+ default_query_params?: Record;
+}
+
+const PassThroughSettings: React.FC = ({ accessToken, userRole, userID, premiumUser }) => {
+ const [generalSettings, setGeneralSettings] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [selectedEndpointId, setSelectedEndpointId] = useState(null);
+ const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+ const [endpointToDelete, setEndpointToDelete] = useState(null);
+
+ useEffect(() => {
+ const fetchEndpoints = async () => {
+ if (!accessToken || !userRole || !userID) {
+ setIsLoading(false);
+ return;
+ }
+ try {
+ const data = await getPassThroughEndpointsCall(accessToken);
+ setGeneralSettings(data["endpoints"]);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+ fetchEndpoints();
+ }, [accessToken, userRole, userID]);
+
+ const handleEndpointUpdated = () => {
+ if (accessToken) {
+ getPassThroughEndpointsCall(accessToken).then((data) => {
+ setGeneralSettings(data["endpoints"]);
+ });
+ }
+ };
+
+ const handleDelete = (endpointId: string) => {
+ setEndpointToDelete(endpointId);
+ setIsDeleteModalOpen(true);
+ };
+
+ const confirmDelete = async () => {
+ if (endpointToDelete == null || !accessToken) {
+ return;
+ }
+
+ try {
+ await deletePassThroughEndpointsCall(accessToken, endpointToDelete);
+
+ const updatedSettings = generalSettings.filter((setting) => setting.id !== endpointToDelete);
+ setGeneralSettings(updatedSettings);
+
+ NotificationsManager.success("Endpoint deleted successfully.");
+ } catch (error) {
+ console.error("Error deleting the endpoint:", error);
+ NotificationsManager.fromBackend("Error deleting the endpoint: " + error);
+ }
+
+ setIsDeleteModalOpen(false);
+ setEndpointToDelete(null);
+ };
+
+ const cancelDelete = () => {
+ setIsDeleteModalOpen(false);
+ setEndpointToDelete(null);
+ };
+
+ if (!accessToken) {
+ return null;
+ }
+
+ if (selectedEndpointId) {
+ const selectedEndpoint = generalSettings.find((endpoint) => endpoint.id === selectedEndpointId);
+
+ if (!selectedEndpoint) {
+ return setSelectedEndpointId(null)}
+ accessToken={accessToken}
+ isAdmin={userRole === "Admin" || userRole === "admin"}
+ premiumUser={premiumUser}
+ onEndpointUpdated={handleEndpointUpdated}
+ />
+ );
+ }
+
+ return (
+ = {
+ healthy: "success",
+ unhealthy: "error",
+};
+
+function ProviderChips({ providers }: { providers: string[] }) {
+ return (
+
+ );
+}
+
+interface PublicModelHubColumnsDeps {
+ onModelClick: (model: ModelGroupInfo) => void;
+}
+
+export const getPublicModelHubColumns = ({ onModelClick }: PublicModelHubColumnsDeps): ColumnDef
- {isLoading || isFetching ? (
- Loading...
- ) : (
-
- Showing {teams.length} {teams.length === 1 ? "team" : "teams"}
-
- )}
-
-
-
+
-
-
-
-
-
-
+
);
}
+
+export function DeletedTeamsTable({ teams, isLoading }: DeletedTeamsTableProps) {
+ const [sorting, setSorting] = useState
+
+ No deleted teams found
+ Teams deleted from this proxy will show up here.
+
+ );
+}
+
+export function PassThroughEndpointsTable({
+ endpoints,
+ isLoading,
+ onEndpointClick,
+ onDeleteClick,
+}: PassThroughEndpointsTableProps) {
+ const columns = useMemo(
+ () => getPassThroughEndpointsTableColumns({ onEndpointClick, onDeleteClick }),
+ [onEndpointClick, onDeleteClick],
+ );
+
+ return (
+
+
+ No pass-through endpoints configured
+ Add a pass-through endpoint to route custom paths.
+
+ {title}
+
+ );
+}
+
+function HeadersCell({ value }: { value: object }) {
+ const [showHeaders, setShowHeaders] = useState(false);
+ const headerString = JSON.stringify(value);
+
+ return (
+
+ {showHeaders ? headerString : "••••••••"}
+
+
+ );
+}
+
+function MethodsCell({ methods }: { methods: string[] | undefined }) {
+ if (!methods || methods.length === 0) {
+ return
+ {methods.map((method) => (
+
+ {method}
+
+ ))}
+
+ );
+}
+
+interface EndpointRowActionsProps {
+ endpoint: passThroughItem;
+ onEndpointClick: (endpointId: string) => void;
+ onDeleteClick: (endpointId: string) => void;
+}
+
+function EndpointRowActions({ endpoint, onEndpointClick, onDeleteClick }: EndpointRowActionsProps) {
+ const endpointId = endpoint.id;
+ return (
+
+
+ ),
+ },
+];
diff --git a/ui/litellm-dashboard/src/components/PassThroughSettings/PassThroughSettings.test.tsx b/ui/litellm-dashboard/src/components/PassThroughSettings/PassThroughSettings.test.tsx
new file mode 100644
index 00000000000..90269a916f7
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/PassThroughSettings/PassThroughSettings.test.tsx
@@ -0,0 +1,120 @@
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { deletePassThroughEndpointsCall, getPassThroughEndpointsCall } from "../networking";
+import PassThroughSettings from "./PassThroughSettings";
+import type { PassThroughEndpointsTable } from "./PassThroughEndpointsTable";
+
+vi.mock("../networking", () => ({
+ getPassThroughEndpointsCall: vi.fn(),
+ deletePassThroughEndpointsCall: vi.fn(),
+}));
+
+vi.mock("../add_pass_through", () => ({
+ default: () => ,
+}));
+
+vi.mock("../pass_through_info", () => ({
+ default: ({ endpointData }: { endpointData: { id?: string } }) => (
+ {endpointData.id}
+ ),
+}));
+
+vi.mock("../molecules/notifications_manager", () => ({
+ __esModule: true,
+ default: { success: vi.fn(), fromBackend: vi.fn() },
+}));
+
+vi.mock("./PassThroughEndpointsTable", () => ({
+ PassThroughEndpointsTable: (props: React.ComponentProps
+ {props.endpoints.map((endpoint) => (
+
+ ),
+}));
+
+const mockGetEndpoints = vi.mocked(getPassThroughEndpointsCall);
+const mockDeleteEndpoint = vi.mocked(deletePassThroughEndpointsCall);
+
+const defaultProps = {
+ accessToken: "token",
+ userRole: "Admin",
+ userID: "user-1",
+ premiumUser: false,
+};
+
+const endpoint = { id: "ep-1", path: "/v1/rerank", target: "https://example.com", headers: {} };
+
+describe("PassThroughSettings", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mockGetEndpoints.mockResolvedValue({ endpoints: [endpoint] });
+ });
+
+ it("should render nothing without an access token", () => {
+ const { container } = render(
+
+
+
+ ))}
+ Endpoint not found
;
+ }
+
+ return (
+
+
+ );
+};
+
+export default PassThroughSettings;
diff --git a/ui/litellm-dashboard/src/components/PublicModelHubTableColumns.tsx b/ui/litellm-dashboard/src/components/PublicModelHubTableColumns.tsx
new file mode 100644
index 00000000000..ab0ed976149
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/PublicModelHubTableColumns.tsx
@@ -0,0 +1,470 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+
+import { DataTableSortHeader } from "@/components/shared/DataTable";
+import { CellTooltip, IdentityCell, StatusBadge, type StatusTone } from "@/components/shared/table_cells";
+import { Badge } from "@/components/ui/badge";
+import { getProviderLogoAndName } from "@/components/provider_info_helpers";
+
+export interface ModelGroupInfo {
+ model_group: string;
+ providers: string[];
+ max_input_tokens?: number;
+ max_output_tokens?: number;
+ input_cost_per_token?: number;
+ output_cost_per_token?: number;
+ mode?: string;
+ tpm?: number;
+ rpm?: number;
+ supports_parallel_function_calling: boolean;
+ supports_vision: boolean;
+ supports_function_calling: boolean;
+ supported_openai_params?: string[];
+ health_status?: string;
+ health_response_time?: number;
+ health_checked_at?: string;
+ [key: string]: any;
+}
+
+export interface AgentCard {
+ protocolVersion: string;
+ name: string;
+ description: string;
+ url: string;
+ version: string;
+ capabilities?: {
+ streaming?: boolean;
+ pushNotifications?: boolean;
+ stateTransitionHistory?: boolean;
+ };
+ defaultInputModes: string[];
+ defaultOutputModes: string[];
+ skills: Array<{
+ id: string;
+ name: string;
+ description: string;
+ tags: string[];
+ }>;
+ iconUrl?: string;
+ provider?: {
+ organization: string;
+ url: string;
+ };
+ documentationUrl?: string;
+ [key: string]: any;
+}
+
+export interface MCPServerData {
+ server_id: string;
+ name: string;
+ alias?: string | null;
+ server_name: string;
+ transport: string;
+ spec_path?: string | null;
+ auth_type: string;
+ mcp_info: {
+ server_name: string;
+ description?: string;
+ mcp_server_cost_info?: any;
+ };
+ [key: string]: any;
+}
+
+const formatCapabilityName = (key: string) =>
+ key
+ .replace(/^supports_/, "")
+ .split("_")
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(" ");
+
+const formatCost = (cost: number) => `$${(cost * 1_000_000).toFixed(4)}`;
+
+const formatTokens = (tokens: number | undefined) => {
+ if (!tokens) return "N/A";
+ if (tokens >= 1000) return `${(tokens / 1000).toFixed(0)}K`;
+ return tokens.toString();
+};
+
+const formatLimits = (rpm?: number, tpm?: number) => {
+ const limits = [...(rpm ? [`RPM: ${rpm.toLocaleString()}`] : []), ...(tpm ? [`TPM: ${tpm.toLocaleString()}`] : [])];
+ return limits.length > 0 ? limits.join(", ") : "N/A";
+};
+
+const getModeIcon = (mode: string) => {
+ switch (mode?.toLowerCase()) {
+ case "chat":
+ return "💬";
+ case "rerank":
+ return "🔄";
+ case "embedding":
+ return "📄";
+ default:
+ return "🤖";
+ }
+};
+
+const HEALTH_TONES: Record
+
+
+ Pass Through Endpoints
+Configure and manage your pass-through endpoints
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Delete Pass-Through Endpoint
+
+
+ + Are you sure you want to delete this pass-through endpoint? This action cannot be undone. +
+
+
+
+
+
+ {providers.map((provider) => {
+ const { logo } = getProviderLogoAndName(provider);
+ return (
+
+ {logo && (
+ {
+ (e.target as HTMLImageElement).style.display = "none";
+ }}
+ />
+ )}
+ {provider}
+
+ );
+ })}
+
+ );
+}
+
+function OverflowChips({ items }: { items: string[] }) {
+ if (items.length === 0) {
+ return -;
+ }
+ return (
+
+ {items[0]}
+ {items.length > 1 && (
+
+ {items.map((item) => (
+
+ }
+ trigger={+{items.length - 1}}
+ />
+ )}
+
+ • {item}
+
+ ))}
+ {responseTimeLabel}
+ {lastCheckedLabel}
+
+ }
+ trigger={
+
+
+ {capabilityList.map((capability) => (
+
+ {capability}
+
+ ))}
+
+ );
+ },
+ },
+];
+
+interface PublicMCPHubColumnsDeps {
+ onServerClick: (server: MCPServerData) => void;
+}
+
+export const getPublicMCPHubColumns = ({ onServerClick }: PublicMCPHubColumnsDeps): ColumnDef
+
+ );
+}
export const LoggingCallbacksTable: React.FC
+
+ No callbacks configured
+
+ Add your first callback to start logging data to external services.
+
+ {displayName}
;
- },
- },
- {
- title: Mode,
- key: "mode",
- render: (_: unknown, record: CallbackRow) => {
- // Backend sends `type` (success | failure); legacy in-memory rows
- // from add-callback flow set `mode`. Read both so newly-added rows
- // and server-fetched rows both render correctly.
- const mode = record.type || record.mode || "success";
- const label = CALLBACK_MODES.find((m) => m.value === mode)?.label || mode;
- const tone: StatusTone = mode === "success" ? "success" : mode === "failure" ? "error" : "info";
- return
- onTest(record)} />
- onEdit(record)} />
- onDelete(record)} />
-
- ),
- width: 240,
- },
- ];
+ const columns = useMemo(() => {
+ const deps = { availableCallbacks, onTest, onEdit, onDelete };
+ return getLoggingCallbacksTableColumns(deps);
+ }, [availableCallbacks, onTest, onEdit, onDelete]);
+
return (
- <>
-
-