From dcae3d569fdf78da0481f1e89b9edd5ef158c9a6 Mon Sep 17 00:00:00 2001 From: yuneng-jiang Date: Sat, 10 Jan 2026 15:13:43 -0800 Subject: [PATCH 1/2] Flipping x axis and removing time range picker --- .../components/EndpointUsageLineChart.tsx | 44 +++---------------- 1 file changed, 7 insertions(+), 37 deletions(-) diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageLineChart.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageLineChart.tsx index 9c9236edaa2..dd113423e4a 100644 --- a/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageLineChart.tsx +++ b/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageLineChart.tsx @@ -1,6 +1,5 @@ -import React, { useMemo, useState } from "react"; +import React, { useMemo } from "react"; import { Card, LineChart, Title } from "@tremor/react"; -import { Segmented } from "antd"; import { DailyData } from "../../../types"; interface EndpointUsageLineChartProps { @@ -8,11 +7,8 @@ interface EndpointUsageLineChartProps { endpointData?: Record; } -type TimePeriod = "7" | "30" | "90"; - - // Transform daily data into chart format -function transformDailyDataToChart(dailyData: DailyData[], days: number): Array> { +function transformDailyDataToChart(dailyData: DailyData[]): Array> { const chartData: Array> = []; // Get all unique endpoint names @@ -23,10 +19,7 @@ function transformDailyDataToChart(dailyData: DailyData[], days: number): Array< } }); - // Filter to the last N days based on time period - const filteredData = dailyData.slice(-days); - - filteredData.forEach((day) => { + dailyData.forEach((day) => { const date = new Date(day.date); const dateStr = date.toLocaleDateString("en-US", { month: "short", @@ -45,20 +38,18 @@ function transformDailyDataToChart(dailyData: DailyData[], days: number): Array< chartData.push(dataPoint); }); - return chartData; + // Reverse the array so most recent dates appear on the right + return chartData.reverse(); } export function EndpointUsageLineChart({ dailyData, endpointData }: EndpointUsageLineChartProps) { - const [timePeriod, setTimePeriod] = useState("7"); - const days = parseInt(timePeriod); - const chartData = useMemo(() => { if (!dailyData?.results || dailyData.results.length === 0) { return []; } - return transformDailyDataToChart(dailyData.results, days); - }, [dailyData, days]); + return transformDailyDataToChart(dailyData.results); + }, [dailyData]); // Get endpoint names from chart data const categories = useMemo(() => { @@ -74,27 +65,6 @@ export function EndpointUsageLineChart({ dailyData, endpointData }: EndpointUsag
Endpoint Usage Trends - setTimePeriod(value as TimePeriod)} - style={{ - backgroundColor: "#f3f4f6", - }} - />
Date: Sat, 10 Jan 2026 15:42:20 -0800 Subject: [PATCH 2/2] Endpoint activity writeup --- .../docs/proxy/endpoint_activity.md | 117 ++++++++++++++++++ .../release_notes/v1.80.14/index.md | 2 +- 2 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 docs/my-website/docs/proxy/endpoint_activity.md diff --git a/docs/my-website/docs/proxy/endpoint_activity.md b/docs/my-website/docs/proxy/endpoint_activity.md new file mode 100644 index 00000000000..a66c0f7a5e5 --- /dev/null +++ b/docs/my-website/docs/proxy/endpoint_activity.md @@ -0,0 +1,117 @@ +import Image from '@theme/IdealImage'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Endpoint Activity + +Track and visualize API endpoint usage directly in the dashboard. Monitor endpoint-level activity analytics, spend breakdowns, and performance metrics to understand which endpoints are receiving the most traffic and how they're performing. + +## Overview + +Endpoint Activity enables you to track spend and usage for individual API endpoints automatically. Every time you call an endpoint through the LiteLLM proxy, activity is automatically tracked and aggregated. This allows you to: + +- Track spend per endpoint automatically +- View endpoint-level usage analytics in the Admin UI +- Monitor token consumption by endpoint +- Analyze success and failure rates per endpoint +- Identify which endpoints are getting the most activity +- View trend data showing endpoint usage over time + + + +## How Endpoint Activity Works + +Endpoint activity is **automatically tracked** whenever you make API calls through the LiteLLM proxy. No additional configuration is required - simply call your endpoints as usual and activity will be tracked. + +### Example API Call + +When you make a request to any endpoint, activity is automatically recorded: + +```bash showLineNumbers title="Endpoint activity is automatically tracked" +curl -X POST 'http://0.0.0.0:4000/chat/completions' \ # 👈 ENDPOINT AUTOMATICALLY TRACKED + --header 'Content-Type: application/json' \ + --header 'Authorization: Bearer sk-1234' \ # 👈 YOUR PROXY KEY + --data '{ + "model": "gpt-3.5-turbo", + "messages": [ + { + "role": "user", + "content": "What is the capital of France?" + } + ] + }' +``` + +The endpoint (`/chat/completions`) will be automatically tracked with: + +- Token counts (prompt tokens, completion tokens, total tokens) +- Spend for the request +- Request status (success or failure) +- Timestamp and other metadata + +## How to View Endpoint Activity + +### View Activity in Admin UI + +Navigate to the Endpoint Activity tab in the Admin UI to view endpoint-level analytics: + +#### 1. Access Endpoint Activity + +Go to the Usage page in the Admin UI (`PROXY_BASE_URL/ui/?login=success&page=new_usage`) and click on the **Endpoint Activity** tab. + +![](https://colony-recorder.s3.amazonaws.com/files/2026-01-10/67601fc0-8415-49b4-8e55-0673d37540c2/ascreenshot_f609a506dfe745c5aadccd332681c32d_text_export.jpeg) + +#### 2. View Endpoint Analytics + +The Endpoint Activity dashboard provides: + +- **Endpoint usage table**: View all endpoints with aggregated metrics including: + - Total requests (successful and failed) + - Success rate percentage + - Total tokens consumed + - Total spend per endpoint +- **Success vs Failed requests chart**: Visualize request success and failure rates by endpoint +- **Usage trends**: See how endpoint activity changes over time with daily trend data + +![](https://colony-recorder.s3.amazonaws.com/files/2026-01-10/41b2b158-3ab3-4154-a0d0-7233451d3f2b/ascreenshot_ff46db6e09b54ea9bf34ae9028aff58a_text_export.jpeg) + +![](https://colony-recorder.s3.amazonaws.com/files/2026-01-10/bce32f99-f0ba-4502-8a3a-76257ff5e47a/ascreenshot_2273d3a94acd42e983ad7d6436722c2a_text_export.jpeg) + +#### 3. Understand Endpoint Metrics + +Each endpoint displays the following metrics: + +- **Successful Requests**: Number of requests that completed successfully +- **Failed Requests**: Number of requests that encountered errors +- **Total Requests**: Sum of successful and failed requests +- **Success Rate**: Percentage of successful requests +- **Total Tokens**: Sum of prompt and completion tokens +- **Spend**: Total cost for all requests to that endpoint + +## Use Cases + +### Performance Monitoring + +Monitor endpoint health and performance: + +- Identify endpoints with high failure rates +- Track which endpoints are receiving the most traffic +- Monitor token consumption patterns by endpoint +- Detect anomalies in endpoint usage + +### Cost Optimization + +Understand spend distribution across endpoints: + +- Identify high-cost endpoints +- Optimize expensive endpoints +- Allocate budget based on endpoint usage +- Track cost trends over time + +--- + +## Related Features + +- [Customer Usage](./customer_usage.md) - Track spend and usage for individual customers +- [Cost Tracking](./cost_tracking.md) - Comprehensive cost tracking and analytics +- [Spend Logs](./spend_logs.md) - Detailed request-level spend logs diff --git a/docs/my-website/release_notes/v1.80.14/index.md b/docs/my-website/release_notes/v1.80.14/index.md index 38751f80aeb..29a0171115d 100644 --- a/docs/my-website/release_notes/v1.80.14/index.md +++ b/docs/my-website/release_notes/v1.80.14/index.md @@ -54,7 +54,7 @@ pip install litellm==1.80.14 - **Interactions API Bridge** - [Use all LiteLLM providers with the Interactions API](../../docs/interactions) - **RAG Query Endpoint** - [New RAG Search/Query endpoint for retrieval-augmented generation](../../docs/search/index) - **92.7% Faster Provider Config Lookup** - Major performance improvement for provider configuration -- **UI Usage - Endpoint Activity** - Users can now see Endpoint Activity Metrics in the UI. +- **UI Usage - Endpoint Activity** - [Users can now see Endpoint Activity Metrics in the UI](../../docs/proxy/endpoint_activity.md) ---