milestone 30: overview as a dashboard, explicit health contract, period aggregations

admin/src/features/overview/StatTiles.tsx

@@ -0,0 +1,156 @@
+/**
+ * The window's four headline numbers, each with the way into the rows behind it.
+ *
+ * Neutral chrome throughout: no coloured accents, no per-tile tone. Emphasis is
+ * typographic, so the eye ranks the figures rather than the panels, and a tile
+ * never implies a state it is not reporting.
+ *
+ * The Activity links carry the bounds the **stats response** returned, not
+ * bounds computed here — a client-computed window would send the reader to a
+ * slightly different span than the one they were just reading.
+ */
+
+import * as stylex from "@stylexjs/stylex";
+import { Link } from "@tanstack/react-router";
+import { formatMicros } from "@/lib/format";
+import type { StatsTotals } from "@/lib/types";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const numberFormat = new Intl.NumberFormat();
+
+const styles = stylex.create({
+	/** Two columns on a phone, the whole set of four in one row from `md`. */
+	grid: {
+		display: "grid",
+		gap: "0.75rem",
+		gridTemplateColumns: {
+			default: "repeat(2, minmax(0, 1fr))",
+			"@media (min-width: 768px)": "repeat(4, minmax(0, 1fr))",
+		},
+	},
+	tile: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.125rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceRaised,
+		paddingInline: "1rem",
+		paddingBlock: "0.75rem",
+	},
+	label: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	valueRow: {
+		display: "flex",
+		alignItems: "baseline",
+		gap: "0.5rem",
+		flexWrap: "wrap",
+	},
+	value: {
+		fontSize: "1.875rem",
+		lineHeight: "2.25rem",
+		fontWeight: 600,
+	},
+	detail: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textSecondary,
+	},
+	footer: {
+		marginTop: "0.25rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+	},
+	link: {
+		color: colors.primaryOnSurface,
+		textDecorationLine: "none",
+	},
+});
+
+function percentOf(part: number, total: number): string | null {
+	if (total === 0) return null;
+	return `${((part / total) * 100).toFixed(1)}%`;
+}
+
+function Tile({
+	label,
+	value,
+	detail,
+	footer,
+}: {
+	label: string;
+	value: string;
+	detail?: string | null;
+	footer?: React.ReactNode;
+}) {
+	return (
+		<div {...stylex.props(styles.tile)}>
+			<dt {...stylex.props(styles.label)}>{label}</dt>
+			<dd {...stylex.props(styles.valueRow)}>
+				<span {...stylex.props(styles.value, shared.tabularNums)}>{value}</span>
+				{detail != null && <span {...stylex.props(styles.detail, shared.tabularNums)}>{detail}</span>}
+			</dd>
+			{footer !== undefined && <div {...stylex.props(styles.footer)}>{footer}</div>}
+		</div>
+	);
+}
+
+export default function StatTiles({ stats }: { stats: StatsTotals }) {
+	const window = {
+		mode: "history" as const,
+		since: stats.since,
+		until: stats.until,
+		domain: undefined,
+		client: undefined,
+	};
+	return (
+		<dl {...stylex.props(styles.grid)}>
+			<Tile
+				label="Queries"
+				value={numberFormat.format(stats.queries)}
+				footer={
+					<Link
+						to="/activity"
+						search={{ ...window, blocked: undefined }}
+						{...stylex.props(styles.link, shared.focusRing)}
+					>
+						Open in Activity
+					</Link>
+				}
+			/>
+			<Tile
+				label="Blocked"
+				value={numberFormat.format(stats.blocked)}
+				detail={percentOf(stats.blocked, stats.queries)}
+				footer={
+					<Link
+						to="/activity"
+						search={{ ...window, blocked: true }}
+						{...stylex.props(styles.link, shared.focusRing)}
+					>
+						Open blocked queries
+					</Link>
+				}
+			/>
+			<Tile
+				label="Clients"
+				value={numberFormat.format(stats.clients)}
+				footer={
+					<Link to="/clients" {...stylex.props(styles.link, shared.focusRing)}>
+						Manage clients
+					</Link>
+				}
+			/>
+			<Tile
+				label="Avg response"
+				value={stats.avg_response_time_us === null ? "—" : formatMicros(stats.avg_response_time_us)}
+			/>
+		</dl>
+	);
+}