@apisurf/wireui 0.1.2

package/dist/server/_ssr/query-D4so9xiY.mjs

@@ -0,0 +1,416 @@
+import { __toESM } from "../_runtime.mjs";
+import { require_jsx_runtime, require_react, useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
+import { Button, Callout, Empty, FilterInput, IconDatabase, IconPlay, Kbd, Pill, Route$2, css, cx, formatMs, mono, runSql, tabKey, table, truncate, useTab } from "./router-CPcgc_kh.mjs";
+import { Split } from "./split-DWrMIs7K.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/query-D4so9xiY.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+var EXAMPLES = [
+	{
+		label: "Slowest requests",
+		sql: "SELECT id, method, host, path, status, duration_ms\nFROM v_requests\nORDER BY duration_ms DESC\nLIMIT 20"
+	},
+	{
+		label: "Errors by host",
+		sql: "SELECT host, status, COUNT(*) AS n\nFROM v_requests\nWHERE status >= 400 OR error_name IS NOT NULL\nGROUP BY host, status\nORDER BY n DESC"
+	},
+	{
+		label: "Failed checks",
+		sql: "SELECT c.run_id, r.label, c.name, c.message\nFROM v_checks c JOIN v_runs r ON r.id = c.run_id\nWHERE c.status = 'fail'\nORDER BY c.ts DESC"
+	},
+	{
+		label: "Search payloads",
+		sql: "SELECT q.id, q.method, q.path, q.status\nFROM body_fts f\nJOIN v_requests q ON q.response_body_id = f.body_id\nWHERE body_fts MATCH 'error'\nLIMIT 50"
+	},
+	{
+		label: "Header usage",
+		sql: "SELECT name, COUNT(DISTINCT value) AS distinct_values, COUNT(*) AS n\nFROM v_headers\nWHERE kind = 'response'\nGROUP BY name\nORDER BY n DESC"
+	}
+];
+function QueryPage() {
+	useTab({
+		key: tabKey.query(),
+		title: "SQL",
+		icon: "query"
+	});
+	const schema = Route$2.useLoaderData();
+	const search = Route$2.useSearch();
+	const navigate = useNavigate({ from: Route$2.fullPath });
+	const [sql, setSql] = import_react.useState(search.sql ?? EXAMPLES[0].sql);
+	const [result, setResult] = import_react.useState(null);
+	const [running, setRunning] = import_react.useState(false);
+	const editor = import_react.useRef(null);
+	const run = import_react.useCallback(async (statement) => {
+		if (!statement.trim()) return;
+		setRunning(true);
+		try {
+			setResult(await runSql({ data: { sql: statement } }));
+		} catch (err) {
+			setResult({
+				ok: false,
+				error: err instanceof Error ? err.message : String(err)
+			});
+		} finally {
+			setRunning(false);
+		}
+		navigate({
+			search: { sql: statement },
+			replace: true
+		});
+	}, [navigate]);
+	const ranInitial = import_react.useRef(false);
+	import_react.useEffect(() => {
+		if (ranInitial.current || !search.sql) return;
+		ranInitial.current = true;
+		run(search.sql);
+	}, [search.sql, run]);
+	const insert = (text) => {
+		const el = editor.current;
+		if (!el) return setSql((s) => s + text);
+		const { selectionStart, selectionEnd } = el;
+		const next = sql.slice(0, selectionStart) + text + sql.slice(selectionEnd);
+		setSql(next);
+		window.requestAnimationFrame(() => {
+			el.focus();
+			el.setSelectionRange(selectionStart + text.length, selectionStart + text.length);
+		});
+	};
+	const editorPane = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			flexDir: "column",
+			h: "full",
+			minH: "0"
+		}),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: css({
+				display: "flex",
+				alignItems: "center",
+				gap: "2",
+				px: "3",
+				h: "40px",
+				flexShrink: 0,
+				borderBottom: "1px solid",
+				borderColor: "line"
+			}),
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+					onClick: () => void run(sql),
+					disabled: running,
+					className: css({
+						bg: "accent",
+						color: "accentFg",
+						borderColor: "accent",
+						_hover: {
+							bg: "accent",
+							opacity: .9
+						}
+					}),
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconPlay, { size: 12 }), "Run"]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "⌘ ↵" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+					"aria-label": "Example queries",
+					value: "",
+					onChange: (e) => {
+						const example = EXAMPLES.find((x) => x.label === e.target.value);
+						if (example) setSql(example.sql);
+					},
+					className: css({
+						h: "28px",
+						rounded: "md",
+						border: "1px solid",
+						borderColor: "line",
+						bg: "raised",
+						px: "1.5",
+						fontSize: "12px"
+					}),
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+						value: "",
+						children: "Examples…"
+					}), EXAMPLES.map((x) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+						value: x.label,
+						children: x.label
+					}, x.label))]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: css({
+						ml: "auto",
+						color: "faint",
+						fontSize: "12px"
+					}),
+					children: "Read-only connection"
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
+			ref: editor,
+			value: sql,
+			spellCheck: false,
+			onChange: (e) => setSql(e.target.value),
+			onKeyDown: (e) => {
+				if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+					e.preventDefault();
+					run(sql);
+				}
+			},
+			className: cx(mono, css({
+				flex: "1",
+				minH: "0",
+				resize: "none",
+				border: "none",
+				outline: "none",
+				p: "3",
+				bg: "well",
+				fontSize: "13px",
+				lineHeight: "1.6",
+				tabSize: 2
+			}))
+		})]
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			h: "full",
+			minH: "0"
+		}),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SchemaBrowser, {
+			schema,
+			onInsert: insert
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: css({
+				flex: "1",
+				minW: "0",
+				display: "flex",
+				borderLeft: "1px solid",
+				borderColor: "line"
+			}),
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Split, {
+				direction: "stacked",
+				storageKey: "query",
+				initial: .38,
+				first: editorPane,
+				second: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Results, {
+					result,
+					running
+				})
+			})
+		})]
+	});
+}
+function SchemaBrowser({ schema, onInsert }) {
+	const [filter, setFilter] = import_react.useState("");
+	const [open, setOpen] = import_react.useState("v_requests");
+	const needle = filter.trim().toLowerCase();
+	const visible = schema.filter((r) => !needle || r.name.includes(needle) || r.columns.some((c) => c.name.includes(needle)));
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			w: "260px",
+			flexShrink: 0,
+			display: "flex",
+			flexDir: "column",
+			minH: "0",
+			bg: "canvas"
+		}),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: css({
+				p: "2.5",
+				flexShrink: 0
+			}),
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterInput, {
+				placeholder: "Filter tables and columns",
+				value: filter,
+				onChange: (e) => setFilter(e.target.value)
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: css({
+				flex: "1",
+				minH: "0",
+				overflow: "auto",
+				px: "1.5",
+				pb: "3"
+			}),
+			children: visible.map((relation) => {
+				const expanded = open === relation.name || needle.length > 0;
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: () => setOpen(expanded && !needle ? null : relation.name),
+					onDoubleClick: () => onInsert(relation.name),
+					title: relation.description ?? relation.name,
+					className: css({
+						display: "flex",
+						alignItems: "center",
+						gap: "1.5",
+						w: "full",
+						h: "26px",
+						px: "1.5",
+						rounded: "sm",
+						border: "none",
+						bg: "transparent",
+						cursor: "pointer",
+						textAlign: "left",
+						_hover: { bg: "hover" }
+					}),
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: css({
+								color: relation.type === "view" ? "accent" : "faint",
+								display: "inline-flex"
+							}),
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconDatabase, { size: 13 })
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: cx(mono, truncate, css({ flex: "1" })),
+							children: relation.name
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, { children: relation.type })
+					]
+				}), expanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: css({
+						pl: "6",
+						pb: "1"
+					}),
+					children: [relation.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: css({
+							color: "faint",
+							fontSize: "11px",
+							pr: "2",
+							pb: "1"
+						}),
+						children: relation.description
+					}) : null, relation.columns.filter((c) => !needle || relation.name.includes(needle) || c.name.includes(needle)).map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+						type: "button",
+						onClick: () => onInsert(column.name),
+						title: `Insert ${column.name}`,
+						className: css({
+							display: "flex",
+							w: "full",
+							gap: "2",
+							h: "22px",
+							alignItems: "center",
+							px: "1.5",
+							border: "none",
+							bg: "transparent",
+							rounded: "sm",
+							cursor: "pointer",
+							textAlign: "left",
+							_hover: { bg: "hover" }
+						}),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: cx(mono, truncate, css({ flex: "1" })),
+							children: column.name
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: cx(mono, css({
+								color: "faint",
+								fontSize: "10.5px"
+							})),
+							children: column.type || "?"
+						})]
+					}, column.name))]
+				}) : null] }, relation.name);
+			})
+		})]
+	});
+}
+function Results({ result, running }) {
+	if (!result) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Empty, {
+		title: "Run a query",
+		icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconDatabase, { size: 22 }),
+		children: [
+			"Views (",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: mono,
+				children: "v_runs"
+			}),
+			", ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: mono,
+				children: "v_requests"
+			}),
+			",",
+			" ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: mono,
+				children: "v_headers"
+			}),
+			"…) join the interned ids back to strings. Click a column on the left to insert it."
+		]
+	});
+	if (!result.ok) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: css({ p: "3" }),
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Callout, {
+			tone: "bad",
+			title: "Query failed",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: mono,
+				children: result.error
+			})
+		})
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			flexDir: "column",
+			h: "full",
+			minH: "0",
+			opacity: running ? .6 : 1
+		}),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: css({
+				display: "flex",
+				gap: "3",
+				px: "3",
+				h: "32px",
+				alignItems: "center",
+				flexShrink: 0,
+				fontSize: "12px",
+				color: "muted",
+				borderBottom: "1px solid",
+				borderColor: "line"
+			}),
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+				result.rows.length.toLocaleString("en-US"),
+				" row",
+				result.rows.length === 1 ? "" : "s",
+				result.truncated ? " (first 1,000)" : ""
+			] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatMs(result.ms) })]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: css({
+				flex: "1",
+				minH: "0",
+				overflow: "auto"
+			}),
+			children: result.columns.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, { title: "No columns" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", {
+				className: cx(table, css({
+					w: "auto",
+					minW: "full",
+					"& td": {
+						fontFamily: "mono",
+						fontSize: "12px",
+						maxW: "420px"
+					}
+				})),
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: result.columns.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: c }, `${c}:${i}`)) }) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: result.rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: row.map((cell, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+					className: truncate,
+					title: cell == null ? "NULL" : String(cell),
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellValue, { value: cell })
+				}, j)) }, i)) })]
+			})
+		})]
+	});
+}
+function CellValue({ value }) {
+	if (value === null) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: css({
+			color: "faint",
+			fontStyle: "italic"
+		}),
+		children: "NULL"
+	});
+	if (typeof value === "number") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: css({ color: "synNumber" }),
+		children: value
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: value });
+}
+//#endregion
+export { QueryPage as component };