apps/web/app/routes/repo/observability.tsx · flagon-io/g1t

about="What the project's running software does: its requests, errors and latency, by deployment. Apps on g1t.page report on their own; anything else sends OpenTelemetry."

43

/>

44

{!overview ? (

<Card className="p-6 text-sm text-muted">Observability could not be loaded just now. Reload the page to try again.</Card>

) : nothing ? (

) : (

)}

</div>

</div>

);

}

function Loaded({

overview,

errors,

base,

path,

view,

}: {

overview: TelemetryOverview;

67

errors: Route.ComponentProps["loaderData"]["errors"];

68

base: string;

69

path: string;

70

view: Route.ComponentProps["loaderData"]["view"];

71

}) {

72

const { totals, points } = overview;

73

// The period before is compared only when it had enough requests to say something.

74

const enough = overview.previous.requests >= Math.max(30, totals.requests * 0.05);

75

const previous = enough

76

? overview.previous

77

: { requests: null, errors: null, error_rate: null, latency: { p50: null, p75: null, p95: null, p99: null }, cpu: { p50: null, p75: null, p95: null, p99: null } };

78

const times = points.map((p) => p.time_us);

79

const anyCpu = totals.cpu.p50 !== null;

return (

<>

<StatTile

label={anyCpu ? "CPU time p50" : "Latency p99"}

89

value={duration(anyCpu ? totals.cpu.p50 : totals.latency.p99)}

90

now={anyCpu ? totals.cpu.p50 : totals.latency.p99}

91

before={anyCpu ? previous.cpu.p50 : previous.latency.p99}

lowerIsBetter

/>

</div>

<TimeChart

title="Requests"

kind="bars"

times={times}

stepS={overview.step_s}

102

format={count}

103

series={[

104

// Whatever did not fail as a 4xx or a 5xx (requests with no status, such as a cron, count here too).

105

{ key: "ok", label: "2xx and 3xx", color: SERIES.ok, values: points.map((p) => Math.max(0, p.requests - p.status_4xx - Math.max(p.status_5xx, p.errors))) },

106

{ key: "4xx", label: "4xx", color: SERIES.client, values: points.map((p) => p.status_4xx) },

107

{ key: "5xx", label: "5xx and failures", color: SERIES.server, values: points.map((p) => Math.max(p.status_5xx, p.errors)) },

]}

action={

Requests <ArrowRight size={12} className="inline" />

</Link>

}

/>

<TimeChart

title="Latency"

kind="lines"

times={times}

stepS={overview.step_s}

120

format={(n) => duration(n)}

121

series={[

122

{ key: "p50", label: "p50", color: SERIES.p50, values: points.map((p) => p.latency.p50) },

123

{ key: "p95", label: "p95", color: SERIES.p95, values: points.map((p) => p.latency.p95) },

124

{ key: "p99", label: "p99", color: SERIES.p99, values: points.map((p) => p.latency.p99) },

]}

/>

</div>

By deployment

</h2>

<span className="hidden text-xs text-faint sm:inline">Newest first: a change in the numbers starts with the deployment that brought it.</span>

137

</div>

138

{overview.deployments.length === 0 ? (

139

<p className="px-4 py-6 text-sm text-muted">No deployment on g1t.page served requests in this period.</p>

) : (

<TableHead>Deployment</TableHead>

145

<TableHead className="hidden sm:table-cell">Environment</TableHead>

146

<TableHead className="text-right">Requests</TableHead>

147

<TableHead className="text-right">Error rate</TableHead>

</TableRow>

</TableHeader>

{overview.deployments.map((d, i) => {

153

const rate = d.requests ? d.errors / d.requests : 0;

154

const before = overview.deployments[i + 1];

155

const worse = before && before.requests > 20 && d.requests > 20 && rate > (before.errors / before.requests) * 1.5 + 0.005;

return (

{d.commit_sha ? shortId(d.commit_sha, 7) : shortId(d.deployment_id, 12)}

</Link>

</span>

</TableCell>

<TableCell className="hidden text-muted sm:table-cell">{d.environment ?? "—"}</TableCell>

167

<TableCell className="text-right tabular-nums">{count(d.requests)}</TableCell>

168

<TableCell className={cn("text-right tabular-nums", worse && "text-danger")}>{percent(rate)}</TableCell>

169

<TableCell className="text-right whitespace-nowrap tabular-nums">{duration(d.latency.p95)}</TableCell>

</TableRow>

);

})}

</TableBody>

</Table>

)}

</section>

</Card>

Open errors

</h2>

All <ArrowRight size={12} className="inline" />

188

</Link>

189

</div>

190

{!errors || errors.length === 0 ? (

191

<p className="px-4 py-6 text-sm text-muted">No open errors in this period.</p>

) : (

{errors.map((e) => (

<p className="truncate text-sm text-muted">{e.message}</p>

199

</Link>

200

201

{count(e.count)} times · last <TimeAgo at={e.last_us / 1000} />

</p>

</li>

))}

</ul>

)}

</section>

</Card>

</div>

Routes

</h2>

<span className="hidden text-xs text-faint sm:inline">Paths with their ids taken out, busiest first</span>

218

</div>

219

{overview.routes.length === 0 ? (

220

<p className="px-4 py-6 text-sm text-muted">No requests in this period.</p>

) : (

<TableHead>Route</TableHead>

226

<TableHead className="text-right">Requests</TableHead>

227

<TableHead className="text-right">Error rate</TableHead>

</TableRow>

</TableHeader>

{overview.routes.slice(0, 15).map((r) => (

<Link

to={viewHref(`${path}/requests`, view, { route: r.route })}

239

className="flex min-w-0 items-center gap-2 font-mono text-xs hover:text-accent"

240

>

241

{r.method && <span className="shrink-0 text-faint">{r.method}</span>}

242

<span className="truncate">{r.route || "/"}</span>

243

</Link>

244

</TableCell>

245

<TableCell className="text-right tabular-nums">{count(r.requests)}</TableCell>

246

<TableCell className={cn("text-right tabular-nums", r.errors > 0 && "text-danger")}>{percent(r.requests ? r.errors / r.requests : 0)}</TableCell>

247

<TableCell className="hidden text-right whitespace-nowrap tabular-nums sm:table-cell">{duration(r.latency.p50)}</TableCell>

248

<TableCell className="text-right whitespace-nowrap tabular-nums">{duration(r.latency.p95)}</TableCell>

249

<TableCell className="hidden text-right whitespace-nowrap tabular-nums sm:table-cell">{duration(r.latency.p99)}</TableCell>

</TableRow>

))}

</TableBody>

</Table>

)}

</section>

</Card>

{(overview.services.length > 1 || overview.regions.length > 0) && (

259

260

{overview.services.length > 0 && (

Services

</h2>

{overview.services.map((s) => (

268

269

270

<span className="truncate font-mono text-xs">{s.service || "(unnamed)"}</span>

271

<Badge tone="neutral">{s.source === "cloudflare" ? "g1t.page" : "OTLP"}</Badge>

272

</Link>

273

274

{count(s.requests)} · {percent(s.requests ? s.errors / s.requests : 0)} failed

</span>

</li>

))}

</ul>

</section>

</Card>

)}

{overview.regions.length > 0 && (

Where requests were served

288

</h2>

289

290

{overview.regions.slice(0, 8).map((r) => {

291

const share = r.requests / Math.max(1, overview.regions.reduce((n, x) => n + x.requests, 0));

292

return (

293

294

<span className="font-mono">{r.region}</span>

</span>

<span className="text-right text-muted tabular-nums">{percent(share)}</span>

</li>

);

})}

</ul>

</section>

</Card>

)}

</div>

)}

Numbers are counted each minute; the newest minute fills in as its requests finish. <Link to={`${base}/observability/logs`} className="underline hover:text-fg">Logs</Link> and{" "}

310