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

(ui) show users their spend when max budget not set

Browse source
This commit is contained in:
Ishaan Jaff 2024-03-18 18:28:13 -07:00
parent 87dd3f1235
commit a8473042d1
1 changed files with 3 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -37,31 +37,15 @@ const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userSpendData, us
const [spend, setSpend] = useState(userSpendData?.spend); const [spend, setSpend] = useState(userSpendData?.spend);
const [maxBudget, setMaxBudget] = useState(userSpendData?.max_budget || null); 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 displayMaxBudget = maxBudget !== null ? `$${maxBudget} limit` : "No limit";
const roundedSpend = spend !== undefined ? spend.toFixed(4) : null;
return ( return (
<> <>
<Card className="mx-auto mb-4"> <Card className="mx-auto mb-4">
<Metric> <Metric>
${spend} ${roundedSpend}
</Metric> </Metric>
<Title> <Title>
/ {displayMaxBudget} / {displayMaxBudget}