From cd41b490614d64e9e429d7eb6f1d18747df374d2 Mon Sep 17 00:00:00 2001 From: yuneng-jiang Date: Wed, 25 Feb 2026 10:51:42 -0800 Subject: [PATCH] fixing build --- .../src/components/ToolPolicies.tsx | 166 +++++++++++------- .../organisms/create_key_button.tsx | 25 +-- 2 files changed, 119 insertions(+), 72 deletions(-) diff --git a/ui/litellm-dashboard/src/components/ToolPolicies.tsx b/ui/litellm-dashboard/src/components/ToolPolicies.tsx index f69d9cf0c4..860093cead 100644 --- a/ui/litellm-dashboard/src/components/ToolPolicies.tsx +++ b/ui/litellm-dashboard/src/components/ToolPolicies.tsx @@ -2,14 +2,7 @@ import React, { useCallback, useDeferredValue, useEffect, useState } from "react"; import { Select, Switch, Tooltip } from "antd"; -import { - Table, - TableHead, - TableHeaderCell, - TableBody, - TableRow, - TableCell, -} from "@tremor/react"; +import { Table, TableHead, TableHeaderCell, TableBody, TableRow, TableCell } from "@tremor/react"; import { TimeCell } from "./view_logs/time_cell"; import { TableHeaderSortDropdown } from "./common_components/TableHeaderSortDropdown/TableHeaderSortDropdown"; import type { SortState } from "./common_components/TableHeaderSortDropdown/TableHeaderSortDropdown"; @@ -17,14 +10,13 @@ import FilterComponent, { FilterOption } from "./molecules/filter"; import { fetchToolsList, updateToolPolicy, ToolRow } from "./networking"; const POLICY_OPTIONS = [ - { value: "trusted", label: "trusted", color: "#065f46", bg: "#d1fae5", border: "#6ee7b7" }, - { value: "blocked", label: "blocked", color: "#991b1b", bg: "#fee2e2", border: "#fca5a5" }, + { value: "trusted", label: "trusted", color: "#065f46", bg: "#d1fae5", border: "#6ee7b7" }, + { value: "blocked", label: "blocked", color: "#991b1b", bg: "#fee2e2", border: "#fca5a5" }, ] as const; type PolicyValue = "trusted" | "blocked"; -const policyStyle = (p: string) => - POLICY_OPTIONS.find((o) => o.value === p) ?? POLICY_OPTIONS[1]; +const policyStyle = (p: string) => POLICY_OPTIONS.find((o) => o.value === p) ?? POLICY_OPTIONS[1]; type SortField = "tool_name" | "call_policy" | "team_id" | "key_alias" | "created_at" | "call_count"; @@ -56,18 +48,6 @@ const PolicySelect: React.FC<{ minWidth: 110, fontWeight: 500, }} - styles={{ - selector: { - backgroundColor: style.bg, - borderColor: style.border, - color: style.color, - borderRadius: 999, - fontSize: 11, - fontWeight: 600, - paddingLeft: 8, - paddingRight: 4, - }, - }} popupMatchSelectWidth={false} options={POLICY_OPTIONS.map((o) => ({ value: o.value, @@ -133,7 +113,9 @@ export const ToolPolicies: React.FC = ({ accessToken }) => { } }, [accessToken]); - useEffect(() => { load(); }, [load]); + useEffect(() => { + load(); + }, [load]); useEffect(() => { if (!isLiveTail) return; @@ -146,9 +128,7 @@ export const ToolPolicies: React.FC = ({ accessToken }) => { setSaving(toolName); try { await updateToolPolicy(accessToken, toolName, newPolicy); - setTools((prev) => - prev.map((t) => (t.tool_name === toolName ? { ...t, call_policy: newPolicy } : t)) - ); + setTools((prev) => prev.map((t) => (t.tool_name === toolName ? { ...t, call_policy: newPolicy } : t))); } catch (e: any) { alert(`Failed to update policy: ${e.message}`); } finally { @@ -178,12 +158,14 @@ export const ToolPolicies: React.FC = ({ accessToken }) => { }; // Build unique team/key options from loaded data - const teamOptions = Array.from(new Set(tools.map((t) => t.team_id).filter(Boolean))).map( - (v) => ({ label: v as string, value: v as string }) - ); - const keyAliasOptions = Array.from(new Set(tools.map((t) => t.key_alias).filter(Boolean))).map( - (v) => ({ label: v as string, value: v as string }) - ); + const teamOptions = Array.from(new Set(tools.map((t) => t.team_id).filter(Boolean))).map((v) => ({ + label: v as string, + value: v as string, + })); + const keyAliasOptions = Array.from(new Set(tools.map((t) => t.key_alias).filter(Boolean))).map((v) => ({ + label: v as string, + value: v as string, + })); const filterOptions: FilterOption[] = [ { @@ -245,7 +227,6 @@ export const ToolPolicies: React.FC = ({ accessToken }) => {

Tool Policies

- {/* Toolbar */}
@@ -256,16 +237,29 @@ export const ToolPolicies: React.FC = ({ accessToken }) => { placeholder="Search by Tool Name" className="w-full px-3 py-2 pl-8 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value={searchTerm} - onChange={(e) => { setSearchTerm(e.target.value); setCurrentPage(1); }} + onChange={(e) => { + setSearchTerm(e.target.value); + setCurrentPage(1); + }} /> - - + +
Live Tail - +
@@ -282,14 +286,27 @@ export const ToolPolicies: React.FC = ({ accessToken }) => {
- Showing {filtered.length === 0 ? 0 : (currentPage - 1) * pageSize + 1} - {Math.min(currentPage * pageSize, filtered.length)} of {filtered.length} results + Showing {filtered.length === 0 ? 0 : (currentPage - 1) * pageSize + 1} -{" "} + {Math.min(currentPage * pageSize, filtered.length)} of {filtered.length} results + + + Page {currentPage} of {totalPages} - Page {currentPage} of {totalPages}
- - + +
@@ -309,7 +326,9 @@ export const ToolPolicies: React.FC = ({ accessToken }) => { {isLiveTail && (
Auto-refreshing every 15 seconds - +
)} @@ -321,20 +340,34 @@ export const ToolPolicies: React.FC = ({ accessToken }) => { - - - - - + + + + + + + + + + + + + + + Key Hash - + + + Origin {loading ? ( - Loading tools… + + Loading tools… + ) : paginated.length === 0 ? ( @@ -397,12 +430,25 @@ export const ToolPolicies: React.FC = ({ accessToken }) => { {/* Bottom pagination (only when > 1 page) */} {totalPages > 1 && (
- Showing {(currentPage - 1) * pageSize + 1} - {Math.min(currentPage * pageSize, sorted.length)} of {sorted.length} + + Showing {(currentPage - 1) * pageSize + 1} - {Math.min(currentPage * pageSize, sorted.length)} of{" "} + {sorted.length} +
- - + +
)} diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx index 714507da1a..fc80c394ae 100644 --- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx @@ -8,10 +8,10 @@ import { Accordion, AccordionBody, AccordionHeader, Button, Col, Grid, Text, Tex import { Button as Button2, Form, Input, Modal, Radio, Select, Switch, Tag, Tooltip } from "antd"; import debounce from "lodash/debounce"; import React, { useCallback, useEffect, useState } from "react"; -import { CopyToClipboard } from "react-copy-to-clipboard"; import { rolesWithWriteAccess } from "../../utils/roles"; import AgentSelector from "../agent_management/AgentSelector"; import { mapDisplayToInternalNames } from "../callback_info_helpers"; +import AccessGroupSelector from "../common_components/AccessGroupSelector"; import BudgetDurationDropdown from "../common_components/budget_duration_dropdown"; import SchemaFormFields from "../common_components/check_openapi_schema"; import KeyLifecycleSettings from "../common_components/KeyLifecycleSettings"; @@ -20,7 +20,6 @@ import PassThroughRoutesSelector from "../common_components/PassThroughRoutesSel import PremiumLoggingSettings from "../common_components/PremiumLoggingSettings"; import RateLimitTypeFormItem from "../common_components/RateLimitTypeFormItem"; import RouterSettingsAccordion, { RouterSettingsAccordionValue } from "../common_components/RouterSettingsAccordion"; -import AccessGroupSelector from "../common_components/AccessGroupSelector"; import TeamDropdown from "../common_components/team_dropdown"; import { CreateUserButton } from "../CreateUserButton"; import { getModelDisplayName } from "../key_team_helpers/fetch_available_models_team_key"; @@ -40,10 +39,10 @@ import { proxyBaseUrl, userFilterUICall, } from "../networking"; +import CreatedKeyDisplay from "../shared/CreatedKeyDisplay"; import NumericalInput from "../shared/numerical_input"; import VectorStoreSelector from "../vector_store_management/VectorStoreSelector"; import { simplifyKeyGenerateError } from "./utils"; -import CreatedKeyDisplay from "../shared/CreatedKeyDisplay"; const { Option } = Select; @@ -299,7 +298,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey }) => { formValues.user_id = userID; } else if (keyOwner === "agent") { if (!selectedAgentId) { - message.error("Please select an agent"); + NotificationsManager.error("Please select an agent"); return; } formValues.agent_id = selectedAgentId; @@ -559,7 +558,9 @@ const CreateKey: React.FC = ({ team, teams, data, addKey }) => { You Service Account {userRole === "Admin" && Another User} - Agent New + + Agent New + @@ -1005,9 +1006,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey }) => { style={{ width: "100%" }} disabled={!premiumUser} placeholder={ - !premiumUser - ? "Premium feature - Upgrade to set policies by key" - : "Select or enter policies" + !premiumUser ? "Premium feature - Upgrade to set policies by key" : "Select or enter policies" } options={policiesList.map((name) => ({ value: name, label: name }))} /> @@ -1059,9 +1058,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey }) => { className="mt-4" help="Select access groups to assign to this key" > - + = ({ team, teams, data, addKey }) => { accessToken={accessToken || ""} value={routerSettings || undefined} onChange={setRouterSettings} - modelData={userModels.length > 0 ? { data: userModels.map((model) => ({ model_name: model })) } : undefined} + modelData={ + userModels.length > 0 + ? { data: userModels.map((model) => ({ model_name: model })) } + : undefined + } />