Skip to content
Sign in

flagon-io/g1t

public
0

g1t/apps/web/app/routes/workspace/usage.tsx

146 lines5,631 bytesCodeBlame
1import { Suspense } from "react";
2import { Await, Link, data } from "react-router";
3
4import { PRODUCTS, type UsageReport } from "@g1t/contracts";
5
6import type { Route } from "./+types/usage";
7import { Breakdown, IncludedAndCredit, UsageChart, UsageFilterBar, type UsageFilters, UsageSkeleton } from "../../components/usage";
8import { columns, defaultGrain, type Grain, type GroupBy, resolveRange } from "../../lib/usage";
9import { page } from "../../lib/meta";
10import { billing } from "../../lib/services.server";
11import { getViewer, roleIn } from "../../lib/session.server";
12
13/** Where the usage API is documented. */
14export const USAGE_API = "https://docs.g1t.sh/reference/api/#usage";
15
16export function meta({ params, ...args }: Route.MetaArgs) {
17 return page(args, { title: `Usage · ${params.owner} · g1t` });
18}
19
20/** The page's filters from its address: a filtered page is a link. */
21export function readFilters(url: URL, fixedProject?: string): UsageFilters {
22 const q = url.searchParams;
23 const { period, from, until } = resolveRange(q.get("period"), { from: q.get("from"), until: q.get("until") });
24 const known = new Set<string>(PRODUCTS.map((p) => p.key));
25 const grain = q.get("grain");
26 const group = q.get("group");
27 return {
28 period,
29 from,
30 until,
31 products: q.getAll("product").filter((p) => known.has(p)),
32 projects: fixedProject ? [fixedProject] : q.getAll("project").filter((p) => /^[a-z0-9._-]+\/[a-z0-9._-]+$/i.test(p)).map((p) => p.toLowerCase()),
33 group: group === "project" && !fixedProject ? "project" : group === "day" ? "day" : "product",
34 grain: grain === "day" || grain === "week" || grain === "month" ? grain : defaultGrain(from, until),
35 cumulative: q.get("cumulative") === "1",
36 };
37}
38
39/** The address with one filter changed. */
40export function hrefWith(url: string, change: Record<string, string | null>): string {
41 const next = new URL(url);
42 for (const [key, value] of Object.entries(change)) {
43 if (value == null) next.searchParams.delete(key);
44 else next.searchParams.set(key, value);
45 }
46 return `${next.pathname}?${next.searchParams.toString()}`;
47}
48
49export async function loader({ params, context, request }: Route.LoaderArgs) {
50 const viewer = getViewer(context);
51 const role = roleIn(viewer, params.owner);
52 if (!role) throw data(null, { status: 404 });
53 const slug = params.owner.toLowerCase();
54 const url = new URL(request.url);
55 const filters = readFilters(url);
56 // Streamed: the page's frame and filters come at once, each region's
57 // skeleton holds its place, and the report fills them in.
58 const report = billing
59 .usageReport(slug, viewer, { from: filters.from, until: filters.until, products: filters.products, projects: filters.projects })
60 .then((result) => (result.ok ? { report: result.value, error: null } : { report: null, error: result.error.message }));
61 return { slug, owner: role === "owner", filters, url: url.toString(), report };
62}
63
64export function UsageView({
65 slug,
66 owner,
67 filters,
68 url,
69 report,
70 error,
71 fixedProject,
72}: {
73 slug: string;
74 owner: boolean;
75 filters: UsageFilters;
76 url: string;
77 report: UsageReport | null;
78 error: string | null;
79 fixedProject?: string;
80}) {
81 const bar = (
82 <UsageFilterBar
83 filters={filters}
84 products={[...PRODUCTS]}
85 projects={report?.projects ?? filters.projects}
86 report={report}
87 apiHref={USAGE_API}
88 fixedProject={fixedProject}
89 />
90 );
91 if (!report) {
92 return (
93 <div className="space-y-6">
94 {bar}
95 <p className="rounded-lg border border-danger/40 bg-danger/5 px-4 py-2.5 text-sm">{error ?? "Usage could not be read. Try again in a minute."}</p>
96 </div>
97 );
98 }
99 const cols = columns(report.days, report.from, report.until, filters.grain as Grain, filters.cumulative);
100 return (
101 <div className="space-y-6">
102 {bar}
103 {!fixedProject && <IncludedAndCredit report={report} billingHref={`/${slug}/-/billing`} owner={owner} />}
104 <UsageChart
105 columns={cols}
106 products={report.products}
107 grain={filters.grain}
108 cumulative={filters.cumulative}
109 grainHref={(grain) => hrefWith(url, { grain })}
110 cumulativeHref={hrefWith(url, { cumulative: filters.cumulative ? null : "1" })}
111 />
112 <Breakdown report={report} group={filters.group as GroupBy} columns={cols} projectHref={fixedProject ? undefined : (project) => `/${project}/usage`} />
113 <p className="text-xs text-faint">
114 Every amount is usage at price: what was charged, plus what included usage, credit or a discount paid for it. Storage, git
115 operations, scans and search are metered through the month and charged when it closes.
116 {!fixedProject && (
117 <>
118 {" "}
119 Each request your own code sent through the AI Gateway is listed on{" "}
120 <Link to={`/${slug}/-/gateway`} className="hover:text-fg hover:underline">
121 AI Gateway
122 </Link>
123 .
124 </>
125 )}
126 </p>
127 </div>
128 );
129}
130
131export default function UsagePage({ loaderData }: Route.ComponentProps) {
132 const { slug, owner, filters, url, report } = loaderData;
133 return (
134 <Suspense
135 fallback={
136 <UsageSkeleton>
137 <UsageFilterBar filters={filters} products={[...PRODUCTS]} projects={filters.projects} report={null} apiHref={USAGE_API} />
138 </UsageSkeleton>
139 }
140 >
141 <Await resolve={report}>
142 {(loaded) => <UsageView slug={slug} owner={owner} filters={filters} url={url} report={loaded.report} error={loaded.error} />}
143 </Await>
144 </Suspense>
145 );
146}