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

(v0) show tabs for team

Browse source
This commit is contained in:
Ishaan Jaff 2024-03-16 17:22:18 -07:00
parent ac6c69ff89
commit 794dcfda41
1 changed files with 80 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import { BarChart, Card, Title } from "@tremor/react"; import { BarChart, Card, Title } from "@tremor/react";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Grid, Col, Text, LineChart } from "@tremor/react"; import { Grid, Col, Text, LineChart, TabPanel, TabPanels, TabGroup, TabList, Tab } from "@tremor/react";
import { import {
userSpendLogsCall, userSpendLogsCall,
keyInfoCall, keyInfoCall,
@ -242,72 +242,85 @@ const UsagePage: React.FC<UsagePageProps> = ({
return ( return (
<div style={{ width: "100%" }}> <div style={{ width: "100%" }}>
<Grid numItems={2} className="gap-2 p-10 h-[75vh] w-full"> <TabGroup>
<Col numColSpan={2}> <TabList className="mt-4">
<Card> <Tab>All Up</Tab>
<Title>Monthly Spend</Title> <Tab>Team Based Usage</Tab>
<BarChart </TabList>
data={keySpendData} <TabPanels>
index="date" <TabPanel>
categories={["spend"]} <Grid numItems={2} className="gap-2 p-10 h-[75vh] w-full">
colors={["blue"]} <Col numColSpan={2}>
valueFormatter={valueFormatter} <Card>
yAxisWidth={100} <Title>Monthly Spend</Title>
tickGap={5} <BarChart
// customTooltip={customTooltip} data={keySpendData}
/> index="date"
</Card> categories={["spend"]}
</Col> colors={["blue"]}
<Col numColSpan={1}> valueFormatter={valueFormatter}
<Card> yAxisWidth={100}
<Title>Top API Keys</Title> tickGap={5}
<BarChart // customTooltip={customTooltip}
className="mt-4 h-40" />
data={topKeys} </Card>
index="key" </Col>
categories={["spend"]} <Col numColSpan={1}>
colors={["blue"]} <Card>
yAxisWidth={80} <Title>Top API Keys</Title>
tickGap={5} <BarChart
layout="vertical" className="mt-4 h-40"
showXAxis={false} data={topKeys}
showLegend={false} index="key"
/> categories={["spend"]}
</Card> colors={["blue"]}
</Col> yAxisWidth={80}
<Col numColSpan={1}> tickGap={5}
<Card> layout="vertical"
<Title>Top Users</Title> showXAxis={false}
<BarChart showLegend={false}
className="mt-4 h-40" />
data={topUsers} </Card>
index="user_id" </Col>
categories={["spend"]} <Col numColSpan={1}>
colors={["blue"]} <Card>
yAxisWidth={200} <Title>Top Users</Title>
layout="vertical" <BarChart
showXAxis={false} className="mt-4 h-40"
showLegend={false} data={topUsers}
/> index="user_id"
</Card> categories={["spend"]}
</Col> colors={["blue"]}
<Col numColSpan={1}> yAxisWidth={200}
<Card> layout="vertical"
<Title>Top Models</Title> showXAxis={false}
<BarChart showLegend={false}
className="mt-4 h-40" />
data={topModels} </Card>
index="key" </Col>
categories={["spend"]} <Col numColSpan={1}>
colors={["blue"]} <Card>
yAxisWidth={200} <Title>Top Models</Title>
layout="vertical" <BarChart
showXAxis={false} className="mt-4 h-40"
showLegend={false} data={topModels}
/> index="key"
</Card> categories={["spend"]}
</Col> colors={["blue"]}
</Grid> yAxisWidth={200}
layout="vertical"
showXAxis={false}
showLegend={false}
/>
</Card>
</Col>
</Grid>
</TabPanel>
<TabPanel>
<Title>Coming Soon</Title>
</TabPanel>
</TabPanels>
</TabGroup>
</div> </div>
); );
}; };