phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

(feat) ui - view total proxy spend / budget

Browse source
This commit is contained in:
ishaan-jaff 2024-02-09 10:59:19 -08:00
parent cf16687509
commit 1d2ee8a487
3 changed files with 56 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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 (
<>