diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.test.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.test.tsx index 88adedf022a..fc8f7a14626 100644 --- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.test.tsx +++ b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.test.tsx @@ -119,8 +119,24 @@ describe("TopKeyView", () => { expect(screen.getByText("$100.00")).toBeInTheDocument(); }); - it("should display user attribution when the key has no alias", () => { - render( + it("should render User column only when a row has user attribution", () => { + const { rerender } = render( + , + ); + + expect(screen.queryByText("User")).not.toBeInTheDocument(); + + rerender( { ]} />, ); - expect(screen.getAllByText("-")).toHaveLength(2); + expect(screen.getAllByText("-")).toHaveLength(1); }); it("should format spend values with two decimal places", () => { @@ -294,7 +310,7 @@ describe("TopKeyView", () => { ]} />, ); - expect(screen.getAllByText("-")).toHaveLength(2); + expect(screen.getAllByText("-")).toHaveLength(1); expect(screen.queryByText("$0.00")).not.toBeInTheDocument(); }); @@ -697,13 +713,13 @@ describe("TopKeyView", () => { topKeys={[ { api_key: "key-123", - key_alias: "", + key_alias: null, user_email: null, spend: 100, }, ]} />, ); - expect(screen.getAllByText("-")).toHaveLength(2); + expect(screen.getAllByText("-")).toHaveLength(1); }); }); diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx index 7701721ac32..c59d7fe5c8d 100644 --- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx +++ b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx @@ -17,8 +17,8 @@ const TOP_KEYS_LIMITS = [5, 10, 25, 50] as const; export interface TopKeyItem { api_key: string; - key_alias: string; - user_email: string | null; + key_alias: string | null; + user_email?: string | null; tags?: TagUsage[] | null; spend: number; } @@ -103,11 +103,15 @@ const TopKeyView: React.FC = ({ topKeys, teams, showTags = fals accessorKey: "key_alias", cell: (info: any) => info.getValue() || "-", }, - { - header: "User", - accessorKey: "user_email", - cell: (info: any) => info.getValue() || "-", - }, + ...(topKeys.some((k) => k.user_email) + ? [ + { + header: "User", + accessorKey: "user_email", + cell: (info: any) => info.getValue() || "-", + }, + ] + : []), ]; const tagsColumn = { diff --git a/ui/litellm-dashboard/tests/top_key_view.test.tsx b/ui/litellm-dashboard/tests/top_key_view.test.tsx index a105bec50e2..073017d5cd5 100644 --- a/ui/litellm-dashboard/tests/top_key_view.test.tsx +++ b/ui/litellm-dashboard/tests/top_key_view.test.tsx @@ -197,7 +197,7 @@ describe("TopKeyView", () => { ]; renderWithProviders(); - expect(screen.getAllByText("-")).toHaveLength(2); + expect(screen.getAllByText("-")).toHaveLength(1); }); it("should handle keys with undefined tags", () => { @@ -212,7 +212,7 @@ describe("TopKeyView", () => { ]; renderWithProviders(); - expect(screen.getAllByText("-")).toHaveLength(2); + expect(screen.getAllByText("-")).toHaveLength(1); }); it("should handle keys with null tags", () => { @@ -227,7 +227,7 @@ describe("TopKeyView", () => { ]; renderWithProviders(); - expect(screen.getAllByText("-")).toHaveLength(2); + expect(screen.getAllByText("-")).toHaveLength(1); }); });