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
183 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={{ placeholder: "Search: /checkout status:502 region:AMS deployment_id:…", hint: "Search the address and the error, or narrow by a field: status:502, method:POST, region:AMS" }}
59 >
60 <nav className="flex rounded-md border border-line p-0.5 text-sm" aria-label="Status">
61 {STATUSES.map((s) => {
62 const on = status.includes(s);
63 const next = on ? status.filter((x) => x !== s) : [...status, s];
64 const url = viewHref(path, view, extra);
65 return (
66 <Link
67 key={s}
68 to={`${url}${next.length ? `${url.includes("?") ? "&" : "?"}${next.map((x) => `status=${x}`).join("&")}` : ""}`}
69 preventScrollReset
70 aria-pressed={on}
71 className={cn("rounded px-2 py-0.5 font-mono text-xs", on ? "bg-raised text-fg" : "text-muted hover:text-fg")}
72 >
73 {s}
74 </Link>
75 );
76 })}
77 </nav>
78 <Link
79 to={href({ errors: errorsOnly ? null : "1" })}
80 preventScrollReset
81 aria-pressed={errorsOnly}
82 className={cn("inline-flex h-8 items-center rounded-md border px-2.5 text-xs", errorsOnly ? "border-danger/40 bg-danger/10 text-danger" : "border-line text-muted hover:text-fg")}
83 >
84 Failed only
85 </Link>
86 </FilterBar>
87 {route && (
88 <p className="mt-3 text-sm text-muted">
89 Route <code className="font-mono text-fg">{route}</code>{" "}
90 <Link to={href({ route: null })} className="text-accent hover:underline">
91 Show every route
92 </Link>
93 </p>
94 )}
95
96 <div className={cn("mt-4 transition-opacity", loading && "opacity-60")}>
97 {!list ? (
98 <Unavailable what="Requests" />
99 ) : list.items.length === 0 ? (
100 <EmptyState title={cursor ? "No older requests" : "No requests match"}>
101 Requests of apps on g1t.page arrive within seconds of being answered; others arrive with their server spans.
102 </EmptyState>
103 ) : (
104 <Card className="min-w-0 overflow-hidden">
105 <Table frameProps={{ className: "rounded-none border-0" }}>
106 <TableHeader>
107 <TableRow>
108 <TableHead className="w-36">Time (UTC)</TableHead>
109 <TableHead className="w-16">Status</TableHead>
110 <TableHead>Request</TableHead>
111 <TableHead className="w-40">Duration</TableHead>
112 <TableHead className="w-20 text-right">CPU</TableHead>
113 <TableHead className="w-16">Region</TableHead>
114 <TableHead className="w-24">Deployment</TableHead>
115 </TableRow>
116 </TableHeader>
117 <TableBody>
118 {list.items.map((r) => {
119 const ms = r.duration_us / 1000;
120 const failed = r.error !== null || (r.status ?? 0) >= 500;
121 return (
122 <TableRow key={r.id} className="group">
123 <TableCell className="font-mono text-xs text-muted tabular-nums">{clock(r.time_us)}</TableCell>
124 <TableCell>
125 <StatusBadge status={r.status} outcome={r.outcome} />
126 </TableCell>
127 <TableCell className="max-w-0">
128 <Link to={`${base}/requests/${r.id}`} className="flex min-w-0 items-center gap-2 font-mono text-xs group-hover:text-accent">
129 <span className="w-12 shrink-0 text-faint">{r.method ?? r.trigger}</span>
130 <span className="truncate">{r.url ?? r.route ?? r.trigger}</span>
131 {r.log_count > 0 && (
132 <span className="ml-auto flex shrink-0 items-center gap-0.5 text-faint" aria-label={`${r.log_count} log lines`}>
133 <FileText size={11} />
134 {r.log_count}
135 </span>
136 )}
137 </Link>
138 {r.error && <p className="mt-0.5 truncate text-xs text-danger">{r.error.name}: {r.error.message}</p>}
139 </TableCell>
140 <TableCell>
141 <div className="flex items-center gap-2">
142 <span className="w-14 shrink-0 text-right font-mono text-xs tabular-nums">{duration(ms)}</span>
143 <DurationBar ms={ms} max={max} failed={failed} />
144 </div>
145 </TableCell>
146 <TableCell className="text-right font-mono text-xs text-muted tabular-nums">{r.cpu_ms === null ? "—" : duration(r.cpu_ms)}</TableCell>
147 <TableCell className="font-mono text-xs text-muted">{r.region ?? "—"}</TableCell>
148 <TableCell className="max-w-24 truncate font-mono text-xs whitespace-nowrap text-muted">
149 {r.deployment_id ? (
150 <Link to={href({ deployment: r.deployment_id })} className="hover:text-fg">
151 {r.commit_sha ? shortId(r.commit_sha, 7) : shortId(r.deployment_id, 10)}
152 </Link>
153 ) : (
154 r.service || "—"
155 )}
156 </TableCell>
157 </TableRow>
158 );
159 })}
160 </TableBody>
161 </Table>
162 </Card>
163 )}
164 {(list?.next || cursor) && (
165 <div className="mt-4 flex justify-between">
166 {cursor ? (
167 <ButtonLink to={href({ cursor: null })} variant="outline" size="sm">
168 Newest
169 </ButtonLink>
170 ) : (
171 <span />
172 )}
173 {list?.next && (
174 <ButtonLink to={href({ cursor: list.next })} variant="outline" size="sm">
175 Older
176 </ButtonLink>
177 )}
178 </div>
179 )}
180 </div>
181 </div>
182 );
183}