forked from phoenix/litellm-mirror
show cost per tag on ui
This commit is contained in:
parent
73fce02392
commit
1f7a741e28
1 changed files with 25 additions and 12 deletions
|
@ -1,4 +1,4 @@
|
||||||
import { BarChart, BarList, Card, Title } from "@tremor/react";
|
import { BarChart, BarList, Card, Title, Table, TableHead, TableHeaderCell, TableRow, TableCell, TableBody, Metric } from "@tremor/react";
|
||||||
|
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
@ -379,18 +379,31 @@ const UsagePage: React.FC<UsagePageProps> = ({
|
||||||
</Grid>
|
</Grid>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel>
|
<TabPanel>
|
||||||
<Grid numItems={2} className="gap-2 h-[75vh] w-full">
|
<Grid numItems={2} className="gap-2 h-[75vh] w-full mb-4">
|
||||||
<Col numColSpan={2}>
|
<Col numColSpan={2}>
|
||||||
<Card className="mb-2">
|
|
||||||
<Title>Total Spend Per Tag</Title>
|
|
||||||
<BarList
|
|
||||||
data={topTagsData}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
|
||||||
|
|
||||||
<Title>Daily Spend Per Tag</Title>
|
<Card>
|
||||||
<BarChart
|
<Title>Spend Per Tag - Last 30 Days</Title>
|
||||||
|
<Text>Get Started Tracking cost per tag <a href="https://docs.litellm.ai/docs/proxy/enterprise#tracking-spend-for-custom-tags">here</a></Text>
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableHeaderCell>Tag</TableHeaderCell>
|
||||||
|
<TableHeaderCell>Spend</TableHeaderCell>
|
||||||
|
<TableHeaderCell>Requests</TableHeaderCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{topTagsData.map((tag) => (
|
||||||
|
<TableRow key={tag.name}>
|
||||||
|
<TableCell>{tag.name}</TableCell>
|
||||||
|
<TableCell>{tag.value}</TableCell>
|
||||||
|
<TableCell>{tag.log_count}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
{/* <BarChart
|
||||||
className="h-72"
|
className="h-72"
|
||||||
data={teamSpendData}
|
data={teamSpendData}
|
||||||
showLegend={true}
|
showLegend={true}
|
||||||
|
@ -399,7 +412,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
|
||||||
yAxisWidth={80}
|
yAxisWidth={80}
|
||||||
|
|
||||||
stack={true}
|
stack={true}
|
||||||
/>
|
/> */}
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col numColSpan={2}>
|
<Col numColSpan={2}>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue