railwatch 0.6.1 → 0.7.0

data/app/frontend/components/railwatch/segmented.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+
+// Nightwatch's period bar: a bordered pill holding mono buttons, the selected
+// one filled blue. Used for time windows, percentiles, and status tabs so
+// every segmented choice in the app looks the same.
+export function Segmented({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        "bg-card flex h-8 shrink-0 items-center gap-px rounded-lg border p-0.5",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function SegmentedItem({
+  active,
+  onClick,
+  children,
+  className,
+  mono = true,
+  disabled,
+  "aria-label": ariaLabel,
+}: {
+  active: boolean
+  onClick: () => void
+  children: ReactNode
+  className?: string
+  mono?: boolean
+  disabled?: boolean
+  "aria-label"?: string
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-pressed={active}
+      aria-label={ariaLabel}
+      className={cn(
+        "flex h-full min-w-8 items-center justify-center gap-1.5 rounded-md border px-2.5 text-xs whitespace-nowrap transition-colors",
+        mono && "font-mono uppercase",
+        active
+          ? "bg-primary border-primary text-primary-foreground"
+          : "text-muted-foreground hover:bg-accent hover:text-foreground border-transparent",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+    >
+      {children}
+    </button>
+  )
+}

data/app/frontend/components/railwatch/series-chart.tsx

@@ -0,0 +1,400 @@
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  ReferenceLine,
+  XAxis,
+  YAxis,
+} from "recharts"
+
+import { useChartHover } from "@/components/railwatch/chart-hover"
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart"
+import { ms } from "@/lib/format"
+import type {
+  DeployMarker,
+  Percentile,
+  SeriesPoint,
+  SessionStatusPoint,
+} from "@/types"
+
+// Status vocabulary, same as the badges: ok is quiet grey so the amber and
+// red slices are what the eye lands on; latency lines use the accent for
+// the chosen percentile and a muted amber for the average.
+const config = {
+  count: { label: "OK", color: "var(--ok)" },
+  errors: { label: "5xx", color: "var(--danger)" },
+  client_errors: { label: "4xx", color: "var(--warning)" },
+  p50: { label: "p50", color: "var(--primary)" },
+  p95: { label: "p95", color: "var(--primary)" },
+  p99: { label: "p99", color: "var(--primary)" },
+  avg: { label: "avg", color: "var(--warning)" },
+} satisfies ChartConfig
+
+// Bucket width in ms, read off the data so the axis needs no page context:
+// a minute chart labels ticks by time, a day chart by date.
+function bucketWidth(data: { t: string }[]) {
+  if (data.length < 2) return 0
+  return new Date(data[1].t).getTime() - new Date(data[0].t).getTime()
+}
+
+const DAY = 24 * 60 * 60 * 1000
+
+function tickFormatter(data: { t: string }[]) {
+  const width = bucketWidth(data)
+  const span =
+    data.length > 1
+      ? new Date(data[data.length - 1].t).getTime() -
+        new Date(data[0].t).getTime()
+      : 0
+  if (width >= DAY || span > 2 * DAY)
+    return (t: string) =>
+      new Date(t).toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+      })
+  return (t: string) =>
+    new Date(t).toLocaleTimeString(undefined, {
+      hour: "2-digit",
+      minute: "2-digit",
+    })
+}
+
+function stamp(t: string) {
+  const d = new Date(t)
+  return d.toLocaleString(undefined, {
+    day: "2-digit",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+const axisTick = { fontSize: 10, fontFamily: "var(--font-mono)" }
+
+// A line only joins neighbouring points, so a bucket with data between two
+// quiet ones (common at a minute's width) would draw nothing. Mark those
+// lone points with a dot; everything else stays a plain line. Recharts can
+// call this with an index past the array it was built over (a live reload
+// swapping in a shorter series mid-render did, LC-43), so neighbours are
+// looked up defensively rather than assumed.
+export function loneDot(
+  data: Record<string, unknown>[],
+  key: string,
+  color: string,
+) {
+  const LoneDot = (props: { cx?: number; cy?: number; index?: number }) => {
+    const { cx, cy, index } = props
+    if (cx == null || cy == null || index == null) return <g key={index} />
+    const before = data[index - 1]?.[key] ?? null
+    const after = data[index + 1]?.[key] ?? null
+    if (before != null || after != null) return <g key={index} />
+    return <circle key={index} cx={cx} cy={cy} r={2} fill={color} />
+  }
+  return LoneDot
+}
+
+function markers(deploys: DeployMarker[] = []) {
+  return deploys.map((d) => (
+    <ReferenceLine
+      key={d.deploy}
+      x={new Date(d.at).toISOString()}
+      stroke="var(--primary)"
+      strokeDasharray="3 3"
+      label={{
+        value: d.ref,
+        position: "insideTopRight",
+        fontSize: 9,
+        fill: "var(--primary)",
+        fontFamily: "var(--font-mono)",
+      }}
+    />
+  ))
+}
+
+// Recharts calls onMouseMove with the hovered point's x value as
+// `activeLabel` (our bucket ISO timestamp) — feed that into ChartHoverProvider
+// so a table elsewhere on the page can highlight the matching row.
+function useBucketHover() {
+  const { setHoveredKey } = useChartHover()
+  return {
+    onMouseMove: (state: { activeLabel?: string | number }) => {
+      if (typeof state?.activeLabel === "string")
+        setHoveredKey(state.activeLabel)
+    },
+    onMouseLeave: () => setHoveredKey(null),
+  }
+}
+
+// Bucket-range caption under a chart, like Nightwatch's "02 Nov 18:00 UTC".
+function Range({ data }: { data: { t: string }[] }) {
+  if (data.length === 0) return null
+  return (
+    <div className="text-muted-foreground mt-1 flex justify-between font-mono text-[10px]">
+      <span>{stamp(data[0].t)}</span>
+      <span>{stamp(data[data.length - 1].t)}</span>
+    </div>
+  )
+}
+
+export function ThroughputChart({
+  data,
+  deploys,
+  label = "Requests",
+  className = "h-40",
+}: {
+  data: SeriesPoint[]
+  deploys?: DeployMarker[]
+  label?: string
+  className?: string
+}) {
+  const cfg = { ...config, count: { ...config.count, label } }
+  const hover = useBucketHover()
+  const tick = tickFormatter(data)
+  return (
+    <div>
+      <ChartContainer config={cfg} className={`${className} w-full`}>
+        <BarChart
+          data={data.map((d) => ({
+            ...d,
+            t: new Date(d.t).toISOString(),
+            ok: Math.max(0, d.count - d.errors - d.client_errors),
+          }))}
+          barCategoryGap={2}
+          onMouseMove={hover.onMouseMove}
+          onMouseLeave={hover.onMouseLeave}
+        >
+          <CartesianGrid vertical={false} strokeDasharray="2 4" />
+          <XAxis
+            dataKey="t"
+            tickFormatter={tick}
+            tickLine={false}
+            axisLine={false}
+            minTickGap={40}
+            tick={axisTick}
+          />
+          <YAxis
+            width={36}
+            tickLine={false}
+            axisLine={false}
+            tick={axisTick}
+            tickFormatter={(v) => compact(Number(v))}
+          />
+          <ChartTooltip
+            content={
+              <ChartTooltipContent labelFormatter={(v) => stamp(String(v))} />
+            }
+          />
+          <Bar
+            dataKey="ok"
+            name="count"
+            fill="var(--color-count)"
+            stackId="a"
+          />
+          <Bar
+            dataKey="client_errors"
+            fill="var(--color-client_errors)"
+            stackId="a"
+          />
+          <Bar
+            dataKey="errors"
+            fill="var(--color-errors)"
+            stackId="a"
+            radius={[2, 2, 0, 0]}
+          />
+          {markers(deploys)}
+        </BarChart>
+      </ChartContainer>
+      <Range data={data} />
+    </div>
+  )
+}
+
+// Release health's own vocabulary: sessions stacked by the worst status
+// they reached, so a regression reads as amber and red eating the band.
+const sessionConfig = {
+  ok: { label: "ok", color: "var(--ok)" },
+  errored: { label: "errored", color: "var(--warning)" },
+  crashed: { label: "crashed", color: "var(--danger)" },
+} satisfies ChartConfig
+
+export function SessionStatusChart({
+  data,
+  deploys,
+  className = "h-40",
+}: {
+  data: SessionStatusPoint[]
+  deploys?: DeployMarker[]
+  className?: string
+}) {
+  const hover = useBucketHover()
+  const tick = tickFormatter(data)
+  return (
+    <div>
+      <ChartContainer config={sessionConfig} className={`${className} w-full`}>
+        <AreaChart
+          data={data.map((d) => ({ ...d, t: new Date(d.t).toISOString() }))}
+          onMouseMove={hover.onMouseMove}
+          onMouseLeave={hover.onMouseLeave}
+        >
+          <CartesianGrid vertical={false} strokeDasharray="2 4" />
+          <XAxis
+            dataKey="t"
+            tickFormatter={tick}
+            tickLine={false}
+            axisLine={false}
+            minTickGap={40}
+            tick={axisTick}
+          />
+          <YAxis
+            width={36}
+            tickLine={false}
+            axisLine={false}
+            tick={axisTick}
+            tickFormatter={(v) => compact(Number(v))}
+          />
+          <ChartTooltip
+            content={
+              <ChartTooltipContent labelFormatter={(v) => stamp(String(v))} />
+            }
+          />
+          {(["ok", "errored", "crashed"] as const).map((key) => (
+            <Area
+              key={key}
+              dataKey={key}
+              stackId="sessions"
+              stroke={`var(--color-${key})`}
+              fill={`var(--color-${key})`}
+              fillOpacity={0.3}
+              strokeWidth={1.25}
+              isAnimationActive={false}
+            />
+          ))}
+          {markers(deploys)}
+        </AreaChart>
+      </ChartContainer>
+      <Range data={data} />
+    </div>
+  )
+}
+
+export function LatencyChart({
+  data,
+  deploys,
+  percentile = "p95",
+  className = "h-40",
+}: {
+  data: SeriesPoint[]
+  deploys?: DeployMarker[]
+  percentile?: Percentile
+  className?: string
+}) {
+  const hover = useBucketHover()
+  const tick = tickFormatter(data)
+  const points = data.map((d) => ({ ...d, t: new Date(d.t).toISOString() }))
+  return (
+    <div>
+      <ChartContainer config={config} className={`${className} w-full`}>
+        <LineChart
+          data={points}
+          onMouseMove={hover.onMouseMove}
+          onMouseLeave={hover.onMouseLeave}
+        >
+          <CartesianGrid vertical={false} strokeDasharray="2 4" />
+          <XAxis
+            dataKey="t"
+            tickFormatter={tick}
+            tickLine={false}
+            axisLine={false}
+            minTickGap={40}
+            tick={axisTick}
+          />
+          <YAxis
+            width={44}
+            tickLine={false}
+            axisLine={false}
+            tick={axisTick}
+            tickFormatter={(v) => ms(Number(v), 0)}
+          />
+          <ChartTooltip
+            content={
+              <ChartTooltipContent
+                labelFormatter={(v) => stamp(String(v))}
+                formatter={(value, name) => [
+                  value == null ? "—" : ms(Number(value)),
+                  String(name),
+                ]}
+              />
+            }
+          />
+          <Line
+            dataKey={percentile}
+            stroke={`var(--color-${percentile})`}
+            dot={loneDot(points, percentile, `var(--color-${percentile})`)}
+            strokeWidth={1.75}
+            isAnimationActive={false}
+          />
+          <Line
+            dataKey="avg"
+            stroke="var(--color-avg)"
+            dot={loneDot(points, "avg", "var(--color-avg)")}
+            strokeWidth={1.25}
+            strokeOpacity={0.8}
+            isAnimationActive={false}
+          />
+          {markers(deploys)}
+        </LineChart>
+      </ChartContainer>
+      <Range data={data} />
+    </div>
+  )
+}
+
+export function Sparkline({
+  data,
+  className = "h-10 w-32",
+  hoverKey,
+}: {
+  data: number[]
+  className?: string
+  hoverKey?: string
+}) {
+  const { hoveredKey, setHoveredKey } = useChartHover()
+  const active = hoverKey != null && hoveredKey === hoverKey
+  return (
+    <ChartContainer config={config} className={className}>
+      {/* recharts pads every side by 5px by default, which leaves a table
+          cell's 10px-tall sparkline no plot area at all; the stroke's
+          half-width is the only margin a chart this small needs. */}
+      <AreaChart
+        data={data.map((v) => ({ v }))}
+        margin={{ top: 1, right: 1, bottom: 1, left: 1 }}
+        onMouseEnter={hoverKey ? () => setHoveredKey(hoverKey) : undefined}
+        onMouseLeave={hoverKey ? () => setHoveredKey(null) : undefined}
+      >
+        <Area
+          dataKey="v"
+          stroke={active ? "var(--primary)" : "var(--muted-foreground)"}
+          fill={active ? "var(--primary)" : "var(--muted-foreground)"}
+          fillOpacity={active ? 0.35 : 0.15}
+          strokeWidth={active ? 2 : 1.25}
+          isAnimationActive={false}
+        />
+      </AreaChart>
+    </ChartContainer>
+  )
+}
+
+function compact(n: number) {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(n >= 10_000 ? 0 : 1)}k`
+  return String(n)
+}

data/app/frontend/components/railwatch/shortcuts-dialog.tsx

@@ -0,0 +1,89 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+interface Shortcut {
+  keys: string[]
+  description: string
+}
+
+const GROUPS: { title: string; shortcuts: Shortcut[] }[] = [
+  {
+    title: "Navigation",
+    shortcuts: [
+      { keys: ["⌘", "K"], description: "Open command palette" },
+      { keys: ["g", "d"], description: "Go to dashboard" },
+      { keys: ["g", "o"], description: "Go to Overview" },
+      { keys: ["g", "r"], description: "Go to Requests" },
+      { keys: ["g", "j"], description: "Go to Jobs" },
+      { keys: ["g", "q"], description: "Go to Queries" },
+      { keys: ["g", "i"], description: "Go to Issues" },
+      { keys: ["?"], description: "Show this help" },
+    ],
+  },
+  {
+    title: "Lists (requests, jobs, queries, issues, logs, …)",
+    shortcuts: [
+      { keys: ["j"], description: "Move highlight down" },
+      { keys: ["k"], description: "Move highlight up" },
+      { keys: ["↵"], description: "Open highlighted row" },
+      { keys: ["o"], description: "Open highlighted row in a new tab" },
+      { keys: ["Esc"], description: "Clear highlight" },
+      { keys: ["/"], description: "Focus the filter bar" },
+    ],
+  },
+]
+
+export function ShortcutsDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Keyboard shortcuts</DialogTitle>
+          <DialogDescription>Available anywhere in the app.</DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-4">
+          {GROUPS.map((group) => (
+            <div key={group.title} className="flex flex-col gap-2">
+              <div className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+                {group.title}
+              </div>
+              <ul className="flex flex-col gap-2">
+                {group.shortcuts.map((shortcut) => (
+                  <li
+                    key={shortcut.description}
+                    className="flex items-center justify-between text-sm"
+                  >
+                    <span className="text-muted-foreground">
+                      {shortcut.description}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      {shortcut.keys.map((key, i) => (
+                        <kbd
+                          key={i}
+                          className="bg-muted rounded border px-1.5 py-0.5 font-mono text-xs"
+                        >
+                          {key}
+                        </kbd>
+                      ))}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

data/app/frontend/components/railwatch/signal-toast.tsx

@@ -0,0 +1,121 @@
+import { X } from "lucide-react"
+import { toast } from "sonner"
+
+import { cn } from "@/lib/utils"
+
+// Notices spoken in the signal vocabulary the rest of the UI uses. The
+// aspect carries the meaning, so there is no icon to interpret: green is
+// clear (done, saved, sent), amber is caution (something to look at, still
+// safe), red is stop (this failed). The head sits at the left of the card
+// like a lineside signal; the lit lamp is the only colour on the card.
+export type ToastAspect = "clear" | "caution" | "stop"
+
+const LAMP_CLASS: Record<ToastAspect, string> = {
+  stop: "bg-danger",
+  caution: "bg-warning",
+  clear: "bg-live",
+}
+const LAMP_ORDER: ToastAspect[] = ["stop", "caution", "clear"]
+
+// Clear notices leave on their own; the line is clear and there is nothing
+// to act on. Caution and stop wait to be read.
+const DURATION: Record<ToastAspect, number> = {
+  clear: 4000,
+  caution: 8000,
+  stop: Infinity,
+}
+
+function Head({ aspect }: { aspect: ToastAspect }) {
+  return (
+    <span
+      aria-hidden
+      className="border-foreground/30 bg-background/60 inline-flex w-3 shrink-0 flex-col items-center justify-between rounded-full border px-px py-1"
+      style={{ height: 30 }}
+    >
+      {LAMP_ORDER.map((lamp) => (
+        <span key={lamp} className="relative inline-flex size-2">
+          {lamp === aspect && (
+            <span
+              className={cn(
+                "absolute inline-flex h-full w-full rounded-full opacity-40 blur-[2px]",
+                LAMP_CLASS[lamp],
+              )}
+            />
+          )}
+          <span
+            className={cn(
+              "relative inline-flex size-2 rounded-full",
+              lamp === aspect ? LAMP_CLASS[lamp] : "bg-neutral-400/15",
+            )}
+          />
+        </span>
+      ))}
+    </span>
+  )
+}
+
+// The card itself. `onDismiss` is what the X does; the marketing hero
+// renders one with no dismiss as a static example.
+export function SignalCard({
+  aspect,
+  title,
+  description,
+  onDismiss,
+  className,
+}: {
+  aspect: ToastAspect
+  title: string
+  description?: string
+  onDismiss?: () => void
+  className?: string
+}) {
+  const role = aspect === "stop" ? "alert" : "status"
+  return (
+    <div
+      role={onDismiss ? role : undefined}
+      data-aspect={aspect}
+      className={cn(
+        "bg-popover text-popover-foreground flex w-full items-start gap-3 rounded-lg border px-3.5 py-3 shadow-lg md:w-[360px]",
+        className,
+      )}
+    >
+      <Head aspect={aspect} />
+      <div className="min-w-0 flex-1 pt-0.5">
+        <p className="text-sm leading-snug font-medium">{title}</p>
+        {description && (
+          <p className="text-muted-foreground mt-0.5 text-xs leading-relaxed">
+            {description}
+          </p>
+        )}
+      </div>
+      {onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          aria-label="Dismiss"
+          className="text-muted-foreground hover:text-foreground -mt-0.5 -mr-1 rounded p-1"
+        >
+          <X className="size-3.5" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+export function signalToast(
+  aspect: ToastAspect,
+  title: string,
+  description?: string,
+) {
+  return toast.custom(
+    (id) => (
+      <SignalCard
+        aspect={aspect}
+        title={title}
+        description={description}
+        onDismiss={() => toast.dismiss(id)}
+      />
+    ),
+    { duration: DURATION[aspect], unstyled: true },
+  )
+}

data/app/frontend/components/railwatch/sort-header.tsx

@@ -0,0 +1,37 @@
+import { ArrowDown, ArrowUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+// Clickable DataTable column header for a sortable numeric column. Dumb by
+// design: the page builds the sort/dir URL with its own route helper and
+// passes the click handler in.
+export function SortHeader({
+  label,
+  active,
+  dir,
+  onClick,
+}: {
+  label: string
+  active: boolean
+  dir: "asc" | "desc"
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "hover:text-foreground inline-flex items-center gap-1",
+        active && "text-foreground font-semibold",
+      )}
+    >
+      {label}
+      {active &&
+        (dir === "asc" ? (
+          <ArrowUp className="size-3" />
+        ) : (
+          <ArrowDown className="size-3" />
+        ))}
+    </button>
+  )
+}