diff --git a/ui/litellm-dashboard/src/components/view_logs/McpChildRows.tsx b/ui/litellm-dashboard/src/components/view_logs/McpChildRows.tsx deleted file mode 100644 index ed63011eaa0..00000000000 --- a/ui/litellm-dashboard/src/components/view_logs/McpChildRows.tsx +++ /dev/null @@ -1,222 +0,0 @@ -import { useQuery } from "@tanstack/react-query"; -import type { Row } from "@tanstack/react-table"; -import { Tooltip } from "antd"; -import { TableRow, TableCell } from "@tremor/react"; -import { getSpendString } from "@/utils/dataUtils"; -import { sessionSpendLogsCall } from "../networking"; -import type { LogEntry } from "./columns"; -import { TimeCell } from "./time_cell"; -import { getProviderLogoAndName } from "../provider_info_helpers"; - -interface SessionChildRowsProps { - row: Row; - accessToken: string; - onChildClick?: (log: LogEntry) => void; -} - -const MCP_CALL_TYPES = ["call_mcp_tool", "list_mcp_tools"]; - -const LlmBadge = () => ( - - - - - LLM - -); - -const McpBadge = () => ( - - - - - MCP - -); - -export function SessionChildRows({ row, accessToken, onChildClick }: SessionChildRowsProps) { - const sessionId = row.original.session_id; - - const { data: children, isLoading } = useQuery({ - queryKey: ["sessionChildren", sessionId], - queryFn: async () => { - if (!sessionId) return []; - const response = await sessionSpendLogsCall(accessToken, sessionId); - const allLogs: LogEntry[] = response.data || response || []; - // Sort chronologically - return allLogs.sort((a, b) => - new Date(a.startTime).getTime() - new Date(b.startTime).getTime() - ); - }, - enabled: !!sessionId && !!accessToken, - staleTime: 60_000, - }); - - if (isLoading) { - return ( - - - Loading session calls... - - - ); - } - - if (!children || children.length === 0) { - return ( - - - No calls found - - - ); - } - - return ( - <> - {children.map((child) => { - const isMcp = MCP_CALL_TYPES.includes(child.call_type); - const modelOrTool = isMcp - ? (child.model?.replace("MCP: ", "") || "unknown") - : (child.model || "-"); - const serverName = isMcp - ? (child.metadata?.mcp_tool_call_metadata?.mcp_server_name || "") - : ""; - const provider = child.custom_llm_provider || ""; - const logoUrl = isMcp - ? (child.metadata?.mcp_tool_call_metadata?.mcp_server_logo_url || "") - : (provider ? getProviderLogoAndName(provider).logo : ""); - const duration = - child.startTime && child.endTime - ? ((Date.parse(child.endTime) - Date.parse(child.startTime)) / 1000).toFixed(3) - : "-"; - const status = (child.metadata?.status || "Success").toLowerCase(); - const isSuccess = status !== "failure"; - - return ( - onChildClick?.(child)} - > - {/* Expander: branch connector */} - -
- - - - -
-
- - {/* Time */} - - - - - {/* Type */} - - {isMcp ? : } - - - {/* Status */} - - - {isSuccess ? "Success" : "Failure"} - - - - {/* Session ID */} - - - {child.session_id || ""} - - - - {/* Request ID */} - - - {child.request_id} - - - - {/* Cost */} - - {getSpendString(child.spend || 0)} - - - {/* Duration */} - - {duration} - - - {/* Team Name */} - - - {child.metadata?.user_api_key_team_alias || "-"} - - - - {/* Key Hash */} - - - {child.metadata?.user_api_key || "-"} - - - - {/* Key Name */} - - - {child.metadata?.user_api_key_alias || "-"} - - - - {/* Model / Tool */} - -
- {logoUrl && ( - { (e.target as HTMLImageElement).style.display = "none"; }} - /> - )} - - {modelOrTool} - - {serverName && ( - {serverName} - )} -
-
- - {/* Tokens */} - - {child.total_tokens || "0"} - - - {/* Internal User */} - - {child.user || "-"} - - - {/* End User */} - - {child.end_user || "-"} - - - {/* Tags */} - - - - -
- ); - })} - - ); -} diff --git a/ui/litellm-dashboard/src/components/view_logs/SessionView.tsx b/ui/litellm-dashboard/src/components/view_logs/SessionView.tsx deleted file mode 100644 index ce77ad14a1b..00000000000 --- a/ui/litellm-dashboard/src/components/view_logs/SessionView.tsx +++ /dev/null @@ -1,193 +0,0 @@ -import React, { useState } from "react"; -import { LogEntry } from "./columns"; -import { DataTable } from "./table"; -import { columns } from "./columns"; -import { Card, Title, Text, Metric, Button as TremorButton } from "@tremor/react"; -import { RequestViewer } from "./index"; -import { formatNumberWithCommas } from "@/utils/dataUtils"; -import { ArrowLeftIcon } from "@heroicons/react/outline"; -import { Button } from "antd"; -import { copyToClipboard as utilCopyToClipboard } from "../../utils/dataUtils"; -import { CheckIcon, CopyIcon } from "lucide-react"; -import { Tooltip } from "antd"; - -interface SessionViewProps { - sessionId: string; - logs: LogEntry[]; - onBack: () => void; -} - -export const SessionView: React.FC = ({ sessionId, logs, onBack }) => { - // Track which log row is expanded - const [expandedRequestId, setExpandedRequestId] = useState(null); - const [copiedStates, setCopiedStates] = useState>({}); - - // Calculate session metrics - const totalCost = logs.reduce((sum, log) => sum + (log.spend || 0), 0); - const totalTokens = logs.reduce((sum, log) => sum + (log.total_tokens || 0), 0); - - // Calculate cache token totals from metadata - const totalCacheReadTokens = logs.reduce((sum, log) => { - const cacheReadTokens = log.metadata?.additional_usage_values?.cache_read_input_tokens || 0; - return sum + cacheReadTokens; - }, 0); - - const totalCacheCreationTokens = logs.reduce((sum, log) => { - const cacheCreationTokens = log.metadata?.additional_usage_values?.cache_creation_input_tokens || 0; - return sum + cacheCreationTokens; - }, 0); - - // Calculate total tokens including cache tokens - const totalTokensWithCache = totalTokens + totalCacheReadTokens + totalCacheCreationTokens; - - const startTime = logs.length > 0 ? new Date(logs[0].startTime) : new Date(); - const endTime = logs.length > 0 ? new Date(logs[logs.length - 1].endTime) : new Date(); - const durationMs = endTime.getTime() - startTime.getTime(); - const durationSec = (durationMs / 1000).toFixed(2); - - // Prepare data for the timeline chart - const timelineData = logs.map((log) => ({ - time: new Date(log.startTime).toISOString(), - tokens: log.total_tokens || 0, - cost: log.spend || 0, - })); - - const copyToClipboard = async (text: string, key: string) => { - const success = await utilCopyToClipboard(text); - if (success) { - setCopiedStates((prev) => ({ ...prev, [key]: true })); - setTimeout(() => { - setCopiedStates((prev) => ({ ...prev, [key]: false })); - }, 2000); - } - }; - - return ( -
- {/* Header with back button */} -
- - Back to All Logs - -
-

Session Details

-
-
-

{sessionId}

-
- - Get started with session management here - - - - -
-
-
- - {/* Session Overview Cards */} -
- - Total Requests - {logs.length} - - - Total Cost - ${formatNumberWithCommas(totalCost, 6)} - - -
Usage breakdown
-
-
-
Input usage:
-
-
- input: - - {formatNumberWithCommas(logs.reduce((sum, log) => sum + (log.prompt_tokens || 0), 0))} - -
- {totalCacheReadTokens > 0 && ( -
- input_cached_tokens: - {formatNumberWithCommas(totalCacheReadTokens)} -
- )} - {totalCacheCreationTokens > 0 && ( -
- input_cache_creation_tokens: - {formatNumberWithCommas(totalCacheCreationTokens)} -
- )} -
-
-
-
Output usage:
-
-
- output: - - {formatNumberWithCommas(logs.reduce((sum, log) => sum + (log.completion_tokens || 0), 0))} - -
-
-
-
-
- Total usage: - {formatNumberWithCommas(totalTokensWithCache)} -
-
-
-
- } - placement="top" - overlayStyle={{ minWidth: "300px" }} - > - -
- Total Tokens - -
- {formatNumberWithCommas(totalTokensWithCache)} -
- -
- {/* Request Timeline */} - Session Logs -
- true} - loadingMessage="Loading logs..." - noDataMessage="No logs found" - /> -
- - ); -};