rename web/ to admin/, along with the web-named build and cli identifiers

2026-08-16 00:17:58 +02:00
parent 5b3d1cd65c
commit 1e97c80f6b
136 changed files with 196 additions and 196 deletions
@@ -0,0 +1,156 @@
+import * as stylex from "@stylexjs/stylex";
+import type { UpstreamHealth } from "@/lib/types";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const styles = stylex.create({
+	card: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceRaised,
+	},
+	heading: {
+		display: "flex",
+		alignItems: "baseline",
+		justifyContent: "space-between",
+		paddingInline: "1rem",
+		paddingTop: "0.75rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 600,
+	},
+	count: {
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		fontWeight: 400,
+		color: colors.textMuted,
+	},
+	empty: {
+		paddingInline: "1rem",
+		paddingBlock: "0.75rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	tableWrap: {
+		overflowX: "auto",
+	},
+	table: {
+		marginTop: "0.5rem",
+		width: "100%",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	headRow: {
+		borderBottomWidth: 1,
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.border,
+		textAlign: "left",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
+	th: {
+		paddingInline: "1rem",
+		paddingBlock: "0.5rem",
+		fontWeight: 500,
+	},
+	thRight: {
+		textAlign: "right",
+	},
+	/** No hairline under the last row: the card border already closes the table. */
+	row: {
+		borderBottomWidth: { default: 1, ":last-child": 0 },
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.border,
+	},
+	cell: {
+		paddingInline: "1rem",
+		paddingBlock: "0.5rem",
+	},
+	cellRight: {
+		textAlign: "right",
+	},
+	small: {
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+	},
+	muted: {
+		color: colors.textMuted,
+	},
+	bad: {
+		color: colors.danger,
+	},
+});
+
+function YesNo({ value, badValue }: { value: boolean; badValue: boolean }) {
+	const bad = value === badValue;
+	return <span {...stylex.props(bad && styles.bad)}>{value ? "yes" : "no"}</span>;
+}
+
+export default function UpstreamHealthTable({ health }: { health: UpstreamHealth }) {
+	return (
+		<section {...stylex.props(styles.card)}>
+			<h2 {...stylex.props(styles.heading)}>
+				Upstreams
+				<span {...stylex.props(styles.count, shared.tabularNums)}>
+					{health.available}/{health.total} available
+				</span>
+			</h2>
+			{health.upstreams.length === 0 ? (
+				<p {...stylex.props(styles.empty)}>No upstreams configured.</p>
+			) : (
+				<div {...stylex.props(styles.tableWrap)}>
+					<table {...stylex.props(styles.table)}>
+						<thead>
+							<tr {...stylex.props(styles.headRow)}>
+								<th scope="col" {...stylex.props(styles.th)}>
+									URL
+								</th>
+								<th scope="col" {...stylex.props(styles.th)}>
+									Enabled
+								</th>
+								<th scope="col" {...stylex.props(styles.th)}>
+									Available
+								</th>
+								<th scope="col" {...stylex.props(styles.th, styles.thRight)}>
+									Failures
+								</th>
+								<th scope="col" {...stylex.props(styles.th, styles.thRight)}>
+									Success rate
+								</th>
+								<th scope="col" {...stylex.props(styles.th)}>
+									Last error
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							{health.upstreams.map((upstream) => (
+								<tr key={upstream.url} {...stylex.props(styles.row)}>
+									<td {...stylex.props(styles.cell, styles.small, shared.mono)}>{upstream.url}</td>
+									<td {...stylex.props(styles.cell)}>
+										<YesNo value={upstream.enabled} badValue={false} />
+									</td>
+									<td {...stylex.props(styles.cell)}>
+										<YesNo value={upstream.available} badValue={false} />
+									</td>
+									<td {...stylex.props(styles.cell, styles.cellRight, shared.tabularNums)}>
+										{upstream.total_failures}
+									</td>
+									<td {...stylex.props(styles.cell, styles.cellRight, shared.tabularNums)}>
+										{(upstream.success_rate * 100).toFixed(1)}%
+									</td>
+									<td {...stylex.props(styles.cell, styles.small, styles.muted)}>
+										{upstream.last_error || "—"}
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			)}
+		</section>
+	);
+}