From 3f644602fbbc3b24b334bfa8be100900a9b6bf7b Mon Sep 17 00:00:00 2001 From: Cole McIntosh Date: Wed, 25 Jun 2025 11:16:01 -0600 Subject: [PATCH] Refactor date range selection in dashboards to use UsageDatePicker component, simplifying date handling logic and improving consistency across components. --- .../src/components/cache_dashboard.tsx | 19 ++------ .../src/components/entity_usage.tsx | 5 +-- .../src/components/model_dashboard.tsx | 24 +++------- .../src/components/new_usage.tsx | 5 +-- ui/litellm-dashboard/src/components/usage.tsx | 45 +++++-------------- 5 files changed, 24 insertions(+), 74 deletions(-) diff --git a/ui/litellm-dashboard/src/components/cache_dashboard.tsx b/ui/litellm-dashboard/src/components/cache_dashboard.tsx index 2bb6b28af0..2db37622d9 100644 --- a/ui/litellm-dashboard/src/components/cache_dashboard.tsx +++ b/ui/litellm-dashboard/src/components/cache_dashboard.tsx @@ -22,6 +22,7 @@ import { Icon, Text, } from "@tremor/react"; +import UsageDatePicker from "./shared/usage_date_picker"; import { Button as Button2, @@ -161,20 +162,10 @@ const CacheDashboard: React.FC = ({ return; } - // Create new Date objects to avoid mutating the original dates - const adjustedStartTime = new Date(startTime); - const adjustedEndTime = new Date(endTime); - - // the endTime put it to the last hour of the selected date - adjustedEndTime.setHours(23, 59, 59, 999); - - // startTime put it to the first hour of the selected date - adjustedStartTime.setHours(0, 0, 0, 0); - let new_cache_data = await adminGlobalCacheActivity( accessToken, - formatDateWithoutTZ(adjustedStartTime), - formatDateWithoutTZ(adjustedEndTime) + formatDateWithoutTZ(startTime), + formatDateWithoutTZ(endTime) ) setData(new_cache_data); @@ -353,14 +344,12 @@ const runCachingHealthCheck = async () => { - { setDateValue(value); updateCachingData(value.from, value.to); }} - selectPlaceholder="Select date range" /> diff --git a/ui/litellm-dashboard/src/components/entity_usage.tsx b/ui/litellm-dashboard/src/components/entity_usage.tsx index ade70abaab..10af11b009 100644 --- a/ui/litellm-dashboard/src/components/entity_usage.tsx +++ b/ui/litellm-dashboard/src/components/entity_usage.tsx @@ -6,6 +6,7 @@ import { DonutChart, TabPanel, TabGroup, TabList, Tab, TabPanels } from "@tremor/react"; +import UsageDatePicker from "./shared/usage_date_picker"; import { Select } from 'antd'; import { ActivityMetrics, processActivityData } from './activity_metrics'; import { DailyData, KeyMetricWithMetadata, EntityMetricWithMetadata } from './usage/types'; @@ -287,9 +288,7 @@ const EntityUsage: React.FC = ({
- Select Time Range - diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx index c40092c3f4..cc50e5ac71 100644 --- a/ui/litellm-dashboard/src/components/model_dashboard.tsx +++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx @@ -43,6 +43,7 @@ import { MultiSelectItem, DateRangePickerValue, } from "@tremor/react"; +import UsageDatePicker from "./shared/usage_date_picker"; import { modelInfoCall, userGetRequesedtModelsCall, @@ -306,27 +307,14 @@ const ModelDashboard: React.FC = ({ selected_customer = null; } - // Create new Date objects to avoid mutating the original dates - const adjustedStartTime = new Date(startTime); - const adjustedEndTime = new Date(endTime); - - // make startTime and endTime to last hour of the day - adjustedStartTime.setHours(0); - adjustedStartTime.setMinutes(0); - adjustedStartTime.setSeconds(0); - - adjustedEndTime.setHours(23); - adjustedEndTime.setMinutes(59); - adjustedEndTime.setSeconds(59); - try { const modelMetricsResponse = await modelMetricsCall( accessToken, userID, userRole, modelGroup, - adjustedStartTime.toISOString(), - adjustedEndTime.toISOString(), + startTime.toISOString(), + endTime.toISOString(), selected_token, selected_customer ); @@ -1391,9 +1379,7 @@ const ModelDashboard: React.FC = ({ - Select Time Range - { @@ -1402,7 +1388,7 @@ const ModelDashboard: React.FC = ({ selectedModelGroup, value.from, value.to - ); // Call updateModelMetrics with the new date range + ); }} /> diff --git a/ui/litellm-dashboard/src/components/new_usage.tsx b/ui/litellm-dashboard/src/components/new_usage.tsx index 0040937245..da967894ee 100644 --- a/ui/litellm-dashboard/src/components/new_usage.tsx +++ b/ui/litellm-dashboard/src/components/new_usage.tsx @@ -15,6 +15,7 @@ import { TableHeaderCell, TableBody, TableCell, Subtitle, DateRangePicker, DateRangePickerValue } from "@tremor/react"; +import UsageDatePicker from "./shared/usage_date_picker"; import { AreaChart } from "@tremor/react"; import { userDailyActivityCall, tagListCall } from "./networking"; @@ -273,9 +274,7 @@ const NewUsagePage: React.FC = ({ - Select Time Range - { setDateValue(value); diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx index d1c0ecb87e..74a411fcbc 100644 --- a/ui/litellm-dashboard/src/components/usage.tsx +++ b/ui/litellm-dashboard/src/components/usage.tsx @@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react"; import ViewUserSpend from "./view_user_spend"; import { ProxySettings } from "./user_dashboard"; +import UsageDatePicker from "./shared/usage_date_picker"; import { Grid, Col, Text, LineChart, TabPanel, TabPanels, @@ -213,23 +214,13 @@ const UsagePage: React.FC = ({ return; } - // Create new Date objects to avoid mutating the original dates - const adjustedStartTime = new Date(startTime); - const adjustedEndTime = new Date(endTime); - - // the endTime put it to the last hour of the selected date - adjustedEndTime.setHours(23, 59, 59, 999); - - // startTime put it to the first hour of the selected date - adjustedStartTime.setHours(0, 0, 0, 0); - console.log("uiSelectedKey", uiSelectedKey); let newTopUserData = await adminTopEndUsersCall( accessToken, uiSelectedKey, - adjustedStartTime.toISOString(), - adjustedEndTime.toISOString() + startTime.toISOString(), + endTime.toISOString() ) console.log("End user data updated successfully", newTopUserData); setTopUsers(newTopUserData); @@ -249,20 +240,10 @@ const UsagePage: React.FC = ({ return; // Don't run expensive DB queries - return out when SpendLogs has more than 1M rows } - // Create new Date objects to avoid mutating the original dates - const adjustedStartTime = new Date(startTime); - const adjustedEndTime = new Date(endTime); - - // the endTime put it to the last hour of the selected date - adjustedEndTime.setHours(23, 59, 59, 999); - - // startTime put it to the first hour of the selected date - adjustedStartTime.setHours(0, 0, 0, 0); - let top_tags = await tagsSpendLogsCall( accessToken, - adjustedStartTime.toISOString(), - adjustedEndTime.toISOString(), + startTime.toISOString(), + endTime.toISOString(), selectedTags.length === 0 ? undefined : selectedTags ); setTopTagsData(top_tags.spend_per_tag); @@ -843,14 +824,11 @@ const UsagePage: React.FC = ({

Customers of your LLM API calls. Tracked when a `user` param is passed in your LLM calls docs here

- Select Time Range - - { setDateValue(value); - updateEndUserData(value.from, value.to, null); // Call updateModelMetrics with the new date range + updateEndUserData(value.from, value.to, null); }} /> @@ -924,13 +902,12 @@ const UsagePage: React.FC = ({ - { setDateValue(value); - updateTagSpendData(value.from, value.to); // Call updateModelMetrics with the new date range + updateTagSpendData(value.from, value.to); }} />