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

37
ui/litellm-dashboard/src/components/networking.tsx
View file

@ -994,6 +994,7 @@ export const adminTopEndUsersCall = async (
throw error;
}
};
export const adminspendByProvider = async (accessToken: String, keyToken: String | null, startTime: String | undefined, endTime: String | undefined) => {
try {
let url = proxyBaseUrl ? `${proxyBaseUrl}/global/spend/provider` : `/global/spend/provider`;
@ -1035,6 +1036,42 @@ export const adminspendByProvider = async (accessToken: String, keyToken: String
}
};
export const adminGlobalActivity = async (accessToken: String, startTime: String | undefined, endTime: String | undefined) => {
try {
let url = proxyBaseUrl ? `${proxyBaseUrl}/global/activity` : `/global/activity`;
if (startTime && endTime) {
url += `?start_date=${startTime}&end_date=${endTime}`;
}
const requestOptions: {
method: string;
headers: {
Authorization: string;
};
} = {
method: "GET",
headers: {
Authorization: `Bearer ${accessToken}`,
},
};
const response = await fetch(url, requestOptions);
if (!response.ok) {
const errorData = await response.text();
throw new Error("Network response was not ok");
}
const data = await response.json();
console.log(data);
return data;
} catch (error) {
console.error("Failed to fetch spend data:", error);
throw error;
}
};
export const adminTopModelsCall = async (accessToken: String) => {
try {
let url = proxyBaseUrl

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>