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 f9b98c57a2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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 = """
SELECT
model_group AS model,
model_group,
date_trunc('day', "startTime") AS date,
COUNT(*) AS api_requests,
SUM(total_tokens) AS total_tokens
FROM "LiteLLM_SpendLogs"
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(
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}}
for row in db_response:
_model = row["model"]
_model = row["model_group"]
if _model not in model_ui_data:
model_ui_data[_model] = {
"daily_data": [],
@ -6675,7 +6674,7 @@ async def get_global_activity_model(
except Exception as e:
raise HTTPException(
status_code=status.HTTP_400_BAD_REQUEST,
status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
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("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) => {
if (!startTime || !endTime || !accessToken) {
return;
@ -482,10 +493,11 @@ const UsagePage: React.FC<UsagePageProps> = ({
<Title>All Up</Title>
<Grid numItems={2}>
<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
className="h-40"
data={globalActivity.daily_data}
valueFormatter={valueFormatterNumbers}
index="date"
colors={['cyan']}
categories={['api_requests']}
@ -494,10 +506,11 @@ const UsagePage: React.FC<UsagePageProps> = ({
</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
className="h-40"
data={globalActivity.daily_data}
valueFormatter={valueFormatterNumbers}
index="date"
colors={['cyan']}
categories={['total_tokens']}
@ -517,24 +530,26 @@ const UsagePage: React.FC<UsagePageProps> = ({
<Title>{globalActivity.model}</Title>
<Grid numItems={2}>
<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
className="h-40"
data={globalActivity.daily_data}
index="date"
colors={['cyan']}
categories={['api_requests']}
valueFormatter={valueFormatterNumbers}
onValueChange={(v) => console.log(v)}
/>
</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
className="h-40"
data={globalActivity.daily_data}
index="date"
colors={['cyan']}
categories={['total_tokens']}
valueFormatter={valueFormatterNumbers}
onValueChange={(v) => console.log(v)}
/>
</Col>
@ -565,7 +580,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
color: "#535452",
}}
>
API Requests {globalActivity.sum_api_requests}
API Requests {valueFormatterNumbers(globalActivity.sum_api_requests)}
</Subtitle>
<AreaChart
className="h-40"
@ -573,6 +588,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
index="date"
colors={['cyan']}
categories={['api_requests']}
valueFormatter={valueFormatterNumbers}
onValueChange={(v) => console.log(v)}
/>
</Col>
@ -584,13 +600,14 @@ const UsagePage: React.FC<UsagePageProps> = ({
color: "#535452",
}}
>
Tokens {globalActivity.sum_total_tokens}
Tokens {valueFormatterNumbers(globalActivity.sum_total_tokens)}
</Subtitle>
<BarChart
className="h-40"
data={globalActivity.daily_data}
index="date"
colors={['cyan']}
valueFormatter={valueFormatterNumbers}
categories={['total_tokens']}
onValueChange={(v) => console.log(v)}
/>