From 897ecffea0391d444053f7819a98d8fc3b8d9736 Mon Sep 17 00:00:00 2001 From: alex-mcgovern Date: Fri, 31 Jan 2025 09:01:46 +0000 Subject: [PATCH 1/2] feat: format token usage with "compact" notation --- src/features/alerts/components/alerts-summary.tsx | 3 ++- src/features/alerts/components/table-alert-token-usage.tsx | 5 +++-- src/features/alerts/components/token-usage-by-providers.tsx | 3 ++- src/lib/format-number.ts | 5 +++++ 4 files changed, 12 insertions(+), 4 deletions(-) create mode 100644 src/lib/format-number.ts diff --git a/src/features/alerts/components/alerts-summary.tsx b/src/features/alerts/components/alerts-summary.tsx index 0df05ab7..6e5d953f 100644 --- a/src/features/alerts/components/alerts-summary.tsx +++ b/src/features/alerts/components/alerts-summary.tsx @@ -1,3 +1,4 @@ +import { formatNumberCompact } from "@/lib/format-number"; import { Card, CardBody, Heading, Skeleton } from "@stacklok/ui-kit"; import { ComponentProps } from "react"; @@ -13,7 +14,7 @@ function AlertsSummaryStatistic({ return (
- {count} + {formatNumberCompact(count)}
); } diff --git a/src/features/alerts/components/table-alert-token-usage.tsx b/src/features/alerts/components/table-alert-token-usage.tsx index 13ceef7c..b13ae3bb 100644 --- a/src/features/alerts/components/table-alert-token-usage.tsx +++ b/src/features/alerts/components/table-alert-token-usage.tsx @@ -2,6 +2,7 @@ import { TokenUsageAggregate } from "@/api/generated"; import { TextLinkButton, Tooltip, TooltipTrigger } from "@stacklok/ui-kit"; import { Download01, Upload01 } from "@untitled-ui/icons-react"; import { TokenUsageByProviders } from "./token-usage-by-providers"; +import { formatNumberCompact } from "@/lib/format-number"; function Icons({ input_tokens = 0, @@ -14,11 +15,11 @@ function Icons({
- {input_tokens} + {formatNumberCompact(input_tokens ?? 0)}
- {output_tokens} + {formatNumberCompact(output_tokens ?? 0)}
); diff --git a/src/features/alerts/components/token-usage-by-providers.tsx b/src/features/alerts/components/token-usage-by-providers.tsx index 616ac598..8c291c80 100644 --- a/src/features/alerts/components/token-usage-by-providers.tsx +++ b/src/features/alerts/components/token-usage-by-providers.tsx @@ -1,5 +1,6 @@ import { TokenUsage, TokenUsageAggregate } from "@/api/generated"; import { formatCurrency } from "@/lib/currency"; +import { formatNumberCompact } from "@/lib/format-number"; import { ArrowDown, ArrowUp } from "@untitled-ui/icons-react"; @@ -47,7 +48,7 @@ function UsageRow({
  • -
    {tokens}
    +
    {formatNumberCompact(tokens)}
    {formatCurrency(cost, { currency: "USD" })} diff --git a/src/lib/format-number.ts b/src/lib/format-number.ts new file mode 100644 index 00000000..7f88ae50 --- /dev/null +++ b/src/lib/format-number.ts @@ -0,0 +1,5 @@ +export const formatNumberCompact = (value: number) => { + return Intl.NumberFormat("en-US", { + notation: "compact", + }).format(value); +}; From d1f6cd8af8f065b4cdbef103b041eedaee9b5042 Mon Sep 17 00:00:00 2001 From: alex-mcgovern Date: Fri, 31 Jan 2025 09:08:14 +0000 Subject: [PATCH 2/2] chore: fix tests --- .../alerts-summary-workspace-token-usage.test.tsx | 5 +++-- .../components/__tests__/table-alerts.test.tsx | 13 ++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/features/alerts/components/__tests__/alerts-summary-workspace-token-usage.test.tsx b/src/features/alerts/components/__tests__/alerts-summary-workspace-token-usage.test.tsx index f633504a..56466a27 100644 --- a/src/features/alerts/components/__tests__/alerts-summary-workspace-token-usage.test.tsx +++ b/src/features/alerts/components/__tests__/alerts-summary-workspace-token-usage.test.tsx @@ -5,6 +5,7 @@ import { render, waitFor } from "@/lib/test-utils"; import { AlertsSummaryWorkspaceTokenUsage } from "../alerts-summary-workspace-token-usage"; import { TOKEN_USAGE_AGG } from "../../mocks/token-usage.mock"; +import { formatNumberCompact } from "@/lib/format-number"; test("shows correct count when there is token usage", async () => { server.use( @@ -17,10 +18,10 @@ test("shows correct count when there is token usage", async () => { await waitFor(() => { expect(getByTestId("usage-input-tokens")).toHaveTextContent( - TOKEN_USAGE_AGG.token_usage.input_tokens.toString(), + formatNumberCompact(TOKEN_USAGE_AGG.token_usage.input_tokens), ); expect(getByTestId("usage-output-tokens")).toHaveTextContent( - TOKEN_USAGE_AGG.token_usage.output_tokens.toString(), + formatNumberCompact(TOKEN_USAGE_AGG.token_usage.output_tokens), ); }); }); diff --git a/src/features/alerts/components/__tests__/table-alerts.test.tsx b/src/features/alerts/components/__tests__/table-alerts.test.tsx index d0c29852..ccfc0221 100644 --- a/src/features/alerts/components/__tests__/table-alerts.test.tsx +++ b/src/features/alerts/components/__tests__/table-alerts.test.tsx @@ -5,6 +5,7 @@ import { server } from "@/mocks/msw/node"; import { http, HttpResponse } from "msw"; import { makeMockAlert } from "../../mocks/alert.mock"; import { TOKEN_USAGE_AGG } from "../../mocks/token-usage.mock"; +import { formatNumberCompact } from "@/lib/format-number"; vi.mock("@untitled-ui/icons-react", async () => { const original = await vi.importActual< @@ -18,14 +19,12 @@ vi.mock("@untitled-ui/icons-react", async () => { }); const INPUT_TOKENS = - TOKEN_USAGE_AGG.tokens_by_model[ - "claude-3-5-sonnet-latest" - ].token_usage.input_tokens.toString(); + TOKEN_USAGE_AGG.tokens_by_model["claude-3-5-sonnet-latest"].token_usage + .input_tokens; const OUTPUT_TOKENS = - TOKEN_USAGE_AGG.tokens_by_model[ - "claude-3-5-sonnet-latest" - ].token_usage.output_tokens.toString(); + TOKEN_USAGE_AGG.tokens_by_model["claude-3-5-sonnet-latest"].token_usage + .output_tokens; test("renders token usage cell correctly", async () => { server.use( @@ -53,7 +52,7 @@ test("renders token usage cell correctly", async () => { expect( getByRole("gridcell", { - name: `${INPUT_TOKENS} ${OUTPUT_TOKENS}`, + name: `${formatNumberCompact(INPUT_TOKENS)} ${formatNumberCompact(OUTPUT_TOKENS)}`, }), ).toBeVisible(); });