mirror of
https://github.com/tiennm99/litellm.git
synced 2026-08-24 08:30:09 +00:00
fix: isolate logs team filter dropdown from root teams state bleed
The Logs view's Team ID filter dropdown was reading `allTeams` from the root `teams` state in page.tsx, which the Teams page search overwrites with its filtered subset. Applying a team search on the Teams page made filtered-out teams disappear from the Logs filter dropdown. Swap the Team ID filter to use the existing `TeamDropdown` component via a small `FilterTeamDropdown` wrapper that adapts it to the filter slot's `FilterOptionCustomComponentProps` contract. The dropdown now drives its own `useInfiniteTeams` query against `/v2/team/list` with server-side search and an isolated react-query cache, unreachable from root state. Rename the now-unused `hookAllTeams` destructure to `allTeams` so the `KeyInfoView` passthrough receives the hook's unpolluted fetch instead of the polluted prop, and drop the dead `allTeams` prop from `SpendLogsTable` and both of its call sites.
This commit is contained in:
@@ -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}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -620,7 +620,6 @@ function CreateKeyPageContent() {
|
||||
userRole={userRole}
|
||||
token={token}
|
||||
accessToken={accessToken}
|
||||
allTeams={(teams as Team[]) ?? []}
|
||||
premiumUser={premiumUser}
|
||||
/>
|
||||
) : page == "mcp-servers" ? (
|
||||
|
||||
@@ -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;
|
||||
@@ -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,
|
||||
};
|
||||
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user