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

fix(usage.tsx): show top models by spend

Browse source
This commit is contained in:
Krrish Dholakia 2024-02-29 13:10:20 -08:00
parent 524cdb74a4
commit 52ee407f50
11 changed files with 54 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -132,6 +132,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
const currentDate = new Date();
const [keySpendData, setKeySpendData] = useState<any[]>([]);
const [topKeys, setTopKeys] = useState<any[]>([]);
const [topModels, setTopModels] = useState<any[]>([]);
const [topUsers, setTopUsers] = useState<any[]>([]);
const firstDay = new Date(
@ -188,6 +189,11 @@ const UsagePage: React.FC<UsagePageProps> = ({
}));
setTopKeys(filtered_keys);
const top_models = await adminTopModelsCall(accessToken);
const filtered_models = top_models.map((k: any) => ({
key: k["model"],
spend: k["total_spend"],
}));
setTopModels(filtered_models);
} else if (userRole == "App Owner") {
await userSpendLogsCall(
accessToken,
@ -285,6 +291,22 @@ const UsagePage: React.FC<UsagePageProps> = ({
/>
</Card>
</Col>
<Col numColSpan={1}>
<Card>
<Title>Top Models</Title>
<BarChart
className="mt-4 h-40"
data={topModels}
index="key"
categories={["spend"]}
colors={["blue"]}
yAxisWidth={200}
layout="vertical"
showXAxis={false}
showLegend={false}
/>
</Card>
</Col>
</Grid>
</div>
);