Merge pull request #2269 from BerriAI/litellm_show_key_spend_report

(feat) show Per Key Usage / Spend
This commit is contained in:
Ishaan Jaff 2024-02-29 17:44:59 -08:00 committed by GitHub
commit aac2f4d415
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 12 deletions

View file

@ -164,7 +164,7 @@ const ViewKeySpendReport: React.FC<ViewKeySpendReportProps> = ({
return (
<div>
<Button className="mx-auto" onClick={showModal}>
<Button size = "xs" onClick={showModal}>
View Spend Report
</Button>
<Modal
@ -183,7 +183,7 @@ const ViewKeySpendReport: React.FC<ViewKeySpendReportProps> = ({
<BarChart
className="mt-6"
data={data}
colors={["green"]}
colors={["blue"]}
index="day"
categories={["spend"]}
yAxisWidth={48}
@ -193,7 +193,7 @@ const ViewKeySpendReport: React.FC<ViewKeySpendReportProps> = ({
<Title className="mt-6">Top 5 Users Spend (USD)</Title>
<Card className="mb-6">
{userData && (
<BarList className="mt-6" data={userData} color="teal" />
<BarList className="mt-6" data={userData} color="blue" />
)}
</Card>
</Modal>

View file

@ -86,6 +86,7 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
<TableHeaderCell>Secret Key</TableHeaderCell>
<TableHeaderCell>Spend (USD)</TableHeaderCell>
<TableHeaderCell>Key Budget (USD)</TableHeaderCell>
<TableHeaderCell>Spend Report</TableHeaderCell>
<TableHeaderCell>Team ID</TableHeaderCell>
<TableHeaderCell>Metadata</TableHeaderCell>
<TableHeaderCell>Models</TableHeaderCell>
@ -122,6 +123,15 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
<Text>Unlimited Budget</Text>
)}
</TableCell>
<TableCell>
<ViewKeySpendReport
token={item.token}
accessToken={accessToken}
keySpend={item.spend}
keyBudget={item.max_budget}
keyName={item.key_name}
/>
</TableCell>
<TableCell>
<Text>{item.team_id}</Text>
</TableCell>
@ -152,15 +162,6 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
size="sm"
/>
</TableCell>
<TableCell>
<ViewKeySpendReport
token={item.token}
accessToken={accessToken}
keySpend={item.spend}
keyBudget={item.max_budget}
keyName={item.key_name}
/>
</TableCell>
</TableRow>
);
})}