From 892581ffc39240a21e88d643faafcf7d21b914fe Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Wed, 29 Jan 2025 08:46:20 -0800 Subject: [PATCH] (UI) - View Logs Page - Refinement (#8087) * working refetch interval * ui show provider logo in SpendLogs Table * fix padding * improve time range filter * ui fix diff minutes * fix refresh button placement --- litellm/proxy/proxy_config.yaml | 16 +- .../spend_management_endpoints.py | 2 + .../src/components/view_logs/columns.tsx | 23 ++- .../src/components/view_logs/index.tsx | 152 ++++++++++++------ 4 files changed, 134 insertions(+), 59 deletions(-) diff --git a/litellm/proxy/proxy_config.yaml b/litellm/proxy/proxy_config.yaml index b2f47caac72..7bc0435a148 100644 --- a/litellm/proxy/proxy_config.yaml +++ b/litellm/proxy/proxy_config.yaml @@ -5,15 +5,9 @@ model_list: api_key: fake-key api_base: https://exampleopenaiendpoint-production.up.railway.app/ - - litellm_settings: - callbacks: ["prometheus"] - prometheus_initialize_budget_metrics: true -guardrails: - - guardrail_name: "bedrock-pre-guard" - litellm_params: - guardrail: bedrock # supported values: "aporia", "bedrock", "lakera" - mode: "during_call" - guardrailIdentifier: gf3sc1mzinjw - guardrailVersion: "DRAFT" + callbacks: ["datadog"] + +general_settings: + store_prompts_in_spend_logs: true + diff --git a/litellm/proxy/spend_tracking/spend_management_endpoints.py b/litellm/proxy/spend_tracking/spend_management_endpoints.py index 63489f3f0ec..8d453bf56ed 100644 --- a/litellm/proxy/spend_tracking/spend_management_endpoints.py +++ b/litellm/proxy/spend_tracking/spend_management_endpoints.py @@ -1740,6 +1740,8 @@ async def ui_view_spend_logs( # noqa: PLR0915 # Calculate total pages total_pages = (total_records + page_size - 1) // page_size + verbose_proxy_logger.debug("data= %s", json.dumps(data, indent=4, default=str)) + return { "data": data, "total": total_records, diff --git a/ui/litellm-dashboard/src/components/view_logs/columns.tsx b/ui/litellm-dashboard/src/components/view_logs/columns.tsx index 00fa117584c..c805e531b91 100644 --- a/ui/litellm-dashboard/src/components/view_logs/columns.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/columns.tsx @@ -3,6 +3,7 @@ import { getCountryFromIP } from "./ip_lookup"; import moment from "moment"; import React from "react"; import { CountryCell } from "./country_cell"; +import { getProviderLogoAndName } from "../provider_info_helpers"; export type LogEntry = { request_id: string; @@ -18,6 +19,7 @@ export type LogEntry = { startTime: string; endTime: string; user?: string; + custom_llm_provider?: string; metadata?: Record; cache_hit: string; cache_key?: string; @@ -106,7 +108,26 @@ export const columns: ColumnDef[] = [ { header: "Model", accessorKey: "model", - cell: (info: any) => {String(info.getValue() || "")}, + cell: (info: any) => { + const row = info.row.original; + const provider = row.custom_llm_provider; + return ( +
+ {provider && ( + { + const target = e.target as HTMLImageElement; + target.style.display = 'none'; + }} + /> + )} + {String(info.getValue() || "")} +
+ ); + }, }, { header: "Tokens", diff --git a/ui/litellm-dashboard/src/components/view_logs/index.tsx b/ui/litellm-dashboard/src/components/view_logs/index.tsx index 918c4afad49..c865042c329 100644 --- a/ui/litellm-dashboard/src/components/view_logs/index.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/index.tsx @@ -106,13 +106,15 @@ export default function SpendLogsTable({ } const formattedStartTime = moment(startTime).format("YYYY-MM-DD HH:mm:ss"); - const formattedEndTime = moment(endTime).format("YYYY-MM-DD HH:mm:ss"); + const formattedEndTime = isCustomDate + ? moment(endTime).format("YYYY-MM-DD HH:mm:ss") + : moment().format("YYYY-MM-DD HH:mm:ss"); return await uiSpendLogsCall( accessToken, selectedKeyHash || undefined, selectedTeamId || undefined, - undefined, // This parameter might be setting a default min_spend + undefined, formattedStartTime, formattedEndTime, currentPage, @@ -120,6 +122,8 @@ export default function SpendLogsTable({ ); }, enabled: !!accessToken && !!token && !!userRole && !!userID, + refetchInterval: 5000, + refetchIntervalInBackground: true, }); if (!accessToken || !token || !userRole || !userID) { @@ -141,10 +145,37 @@ export default function SpendLogsTable({ return matchesSearch; }) || []; + // Add this function to handle manual refresh + const handleRefresh = () => { + logs.refetch(); + }; + + // Add this function to format the time range display + const getTimeRangeDisplay = () => { + if (isCustomDate) { + return `${moment(startTime).format('MMM D, h:mm A')} - ${moment(endTime).format('MMM D, h:mm A')}`; + } + + const now = moment(); + const start = moment(startTime); + const diffMinutes = now.diff(start, 'minutes'); + + if (diffMinutes <= 15) return 'Last 15 Minutes'; + if (diffMinutes <= 60) return 'Last Hour'; + + const diffHours = now.diff(start, 'hours'); + if (diffHours <= 4) return 'Last 4 Hours'; + if (diffHours <= 24) return 'Last 24 Hours'; + if (diffHours <= 168) return 'Last 7 Days'; + return `${start.format('MMM D')} - ${now.format('MMM D')}`; + }; return ( -
-

Traces

+
+
+

Request Logs

+
+
@@ -310,13 +341,78 @@ export default function SpendLogsTable({ )}
-
+
+
+ + + {quickSelectOpen && ( +
+
+ {[ + { label: "Last 15 Minutes", value: 15, unit: "minutes" }, + { label: "Last Hour", value: 1, unit: "hours" }, + { label: "Last 4 Hours", value: 4, unit: "hours" }, + { label: "Last 24 Hours", value: 24, unit: "hours" }, + { label: "Last 7 Days", value: 7, unit: "days" }, + ].map((option) => ( + + ))} +
+ +
+
+ )} +
+ - - {quickSelectOpen && ( -
-
- {[ - { label: "Last 15 Minutes", value: 15, unit: "minutes" }, - { label: "Last Hour", value: 1, unit: "hours" }, - { label: "Last 4 Hours", value: 4, unit: "hours" }, - { label: "Last 24 Hours", value: 24, unit: "hours" }, - { label: "Last 7 Days", value: 7, unit: "days" }, - ].map((option) => ( - - ))} -
- -
-
- )}
{isCustomDate && (