railwatch 0.9.4 → 1.0.0

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

@@ -1,414 +0,0 @@
-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

@@ -1,208 +0,0 @@
-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>
-  )
-}