From ecb951a320e67fabf7620035665fa185cd12445f Mon Sep 17 00:00:00 2001 From: Ryan Crabbe Date: Fri, 3 Apr 2026 15:38:16 -0700 Subject: [PATCH] fix(ui): wire team_id filter to key alias dropdown on Virtual Keys tab The Key Alias dropdown on the Virtual Keys page was showing aliases from all teams regardless of which team was selected. The team_id was never passed through the frontend chain to the backend /key/aliases endpoint. - Backend: add optional team_id query param to /key/aliases endpoint - networking.tsx: add team_id param to keyAliasesCall - useKeyAliases: accept and forward team_id to API call and query key - filter.tsx: pass allFilters context to custom filter components - PaginatedKeyAliasSelect: read Team ID from allFilters and pass to hook --- .../proxy/management_endpoints/key_management_endpoints.py | 7 +++++++ .../src/app/(dashboard)/hooks/keys/useKeyAliases.ts | 3 +++ .../PaginatedKeyAliasSelect/PaginatedKeyAliasSelect.tsx | 6 +++++- ui/litellm-dashboard/src/components/molecules/filter.tsx | 2 ++ ui/litellm-dashboard/src/components/networking.tsx | 2 ++ 5 files changed, 19 insertions(+), 1 deletion(-) diff --git a/litellm/proxy/management_endpoints/key_management_endpoints.py b/litellm/proxy/management_endpoints/key_management_endpoints.py index 1c0c212b60b..686ccb809e4 100644 --- a/litellm/proxy/management_endpoints/key_management_endpoints.py +++ b/litellm/proxy/management_endpoints/key_management_endpoints.py @@ -4259,6 +4259,9 @@ async def key_aliases( search: Optional[str] = Query( None, description="Search key aliases (case-insensitive partial match)" ), + team_id: Optional[str] = Query( + None, description="Filter aliases to keys belonging to this team" + ), ) -> Dict[str, Any]: """ Lists key aliases with pagination and optional search. @@ -4334,6 +4337,10 @@ async def key_aliases( query_params.append(f"%{search}%") where_parts.append(f"key_alias ILIKE ${len(query_params)}") + if team_id: + query_params.append(team_id) + where_parts.append(f"team_id = ${len(query_params)}") + where_sql = " AND ".join(where_parts) count_sql = f'SELECT COUNT(*) AS count FROM "LiteLLM_VerificationToken" WHERE {where_sql}' diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/keys/useKeyAliases.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/keys/useKeyAliases.ts index f67b15f3a9f..03e96fe73c4 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/keys/useKeyAliases.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/keys/useKeyAliases.ts @@ -8,6 +8,7 @@ const infiniteKeyAliasKeys = createQueryKeys("infiniteKeyAliases"); export const useInfiniteKeyAliases = ( size: number = 50, search?: string, + team_id?: string, ) => { const { accessToken } = useAuthorized(); return useInfiniteQuery({ @@ -15,6 +16,7 @@ export const useInfiniteKeyAliases = ( filters: { size, ...(search && { search }), + ...(team_id && { team_id }), }, }), queryFn: async ({ pageParam }) => { @@ -23,6 +25,7 @@ export const useInfiniteKeyAliases = ( pageParam as number, size, search, + team_id, ); }, initialPageParam: 1, diff --git a/ui/litellm-dashboard/src/components/KeyAliasSelect/PaginatedKeyAliasSelect/PaginatedKeyAliasSelect.tsx b/ui/litellm-dashboard/src/components/KeyAliasSelect/PaginatedKeyAliasSelect/PaginatedKeyAliasSelect.tsx index 0bec77ca52b..940f0b7e951 100644 --- a/ui/litellm-dashboard/src/components/KeyAliasSelect/PaginatedKeyAliasSelect/PaginatedKeyAliasSelect.tsx +++ b/ui/litellm-dashboard/src/components/KeyAliasSelect/PaginatedKeyAliasSelect/PaginatedKeyAliasSelect.tsx @@ -12,6 +12,7 @@ export interface PaginatedKeyAliasSelectProps { pageSize?: number; allowClear?: boolean; disabled?: boolean; + allFilters?: { [key: string]: string }; } const SCROLL_THRESHOLD = 0.8; @@ -25,19 +26,22 @@ export const PaginatedKeyAliasSelect = ({ pageSize = 50, allowClear = true, disabled = false, + allFilters, }: PaginatedKeyAliasSelectProps) => { const [searchInput, setSearchInput] = useState(""); const [debouncedSearch, setDebouncedSearch] = useDebouncedState("", { wait: DEBOUNCE_MS, }); + const teamId = allFilters?.["Team ID"] || undefined; + const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, - } = useInfiniteKeyAliases(pageSize, debouncedSearch || undefined); + } = useInfiniteKeyAliases(pageSize, debouncedSearch || undefined, teamId); const options = useMemo(() => { if (!data?.pages) return []; diff --git a/ui/litellm-dashboard/src/components/molecules/filter.tsx b/ui/litellm-dashboard/src/components/molecules/filter.tsx index dcf22293f86..34ff1983f36 100644 --- a/ui/litellm-dashboard/src/components/molecules/filter.tsx +++ b/ui/litellm-dashboard/src/components/molecules/filter.tsx @@ -7,6 +7,7 @@ export interface FilterOptionCustomComponentProps { value?: string; onChange: (value: string) => void; placeholder?: string; + allFilters?: { [key: string]: string }; } export interface FilterOption { @@ -209,6 +210,7 @@ const FilterComponent: React.FC = ({ value={tempValues[option.name] || undefined} onChange={(value) => handleFilterChange(option.name, value ?? "")} placeholder={`Select ${option.label || option.name}...`} + allFilters={tempValues} /> ); })() diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index bb9a0c1e015..49e669862e5 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/ui/litellm-dashboard/src/components/networking.tsx @@ -3205,6 +3205,7 @@ export const keyAliasesCall = async ( page: number = 1, size: number = 50, search?: string, + team_id?: string, ): Promise => { /** * Get key aliases from proxy with pagination and optional search @@ -3215,6 +3216,7 @@ export const keyAliasesCall = async ( page: String(page), size: String(size), ...(search ? { search } : {}), + ...(team_id ? { team_id } : {}), }), ); let url = proxyBaseUrl ? `${proxyBaseUrl}/key/aliases` : `/key/aliases`;