From edf60647758e78ff043c9dd9d52950812a851a02 Mon Sep 17 00:00:00 2001 From: Krrish Dholakia Date: Fri, 25 Apr 2025 12:07:19 -0700 Subject: [PATCH] fix: partially revert changes - reduce scope of pr --- .../src/components/all_keys_table.tsx | 80 ++++--------------- .../key_team_helpers/filter_helpers.ts | 62 +++++++------- .../key_team_helpers/filter_logic.tsx | 36 +++++++++ 3 files changed, 87 insertions(+), 91 deletions(-) diff --git a/ui/litellm-dashboard/src/components/all_keys_table.tsx b/ui/litellm-dashboard/src/components/all_keys_table.tsx index ede3931e448..80892d9cbe5 100644 --- a/ui/litellm-dashboard/src/components/all_keys_table.tsx +++ b/ui/litellm-dashboard/src/components/all_keys_table.tsx @@ -94,12 +94,6 @@ const TeamFilter = ({ * The team selector and filtering have been removed so that all keys are shown. */ -export interface FilterState { - 'Team ID': string; - 'Organization ID': string; - 'Key Alias': string; - [key: string]: string; -} export function AllKeysTable({ keys, @@ -123,9 +117,6 @@ export function AllKeysTable({ const [selectedKeyId, setSelectedKeyId] = useState(null); const [userList, setUserList] = useState([]); const lastSearchTimestamp = useRef(0); - const [filteredKeys, setFilteredKeys] = useState([]); - const [allTeams, setAllTeams] = useState([]); - const [allOrganizations, setAllOrganizations] = useState([]); // Use the filter logic hook useEffect(() => { @@ -152,62 +143,25 @@ export function AllKeysTable({ } }, [accessToken]); - const debouncedSearch = useCallback( - debounce(async (filters: FilterState) => { - if (!accessToken || !userRole || !userID) { - return; - } - - const currentTimestamp = Date.now(); - lastSearchTimestamp.current = currentTimestamp; - - try { - // Make the API call using userListCall with all filter parameters - const data = await keyListCall( - accessToken, - filters["Organization ID"] || null, - filters["Team ID"] || null, - filters["Key Alias"] || null, - filters["User ID"] || null, - 1, // Reset to first page when searching - defaultPageSize - ); - - // Only update state if this is the most recent search - if (currentTimestamp === lastSearchTimestamp.current) { - if (data) { - setFilteredKeys(data.keys); - console.log("called from debouncedSearch filters:", JSON.stringify(filters)); - console.log("called from debouncedSearch data:", JSON.stringify(data)); - } - } - } catch (error) { - console.error("Error searching users:", error); - } - }, 300), - [accessToken, userRole, userID] - ); - - const [filters, setFilters] = useState({ - 'Team ID': '', - 'Organization ID': '', - 'Key Alias': '' + const { + filters, + filteredKeys, + allKeyAliases, + allTeams, + allOrganizations, + handleFilterChange, + handleFilterReset + } = useFilterLogic({ + keys, + teams, + organizations, + accessToken, + setSelectedTeam, + setCurrentOrg, + setSelectedKeyAlias }); - const handleFilterChange = (key: keyof FilterState, value: string) => { - const newFilters = { ...filters, [key]: value }; - setFilters(newFilters); - console.log("called from handleFilterChange - newFilters:", JSON.stringify(newFilters)); - debouncedSearch(newFilters); - }; - - const handleFilterReset = () => { - const resetFilters = Object.keys(filters).reduce((acc, key) => { - acc[key] = ''; - return acc; - }, {} as FilterState); - setFilters(resetFilters); - }; + useEffect(() => { if (accessToken) { 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 7e99c7f9fce..9e5eb5dd70d 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 @@ -1,38 +1,41 @@ -import { keyListCall, teamListCall, organizationListCall } from '../networking'; -import { Team } from './key_list'; -import { Organization } from '../networking'; +import { keyListCall, teamListCall, organizationListCall } from "../networking"; +import { Team } from "./key_list"; +import { Organization } from "../networking"; /** * Fetches all key aliases across all pages * @param accessToken The access token for API authentication * @returns Array of all unique key aliases */ -export const fetchAllKeyAliases = async (accessToken: string | null): Promise => { +export const fetchAllKeyAliases = async ( + accessToken: string | null +): Promise => { if (!accessToken) return []; - + try { // Fetch all pages of keys to extract aliases let allAliases: string[] = []; let currentPage = 1; let hasMorePages = true; - + while (hasMorePages) { const response = await keyListCall( accessToken, null, // organization_id "", // team_id null, // selectedKeyAlias + null, // user_id currentPage, 100 // larger page size to reduce number of requests ); - + // Extract aliases from this page const pageAliases = response.keys .map((key: any) => key.key_alias) .filter(Boolean) as string[]; - + allAliases = [...allAliases, ...pageAliases]; - + // Check if there are more pages if (currentPage < response.total_pages) { currentPage++; @@ -40,7 +43,7 @@ export const fetchAllKeyAliases = async (accessToken: string | null): Promise => { +export const fetchAllTeams = async ( + accessToken: string | null, + organizationId?: string | null +): Promise => { if (!accessToken) return []; - + try { let allTeams: Team[] = []; let currentPage = 1; let hasMorePages = true; - + while (hasMorePages) { const response = await teamListCall( accessToken, organizationId || null, - null, + null ); - + // Add teams from this page - allTeams = [...allTeams, ...response.teams]; - + allTeams = [...allTeams, ...response]; + // Check if there are more pages if (currentPage < response.total_pages) { currentPage++; @@ -80,7 +86,7 @@ export const fetchAllTeams = async (accessToken: string | null, organizationId?: hasMorePages = false; } } - + return allTeams; } catch (error) { console.error("Error fetching all teams:", error); @@ -93,22 +99,22 @@ export const fetchAllTeams = async (accessToken: string | null, organizationId?: * @param accessToken The access token for API authentication * @returns Array of all organizations */ -export const fetchAllOrganizations = async (accessToken: string | null): Promise => { +export const fetchAllOrganizations = async ( + accessToken: string | null +): Promise => { if (!accessToken) return []; - + try { let allOrganizations: Organization[] = []; let currentPage = 1; let hasMorePages = true; - + while (hasMorePages) { - const response = await organizationListCall( - accessToken - ); - + const response = await organizationListCall(accessToken); + // Add organizations from this page - allOrganizations = [...allOrganizations, ...response.organizations]; - + allOrganizations = [...allOrganizations, ...response]; + // Check if there are more pages if (currentPage < response.total_pages) { currentPage++; @@ -116,7 +122,7 @@ export const fetchAllOrganizations = async (accessToken: string | null): Promise hasMorePages = false; } } - + return allOrganizations; } catch (error) { console.error("Error fetching all organizations:", error); diff --git a/ui/litellm-dashboard/src/components/key_team_helpers/filter_logic.tsx b/ui/litellm-dashboard/src/components/key_team_helpers/filter_logic.tsx index cc3d0eea386..fe58a3bd5bf 100644 --- a/ui/litellm-dashboard/src/components/key_team_helpers/filter_logic.tsx +++ b/ui/litellm-dashboard/src/components/key_team_helpers/filter_logic.tsx @@ -14,6 +14,42 @@ export interface FilterState { [key: string]: string; } + // const debouncedSearch = useCallback( + // debounce(async (filters: FilterState) => { + // if (!accessToken || !userRole || !userID) { + // return; + // } + + // const currentTimestamp = Date.now(); + // lastSearchTimestamp.current = currentTimestamp; + + // try { + // // Make the API call using userListCall with all filter parameters + // const data = await keyListCall( + // accessToken, + // filters["Organization ID"] || null, + // filters["Team ID"] || null, + // filters["Key Alias"] || null, + // filters["User ID"] || null, + // 1, // Reset to first page when searching + // defaultPageSize + // ); + + // // Only update state if this is the most recent search + // if (currentTimestamp === lastSearchTimestamp.current) { + // if (data) { + // setFilteredKeys(data.keys); + // console.log("called from debouncedSearch filters:", JSON.stringify(filters)); + // console.log("called from debouncedSearch data:", JSON.stringify(data)); + // } + // } + // } catch (error) { + // console.error("Error searching users:", error); + // } + // }, 300), + // [accessToken, userRole, userID] + // ); + export function useFilterLogic({ keys, teams,