@apisurf/wireui 0.1.2

package/dist/server/_ssr/routes-DaV9vGHn.mjs

@@ -0,0 +1,375 @@
+import { Link, getRouteApi, require_jsx_runtime, useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
+import { Card, Dot, Empty, IconCheckCircle, IconXCircle, MethodBadge, Pill, Route$4, SectionTitle, Stat, StatGrid, StatusBadge, css, cx, formatAgo, formatBytes, formatCount, formatMs, getOverview, mono, pagePad, plural, runTone, runVerdict, scrollPane, tabKey, table, truncate, useNow, usePrefs, useTab, useUnreadable } from "./router-CPcgc_kh.mjs";
+import { useEnvScoped } from "./scoped-CnQ56K8h.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/routes-DaV9vGHn.js
+var import_jsx_runtime = require_jsx_runtime();
+var root = getRouteApi("__root__");
+function OverviewPage() {
+	useTab({
+		key: tabKey.overview(),
+		title: "Overview",
+		icon: "overview"
+	});
+	const unreadable = useUnreadable();
+	const ws = root.useLoaderData();
+	const now = useNow(ws.now);
+	const { prefs } = usePrefs();
+	const navigate = useNavigate();
+	const { data } = useEnvScoped(Route$4.useLoaderData(), (env) => getOverview({ data: { env } }));
+	if (unreadable) return unreadable;
+	const c = ws.counts;
+	if (!c) return null;
+	const envName = prefs.env === "*" ? null : prefs.env === "" ? "No environment" : prefs.env;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: scrollPane,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: pagePad,
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+					className: css({
+						fontSize: "18px",
+						fontWeight: "600",
+						m: "0"
+					}),
+					children: "Overview"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: cx(mono, css({
+						color: "muted",
+						m: "0",
+						mt: "0.5"
+					})),
+					children: ws.path
+				})] }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(WorkspaceStats, {
+					counts: c,
+					envCount: ws.envs.length,
+					fileBytes: ws.bytes
+				}),
+				envName ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+					className: css({
+						color: "muted",
+						m: "0",
+						mt: "-2"
+					}),
+					children: [
+						"Totals cover the whole file; the lists below are scoped to ",
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: envName }),
+						"."
+					]
+				}) : null,
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: css({
+						display: "grid",
+						gridTemplateColumns: {
+							base: "1fr",
+							xl: "3fr 2fr"
+						},
+						gap: "5"
+					}),
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionTitle, { children: "Recent runs" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: data.runs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, { title: "No runs in this environment" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", {
+						className: table,
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Collection" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Result" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Env" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+								className: "num",
+								children: "Requests"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+								className: "num",
+								children: "Wall"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+								className: "num",
+								children: "When"
+							})
+						] }) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: data.runs.map((run) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
+							"data-link": true,
+							onClick: () => void navigate({
+								to: "/runs/$runId",
+								params: { runId: String(run.id) }
+							}),
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+									className: css({ maxW: "260px" }),
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+										className: css({
+											display: "flex",
+											alignItems: "center",
+											gap: "2"
+										}),
+										children: [
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dot, { tone: runTone(run) }),
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+												className: cx(truncate, css({ fontWeight: "500" })),
+												title: run.rel,
+												children: run.file
+											}),
+											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+												className: cx(mono, css({ color: "faint" })),
+												children: ["#", run.id]
+											})
+										]
+									})
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+									className: css({
+										color: "muted",
+										whiteSpace: "nowrap"
+									}),
+									children: runVerdict(run)
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: run.env ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, { children: run.env }) : null }),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+									className: "num",
+									children: formatCount(run.request_count)
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+									className: cx("num", mono),
+									children: run.finished_at ? formatMs(run.finished_at - run.started_at) : "—"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+									className: cx("num", css({ color: "muted" })),
+									children: formatAgo(now, run.started_at)
+								})
+							]
+						}, run.id)) })]
+					}) })] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+						className: css({
+							display: "flex",
+							flexDir: "column",
+							gap: "5"
+						}),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionTitle, { children: "Failing checks" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: data.failedChecks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: css({
+								display: "flex",
+								gap: "2",
+								alignItems: "center",
+								p: "3",
+								color: "ok"
+							}),
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconCheckCircle, { size: 16 }), " No failed checks."]
+						}) : data.failedChecks.map((check) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+							to: "/runs/$runId",
+							params: { runId: String(check.run_id) },
+							search: { tab: "checks" },
+							className: css({
+								display: "flex",
+								gap: "2",
+								px: "3",
+								py: "2",
+								borderBottom: "1px solid",
+								borderColor: "line",
+								color: "fg",
+								textDecoration: "none",
+								_hover: { bg: "hover" },
+								_last: { borderBottom: "none" }
+							}),
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: css({
+									color: "bad",
+									pt: "1px"
+								}),
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconXCircle, { size: 15 })
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								className: css({
+									minW: "0",
+									flex: "1"
+								}),
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+										className: cx(truncate, css({
+											display: "block",
+											fontWeight: "500"
+										})),
+										children: check.name
+									}),
+									check.message ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+										className: cx(truncate, css({
+											display: "block",
+											color: "bad",
+											fontSize: "12px"
+										})),
+										children: check.message
+									}) : null,
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+										className: css({
+											display: "block",
+											color: "faint",
+											fontSize: "11px"
+										}),
+										children: [
+											check.file,
+											" · run #",
+											check.run_id,
+											" · ",
+											formatAgo(now, check.ts)
+										]
+									})
+								]
+							})]
+						}, check.id)) })] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionTitle, { children: "Failed requests" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: data.failedRequests.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: css({
+								display: "flex",
+								gap: "2",
+								alignItems: "center",
+								p: "3",
+								color: "ok"
+							}),
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconCheckCircle, { size: 16 }), " Every request succeeded."]
+						}) : data.failedRequests.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+							to: "/requests/$requestId",
+							params: { requestId: String(row.id) },
+							className: css({
+								display: "flex",
+								alignItems: "center",
+								gap: "2",
+								px: "3",
+								py: "1.5",
+								borderBottom: "1px solid",
+								borderColor: "line",
+								color: "fg",
+								textDecoration: "none",
+								_hover: { bg: "hover" },
+								_last: { borderBottom: "none" }
+							}),
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MethodBadge, {
+									method: row.method,
+									kind: row.kind,
+									width: "list"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: cx(truncate, mono, css({ flex: "1" })),
+									title: `${row.host}${row.path}`,
+									children: row.path
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: css({
+										color: "faint",
+										fontSize: "11px",
+										whiteSpace: "nowrap"
+									}),
+									children: formatAgo(now, row.ts)
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBadge, {
+									status: row.status,
+									error: row.error_name
+								})
+							]
+						}, row.id)) })] })]
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionTitle, { children: "Slowest endpoints" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: data.slowest.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, { title: "No HTTP requests yet" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", {
+					className: table,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Endpoint" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+							className: "num",
+							children: "Calls"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+							className: "num",
+							children: "Errors"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+							className: "num",
+							children: "Avg"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+							className: "num",
+							children: "Max"
+						})
+					] }) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: data.slowest.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
+						"data-link": true,
+						onClick: () => void navigate({
+							to: "/requests/$requestId",
+							params: { requestId: String(row.slowest_request_id) }
+						}),
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: css({
+									maxW: "0",
+									w: "full"
+								}),
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: css({
+										display: "flex",
+										alignItems: "center",
+										gap: "2",
+										minW: "0"
+									}),
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MethodBadge, {
+										method: row.method,
+										width: "list"
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+										className: cx(truncate, mono),
+										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+											className: css({ color: "faint" }),
+											children: row.host
+										}), row.path]
+									})]
+								})
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: "num",
+								children: formatCount(row.count)
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: cx("num", row.errors ? css({ color: "warn" }) : void 0),
+								children: formatCount(row.errors)
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: cx("num", mono),
+								children: formatMs(row.avg_ms)
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: cx("num", mono),
+								children: formatMs(row.max_ms)
+							})
+						]
+					}, `${row.method} ${row.host}${row.path}`)) })]
+				}) })] })
+			]
+		})
+	});
+}
+function WorkspaceStats({ counts: c, envCount, fileBytes }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StatGrid, { children: [
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
+			label: "Collections",
+			value: formatCount(c.scripts),
+			sub: "scripts recorded"
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
+			label: "Runs",
+			value: formatCount(c.runs),
+			sub: `${plural(envCount, "environment")}`
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
+			label: "Requests",
+			value: formatCount(c.requests),
+			sub: c.connections ? `+ ${plural(c.connections, "connection")} · ${plural(c.messages, "message")}` : "HTTP"
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
+			label: "Failed requests",
+			value: formatCount(c.failedRequests),
+			tone: c.failedRequests ? "warn" : void 0,
+			sub: "errors and ≥ 400"
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
+			label: "Checks",
+			value: c.checks ? `${formatCount(c.checks - c.failedChecks)}/${formatCount(c.checks)}` : "—",
+			tone: c.failedChecks ? "bad" : c.checks ? "ok" : void 0,
+			sub: c.failedChecks ? `${formatCount(c.failedChecks)} failed` : "passing"
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
+			label: "Stored payloads",
+			value: formatBytes(c.storedBodyBytes),
+			sub: `${formatCount(c.bodies)} unique · ${formatBytes(fileBytes)} on disk`
+		})
+	] });
+}
+//#endregion
+export { OverviewPage as component };