railwatch 0.6.1 → 0.7.0

data/app/frontend/pages/thresholds/index.tsx

@@ -0,0 +1,414 @@
+import { Form, router, usePage } from "@inertiajs/react"
+import { Bell } from "lucide-react"
+import { useState } from "react"
+
+import InputError from "@/components/input-error"
+import { DataTable } from "@/components/railwatch/data-table"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { RelativeTime } from "@/components/railwatch/relative-time"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import EnvLayout from "@/layouts/env-layout"
+import * as R from "@/routes"
+import type { SharedProps } from "@/types"
+
+interface Threshold {
+  id: number
+  target_kind: string
+  target: string
+  metric: string
+  limit: number
+  window_minutes: number
+  description: string
+}
+interface AnomalyRule {
+  id: number
+  target_kind: string
+  target: string
+  metric: string
+  deviation: number
+  window_minutes: number
+  baseline_days: number
+  enabled: boolean
+  last_fired_at: string | null
+  description: string
+}
+interface Props {
+  thresholds: Threshold[]
+  routes: string[]
+  jobs: string[]
+  kinds: string[]
+  metrics: string[]
+  metrics_for_kind: Record<string, string[]>
+  units: Record<string, string>
+  llm_models: string[]
+  anomaly_rules: AnomalyRule[]
+  anomaly_target_kinds: string[]
+  anomaly_metrics: string[]
+  anomaly_metrics_for_kind: Record<string, string[]>
+}
+
+export default function Thresholds(p: Props) {
+  const { environment } = usePage<SharedProps>().props
+  // Spend and tokens only exist on llm_calls, so the metric list narrows
+  // with the kind rather than offering a rule the server would reject.
+  const [kind, setKind] = useState(p.kinds[0])
+  const [metric, setMetric] = useState(p.metrics[0])
+  const [anomalyKind, setAnomalyKind] = useState(p.anomaly_target_kinds[0])
+  const [anomalyMetric, setAnomalyMetric] = useState(p.anomaly_metrics[0])
+  const anomalyAvailable =
+    p.anomaly_metrics_for_kind[anomalyKind] ?? p.anomaly_metrics
+  const available = p.metrics_for_kind[kind] ?? p.metrics
+  const unit = p.units[metric] ?? "ms"
+  const limitLabel =
+    unit === "$"
+      ? "Limit (US$)"
+      : unit === "%"
+        ? "Limit (%)"
+        : unit === ""
+          ? "Limit (count)"
+          : "Limit (ms)"
+  const a = environment!.application_id
+  const e = environment!.id
+  return (
+    <EnvLayout title="Thresholds">
+      <PageHeader
+        withWindow={false}
+        title="Thresholds"
+        description="Performance rules. When a route, job, or query crosses one, Railwatch opens a performance issue and alerts the rules subscribed to thresholds."
+      />
+      <Card>
+        <CardHeader>
+          <CardTitle>Add a threshold</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Form
+            method="post"
+            action={R.applicationEnvironmentThresholdsPath(a, e)}
+            className="grid gap-3 md:grid-cols-6"
+          >
+            {({ errors, processing }) => (
+              <>
+                <div className="grid gap-1">
+                  <Label htmlFor="target_kind">Kind</Label>
+                  <select
+                    id="target_kind"
+                    name="target_kind"
+                    value={kind}
+                    onChange={(e) => {
+                      setKind(e.target.value)
+                      const next =
+                        p.metrics_for_kind[e.target.value] ?? p.metrics
+                      if (!next.includes(metric)) setMetric(next[0])
+                    }}
+                    className="border-input h-9 rounded-md border bg-transparent px-2 text-sm"
+                  >
+                    {p.kinds.map((k) => (
+                      <option key={k} value={k}>
+                        {k}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="grid gap-1 md:col-span-2">
+                  <Label htmlFor="target">Target</Label>
+                  <Input
+                    id="target"
+                    name="target"
+                    defaultValue="*"
+                    list="targets"
+                    placeholder="* for all, or a route / job name"
+                  />
+                  <datalist id="targets">
+                    <option value="*" />
+                    <option value="unmatched" />
+                    {p.routes.map((r) => (
+                      <option key={r} value={r} />
+                    ))}
+                    {p.jobs.map((j) => (
+                      <option key={j} value={j} />
+                    ))}
+                    {p.llm_models.map((m) => (
+                      <option key={m} value={m} />
+                    ))}
+                  </datalist>
+                  <InputError messages={errors.target} />
+                </div>
+                <div className="grid gap-1">
+                  <Label htmlFor="metric">Metric</Label>
+                  <select
+                    id="metric"
+                    name="metric"
+                    className="border-input h-9 rounded-md border bg-transparent px-2 text-sm"
+                    value={metric}
+                    onChange={(e) => setMetric(e.target.value)}
+                  >
+                    {available.map((m) => (
+                      <option key={m} value={m}>
+                        {m}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="grid gap-1">
+                  <Label htmlFor="limit">{limitLabel}</Label>
+                  <Input
+                    id="limit"
+                    name="limit"
+                    type="number"
+                    step="any"
+                    defaultValue={2000}
+                  />
+                  <InputError messages={errors.limit} />
+                </div>
+                <div className="grid gap-1">
+                  <Label htmlFor="window_minutes">Window (min)</Label>
+                  <Input
+                    id="window_minutes"
+                    name="window_minutes"
+                    type="number"
+                    defaultValue={5}
+                  />
+                </div>
+                <div className="md:col-span-6">
+                  <Button disabled={processing}>Add threshold</Button>
+                </div>
+              </>
+            )}
+          </Form>
+        </CardContent>
+      </Card>
+      <DataTable
+        rows={p.thresholds}
+        rowKey={(t) => t.id}
+        empty={
+          <EmptyState
+            icon={Bell}
+            title="No thresholds yet"
+            description="Start with requests * p95 2000ms to get alerted on regressions."
+          />
+        }
+        columns={[
+          {
+            key: "d",
+            header: "Rule",
+            cell: (t) => <span className="text-sm">{t.description}</span>,
+          },
+          {
+            key: "x",
+            header: "",
+            align: "right",
+            cell: (t) => (
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() =>
+                  router.delete(
+                    R.applicationEnvironmentThresholdPath(a, e, t.id),
+                  )
+                }
+              >
+                Remove
+              </Button>
+            ),
+          },
+        ]}
+      />
+      <div>
+        <h2 className="text-base font-semibold">Anomaly rules</h2>
+        <p className="text-muted-foreground text-sm">
+          A threshold needs a number you already know. An anomaly rule learns
+          one: it compares the last few minutes against the same clock window on
+          each of the previous days and opens an issue when today sits more than
+          the given number of standard deviations above that baseline.
+        </p>
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Add an anomaly rule</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Form
+            method="post"
+            action={R.applicationEnvironmentAnomalyRulesPath(a, e)}
+            className="grid gap-3 md:grid-cols-6"
+          >
+            {({ errors, processing }) => (
+              <>
+                <div className="grid gap-1">
+                  <Label htmlFor="anomaly_target_kind">Kind</Label>
+                  <select
+                    id="anomaly_target_kind"
+                    name="target_kind"
+                    className="border-input h-9 rounded-md border bg-transparent px-2 text-sm"
+                    value={anomalyKind}
+                    onChange={(e) => {
+                      setAnomalyKind(e.target.value)
+                      const next =
+                        p.anomaly_metrics_for_kind[e.target.value] ??
+                        p.anomaly_metrics
+                      if (!next.includes(anomalyMetric))
+                        setAnomalyMetric(next[0])
+                    }}
+                  >
+                    {p.anomaly_target_kinds.map((k) => (
+                      <option key={k} value={k}>
+                        {k}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="grid gap-1 md:col-span-2">
+                  <Label htmlFor="anomaly_target">Target</Label>
+                  <Input
+                    id="anomaly_target"
+                    name="target"
+                    defaultValue="*"
+                    list="targets"
+                    placeholder="* for all, or a route / job name"
+                  />
+                  <InputError messages={errors.target} />
+                </div>
+                <div className="grid gap-1">
+                  <Label htmlFor="anomaly_metric">Metric</Label>
+                  <select
+                    id="anomaly_metric"
+                    name="metric"
+                    className="border-input h-9 rounded-md border bg-transparent px-2 text-sm"
+                    value={anomalyMetric}
+                    onChange={(e) => setAnomalyMetric(e.target.value)}
+                  >
+                    {anomalyAvailable.map((m) => (
+                      <option key={m} value={m}>
+                        {m}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="grid gap-1">
+                  <Label htmlFor="deviation">Deviation (σ)</Label>
+                  <Input
+                    id="deviation"
+                    name="deviation"
+                    type="number"
+                    step="0.5"
+                    min="0.5"
+                    defaultValue={3}
+                  />
+                  <InputError messages={errors.deviation} />
+                </div>
+                <div className="grid gap-1">
+                  <Label htmlFor="anomaly_window_minutes">Window (min)</Label>
+                  <Input
+                    id="anomaly_window_minutes"
+                    name="window_minutes"
+                    type="number"
+                    defaultValue={15}
+                  />
+                </div>
+                <div className="grid gap-1">
+                  <Label htmlFor="baseline_days">Baseline (days)</Label>
+                  <Input
+                    id="baseline_days"
+                    name="baseline_days"
+                    type="number"
+                    defaultValue={7}
+                  />
+                  <InputError messages={errors.baseline_days} />
+                </div>
+                <div className="grid gap-1">
+                  <Label htmlFor="enabled">Status</Label>
+                  <select
+                    id="enabled"
+                    name="enabled"
+                    className="border-input h-9 rounded-md border bg-transparent px-2 text-sm"
+                  >
+                    <option value="true">enabled</option>
+                    <option value="false">disabled</option>
+                  </select>
+                </div>
+                <div className="md:col-span-6">
+                  <Button disabled={processing}>Add anomaly rule</Button>
+                </div>
+              </>
+            )}
+          </Form>
+        </CardContent>
+      </Card>
+      <DataTable
+        rows={p.anomaly_rules}
+        rowKey={(r) => r.id}
+        empty={
+          <EmptyState
+            icon={Bell}
+            title="No anomaly rules yet"
+            description="Start with requests * p95 at 3σ over a 7-day baseline."
+          />
+        }
+        columns={[
+          {
+            key: "d",
+            header: "Rule",
+            cell: (r) => (
+              <span className="text-sm">
+                {r.description}
+                {r.enabled ? null : (
+                  <span className="text-muted-foreground label-caps ml-2">
+                    disabled
+                  </span>
+                )}
+              </span>
+            ),
+          },
+          {
+            key: "f",
+            header: "Last fired",
+            hideOnMobile: true,
+            cell: (r) => (
+              <RelativeTime
+                iso={r.last_fired_at}
+                className="text-muted-foreground font-mono text-xs"
+              />
+            ),
+          },
+          {
+            key: "x",
+            header: "",
+            align: "right",
+            cell: (r) => (
+              <span className="flex justify-end gap-1">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() =>
+                    router.patch(
+                      R.applicationEnvironmentAnomalyRulePath(a, e, r.id),
+                      { enabled: !r.enabled },
+                    )
+                  }
+                >
+                  {r.enabled ? "Disable" : "Enable"}
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="text-destructive"
+                  onClick={() =>
+                    router.delete(
+                      R.applicationEnvironmentAnomalyRulePath(a, e, r.id),
+                    )
+                  }
+                >
+                  Remove
+                </Button>
+              </span>
+            ),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}

data/app/frontend/pages/traces/show.tsx

@@ -0,0 +1,208 @@
+import { Link, usePage } from "@inertiajs/react"
+
+import { CopyId } from "@/components/railwatch/copy-id"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { Stat, StatStrip } from "@/components/railwatch/stat"
+import { KindBadge } from "@/components/railwatch/status-badge"
+import EnvLayout from "@/layouts/env-layout"
+import { executionPath } from "@/lib/execution-path"
+import { count, ms, statusTone } from "@/lib/format"
+import { cn } from "@/lib/utils"
+import type { SharedProps } from "@/types"
+
+interface Outgoing {
+  id: number
+  method: string | null
+  url: string
+  status_code: number | null
+  duration: number | null
+  offset: number
+}
+interface TraceExecution {
+  execution_id: string
+  kind: string
+  name: string
+  status: number | null
+  outcome: string | null
+  parent_id: string | null
+  server: string | null
+  occurred_at: string
+  duration: number
+  offset: number
+  outgoing: Outgoing[]
+}
+interface Node {
+  execution: TraceExecution
+  children: Node[]
+}
+interface Props {
+  trace_id: string
+  roots: Node[]
+  span_count: number
+  services: string[]
+  duration: number
+}
+
+interface Row {
+  key: string
+  depth: number
+  kind: string
+  label: string
+  server: string | null
+  offset: number
+  duration: number
+  href: string | null
+  failed: boolean
+}
+
+const kindLabels: Record<string, string> = {
+  request: "REQ",
+  job_attempt: "JOB",
+  scheduled_task: "TASK",
+  command: "CMD",
+  outgoing_request: "HTTP",
+}
+
+// Depth-first walk of the trace: each execution, then the HTTP calls it made
+// (one level in, and not clickable — the hop they led to is a row of its own
+// if that service reports to Railwatch), then its child executions.
+function flatten(nodes: Node[], a: number, e: number, depth = 0): Row[] {
+  return nodes.flatMap((node) => {
+    const x = node.execution
+    return [
+      {
+        key: x.execution_id,
+        depth,
+        kind: x.kind,
+        label: x.name,
+        server: x.server,
+        offset: x.offset,
+        duration: x.duration,
+        href: executionPath({
+          applicationId: a,
+          environmentId: e,
+          source: x.kind,
+          executionId: x.execution_id,
+        })!,
+        failed: statusTone(x.status, x.outcome) === "destructive",
+      },
+      ...x.outgoing.map((o) => ({
+        key: `o-${o.id}`,
+        depth: depth + 1,
+        kind: "outgoing_request",
+        label: `${o.method ?? ""} ${o.url}`.trim(),
+        server: null,
+        offset: o.offset,
+        duration: o.duration ?? 0,
+        href: null,
+        failed: statusTone(o.status_code) === "destructive",
+      })),
+      ...flatten(node.children, a, e, depth + 1),
+    ]
+  })
+}
+
+// One waterfall row. Phones stack the bar under the name/duration line;
+// from md up the three parts sit on one line against a shared time scale.
+function WaterfallRow({ row, scale }: { row: Row; scale: number }) {
+  const body = (
+    <>
+      <span
+        className="col-start-1 row-start-1 flex min-w-0 items-center gap-1.5"
+        style={{ paddingLeft: `${row.depth * 0.75}rem` }}
+      >
+        <KindBadge tone={row.failed ? "destructive" : "muted"}>
+          {kindLabels[row.kind] ?? row.kind}
+        </KindBadge>
+        <span className="truncate font-mono">{row.label}</span>
+        {row.server && (
+          <span className="text-muted-foreground hidden shrink-0 font-mono text-[10px] sm:inline">
+            {row.server}
+          </span>
+        )}
+      </span>
+      <span className="col-start-2 row-start-1 text-right font-mono tabular-nums md:col-start-3">
+        {ms(row.duration)}
+      </span>
+      <span className="bg-muted/30 col-span-2 col-start-1 row-start-2 h-2 rounded md:col-span-1 md:col-start-2 md:row-start-1 md:h-3">
+        <span
+          className={cn(
+            "block h-full rounded",
+            row.failed ? "bg-danger" : row.href ? "bg-primary" : "bg-ok",
+          )}
+          style={{
+            marginLeft: `${Math.min(99, (row.offset / scale) * 100)}%`,
+            width: `${Math.max(0.5, (row.duration / scale) * 100)}%`,
+          }}
+        />
+      </span>
+    </>
+  )
+  const className =
+    "grid grid-cols-[1fr_4rem] items-center gap-x-2 gap-y-1 border-b px-2 py-1.5 text-xs last:border-b-0 md:grid-cols-[minmax(0,18rem)_1fr_4rem]"
+  return row.href ? (
+    <Link href={row.href} className={cn(className, "hover:bg-muted/40")}>
+      {body}
+    </Link>
+  ) : (
+    <div className={cn(className, "text-muted-foreground")}>{body}</div>
+  )
+}
+
+export default function TraceShow(p: Props) {
+  const { environment } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  const rows = flatten(p.roots, a, e)
+  const executions = rows.filter((r) => r.href !== null)
+  const errors = executions.filter((r) => r.failed).length
+  const scale = Math.max(p.duration, 1)
+
+  return (
+    <EnvLayout title="Trace" crumbs={[{ title: "Trace", href: "#" }]}>
+      <PageHeader
+        withWindow={false}
+        title={
+          <span className="flex min-w-0 items-center gap-1">
+            <span className="truncate font-mono text-base md:text-xl">
+              {p.trace_id}
+            </span>
+            <CopyId value={p.trace_id} label="" />
+          </span>
+        }
+        description="Every execution that shares this trace id, nested by the call that started it."
+      />
+      <StatStrip>
+        <Stat
+          label="Executions"
+          value={count(executions.length)}
+          hint={`${p.span_count} spans`}
+        />
+        <Stat
+          label="Services"
+          value={count(p.services.length)}
+          hint={p.services.join(" · ")}
+        />
+        <Stat label="Total duration" value={ms(p.duration)} />
+        <Stat
+          label="Errors"
+          value={count(errors)}
+          tone={errors ? "destructive" : undefined}
+        />
+      </StatStrip>
+      <div className="bg-card -mx-3 overflow-hidden border-y md:mx-0 md:rounded-lg md:border">
+        {rows.length === 0 ? (
+          <EmptyState
+            title="Nothing in this trace"
+            description="No execution reported this trace id."
+          />
+        ) : (
+          rows.map((row) => (
+            <WaterfallRow key={row.key} row={row} scale={scale} />
+          ))
+        )}
+      </div>
+    </EnvLayout>
+  )
+}