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

feat - show activity on admin ui

Browse source
This commit is contained in:
Ishaan Jaff 2024-05-25 12:36:17 -07:00
parent c7fea8d1ba
commit 7a8ae5faa4
1 changed files with 12 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -37,6 +37,13 @@ interface UsagePageProps {
keys: any[] | null; keys: any[] | null;
} }
interface GlobalActivityData {
sum_api_requests: number;
sum_total_tokens: number;
daily_data: { date: string; api_requests: number; total_tokens: number }[];
}
type CustomTooltipTypeBar = { type CustomTooltipTypeBar = {
payload: any; payload: any;
active: boolean | undefined; active: boolean | undefined;
@ -126,7 +133,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
const [uniqueTeamIds, setUniqueTeamIds] = useState<any[]>([]); const [uniqueTeamIds, setUniqueTeamIds] = useState<any[]>([]);
const [totalSpendPerTeam, setTotalSpendPerTeam] = useState<any[]>([]); const [totalSpendPerTeam, setTotalSpendPerTeam] = useState<any[]>([]);
const [spendByProvider, setSpendByProvider] = useState<any[]>([]); const [spendByProvider, setSpendByProvider] = useState<any[]>([]);
const [globalActivity, setGlobalActivity] = useState<any[]>([]); const [globalActivity, setGlobalActivity] = useState<GlobalActivityData>({} as GlobalActivityData);
const [globalActivityPerModel, setGlobalActivityPerModel] = useState<any[]>([]); const [globalActivityPerModel, setGlobalActivityPerModel] = useState<any[]>([]);
const [selectedKeyID, setSelectedKeyID] = useState<string | null>(""); const [selectedKeyID, setSelectedKeyID] = useState<string | null>("");
const [dateValue, setDateValue] = useState<DateRangePickerValue>({ const [dateValue, setDateValue] = useState<DateRangePickerValue>({
@ -454,7 +461,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
<Title>All Up</Title> <Title>All Up</Title>
<Grid numItems={2}> <Grid numItems={2}>
<Col> <Col>
<Subtitle>API Requests {globalActivity.sum_api_requests}</Subtitle> <Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>API Requests {globalActivity.sum_api_requests}</Subtitle>
<AreaChart <AreaChart
className="h-40" className="h-40"
data={globalActivity.daily_data} data={globalActivity.daily_data}
@ -466,7 +473,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Col> </Col>
<Col> <Col>
<Subtitle>Tokens {globalActivity.sum_total_tokens}</Subtitle> <Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>Tokens {globalActivity.sum_total_tokens}</Subtitle>
<BarChart <BarChart
className="h-40" className="h-40"
data={globalActivity.daily_data} data={globalActivity.daily_data}
@ -486,7 +493,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
<Title>{globalActivity.model}</Title> <Title>{globalActivity.model}</Title>
<Grid numItems={2}> <Grid numItems={2}>
<Col> <Col>
<Subtitle>API Requests {globalActivity.sum_api_requests}</Subtitle> <Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>API Requests {globalActivity.sum_api_requests}</Subtitle>
<AreaChart <AreaChart
className="h-40" className="h-40"
data={globalActivity.daily_data} data={globalActivity.daily_data}
@ -497,7 +504,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
/> />
</Col> </Col>
<Col> <Col>
<Subtitle>Tokens {globalActivity.sum_total_tokens}</Subtitle> <Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>Tokens {globalActivity.sum_total_tokens}</Subtitle>
<BarChart <BarChart
className="h-40" className="h-40"
data={globalActivity.daily_data} data={globalActivity.daily_data}