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

ui - show api requests, num tokens

Browse source
This commit is contained in:
Ishaan Jaff 2024-05-25 10:37:28 -07:00
parent 414dfd2c86
commit 93024ccff3
2 changed files with 85 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,16 @@
import { BarChart, BarList, Card, Title, Table, TableHead, TableHeaderCell, TableRow, TableCell, TableBody, Metric } from "@tremor/react";
import { BarChart, BarList, Card, Title, Table, TableHead, TableHeaderCell, TableRow, TableCell, TableBody, Metric, Subtitle } from "@tremor/react";
import React, { useState, useEffect } from "react";
import ViewUserSpend from "./view_user_spend";
import { Grid, Col, Text, LineChart, TabPanel, TabPanels, TabGroup, TabList, Tab, Select, SelectItem, DateRangePicker, DateRangePickerValue, DonutChart} from "@tremor/react";
import {
Grid, Col, Text,
LineChart, TabPanel, TabPanels,
TabGroup, TabList, Tab, Select, SelectItem,
DateRangePicker, DateRangePickerValue,
DonutChart,
AreaChart,
} from "@tremor/react";
import {
userSpendLogsCall,
keyInfoCall,
@ -17,6 +24,7 @@ import {
modelAvailableCall,
modelInfoCall,
adminspendByProvider,
adminGlobalActivity,
} from "./networking";
import { start } from "repl";
@ -117,6 +125,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
const [uniqueTeamIds, setUniqueTeamIds] = useState<any[]>([]);
const [totalSpendPerTeam, setTotalSpendPerTeam] = useState<any[]>([]);
const [spendByProvider, setSpendByProvider] = useState<any[]>([]);
const [globalActivity, setGlobalActivity] = useState<any[]>([]);
const [selectedKeyID, setSelectedKeyID] = useState<string | null>("");
const [dateValue, setDateValue] = useState<DateRangePickerValue>({
from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
@ -265,6 +274,10 @@ const UsagePage: React.FC<UsagePageProps> = ({
console.log("spend/user result", spend_user_call);
let global_activity_response = await adminGlobalActivity(accessToken, startTime, endTime);
setGlobalActivity(global_activity_response)
} else if (userRole == "App Owner") {
await userSpendLogsCall(
accessToken,
@ -330,7 +343,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
<TabPanel>
<TabGroup>
<TabList variant="solid">
<TabList variant="solid" className="mt-1">
<Tab>Cost</Tab>
<Tab>Activity</Tab>
</TabList>
@ -429,6 +442,38 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Col>
</Grid>
</TabPanel>
<TabPanel>
<Grid numItems={1} className="gap-2 h-[75vh] w-full">
<Card>
<Title>All Up</Title>
<Grid numItems={2}>
<Col>
<Subtitle>API Requests {globalActivity.sum_api_requests}</Subtitle>
<AreaChart
className="h-40"
data={globalActivity.daily_data}
index="date"
categories={['api_requests']}
onValueChange={(v) => console.log(v)}
/>
</Col>
<Col>
<Subtitle>Tokens {globalActivity.sum_total_tokens}</Subtitle>
<BarChart
className="h-40"
data={globalActivity.daily_data}
index="date"
categories={['total_tokens']}
onValueChange={(v) => console.log(v)}
/>
</Col>
</Grid>
</Card>
</Grid>
</TabPanel>
</TabPanels>
</TabGroup>