13031292266

Committed 29 Jan 2025 12:27PM UTC coverage: 68.733% (+1.7%) from 67.071%

Build # 13031292266

Build Type

Pull #220

github

Committed by

web-flow

Commit Message

Merge 04fad425d into 25a531eba

Pull Request Pull Request #220: feat(muxes): model overrides matcher

Run Details

387 of 673 branches covered (57.5%)

Branch coverage included in aggregate %.

41 of 60 new or added lines in 8 files covered. (68.33%)

2 existing lines in 1 file now uncovered.

844 of 1118 relevant lines covered (75.49%)

63.88 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

23.81

/src/features/alerts/components/table-alert-token-usage.tsx

import { TokenUsage, TokenUsageAggregate } from "@/api/generated";
import { formatCurrency } from "@/lib/currency";
import { TextLinkButton, Tooltip, TooltipTrigger } from "@stacklok/ui-kit";
import { ArrowDown, ArrowUp } from "lucide-react";

function Icons({
  input_tokens = 0,
  output_tokens = 0,
}: {
  input_tokens: number | null;
  output_tokens: number | null;
}) {
  return (
    <div className="flex tabular-nums  gap-1 items-center">
      <div className="flex items-center">
        <ArrowUp className="size-4" />
        {input_tokens}
      </div>
      <div className="flex items-center">
        <ArrowDown className="size-4" />
        {output_tokens}
      </div>
    </div>
  );
}

function validateUsage(usage: TokenUsage | null): usage is {
  input_tokens: number;
  output_tokens: number;
  input_cost: number;
  output_cost: number;
} {
  return Boolean(
    typeof usage?.input_tokens !== "undefined" &&
      typeof usage.input_cost !== "undefined" &&
      typeof usage.output_tokens !== "undefined" &&
      typeof usage.output_cost !== "undefined",
  );
}

function UsageIcon({
  iconType: iconType,
  ...props
}: {
  iconType: "input" | "output";
  className?: string;
}) {
  switch (iconType) {
    case "input":
      return <ArrowUp {...props} />;
    case "output":
      return <ArrowDown {...props} />;
    default:
      iconType satisfies never;
  }
}

function UsageRow({
  cost,
  tokens,
  type,
}: {
  type: "input" | "output";
  tokens: number;
  cost: number;
}) {
  return (
    <li className="min-w-40 flex items-center border-b border-b-gray-800 py-1 my-1 list-none">
      <UsageIcon iconType={type} className="size-4 text-gray-50" />

      <div className="text-gray-50">{tokens}</div>

      <div className="ml-auto text-gray-25">
        {formatCurrency(cost, { currency: "USD" })}
      </div>
    </li>
  );
}

function UsageRows({
  input_cost,
  input_tokens,
  output_cost,
  output_tokens,
}: {
  input_tokens: number;
  output_tokens: number;
  input_cost: number;
  output_cost: number;
}) {
  return (
    <>
      <UsageRow type={"input"} tokens={input_tokens} cost={input_cost} />
      <UsageRow type={"output"} tokens={output_tokens} cost={output_cost} />
    </>
  );
}

function TokenUsageByProviders({ tokens_by_model }: TokenUsageAggregate) {
  return Object.values(tokens_by_model).map(
    ({ provider_type, token_usage: modelTokenUsage, model }) => {
      if (!validateUsage(modelTokenUsage)) return null;

      return (
        <div>
          <div>
            <b>Model:</b> {model}
          </div>
          <div>
            <b>Provider:</b> {provider_type}
          </div>
          <ul className="list-none mt-2">
            <UsageRows {...modelTokenUsage} />
          </ul>
        </div>
      );
    },
  );
}

export function TableAlertTokenUsage({
  usage,
}: {
  usage: TokenUsageAggregate | null;
}) {
  if (!usage) return "N/A";

  return (
    <TooltipTrigger delay={0}>
      <TextLinkButton className="text-secondary hover:text-primary">
        <Icons
          input_tokens={usage.token_usage.input_tokens ?? null}
          output_tokens={usage.token_usage.output_tokens ?? null}
        />
      </TextLinkButton>
      <Tooltip>
        <TokenUsageByProviders
          tokens_by_model={usage.tokens_by_model}
          token_usage={usage.token_usage}
        />
      </Tooltip>
    </TooltipTrigger>
  );
}

1	import { TokenUsage, TokenUsageAggregate } from "@/api/generated";
2	import { formatCurrency } from "@/lib/currency";
3	import { TextLinkButton, Tooltip, TooltipTrigger } from "@stacklok/ui-kit";
4	import { ArrowDown, ArrowUp } from "lucide-react";
5
6	function Icons({
7	input_tokens = 0,	×
8	output_tokens = 0,	×
9	}: {
10	input_tokens: number \| null;
11	output_tokens: number \| null;
12	}) {
13	return (
14	<div className="flex tabular-nums gap-1 items-center">
15	<div className="flex items-center">
16	<ArrowUp className="size-4" />
17	{input_tokens}
18	</div>
19	<div className="flex items-center">
20	<ArrowDown className="size-4" />
21	{output_tokens}
22	</div>
23	</div>
24	);
25	}
26
27	function validateUsage(usage: TokenUsage \| null): usage is {
28	input_tokens: number;
29	output_tokens: number;
30	input_cost: number;
31	output_cost: number;
32	} {
33	return Boolean(	×
34	typeof usage?.input_tokens !== "undefined" &&	×
35	typeof usage.input_cost !== "undefined" &&
36	typeof usage.output_tokens !== "undefined" &&
37	typeof usage.output_cost !== "undefined",
38	);
39	}
40
41	function UsageIcon({
42	iconType: iconType,
43	...props
44	}: {
45	iconType: "input" \| "output";
46	className?: string;
47	}) {
48	switch (iconType) {	×
49	case "input":
50	return <ArrowUp {...props} />;
51	case "output":
52	return <ArrowDown {...props} />;
53	default:
54	iconType satisfies never;	×
55	}
56	}
57
58	function UsageRow({
59	cost,
60	tokens,
61	type,
62	}: {
63	type: "input" \| "output";
64	tokens: number;
65	cost: number;
66	}) {
67	return (
68	<li className="min-w-40 flex items-center border-b border-b-gray-800 py-1 my-1 list-none">
69	<UsageIcon iconType={type} className="size-4 text-gray-50" />
70
71	<div className="text-gray-50">{tokens}</div>
72
73	<div className="ml-auto text-gray-25">
74	{formatCurrency(cost, { currency: "USD" })}
75	</div>
76	</li>
77	);
78	}
79
80	function UsageRows({
81	input_cost,
82	input_tokens,
83	output_cost,
84	output_tokens,
85	}: {
86	input_tokens: number;
87	output_tokens: number;
88	input_cost: number;
89	output_cost: number;
90	}) {
91	return (
92	<>
93	<UsageRow type={"input"} tokens={input_tokens} cost={input_cost} />
94	<UsageRow type={"output"} tokens={output_tokens} cost={output_cost} />
95	</>
96	);
97	}
98
99	function TokenUsageByProviders({ tokens_by_model }: TokenUsageAggregate) {
100	return Object.values(tokens_by_model).map(	×
101	({ provider_type, token_usage: modelTokenUsage, model }) => {
102	if (!validateUsage(modelTokenUsage)) return null;	×
103
104	return (
105	<div>
106	<div>
107	<b>Model:</b> {model}
108	</div>
109	<div>
110	<b>Provider:</b> {provider_type}
111	</div>
112	<ul className="list-none mt-2">
113	<UsageRows {...modelTokenUsage} />
114	</ul>
115	</div>
116	);
117	},
118	);
119	}
120
121	export function TableAlertTokenUsage({
122	usage,
123	}: {
124	usage: TokenUsageAggregate \| null;
125	}) {
126	if (!usage) return "N/A";	284✔
127
128	return (
129	<TooltipTrigger delay={0}>
130	<TextLinkButton className="text-secondary hover:text-primary">
131	<Icons
132	input_tokens={usage.token_usage.input_tokens ?? null}	1!
133	output_tokens={usage.token_usage.output_tokens ?? null}	1!
134	/>
135	</TextLinkButton>
136	<Tooltip>
137	<TokenUsageByProviders
138	tokens_by_model={usage.tokens_by_model}
139	token_usage={usage.token_usage}
140	/>
141	</Tooltip>
142	</TooltipTrigger>
143	);
144	}

stacklok / codegate-ui / 13031292266

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous