diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index 8642a624dd..e7678ba10a 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/ui/litellm-dashboard/src/components/networking.tsx @@ -1072,6 +1072,42 @@ export const adminGlobalActivity = async (accessToken: String, startTime: String }; +export const adminGlobalActivityPerModel = async (accessToken: String, startTime: String | undefined, endTime: String | undefined) => { + try { + let url = proxyBaseUrl ? `${proxyBaseUrl}/global/activity/model` : `/global/activity/model`; + + if (startTime && endTime) { + url += `?start_date=${startTime}&end_date=${endTime}`; + } + + const requestOptions: { + method: string; + headers: { + Authorization: string; + }; + } = { + method: "GET", + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }; + + const response = await fetch(url, requestOptions); + + if (!response.ok) { + const errorData = await response.text(); + throw new Error("Network response was not ok"); + } + const data = await response.json(); + console.log(data); + return data; + } catch (error) { + console.error("Failed to fetch spend data:", error); + throw error; + } +}; + + export const adminTopModelsCall = async (accessToken: String) => { try { let url = proxyBaseUrl diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx index 390de71667..3eb2bc25fb 100644 --- a/ui/litellm-dashboard/src/components/usage.tsx +++ b/ui/litellm-dashboard/src/components/usage.tsx @@ -25,6 +25,7 @@ import { modelInfoCall, adminspendByProvider, adminGlobalActivity, + adminGlobalActivityPerModel, } from "./networking"; import { start } from "repl"; @@ -126,6 +127,7 @@ const UsagePage: React.FC = ({ const [totalSpendPerTeam, setTotalSpendPerTeam] = useState([]); const [spendByProvider, setSpendByProvider] = useState([]); const [globalActivity, setGlobalActivity] = useState([]); + const [globalActivityPerModel, setGlobalActivityPerModel] = useState([]); const [selectedKeyID, setSelectedKeyID] = useState(""); const [dateValue, setDateValue] = useState({ from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), @@ -277,6 +279,10 @@ const UsagePage: React.FC = ({ let global_activity_response = await adminGlobalActivity(accessToken, startTime, endTime); setGlobalActivity(global_activity_response) + let global_activity_per_model = await adminGlobalActivityPerModel(accessToken, startTime, endTime); + console.log("global activity per model", global_activity_per_model); + setGlobalActivityPerModel(global_activity_per_model) + } else if (userRole == "App Owner") { await userSpendLogsCall( @@ -453,6 +459,7 @@ const UsagePage: React.FC = ({ className="h-40" data={globalActivity.daily_data} index="date" + colors={['cyan']} categories={['api_requests']} onValueChange={(v) => console.log(v)} /> @@ -464,6 +471,7 @@ const UsagePage: React.FC = ({ className="h-40" data={globalActivity.daily_data} index="date" + colors={['cyan']} categories={['total_tokens']} onValueChange={(v) => console.log(v)} /> @@ -472,6 +480,38 @@ const UsagePage: React.FC = ({ + + {globalActivityPerModel.map((globalActivity, index) => ( + + {globalActivity.model} + + + API Requests {globalActivity.sum_api_requests} + console.log(v)} + /> + + + Tokens {globalActivity.sum_total_tokens} + console.log(v)} + /> + + + + ))} + +