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

Merge pull request #1926 from BerriAI/litellm_ui_further_improvements

Browse source 
Enable viewing key alias instead of hashed tokens
This commit is contained in:
Krish Dholakia 2024-02-10 20:52:23 -08:00 • committed by GitHub
commit a36aa6aa01
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 151 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import { BarChart, Card, Title } from "@tremor/react";
import React, { useState, useEffect } from "react";
import { Grid, Col, Text, LineChart } from "@tremor/react";
import { userSpendLogsCall } from "./networking";
import { userSpendLogsCall, keyInfoCall } from "./networking";
import { start } from "repl";
interface UsagePageProps {
@ -75,7 +75,7 @@ function getTopKeys(data: Array<{ [key: string]: unknown }>): any[] {
spendKeys.sort((a, b) => Number(b.spend) - Number(a.spend));
const topKeys = spendKeys.slice(0, 5);
const topKeys = spendKeys.slice(0, 5).map((k) => k.key);
console.log(`topKeys: ${Object.keys(topKeys[0])}`);
return topKeys;
}
@ -164,18 +164,29 @@ const UsagePage: React.FC<UsagePageProps> = ({
if (accessToken && token && userRole && userID) {
const fetchData = async () => {
try {
const response = await userSpendLogsCall(
await userSpendLogsCall(
accessToken,
token,
userRole,
userID,
startTime,
endTime
);
setTopKeys(getTopKeys(response));
setTopUsers(getTopUsers(response));
setKeySpendData(response);
).then(async (response) => {
const topKeysResponse = await keyInfoCall(
accessToken,
getTopKeys(response)
);
const filtered_keys = topKeysResponse["info"].map((k: any) => ({
key: (k["key_name"] || k["key_alias"] || k["token"]).substring(
0,
7
),
spend: k["spend"],
}));
setTopKeys(filtered_keys);
setTopUsers(getTopUsers(response));
setKeySpendData(response);
});
} catch (error) {
console.error("There was an error fetching the data", error);
// Optionally, update your UI to reflect the error state here as well
@ -185,11 +196,6 @@ const UsagePage: React.FC<UsagePageProps> = ({
}
}, [accessToken, token, userRole, userID, startTime, endTime]);
topUsers.forEach((obj) => {
Object.values(obj).forEach((value) => {
console.log(value);
});
});
return (
<div style={{ width: "100%" }}>
<Grid numItems={2} className="gap-2 p-10 h-[75vh] w-full">
@ -217,7 +223,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
index="key"
categories={["spend"]}
colors={["blue"]}
yAxisWidth={200}
yAxisWidth={80}
tickGap={5}
layout="vertical"
showXAxis={false}