From cae390b51a54abecc368da5999da8a5b921bca6e Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Wed, 8 May 2024 09:51:58 -0700 Subject: [PATCH 01/13] ui - clean up usage tab --- ui/litellm-dashboard/src/components/usage.tsx | 60 +++---------------- 1 file changed, 9 insertions(+), 51 deletions(-) diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx index f0b4f0551a..07ca8ed144 100644 --- a/ui/litellm-dashboard/src/components/usage.tsx +++ b/ui/litellm-dashboard/src/components/usage.tsx @@ -95,41 +95,7 @@ function getTopKeys(data: Array<{ [key: string]: unknown }>): any[] { } type DataDict = { [key: string]: unknown }; type UserData = { user_id: string; spend: number }; -function getTopUsers(data: Array): UserData[] { - const userSpend: { [key: string]: number } = {}; - data.forEach((dict) => { - const payload: DataDict = dict["users"] as DataDict; - Object.entries(payload).forEach(([user_id, value]) => { - if ( - user_id === "" || - user_id === undefined || - user_id === null || - user_id == "None" - ) { - return; - } - - if (!userSpend[user_id]) { - userSpend[user_id] = 0; - } - userSpend[user_id] += value as number; - }); - }); - - const spendUsers: UserData[] = Object.entries(userSpend).map( - ([user_id, spend]) => ({ - user_id, - spend, - }) - ); - - spendUsers.sort((a, b) => b.spend - a.spend); - - const topKeys = spendUsers.slice(0, 5); - console.log(`topKeys: ${Object.values(topKeys[0])}`); - return topKeys; -} const UsagePage: React.FC = ({ accessToken, @@ -286,6 +252,7 @@ const UsagePage: React.FC = ({ All Up Team Based Usage + End User Usage Tag Based Usage @@ -324,23 +291,7 @@ const UsagePage: React.FC = ({ - - Top Users - - - - - + Top Models = ({ showLegend={false} /> + + + + @@ -385,6 +340,9 @@ const UsagePage: React.FC = ({ + + + From 7bfd02350aebe2edabdadb875d6ba61421b7958b Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Wed, 8 May 2024 10:38:27 -0700 Subject: [PATCH 02/13] stash - users usage tab --- ui/litellm-dashboard/src/components/usage.tsx | 53 ++++++++++++++++++- .../src/components/view_users.tsx | 11 ++-- 2 files changed, 56 insertions(+), 8 deletions(-) diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx index 07ca8ed144..1bd8838b61 100644 --- a/ui/litellm-dashboard/src/components/usage.tsx +++ b/ui/litellm-dashboard/src/components/usage.tsx @@ -3,13 +3,14 @@ import { BarChart, BarList, Card, Title, Table, TableHead, TableHeaderCell, Tabl import React, { useState, useEffect } from "react"; import ViewUserSpend from "./view_user_spend"; -import { Grid, Col, Text, LineChart, TabPanel, TabPanels, TabGroup, TabList, Tab, Select, SelectItem } from "@tremor/react"; +import { Grid, Col, Text, LineChart, TabPanel, TabPanels, TabGroup, TabList, Tab, Select, SelectItem, DateRangePicker, DateRangePickerValue } from "@tremor/react"; import { userSpendLogsCall, keyInfoCall, adminSpendLogsCall, adminTopKeysCall, adminTopModelsCall, + adminTopEndUsersCall, teamSpendLogsCall, tagsSpendLogsCall, modelMetricsCall, @@ -112,6 +113,10 @@ const UsagePage: React.FC = ({ const [topTagsData, setTopTagsData] = useState([]); const [uniqueTeamIds, setUniqueTeamIds] = useState([]); const [totalSpendPerTeam, setTotalSpendPerTeam] = useState([]); + const [dateValue, setDateValue] = useState({ + from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), + to: new Date(), + }); const firstDay = new Date( currentDate.getFullYear(), @@ -127,6 +132,10 @@ const UsagePage: React.FC = ({ let startTime = formatDate(firstDay); let endTime = formatDate(lastDay); + // const updateEndUserUsage(startTime: string, endTime: string) { + + // } + function formatDate(date: Date) { const year = date.getFullYear(); let month = date.getMonth() + 1; // JS month index starts from 0 @@ -193,6 +202,12 @@ const UsagePage: React.FC = ({ const top_tags = await tagsSpendLogsCall(accessToken); setTopTagsData(top_tags.top_10_tags); + // get spend per end-user + let spend_user_call = await adminTopEndUsersCall(accessToken, null); + setTopUsers(spend_user_call); + + console.log("spend/user result", spend_user_call); + } else if (userRole == "App Owner") { await userSpendLogsCall( accessToken, @@ -224,7 +239,6 @@ const UsagePage: React.FC = ({ spend: k["spend"], })); setTopKeys(filtered_keys); - setTopUsers(getTopUsers(response)); setKeySpendData(response); } }); @@ -342,7 +356,42 @@ const UsagePage: React.FC = ({ + { + setDateValue(value); + updateModelMetrics(selectedModelGroup, value.from, value.to); // Call updateModelMetrics with the new date range + }} + /> + End Users of your LLM API calls. Tracked When a `user` param is passed in your LLM calls + + + + + + + + End User + Spend + Total Events + + + + + {topUsers?.map((user: any, index: number) => ( + + {user.end_user} + {user.total_spend?.toFixed(4)} + {user.total_events} + + ))} + +
+ + + diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx index b3960965c5..fd152f25f6 100644 --- a/ui/litellm-dashboard/src/components/view_users.tsx +++ b/ui/litellm-dashboard/src/components/view_users.tsx @@ -158,12 +158,11 @@ const ViewUserDashboard: React.FC = ({
Key Owners: Users on LiteLLM that created API Keys. Automatically tracked by LiteLLM - End Users: End Users of your LLM API calls. Tracked When a `user` param is passed in your LLM calls +
Key Owners - End-Users @@ -220,7 +219,7 @@ const ViewUserDashboard: React.FC = ({
- Key + {/* Key + */}
- + {/*
End User @@ -260,7 +259,7 @@ const ViewUserDashboard: React.FC = ({ ))} -
+ */} From faab704d28ef0a8851d1eb71c67d675b495c2499 Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Wed, 8 May 2024 17:03:09 -0700 Subject: [PATCH 03/13] update global/spend/end_users --- litellm/llms/prompt_templates/factory.py | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/litellm/llms/prompt_templates/factory.py b/litellm/llms/prompt_templates/factory.py index bce472ea06..dd906a64c8 100644 --- a/litellm/llms/prompt_templates/factory.py +++ b/litellm/llms/prompt_templates/factory.py @@ -11,12 +11,14 @@ from jinja2 import BaseLoader, Template, exceptions, meta from jinja2.sandbox import ImmutableSandboxedEnvironment import litellm -from litellm.types.completion import (ChatCompletionFunctionMessageParam, - ChatCompletionMessageParam, - ChatCompletionMessageToolCallParam, - ChatCompletionSystemMessageParam, - ChatCompletionToolMessageParam, - ChatCompletionUserMessageParam) +from litellm.types.completion import ( + ChatCompletionFunctionMessageParam, + ChatCompletionMessageParam, + ChatCompletionMessageToolCallParam, + ChatCompletionSystemMessageParam, + ChatCompletionToolMessageParam, + ChatCompletionUserMessageParam, +) from litellm.types.llms.anthropic import * @@ -978,7 +980,7 @@ def anthropic_messages_pt(messages: list): # add role=tool support to allow function call result/error submission user_message_types = {"user", "tool", "function"} # reformat messages to ensure user/assistant are alternating, if there's either 2 consecutive 'user' messages or 2 consecutive 'assistant' message, merge them. - new_messages = [] + new_messages: list = [] msg_i = 0 tool_use_param = False merge_with_previous = False From 1eea4d1c90264cc812f9b80bfcbfe34ba57c609f Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Wed, 8 May 2024 17:03:38 -0700 Subject: [PATCH 04/13] fix /global/spend/end_users --- litellm/proxy/proxy_server.py | 49 +++++++++++++++-------------------- 1 file changed, 21 insertions(+), 28 deletions(-) diff --git a/litellm/proxy/proxy_server.py b/litellm/proxy/proxy_server.py index ac9cb56cc6..68125a0473 100644 --- a/litellm/proxy/proxy_server.py +++ b/litellm/proxy/proxy_server.py @@ -5792,35 +5792,28 @@ async def global_spend_end_users(data: Optional[GlobalEndUsersSpend] = None): if prisma_client is None: raise HTTPException(status_code=500, detail={"error": "No db connected"}) - if data is None: - sql_query = f"""SELECT * FROM "Last30dTopEndUsersSpend";""" + """ + Gets the top 100 end-users for a given api key + """ + startTime = datetime.now() - timedelta(days=30) + endTime = datetime.now() - response = await prisma_client.db.query_raw(query=sql_query) - else: - """ - Gets the top 100 end-users for a given api key - """ - current_date = datetime.now() - past_date = current_date - timedelta(days=30) - response = await prisma_client.db.litellm_spendlogs.group_by( # type: ignore - by=["end_user"], - where={ - "AND": [{"startTime": {"gte": past_date}}, {"api_key": data.api_key}] # type: ignore - }, - sum={"spend": True}, - order={"_sum": {"spend": "desc"}}, # type: ignore - take=100, - count=True, - ) - if response is not None and isinstance(response, list): - new_response = [] - for r in response: - new_r = r - new_r["total_spend"] = r["_sum"]["spend"] - new_r["total_count"] = r["_count"]["_all"] - new_r.pop("_sum") - new_r.pop("_count") - new_response.append(new_r) + sql_query = """ +SELECT + end_user, + COUNT(*) AS total_count, + SUM(spend) AS total_spend +FROM + "LiteLLM_SpendLogs" +GROUP BY + end_user +WHERE + "startTime" >= $1 AND "startTime" < $2 +ORDER BY + total_spend DESC +LIMIT 100 + """ + response = await prisma_client.db.query_raw(sql_query, startTime, endTime) return response From b99a6717af6552cabc1d327b87c1fa1eb5e0a74b Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Wed, 8 May 2024 17:05:09 -0700 Subject: [PATCH 05/13] fix - startTime, endTime in GlobalEndUsersSpend --- litellm/proxy/_types.py | 2 ++ 1 file changed, 2 insertions(+) diff --git a/litellm/proxy/_types.py b/litellm/proxy/_types.py index b7b2d0ab6b..0a86c84242 100644 --- a/litellm/proxy/_types.py +++ b/litellm/proxy/_types.py @@ -494,6 +494,8 @@ class NewTeamRequest(TeamBase): class GlobalEndUsersSpend(LiteLLMBase): api_key: Optional[str] = None + startTime: Optional[datetime] = None + endTime: Optional[datetime] = None class TeamMemberAddRequest(LiteLLMBase): From c7037c20ea0f0141e9e3527790bf3035cb17be92 Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Wed, 8 May 2024 17:26:46 -0700 Subject: [PATCH 06/13] fix pass startTime and endTime on Users Usage tab --- ui/litellm-dashboard/src/components/networking.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index d65482b8f7..a05b3848ee 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/ui/litellm-dashboard/src/components/networking.tsx @@ -786,7 +786,9 @@ export const adminTopKeysCall = async (accessToken: String) => { export const adminTopEndUsersCall = async ( accessToken: String, - keyToken: String | null + keyToken: String | null, + startTime: String | undefined, + endTime: String | undefined ) => { try { let url = proxyBaseUrl @@ -796,7 +798,10 @@ export const adminTopEndUsersCall = async ( let body = ""; if (keyToken) { body = JSON.stringify({ api_key: keyToken }); + } else { + body = JSON.stringify({ startTime: startTime, endTime: endTime }); } + //message.info("Making top end users request"); // Define requestOptions with body as an optional property @@ -815,9 +820,7 @@ export const adminTopEndUsersCall = async ( }, }; - if (keyToken) { - requestOptions.body = JSON.stringify({ api_key: keyToken }); - } + requestOptions.body = body; const response = await fetch(url, requestOptions); if (!response.ok) { From 08d37e1b0e3563d22ce4e11949734e7c9f3bbcc4 Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Wed, 8 May 2024 17:34:30 -0700 Subject: [PATCH 07/13] ui - filter usage by day --- ui/litellm-dashboard/src/components/usage.tsx | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx index 1bd8838b61..9efb346a40 100644 --- a/ui/litellm-dashboard/src/components/usage.tsx +++ b/ui/litellm-dashboard/src/components/usage.tsx @@ -132,9 +132,21 @@ const UsagePage: React.FC = ({ let startTime = formatDate(firstDay); let endTime = formatDate(lastDay); - // const updateEndUserUsage(startTime: string, endTime: string) { - - // } + const updateEndUserData = async (startTime: Date | undefined, endTime: Date | undefined) => { + if (!startTime || !endTime || !accessToken) { + return; + } + + let newTopUserData = await adminTopEndUsersCall( + accessToken, + null, + startTime.toISOString(), + endTime.toISOString() + ) + console.log("End user data updated successfully", newTopUserData); + setTopUsers(newTopUserData); + + } function formatDate(date: Date) { const year = date.getFullYear(); @@ -361,7 +373,7 @@ const UsagePage: React.FC = ({ value={dateValue} onValueChange={(value) => { setDateValue(value); - updateModelMetrics(selectedModelGroup, value.from, value.to); // Call updateModelMetrics with the new date range + updateEndUserData(value.from, value.to); // Call updateModelMetrics with the new date range }} /> End Users of your LLM API calls. Tracked When a `user` param is passed in your LLM calls @@ -384,7 +396,7 @@ const UsagePage: React.FC = ({ {user.end_user} {user.total_spend?.toFixed(4)} - {user.total_events} + {user.total_count} ))} From 081e8732dcbcc6e04d94c33d8504632864643b1c Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Wed, 8 May 2024 17:34:44 -0700 Subject: [PATCH 08/13] ui - cleanup view users tab --- ui/litellm-dashboard/src/components/view_users.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx index fd152f25f6..ebcfc4c2fa 100644 --- a/ui/litellm-dashboard/src/components/view_users.tsx +++ b/ui/litellm-dashboard/src/components/view_users.tsx @@ -157,13 +157,11 @@ const ViewUserDashboard: React.FC = ({
- Key Owners: Users on LiteLLM that created API Keys. Automatically tracked by LiteLLM + These are Users on LiteLLM that created API Keys. Automatically tracked by LiteLLM
- - Key Owners - + @@ -189,7 +187,7 @@ const ViewUserDashboard: React.FC = ({ ? user.models : "All Models"} - {user.spend ? user.spend : 0} + {user.spend ? user.spend?.toFixed(2) : 0} {user.max_budget ? user.max_budget : "Unlimited"} From 644738dafba522408a6166892bd8e62a8330d40a Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Wed, 8 May 2024 17:57:28 -0700 Subject: [PATCH 09/13] usage - filter by keys --- ui/litellm-dashboard/src/app/page.tsx | 1 + .../src/components/networking.tsx | 2 +- ui/litellm-dashboard/src/components/usage.tsx | 33 ++++++++++++++++++- 3 files changed, 34 insertions(+), 2 deletions(-) diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx index 96731f7f57..ce69250815 100644 --- a/ui/litellm-dashboard/src/app/page.tsx +++ b/ui/litellm-dashboard/src/app/page.tsx @@ -189,6 +189,7 @@ const CreateKeyPage = () => { userRole={userRole} token={token} accessToken={accessToken} + keys={keys} /> )} diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index a05b3848ee..e1375e7d46 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/ui/litellm-dashboard/src/components/networking.tsx @@ -797,7 +797,7 @@ export const adminTopEndUsersCall = async ( let body = ""; if (keyToken) { - body = JSON.stringify({ api_key: keyToken }); + body = JSON.stringify({ api_key: keyToken, startTime: startTime, endTime: endTime }); } else { body = JSON.stringify({ startTime: startTime, endTime: endTime }); } diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx index 9efb346a40..481a418d53 100644 --- a/ui/litellm-dashboard/src/components/usage.tsx +++ b/ui/litellm-dashboard/src/components/usage.tsx @@ -24,6 +24,7 @@ interface UsagePageProps { token: string | null; userRole: string | null; userID: string | null; + keys: any[] | null; } type CustomTooltipTypeBar = { @@ -103,6 +104,7 @@ const UsagePage: React.FC = ({ token, userRole, userID, + keys, }) => { const currentDate = new Date(); const [keySpendData, setKeySpendData] = useState([]); @@ -113,6 +115,7 @@ const UsagePage: React.FC = ({ const [topTagsData, setTopTagsData] = useState([]); const [uniqueTeamIds, setUniqueTeamIds] = useState([]); const [totalSpendPerTeam, setTotalSpendPerTeam] = useState([]); + const [selectedKeyID, setSelectedKeyID] = useState(""); const [dateValue, setDateValue] = useState({ from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), to: new Date(), @@ -132,14 +135,18 @@ const UsagePage: React.FC = ({ let startTime = formatDate(firstDay); let endTime = formatDate(lastDay); + console.log("keys in usage", keys); + const updateEndUserData = async (startTime: Date | undefined, endTime: Date | undefined) => { if (!startTime || !endTime || !accessToken) { return; } + console.log("selectedKeyID", selectedKeyID); + let newTopUserData = await adminTopEndUsersCall( accessToken, - null, + selectedKeyID, startTime.toISOString(), endTime.toISOString() ) @@ -376,6 +383,30 @@ const UsagePage: React.FC = ({ updateEndUserData(value.from, value.to); // Call updateModelMetrics with the new date range }} /> + Key + End Users of your LLM API calls. Tracked When a `user` param is passed in your LLM calls From f5f5bebe49f219ca90358fe10d193095148be27e Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Wed, 8 May 2024 17:58:10 -0700 Subject: [PATCH 10/13] clean up users page --- .../src/components/view_users.tsx | 38 +------------------ 1 file changed, 2 insertions(+), 36 deletions(-) diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx index ebcfc4c2fa..55d5f59eba 100644 --- a/ui/litellm-dashboard/src/components/view_users.tsx +++ b/ui/litellm-dashboard/src/components/view_users.tsx @@ -83,22 +83,7 @@ const ViewUserDashboard: React.FC = ({ fetchData(); } - const fetchEndUserSpend = async () => { - try { - const topEndUsers = await adminTopEndUsersCall(accessToken, null); - console.log("user data response:", topEndUsers); - setEndUsers(topEndUsers); - } catch (error) { - console.error("There was an error fetching the model data", error); - } - }; - if ( - userRole && - (userRole == "Admin" || userRole == "Admin Viewer") && - !endUsers - ) { - fetchEndUserSpend(); - } + }, [accessToken, token, userRole, userID, currentPage]); if (!userData) { @@ -217,26 +202,7 @@ const ViewUserDashboard: React.FC = ({
- {/* Key - */} +
{/* From 0260addeac88ab412d65c783b7707ff4203ddf8c Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Wed, 8 May 2024 18:06:31 -0700 Subject: [PATCH 11/13] clean up usage tab --- ui/litellm-dashboard/src/components/usage.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx index 481a418d53..2463069948 100644 --- a/ui/litellm-dashboard/src/components/usage.tsx +++ b/ui/litellm-dashboard/src/components/usage.tsx @@ -375,7 +375,12 @@ const UsagePage: React.FC = ({ - End-Users of your LLM API calls. Tracked when a `user` param is passed in your LLM calls docs here

+ + + Select Time Range + + { @@ -383,8 +388,10 @@ const UsagePage: React.FC = ({ updateEndUserData(value.from, value.to); // Call updateModelMetrics with the new date range }} /> - Key - {keys?.map((key: any, index: number) => { if ( key && @@ -407,7 +414,11 @@ const UsagePage: React.FC = ({ return null; // Add this line to handle the case when the condition is not met })} - End Users of your LLM API calls. Tracked When a `user` param is passed in your LLM calls + + + + + From a38d9e35fdd97ccd90c1c1639f32776679036df0 Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Wed, 8 May 2024 18:19:27 -0700 Subject: [PATCH 12/13] feat - get price by end_user --- litellm/proxy/proxy_server.py | 40 ++++++++++++++++++++++------------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/litellm/proxy/proxy_server.py b/litellm/proxy/proxy_server.py index 68125a0473..a44966481d 100644 --- a/litellm/proxy/proxy_server.py +++ b/litellm/proxy/proxy_server.py @@ -5795,25 +5795,35 @@ async def global_spend_end_users(data: Optional[GlobalEndUsersSpend] = None): """ Gets the top 100 end-users for a given api key """ - startTime = datetime.now() - timedelta(days=30) - endTime = datetime.now() + startTime = None + endTime = None + selected_api_key = None + if data is not None: + startTime = data.startTime + endTime = data.endTime + selected_api_key = data.api_key + + startTime = startTime or datetime.now() - timedelta(days=30) + endTime = endTime or datetime.now() sql_query = """ -SELECT - end_user, - COUNT(*) AS total_count, - SUM(spend) AS total_spend -FROM - "LiteLLM_SpendLogs" -GROUP BY - end_user -WHERE - "startTime" >= $1 AND "startTime" < $2 -ORDER BY - total_spend DESC +SELECT end_user, COUNT(*) AS total_count, SUM(spend) AS total_spend +FROM "LiteLLM_SpendLogs" +WHERE "startTime" >= $1::timestamp + AND "startTime" < $2::timestamp + AND ( + CASE + WHEN $3::TEXT IS NULL THEN TRUE + ELSE api_key = $3 + END + ) +GROUP BY end_user +ORDER BY total_spend DESC LIMIT 100 """ - response = await prisma_client.db.query_raw(sql_query, startTime, endTime) + response = await prisma_client.db.query_raw( + sql_query, startTime, endTime, selected_api_key + ) return response From bcba92e0920453fa60683d631125159f7e26000e Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Wed, 8 May 2024 18:25:28 -0700 Subject: [PATCH 13/13] fix bug filtering keys on usage tab --- ui/litellm-dashboard/src/components/usage.tsx | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx index 2463069948..933bc0c36b 100644 --- a/ui/litellm-dashboard/src/components/usage.tsx +++ b/ui/litellm-dashboard/src/components/usage.tsx @@ -115,7 +115,7 @@ const UsagePage: React.FC = ({ const [topTagsData, setTopTagsData] = useState([]); const [uniqueTeamIds, setUniqueTeamIds] = useState([]); const [totalSpendPerTeam, setTotalSpendPerTeam] = useState([]); - const [selectedKeyID, setSelectedKeyID] = useState(""); + const [selectedKeyID, setSelectedKeyID] = useState(""); const [dateValue, setDateValue] = useState({ from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), to: new Date(), @@ -137,16 +137,16 @@ const UsagePage: React.FC = ({ console.log("keys in usage", keys); - const updateEndUserData = async (startTime: Date | undefined, endTime: Date | undefined) => { + const updateEndUserData = async (startTime: Date | undefined, endTime: Date | undefined, uiSelectedKey: string | null) => { if (!startTime || !endTime || !accessToken) { return; } - console.log("selectedKeyID", selectedKeyID); + console.log("uiSelectedKey", uiSelectedKey); let newTopUserData = await adminTopEndUsersCall( accessToken, - selectedKeyID, + uiSelectedKey, startTime.toISOString(), endTime.toISOString() ) @@ -391,7 +391,16 @@ const UsagePage: React.FC = ({ Select Key - + { + updateEndUserData(dateValue.from, dateValue.to, null); + }} + > + All Keys + {keys?.map((key: any, index: number) => { if ( key && @@ -399,12 +408,12 @@ const UsagePage: React.FC = ({ key["key_alias"].length > 0 ) { return ( + { - setSelectedKeyID(key["token"]); - updateEndUserData(dateValue.from, dateValue.to); + updateEndUserData(dateValue.from, dateValue.to, key["token"]); }} > {key["key_alias"]}