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