Skip to content
Sign up

flagon-io/g1t

public
00

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

gitagentscloudflarerustforgemcp
193 linesCodeBlameRaw
1import { FileText } from "lucide-react";
2import { Link } from "react-router";
3
4import type { Route } from "./+types/observability-requests";
5import { DurationBar, FilterBar, ObservabilityHeader, StatusBadge, useLoadingView } from "../../components/observability";
6import { ButtonLink, EmptyState } from "../../components/ui";
7import { Card } from "../../components/ui/card";
8import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table";
9import { cn } from "../../lib/cn";
10import { page } from "../../lib/meta";
11import { clock, duration, shortId, viewHref } from "../../lib/observability";
12import { observed, soft } from "../../lib/observability.server";
13import { Unavailable } from "../../components/boundary";
14
15const STATUSES = ["2xx", "3xx", "4xx", "5xx"] as const;
16
17export function meta({ params, ...args }: Route.MetaArgs) {
18 return page(args, { title: `Requests · ${params.owner}/${params.repo} · g1t` });
19}
20
21export async function loader({ params, context, request }: Route.LoaderArgs) {
22 const { projectId, service, view, filter } = await observed(context, params, request);
23 const search = new URL(request.url).searchParams;
24 const status = search.getAll("status").filter((s) => (STATUSES as readonly string[]).includes(s));
25 const errorsOnly = search.get("errors") === "1";
26 const route = search.get("route");
27 const cursor = search.get("cursor");
28 const [list, facets] = await Promise.all([
29 soft(service.requests({ project_id: projectId, ...filter, text: view.q || null, status, errors_only: errorsOnly, route, cursor, limit: 100 }), "requests"),
30 soft(service.facets({ project_id: projectId }), "facets"),
31 ]);
32 return { view, list, facets, status, errorsOnly, route, cursor };
33}
34
35export default function Requests({ loaderData, params }: Route.ComponentProps) {
36 const { view, list, facets, status, errorsOnly, route, cursor } = loaderData;
37 const base = `/${params.owner}/${params.repo}/observability`;
38 const path = `${base}/requests`;
39 const loading = useLoadingView();
40 const extra = { route, errors: errorsOnly ? "1" : null };
41 const href = (change: Record<string, string | null>) => {
42 const url = viewHref(path, view, { ...extra, ...change });
43 return change.status === undefined && status.length ? `${url}${url.includes("?") ? "&" : "?"}${status.map((s) => `status=${s}`).join("&")}` : url;
44 };
45 const max = Math.max(1, ...(list?.items.map((r) => r.duration_us / 1000) ?? []));
46
47 return (
48 <div className="mx-auto max-w-6xl">
49 <ObservabilityHeader
50 title="Requests"
51 about="Each request the project's software answered, newest first, with what it wrote under it. Search the address or the error."
52 />
53 <FilterBar
54 path={path}
55 view={view}
56 environments={facets?.environments ?? []}
57 services={facets?.services ?? []}
58 search={{
59 placeholder: "Search: /checkout status:502 region:AMS deployment_id:…",
60 hint: "Search the address and the error, or narrow by a field: status:502, method:POST, region:AMS",
61 }}
62 >
63 <nav className="flex rounded-md border border-line p-0.5 text-sm" aria-label="Status">
64 {STATUSES.map((s) => {
65 const on = status.includes(s);
66 const next = on ? status.filter((x) => x !== s) : [...status, s];
67 const url = viewHref(path, view, extra);
68 return (
69 <Link
70 key={s}
71 to={`${url}${next.length ? `${url.includes("?") ? "&" : "?"}${next.map((x) => `status=${x}`).join("&")}` : ""}`}
72 preventScrollReset
73 aria-pressed={on}
74 className={cn("rounded px-2 py-0.5 font-mono text-xs", on ? "bg-raised text-fg" : "text-muted hover:text-fg")}
75 >
76 {s}
77 </Link>
78 );
79 })}
80 </nav>
81 <Link
82 to={href({ errors: errorsOnly ? null : "1" })}
83 preventScrollReset
84 aria-pressed={errorsOnly}
85 className={cn(
86 "inline-flex h-8 items-center rounded-md border px-2.5 text-xs",
87 errorsOnly ? "border-danger/40 bg-danger/10 text-danger" : "border-line text-muted hover:text-fg",
88 )}
89 >
90 Failed only
91 </Link>
92 </FilterBar>
93 {route && (
94 <p className="mt-3 text-sm text-muted">
95 Route <code className="font-mono text-fg">{route}</code>{" "}
96 <Link to={href({ route: null })} className="text-accent hover:underline">
97 Show every route
98 </Link>
99 </p>
100 )}
101
102 <div className={cn("mt-4 transition-opacity", loading && "opacity-60")}>
103 {!list ? (
104 <Unavailable what="Requests" />
105 ) : list.items.length === 0 ? (
106 <EmptyState title={cursor ? "No older requests" : "No requests match"}>
107 Requests of apps on g1t.page arrive within seconds of being answered; others arrive with their server spans.
108 </EmptyState>
109 ) : (
110 <Card className="min-w-0 overflow-hidden">
111 <Table frameProps={{ className: "rounded-none border-0" }}>
112 <TableHeader>
113 <TableRow>
114 <TableHead className="w-36">Time (UTC)</TableHead>
115 <TableHead className="w-16">Status</TableHead>
116 <TableHead>Request</TableHead>
117 <TableHead className="w-40">Duration</TableHead>
118 <TableHead className="w-20 text-right">CPU</TableHead>
119 <TableHead className="w-16">Region</TableHead>
120 <TableHead className="w-24">Deployment</TableHead>
121 </TableRow>
122 </TableHeader>
123 <TableBody>
124 {list.items.map((r) => {
125 const ms = r.duration_us / 1000;
126 const failed = r.error !== null || (r.status ?? 0) >= 500;
127 return (
128 <TableRow key={r.id} className="group">
129 <TableCell className="font-mono text-xs text-muted tabular-nums">{clock(r.time_us)}</TableCell>
130 <TableCell>
131 <StatusBadge status={r.status} outcome={r.outcome} />
132 </TableCell>
133 <TableCell className="max-w-0">
134 <Link to={`${base}/requests/${r.id}`} className="flex min-w-0 items-center gap-2 font-mono text-xs group-hover:text-accent">
135 <span className="w-12 shrink-0 text-faint">{r.method ?? r.trigger}</span>
136 <span className="truncate">{r.url ?? r.route ?? r.trigger}</span>
137 {r.log_count > 0 && (
138 <span className="ml-auto flex shrink-0 items-center gap-0.5 text-faint" aria-label={`${r.log_count} log lines`}>
139 <FileText size={11} />
140 {r.log_count}
141 </span>
142 )}
143 </Link>
144 {r.error && (
145 <p className="mt-0.5 truncate text-xs text-danger">
146 {r.error.name}: {r.error.message}
147 </p>
148 )}
149 </TableCell>
150 <TableCell>
151 <div className="flex items-center gap-2">
152 <span className="w-14 shrink-0 text-right font-mono text-xs tabular-nums">{duration(ms)}</span>
153 <DurationBar ms={ms} max={max} failed={failed} />
154 </div>
155 </TableCell>
156 <TableCell className="text-right font-mono text-xs text-muted tabular-nums">{r.cpu_ms === null ? "—" : duration(r.cpu_ms)}</TableCell>
157 <TableCell className="font-mono text-xs text-muted">{r.region ?? "—"}</TableCell>
158 <TableCell className="max-w-24 truncate font-mono text-xs whitespace-nowrap text-muted">
159 {r.deployment_id ? (
160 <Link to={href({ deployment: r.deployment_id })} className="hover:text-fg">
161 {r.commit_sha ? shortId(r.commit_sha, 7) : shortId(r.deployment_id, 10)}
162 </Link>
163 ) : (
164 r.service || "—"
165 )}
166 </TableCell>
167 </TableRow>
168 );
169 })}
170 </TableBody>
171 </Table>
172 </Card>
173 )}
174 {(list?.next || cursor) && (
175 <div className="mt-4 flex justify-between">
176 {cursor ? (
177 <ButtonLink to={href({ cursor: null })} variant="outline" size="sm">
178 Newest
179 </ButtonLink>
180 ) : (
181 <span />
182 )}
183 {list?.next && (
184 <ButtonLink to={href({ cursor: list.next })} variant="outline" size="sm">
185 Older
186 </ButtonLink>
187 )}
188 </div>
189 )}
190 </div>
191 </div>
192 );
193}