phoenix/litellm-mirror
0
0
Fork 1
mirror of https://github.com/BerriAI/litellm.git synced 2025-04-26 11:14:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into litellm_ui_improvements_time_series

Browse source
This commit is contained in:
Krish Dholakia 2024-02-09 20:54:36 -08:00 • committed by GitHub
commit a8ef8e12bb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 629 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -179,6 +179,12 @@ export const userSpendLogsCall = async (
url = `${url}/?start_date=${startTime}&end_date=${endTime}`;
}
const response = await fetch(url, {
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}`,
@ -195,7 +201,7 @@ export const userSpendLogsCall = async (
console.log(data);
return data;
} catch (error) {
console.error("Failed to create key:", error);
console.error("Failed to get spend for user", error);
throw error;
}
};

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

@ -142,7 +142,7 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
<div>
<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 (
<>