feat: Monitor grath zoom

2026-08-24 10:58:50 +00:00
parent 2fab784ba7
commit 22b99ff895
11 changed files with 395 additions and 14 deletions
@@ -10,6 +10,7 @@ import {
    Slot,
    StatusChip,
    avgLatency,
+    buildSampleSlots,
    buildSlots,
    displayStatus,
    formatDuration,
@@ -31,6 +32,63 @@ import {
 const CHART_W = 480;
 const CHART_H = 158;

+/*
+ * The ranges. 24h and 48h are drawn from the hourly rollups, which are the
+ * permanent record; anything shorter than an hour cannot be, so the three
+ * short ranges read individual check results instead. Those expire after 48
+ * hours, which is why no range longer than that is offered from samples.
+ *
+ * Bucket sizes are chosen to land near 50-70 bars, so the tape has the same
+ * texture whichever range is selected.
+ */
+interface Range {
+    label: string;
+    minutes: number;
+    /** "rollups" is hourly and permanent; "samples" is per check and expires. */
+    source: "rollups" | "samples";
+    bucketMs: number;
+}
+
+const RANGES: Range[] = [
+    { label: "48h", minutes: 48 * 60, source: "rollups", bucketMs: 3600_000 },
+    { label: "24h", minutes: 24 * 60, source: "rollups", bucketMs: 3600_000 },
+    { label: "12h", minutes: 12 * 60, source: "samples", bucketMs: 600_000 },
+    { label: "8h", minutes: 8 * 60, source: "samples", bucketMs: 600_000 },
+    { label: "1h", minutes: 60, source: "samples", bucketMs: 60_000 },
+];
+
+function rangeTitle(r: Range): string {
+    const hours = r.minutes / 60;
+    return hours === 1 ? "Last hour" : `Last ${hours} hours`;
+}
+
+function bucketLabel(bucketMs: number): string {
+    if (bucketMs >= 3600_000) return "1 hour per bar";
+    return `${Math.round(bucketMs / 60_000)} min per bar`;
+}
+
+function RangePicker({ value, onChange }: { value: Range; onChange: (r: Range) => void }) {
+    return (
+        <div className="flex overflow-hidden rounded-sm border border-border" role="group" aria-label="Chart range">
+            {RANGES.map((r) => (
+                <button
+                    key={r.label}
+                    type="button"
+                    onClick={() => onChange(r)}
+                    aria-pressed={r.label === value.label}
+                    className={`border-l border-border px-2.5 py-1 font-mono text-[11px] uppercase tracking-[0.08em] transition-colors first:border-l-0 focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent ${
+                        r.label === value.label
+                            ? "bg-accent/15 text-accent"
+                            : "bg-surface-2 text-text-secondary hover:bg-surface hover:text-text-primary"
+                    }`}
+                >
+                    {r.label}
+                </button>
+            ))}
+        </div>
+    );
+}
+
 function niceCeiling(ms: number): number {
    if (ms <= 0) return 100;
    const steps = [50, 100, 250, 500, 1000, 2500, 5000, 10000, 30000];
@@ -43,7 +101,7 @@ function niceCeiling(ms: number): number {
 * hovered hour gets a real popover, anchored to its own bar.
 */
 function SlotPopover({ slot, index, count }: { slot: Slot; index: number; count: number }) {
-    const end = new Date(slot.at.getTime() + 3600_000);
+    const end = new Date(slot.at.getTime() + slot.spanMs);
    const day = slot.at.toLocaleDateString(undefined, { weekday: "short", day: "numeric", month: "short" });
    const span = `${slot.at.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}–${end.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}`;

@@ -84,7 +142,7 @@ function SlotPopover({ slot, index, count }: { slot: Slot; index: number; count:
    );
 }

-function History({ slots }: { slots: Slot[] }) {
+function History({ slots, note }: { slots: Slot[]; note?: string }) {
    const [hovered, setHovered] = useState<number | null>(null);
    const latencies = slots.map((s) => s.latency).filter((v): v is number => v !== null);
    const scale = niceCeiling(Math.max(...latencies, 0) * 1.15);
@@ -110,7 +168,16 @@ function History({ slots }: { slots: Slot[] }) {

    const firstAt = slots[0]?.at;
    const midAt = slots[Math.floor(slots.length / 2)]?.at;
-    const tick = (d?: Date) => (d ? d.toLocaleString(undefined, { weekday: "short", hour: "2-digit", minute: "2-digit" }) : "");
+    /* A weekday on a one-hour window is noise: every bar is the same day. */
+    const spanned = slots.length * (slots[0]?.spanMs ?? 3600_000);
+    const tick = (d?: Date) =>
+        d
+            ? d.toLocaleString(undefined, {
+                  ...(spanned > 6 * 3600_000 ? { weekday: "short" as const } : {}),
+                  hour: "2-digit",
+                  minute: "2-digit",
+              })
+            : "";

    return (
        <div>
@@ -181,7 +248,7 @@ function History({ slots }: { slots: Slot[] }) {
                <span className="flex items-center gap-2">
                    <span className="block h-0.5 w-3.5 bg-accent" /> Response time
                </span>
-                <span className="text-text-tertiary">Gaps mean no checks ran</span>
+                <span className="text-text-tertiary">{note ?? "Gaps mean no checks ran"}</span>
            </div>
        </div>
    );
@@ -250,6 +317,7 @@ export default function MonitorDetailPage() {
    const queryClient = useQueryClient();
    const monitorId = params.id as string;
    const [confirmDelete, setConfirmDelete] = useState(false);
+    const [range, setRange] = useState<Range>(RANGES[0]);
    const toast = useToast();

    const { data: monitor, isLoading } = useQuery({
@@ -264,6 +332,17 @@ export default function MonitorDetailPage() {
        refetchInterval: 60_000,
    });

+    /* Only fetched for the ranges that read it — the 24h and 48h views are
+       served by the rollups the page already holds. The 1h view refreshes on
+       the check interval's order rather than the rollup's: at one minute per
+       bar, a 60s poll is the difference between live and a bar behind. */
+    const { data: samples } = useQuery({
+        queryKey: ["monitors", monitorId, "samples", range.minutes],
+        queryFn: () => api.getMonitorSamples(monitorId, range.minutes),
+        enabled: range.source === "samples",
+        refetchInterval: range.minutes <= 60 ? 15_000 : 30_000,
+    });
+
    const { data: incidents } = useQuery({
        queryKey: ["monitors", monitorId, "incidents"],
        queryFn: () => api.getMonitorIncidents(monitorId),
@@ -329,7 +408,13 @@ export default function MonitorDetailPage() {
    }

    const all: Rollup[] = rollups ?? [];
-    const slots = buildSlots(all);
+    const slots =
+        range.source === "rollups"
+            ? buildSlots(all, Math.round(range.minutes / 60))
+            : buildSampleSlots(samples ?? [], range.minutes * 60_000, range.bucketMs);
+    /* Samples expire after 48h and only start accruing once a check runs, so an
+       empty short range is a real answer and not a failure to load. */
+    const emptyRange = range.source === "samples" && (samples ?? []).length === 0;
    const status = displayStatus(monitor);
    const pct24 = uptimePct(all.slice(-24));
    const pct30d = uptimePct(all);
@@ -409,11 +494,21 @@ export default function MonitorDetailPage() {
                <div className="flex flex-col gap-5">
                    <div className="rounded-lg border border-border bg-surface">
                        <div className="flex items-baseline justify-between gap-3 border-b border-border-soft px-5 py-3.5">
-                            <h2 className="text-[15px] font-semibold text-text-primary">Last 48 hours</h2>
-                            <span className="font-mono text-[10px] uppercase tracking-[0.16em] text-text-tertiary">1 hour per bar</span>
+                            <h2 className="text-[15px] font-semibold text-text-primary">
+                                {rangeTitle(range)}
+                            </h2>
+                            <div className="flex items-center gap-3">
+                                <span className="hidden font-mono text-[10px] uppercase tracking-[0.16em] text-text-tertiary sm:inline">
+                                    {bucketLabel(range.bucketMs)}
+                                </span>
+                                <RangePicker value={range} onChange={setRange} />
+                            </div>
                        </div>
                        <div className="p-5">
-                            <History slots={slots} />
+                            <History
+                                slots={slots}
+                                note={emptyRange ? "No check results recorded in this window yet" : undefined}
+                            />
                        </div>
                        <div className="grid grid-cols-2 border-t border-border-soft sm:grid-cols-4">
                            <Figure