Merge pull request #25716 from BerriAI/litellm_fix-logs-team-filter-state-bleed

fix: isolate logs team filter dropdown from root teams state bleed

ui/litellm-dashboard/src/app/(dashboard)/logs/page.tsx

@@ -2,11 +2,9 @@
 
 import SpendLogsTable from "@/components/view_logs";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import useTeams from "@/app/(dashboard)/hooks/useTeams";
 
 const LogsPage = () => {
   const { accessToken, token, userRole, userId, premiumUser } = useAuthorized();
-  const { teams } = useTeams();
 
   return (
     <SpendLogsTable
@@ -14,7 +12,6 @@ const LogsPage = () => {
       token={token}
       userRole={userRole}
       userID={userId}
-      allTeams={teams || []}
       premiumUser={premiumUser}
     />
   );

ui/litellm-dashboard/src/app/page.tsx

@@ -612,7 +612,6 @@ function CreateKeyPageContent() {
                       userRole={userRole}
                       token={token}
                       accessToken={accessToken}
-                      allTeams={(teams as Team[]) ?? []}
                       premiumUser={premiumUser}
                     />
                   ) : page == "mcp-servers" ? (

ui/litellm-dashboard/src/components/common_components/FilterTeamDropdown.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import TeamDropdown from "./team_dropdown";
+import type { FilterOptionCustomComponentProps } from "../molecules/filter";
+
+const FilterTeamDropdown: React.FC<FilterOptionCustomComponentProps> = ({
+  value,
+  onChange,
+}) => <TeamDropdown value={value} onChange={onChange} />;
+
+export default FilterTeamDropdown;

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

@@ -4,7 +4,6 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import SpendLogsTable, { RequestViewer } from "./index";
 import type { LogEntry } from "./columns";
 import type { Row } from "@tanstack/react-table";
-import type { Team } from "../key_team_helpers/key_list";
 import { renderWithProviders } from "../../../tests/test-utils";
 
 const mockHandleFilterResetFromHook = vi.fn();
@@ -178,7 +177,6 @@ describe("SpendLogsTable", () => {
     token: "test-token",
     userRole: "Admin",
     userID: "user-1",
-    allTeams: [] as Team[],
     premiumUser: false,
   };
 

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

@@ -11,7 +11,8 @@ import { Button, Tag, Tooltip } from "antd";
 import { internalUserRoles } from "../../utils/roles";
 import DeletedKeysPage from "../DeletedKeysPage/DeletedKeysPage";
 import DeletedTeamsPage from "../DeletedTeamsPage/DeletedTeamsPage";
-import { KeyResponse, Team } from "../key_team_helpers/key_list";
+import FilterTeamDropdown from "../common_components/FilterTeamDropdown";
+import { KeyResponse } from "../key_team_helpers/key_list";
 import { PaginatedKeyAliasSelect } from "../KeyAliasSelect/PaginatedKeyAliasSelect/PaginatedKeyAliasSelect";
 import { PaginatedModelSelect } from "../ModelSelect/PaginatedModelSelect/PaginatedModelSelect";
 import FilterComponent, { FilterOption } from "../molecules/filter";
@@ -36,7 +37,6 @@ interface SpendLogsTableProps {
   token: string | null;
   userRole: string | null;
   userID: string | null;
-  allTeams: Team[];
   premiumUser: boolean;
 }
 
@@ -53,7 +53,6 @@ export default function SpendLogsTable({
   token,
   userRole,
   userID,
-  allTeams,
   premiumUser,
 }: SpendLogsTableProps) {
   const [searchTerm, setSearchTerm] = useState("");
@@ -241,7 +240,7 @@ export default function SpendLogsTable({
     filters,
     filteredLogs,
     hasBackendFilters,
-    allTeams: hookAllTeams,
+    allTeams,
     handleFilterChange,
     handleFilterReset: handleFilterResetFromHook,
   } = useLogFilterLogic({
@@ -394,20 +393,7 @@ export default function SpendLogsTable({
     {
       name: "Team ID",
       label: "Team ID",
-      isSearchable: true,
-      searchFn: async (searchText: string) => {
-        if (!allTeams || allTeams.length === 0) return [];
-        const filtered = allTeams.filter((team: Team) => {
-          return (
-            team.team_id.toLowerCase().includes(searchText.toLowerCase()) ||
-            (team.team_alias && team.team_alias.toLowerCase().includes(searchText.toLowerCase()))
-          );
-        });
-        return filtered.map((team: Team) => ({
-          label: `${team.team_alias || team.team_id} (${team.team_id})`,
-          value: team.team_id,
-        }));
-      },
+      customComponent: FilterTeamDropdown,
     },
     {
       name: "Status",
@@ -506,7 +492,7 @@ export default function SpendLogsTable({
               <KeyInfoView
                 keyId={selectedKeyIdInfoView}
                 keyData={selectedKeyInfo}
-                teams={allTeams}
+                teams={allTeams ?? []}
                 onClose={() => setSelectedKeyIdInfoView(null)}
                 backButtonText="Back to Logs"
               />