scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-06 08:16:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 79

fix: use Grid layout for token cards and guard against NaN in paginated aggregation

Browse source
This commit is contained in:
Ryan Crabbe 2026-03-11 17:20:38 -07:00
parent 7e1c860ffe
commit 62343b477c
1 changed files with 35 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
View file

@ -400,15 +400,15 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
const pageData = await userDailyActivityCall(accessToken, startTime, endTime, page, effectiveUserId);
allResults.push(...pageData.results);
if (pageData.metadata) {
aggregatedMetadata.total_spend += pageData.metadata.total_spend || 0;
aggregatedMetadata.total_api_requests += pageData.metadata.total_api_requests || 0;
aggregatedMetadata.total_successful_requests += pageData.metadata.total_successful_requests || 0;
aggregatedMetadata.total_failed_requests += pageData.metadata.total_failed_requests || 0;
aggregatedMetadata.total_tokens += pageData.metadata.total_tokens || 0;
aggregatedMetadata.total_prompt_tokens += pageData.metadata.total_prompt_tokens || 0;
aggregatedMetadata.total_completion_tokens += pageData.metadata.total_completion_tokens || 0;
aggregatedMetadata.total_cache_read_input_tokens += pageData.metadata.total_cache_read_input_tokens || 0;
aggregatedMetadata.total_cache_creation_input_tokens += pageData.metadata.total_cache_creation_input_tokens || 0;
aggregatedMetadata.total_spend = (aggregatedMetadata.total_spend || 0) + (pageData.metadata.total_spend || 0);
aggregatedMetadata.total_api_requests = (aggregatedMetadata.total_api_requests || 0) + (pageData.metadata.total_api_requests || 0);
aggregatedMetadata.total_successful_requests = (aggregatedMetadata.total_successful_requests || 0) + (pageData.metadata.total_successful_requests || 0);
aggregatedMetadata.total_failed_requests = (aggregatedMetadata.total_failed_requests || 0) + (pageData.metadata.total_failed_requests || 0);
aggregatedMetadata.total_tokens = (aggregatedMetadata.total_tokens || 0) + (pageData.metadata.total_tokens || 0);
aggregatedMetadata.total_prompt_tokens = (aggregatedMetadata.total_prompt_tokens || 0) + (pageData.metadata.total_prompt_tokens || 0);
aggregatedMetadata.total_completion_tokens = (aggregatedMetadata.total_completion_tokens || 0) + (pageData.metadata.total_completion_tokens || 0);
aggregatedMetadata.total_cache_read_input_tokens = (aggregatedMetadata.total_cache_read_input_tokens || 0) + (pageData.metadata.total_cache_read_input_tokens || 0);
aggregatedMetadata.total_cache_creation_input_tokens = (aggregatedMetadata.total_cache_creation_input_tokens || 0) + (pageData.metadata.total_cache_creation_input_tokens || 0);
}
}
@ -659,40 +659,32 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
</Card>
</Grid>
{showTokenBreakdown && (
<div className="flex justify-center gap-4 mt-4">
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Input Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-blue-600">
{userSpendData.metadata?.total_prompt_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Output Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-cyan-600">
{userSpendData.metadata?.total_completion_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Cache Read Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-green-600">
{userSpendData.metadata?.total_cache_read_input_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Cache Write Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-purple-600">
{userSpendData.metadata?.total_cache_creation_input_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
</div>
<Grid numItems={4} className="gap-4 mt-4">
<Card>
<Title>Input Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-blue-600">
{userSpendData.metadata?.total_prompt_tokens?.toLocaleString() || 0}
</Text>
</Card>
<Card>
<Title>Output Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-cyan-600">
{userSpendData.metadata?.total_completion_tokens?.toLocaleString() || 0}
</Text>
</Card>
<Card>
<Title>Cache Read Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-green-600">
{userSpendData.metadata?.total_cache_read_input_tokens?.toLocaleString() || 0}
</Text>
</Card>
<Card>
<Title>Cache Write Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-purple-600">
{userSpendData.metadata?.total_cache_creation_input_tokens?.toLocaleString() || 0}
</Text>
</Card>
</Grid>
)}
</Card>
</Col>