From cdcc8ea9b7ef5d7dcaa1b7c1e1da4cb8b08d5723 Mon Sep 17 00:00:00 2001 From: Krish Dholakia Date: Thu, 27 Mar 2025 23:29:15 -0700 Subject: [PATCH] Connect UI to "LiteLLM_DailyUserSpend" spend table - enables usage tab to work at 1m+ spend logs (#9603) * feat(spend_management_endpoints.py): expose new endpoint for querying user's usage at 1m+ spend logs Allows user to view their spend at 1m+ spend logs * build(schema.prisma): add api_requests to dailyuserspend table * build(migration.sql): add migration file for new column to daily user spend table * build(prisma_client.py): add logic for copying over migration folder, if deploy/migrations present in expected location enables easier testing of prisma migration flow * build(ui/): initial commit successfully using the dailyuserspend table on the UI * refactor(internal_user_endpoints.py): refactor `/user/daily/activity` to give breakdowns by provider/model/key * feat: feature parity (cost page) with existing 'usage' page * build(ui/): add activity tab to new_usage.tsx gets to feature parity on 'All Up' page of 'usage.tsx' * fix(proxy/utils.py): count number of api requests in daily user spend table allows us to see activity by model on new usage tab * style(new_usage.tsx): fix y-axis to be in ascending order of date * fix: fix linting errors * fix: fix ruff check errors --- ci_cd/baseline_db.py | 1 - .../migration.sql | 3 + litellm/proxy/_types.py | 1 + litellm/proxy/db/prisma_client.py | 94 +++- .../internal_user_endpoints.py | 293 ++++++++++- litellm/proxy/schema.prisma | 10 +- .../spend_management_endpoints.py | 2 +- litellm/proxy/utils.py | 6 + schema.prisma | 1 + ui/litellm-dashboard/src/app/page.tsx | 10 +- .../src/components/leftnav.tsx | 1 + .../src/components/networking.tsx | 36 ++ .../src/components/new_usage.tsx | 471 ++++++++++++++++++ ui/litellm-dashboard/src/components/usage.tsx | 2 +- 14 files changed, 909 insertions(+), 22 deletions(-) create mode 100644 deploy/migrations/20250327180120_add_api_requests_to_daily_user_table/migration.sql create mode 100644 ui/litellm-dashboard/src/components/new_usage.tsx diff --git a/ci_cd/baseline_db.py b/ci_cd/baseline_db.py index 52aa5430f5..ecc080abed 100644 --- a/ci_cd/baseline_db.py +++ b/ci_cd/baseline_db.py @@ -1,4 +1,3 @@ -import os import subprocess from pathlib import Path from datetime import datetime diff --git a/deploy/migrations/20250327180120_add_api_requests_to_daily_user_table/migration.sql b/deploy/migrations/20250327180120_add_api_requests_to_daily_user_table/migration.sql new file mode 100644 index 0000000000..e7c5ab566a --- /dev/null +++ b/deploy/migrations/20250327180120_add_api_requests_to_daily_user_table/migration.sql @@ -0,0 +1,3 @@ +-- AlterTable +ALTER TABLE "LiteLLM_DailyUserSpend" ADD COLUMN "api_requests" INTEGER NOT NULL DEFAULT 0; + diff --git a/litellm/proxy/_types.py b/litellm/proxy/_types.py index 6e242ddacb..3c22aaa601 100644 --- a/litellm/proxy/_types.py +++ b/litellm/proxy/_types.py @@ -2718,3 +2718,4 @@ class DailyUserSpendTransaction(TypedDict): prompt_tokens: int completion_tokens: int spend: float + api_requests: int diff --git a/litellm/proxy/db/prisma_client.py b/litellm/proxy/db/prisma_client.py index 85a3a57adc..4e38321e91 100644 --- a/litellm/proxy/db/prisma_client.py +++ b/litellm/proxy/db/prisma_client.py @@ -3,6 +3,7 @@ This file contains the PrismaWrapper class, which is used to wrap the Prisma cli """ import asyncio +import glob import os import random import subprocess @@ -178,6 +179,69 @@ class PrismaManager: verbose_proxy_logger.warning(f"Error creating baseline migration: {e}") return False + @staticmethod + def _copy_spend_tracking_migrations(prisma_dir: str) -> bool: + import shutil + from pathlib import Path + + """ + Check for and copy over spend tracking migrations if they exist in the deploy directory. + Returns True if migrations were found and copied, False otherwise. + """ + try: + # Get the current file's directory + current_dir = Path(__file__).parent + + # Check for migrations in the deploy directory (../../deploy/migrations) + deploy_migrations_dir = ( + current_dir.parent.parent.parent / "deploy" / "migrations" + ) + + # Local migrations directory + local_migrations_dir = Path(prisma_dir + "/migrations") + + if deploy_migrations_dir.exists(): + # Create local migrations directory if it doesn't exist + local_migrations_dir.mkdir(parents=True, exist_ok=True) + + # Copy all migration files + # Copy entire migrations folder recursively + shutil.copytree( + deploy_migrations_dir, local_migrations_dir, dirs_exist_ok=True + ) + + return True + return False + except Exception: + return False + + @staticmethod + def _get_migration_names(migrations_dir: str) -> list: + """Get all migration directory names from the migrations folder""" + migration_paths = glob.glob(f"{migrations_dir}/*/migration.sql") + return [Path(p).parent.name for p in migration_paths] + + @staticmethod + def _resolve_all_migrations(migrations_dir: str): + """Mark all existing migrations as applied""" + migration_names = PrismaManager._get_migration_names(migrations_dir) + for migration_name in migration_names: + try: + verbose_proxy_logger.info(f"Resolving migration: {migration_name}") + subprocess.run( + ["prisma", "migrate", "resolve", "--applied", migration_name], + timeout=60, + check=True, + capture_output=True, + text=True, + ) + verbose_proxy_logger.debug(f"Resolved migration: {migration_name}") + except subprocess.CalledProcessError as e: + if "is already recorded as applied in the database." not in e.stderr: + verbose_proxy_logger.warning( + f"Failed to resolve migration {migration_name}: {e.stderr}" + ) + @staticmethod def setup_database(use_migrate: bool = False) -> bool: """ @@ -194,8 +258,10 @@ class PrismaManager: os.chdir(prisma_dir) try: if use_migrate: + PrismaManager._copy_spend_tracking_migrations( + prisma_dir + ) # place a migration in the migrations directory verbose_proxy_logger.info("Running prisma migrate deploy") - # First try to run migrate deploy directly try: subprocess.run( ["prisma", "migrate", "deploy"], @@ -205,25 +271,31 @@ class PrismaManager: text=True, ) verbose_proxy_logger.info("prisma migrate deploy completed") + + # Resolve all migrations in the migrations directory + migrations_dir = os.path.join(prisma_dir, "migrations") + PrismaManager._resolve_all_migrations(migrations_dir) + return True except subprocess.CalledProcessError as e: - # Check if this is the non-empty schema error + verbose_proxy_logger.warning( + f"prisma db error: {e.stderr}, e: {e.stdout}" + ) if ( "P3005" in e.stderr and "database schema is not empty" in e.stderr ): - # Create baseline migration + verbose_proxy_logger.info("Creating baseline migration") if PrismaManager._create_baseline_migration(schema_path): - # Try migrate deploy again after baseline - subprocess.run( - ["prisma", "migrate", "deploy"], - timeout=60, - check=True, + verbose_proxy_logger.info( + "Resolving all migrations after baseline" ) + + # Resolve all migrations after baseline + migrations_dir = os.path.join(prisma_dir, "migrations") + PrismaManager._resolve_all_migrations(migrations_dir) + return True - else: - # If it's a different error, raise it - raise e else: # Use prisma db push with increased timeout subprocess.run( diff --git a/litellm/proxy/management_endpoints/internal_user_endpoints.py b/litellm/proxy/management_endpoints/internal_user_endpoints.py index e9be169cdc..79de6da1fd 100644 --- a/litellm/proxy/management_endpoints/internal_user_endpoints.py +++ b/litellm/proxy/management_endpoints/internal_user_endpoints.py @@ -14,8 +14,9 @@ These are members of a Team on LiteLLM import asyncio import traceback import uuid -from datetime import datetime, timedelta, timezone -from typing import Any, List, Optional, Union, cast +from datetime import date, datetime, timedelta, timezone +from enum import Enum +from typing import Any, Dict, List, Optional, TypedDict, Union, cast import fastapi from fastapi import APIRouter, Depends, Header, HTTPException, Request, status @@ -1242,3 +1243,291 @@ async def ui_view_users( except Exception as e: verbose_proxy_logger.exception(f"Error searching users: {str(e)}") raise HTTPException(status_code=500, detail=f"Error searching users: {str(e)}") + + +class GroupByDimension(str, Enum): + DATE = "date" + MODEL = "model" + API_KEY = "api_key" + TEAM = "team" + ORGANIZATION = "organization" + MODEL_GROUP = "model_group" + PROVIDER = "custom_llm_provider" + + +class SpendMetrics(BaseModel): + spend: float = Field(default=0.0) + prompt_tokens: int = Field(default=0) + completion_tokens: int = Field(default=0) + total_tokens: int = Field(default=0) + api_requests: int = Field(default=0) + + +class BreakdownMetrics(BaseModel): + """Breakdown of spend by different dimensions""" + + models: Dict[str, SpendMetrics] = Field(default_factory=dict) # model -> metrics + providers: Dict[str, SpendMetrics] = Field( + default_factory=dict + ) # provider -> metrics + api_keys: Dict[str, SpendMetrics] = Field( + default_factory=dict + ) # api_key -> metrics + + +class DailySpendData(BaseModel): + date: date + metrics: SpendMetrics + breakdown: BreakdownMetrics = Field(default_factory=BreakdownMetrics) + + +class DailySpendMetadata(BaseModel): + total_spend: float = Field(default=0.0) + total_prompt_tokens: int = Field(default=0) + total_completion_tokens: int = Field(default=0) + total_api_requests: int = Field(default=0) + page: int = Field(default=1) + total_pages: int = Field(default=1) + has_more: bool = Field(default=False) + + +class SpendAnalyticsPaginatedResponse(BaseModel): + results: List[DailySpendData] + metadata: DailySpendMetadata = Field(default_factory=DailySpendMetadata) + + +class LiteLLM_DailyUserSpend(BaseModel): + id: str + user_id: str + date: str + api_key: str + model: str + model_group: Optional[str] = None + custom_llm_provider: Optional[str] = None + prompt_tokens: int = 0 + completion_tokens: int = 0 + spend: float = 0.0 + api_requests: int = 0 + + +class GroupedData(TypedDict): + metrics: SpendMetrics + breakdown: BreakdownMetrics + + +def update_metrics( + group_metrics: SpendMetrics, record: LiteLLM_DailyUserSpend +) -> SpendMetrics: + group_metrics.spend += record.spend + group_metrics.prompt_tokens += record.prompt_tokens + group_metrics.completion_tokens += record.completion_tokens + group_metrics.total_tokens += record.prompt_tokens + record.completion_tokens + group_metrics.api_requests += record.api_requests + return group_metrics + + +def update_breakdown_metrics( + breakdown: BreakdownMetrics, record: LiteLLM_DailyUserSpend +) -> BreakdownMetrics: + """Updates breakdown metrics for a single record using the existing update_metrics function""" + + # Update model breakdown + if record.model not in breakdown.models: + breakdown.models[record.model] = SpendMetrics() + breakdown.models[record.model] = update_metrics( + breakdown.models[record.model], record + ) + + # Update provider breakdown + provider = record.custom_llm_provider or "unknown" + if provider not in breakdown.providers: + breakdown.providers[provider] = SpendMetrics() + breakdown.providers[provider] = update_metrics( + breakdown.providers[provider], record + ) + + # Update api key breakdown + if record.api_key not in breakdown.api_keys: + breakdown.api_keys[record.api_key] = SpendMetrics() + breakdown.api_keys[record.api_key] = update_metrics( + breakdown.api_keys[record.api_key], record + ) + + return breakdown + + +@router.get( + "/user/daily/activity", + tags=["Budget & Spend Tracking", "Internal User management"], + dependencies=[Depends(user_api_key_auth)], + response_model=SpendAnalyticsPaginatedResponse, +) +async def get_user_daily_activity( + start_date: Optional[str] = fastapi.Query( + default=None, + description="Start date in YYYY-MM-DD format", + ), + end_date: Optional[str] = fastapi.Query( + default=None, + description="End date in YYYY-MM-DD format", + ), + group_by: List[GroupByDimension] = fastapi.Query( + default=[GroupByDimension.DATE], + description="Dimensions to group by. Can combine multiple (e.g. date,team)", + ), + view_by: Literal["team", "organization", "user"] = fastapi.Query( + default="user", + description="View spend at team/org/user level", + ), + team_id: Optional[str] = fastapi.Query( + default=None, + description="Filter by specific team", + ), + org_id: Optional[str] = fastapi.Query( + default=None, + description="Filter by specific organization", + ), + model: Optional[str] = fastapi.Query( + default=None, + description="Filter by specific model", + ), + api_key: Optional[str] = fastapi.Query( + default=None, + description="Filter by specific API key", + ), + page: int = fastapi.Query( + default=1, description="Page number for pagination", ge=1 + ), + page_size: int = fastapi.Query( + default=50, description="Items per page", ge=1, le=100 + ), + user_api_key_dict: UserAPIKeyAuth = Depends(user_api_key_auth), +) -> SpendAnalyticsPaginatedResponse: + """ + [BETA] This is a beta endpoint. It will change. + + Meant to optimize querying spend data for analytics for a user. + + Returns: + (by date/team/org/user/model/api_key/model_group/provider) + - spend + - prompt_tokens + - completion_tokens + - total_tokens + - api_requests + - breakdown by team, organization, user, model, api_key, model_group, provider + """ + from litellm.proxy.proxy_server import prisma_client + + if prisma_client is None: + raise HTTPException( + status_code=500, + detail={"error": CommonProxyErrors.db_not_connected_error.value}, + ) + + if start_date is None or end_date is None: + raise HTTPException( + status_code=status.HTTP_400_BAD_REQUEST, + detail={"error": "Please provide start_date and end_date"}, + ) + + try: + # Build filter conditions + where_conditions: Dict[str, Any] = { + "date": { + "gte": start_date, + "lte": end_date, + } + } + + if team_id: + where_conditions["team_id"] = team_id + if org_id: + where_conditions["organization_id"] = org_id + if model: + where_conditions["model"] = model + if api_key: + where_conditions["api_key"] = api_key + + # Get total count for pagination + total_count = await prisma_client.db.litellm_dailyuserspend.count( + where=where_conditions + ) + + # Fetch paginated results + daily_spend_data = await prisma_client.db.litellm_dailyuserspend.find_many( + where=where_conditions, + order=[ + {"date": "desc"}, + ], + skip=(page - 1) * page_size, + take=page_size, + ) + + # Process results + results = [] + total_metrics = SpendMetrics() + + # Group data by date and other dimensions + + grouped_data: Dict[str, Dict[str, Any]] = {} + for record in daily_spend_data: + date_str = record.date + if date_str not in grouped_data: + grouped_data[date_str] = { + "metrics": SpendMetrics(), + "breakdown": BreakdownMetrics(), + } + + # Update metrics + grouped_data[date_str]["metrics"] = update_metrics( + grouped_data[date_str]["metrics"], record + ) + # Update breakdowns + grouped_data[date_str]["breakdown"] = update_breakdown_metrics( + grouped_data[date_str]["breakdown"], record + ) + + # Update total metrics + total_metrics.spend += record.spend + total_metrics.prompt_tokens += record.prompt_tokens + total_metrics.completion_tokens += record.completion_tokens + total_metrics.total_tokens += ( + record.prompt_tokens + record.completion_tokens + ) + total_metrics.api_requests += 1 + + # Convert grouped data to response format + for date_str, data in grouped_data.items(): + results.append( + DailySpendData( + date=datetime.strptime(date_str, "%Y-%m-%d").date(), + metrics=data["metrics"], + breakdown=data["breakdown"], + ) + ) + + # Sort results by date + results.sort(key=lambda x: x.date, reverse=True) + + return SpendAnalyticsPaginatedResponse( + results=results, + metadata=DailySpendMetadata( + total_spend=total_metrics.spend, + total_prompt_tokens=total_metrics.prompt_tokens, + total_completion_tokens=total_metrics.completion_tokens, + total_api_requests=total_metrics.api_requests, + page=page, + total_pages=-(-total_count // page_size), # Ceiling division + has_more=(page * page_size) < total_count, + ), + ) + + except Exception as e: + verbose_proxy_logger.exception( + "/spend/daily/analytics: Exception occured - {}".format(str(e)) + ) + raise HTTPException( + status_code=status.HTTP_500_INTERNAL_SERVER_ERROR, + detail={"error": f"Failed to fetch analytics: {str(e)}"}, + ) diff --git a/litellm/proxy/schema.prisma b/litellm/proxy/schema.prisma index 9269e89014..7acb5e2615 100644 --- a/litellm/proxy/schema.prisma +++ b/litellm/proxy/schema.prisma @@ -314,19 +314,19 @@ model LiteLLM_AuditLog { updated_values Json? // value of the row after change } - // Track daily user spend metrics per model and key model LiteLLM_DailyUserSpend { id String @id @default(uuid()) user_id String date String - api_key String // Hashed API Token - model String // The specific model used - model_group String? // public model_name / model_group - custom_llm_provider String? // The LLM provider (e.g., "openai", "anthropic") + api_key String + model String + model_group String? + custom_llm_provider String? prompt_tokens Int @default(0) completion_tokens Int @default(0) spend Float @default(0.0) + api_requests Int @default(0) created_at DateTime @default(now()) updated_at DateTime @updatedAt diff --git a/litellm/proxy/spend_tracking/spend_management_endpoints.py b/litellm/proxy/spend_tracking/spend_management_endpoints.py index 9789e2a0ec..4c0e22aef7 100644 --- a/litellm/proxy/spend_tracking/spend_management_endpoints.py +++ b/litellm/proxy/spend_tracking/spend_management_endpoints.py @@ -3,7 +3,7 @@ import collections import os from datetime import datetime, timedelta, timezone from functools import lru_cache -from typing import TYPE_CHECKING, Any, List, Optional +from typing import TYPE_CHECKING, Any, Dict, List, Literal, Optional import fastapi from fastapi import APIRouter, Depends, HTTPException, status diff --git a/litellm/proxy/utils.py b/litellm/proxy/utils.py index 7f1ac814a8..1c4e625781 100644 --- a/litellm/proxy/utils.py +++ b/litellm/proxy/utils.py @@ -1179,6 +1179,7 @@ class PrismaClient: daily_transaction["spend"] += payload["spend"] daily_transaction["prompt_tokens"] += payload["prompt_tokens"] daily_transaction["completion_tokens"] += payload["completion_tokens"] + daily_transaction["api_requests"] += 1 else: daily_transaction = DailyUserSpendTransaction( user_id=payload["user"], @@ -1190,6 +1191,7 @@ class PrismaClient: prompt_tokens=payload["prompt_tokens"], completion_tokens=payload["completion_tokens"], spend=payload["spend"], + api_requests=1, ) self.daily_user_spend_transactions[daily_transaction_key] = ( @@ -2598,6 +2600,7 @@ class ProxyUpdateSpend: "completion_tokens" ], "spend": transaction["spend"], + "api_requests": transaction["api_requests"], }, "update": { "prompt_tokens": { @@ -2609,6 +2612,9 @@ class ProxyUpdateSpend: ] }, "spend": {"increment": transaction["spend"]}, + "api_requests": { + "increment": transaction["api_requests"] + }, }, }, ) diff --git a/schema.prisma b/schema.prisma index 3312b26354..7acb5e2615 100644 --- a/schema.prisma +++ b/schema.prisma @@ -326,6 +326,7 @@ model LiteLLM_DailyUserSpend { prompt_tokens Int @default(0) completion_tokens Int @default(0) spend Float @default(0.0) + api_requests Int @default(0) created_at DateTime @default(now()) updated_at DateTime @updatedAt diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx index 9b9ec0c9c0..f480501b58 100644 --- a/ui/litellm-dashboard/src/app/page.tsx +++ b/ui/litellm-dashboard/src/app/page.tsx @@ -20,6 +20,7 @@ import PassThroughSettings from "@/components/pass_through_settings"; import BudgetPanel from "@/components/budgets/budget_panel"; import SpendLogsTable from "@/components/view_logs"; import ModelHub from "@/components/model_hub"; +import NewUsagePage from "@/components/new_usage"; import APIRef from "@/components/api_ref"; import ChatUI from "@/components/chat_ui"; import Sidebar from "@/components/leftnav"; @@ -346,7 +347,14 @@ export default function CreateKeyPage() { accessToken={accessToken} allTeams={teams as Team[] ?? []} /> - ) : ( + ) : page == "new_usage" ? ( + + ) : + ( , roles: all_admin_roles }, { key: "10", page: "budgets", label: "Budgets", icon: , roles: all_admin_roles }, { key: "11", page: "guardrails", label: "Guardrails", icon: , roles: all_admin_roles }, + { key: "12", page: "new_usage", label: "New Usage", icon: , roles: all_admin_roles }, ] }, { diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index fbe0374e34..83d258e532 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/ui/litellm-dashboard/src/components/networking.tsx @@ -1070,6 +1070,42 @@ export const organizationDeleteCall = async ( } }; + +export const userDailyActivityCall = async (accessToken: String, startTime: Date, endTime: Date) => { + /** + * Get daily user activity on proxy + */ + try { + let url = proxyBaseUrl ? `${proxyBaseUrl}/user/daily/activity` : `/user/daily/activity`; + const queryParams = new URLSearchParams(); + queryParams.append('start_date', startTime.toISOString()); + queryParams.append('end_date', endTime.toISOString()); + const queryString = queryParams.toString(); + if (queryString) { + url += `?${queryString}`; + } + + const response = await fetch(url, { + method: "GET", + headers: { + [globalLitellmHeaderName]: `Bearer ${accessToken}`, + "Content-Type": "application/json", + }, + }); + + if (!response.ok) { + const errorData = await response.text(); + handleError(errorData); + throw new Error("Network response was not ok"); + } + + const data = await response.json(); + return data; + } catch (error) { + console.error("Failed to create key:", error); + throw error; + } +}; export const getTotalSpendCall = async (accessToken: String) => { /** * Get all models on proxy diff --git a/ui/litellm-dashboard/src/components/new_usage.tsx b/ui/litellm-dashboard/src/components/new_usage.tsx new file mode 100644 index 0000000000..e472fc69ef --- /dev/null +++ b/ui/litellm-dashboard/src/components/new_usage.tsx @@ -0,0 +1,471 @@ +/** + * New Usage Page + * + * Uses the new `/user/daily/activity` endpoint to get daily activity data for a user. + * + * Works at 1m+ spend logs, by querying an aggregate table instead. + */ + +import React, { useState, useEffect } from "react"; +import { + BarChart, Card, Title, Text, + Grid, Col, TabGroup, TabList, Tab, + TabPanel, TabPanels, DonutChart, + Table, TableHead, TableRow, + TableHeaderCell, TableBody, TableCell, + Subtitle +} from "@tremor/react"; +import { AreaChart } from "@tremor/react"; + +import { userDailyActivityCall } from "./networking"; +import ViewUserSpend from "./view_user_spend"; +import TopKeyView from "./top_key_view"; + +interface NewUsagePageProps { + accessToken: string | null; + userRole: string | null; + userID: string | null; +} + +interface SpendMetrics { + spend: number; + prompt_tokens: number; + completion_tokens: number; + total_tokens: number; + api_requests: number; +} + +interface BreakdownMetrics { + models: { [key: string]: SpendMetrics }; + providers: { [key: string]: SpendMetrics }; + api_keys: { [key: string]: SpendMetrics }; +} + +interface DailyData { + date: string; + metrics: SpendMetrics; + breakdown: BreakdownMetrics; +} + +const NewUsagePage: React.FC = ({ + accessToken, + userRole, + userID, +}) => { + const [userSpendData, setUserSpendData] = useState<{ + results: DailyData[]; + metadata: any; + }>({ results: [], metadata: {} }); + + // Derived states from userSpendData + const totalSpend = userSpendData.metadata?.total_spend || 0; + + // Calculate top models from the breakdown data + const getTopModels = () => { + const modelSpend: { [key: string]: SpendMetrics } = {}; + userSpendData.results.forEach(day => { + Object.entries(day.breakdown.models || {}).forEach(([model, metrics]) => { + if (!modelSpend[model]) { + modelSpend[model] = { + spend: 0, + prompt_tokens: 0, + completion_tokens: 0, + total_tokens: 0, + api_requests: 0 + }; + } + modelSpend[model].spend += metrics.spend; + modelSpend[model].prompt_tokens += metrics.prompt_tokens; + modelSpend[model].completion_tokens += metrics.completion_tokens; + modelSpend[model].total_tokens += metrics.total_tokens; + modelSpend[model].api_requests += metrics.api_requests; + }); + }); + + return Object.entries(modelSpend) + .map(([model, metrics]) => ({ + key: model, + spend: metrics.spend, + requests: metrics.api_requests, + tokens: metrics.total_tokens + })) + .sort((a, b) => b.spend - a.spend) + .slice(0, 5); + }; + + // Calculate provider spend from the breakdown data + const getProviderSpend = () => { + const providerSpend: { [key: string]: SpendMetrics } = {}; + userSpendData.results.forEach(day => { + Object.entries(day.breakdown.providers || {}).forEach(([provider, metrics]) => { + if (!providerSpend[provider]) { + providerSpend[provider] = { + spend: 0, + prompt_tokens: 0, + completion_tokens: 0, + total_tokens: 0, + api_requests: 0 + }; + } + providerSpend[provider].spend += metrics.spend; + providerSpend[provider].prompt_tokens += metrics.prompt_tokens; + providerSpend[provider].completion_tokens += metrics.completion_tokens; + providerSpend[provider].total_tokens += metrics.total_tokens; + providerSpend[provider].api_requests += metrics.api_requests; + }); + }); + + return Object.entries(providerSpend) + .map(([provider, metrics]) => ({ + provider, + spend: metrics.spend, + requests: metrics.api_requests, + tokens: metrics.total_tokens + })); + }; + + // Calculate top API keys from the breakdown data + const getTopKeys = () => { + const keySpend: { [key: string]: SpendMetrics } = {}; + userSpendData.results.forEach(day => { + Object.entries(day.breakdown.api_keys || {}).forEach(([key, metrics]) => { + if (!keySpend[key]) { + keySpend[key] = { + spend: 0, + prompt_tokens: 0, + completion_tokens: 0, + total_tokens: 0, + api_requests: 0 + }; + } + keySpend[key].spend += metrics.spend; + keySpend[key].prompt_tokens += metrics.prompt_tokens; + keySpend[key].completion_tokens += metrics.completion_tokens; + keySpend[key].total_tokens += metrics.total_tokens; + keySpend[key].api_requests += metrics.api_requests; + }); + }); + + return Object.entries(keySpend) + .map(([api_key, metrics]) => ({ + api_key, + key_alias: api_key.substring(0, 10), // Using truncated key as alias + spend: metrics.spend, + })) + .sort((a, b) => b.spend - a.spend) + .slice(0, 5); + }; + + const fetchUserSpendData = async () => { + if (!accessToken) return; + const startTime = new Date(Date.now() - 28 * 24 * 60 * 60 * 1000); + const endTime = new Date(); + const data = await userDailyActivityCall(accessToken, startTime, endTime); + setUserSpendData(data); + }; + + useEffect(() => { + fetchUserSpendData(); + }, [accessToken]); + + return ( +
+ Experimental Usage page, using new `/user/daily/activity` endpoint. + + + Cost + Activity + + + {/* Cost Panel */} + + + {/* Total Spend Card */} + + + Project Spend {new Date().toLocaleString('default', { month: 'long' })} 1 - {new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate()} + + + + + {/* Daily Spend Chart */} + + + Daily Spend + `$${value.toFixed(2)}`} + yAxisWidth={100} + showLegend={false} + customTooltip={({ payload, active }) => { + if (!active || !payload?.[0]) return null; + const data = payload[0].payload; + return ( +
+

{data.date}

+

Spend: ${data.metrics.spend.toFixed(2)}

+

Requests: {data.metrics.api_requests}

+

Tokens: {data.metrics.total_tokens}

+
+ ); + }} + /> + + + + {/* Top API Keys */} + + + Top API Keys + + + + + {/* Top Models */} + + + Top Models + `$${value.toFixed(2)}`} + layout="vertical" + yAxisWidth={200} + showLegend={false} + customTooltip={({ payload, active }) => { + if (!active || !payload?.[0]) return null; + const data = payload[0].payload; + return ( +
+

{data.key}

+

Spend: ${data.spend.toFixed(2)}

+

Requests: {data.requests.toLocaleString()}

+

Tokens: {data.tokens.toLocaleString()}

+
+ ); + }} + /> + + + + {/* Spend by Provider */} + + + Spend by Provider + + + `$${value.toFixed(2)}`} + colors={["cyan"]} + /> + + + + + + Provider + Spend + Requests + Tokens + + + + {getProviderSpend().map((provider) => ( + + {provider.provider} + + ${provider.spend < 0.00001 + ? "less than 0.00" + : provider.spend.toFixed(2)} + + {provider.requests.toLocaleString()} + {provider.tokens.toLocaleString()} + + ))} + +
+ + + + + + {/* Usage Metrics */} + + + Usage Metrics + + + Total Requests + + {userSpendData.metadata?.total_api_requests?.toLocaleString() || 0} + + + + Total Tokens + + {userSpendData.metadata?.total_tokens?.toLocaleString() || 0} + + + + Average Cost per Request + + ${((totalSpend || 0) / (userSpendData.metadata?.total_api_requests || 1)).toFixed(4)} + + + + + + + + + {/* Activity Panel */} + + + + All Up + + + + API Requests {valueFormatterNumbers(userSpendData.metadata?.total_api_requests || 0)} + + + + + + Tokens {valueFormatterNumbers(userSpendData.metadata?.total_tokens || 0)} + + + + + + + {/* Per Model Activity */} + {Object.entries(getModelActivityData(userSpendData)).map(([model, data], index) => ( + + {model} + + + + API Requests {valueFormatterNumbers(data.total_requests)} + + + + + + Tokens {valueFormatterNumbers(data.total_tokens)} + + + + + + ))} + + + + +
+ ); +}; + +// Add this helper function to process model-specific activity data +const getModelActivityData = (userSpendData: { + results: DailyData[]; + metadata: any; +}) => { + const modelData: { + [key: string]: { + total_requests: number; + total_tokens: number; + daily_data: Array<{ + date: string; + api_requests: number; + total_tokens: number; + }>; + }; + } = {}; + + userSpendData.results.forEach((day: DailyData) => { + Object.entries(day.breakdown.models || {}).forEach(([model, metrics]) => { + if (!modelData[model]) { + modelData[model] = { + total_requests: 0, + total_tokens: 0, + daily_data: [] + }; + } + + modelData[model].total_requests += metrics.api_requests; + modelData[model].total_tokens += metrics.total_tokens; + modelData[model].daily_data.push({ + date: day.date, + api_requests: metrics.api_requests, + total_tokens: metrics.total_tokens + }); + }); + }); + + return modelData; +}; + +// Add this helper function for number formatting +function valueFormatterNumbers(number: number) { + const formatter = new Intl.NumberFormat('en-US', { + maximumFractionDigits: 0, + notation: 'compact', + compactDisplay: 'short', + }); + return formatter.format(number); +} + +export default NewUsagePage; \ No newline at end of file diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx index 43099c21ff..0f4b46195a 100644 --- a/ui/litellm-dashboard/src/components/usage.tsx +++ b/ui/litellm-dashboard/src/components/usage.tsx @@ -1035,4 +1035,4 @@ const UsagePage: React.FC = ({ ); }; -export default UsagePage; +export default UsagePage; \ No newline at end of file