diff --git a/ui/litellm-dashboard/src/components/all_keys_table.tsx b/ui/litellm-dashboard/src/components/all_keys_table.tsx index 3a2bf61c5f..403b131c65 100644 --- a/ui/litellm-dashboard/src/components/all_keys_table.tsx +++ b/ui/litellm-dashboard/src/components/all_keys_table.tsx @@ -30,6 +30,8 @@ interface AllKeysTableProps { teams: Team[] | null; selectedTeam: Team | null; setSelectedTeam: (team: Team | null) => void; + selectedKeyAlias: string | null; + setSelectedKeyAlias: Setter; accessToken: string | null; userID: string | null; userRole: string | null; @@ -98,6 +100,8 @@ export function AllKeysTable({ teams, selectedTeam, setSelectedTeam, + selectedKeyAlias, + setSelectedKeyAlias, accessToken, userID, userRole, @@ -123,7 +127,8 @@ export function AllKeysTable({ organizations, accessToken, setSelectedTeam, - setCurrentOrg + setCurrentOrg, + setSelectedKeyAlias }); useEffect(() => { @@ -358,6 +363,23 @@ export function AllKeysTable({ })); } }, + { + name: "Key Alias", + label: "Key Alias", + isSearchable: true, + searchFn: async (searchText) => { + const filteredKeyAliases = allKeyAliases.filter(key => { + return key.toLowerCase().includes(searchText.toLowerCase()) + }); + + return filteredKeyAliases.map((key) => { + return { + label: key, + value: key + } + }); + } + } ]; diff --git a/ui/litellm-dashboard/src/components/key_team_helpers/filter_helpers.ts b/ui/litellm-dashboard/src/components/key_team_helpers/filter_helpers.ts index 727bcdeb70..7e99c7f9fc 100644 --- a/ui/litellm-dashboard/src/components/key_team_helpers/filter_helpers.ts +++ b/ui/litellm-dashboard/src/components/key_team_helpers/filter_helpers.ts @@ -21,6 +21,7 @@ export const fetchAllKeyAliases = async (accessToken: string | null): Promise void; setCurrentOrg: React.Dispatch>; + setSelectedKeyAlias: Setter }) { const [filters, setFilters] = useState({ 'Team ID': '', 'Organization ID': '', + 'Key Alias': '' }); - const [allKeyAliases, setAllKeyAliases] = useState([]); const [allTeams, setAllTeams] = useState(teams || []); const [allOrganizations, setAllOrganizations] = useState(organizations || []); const [filteredKeys, setFilteredKeys] = useState(keys); @@ -79,6 +86,16 @@ export function useFilterLogic({ } }, [accessToken]); + const queryAllKeysQuery = useQuery({ + queryKey: ['allKeys'], + queryFn: async () => { + if (!accessToken) throw new Error('Access token required'); + return await fetchAllKeyAliases(accessToken); + }, + enabled: !!accessToken + }); + const allKeyAliases = queryAllKeysQuery.data || [] + // Update teams and organizations when props change useEffect(() => { if (teams && teams.length > 0) { @@ -103,6 +120,7 @@ export function useFilterLogic({ setFilters({ 'Team ID': newFilters['Team ID'] || '', 'Organization ID': newFilters['Organization ID'] || '', + 'Key Alias': newFilters['Key Alias'] || '' }); // Handle Team change @@ -120,6 +138,12 @@ export function useFilterLogic({ setCurrentOrg(selectedOrg); } } + + const keyAlias = newFilters['Key Alias']; + const selectedKeyAlias = keyAlias + ? allKeyAliases.find((k) => k === keyAlias) || null + : null; + setSelectedKeyAlias(selectedKeyAlias) }; const handleFilterReset = () => { @@ -127,6 +151,7 @@ export function useFilterLogic({ setFilters({ 'Team ID': '', 'Organization ID': '', + 'Key Alias': '' }); // Reset team and org selections @@ -144,6 +169,3 @@ export function useFilterLogic({ handleFilterReset }; } - -// These functions are imported from key_team_helpers/filter_helpers.ts -import { fetchAllKeyAliases, fetchAllTeams, fetchAllOrganizations } from './filter_helpers'; \ No newline at end of file diff --git a/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx b/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx index 4ca0ea5720..98d8e0e499 100644 --- a/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx +++ b/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx @@ -85,6 +85,7 @@ total_pages: number; interface UseKeyListProps { selectedTeam?: Team; currentOrg: Organization | null; +selectedKeyAlias: string | null; accessToken: string; currentPage?: number; } @@ -108,9 +109,9 @@ setKeys: Setter; const useKeyList = ({ selectedTeam, currentOrg, + selectedKeyAlias, accessToken, currentPage = 1, - }: UseKeyListProps): UseKeyListReturn => { const [keyData, setKeyData] = useState({ keys: [], @@ -134,8 +135,9 @@ const useKeyList = ({ accessToken, currentOrg?.organization_id || null, selectedTeam?.team_id || "", + selectedKeyAlias, params.page as number || 1, - 50 + 50, ); console.log("data", data); setKeyData(data); @@ -149,8 +151,17 @@ const useKeyList = ({ useEffect(() => { fetchKeys(); - console.log("selectedTeam", selectedTeam, "currentOrg", currentOrg, "accessToken", accessToken); - }, [selectedTeam, currentOrg, accessToken]); + console.log( + 'selectedTeam', + selectedTeam, + 'currentOrg', + currentOrg, + 'accessToken', + accessToken, + 'selectedKeyAlias', + selectedKeyAlias + ); + }, [selectedTeam, currentOrg, accessToken, selectedKeyAlias]); const setKeys = (newKeysOrUpdater: KeyResponse[] | ((prevKeys: KeyResponse[]) => KeyResponse[])) => { setKeyData(prevData => { diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index 70aa218508..f14bf0b774 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/ui/litellm-dashboard/src/components/networking.tsx @@ -2569,8 +2569,9 @@ export const keyListCall = async ( accessToken: String, organizationID: string | null, teamID: string | null, + selectedKeyAlias: string | null, page: number, - pageSize: number + pageSize: number, ) => { /** * Get all available teams on proxy @@ -2588,6 +2589,10 @@ export const keyListCall = async ( queryParams.append('organization_id', organizationID.toString()); } + if (selectedKeyAlias) { + queryParams.append('key_alias', selectedKeyAlias) + } + if (page) { queryParams.append('page', page.toString()); } diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx index 22b47d525f..ab25a96e31 100644 --- a/ui/litellm-dashboard/src/components/user_dashboard.tsx +++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx @@ -108,6 +108,7 @@ const UserDashboard: React.FC = ({ team_id: null, }; const [selectedTeam, setSelectedTeam] = useState(null); + const [selectedKeyAlias, setSelectedKeyAlias] = useState(null); // check if window is not undefined if (typeof window !== "undefined") { window.addEventListener("beforeunload", function () { @@ -350,6 +351,8 @@ const UserDashboard: React.FC = ({ accessToken={accessToken} selectedTeam={selectedTeam ? selectedTeam : null} setSelectedTeam={setSelectedTeam} + selectedKeyAlias={selectedKeyAlias} + setSelectedKeyAlias={setSelectedKeyAlias} data={keys} setData={setKeys} premiumUser={premiumUser} diff --git a/ui/litellm-dashboard/src/components/view_key_table.tsx b/ui/litellm-dashboard/src/components/view_key_table.tsx index 57467efa18..715bf6b7f7 100644 --- a/ui/litellm-dashboard/src/components/view_key_table.tsx +++ b/ui/litellm-dashboard/src/components/view_key_table.tsx @@ -71,6 +71,7 @@ import useKeyList from "./key_team_helpers/key_list"; import { KeyResponse } from "./key_team_helpers/key_list"; import { AllKeysTable } from "./all_keys_table"; import { Team } from "./key_team_helpers/key_list"; +import { Setter } from "@/types"; const isLocal = process.env.NODE_ENV === "development"; const proxyBaseUrl = isLocal ? "http://localhost:4000" : null; @@ -107,6 +108,8 @@ interface ViewKeyTableProps { currentOrg: Organization | null; organizations: Organization[] | null; setCurrentOrg: React.Dispatch>; + selectedKeyAlias: string | null; + setSelectedKeyAlias: Setter; } interface ItemData { @@ -154,7 +157,9 @@ const ViewKeyTable: React.FC = ({ premiumUser, currentOrg, organizations, - setCurrentOrg + setCurrentOrg, + selectedKeyAlias, + setSelectedKeyAlias }) => { const [isButtonClicked, setIsButtonClicked] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); @@ -179,6 +184,7 @@ const ViewKeyTable: React.FC = ({ const { keys, isLoading, error, pagination, refresh, setKeys } = useKeyList({ selectedTeam, currentOrg, + selectedKeyAlias, accessToken, }); @@ -432,6 +438,8 @@ const ViewKeyTable: React.FC = ({ organizations={organizations} setCurrentOrg={setCurrentOrg} refresh={refresh} + selectedKeyAlias={selectedKeyAlias} + setSelectedKeyAlias={setSelectedKeyAlias} /> {isDeleteModalOpen && (