diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.test.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.test.tsx index 96d8d25407..2ace90e012 100644 --- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.test.tsx +++ b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.test.tsx @@ -265,7 +265,7 @@ describe("EntityUsage", () => { }); expect(await screen.findByText("Tag Spend Overview")).toBeInTheDocument(); - expect(await screen.findByText("$-")).toBeInTheDocument(); + expect(await screen.findByText("$0.00")).toBeInTheDocument(); expect(screen.getByText("Total Spend")).toBeInTheDocument(); expect(screen.getAllByText("0")[0]).toBeInTheDocument(); }); diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.tsx index 3179ce25f8..1725925fe7 100644 --- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.tsx +++ b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.tsx @@ -305,6 +305,20 @@ const EntityUsage: React.FC = ({ } }; + const getEntityLabel = (entity: string, metadata?: Record): string => { + if (entityList) { + const entityItem = entityList.find((item) => item.value === entity); + if (entityItem) { + return entityItem.label; + } + } + // Fallback to team_alias for backward compatibility + if (metadata?.team_alias) { + return metadata.team_alias; + } + return entity; + }; + const filterDataByTags = (data: EntityMetricWithMetadata[]) => { if (selectedTags.length === 0) return data; return data.filter((item) => selectedTags.includes(item.metadata.id)); @@ -328,7 +342,7 @@ const EntityUsage: React.FC = ({ cache_creation_input_tokens: 0, }, metadata: { - alias: (data.metadata as any).team_alias || entity, + alias: getEntityLabel(entity, data.metadata as any), id: entity, }, }; @@ -472,7 +486,7 @@ const EntityUsage: React.FC = ({ const metrics = entityData as EntityMetrics; return (

- {metrics.metadata.team_alias || entity}: $ + {getEntityLabel(entity, metrics.metadata)}: $ {formatNumberWithCommas(metrics.metrics.spend, 2)}

); diff --git a/ui/litellm-dashboard/src/utils/dataUtils.test.ts b/ui/litellm-dashboard/src/utils/dataUtils.test.ts index 24d9d7f1d8..14eba8a7ed 100644 --- a/ui/litellm-dashboard/src/utils/dataUtils.test.ts +++ b/ui/litellm-dashboard/src/utils/dataUtils.test.ts @@ -72,8 +72,8 @@ describe("dataUtils", () => { }); it("should handle zero and non-finite values", () => { - expect(formatNumberWithCommas(0)).toBe("-"); - expect(formatNumberWithCommas(0, 2)).toBe("-"); + expect(formatNumberWithCommas(0)).toBe("0"); + expect(formatNumberWithCommas(0, 2)).toBe("0.00"); expect(formatNumberWithCommas(Infinity)).toBe("-"); expect(formatNumberWithCommas(Number.NaN)).toBe("-"); }); @@ -83,6 +83,18 @@ describe("dataUtils", () => { expect(formatNumberWithCommas(12_345, 2, true)).toBe("12.35K"); expect(formatNumberWithCommas(-1_200, 2, true)).toBe("-1.20K"); }); + + it("should show zero when showZero is true", () => { + expect(formatNumberWithCommas(0, 0, false, true)).toBe("0"); + expect(formatNumberWithCommas(0, 2, false, true)).toBe("0.00"); + expect(formatNumberWithCommas(0, 0, true, true)).toBe("0"); + }); + + it("should return '-' for zero when showZero is false", () => { + expect(formatNumberWithCommas(0, 0, false, false)).toBe("-"); + expect(formatNumberWithCommas(0, 2, false, false)).toBe("-"); + expect(formatNumberWithCommas(0, 0, true, false)).toBe("-"); + }); }); describe("getSpendString", () => { diff --git a/ui/litellm-dashboard/src/utils/dataUtils.ts b/ui/litellm-dashboard/src/utils/dataUtils.ts index f58ad07444..0f8d11a178 100644 --- a/ui/litellm-dashboard/src/utils/dataUtils.ts +++ b/ui/litellm-dashboard/src/utils/dataUtils.ts @@ -16,8 +16,9 @@ export const formatNumberWithCommas = ( value: number | null | undefined, decimals: number = 0, abbreviate: boolean = false, + showZero: boolean = true, ): string => { - if (value === null || value === undefined || !Number.isFinite(value) || value === 0) { + if (value === null || value === undefined || !Number.isFinite(value) || (value === 0 && !showZero)) { return "-"; } @@ -51,7 +52,7 @@ export const getSpendString = (value: number | null | undefined, decimals: numbe return "-"; } - const formatted = formatNumberWithCommas(value, decimals); + const formatted = formatNumberWithCommas(value, decimals, false, false); const numericFormatted = Number(formatted.replace(/,/g, "")); if (numericFormatted === 0) {