(beta ui - spend logs view fixes & Improvements 1) (#8062)

* ui 1 - show correct msg on no logs

* fix dup country col

* backend - allow filtering by team_id and api_key

* fix ui_view_spend_logs

* ui update query params

* working team id and key hash filters

* fix filter ref - don't hold on them as they are

* fix _model_custom_llm_provider_matches_wildcard_pattern

* fix test test_stream_chunk_builder_openai_audio_output_usage - use direct dict comparison

litellm/proxy/spend_tracking/spend_management_endpoints.py

@@ -1627,7 +1627,19 @@ async def ui_view_spend_logs(  # noqa: PLR0915
     ),
     request_id: Optional[str] = fastapi.Query(
         default=None,
-        description="request_id to get spend logs for specific request_id. If none passed then pass spend logs for all requests",
+        description="request_id to get spend logs for specific request_id",
+    ),
+    team_id: Optional[str] = fastapi.Query(
+        default=None,
+        description="Filter spend logs by team_id",
+    ),
+    min_spend: Optional[float] = fastapi.Query(
+        default=None,
+        description="Filter logs with spend greater than or equal to this value",
+    ),
+    max_spend: Optional[float] = fastapi.Query(
+        default=None,
+        description="Filter logs with spend less than or equal to this value",
     ),
     start_date: Optional[str] = fastapi.Query(
         default=None,
@@ -1674,6 +1686,8 @@ async def ui_view_spend_logs(  # noqa: PLR0915
             param="None",
             code=status.HTTP_400_BAD_REQUEST,
         )
+
+    try:
         # Convert the date strings to datetime objects
         start_date_obj = datetime.strptime(start_date, "%Y-%m-%d %H:%M:%S")
         end_date_obj = datetime.strptime(end_date, "%Y-%m-%d %H:%M:%S")
@@ -1682,21 +1696,40 @@ async def ui_view_spend_logs(  # noqa: PLR0915
         start_date_iso = start_date_obj.isoformat() + "Z"  # Add Z to indicate UTC
         end_date_iso = end_date_obj.isoformat() + "Z"  # Add Z to indicate UTC
 
+        # Build where conditions
+        where_conditions: dict[str, Any] = {
+            "startTime": {"gte": start_date_iso, "lte": end_date_iso},
+        }
+
+        if team_id is not None:
+            where_conditions["team_id"] = team_id
+
+        if api_key is not None:
+            where_conditions["api_key"] = api_key
+
+        if user_id is not None:
+            where_conditions["user"] = user_id
+
+        if request_id is not None:
+            where_conditions["request_id"] = request_id
+
+        if min_spend is not None or max_spend is not None:
+            where_conditions["spend"] = {}
+            if min_spend is not None:
+                where_conditions["spend"]["gte"] = min_spend
+            if max_spend is not None:
+                where_conditions["spend"]["lte"] = max_spend
         # Calculate skip value for pagination
         skip = (page - 1) * page_size
 
         # Get total count of records
         total_records = await prisma_client.db.litellm_spendlogs.count(
-        where={
-            "startTime": {"gte": start_date_iso, "lte": end_date_iso},
-        }
+            where=where_conditions,
         )
 
         # Get paginated data
         data = await prisma_client.db.litellm_spendlogs.find_many(
-        where={
-            "startTime": {"gte": start_date_iso, "lte": end_date_iso},
-        },
+            where=where_conditions,
             order={
                 "startTime": "desc",
             },
@@ -1714,6 +1747,9 @@ async def ui_view_spend_logs(  # noqa: PLR0915
             "page_size": page_size,
             "total_pages": total_pages,
         }
+    except Exception as e:
+        verbose_proxy_logger.exception(f"Error in ui_view_spend_logs: {e}")
+        raise handle_exception_on_proxy(e)
 
 
 @router.get(

tests/local_testing/test_stream_chunk_builder.py

@@ -721,22 +721,14 @@ def test_stream_chunk_builder_openai_audio_output_usage():
     print(f"response usage: {response.usage}")
     check_non_streaming_response(response)
     print(f"response: {response}")
-    for k, v in usage_obj.model_dump(exclude_none=True).items():
-        print(k, v)
-        response_usage_value = getattr(response.usage, k)  # type: ignore
-        print(f"response_usage_value: {response_usage_value}")
-        print(f"type: {type(response_usage_value)}")
-        if isinstance(response_usage_value, BaseModel):
-            response_usage_value_dict = response_usage_value.model_dump(
-                exclude_none=True
-            )
-            if isinstance(v, dict):
-                for key, value in v.items():
-                    assert response_usage_value_dict[key] == value
-            else:
-                assert response_usage_value_dict == v
-        else:
-            assert response_usage_value == v
+    # Convert both usage objects to dictionaries for easier comparison
+    usage_dict = usage_obj.model_dump(exclude_none=True)
+    response_usage_dict = response.usage.model_dump(exclude_none=True)
+
+    # Simple dictionary comparison
+    assert (
+        usage_dict == response_usage_dict
+    ), f"\nExpected: {usage_dict}\nGot: {response_usage_dict}"
 
 
 def test_stream_chunk_builder_empty_initial_chunk():

ui/litellm-dashboard/src/components/networking.tsx

@@ -1553,12 +1553,14 @@ export const userSpendLogsCall = async (
 export const uiSpendLogsCall = async (
   accessToken: String,
   api_key?: string, 
-  user_id?: string,
+  team_id?: string,
   request_id?: string,
   start_date?: string,
   end_date?: string,
   page?: number,
   page_size?: number,
+  min_spend?: number,
+  max_spend?: number,
 ) => {
   try {
     // Construct base URL
@@ -1567,7 +1569,9 @@ export const uiSpendLogsCall = async (
     // Add query parameters if they exist
     const queryParams = new URLSearchParams();
     if (api_key) queryParams.append('api_key', api_key);
-    if (user_id) queryParams.append('user_id', user_id);
+    if (team_id) queryParams.append('team_id', team_id);
+    if (min_spend) queryParams.append('min_spend', min_spend.toString());
+    if (max_spend) queryParams.append('max_spend', max_spend.toString());
     if (request_id) queryParams.append('request_id', request_id);
     if (start_date) queryParams.append('start_date', start_date);
     if (end_date) queryParams.append('end_date', end_date);
@@ -1595,7 +1599,7 @@ export const uiSpendLogsCall = async (
     }
 
     const data = await response.json();
-    console.log("Spend Logs UI Response:", data);
+    console.log("Spend Logs Response:", data);
     return data;
   } catch (error) {
     console.error("Failed to fetch spend logs:", error);

ui/litellm-dashboard/src/components/view_logs/columns.tsx

@@ -7,6 +7,7 @@ import { CountryCell } from "./country_cell";
 export type LogEntry = {
   request_id: string;
   api_key: string;
+  team_id: string;
   model: string;
   api_base?: string;
   call_type: string;
@@ -155,11 +156,6 @@ export const columns: ColumnDef<LogEntry>[] = [
       );
     },
   },
-  {
-    header: "Country",
-    accessorKey: "requester_ip_address",
-    cell: (info: any) => <CountryCell ipAddress={info.getValue()} />,
-  },
 ];
 
 const formatMessage = (message: any): string => {

ui/litellm-dashboard/src/components/view_logs/index.tsx

@@ -29,14 +29,13 @@ export default function SpendLogsTable({
   userID,
 }: SpendLogsTableProps) {
   const [searchTerm, setSearchTerm] = useState("");
-  const [keyNameFilter, setKeyNameFilter] = useState("");
-  const [teamNameFilter, setTeamNameFilter] = useState("");
   const [showFilters, setShowFilters] = useState(false);
   const [showColumnDropdown, setShowColumnDropdown] = useState(false);
-  const [selectedColumn, setSelectedColumn] = useState("Key Name");
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize] = useState(50);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const filtersRef = useRef<HTMLDivElement>(null);
+  const quickSelectRef = useRef<HTMLDivElement>(null);
 
   // New state variables for Start and End Time
   const [startTime, setStartTime] = useState<string>(
@@ -49,6 +48,11 @@ export default function SpendLogsTable({
   // Add these new state variables at the top with other useState declarations
   const [isCustomDate, setIsCustomDate] = useState(false);
   const [quickSelectOpen, setQuickSelectOpen] = useState(false);
+  const [tempTeamId, setTempTeamId] = useState("");
+  const [tempKeyHash, setTempKeyHash] = useState("");
+  const [selectedTeamId, setSelectedTeamId] = useState("");
+  const [selectedKeyHash, setSelectedKeyHash] = useState("");
+  const [selectedFilter, setSelectedFilter] = useState("Team ID");
 
   // Close dropdown when clicking outside
   useEffect(() => {
@@ -59,6 +63,18 @@ export default function SpendLogsTable({
       ) {
         setShowColumnDropdown(false);
       }
+      if (
+        filtersRef.current &&
+        !filtersRef.current.contains(event.target as Node)
+      ) {
+        setShowFilters(false);
+      }
+      if (
+        quickSelectRef.current &&
+        !quickSelectRef.current.contains(event.target as Node)
+      ) {
+        setQuickSelectOpen(false);
+      }
     }
 
     document.addEventListener("mousedown", handleClickOutside);
@@ -67,12 +83,19 @@ export default function SpendLogsTable({
   }, []);
 
   const logs = useQuery<PaginatedResponse>({
-    queryKey: ["logs", "table", currentPage, pageSize, startTime, endTime],
+    queryKey: [
+      "logs",
+      "table",
+      currentPage,
+      pageSize,
+      startTime,
+      endTime,
+      selectedTeamId,
+      selectedKeyHash,
+    ],
     queryFn: async () => {
       if (!accessToken || !token || !userRole || !userID) {
-        console.log(
-          "got None values for one of accessToken, token, userRole, userID",
-        );
+        console.log("Missing required auth parameters");
         return {
           data: [],
           total: 0,
@@ -85,20 +108,17 @@ 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 data = await uiSpendLogsCall(
+      return await uiSpendLogsCall(
         accessToken,
-        token,
-        userRole,
-        userID,
+        selectedKeyHash || undefined,
+        selectedTeamId || undefined,
+        undefined,  // This parameter might be setting a default min_spend
         formattedStartTime,
         formattedEndTime,
         currentPage,
-        pageSize,
+        pageSize
       );
-
-      return data;
     },
-    // Refetch when startTime or endTime changes
     enabled: !!accessToken && !!token && !!userRole && !!userID,
   });
 
@@ -116,21 +136,12 @@ export default function SpendLogsTable({
         log.request_id.includes(searchTerm) ||
         log.model.includes(searchTerm) ||
         (log.user && log.user.includes(searchTerm));
-      const matchesKeyName =
-        !keyNameFilter ||
-        (log.metadata?.user_api_key_alias &&
-          log.metadata.user_api_key_alias
-            .toLowerCase()
-            .includes(keyNameFilter.toLowerCase()));
-      const matchesTeamName =
-        !teamNameFilter ||
-        (log.metadata?.user_api_key_team_alias &&
-          log.metadata.user_api_key_team_alias
-            .toLowerCase()
-            .includes(teamNameFilter.toLowerCase()));
-      return matchesSearch && matchesKeyName && matchesTeamName;
+      
+      // No need for additional filtering since we're now handling this in the API call
+      return matchesSearch;
     }) || [];
 
+
   return (
     <div className="w-full">
       <h1 className="text-xl font-semibold mb-4">Traces</h1>
@@ -160,7 +171,7 @@ export default function SpendLogsTable({
                   />
                 </svg>
               </div>
-              <div className="relative" ref={dropdownRef}>
+              <div className="relative" ref={filtersRef}>
                 <button
                   className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"
                   onClick={() => setShowFilters(!showFilters)}
@@ -183,16 +194,15 @@ export default function SpendLogsTable({
 
                 {showFilters && (
                   <div className="absolute left-0 mt-2 w-[500px] bg-white rounded-lg shadow-lg border p-4 z-50">
+                    <div className="flex flex-col gap-4">
                       <div className="flex items-center gap-2">
                         <span className="text-sm font-medium">Where</span>
                         <div className="relative">
                           <button
-                          onClick={() =>
-                            setShowColumnDropdown(!showColumnDropdown)
-                          }
+                            onClick={() => setShowColumnDropdown(!showColumnDropdown)}
                             className="px-3 py-1.5 border rounded-md bg-white text-sm min-w-[160px] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-left flex justify-between items-center"
                           >
-                          {selectedColumn}
+                            {selectedFilter}
                             <svg
                               className="h-4 w-4 text-gray-500"
                               fill="none"
@@ -209,25 +219,25 @@ export default function SpendLogsTable({
                           </button>
                           {showColumnDropdown && (
                             <div className="absolute left-0 mt-1 w-[160px] bg-white border rounded-md shadow-lg z-50">
-                            {["Key Name", "Team Name"].map((option) => (
+                              {["Team ID", "Key Hash"].map((option) => (
                                 <button
                                   key={option}
                                   className={`w-full px-3 py-2 text-left text-sm hover:bg-gray-50 flex items-center gap-2 ${
-                                  selectedColumn === option
+                                    selectedFilter === option
                                       ? "bg-blue-50 text-blue-600"
                                       : ""
                                   }`}
                                   onClick={() => {
-                                  setSelectedColumn(option);
+                                    setSelectedFilter(option);
                                     setShowColumnDropdown(false);
-                                  if (option === "Key Name") {
-                                    setTeamNameFilter("");
+                                    if (option === "Team ID") {
+                                      setTempKeyHash("");
                                     } else {
-                                    setKeyNameFilter("");
+                                      setTempTeamId("");
                                     }
                                   }}
                                 >
-                                {selectedColumn === option && (
+                                  {selectedFilter === option && (
                                     <svg
                                       className="h-4 w-4 text-blue-600"
                                       fill="none"
@@ -252,31 +262,55 @@ export default function SpendLogsTable({
                           type="text"
                           placeholder="Enter value..."
                           className="px-3 py-1.5 border rounded-md text-sm flex-1 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                        value={keyNameFilter || teamNameFilter}
+                          value={selectedFilter === "Team ID" ? tempTeamId : tempKeyHash}
                           onChange={(e) => {
-                          if (selectedColumn === "Key Name") {
-                            setKeyNameFilter(e.target.value);
+                            if (selectedFilter === "Team ID") {
+                              setTempTeamId(e.target.value);
                             } else {
-                            setTeamNameFilter(e.target.value);
+                              setTempKeyHash(e.target.value);
                             }
                           }}
                         />
                         <button
                           className="p-1 hover:bg-gray-100 rounded-md"
                           onClick={() => {
-                          setKeyNameFilter("");
-                          setTeamNameFilter("");
-                          setShowFilters(false);
+                            setTempTeamId("");
+                            setTempKeyHash("");
                           }}
                         >
                           <span className="text-gray-500">×</span>
                         </button>
                       </div>
+                      
+                      <div className="flex justify-end gap-2">
+                        <button
+                          className="px-3 py-1.5 text-sm border rounded-md hover:bg-gray-50"
+                          onClick={() => {
+                            setTempTeamId("");
+                            setTempKeyHash("");
+                            setShowFilters(false);
+                          }}
+                        >
+                          Cancel
+                        </button>
+                        <button
+                          className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
+                          onClick={() => {
+                            setSelectedTeamId(tempTeamId);
+                            setSelectedKeyHash(tempKeyHash);
+                            setCurrentPage(1); // Reset to first page when applying new filters
+                            setShowFilters(false);
+                          }}
+                        >
+                          Apply Filters
+                        </button>
+                      </div>
+                    </div>
                   </div>
                 )}
               </div>
 
-              <div className="relative">
+              <div className="relative" ref={quickSelectRef}>
                 <button
                   onClick={() => setQuickSelectOpen(!quickSelectOpen)}
                   className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"

ui/litellm-dashboard/src/components/view_logs/table.tsx

@@ -22,6 +22,7 @@ interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   renderSubComponent: (props: { row: Row<TData> }) => React.ReactElement;
   getRowCanExpand: (row: Row<TData>) => boolean;
+  isLoading?: boolean;
 }
 
 export function DataTable<TData, TValue>({
@@ -29,6 +30,7 @@ export function DataTable<TData, TValue>({
   columns,
   getRowCanExpand,
   renderSubComponent,
+  isLoading = false,
 }: DataTableProps<TData, TValue>) {
   const table = useReactTable({
     data,
@@ -60,7 +62,15 @@ export function DataTable<TData, TValue>({
           ))}
         </TableHead>
         <TableBody>
-          {table.getRowModel().rows.length > 0 ? (
+          {isLoading ? (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                <div className="p-8 text-center text-gray-500">
+                  <p>🚅 Loading logs...</p>
+                </div>
+              </TableCell>
+            </TableRow>
+          ) : table.getRowModel().rows.length > 0 ? (
             table.getRowModel().rows.map((row) => (
               <Fragment key={row.id}>
                 <TableRow>
@@ -87,14 +97,7 @@ export function DataTable<TData, TValue>({
             <TableRow>
               <TableCell colSpan={columns.length} className="h-24 text-center">
                 <div className="p-8 text-center text-gray-500">
-                  <p>No SpendLogs messages available.</p>
-                  <p className="text-sm mt-2">
-                    To enable this, set{" "}
-                    <code>
-                      `general_settings.store_prompts_in_spend_logs: true`
-                    </code>{" "}
-                    in your config.yaml
-                  </p>
+                  <p>No logs found</p>
                 </div>
               </TableCell>
             </TableRow>