fix(log_filter_logic.tsx): fix searching for end user logs, globally

ensures filters work outside of initial loaded page

Author: krrishdholakia

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

@@ -55,7 +55,13 @@ export function useLogFilterLogic({
   }), []);
 
   const [filters, setFilters] = useState<LogFilterState>(defaultFilters);
-  const [filteredLogs, setFilteredLogs] = useState<PaginatedResponse>(logs);
+  const [backendFilteredLogs, setBackendFilteredLogs] = useState<PaginatedResponse>({
+    data: [],
+    total: 0,
+    page: 1,
+    page_size: 50,
+    total_pages: 0
+  });
   const lastSearchTimestamp = useRef(0);
   const performSearch = useCallback(async (filters: LogFilterState, page = 1) => {
     if (!accessToken) return;
@@ -87,7 +93,7 @@ export function useLogFilterLogic({
       );
 
       if (currentTimestamp === lastSearchTimestamp.current && response.data) {
-        setFilteredLogs(response);
+        setBackendFilteredLogs(response);
       }
     } catch (error) {
       console.error("Error searching users:", error);
@@ -113,34 +119,36 @@ export function useLogFilterLogic({
   });
   const allKeyAliases = queryAllKeysQuery.data || []
 
-  // Apply filters to keys whenever logs or filters change
-  useEffect(() => {
+  // Determine when backend filters are active (server-side filtering)
+  const hasBackendFilters = useMemo(() => (
+    !!(
+      filters[FILTER_KEYS.KEY_ALIAS] ||
+      filters[FILTER_KEYS.KEY_HASH] ||
+      filters[FILTER_KEYS.REQUEST_ID] ||
+      filters[FILTER_KEYS.USER_ID] ||
+      filters[FILTER_KEYS.END_USER]
+    )
+  ), [filters]);
+
+  // Compute client-side filtered logs directly from incoming logs and filters
+  const clientDerivedFilteredLogs: PaginatedResponse = useMemo(() => {
     if (!logs || !logs.data) {
-      setFilteredLogs({
+      return {
         data: [],
         total: 0,
         page: 1,
         page_size: 50,
         total_pages: 0
-      });
-      return;
+      };
     }
 
-    // Only do client-side filtering if no backend filters are active
-    const hasBackendFilters = 
-      filters[FILTER_KEYS.KEY_ALIAS] || 
-      filters[FILTER_KEYS.KEY_HASH] || 
-      filters[FILTER_KEYS.REQUEST_ID] || 
-      filters[FILTER_KEYS.USER_ID] || 
-      filters[FILTER_KEYS.END_USER];
-
+    // If backend filters are on, don't perform client-side filtering here
     if (hasBackendFilters) {
-      // Backend is handling filtering, don't override the results
-      return;
+      return logs;
     }
-  
+
     let filteredData = [...logs.data];
-  
+
     if (filters[FILTER_KEYS.TEAM_ID]) {
       filteredData = filteredData.filter(
         log => log.team_id === filters[FILTER_KEYS.TEAM_ID]
@@ -163,7 +171,7 @@ export function useLogFilterLogic({
         log => log.model === filters[FILTER_KEYS.MODEL]
       );
     }
-    
+
     if (filters[FILTER_KEYS.KEY_HASH]) {
       filteredData = filteredData.filter(
         log => log.api_key === filters[FILTER_KEYS.KEY_HASH]
@@ -175,21 +183,33 @@ export function useLogFilterLogic({
         log => log.end_user === filters[FILTER_KEYS.END_USER]
       );
     }
-    
-    const newFilteredLogs: PaginatedResponse = {
+
+    return {
       data: filteredData,
       total: logs.total,
       page: logs.page,
       page_size: logs.page_size,
       total_pages: logs.total_pages,
     };
-  
-    if (JSON.stringify(newFilteredLogs) !== JSON.stringify(filteredLogs)) {
-      setFilteredLogs(newFilteredLogs);
-    }
-  }, [logs, filters, filteredLogs, accessToken]);
+  }, [logs, filters, hasBackendFilters]);
 
-  
+  // Choose which filtered logs to expose: backend result when active, otherwise client-derived
+  const filteredLogs: PaginatedResponse = useMemo(() => {
+    if (hasBackendFilters) {
+      // Prefer backend result if present; otherwise fall back to latest logs
+      if (backendFilteredLogs && backendFilteredLogs.data && backendFilteredLogs.data.length > 0) {
+        return backendFilteredLogs;
+      }
+      return logs || {
+        data: [],
+        total: 0,
+        page: 1,
+        page_size: 50,
+        total_pages: 0
+      };
+    }
+    return clientDerivedFilteredLogs;
+  }, [hasBackendFilters, backendFilteredLogs, clientDerivedFilteredLogs, logs]);
 
   // Fetch all teams and users for potential filter dropdowns (optional, can be adapted)
   const { data: allTeams } = useQuery<Team[], Error>({