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 global activity

Browse source
This commit is contained in:
Ishaan Jaff 2024-05-25 12:22:10 -07:00
parent aa50020bda
commit 9035d4d6af
2 changed files with 76 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1072,6 +1072,42 @@ export const adminGlobalActivity = async (accessToken: String, startTime: String
};
export const adminGlobalActivityPerModel = async (accessToken: String, startTime: String | undefined, endTime: String | undefined) => {
try {
let url = proxyBaseUrl ? `${proxyBaseUrl}/global/activity/model` : `/global/activity/model`;
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

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

@ -25,6 +25,7 @@ import {
modelInfoCall,
adminspendByProvider,
adminGlobalActivity,
adminGlobalActivityPerModel,
} from "./networking";
import { start } from "repl";
@ -126,6 +127,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
const [totalSpendPerTeam, setTotalSpendPerTeam] = useState<any[]>([]);
const [spendByProvider, setSpendByProvider] = useState<any[]>([]);
const [globalActivity, setGlobalActivity] = useState<any[]>([]);
const [globalActivityPerModel, setGlobalActivityPerModel] = useState<any[]>([]);
const [selectedKeyID, setSelectedKeyID] = useState<string | null>("");
const [dateValue, setDateValue] = useState<DateRangePickerValue>({
from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
@ -277,6 +279,10 @@ const UsagePage: React.FC<UsagePageProps> = ({
let global_activity_response = await adminGlobalActivity(accessToken, startTime, endTime);
setGlobalActivity(global_activity_response)
let global_activity_per_model = await adminGlobalActivityPerModel(accessToken, startTime, endTime);
console.log("global activity per model", global_activity_per_model);
setGlobalActivityPerModel(global_activity_per_model)
} else if (userRole == "App Owner") {
await userSpendLogsCall(
@ -453,6 +459,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
className="h-40"
data={globalActivity.daily_data}
index="date"
colors={['cyan']}
categories={['api_requests']}
onValueChange={(v) => console.log(v)}
/>
@ -464,6 +471,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
className="h-40"
data={globalActivity.daily_data}
index="date"
colors={['cyan']}
categories={['total_tokens']}
onValueChange={(v) => console.log(v)}
/>
@ -472,6 +480,38 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Card>
{globalActivityPerModel.map((globalActivity, index) => (
<Card key={index}>
<Title>{globalActivity.model}</Title>
<Grid numItems={2}>
<Col>
<Subtitle>API Requests {globalActivity.sum_api_requests}</Subtitle>
<AreaChart
className="h-40"
data={globalActivity.daily_data}
index="date"
colors={['cyan']}
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"
colors={['cyan']}
categories={['total_tokens']}
onValueChange={(v) => console.log(v)}
/>
</Col>
</Grid>
</Card>
))}
</Grid>
</TabPanel>
</TabPanels>