Fold the brain and health screens into Home
Home is the one overview now: the brain graph flat across the top, the flow switches, then the health sections. The /brain and /health routes and their sidebar entries are gone. - charts report their cursor and clicks, so hovering one filters the list beside it to that minute and a click pins it until Escape or Clear - chart values round to about three significant digits, the legend mounts under the plot so it can wrap without leaving the card, and axis ticks shorten past a thousand - the embedded brain leaves the wheel to the page rather than zooming - number fields no longer draw their up/down spinner (NOTEPAD) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017MeiWk3Yq12n2pTvnQWYvt
This commit is contained in:
Claude Fable 5
@@ -0,0 +1,369 @@
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query"
|
||||
import { ChevronDown, ChevronRight, X } from "lucide-react"
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
import type { EventRow, HistoryPoint } from "@/client"
|
||||
import { UplotChart } from "@/components/Common/UplotChart"
|
||||
import { useEngineEvents } from "@/components/Flow/liveStore"
|
||||
import { PANEL_SECTION } from "@/components/Flow/SidePanel"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { cn, compact } from "@/lib/utils"
|
||||
import {
|
||||
ago,
|
||||
auditQueryOptions,
|
||||
CARD,
|
||||
clock,
|
||||
deadLetterQueryOptions,
|
||||
failuresQueryOptions,
|
||||
healthKeys,
|
||||
minuteOf,
|
||||
runsQueryOptions,
|
||||
timeseriesQueryOptions,
|
||||
} from "./queries"
|
||||
|
||||
/** How much of each list is shown while it is not tied to a moment. */
|
||||
const RUNS_SHOWN = 15
|
||||
const FAILURES_SHOWN = 25
|
||||
|
||||
/**
|
||||
* A moment picked off a chart.
|
||||
*
|
||||
* Hovering previews it, so the list under the pointer scrubs along with the
|
||||
* cursor. A click holds it: reading the list means moving the pointer off the
|
||||
* chart, and a held moment ignores the cursor until it is released.
|
||||
*/
|
||||
function useMoment() {
|
||||
const [hovered, setHovered] = useState<number | null>(null)
|
||||
const [pinned, setPinned] = useState<number | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (pinned === null) return
|
||||
const release = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") setPinned(null)
|
||||
}
|
||||
window.addEventListener("keydown", release)
|
||||
return () => window.removeEventListener("keydown", release)
|
||||
}, [pinned])
|
||||
|
||||
return {
|
||||
/** The minute the paired list is showing, or null for all of it. */
|
||||
at: pinned ?? hovered,
|
||||
pinned,
|
||||
onCursor: setHovered,
|
||||
onSelect: (ts: number | null) =>
|
||||
setPinned((held) => (ts === null || ts === held ? null : ts)),
|
||||
release: () => setPinned(null),
|
||||
}
|
||||
}
|
||||
|
||||
type Moment = ReturnType<typeof useMoment>
|
||||
|
||||
/** One chart, and the moment it hands to its list. */
|
||||
function Chart({
|
||||
title,
|
||||
labels,
|
||||
plots,
|
||||
moment,
|
||||
}: {
|
||||
title: string
|
||||
labels: string[]
|
||||
plots: HistoryPoint[][]
|
||||
moment: Moment
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
CARD,
|
||||
"flex h-64 flex-col",
|
||||
moment.pinned !== null && "border-primary",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-baseline justify-between gap-2">
|
||||
<h2 className={PANEL_SECTION}>{title}</h2>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{moment.pinned !== null ? "Esc clears" : "click to pin"}
|
||||
</span>
|
||||
</div>
|
||||
<UplotChart
|
||||
labels={labels}
|
||||
plots={plots}
|
||||
empty="Nothing has run yet."
|
||||
onCursor={moment.onCursor}
|
||||
onSelect={moment.onSelect}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** What a list is showing, and the way back to all of it. */
|
||||
function ListHeader({ title, moment }: { title: string; moment: Moment }) {
|
||||
return (
|
||||
<div className="flex min-h-6 flex-wrap items-center gap-2">
|
||||
<h2 className={PANEL_SECTION}>{title}</h2>
|
||||
{moment.at !== null ? (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{moment.pinned !== null ? "pinned to" : "showing"} {clock(moment.at)}
|
||||
</span>
|
||||
) : null}
|
||||
{moment.pinned !== null ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-my-1 h-6 gap-1 px-2 text-xs"
|
||||
onClick={moment.release}
|
||||
>
|
||||
<X className="size-3" />
|
||||
Clear
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Failure({ event }: { event: EventRow }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [first, ...rest] = event.detail.split("\n")
|
||||
return (
|
||||
<div className="border-b border-border py-2 last:border-0">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-start gap-2 text-left"
|
||||
onClick={() => setOpen(!open)}
|
||||
disabled={rest.length === 0}
|
||||
>
|
||||
{rest.length ? (
|
||||
open ? (
|
||||
<ChevronDown className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronRight className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
|
||||
)
|
||||
) : (
|
||||
<span className="size-4 shrink-0" />
|
||||
)}
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="font-mono text-sm">
|
||||
{event.node || event.flow || "engine"}
|
||||
</span>
|
||||
<span className="ml-2 text-sm text-muted-foreground">{first}</span>
|
||||
</span>
|
||||
<span className="shrink-0 text-xs text-muted-foreground">
|
||||
{ago(event.ts)}
|
||||
</span>
|
||||
</button>
|
||||
{open && rest.length ? (
|
||||
<pre className="mt-2 max-h-64 overflow-auto rounded-md border border-border bg-muted/40 p-3 font-mono text-xs">
|
||||
{rest.join("\n")}
|
||||
</pre>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* What the engine has been doing, as charts over a day and the records behind
|
||||
* them.
|
||||
*
|
||||
* The two charts each drive the list beside them: throughput picks the runs of
|
||||
* a minute, failures and timing picks that minute's failures.
|
||||
*/
|
||||
export function HealthActivity() {
|
||||
const live = useEngineEvents()
|
||||
const queryClient = useQueryClient()
|
||||
const runsAt = useMoment()
|
||||
const failuresAt = useMoment()
|
||||
|
||||
const { data: series } = useQuery(timeseriesQueryOptions())
|
||||
const { data: runs } = useQuery(runsQueryOptions())
|
||||
const { data: failures } = useQuery(failuresQueryOptions())
|
||||
const { data: audit } = useQuery(auditQueryOptions())
|
||||
const { data: dead } = useQuery(deadLetterQueryOptions())
|
||||
|
||||
// Something just went wrong on the socket. The row for it is written on the
|
||||
// collector's next flush, so the refetch waits that out rather than asking
|
||||
// for a failure the database does not have yet.
|
||||
//
|
||||
// The newest event's minute, not the count: the count stops changing once the
|
||||
// ring is full, and a per-event key would let a flapping node restart the
|
||||
// timer forever without it ever firing.
|
||||
const seen = live.length ? Math.floor(live[live.length - 1].ts / 60) : 0
|
||||
useEffect(() => {
|
||||
if (!seen) return
|
||||
const timer = setTimeout(() => {
|
||||
queryClient.invalidateQueries({ queryKey: healthKeys.events })
|
||||
queryClient.invalidateQueries({ queryKey: healthKeys.summary })
|
||||
}, 16000)
|
||||
return () => clearTimeout(timer)
|
||||
}, [seen, queryClient])
|
||||
|
||||
const points = series ?? []
|
||||
const at = (
|
||||
pick: (point: (typeof points)[number]) => number,
|
||||
): HistoryPoint[] =>
|
||||
points.map((point) => ({ ts: point.ts, value: pick(point) }))
|
||||
|
||||
const shownRuns =
|
||||
runsAt.at === null
|
||||
? (runs ?? []).slice(0, RUNS_SHOWN)
|
||||
: (runs ?? []).filter((run) => minuteOf(run.started_at) === runsAt.at)
|
||||
const shownFailures =
|
||||
failuresAt.at === null
|
||||
? (failures ?? []).slice(0, FAILURES_SHOWN)
|
||||
: (failures ?? []).filter((event) => minuteOf(event.ts) === failuresAt.at)
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="grid gap-4 lg:grid-cols-2">
|
||||
<Chart
|
||||
title="Throughput per minute"
|
||||
labels={["messages", "executions"]}
|
||||
plots={[
|
||||
at((point) => point.messages),
|
||||
at((point) => point.executions),
|
||||
]}
|
||||
moment={runsAt}
|
||||
/>
|
||||
<Chart
|
||||
title="Failures and timing (ms)"
|
||||
labels={["errors", "avg", "lag"]}
|
||||
plots={[
|
||||
at((point) => point.errors),
|
||||
at((point) => point.avg_ms),
|
||||
at((point) => point.avg_lag_ms),
|
||||
]}
|
||||
moment={failuresAt}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="grid content-start gap-4 lg:grid-cols-2">
|
||||
<div className="grid content-start gap-3">
|
||||
<ListHeader title="Recent runs" moment={runsAt} />
|
||||
<div
|
||||
className={cn(
|
||||
CARD,
|
||||
// Capped rather than as long as it happens to be: the two lists
|
||||
// sit side by side, and a filtered one is meant to be scrolled.
|
||||
"max-h-96 overflow-y-auto",
|
||||
runsAt.pinned !== null && "border-primary",
|
||||
)}
|
||||
data-testid="recent-runs"
|
||||
>
|
||||
{shownRuns.length ? (
|
||||
shownRuns.map((run) => (
|
||||
<div
|
||||
key={run.id}
|
||||
className="flex items-baseline gap-3 border-b border-border py-2 text-sm last:border-0"
|
||||
>
|
||||
<span className="min-w-0 flex-1 truncate font-mono">
|
||||
{run.flow}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{run.source}
|
||||
</span>
|
||||
<span
|
||||
className={
|
||||
run.status === "error"
|
||||
? "text-destructive"
|
||||
: run.status === "ok"
|
||||
? "text-status-success"
|
||||
: "text-muted-foreground"
|
||||
}
|
||||
>
|
||||
{run.status}
|
||||
</span>
|
||||
<span className="w-16 text-right text-muted-foreground">
|
||||
{compact(run.duration_ms)} ms
|
||||
</span>
|
||||
<span className="w-16 text-right text-xs text-muted-foreground">
|
||||
{ago(run.started_at)}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{runsAt.at === null
|
||||
? "No runs recorded yet."
|
||||
: "No run from this minute is in the recent list."}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid content-start gap-3">
|
||||
<ListHeader title="Failures" moment={failuresAt} />
|
||||
<div
|
||||
className={cn(
|
||||
CARD,
|
||||
"max-h-96 overflow-y-auto",
|
||||
failuresAt.pinned !== null && "border-primary",
|
||||
)}
|
||||
data-testid="failures"
|
||||
>
|
||||
{shownFailures.length ? (
|
||||
shownFailures.map((event) => (
|
||||
<Failure key={event.id} event={event} />
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{failuresAt.at === null
|
||||
? "Nothing has failed in the last day."
|
||||
: "Nothing failed in this minute."}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{dead?.length ? (
|
||||
<section className="grid gap-3">
|
||||
<h2 className={PANEL_SECTION}>Given up on</h2>
|
||||
<div className={CARD}>
|
||||
{dead.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-baseline gap-3 border-b border-border py-2 text-sm last:border-0"
|
||||
>
|
||||
<span className="min-w-0 flex-1 truncate font-mono">
|
||||
{item.node}
|
||||
</span>
|
||||
<span className="text-muted-foreground">{item.reason}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{ago(item.ts)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
<section className="grid gap-3">
|
||||
<h2 className={PANEL_SECTION}>Changes</h2>
|
||||
<div className={CARD}>
|
||||
{audit?.length ? (
|
||||
audit.map((event) => (
|
||||
<div
|
||||
key={event.id}
|
||||
className="flex items-baseline gap-3 border-b border-border py-2 text-sm last:border-0"
|
||||
>
|
||||
<span className="min-w-0 flex-1 truncate">
|
||||
{event.actor} {event.detail}
|
||||
{event.flow ? (
|
||||
<span className="ml-1 font-mono text-muted-foreground">
|
||||
{event.flow}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
<span className="shrink-0 text-xs text-muted-foreground">
|
||||
{ago(event.ts)}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nothing has changed yet.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { Link } from "@tanstack/react-router"
|
||||
|
||||
import type { FlowRollup, HistoryPoint } from "@/client"
|
||||
import { shape } from "@/components/Flow/MessageSparkline"
|
||||
import { PANEL_SECTION } from "@/components/Flow/SidePanel"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { compact } from "@/lib/utils"
|
||||
import {
|
||||
ago,
|
||||
CARD,
|
||||
failuresQueryOptions,
|
||||
flowRollupsQueryOptions,
|
||||
summaryQueryOptions,
|
||||
} from "./queries"
|
||||
|
||||
function Tile({
|
||||
label,
|
||||
value,
|
||||
note,
|
||||
}: {
|
||||
label: string
|
||||
value: string
|
||||
note?: string
|
||||
}) {
|
||||
return (
|
||||
<div className={CARD}>
|
||||
<div className={PANEL_SECTION}>{label}</div>
|
||||
<div className="mt-1 text-2xl">{value}</div>
|
||||
{note ? (
|
||||
<div className="text-xs text-muted-foreground">{note}</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** A flow's execution trend, drawn from the 60 slices the rollup carries. */
|
||||
function Spark({ counts }: { counts: number[] }) {
|
||||
const points: HistoryPoint[] = counts.map((value, index) => ({
|
||||
ts: index,
|
||||
value,
|
||||
}))
|
||||
if (points.every((point) => point.value === 0)) {
|
||||
return <span className="text-xs text-muted-foreground">nothing yet</span>
|
||||
}
|
||||
const { line } = shape(points)
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="none"
|
||||
className="h-6 w-24 overflow-visible"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d={line}
|
||||
fill="none"
|
||||
stroke="var(--chart-1)"
|
||||
strokeWidth="1.5"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* How the engine is doing, and how each flow has been doing for a day.
|
||||
*
|
||||
* The tiles are the standing state; the table below is the same day the charts
|
||||
* cover, one row per flow.
|
||||
*/
|
||||
export function HealthOverview() {
|
||||
const { data: summary } = useQuery(summaryQueryOptions())
|
||||
const { data: flows } = useQuery(flowRollupsQueryOptions())
|
||||
// Shares the list below's cache entry, for the one tile that dates them.
|
||||
const { data: failures } = useQuery(failuresQueryOptions())
|
||||
|
||||
const queue = (summary?.queue ?? {}) as Record<string, number>
|
||||
const degraded = summary?.status === "degraded"
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="grid gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<h2 className={PANEL_SECTION}>Health</h2>
|
||||
<Badge variant={degraded ? "destructive" : "secondary"}>
|
||||
{degraded ? "Degraded" : "Running normally"}
|
||||
</Badge>
|
||||
</div>
|
||||
{summary?.problems.length ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{summary.problems.join(" · ")}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
|
||||
<Tile
|
||||
label="Nodes"
|
||||
value={String(summary?.nodes.total ?? 0)}
|
||||
note={
|
||||
summary?.nodes.error
|
||||
? `${summary.nodes.error} failed to load`
|
||||
: "all loaded"
|
||||
}
|
||||
/>
|
||||
<Tile
|
||||
label="Flows running"
|
||||
value={`${summary?.flows.running ?? 0}/${summary?.flows.total ?? 0}`}
|
||||
note={
|
||||
summary?.flows.quarantined
|
||||
? `${summary.flows.quarantined} quarantined`
|
||||
: summary?.flows.paused
|
||||
? `${summary.flows.paused} paused`
|
||||
: "none paused"
|
||||
}
|
||||
/>
|
||||
<Tile
|
||||
label="Failures (24h)"
|
||||
value={String(summary?.failures_24h ?? 0)}
|
||||
note={
|
||||
failures?.length
|
||||
? `latest ${ago(failures[0].ts)}`
|
||||
: "nothing recorded"
|
||||
}
|
||||
/>
|
||||
<Tile
|
||||
label="Queue in flight"
|
||||
value={String(queue.pending ?? 0)}
|
||||
note={`${queue.delayed ?? 0} waiting · ${queue.parked ?? 0} parked`}
|
||||
/>
|
||||
<Tile
|
||||
label="Loop lag"
|
||||
value={`${compact(summary?.loop_lag.ewma ?? 0)} ms`}
|
||||
note={`peak ${compact(summary?.loop_lag.max_60s ?? 0)} ms in the last minute`}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-3">
|
||||
<h2 className={PANEL_SECTION}>Flow activity (24h)</h2>
|
||||
<div className={`${CARD} overflow-x-auto`}>
|
||||
<table className="w-full text-sm">
|
||||
<thead className="text-xs text-muted-foreground">
|
||||
<tr className="text-left">
|
||||
<th className="pb-2 font-medium">Flow</th>
|
||||
<th className="pb-2 font-medium">Executions</th>
|
||||
<th className="pb-2 font-medium">Errors</th>
|
||||
<th className="pb-2 font-medium">Avg</th>
|
||||
<th className="pb-2 font-medium">Lag</th>
|
||||
<th className="pb-2 font-medium">Trend</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(flows ?? []).map((row: FlowRollup) => (
|
||||
<tr key={row.flow} className="border-t border-border">
|
||||
<td className="py-2">
|
||||
<Link
|
||||
to="/flows/$flowName"
|
||||
params={{ flowName: row.flow }}
|
||||
className="font-mono hover:underline"
|
||||
>
|
||||
{row.flow || "—"}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="py-2">{row.executions}</td>
|
||||
<td className="py-2">
|
||||
{row.errors ? (
|
||||
<Badge variant="destructive">{row.errors} failed</Badge>
|
||||
) : (
|
||||
<span className="text-muted-foreground">none</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2">{compact(row.avg_ms)} ms</td>
|
||||
<td className="py-2">{compact(row.avg_lag_ms)} ms</td>
|
||||
<td className="py-2">
|
||||
<Spark counts={row.spark} />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{flows?.length === 0 ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={6}
|
||||
className="py-6 text-center text-muted-foreground"
|
||||
>
|
||||
No flow has run in the last day.
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import { ObservabilityService } from "@/client"
|
||||
|
||||
/** The live view; anything older is the collector's rollups. */
|
||||
export const HOURS = 24
|
||||
|
||||
/** Another tab can change things, and the engine fails flows on its own. */
|
||||
const REFRESH = 30_000
|
||||
|
||||
/**
|
||||
* How deep the run and failure lists are read.
|
||||
*
|
||||
* Deeper than they are shown: picking a minute off a chart filters these rows
|
||||
* client-side, and a list holding only the newest handful would have nothing
|
||||
* to find for any minute but the current one.
|
||||
*
|
||||
* ponytail: the runs endpoint caps at 200 and takes no time range, so a busy
|
||||
* engine still only covers its last minute or so. A `since` parameter is what
|
||||
* would let a moment on the chart reach the whole day.
|
||||
*/
|
||||
const RUN_DEPTH = 200
|
||||
const EVENT_DEPTH = 100
|
||||
|
||||
export const healthKeys = {
|
||||
all: ["observability"] as const,
|
||||
summary: ["observability", "summary"] as const,
|
||||
events: ["observability", "events"] as const,
|
||||
}
|
||||
|
||||
/** The resting surface these screens are built from. */
|
||||
export const CARD = "rounded-lg border border-border bg-card p-4 shadow-e1"
|
||||
|
||||
export const summaryQueryOptions = () => ({
|
||||
queryKey: healthKeys.summary,
|
||||
queryFn: () => ObservabilityService.readSummary(),
|
||||
refetchInterval: 10_000,
|
||||
})
|
||||
|
||||
export const timeseriesQueryOptions = () => ({
|
||||
queryKey: ["observability", "timeseries", HOURS] as const,
|
||||
queryFn: () => ObservabilityService.readTimeseries({ hours: HOURS }),
|
||||
refetchInterval: REFRESH,
|
||||
})
|
||||
|
||||
export const flowRollupsQueryOptions = () => ({
|
||||
queryKey: ["observability", "flows", HOURS] as const,
|
||||
queryFn: () => ObservabilityService.readFlowRollups({ hours: HOURS }),
|
||||
refetchInterval: REFRESH,
|
||||
})
|
||||
|
||||
export const runsQueryOptions = () => ({
|
||||
queryKey: ["observability", "runs"] as const,
|
||||
queryFn: () => ObservabilityService.readRuns({ limit: RUN_DEPTH }),
|
||||
refetchInterval: REFRESH,
|
||||
})
|
||||
|
||||
export const failuresQueryOptions = () => ({
|
||||
queryKey: [...healthKeys.events, "failure"] as const,
|
||||
queryFn: () =>
|
||||
ObservabilityService.readEvents({ kind: "failure", limit: EVENT_DEPTH }),
|
||||
refetchInterval: REFRESH,
|
||||
})
|
||||
|
||||
export const auditQueryOptions = () => ({
|
||||
queryKey: [...healthKeys.events, "audit"] as const,
|
||||
queryFn: () => ObservabilityService.readEvents({ kind: "audit", limit: 15 }),
|
||||
refetchInterval: REFRESH,
|
||||
})
|
||||
|
||||
export const deadLetterQueryOptions = () => ({
|
||||
queryKey: ["observability", "dead-letter"] as const,
|
||||
queryFn: () => ObservabilityService.readDeadLetters({ limit: 20 }),
|
||||
refetchInterval: REFRESH,
|
||||
})
|
||||
|
||||
/** How long ago something happened, in the coarsest unit that still says it. */
|
||||
export function ago(ts: string | number | null | undefined): string {
|
||||
if (!ts) return "—"
|
||||
const stamp = typeof ts === "number" ? ts * 1000 : Date.parse(ts)
|
||||
const seconds = Math.max(0, (Date.now() - stamp) / 1000)
|
||||
if (seconds < 90) return `${Math.round(seconds)}s ago`
|
||||
if (seconds < 5400) return `${Math.round(seconds / 60)}m ago`
|
||||
if (seconds < 172800) return `${Math.round(seconds / 3600)}h ago`
|
||||
return `${Math.round(seconds / 86400)}d ago`
|
||||
}
|
||||
|
||||
/**
|
||||
* The minute a timestamp belongs to, as unix seconds.
|
||||
*
|
||||
* Minutes are the granularity the engine stores its metrics at, so this is
|
||||
* also the finest moment a chart can be asked about.
|
||||
*/
|
||||
export const minuteOf = (ts: string) => Math.floor(Date.parse(ts) / 60000) * 60
|
||||
|
||||
/** A moment as a clock reading, which is how the charts label their axis. */
|
||||
export const clock = (ts: number) =>
|
||||
new Date(ts * 1000).toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
Reference in New Issue
Block a user