import * as React from "react"; import { useMemo, useState } from "react"; import { useDiveState, useSQLQuery } from "@motherduck/react-sql-query"; import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"; // Flight run monitor. Reads MD_LIST_FLIGHTS and MD_LIST_FLIGHT_RUNS live, as the viewer. // Admins see every Flight in the organization. Everyone else sees their own. // No database is needed. Statuses are bare strings: PENDING, RUNNING, SUCCEEDED, FAILED, CANCELLED. // A canceled run has ended_at NULL and cancelled_at set, and may have started_at NULL. // Times are shown in the viewer's local time by default, with a UTC switch. Cron schedules are UTC on MotherDuck. export const REQUIRED_DATABASES = [ { type: "share", path: "md:_share/flight_monitor_sample/efbc27d8-a062-4ed4-abe1-cbaeb111cb3f", alias: "flight_monitor_sample", }, ]; // The share holds sample Flights, runs and log lines. The Dive shows it only when the viewer has no // Flights of their own (for example in the public Dive gallery) or when "Sample" is switched on. const C = { sand: "#F4EFEA", sandGrey: "#ECE6DF", darkSand: "#E1D6CB", ink: "#383838", white: "#FFFFFF", sky: "#6FC2FF", skyDark: "#2BA5FF", garden: "#16AA98", gardenDark: "#068475", watermelon: "#FF7169", watermelonDark: "#E23F35", grey: "#6B6B6B", rule: "#D6CDBE", series: "#C0C0C0", }; const AEONIK = "'Aeonik Mono', 'Cousine', ui-monospace, Menlo, monospace"; const INTER = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"; const CSS = ` * { margin: 0; padding: 0; box-sizing: border-box; } html, body, #root { background: ${C.sand}; color: ${C.ink}; font-family: ${INTER}; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .q-root { background: ${C.sand}; min-height: 100vh; } .q-page { max-width: 1280px; margin: 0 auto; padding: 32px 24px 56px; display: flex; flex-direction: column; gap: 24px; } .q-head { display: flex; flex-direction: column; gap: 8px; } .q-eyebrow { font-family: ${AEONIK}; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: ${C.grey}; } .q-title { font-size: 26px; font-weight: 600; line-height: 34px; letter-spacing: -0.01em; color: ${C.ink}; } .q-answer { font-size: 16px; line-height: 24px; color: ${C.ink}; max-width: 80ch; } .q-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .q-seg { display: inline-flex; border: 1px solid ${C.rule}; border-radius: 8px; overflow: hidden; background: ${C.white}; } .q-seg button { padding: 5px 12px; font-size: 13px; line-height: 18px; color: ${C.grey}; background: ${C.white}; border: none; cursor: pointer; font-family: ${INTER}; } .q-seg button + button { border-left: 1px solid ${C.rule}; } .q-seg button.on { background: ${C.ink}; color: ${C.white}; } .q-tz { display: inline-flex; border: 1px solid ${C.rule}; border-radius: 8px; overflow: hidden; background: ${C.white}; } .q-tz button { padding: 4px 10px; font-size: 12px; line-height: 18px; color: ${C.grey}; background: ${C.white}; border: none; cursor: pointer; font-family: ${INTER}; } .q-tz button + button { border-left: 1px solid ${C.rule}; } .q-tz button.on { background: ${C.ink}; color: ${C.white}; } .q-sort { padding: 0; border: none; background: none; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; } .q-sort:hover, .q-sort.on { color: ${C.ink}; } .q-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; padding-top: 4px; } .q-tz button:disabled { color: ${C.rule}; cursor: default; } .q-range { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: ${C.grey}; } .q-range input { padding: 4px 8px; font-size: 13px; line-height: 18px; border: 1px solid ${C.rule}; border-radius: 8px; background: ${C.white}; color: ${C.ink}; font-family: ${INTER}; } .q-range input:focus { outline: none; border-color: ${C.grey}; } .q-search { padding: 5px 10px; font-size: 13px; line-height: 18px; border: 1px solid ${C.rule}; border-radius: 8px; background: ${C.white}; color: ${C.ink}; font-family: ${INTER}; min-width: 220px; } .q-search:focus { outline: none; border-color: ${C.grey}; } .q-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .q-kpi { background: ${C.white}; border: 1px solid ${C.rule}; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .q-kpi-label { font-size: 12px; font-weight: 500; line-height: 16px; color: ${C.grey}; } .q-kpi-value { font-size: 34px; font-weight: 600; line-height: 40px; letter-spacing: -0.01em; color: ${C.ink}; font-variant-numeric: tabular-nums; white-space: nowrap; } .q-kpi-note { font-size: 12px; line-height: 16px; color: ${C.grey}; } .q-kpi-note b { font-weight: 500; color: ${C.ink}; } .q-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; } .q-card { background: ${C.white}; border: 1px solid ${C.rule}; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .q-card-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; } .q-card-t { font-size: 14px; font-weight: 600; line-height: 20px; color: ${C.ink}; } .q-card-d { font-size: 12px; line-height: 16px; color: ${C.grey}; } .q-tooltip { background: ${C.white}; border: 1px solid ${C.rule}; border-radius: 6px; padding: 8px 12px; font-size: 12px; line-height: 18px; color: ${C.grey}; } .q-tooltip b { display: block; font-size: 13px; font-weight: 600; color: ${C.ink}; font-variant-numeric: tabular-nums; } .q-tablewrap { overflow-x: auto; } .q-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 20px; color: ${C.ink}; } .q-table th { text-align: left; font-size: 12px; font-weight: 500; line-height: 16px; color: ${C.grey}; padding: 6px 8px; border-bottom: 1px solid ${C.rule}; white-space: nowrap; } .q-table td { padding: 7px 8px; border-bottom: 1px solid ${C.darkSand}; vertical-align: top; } .q-table tr:last-child td { border-bottom: none; } .q-table tr.sel td { background: ${C.sand}; } .q-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .q-mono { font-family: ${AEONIK}; font-size: 12px; } .q-dim { color: ${C.grey}; } .q-pill { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; } .q-pill--good { background: #E3F5F2; color: ${C.gardenDark}; } .q-pill--warn { background: #FFF4D6; color: #8A6D00; } .q-pill--bad { background: #FFE4E2; color: ${C.watermelonDark}; } .q-pill--grey { background: ${C.sandGrey}; color: ${C.grey}; } .q-pill--sky { background: #E4F3FF; color: #1B6FB0; } .q-link { color: ${C.ink}; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: ${C.rule}; } .q-link:hover { text-decoration-color: ${C.ink}; } .q-btn { padding: 2px 10px; font-size: 12px; line-height: 18px; border: 1px solid ${C.rule}; border-radius: 6px; background: ${C.white}; color: ${C.ink}; cursor: pointer; font-family: ${INTER}; white-space: nowrap; } .q-btn:hover { border-color: ${C.grey}; } .q-btn.on { background: ${C.ink}; color: ${C.white}; border-color: ${C.ink}; } .q-more { align-self: flex-start; padding: 0; border: none; background: none; font-size: 13px; color: ${C.grey}; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: ${INTER}; } .q-log { font-family: ${AEONIK}; font-size: 12px; line-height: 18px; color: ${C.ink}; background: ${C.white}; border: 1px solid ${C.rule}; border-radius: 8px; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto; } .q-log .ln { color: ${C.grey}; display: inline-block; width: 36px; text-align: right; margin-right: 12px; user-select: none; } .q-note { font-size: 13px; line-height: 20px; color: ${C.ink}; background: #FFF4D6; border: 1px solid #F1DFA3; border-radius: 10px; padding: 10px 14px; } .q-logrow td { padding: 0 0 10px; background: ${C.sand}; } .q-logwrap { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px 4px; } .q-loghead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 12px; color: ${C.grey}; } .q-empty { font-size: 13px; color: ${C.grey}; padding: 8px 0; } .q-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-top: 16px; border-top: 1px solid ${C.darkSand}; font-size: 12px; line-height: 16px; color: ${C.grey}; } .q-footer a { color: ${C.ink}; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: ${C.rule}; } .q-skel { height: 10px; width: 140px; border-radius: 4px; background: ${C.sandGrey}; animation: q-pulse 1.2s ease-in-out infinite; } @keyframes q-pulse { 50% { opacity: 0.4; } } .q-err { font-size: 13px; color: ${C.watermelonDark}; } @media (max-width: 1000px) { .q-grid { grid-template-columns: minmax(0, 1fr); } .q-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .q-page { padding: 24px 16px 32px; } .q-kpis { grid-template-columns: minmax(0, 1fr); } } `; // ---------- helpers ---------- const N = (v: unknown): number => (v == null ? 0 : Number(v)); const S = (v: unknown): string => (v == null ? "" : String(v)); const int = (v: number): string => Math.round(v).toLocaleString(); function rows>(q: { data?: unknown }): T[] { return Array.isArray(q.data) ? (q.data as T[]) : []; } const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i; function ago(epoch: number, now: number): string { if (!epoch) return "never"; const m = Math.max(0, Math.round((now - epoch) / 60)); if (m < 1) return "just now"; if (m < 60) return `${m} min ago`; const h = Math.round(m / 60); if (h < 48) return `${h} h ago`; return `${Math.round(h / 24)} d ago`; } function dur(s: number | null): string { if (s == null || !isFinite(s) || s < 0) return ""; if (s < 60) return `${Math.round(s)} s`; if (s < 3600) return `${Math.floor(s / 60)} m ${Math.round(s % 60)} s`; return `${Math.floor(s / 3600)} h ${Math.round((s % 3600) / 60)} m`; } // Range inputs hold minutes as "YYYY-MM-DDTHH:MM" in the chosen time zone. type Tz = "local" | "utc"; const STAMP_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/; const pad2 = (n: number): string => String(n).padStart(2, "0"); type Parts = { y: number; mo: number; d: number; h: number; mi: number; dow: number }; function parts(epoch: number, tz: Tz): Parts { const x = new Date(epoch * 1000); return tz === "utc" ? { y: x.getUTCFullYear(), mo: x.getUTCMonth() + 1, d: x.getUTCDate(), h: x.getUTCHours(), mi: x.getUTCMinutes(), dow: x.getUTCDay() } : { y: x.getFullYear(), mo: x.getMonth() + 1, d: x.getDate(), h: x.getHours(), mi: x.getMinutes(), dow: x.getDay() }; } const isoMinute = (epoch: number, tz: Tz): string => { const p = parts(epoch, tz); return `${p.y}-${pad2(p.mo)}-${pad2(p.d)}T${pad2(p.h)}:${pad2(p.mi)}`; }; function stampEpoch(v: string, tz: Tz): number { const y = Number(v.slice(0, 4)), mo = Number(v.slice(5, 7)) - 1, d = Number(v.slice(8, 10)), h = Number(v.slice(11, 13)), mi = Number(v.slice(14, 16)); return (tz === "utc" ? Date.UTC(y, mo, d, h, mi) : new Date(y, mo, d, h, mi).getTime()) / 1000; } const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const fmtStamp = (v: string): string => `${MONTHS[Number(v.slice(5, 7)) - 1]} ${Number(v.slice(8, 10))} ${v.slice(11, 16)}`; const fmtTs = (epoch: number, tz: Tz): string => { const p = parts(epoch, tz); return `${p.y}-${pad2(p.mo)}-${pad2(p.d)} ${pad2(p.h)}:${pad2(p.mi)}`; }; // Short name of the viewer's zone, like PST or CET. function localZoneName(): string { try { const part = new Intl.DateTimeFormat("en-US", { timeZoneName: "short" }).formatToParts(new Date()).find((x) => x.type === "timeZoneName"); return part ? part.value : "local time"; } catch { return "local time"; } } // Start of the day that holds epoch, in the chosen zone. function dayStart(epoch: number, tz: Tz): number { const p = parts(epoch, tz); return (tz === "utc" ? Date.UTC(p.y, p.mo - 1, p.d) : new Date(p.y, p.mo - 1, p.d).getTime()) / 1000; } function spanText(mins: number): string { if (mins < 60) return `${mins} min`; if (mins < 1440) return `${Math.round(mins / 60)} h`; return `${Math.round(mins / 1440)} d`; } // How often a cron fires, as the longest normal gap between two runs, in minutes. // Good enough to tell "overdue" from "fine". Cron is UTC on MotherDuck. function cronGapMin(cron: string | null): number | null { if (!cron) return null; const p = cron.trim().split(/\s+/); if (p.length < 5) return null; const [m, h, dom, mon, dow] = p; const step = (f: string) => { const x = /^\*\/(\d+)$/.exec(f); return x ? Number(x[1]) : null; }; const listLen = (f: string) => f.split(",").length; if (m === "*") return 1; if (step(m)) return step(m) as number; if (h === "*") return 60 / listLen(m) * 1; if (step(h)) return (step(h) as number) * 60; if (h.includes("-")) return 60; // a range of hours: roughly hourly during that range if (dom !== "*" || mon !== "*") return 31 * 1440; if (dow !== "*") { if (dow.includes("-") || dow.includes(",")) return 3 * 1440; // weekdays: Friday to Monday is the longest gap return 7 * 1440; } return 1440 / listLen(h); } // Next time a 5-field cron fires, in epoch seconds, searched minute by minute up to 62 days. Cron is UTC. function cronField(f: string, min: number, max: number): Set | null { const out = new Set(); for (const part of f.split(",")) { const m = /^(\*|\d+(?:-\d+)?)(?:\/(\d+))?$/.exec(part); if (!m) return null; let lo = min, hi = max; if (m[1] !== "*") { const r = m[1].split("-").map(Number); lo = r[0]; hi = r.length > 1 ? r[1] : (m[2] ? max : r[0]); } const step = m[2] ? Number(m[2]) : 1; if (!(step > 0)) return null; for (let v = lo; v <= hi; v += step) out.add(v); } return out; } function cronNext(cron: string | null, now: number): number | null { if (!cron) return null; const p = cron.trim().split(/\s+/); if (p.length < 5) return null; const mins = cronField(p[0], 0, 59), hours = cronField(p[1], 0, 23), doms = cronField(p[2], 1, 31), mons = cronField(p[3], 1, 12), dows = cronField(p[4], 0, 7); if (!mins || !hours || !doms || !mons || !dows) return null; if (dows.has(7)) dows.add(0); const domAny = p[2] === "*", dowAny = p[4] === "*"; let t = (Math.floor(now / 60) + 1) * 60; const end = t + 62 * 86400; while (t < end) { const d = new Date(t * 1000); const mon = d.getUTCMonth() + 1, dom = d.getUTCDate(), dow = d.getUTCDay(), h = d.getUTCHours(), mi = d.getUTCMinutes(); if (!mons.has(mon)) { t = Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + 1, 1) / 1000; continue; } const dayOk = domAny && dowAny ? true : domAny ? dows.has(dow) : dowAny ? doms.has(dom) : (doms.has(dom) || dows.has(dow)); if (!dayOk) { t = Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), dom + 1) / 1000; continue; } if (!hours.has(h)) { t += (60 - mi) * 60; continue; } if (!mins.has(mi)) { t += 60; continue; } return t; } return null; } function inText(epoch: number, now: number): string { const m = Math.max(0, Math.round((epoch - now) / 60)); if (m < 1) return "under a minute"; if (m < 60) return `in ${m} min`; const h = Math.round(m / 60); if (h < 48) return `in ${h} h`; return `in ${Math.round(h / 24)} d`; } function describeCron(cron: string | null, tz: Tz, zoneName: string): string { if (!cron) return "On demand"; const p = cron.trim().split(/\s+/); if (p.length < 5) return cron; const [m, h, dom, mon, dow] = p; const pad = (x: string) => x.padStart(2, "0"); const stepM = /^\*\/(\d+)$/.exec(m); const stepH = /^\*\/(\d+)$/.exec(h); if (m === "*" && h === "*") return "Every minute"; if (stepM && h === "*") return `Every ${stepM[1]} min`; if (stepM) return `Every ${stepM[1]} min, ${h.replace(/,/g, ", ")}h UTC`; if (h === "*") return `Hourly at :${pad(m)}`; if (stepH) return `Every ${stepH[1]} h at :${pad(m)}`; if (h.includes("-") || h.includes(",")) return `${h}h at :${pad(m)} UTC`; // A fixed clock time. Show it in the viewer's zone, and shift the day name if the conversion crosses midnight. let hh = Number(h), mm = Number(m), dayShift = 0, zone = "UTC"; if (tz === "local") { const ref = new Date(); const u = new Date(Date.UTC(ref.getUTCFullYear(), ref.getUTCMonth(), ref.getUTCDate(), hh, mm)); hh = u.getHours(); mm = u.getMinutes(); zone = zoneName; dayShift = Math.round((Date.UTC(u.getFullYear(), u.getMonth(), u.getDate()) - Date.UTC(ref.getUTCFullYear(), ref.getUTCMonth(), ref.getUTCDate())) / 86400000); } const t = `${pad2(hh)}:${pad2(mm)} ${zone}`; if (dom !== "*" && mon !== "*") return `Yearly ${mon}/${dom} ${t}`; if (dom !== "*") return `Monthly day ${dom}, ${t}`; if (dow !== "*") { if (dow === "1-5") return `Weekdays ${t}`; const names = dow.split(",").map((d) => (/^\d$/.test(d) ? DAYS[(Number(d) + dayShift + 7) % 7] : d)).join(", "); return `${names} ${t}`; } return `Daily ${t}`; } // ---------- SQL ---------- const RUNS_PER_FLIGHT = 25; const Q_FLIGHTS = ` SELECT flight_id::VARCHAR AS flight_id, flight_name, schedule_cron, schedule_status, status, owner_name, current_version::INTEGER AS current_version, epoch(updated_at)::DOUBLE AS updated_epoch FROM MD_LIST_FLIGHTS() ORDER BY flight_name`; function runsSql(ids: string[]): string { const one = (id: string) => ` SELECT run_id::VARCHAR AS run_id, flight_id::VARCHAR AS flight_id, flight_name, run_number::INTEGER AS run_number, is_scheduled, status, exit_code::INTEGER AS exit_code, started_by_name, strftime(created_at AT TIME ZONE 'UTC', '%Y-%m-%d %H:%M') AS created_utc, epoch(created_at)::DOUBLE AS created_epoch, epoch(started_at)::DOUBLE AS started_epoch, date_diff('second', started_at, COALESCE(ended_at, cancelled_at))::INTEGER AS dur_s FROM md_list_flight_runs(FLIGHT_ID := '${id}'::UUID, "limit" := ${RUNS_PER_FLIGHT})`; return `SELECT * FROM (${ids.map(one).join("\nUNION ALL")}) ORDER BY created_epoch DESC`; } const SAMPLE = '"flight_monitor_sample"."main"'; const Q_SAMPLE_FLIGHTS = ` SELECT flight_id::VARCHAR AS flight_id, flight_name, schedule_cron, schedule_status, status, owner_name, current_version::INTEGER AS current_version, (epoch(now()) - updated_offset_s)::DOUBLE AS updated_epoch FROM ${SAMPLE}."flights" ORDER BY flight_name`; const Q_SAMPLE_RUNS = ` SELECT run_id::VARCHAR AS run_id, flight_id::VARCHAR AS flight_id, flight_name, run_number::INTEGER AS run_number, is_scheduled, status, exit_code::INTEGER AS exit_code, started_by_name, strftime((now() - to_seconds(created_offset_s)) AT TIME ZONE 'UTC', '%Y-%m-%d %H:%M') AS created_utc, (epoch(now()) - created_offset_s)::DOUBLE AS created_epoch, (epoch(now()) - created_offset_s + start_delay_s)::DOUBLE AS started_epoch, dur_s::INTEGER AS dur_s FROM ${SAMPLE}."flight_runs" ORDER BY created_epoch DESC`; function sampleLogsSql(flightId: string, runNumber: number): string { return ` SELECT line_number::INTEGER AS line_number, line FROM ${SAMPLE}."flight_run_logs" WHERE flight_id = '${flightId}'::UUID AND run_number = ${Math.floor(runNumber)} ORDER BY line_number`; } function logsSql(flightId: string, runNumber: number): string { return ` SELECT line_number::INTEGER AS line_number, line FROM MD_GET_FLIGHT_LOGS(FLIGHT_ID := '${flightId}'::UUID, RUN_NUMBER := ${Math.floor(runNumber)}::UBIGINT, "order" := 'desc', "limit" := 80) ORDER BY line_number`; } // ---------- types ---------- type Flight = { flight_id: string; flight_name: string; schedule_cron: string | null; schedule_status: string | null; status: string; owner_name: string; current_version: number; updated_epoch: number }; type Run = { run_id: string; flight_id: string; flight_name: string; run_number: number; is_scheduled: boolean; status: string; exit_code: number | null; started_by_name: string; created_utc: string; created_epoch: number; started_epoch: number; dur_s: number | null }; type Sel = { f: string; n: number; src: "att" | "fail" } | null; type Attention = { flight: Flight; why: string; kind: "bad" | "warn"; label: "Failed" | "Stuck" | "Overdue"; last?: Run }; // ---------- small pieces ---------- function Kpi({ label, value, note, loading }: { label: string; value?: string; note?: React.ReactNode; loading?: boolean }) { return (

{label}

{loading ?

{value}

} {note ?

{note}

: null}

); } function Card({ title, desc, right, children }: { title: string; desc?: string; right?: React.ReactNode; children: React.ReactNode }) { return (

{title}

{desc ?

{desc}

: null}

{right}

{children}

); } function Pill({ kind, children }: { kind: "good" | "warn" | "bad" | "grey" | "sky"; children: React.ReactNode }) { return {children}; } function StatusPill({ status }: { status: string }) { const k = status === "SUCCEEDED" ? "good" : status === "FAILED" ? "bad" : status === "CANCELLED" ? "warn" : status === "RUNNING" || status === "PENDING" ? "sky" : "grey"; const t = status === "SUCCEEDED" ? "Succeeded" : status === "FAILED" ? "Failed" : status === "CANCELLED" ? "Canceled" : status === "RUNNING" ? "Running" : status === "PENDING" ? "Pending" : status || "No runs"; return {t}; } function Tip({ active, payload, label }: any) { if (!active || !payload?.length) return null; return (

{label} {payload.map((p: any) => ({p.name}: {p.value}))}

); } function QueryState({ q, children, h }: { q: { isLoading?: boolean; isError?: boolean; error?: unknown }; children: React.ReactNode; h?: number }) { if (q.isLoading) return

; if (q.isError) return

The query did not run. {String(q.error ?? "")}

; return <>{children}; } function Pager({ page, size, total, onPage }: { page: number; size: number; total: number; onPage: (p: number) => void }) { const pages = Math.max(1, Math.ceil(total / size)); const p = Math.min(page, pages - 1); const lo = total === 0 ? 0 : p * size + 1, hi = Math.min(total, (p + 1) * size); return (

{total === 0 ? "0 rows" : `${lo} to ${hi} of ${int(total)}`}

); } const flightUrl = (id: string) => `https://app.motherduck.com/flights/${id}`; const isSampleId = (id: string) => id.startsWith("00000000-0000-4000-8000-"); // ---------- the Dive ---------- export default function FlightMonitor() { const [tz, setTz] = useDiveState("tz", "local"); const zoneName = useMemo(() => (tz === "utc" ? "UTC" : localZoneName()), [tz]); const [from, setFrom] = useDiveState("from", ""); const [to, setTo] = useDiveState("to", ""); const [sel, setSel] = useDiveState("run", null); const [search, setSearch] = useState(""); const [failSort, setFailSort] = useDiveState<"when" | "dur_desc" | "dur_asc">("failSort", "when"); const [statusF, setStatusF] = useDiveState<"all" | "FAILED" | "SUCCEEDED" | "RUNNING" | "CANCELLED" | "none">("status", "all"); const [failPage, setFailPage] = useState(0); const [flightPage, setFlightPage] = useState(0); const FAIL_SIZE = 10, FLIGHT_SIZE = 15; const [wantSample, setWantSample] = useDiveState("sample", false); const liveFlightsQ = useSQLQuery(Q_FLIGHTS); const liveFlights = rows(liveFlightsQ); // Sample mode: the viewer asked for it, or the viewer has no Flights at all (for example in the Dive gallery). const noLive = !liveFlightsQ.isLoading && !liveFlightsQ.isError && liveFlightsQ.data !== undefined && liveFlights.length === 0; const sample = wantSample || noLive; const liveIds = useMemo(() => liveFlights.map((f) => S(f.flight_id)).filter((id) => UUID.test(id)), [liveFlightsQ.data]); const liveRunsQ = useSQLQuery(liveIds.length ? runsSql(liveIds) : "SELECT 1", { enabled: liveIds.length > 0 && !wantSample }); const sampleFlightsQ = useSQLQuery(Q_SAMPLE_FLIGHTS, { enabled: sample }); const sampleRunsQ = useSQLQuery(Q_SAMPLE_RUNS, { enabled: sample }); const flightsQ = sample ? sampleFlightsQ : liveFlightsQ; const runsQ = sample ? sampleRunsQ : liveRunsQ; const flights = rows(flightsQ); const runs = useMemo(() => rows(runsQ).map((r) => ({ ...r, run_number: N(r.run_number), exit_code: r.exit_code == null ? null : N(r.exit_code), created_epoch: N(r.created_epoch), started_epoch: N(r.started_epoch), dur_s: r.dur_s == null ? null : N(r.dur_s), })), [runsQ.data]); const runsPending = sample ? sampleRunsQ.data === undefined && !sampleRunsQ.isError : liveIds.length > 0 && liveRunsQ.data === undefined && !liveRunsQ.isError; const loading = liveFlightsQ.isLoading || flightsQ.isLoading || runsQ.isLoading || runsPending; const selValid = sel && UUID.test(sel.f) && sel.n > 0 && (sel.src === "att" || sel.src === "fail") ? sel : null; const logsQ = useSQLQuery(selValid ? (sample ? sampleLogsSql(selValid.f, selValid.n) : logsSql(selValid.f, selValid.n)) : "SELECT 1", { enabled: !!selValid }); const now = useMemo(() => Date.now() / 1000, [runsQ.data]); // Default is the last 24 hours, rolling. Editing either field pins the range. const custom = STAMP_RE.test(from) || STAMP_RE.test(to); const toStamp = STAMP_RE.test(to) ? to : isoMinute(now, tz); const fromStamp = STAMP_RE.test(from) ? from : isoMinute(now - 86400, tz); const since = custom ? Math.min(stampEpoch(fromStamp, tz), stampEpoch(toStamp, tz)) : now - 86400; const until = custom ? Math.min(now, Math.max(stampEpoch(fromStamp, tz), stampEpoch(toStamp, tz)) + 60) : now; const hourly = (until - since) / 3600 <= 48; const rangeIn = custom ? `from ${fmtStamp(fromStamp)} to ${fmtStamp(toStamp)} ${zoneName}` : "in the last 24 hours"; const rangeCap = custom ? `${fmtStamp(fromStamp)} to ${fmtStamp(toStamp)} ${zoneName}` : "Last 24 hours"; // The search box narrows the whole page, not just the table at the bottom. const q = search.trim().toLowerCase(); const flightsF = useMemo(() => (q ? flights.filter((f) => S(f.flight_name).toLowerCase().includes(q) || S(f.owner_name).toLowerCase().includes(q)) : flights), [flights, q]); const runsF = useMemo(() => { if (!q) return runs; const ok = new Set(flightsF.map((f) => f.flight_id)); return runs.filter((r) => ok.has(r.flight_id)); }, [runs, flightsF, q]); const model = useMemo(() => { const flights = flightsF; const runs = runsF; const inWin = runs.filter((r) => r.created_epoch >= since && r.created_epoch < until); const failed = inWin.filter((r) => r.status === "FAILED"); const canceled = inWin.filter((r) => r.status === "CANCELLED"); const succeeded = inWin.filter((r) => r.status === "SUCCEEDED"); const active = runs.filter((r) => r.status === "RUNNING" || r.status === "PENDING"); const latest = new Map(); const perFlight = new Map(); for (const r of runs) { if (!latest.has(r.flight_id)) latest.set(r.flight_id, r); } for (const r of inWin) { const c = perFlight.get(r.flight_id) ?? { ok: 0, bad: 0 }; if (r.status === "SUCCEEDED") c.ok += 1; else if (r.status === "FAILED") c.bad += 1; perFlight.set(r.flight_id, c); } // Follow the date range: a Flight is listed when its last run falls inside it. Overdue only makes sense when the range ends now. const endsNow = until >= now - 60; const attention: Attention[] = []; for (const f of flights) { const last = latest.get(f.flight_id); const lastIn = !!last && last.created_epoch >= since && last.created_epoch < until; const scheduled = f.schedule_cron && f.schedule_status === "ACTIVE" && f.status === "ACTIVE"; const gap = scheduled ? cronGapMin(f.schedule_cron) : null; if (last && last.status === "FAILED") { if (lastIn) attention.push({ flight: f, why: last.exit_code != null ? `Exit code ${last.exit_code}` : "Run failed", kind: "bad", label: "Failed", last }); continue; } if (last && (last.status === "RUNNING" || last.status === "PENDING")) { const mins = (now - (last.started_epoch || last.created_epoch)) / 60; if (mins > Math.max(120, (gap ?? 0) * 2)) { if (lastIn) attention.push({ flight: f, why: `${last.status === "PENDING" ? "Pending" : "Running"} for ${spanText(Math.round(mins))}`, kind: "warn", label: "Stuck", last }); continue; } } if (gap != null) { const lastAt = last ? last.created_epoch : 0; const ref = lastAt || N(f.updated_epoch); const overdueMin = (now - ref) / 60 - (gap * 2 + 15); if (overdueMin > 0 && endsNow) { attention.push({ flight: f, why: last ? `No run for ${spanText(Math.round((now - lastAt) / 60))}` : "Has not run yet", kind: "warn", label: "Overdue", last }); } } } const order = { Failed: 0, Stuck: 1, Overdue: 2 }; attention.sort((a, b) => order[a.label] - order[b.label] || (b.last?.created_epoch ?? 0) - (a.last?.created_epoch ?? 0)); // chart buckets const size = hourly ? 3600 : 86400; const start = hourly ? Math.floor(since / size) * size : dayStart(since, tz); const nBuckets = Math.max(1, Math.ceil((until - start) / size)); const buckets = Array.from({ length: nBuckets }, (_, i) => { const t = start + i * size; const d = parts(t, tz); const hh = `${pad2(d.h)}:00`; const md = `${d.mo}/${d.d}`; const label = hourly ? (custom ? `${md} ${hh}` : hh) : md; return { t, label, Succeeded: 0, Failed: 0, Canceled: 0 }; }); for (const r of inWin) { const i = Math.floor((r.created_epoch - start) / size); if (i < 0 || i >= nBuckets) continue; if (r.status === "SUCCEEDED") buckets[i].Succeeded += 1; else if (r.status === "FAILED") buckets[i].Failed += 1; else if (r.status === "CANCELLED") buckets[i].Canceled += 1; } const flightsWithRuns = new Set(inWin.map((r) => r.flight_id)).size; const finished = failed.length + succeeded.length; return { inWin, failed, canceled, succeeded, active, latest, perFlight, attention, buckets, flightsWithRuns, rate: finished ? (succeeded.length / finished) * 100 : null }; }, [runsF, flightsF, since, until, now, hourly, custom, tz, zoneName]); const bad = model.attention.filter((a) => a.kind === "bad").length; const warn = model.attention.length - bad; const answer = loading ? "Reading Flight runs." : flightsQ.isError || runsQ.isError ? "The Flight runs could not be read." : model.inWin.length === 0 ? `${q ? `No Flight runs matching "${search.trim()}" ${rangeIn}.` : `No Flight runs ${rangeIn}.`}` : `${q ? `Matching "${search.trim()}": ` : ""}${int(model.failed.length)} of ${int(model.inWin.length)} runs failed ${rangeIn}, across ${int(model.flightsWithRuns)} Flights. ` + (model.attention.length === 0 ? "Every Flight's last run succeeded and every schedule is on time." : `${int(model.attention.length)} ${model.attention.length === 1 ? "Flight needs" : "Flights need"} attention: ${int(bad)} with a failed last run and ${int(warn)} overdue or stuck.`); const flightRows = useMemo(() => { const att = new Map(model.attention.map((a) => [a.flight.flight_id, a])); return flightsF .map((f) => { const mine = runs.filter((r) => r.flight_id === f.flight_id && r.status === "SUCCEEDED" && r.dur_s != null); const typical = mine.length ? mine.map((r) => r.dur_s as number).sort((a, b) => a - b)[Math.floor(mine.length / 2)] : null; const scheduled = f.schedule_cron && f.schedule_status === "ACTIVE" && f.status === "ACTIVE"; return { f, last: model.latest.get(f.flight_id), att: att.get(f.flight_id), c: model.perFlight.get(f.flight_id) ?? { ok: 0, bad: 0 }, typical, next: scheduled ? cronNext(f.schedule_cron, now) : null }; }) .sort((a, b) => { const ra = a.att ? (a.att.kind === "bad" ? 0 : 1) : 2; const rb = b.att ? (b.att.kind === "bad" ? 0 : 1) : 2; if (ra !== rb) return ra - rb; return (b.last?.created_epoch ?? 0) - (a.last?.created_epoch ?? 0); }); }, [flightsF, model, runs, now]); const failures = model.failed.concat(model.canceled).sort((a, b) => failSort === "when" ? b.created_epoch - a.created_epoch : failSort === "dur_desc" ? (b.dur_s ?? -1) - (a.dur_s ?? -1) || b.created_epoch - a.created_epoch : (a.dur_s ?? Infinity) - (b.dur_s ?? Infinity) || b.created_epoch - a.created_epoch); const failP = Math.min(failPage, Math.max(0, Math.ceil(failures.length / FAIL_SIZE) - 1)); const shownFailures = failures.slice(failP * FAIL_SIZE, (failP + 1) * FAIL_SIZE); const lastStatus = (last?: Run) => (!last ? "none" : last.status === "PENDING" ? "RUNNING" : last.status); const flightRowsF = statusF === "all" ? flightRows : flightRows.filter((x) => lastStatus(x.last) === statusF); const flightP = Math.min(flightPage, Math.max(0, Math.ceil(flightRowsF.length / FLIGHT_SIZE) - 1)); const shownFlights = flightRowsF.slice(flightP * FLIGHT_SIZE, (flightP + 1) * FLIGHT_SIZE); const statusCount = (k: string) => (k === "all" ? flightRows.length : flightRows.filter((x) => lastStatus(x.last) === k).length); const selRun = selValid ? runs.find((r) => r.flight_id === selValid.f && r.run_number === selValid.n) : undefined; const logLines = rows<{ line_number: unknown; line: unknown }>(logsQ).map((l) => ({ n: N(l.line_number), t: S(l.line) })); const pick = (r: Run, src: "att" | "fail") => setSel(selValid && selValid.f === r.flight_id && selValid.n === r.run_number && selValid.src === src ? undefined : { f: r.flight_id, n: r.run_number, src }); const isSel = (r: Run, src: "att" | "fail") => !!selValid && selValid.f === r.flight_id && selValid.n === r.run_number && selValid.src === src; // The log tail renders as a row directly under the run that was clicked. const logRow = (cols: number) => (

{selRun ? `${selRun.status === "FAILED" ? "Failed" : selRun.status === "CANCELLED" ? "Canceled" : selRun.status} at ${fmtTs(selRun.created_epoch, tz)} ${zoneName}, started by ${selRun.started_by_name || "schedule"}. Last 80 log lines.` : "Last 80 log lines."} {selValid && !isSampleId(selValid.f) ? Open Flight : null}

{logsQ.isLoading ?

: logsQ.isError ?

The logs could not be read. You may not have access to this Flight's runs.

: logLines.length === 0 ?

This run has no log lines.

{logLines.map((l) => (

{l.n}{l.t}

))}

}

); return (

{sample ? "Flights · Sample data" : "Flights · Live"}

Flights observability

{answer}

From setFrom(e.target.value || undefined)} /> To setTo(e.target.value || undefined)} /> {custom ? : null} { setSearch(e.target.value); setFlightPage(0); setFailPage(0); }} /> {loading ? "" : sample ? `${int(flights.length)} sample Flights` : `${int(flights.length)} Flights, newest ${RUNS_PER_FLIGHT} runs each`}

{sample && !loading ? (

{noLive && !wantSample ? "This page uses sample data. Your account has not run any Flights yet. Once it has, this page reads them instead. " : "This page uses sample data. Switch Sample data off to see your own Flights. "} About Flights

) : null}

of {int(model.inWin.length)} runs {rangeIn}} /> = 99.95 ? 0 : 1)}%`} note="Finished runs that succeeded" /> {model.active.map((r) => r.flight_name).slice(0, 3).join(", ")}{model.active.length > 3 ? ", …" : ""} : "Nothing pending or running"} /> {int(bad)} failed last run, {int(warn)} overdue or stuck} />

{model.attention.length === 0 ?

{q ? `No matching Flight needs attention.` : "Nothing to look at. Every Flight's last run succeeded and every schedule is on time."}

: (

{model.attention.map((a) => ( {a.last && isSel(a.last, "att") ? logRow(7) : null} ))}

Flight	Schedule	Status	Last run	Why	Owner
{isSampleId(a.flight.flight_id) ? a.flight.flight_name : {a.flight.flight_name}}	{describeCron(a.flight.schedule_cron, tz, zoneName)}{a.flight.schedule_status === "DISABLED" ? " (paused)" : ""}	{a.label}	{a.last ? ago(a.last.created_epoch, now) : "Never"}	{a.why}	{a.flight.owner_name}	{a.last ? : null}

)}

} cursor={{ fill: C.sand }} /> {failures.length === 0 ?

No failed or canceled runs {rangeIn}.

: (<>

{shownFailures.map((r) => ( {isSel(r, "fail") ? logRow(6) : null} ))}

Flight	Run			Exit
{r.flight_name}{r.status === "CANCELLED" ? (canceled) : null}	#{r.run_number}	{fmtTs(r.created_epoch, tz)}	{dur(r.dur_s)}	{r.exit_code == null ? "" : r.exit_code}

{failures.length > FAIL_SIZE ? : null} )}

{([["all", "All"], ["FAILED", "Failed"], ["RUNNING", "Running"], ["CANCELLED", "Canceled"], ["SUCCEEDED", "Succeeded"], ["none", "No runs"]] as const).map(([k, label]) => ( ))} }>

{shownFlights.map(({ f, last, c, typical, next }) => ( ))}

Flight	Schedule	Next run	Last run	Status	Runs	Failed	Typical time	Owner
{isSampleId(f.flight_id) ? f.flight_name : {f.flight_name}}	{describeCron(f.schedule_cron, tz, zoneName)}{f.schedule_status === "DISABLED" ? " (paused)" : ""}	{next ? inText(next, now) : f.schedule_cron ? (f.schedule_status === "DISABLED" ? "Paused" : "") : "Manual"}	{loading ? : last ? ago(last.created_epoch, now) : "No runs kept"}	{loading ? null : last ? : No runs}	{loading ? "" : c.ok + c.bad ? int(c.ok + c.bad) : 0}	{loading ? "" : c.bad ? {int(c.bad)} : 0}	{loading ? "" : typical != null ? dur(typical) : ""}	{f.owner_name}

{flightRowsF.length === 0 ?

No Flights match.

: null} {flightRowsF.length > FLIGHT_SIZE ? : null}

{sample ? "Sample data from a public share. " : ""}Reads MD_LIST_FLIGHTS and MD_LIST_FLIGHT_RUNS live, as you. Admins see every Flight in the organization. Others see their own. For Slack alerts, pair this with the Monitor MotherDuck From MotherDuck recipe.

); }

Flights Observability

Comments