diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json index 4a6d7006893..b1d9cf28503 100644 --- a/ui/litellm-dashboard/eslint-suppressions.json +++ b/ui/litellm-dashboard/eslint-suppressions.json @@ -2947,9 +2947,6 @@ "max-lines": { "count": 1 }, - "no-nested-ternary": { - "count": 1 - }, "react-hooks/set-state-in-effect": { "count": 1 } diff --git a/ui/litellm-dashboard/src/components/VirtualKeysPage/keyTableColumns.tsx b/ui/litellm-dashboard/src/components/VirtualKeysPage/keyTableColumns.tsx index fdbc07ee020..48eb4dd08d5 100644 --- a/ui/litellm-dashboard/src/components/VirtualKeysPage/keyTableColumns.tsx +++ b/ui/litellm-dashboard/src/components/VirtualKeysPage/keyTableColumns.tsx @@ -5,6 +5,7 @@ import { ColumnDef } from "@tanstack/react-table"; import { Popover, Typography } from "antd"; import { DataTableMultiSortHeader, DataTableSortHeader, type DataTableSortField } from "@/components/shared/DataTable"; +import { inheritedBudgetGates } from "@/components/shared/InheritedBudgetHint"; import { Skeleton } from "@/components/ui/skeleton"; import { DateCell, @@ -304,13 +305,14 @@ export const getKeyTableColumns = ({ size: 180, enableSorting: true, cell: ({ row }) => { - const teamId = row.original.team_id; - const team = allTeams.find((t) => t.team_id === teamId); + const team = allTeams.find((t) => t.team_id === row.original.team_id); + const orgId = row.original.organization_id || row.original.org_id || team?.organization_id; + const organization = organizations.find((o) => o.organization_id === orgId); return ( ); }, diff --git a/ui/litellm-dashboard/src/components/shared/InheritedBudgetHint.test.tsx b/ui/litellm-dashboard/src/components/shared/InheritedBudgetHint.test.tsx new file mode 100644 index 00000000000..657e859aef9 --- /dev/null +++ b/ui/litellm-dashboard/src/components/shared/InheritedBudgetHint.test.tsx @@ -0,0 +1,60 @@ +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { describe, expect, it } from "vitest"; + +import { InheritedBudgetHint, inheritedBudgetGates } from "./InheritedBudgetHint"; + +const team = { team_id: "team-1", team_alias: "Platform", max_budget: 1200, budget_duration: "30d" }; +const organization = { + organization_id: "org-1", + organization_alias: "Acme", + litellm_budget_table: { max_budget: 5000, budget_duration: null }, +}; + +describe("inheritedBudgetGates", () => { + it("returns team then org gates when both have budgets", () => { + expect(inheritedBudgetGates(team, organization)).toEqual([ + { scope: "Team", alias: "Platform", maxBudget: 1200, budgetDuration: "30d" }, + { scope: "Organization", alias: "Acme", maxBudget: 5000, budgetDuration: null }, + ]); + }); + + it("skips a team or org whose max_budget is null", () => { + expect(inheritedBudgetGates({ ...team, max_budget: null }, organization)).toEqual([ + { scope: "Organization", alias: "Acme", maxBudget: 5000, budgetDuration: null }, + ]); + expect(inheritedBudgetGates(team, { ...organization, litellm_budget_table: { max_budget: null } })).toEqual([ + { scope: "Team", alias: "Platform", maxBudget: 1200, budgetDuration: "30d" }, + ]); + }); + + it("returns nothing when team and org are missing or budgetless", () => { + expect(inheritedBudgetGates(null, undefined)).toEqual([]); + expect( + inheritedBudgetGates({ ...team, max_budget: null }, { ...organization, litellm_budget_table: null }), + ).toEqual([]); + }); + + it("falls back to ids when aliases are empty", () => { + expect( + inheritedBudgetGates({ ...team, team_alias: "" }, { ...organization, organization_alias: "" }).map( + (g) => g.alias, + ), + ).toEqual(["team-1", "org-1"]); + }); +}); + +describe("InheritedBudgetHint", () => { + it("renders nothing without gates", () => { + const { container } = render(); + expect(container).toBeEmptyDOMElement(); + }); + + it("shows each gate with its budget and duration on hover", async () => { + render(); + await userEvent.setup().hover(screen.getByLabelText("question-circle")); + expect(screen.getByTestId("inherited-budget-hint")).toHaveTextContent("Team Platform: $1,200.00 / 30d"); + expect(screen.getByTestId("inherited-budget-hint")).toHaveTextContent("Organization Acme: $5,000.00"); + expect(screen.getByTestId("inherited-budget-hint")).not.toHaveTextContent("Organization Acme: $5,000.00 /"); + }); +}); diff --git a/ui/litellm-dashboard/src/components/shared/InheritedBudgetHint.tsx b/ui/litellm-dashboard/src/components/shared/InheritedBudgetHint.tsx new file mode 100644 index 00000000000..6be1dad564f --- /dev/null +++ b/ui/litellm-dashboard/src/components/shared/InheritedBudgetHint.tsx @@ -0,0 +1,67 @@ +"use client"; + +import { Tooltip } from "@/components/atoms/Tooltip"; +import type { Team } from "@/components/key_team_helpers/key_list"; +import type { Organization } from "@/components/networking"; +import { formatNumberWithCommas } from "@/utils/dataUtils"; + +export interface InheritedBudgetGate { + scope: "Team" | "Organization"; + alias: string; + maxBudget: number; + budgetDuration: string | null; +} + +type TeamBudgetSource = Pick; +type OrganizationBudgetSource = Pick; + +const teamGate = (team: TeamBudgetSource | null | undefined): InheritedBudgetGate | null => + team && team.max_budget != null + ? { + scope: "Team", + alias: team.team_alias || team.team_id, + maxBudget: team.max_budget, + budgetDuration: team.budget_duration ?? null, + } + : null; + +const organizationGate = (organization: OrganizationBudgetSource | null | undefined): InheritedBudgetGate | null => { + const budgetTable: { max_budget?: number | null; budget_duration?: string | null } | null | undefined = + organization?.litellm_budget_table; + return organization && budgetTable?.max_budget != null + ? { + scope: "Organization", + alias: organization.organization_alias || organization.organization_id, + maxBudget: budgetTable.max_budget, + budgetDuration: budgetTable.budget_duration ?? null, + } + : null; +}; + +export const inheritedBudgetGates = ( + team: TeamBudgetSource | null | undefined, + organization: OrganizationBudgetSource | null | undefined, +): readonly InheritedBudgetGate[] => [teamGate(team), organizationGate(organization)].filter((gate) => gate !== null); + +const formatGate = (gate: InheritedBudgetGate): string => + `${gate.scope} ${gate.alias}: $${formatNumberWithCommas(gate.maxBudget, 2)}${gate.budgetDuration ? ` / ${gate.budgetDuration}` : ""}`; + +interface InheritedBudgetHintProps { + gates: readonly InheritedBudgetGate[]; +} + +export function InheritedBudgetHint({ gates }: InheritedBudgetHintProps) { + if (gates.length === 0) return null; + return ( + + This key has no budget of its own, but its spend still counts toward: + {gates.map((gate) => ( + {formatGate(gate)} + ))} + + } + /> + ); +} diff --git a/ui/litellm-dashboard/src/components/shared/table_cells/spend_budget_cell.test.tsx b/ui/litellm-dashboard/src/components/shared/table_cells/spend_budget_cell.test.tsx index d4af8428d69..0bc14849040 100644 --- a/ui/litellm-dashboard/src/components/shared/table_cells/spend_budget_cell.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/table_cells/spend_budget_cell.test.tsx @@ -53,9 +53,24 @@ describe("SpendBudgetCell", () => { expect(indicator(container)?.className).toContain("bg-destructive"); }); - it("falls back to the team budget and labels it", () => { - render(); - expect(screen.getByText("of $200 (Team)")).toBeInTheDocument(); - expect(screen.getByRole("meter")).toHaveAttribute("aria-valuemax", "200"); + it("never meters key spend against an inherited team/org budget", () => { + const gates = [{ scope: "Team" as const, alias: "Team A", maxBudget: 200, budgetDuration: "30d" }]; + render(); + expect(screen.getByText("· Unlimited")).toBeInTheDocument(); + expect(screen.queryByText(/\(Team\)/)).not.toBeInTheDocument(); + expect(screen.queryByRole("meter")).not.toBeInTheDocument(); + expect(screen.getByLabelText("question-circle")).toBeInTheDocument(); + }); + + it("shows no inherited-budget hint when there is nothing to inherit", () => { + render(); + expect(screen.queryByLabelText("question-circle")).not.toBeInTheDocument(); + }); + + it("shows no inherited-budget hint when the key has its own budget", () => { + const gates = [{ scope: "Team" as const, alias: "Team A", maxBudget: 200, budgetDuration: null }]; + render(); + expect(screen.getByText("of $50")).toBeInTheDocument(); + expect(screen.queryByLabelText("question-circle")).not.toBeInTheDocument(); }); }); diff --git a/ui/litellm-dashboard/src/components/shared/table_cells/spend_budget_cell.tsx b/ui/litellm-dashboard/src/components/shared/table_cells/spend_budget_cell.tsx index 60b42615967..943b9aa766c 100644 --- a/ui/litellm-dashboard/src/components/shared/table_cells/spend_budget_cell.tsx +++ b/ui/litellm-dashboard/src/components/shared/table_cells/spend_budget_cell.tsx @@ -1,12 +1,13 @@ "use client"; +import { InheritedBudgetHint, type InheritedBudgetGate } from "@/components/shared/InheritedBudgetHint"; import { Meter, MeterIndicator, MeterTrack } from "@/components/ui/meter"; import { formatNumberWithCommas, getSpendString } from "@/utils/dataUtils"; interface SpendBudgetCellProps { spend: number | null | undefined; maxBudget: number | null | undefined; - teamMaxBudget?: number | null; + inheritedGates?: readonly InheritedBudgetGate[]; spendDecimals?: number; budgetDecimals?: number; } @@ -20,27 +21,24 @@ const meterTone = (pct: number): "default" | "warning" | "over" => { export function SpendBudgetCell({ spend, maxBudget, - teamMaxBudget, + inheritedGates = [], spendDecimals = 4, budgetDecimals = 0, }: SpendBudgetCellProps) { const spendValue = typeof spend === "number" && !Number.isNaN(spend) ? spend : 0; - const budget = maxBudget ?? teamMaxBudget ?? null; - const isTeamBudget = maxBudget == null && teamMaxBudget != null; + const budget = maxBudget ?? null; const hasBudget = typeof budget === "number" && budget > 0; const pct = hasBudget ? (spendValue / budget) * 100 : 0; const spendText = spendValue > 0 ? getSpendString(spendValue, spendDecimals) : "$0.00"; - const budgetLabel = - budget === null - ? "· Unlimited" - : `of $${formatNumberWithCommas(budget, budgetDecimals)}${isTeamBudget ? " (Team)" : ""}`; + const budgetLabel = budget === null ? "· Unlimited" : `of $${formatNumberWithCommas(budget, budgetDecimals)}`; return (
{spendText}{" "} {budgetLabel} + {budget === null && }
{hasBudget && ( ({ useRouter: () => ({ push: vi.fn() }) })); -vi.mock("@/app/(dashboard)/hooks/organizations/useOrganizations", () => ({ - useOrganizations: () => ({ data: [] }), -})); - vi.mock("./key_edit_view", () => ({ KeyEditView: () =>
, })); vi.mock("@/app/(dashboard)/hooks/useTeams", () => ({ default: vi.fn() })); +vi.mock("@/app/(dashboard)/hooks/organizations/useOrganizations", () => ({ useOrganizations: vi.fn() })); vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({ default: vi.fn() })); vi.mock("@/app/(dashboard)/hooks/projects/useProjects", () => ({ useProjects: vi.fn().mockReturnValue({ data: [], isLoading: false }), @@ -130,10 +130,34 @@ const makeTeam = (overrides: Partial): Team => ({ ...overrides, }); +const makeOrganization = (overrides: Partial): Organization => + ({ + organization_id: "org-1", + organization_alias: "Acme Org", + budget_id: "budget-1", + metadata: {}, + models: [], + spend: 0, + model_spend: {}, + created_at: "2026-01-01T00:00:00Z", + created_by: "admin", + updated_at: "2026-01-01T00:00:00Z", + updated_by: "admin", + litellm_budget_table: { max_budget: null, budget_duration: null }, + teams: null, + users: null, + members: null, + ...overrides, + }) as Organization; + +const mockOrganizations = (organizations: Organization[]) => + vi.mocked(useOrganizations).mockReturnValue({ data: organizations } as ReturnType); + describe("KeyInfoView overview budget display (LIT-2845)", () => { beforeEach(() => { vi.mocked(useTeams).mockReturnValue({ teams: [], setTeams: vi.fn() }); vi.mocked(useAuthorized).mockReturnValue(baseAuthorized); + mockOrganizations([]); }); it("renders a sub-dollar max_budget ($0.10) with 2-decimal precision in the overview Spend card", async () => { @@ -188,7 +212,7 @@ describe("KeyInfoView overview budget display (LIT-2845)", () => { }); }); - it("renders team budget with alias and duration when key has no own budget but team has one", async () => { + it("never pairs key spend with the team budget: shows Unlimited plus an inherited-budget hint", async () => { vi.mocked(useTeams).mockReturnValue({ teams: [makeTeam({ team_id: "team-123", team_alias: "Test Budget", max_budget: 1200, budget_duration: "30d" })], setTeams: vi.fn(), @@ -203,15 +227,20 @@ describe("KeyInfoView overview budget display (LIT-2845)", () => { />, ); await waitFor(() => { - expect(screen.getByText(/of \$1,200\.00 \(Team: Test Budget \/ 30d\)/)).toBeInTheDocument(); + expect(screen.getByText(/of Unlimited/)).toBeInTheDocument(); }); + expect(screen.queryByText(/of \$1,200\.00/)).not.toBeInTheDocument(); + expect(screen.queryByText(/\(Team: Test Budget/)).not.toBeInTheDocument(); + await userEvent.setup().hover(screen.getByLabelText("question-circle")); + expect(screen.getByTestId("inherited-budget-hint")).toHaveTextContent("Team Test Budget: $1,200.00 / 30d"); }); - it("renders team budget without duration when team has no budget_duration", async () => { + it("lists the organization budget in the hint when the team's org has one", async () => { vi.mocked(useTeams).mockReturnValue({ - teams: [makeTeam({ team_id: "team-456", team_alias: "No Duration Team", max_budget: 500 })], + teams: [makeTeam({ team_id: "team-456", team_alias: "Org Team", organization_id: "org-1" })], setTeams: vi.fn(), }); + mockOrganizations([makeOrganization({ litellm_budget_table: { max_budget: 5000, budget_duration: null } })]); renderWithProviders( { />, ); await waitFor(() => { - expect(screen.getByText(/of \$500\.00 \(Team: No Duration Team\)/)).toBeInTheDocument(); + expect(screen.getByText(/of Unlimited/)).toBeInTheDocument(); }); + await userEvent.setup().hover(screen.getByLabelText("question-circle")); + expect(screen.getByTestId("inherited-budget-hint")).toHaveTextContent("Organization Acme Org: $5,000.00"); + expect(screen.getByTestId("inherited-budget-hint")).not.toHaveTextContent("Team Org Team"); }); - it("renders 'Unlimited' when key has no budget and team also has no budget", async () => { + it("renders 'Unlimited' with no hint when neither key, team, nor org has a budget", async () => { vi.mocked(useTeams).mockReturnValue({ teams: [makeTeam({ team_id: "team-789", team_alias: "Free Team" })], setTeams: vi.fn(), @@ -243,6 +275,27 @@ describe("KeyInfoView overview budget display (LIT-2845)", () => { await waitFor(() => { expect(screen.getByText(/of Unlimited/)).toBeInTheDocument(); }); + expect(screen.queryByLabelText("question-circle")).not.toBeInTheDocument(); + }); + + it("shows no hint when the key has its own budget even if the team has one", async () => { + vi.mocked(useTeams).mockReturnValue({ + teams: [makeTeam({ team_id: "team-123", team_alias: "Test Budget", max_budget: 1200 })], + setTeams: vi.fn(), + }); + renderWithProviders( + {}} + keyId={"test-key-id"} + onKeyDataUpdate={() => {}} + teams={[]} + />, + ); + await waitFor(() => { + expect(screen.getByText(/of \$25\.00/)).toBeInTheDocument(); + }); + expect(screen.queryByLabelText("question-circle")).not.toBeInTheDocument(); }); }); @@ -250,6 +303,7 @@ describe("KeyInfoView budget reset visibility", () => { beforeEach(() => { vi.mocked(useTeams).mockReturnValue({ teams: [], setTeams: vi.fn() }); vi.mocked(useAuthorized).mockReturnValue(baseAuthorized); + mockOrganizations([]); }); const KEY_WITH_RESET = { diff --git a/ui/litellm-dashboard/src/components/templates/key_info_view.tsx b/ui/litellm-dashboard/src/components/templates/key_info_view.tsx index 3ee11325a65..99981edb1c8 100644 --- a/ui/litellm-dashboard/src/components/templates/key_info_view.tsx +++ b/ui/litellm-dashboard/src/components/templates/key_info_view.tsx @@ -36,6 +36,7 @@ import { extractMcpEntitlement } from "../mcp_server_management/mcpEntitlement"; import ObjectPermissionsView from "../object_permissions_view"; import { RegenerateKeyModal } from "../organisms/RegenerateKeyModal"; import { parseErrorMessage } from "../shared/errorUtils"; +import { InheritedBudgetHint, inheritedBudgetGates } from "../shared/InheritedBudgetHint"; import { KeyEditView } from "./key_edit_view"; interface KeyInfoViewProps { @@ -460,12 +461,9 @@ export default function KeyInfoView({ const orgId = currentKeyData.organization_id || currentKeyData.org_id || parentTeam?.organization_id || ""; const parentOrg = orgId ? organizations?.find((org) => org.organization_id === orgId) : null; - const budgetDisplay = - currentKeyData.max_budget !== null - ? `$${formatNumberWithCommas(currentKeyData.max_budget, 2)}` - : parentTeam?.max_budget != null - ? `$${formatNumberWithCommas(parentTeam.max_budget, 2)} (Team: ${parentTeam.team_alias || parentTeam.team_id}${parentTeam.budget_duration ? ` / ${parentTeam.budget_duration}` : ""})` - : "Unlimited"; + const hasOwnBudget = currentKeyData.max_budget !== null; + const budgetDisplay = hasOwnBudget ? `$${formatNumberWithCommas(currentKeyData.max_budget, 2)}` : "Unlimited"; + const inheritedGates = hasOwnBudget ? [] : inheritedBudgetGates(parentTeam, parentOrg); return (
@@ -616,7 +614,10 @@ export default function KeyInfoView({

Spend

${formatNumberWithCommas(currentKeyData.spend, 4)}

-

of {budgetDisplay}

+

+ of {budgetDisplay} + +

{currentKeyData.budget_reset_at && (

Resets {formatTimestamp(currentKeyData.budget_reset_at)}

)}