scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-06 02:48:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 103

Merge pull request #1915 from BerriAI/litellm_view_total_proxy_budget_spend

Browse source 
[FEAT] ui - view total proxy spend / budget
This commit is contained in:
Ishaan Jaff 2024-02-09 11:59:16 -08:00 • committed by GitHub
commit 61031fe380
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 56 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
ui/litellm-dashboard/src/components/networking.tsx
View file

@ -162,3 +162,32 @@ export const keySpendLogsCall = async (accessToken: String, token: String) => {
throw error;
}
};
export const spendUsersCall = async (accessToken: String, userID: String) => {
try {
const url = proxyBaseUrl ? `${proxyBaseUrl}/spend/users` : `/spend/users`;
console.log("in spendUsersCall:", url);
const response = await fetch(`${url}/?user_id=${userID}`, {
method: "GET",
headers: {
Authorization: `Bearer ${accessToken}`,
"Content-Type": "application/json",
},
});
if (!response.ok) {
const errorData = await response.text();
message.error(errorData);
throw new Error("Network response was not ok");
}
const data = await response.json();
console.log(data);
return data;
} catch (error) {
console.error("Failed to get spend for user", error);
throw error;
}
};

2
ui/litellm-dashboard/src/components/user_dashboard.tsx
View file

@ -120,7 +120,7 @@ const UserDashboard = () => {
<Navbar userID={userID} userRole={userRole} userEmail={userEmail} />
<Grid numItems={1} className="gap-0 p-10 h-[75vh] w-full">
<Col numColSpan={1}>
<ViewUserSpend userID={userID} userSpendData={userSpendData} />
<ViewUserSpend userID={userID} userSpendData={userSpendData} userRole={userRole} accessToken={accessToken}/>
<ViewKeyTable
userID={userID}
accessToken={accessToken}

31
ui/litellm-dashboard/src/components/view_user_spend.tsx
View file

@ -1,5 +1,5 @@
"use client";
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import { keyDeleteCall } from "./networking";
import { StatusOnlineIcon, TrashIcon } from "@heroicons/react/outline";
import { DonutChart } from "@tremor/react";
@ -17,6 +17,7 @@ import {
Title,
Icon,
} from "@tremor/react";
import { spendUsersCall } from "./networking";
// Define the props type
@ -28,13 +29,33 @@ interface UserSpendData {
interface ViewUserSpendProps {
userID: string | null;
userSpendData: UserSpendData | null; // Use the UserSpendData interface here
userRole: string | null;
accessToken: string;
}
const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userSpendData }) => {
const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userSpendData, userRole, accessToken }) => {
console.log("User SpendData:", userSpendData);
const spend = userSpendData?.spend;
const maxBudget = userSpendData?.max_budget || null;
const [spend, setSpend] = useState(userSpendData?.spend);
const [maxBudget, setMaxBudget] = useState(userSpendData?.max_budget || null);
useEffect(() => {
const fetchData = async () => {
if (userRole === "Admin") {
try {
const data = await spendUsersCall(accessToken, "litellm-proxy-budget");
console.log("Result from callSpendUsers:", data);
const total_budget = data[0]
setSpend(total_budget?.spend);
setMaxBudget(total_budget?.max_budget || null);
} catch (error) {
console.error("Failed to get spend for user", error);
}
}
};
fetchData();
}, [userRole, accessToken, userID]);
const displayMaxBudget = maxBudget !== null ? `$${maxBudget} limit` : "No limit";
const displayText = `$${spend} / ${displayMaxBudget}`;
return (
<>