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

Merge pull request #3894 from BerriAI/litellm_update_analytics_tab

Browse source 
[Feat] UI update analytics tab to show human friendly usage vals
This commit is contained in:
Ishaan Jaff 2024-05-29 17:31:21 -07:00 • committed by GitHub
commit 88e13b8f8b
2 changed files with 27 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

9
litellm/proxy/proxy_server.py
View file

@ -6615,14 +6615,13 @@ async def get_global_activity_model(
sql_query = """ sql_query = """
SELECT SELECT
model_group AS model, model_group,
date_trunc('day', "startTime") AS date, date_trunc('day', "startTime") AS date,
COUNT(*) AS api_requests, COUNT(*) AS api_requests,
SUM(total_tokens) AS total_tokens SUM(total_tokens) AS total_tokens
FROM "LiteLLM_SpendLogs" FROM "LiteLLM_SpendLogs"
WHERE "startTime" BETWEEN $1::date AND $2::date + interval '1 day' WHERE "startTime" BETWEEN $1::date AND $2::date + interval '1 day'
GROUP BY model, date_trunc('day', "startTime") GROUP BY model_group, date_trunc('day', "startTime")
""" """
db_response = await prisma_client.db.query_raw( db_response = await prisma_client.db.query_raw(
sql_query, start_date_obj, end_date_obj sql_query, start_date_obj, end_date_obj
@ -6635,7 +6634,7 @@ async def get_global_activity_model(
) # {"gpt-4": {"daily_data": [], "sum_api_requests": 0, "sum_total_tokens": 0}} ) # {"gpt-4": {"daily_data": [], "sum_api_requests": 0, "sum_total_tokens": 0}}
for row in db_response: for row in db_response:
_model = row["model"] _model = row["model_group"]
if _model not in model_ui_data: if _model not in model_ui_data:
model_ui_data[_model] = { model_ui_data[_model] = {
"daily_data": [], "daily_data": [],
@ -6675,7 +6674,7 @@ async def get_global_activity_model(
except Exception as e: except Exception as e:
raise HTTPException( raise HTTPException(
status_code=status.HTTP_400_BAD_REQUEST, status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
detail={"error": str(e)}, detail={"error": str(e)},
) )

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

@ -162,6 +162,17 @@ const UsagePage: React.FC<UsagePageProps> = ({
console.log("keys in usage", keys); console.log("keys in usage", keys);
console.log("premium user in usage", premiumUser); console.log("premium user in usage", premiumUser);
function valueFormatterNumbers(number) {
const formatter = new Intl.NumberFormat('en-US', {
maximumFractionDigits: 0,
notation: 'compact',
compactDisplay: 'short',
});
return formatter.format(number);
}
const updateEndUserData = async (startTime: Date | undefined, endTime: Date | undefined, uiSelectedKey: string | null) => { const updateEndUserData = async (startTime: Date | undefined, endTime: Date | undefined, uiSelectedKey: string | null) => {
if (!startTime || !endTime || !accessToken) { if (!startTime || !endTime || !accessToken) {
return; return;
@ -482,10 +493,11 @@ const UsagePage: React.FC<UsagePageProps> = ({
<Title>All Up</Title> <Title>All Up</Title>
<Grid numItems={2}> <Grid numItems={2}>
<Col> <Col>
<Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>API Requests {globalActivity.sum_api_requests}</Subtitle> <Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>API Requests { valueFormatterNumbers(globalActivity.sum_api_requests)}</Subtitle>
<AreaChart <AreaChart
className="h-40" className="h-40"
data={globalActivity.daily_data} data={globalActivity.daily_data}
valueFormatter={valueFormatterNumbers}
index="date" index="date"
colors={['cyan']} colors={['cyan']}
categories={['api_requests']} categories={['api_requests']}
@ -494,10 +506,11 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Col> </Col>
<Col> <Col>
<Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>Tokens {globalActivity.sum_total_tokens}</Subtitle> <Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>Tokens { valueFormatterNumbers(globalActivity.sum_total_tokens)}</Subtitle>
<BarChart <BarChart
className="h-40" className="h-40"
data={globalActivity.daily_data} data={globalActivity.daily_data}
valueFormatter={valueFormatterNumbers}
index="date" index="date"
colors={['cyan']} colors={['cyan']}
categories={['total_tokens']} categories={['total_tokens']}
@ -517,24 +530,26 @@ const UsagePage: React.FC<UsagePageProps> = ({
<Title>{globalActivity.model}</Title> <Title>{globalActivity.model}</Title>
<Grid numItems={2}> <Grid numItems={2}>
<Col> <Col>
<Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>API Requests {globalActivity.sum_api_requests}</Subtitle> <Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>API Requests {valueFormatterNumbers(globalActivity.sum_api_requests)}</Subtitle>
<AreaChart <AreaChart
className="h-40" className="h-40"
data={globalActivity.daily_data} data={globalActivity.daily_data}
index="date" index="date"
colors={['cyan']} colors={['cyan']}
categories={['api_requests']} categories={['api_requests']}
valueFormatter={valueFormatterNumbers}
onValueChange={(v) => console.log(v)} onValueChange={(v) => console.log(v)}
/> />
</Col> </Col>
<Col> <Col>
<Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>Tokens {globalActivity.sum_total_tokens}</Subtitle> <Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>Tokens {valueFormatterNumbers(globalActivity.sum_total_tokens)}</Subtitle>
<BarChart <BarChart
className="h-40" className="h-40"
data={globalActivity.daily_data} data={globalActivity.daily_data}
index="date" index="date"
colors={['cyan']} colors={['cyan']}
categories={['total_tokens']} categories={['total_tokens']}
valueFormatter={valueFormatterNumbers}
onValueChange={(v) => console.log(v)} onValueChange={(v) => console.log(v)}
/> />
</Col> </Col>
@ -565,7 +580,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
color: "#535452", color: "#535452",
}} }}
> >
API Requests {globalActivity.sum_api_requests} API Requests {valueFormatterNumbers(globalActivity.sum_api_requests)}
</Subtitle> </Subtitle>
<AreaChart <AreaChart
className="h-40" className="h-40"
@ -573,6 +588,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
index="date" index="date"
colors={['cyan']} colors={['cyan']}
categories={['api_requests']} categories={['api_requests']}
valueFormatter={valueFormatterNumbers}
onValueChange={(v) => console.log(v)} onValueChange={(v) => console.log(v)}
/> />
</Col> </Col>
@ -584,13 +600,14 @@ const UsagePage: React.FC<UsagePageProps> = ({
color: "#535452", color: "#535452",
}} }}
> >
Tokens {globalActivity.sum_total_tokens} Tokens {valueFormatterNumbers(globalActivity.sum_total_tokens)}
</Subtitle> </Subtitle>
<BarChart <BarChart
className="h-40" className="h-40"
data={globalActivity.daily_data} data={globalActivity.daily_data}
index="date" index="date"
colors={['cyan']} colors={['cyan']}
valueFormatter={valueFormatterNumbers}
categories={['total_tokens']} categories={['total_tokens']}
onValueChange={(v) => console.log(v)} onValueChange={(v) => console.log(v)}
/> />