diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index 025f0c72c4..a2b8afae39 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/ui/litellm-dashboard/src/components/networking.tsx @@ -1075,7 +1075,7 @@ export const organizationDeleteCall = async ( }; -export const userDailyActivityCall = async (accessToken: String, startTime: Date, endTime: Date) => { +export const userDailyActivityCall = async (accessToken: String, startTime: Date, endTime: Date, page: number = 1) => { /** * Get daily user activity on proxy */ @@ -1084,6 +1084,8 @@ export const userDailyActivityCall = async (accessToken: String, startTime: Date const queryParams = new URLSearchParams(); queryParams.append('start_date', startTime.toISOString()); queryParams.append('end_date', endTime.toISOString()); + queryParams.append('page_size', '1000'); + queryParams.append('page', page.toString()); const queryString = queryParams.toString(); if (queryString) { url += `?${queryString}`; diff --git a/ui/litellm-dashboard/src/components/new_usage.tsx b/ui/litellm-dashboard/src/components/new_usage.tsx index 9a68fe25f9..7ea0f2f8e8 100644 --- a/ui/litellm-dashboard/src/components/new_usage.tsx +++ b/ui/litellm-dashboard/src/components/new_usage.tsx @@ -22,15 +22,13 @@ import ViewUserSpend from "./view_user_spend"; import TopKeyView from "./top_key_view"; import { ActivityMetrics, processActivityData } from './activity_metrics'; import { SpendMetrics, DailyData, ModelActivityData, MetricWithMetadata, KeyMetricWithMetadata } from './usage/types'; + interface NewUsagePageProps { accessToken: string | null; userRole: string | null; userID: string | null; } - - - const NewUsagePage: React.FC = ({ accessToken, userRole, @@ -177,8 +175,39 @@ const NewUsagePage: React.FC = ({ if (!accessToken || !dateValue.from || !dateValue.to) return; const startTime = dateValue.from; const endTime = dateValue.to; - const data = await userDailyActivityCall(accessToken, startTime, endTime); - setUserSpendData(data); + + try { + // Get first page + const firstPageData = await userDailyActivityCall(accessToken, startTime, endTime); + + // Check if we need to fetch more pages + if (firstPageData.metadata.total_pages > 10) { + throw new Error("Too many pages of data (>10). Please select a smaller date range."); + } + + // If only one page, just set the data + if (firstPageData.metadata.total_pages === 1) { + setUserSpendData(firstPageData); + return; + } + + // Fetch all pages + const allResults = [...firstPageData.results]; + + for (let page = 2; page <= firstPageData.metadata.total_pages; page++) { + const pageData = await userDailyActivityCall(accessToken, startTime, endTime, page); + allResults.push(...pageData.results); + } + + // Combine all results with the first page's metadata + setUserSpendData({ + results: allResults, + metadata: firstPageData.metadata + }); + } catch (error) { + console.error("Error fetching user spend data:", error); + throw error; + } }; useEffect(() => {