railwatch 0.6.1 → 0.7.0

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

@@ -0,0 +1,220 @@
+import { Link, router, usePage } from "@inertiajs/react"
+import { CalendarClock } from "lucide-react"
+
+import { DataTable } from "@/components/railwatch/data-table"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import {
+  OriginIdentity,
+  type OriginIdentityData,
+} from "@/components/railwatch/origin-identity"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { RelativeTime } from "@/components/railwatch/relative-time"
+import { StatusBadge } from "@/components/railwatch/status-badge"
+import { Badge } from "@/components/ui/badge"
+import EnvLayout from "@/layouts/env-layout"
+import { ago, ms, when } from "@/lib/format"
+import * as R from "@/routes"
+import type { SharedProps } from "@/types"
+
+interface Task {
+  task_key: string
+  runs: number
+  failed: number
+  avg: number
+  last_run_at: string
+  next_run_at: string | null
+  schedule: string | null
+}
+interface Run extends OriginIdentityData {
+  execution_id: string
+  task_key: string
+  name: string
+  outcome: string
+  duration: number
+  occurred_at: string
+  exception_preview: string | null
+}
+interface Props {
+  tasks: Task[]
+  runs: Run[]
+  missed: { key: string; title: string; id: number }[]
+}
+
+export default function ScheduledTasks(p: Props) {
+  const {
+    environment,
+    range,
+    window: selectedWindow,
+  } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  const runHref = (r: Run) =>
+    R.applicationEnvironmentScheduledTaskPath(a, e, r.execution_id)
+  return (
+    <EnvLayout title="Scheduled tasks">
+      <PageHeader
+        title="Scheduled tasks"
+        description="Solid Queue recurring tasks from config/recurring.yml: runs, failures, and missed schedules."
+      />
+      {p.missed.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {p.missed.map((m) => (
+            <Link key={m.id} href={R.issuePath(m.id)}>
+              <Badge variant="destructive">
+                {m.key} · {m.title}
+              </Badge>
+            </Link>
+          ))}
+        </div>
+      )}
+      <DataTable
+        rows={p.tasks}
+        rowKey={(t) => t.task_key}
+        empty={
+          <EmptyState
+            icon={CalendarClock}
+            title="No scheduled task has run in this window"
+            description="Recurring and scheduled job runs appear here as they execute."
+          />
+        }
+        columns={[
+          {
+            key: "k",
+            header: "Task",
+            cell: (t) => (
+              <span className="font-mono text-xs">{t.task_key}</span>
+            ),
+          },
+          {
+            key: "s",
+            header: "Schedule",
+            cell: (t) => (
+              <span className="text-muted-foreground font-mono text-xs">
+                {t.schedule ?? "–"}
+              </span>
+            ),
+          },
+          {
+            key: "next",
+            hideOnMobile: true,
+            header: "Next run",
+            cell: (t) => (
+              <span className="text-muted-foreground text-xs">
+                {t.next_run_at ? <RelativeTime iso={t.next_run_at} /> : "–"}
+              </span>
+            ),
+          },
+          { key: "n", header: "Runs", align: "right", cell: (t) => t.runs },
+          {
+            key: "f",
+            hideOnMobile: true,
+            header: "Failed",
+            align: "right",
+            cell: (t) => (
+              <span className={t.failed ? "text-destructive" : ""}>
+                {t.failed}
+              </span>
+            ),
+          },
+          {
+            key: "avg",
+            hideOnMobile: true,
+            header: "Avg",
+            align: "right",
+            cell: (t) => ms(t.avg),
+          },
+          {
+            key: "last",
+            header: "Last run",
+            align: "right",
+            cell: (t) => ago(t.last_run_at),
+          },
+        ]}
+      />
+      <h2 className="text-sm font-semibold">Recent runs</h2>
+      <DataTable
+        rows={p.runs}
+        rowKey={(r) => r.execution_id}
+        onRowClick={(r) => router.visit(runHref(r))}
+        keyboardNav={{
+          onOpen: (r, opts) =>
+            opts?.newTab
+              ? window.open(runHref(r), "_blank")
+              : router.visit(runHref(r)),
+        }}
+        columns={[
+          {
+            key: "when",
+            header: "When",
+            cell: (r) => <span className="text-xs">{when(r.occurred_at)}</span>,
+          },
+          {
+            key: "k",
+            header: "Task",
+            cell: (r) => (
+              <span className="font-mono text-xs">{r.task_key}</span>
+            ),
+          },
+          {
+            key: "job",
+            hideOnMobile: true,
+            header: "Job",
+            cell: (r) => <span className="font-mono text-xs">{r.name}</span>,
+          },
+          {
+            key: "o",
+            header: "Outcome",
+            cell: (r) => <StatusBadge outcome={r.outcome} />,
+          },
+          {
+            key: "user",
+            hideOnMobile: true,
+            header: "Origin user",
+            cell: (r) => (
+              <OriginIdentity
+                {...r}
+                applicationId={a}
+                environmentId={e}
+                kind="user"
+                range={range}
+                window={selectedWindow}
+              />
+            ),
+          },
+          {
+            key: "tenant",
+            hideOnMobile: true,
+            header: "Origin tenant",
+            cell: (r) => (
+              <OriginIdentity
+                {...r}
+                applicationId={a}
+                environmentId={e}
+                kind="tenant"
+                range={range}
+                window={selectedWindow}
+              />
+            ),
+          },
+          {
+            key: "d",
+            hideOnMobile: true,
+            header: "Duration",
+            align: "right",
+            cell: (r) => ms(r.duration),
+          },
+          {
+            key: "ex",
+            hideOnMobile: true,
+            header: "Exception",
+            cell: (r) => (
+              <span className="text-destructive line-clamp-1 text-xs">
+                {r.exception_preview ?? ""}
+              </span>
+            ),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}

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

@@ -0,0 +1,229 @@
+import { Link, router, usePage } from "@inertiajs/react"
+import { Braces } from "lucide-react"
+
+import { DurationPanel, VolumePanel } from "@/components/railwatch/chart-panel"
+import { DataTable } from "@/components/railwatch/data-table"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { FilterBar } from "@/components/railwatch/filter-bar"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { PercentilePicker } from "@/components/railwatch/percentile-picker"
+import { SortHeader } from "@/components/railwatch/sort-header"
+import { SparklineCell } from "@/components/railwatch/sparkline-cell"
+import { Stat, StatStrip } from "@/components/railwatch/stat"
+import { usePercentile } from "@/hooks/use-percentile"
+import EnvLayout from "@/layouts/env-layout"
+import { count, ms } from "@/lib/format"
+import * as R from "@/routes"
+import type {
+  GroupRow,
+  SeriesPoint,
+  SharedProps,
+  SummaryWithDelta,
+} from "@/types"
+
+interface Props {
+  spans: GroupRow[]
+  series: SeriesPoint[]
+  summary: SummaryWithDelta
+  sort: string
+  dir: string
+  q: string
+}
+
+export default function Spans(p: Props) {
+  const { environment, window } = usePage<SharedProps>().props
+  const { percentile } = usePercentile()
+  const a = environment!.application_id
+  const e = environment!.id
+  const current = p.summary.current
+
+  const sortBy = (field: string) =>
+    router.visit(
+      R.applicationEnvironmentSpansPath(a, e, {
+        window,
+        q: p.q || undefined,
+        sort: field,
+        dir: p.sort === field && p.dir === "desc" ? "asc" : "desc",
+      }),
+      { preserveState: true },
+    )
+
+  const spanHref = (groupHash: string) =>
+    R.applicationEnvironmentSpanPath(a, e, groupHash, { window })
+  const openSpan = (groupHash: string, opts?: { newTab?: boolean }) =>
+    opts?.newTab
+      ? globalThis.window.open(spanHref(groupHash), "_blank")
+      : router.visit(spanHref(groupHash))
+
+  return (
+    <EnvLayout title="Spans">
+      <PageHeader
+        title="Spans"
+        description="Custom spans your app recorded with Railwatch.span, grouped by name."
+        actions={<PercentilePicker />}
+      />
+      <StatStrip>
+        <Stat
+          label="Spans"
+          value={count(current.count)}
+          delta={{
+            current: current.count,
+            previous: p.summary.previous.count,
+            goodDirection: "up",
+          }}
+          deltaCaption="vs previous period"
+        />
+        <Stat
+          label="Failed"
+          value={count(current.errors)}
+          tone={current.errors ? "destructive" : undefined}
+        />
+        <Stat
+          label={percentile}
+          value={ms(current[percentile] / 1000, 2)}
+          hint={`avg ${ms(current.avg / 1000, 2)}`}
+        />
+        <Stat label="Max" value={ms(current.max / 1000, 2)} />
+      </StatStrip>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <VolumePanel
+          legend="outcome"
+          label="Spans"
+          seriesLabel="Spans"
+          data={p.series}
+        />
+        <DurationPanel
+          label="Duration"
+          data={p.series}
+          percentile={percentile}
+        />
+      </div>
+      <FilterBar
+        value={p.q}
+        fields={[
+          { key: "name", label: "Name" },
+          { key: "status", label: "Status", options: ["failed"] },
+        ]}
+        onChange={(q) =>
+          router.visit(
+            R.applicationEnvironmentSpansPath(a, e, {
+              window,
+              q: q || undefined,
+              sort: p.sort,
+              dir: p.dir,
+            }),
+            { preserveState: true },
+          )
+        }
+        placeholder="name:geocode status:failed"
+      />
+      <DataTable
+        rows={p.spans}
+        rowKey={(s) => s.group_hash}
+        empty={
+          <EmptyState
+            icon={Braces}
+            title="No spans in this window"
+            description="Wrap any code in Railwatch.span('name') { } and it shows up here."
+          />
+        }
+        hoverKey={(s) => s.group_hash}
+        keyboardNav={{ onOpen: (s, opts) => openSpan(s.group_hash, opts) }}
+        columns={[
+          {
+            key: "name",
+            header: "Span",
+            grow: true,
+            cell: (s) => (
+              <Link
+                href={spanHref(s.group_hash)}
+                className="truncate font-mono text-xs hover:underline"
+              >
+                {s.name}
+              </Link>
+            ),
+          },
+          {
+            key: "trend",
+            hideOnMobile: true,
+            header: "Trend",
+            cell: (s) => (
+              <SparklineCell data={s.sparkline} hoverKey={s.group_hash} />
+            ),
+          },
+          {
+            key: "n",
+            header: (
+              <SortHeader
+                label="Count"
+                active={p.sort === "count"}
+                dir={p.dir === "asc" ? "asc" : "desc"}
+                onClick={() => sortBy("count")}
+              />
+            ),
+            align: "right",
+            cell: (s) => count(s.count),
+          },
+          {
+            key: "failed",
+            header: (
+              <SortHeader
+                label="Failed"
+                active={p.sort === "errors"}
+                dir={p.dir === "asc" ? "asc" : "desc"}
+                onClick={() => sortBy("errors")}
+              />
+            ),
+            align: "right",
+            cell: (s) => (
+              <span className={s.errors ? "text-danger font-semibold" : ""}>
+                {count(s.errors)}
+              </span>
+            ),
+          },
+          {
+            key: "p50",
+            hideOnMobile: true,
+            header: (
+              <SortHeader
+                label="p50"
+                active={p.sort === "p50"}
+                dir={p.dir === "asc" ? "asc" : "desc"}
+                onClick={() => sortBy("p50")}
+              />
+            ),
+            align: "right",
+            cell: (s) => ms(s.p50, 2),
+          },
+          {
+            key: "p95",
+            header: (
+              <SortHeader
+                label="p95"
+                active={p.sort === "p95"}
+                dir={p.dir === "asc" ? "asc" : "desc"}
+                onClick={() => sortBy("p95")}
+              />
+            ),
+            align: "right",
+            cell: (s) => <span className="font-semibold">{ms(s.p95, 2)}</span>,
+          },
+          {
+            key: "max",
+            hideOnMobile: true,
+            header: (
+              <SortHeader
+                label="Max"
+                active={p.sort === "max"}
+                dir={p.dir === "asc" ? "asc" : "desc"}
+                onClick={() => sortBy("max")}
+              />
+            ),
+            align: "right",
+            cell: (s) => ms(s.max, 2),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}

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

@@ -0,0 +1,220 @@
+import { Link, usePage } from "@inertiajs/react"
+import { Braces } from "lucide-react"
+
+import { DurationPanel, VolumePanel } from "@/components/railwatch/chart-panel"
+import { DataTable } from "@/components/railwatch/data-table"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { Stat, StatStrip } from "@/components/railwatch/stat"
+import { StatusBadge } from "@/components/railwatch/status-badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import EnvLayout from "@/layouts/env-layout"
+import { count, ms, when } from "@/lib/format"
+import * as R from "@/routes"
+import type { SeriesPoint, SharedProps, SummaryWithDelta } from "@/types"
+
+interface Facet {
+  key: string
+  count: number
+  values: [string, number][]
+}
+interface Sample {
+  id: number
+  name: string
+  duration: number
+  status: string | null
+  attributes: Record<string, unknown>
+  occurred_at: string
+  execution_id: string | null
+  execution_preview: string | null
+}
+interface Props {
+  group_hash: string
+  name: string | null
+  summary: SummaryWithDelta
+  series: SeriesPoint[]
+  facets: Facet[]
+  samples: Sample[]
+}
+
+function Attributes({ attributes }: { attributes: Record<string, unknown> }) {
+  const entries = Object.entries(attributes)
+  if (entries.length === 0)
+    return <span className="text-muted-foreground text-xs">–</span>
+  return (
+    <span className="flex flex-wrap gap-1">
+      {entries.map(([key, value]) => (
+        <span
+          key={key}
+          className="bg-muted rounded-sm px-1.5 font-mono text-[10px]"
+        >
+          {key}={String(value)}
+        </span>
+      ))}
+    </span>
+  )
+}
+
+export default function SpanShow(p: Props) {
+  const { environment, window } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  const current = p.summary.current
+
+  return (
+    <EnvLayout
+      title={p.name ?? "Span"}
+      crumbs={[
+        {
+          title: "Spans",
+          href: R.applicationEnvironmentSpansPath(a, e, { window }),
+        },
+        { title: p.name ?? "Span", href: "#" },
+      ]}
+    >
+      <PageHeader
+        title={<span className="font-mono">{p.name ?? "Span"}</span>}
+        description="Every recording of this span in the window."
+      />
+      <StatStrip>
+        <Stat
+          label="Recorded"
+          value={count(current.count)}
+          delta={{
+            current: current.count,
+            previous: p.summary.previous.count,
+            goodDirection: "up",
+          }}
+          deltaCaption="vs previous period"
+        />
+        <Stat
+          label="Failed"
+          value={count(current.errors)}
+          tone={current.errors ? "destructive" : undefined}
+        />
+        <Stat
+          label="p95"
+          value={ms(current.p95 / 1000, 2)}
+          hint={`p99 ${ms(current.p99 / 1000, 2)}`}
+        />
+        <Stat
+          label="Max"
+          value={ms(current.max / 1000, 2)}
+          hint={`avg ${ms(current.avg / 1000, 2)}`}
+        />
+      </StatStrip>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <VolumePanel
+          legend="outcome"
+          label="Recordings"
+          seriesLabel="Spans"
+          data={p.series}
+        />
+        <DurationPanel label="Duration" data={p.series} />
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Attributes</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DataTable
+            rows={p.facets}
+            rowKey={(f) => f.key}
+            empty={
+              <EmptyState
+                icon={Braces}
+                title="No attributes recorded"
+                description="Pass a hash to Railwatch.span to tag each recording."
+              />
+            }
+            columns={[
+              {
+                key: "k",
+                header: "Key",
+                cell: (f) => <span className="font-mono text-xs">{f.key}</span>,
+              },
+              {
+                key: "v",
+                header: "Most common values",
+                cell: (f) => (
+                  <span className="flex flex-wrap gap-1">
+                    {f.values.map(([value, n]) => (
+                      <span
+                        key={value}
+                        className="bg-muted rounded-sm px-1.5 font-mono text-[10px]"
+                      >
+                        {value}
+                        <span className="text-muted-foreground"> ×{n}</span>
+                      </span>
+                    ))}
+                  </span>
+                ),
+              },
+              {
+                key: "n",
+                header: "Spans",
+                align: "right",
+                cell: (f) => count(f.count),
+              },
+            ]}
+          />
+        </CardContent>
+      </Card>
+      <DataTable
+        rows={p.samples}
+        rowKey={(s) => s.id}
+        empty={
+          <EmptyState
+            icon={Braces}
+            title="No recordings in this window"
+            description="Widen the time window to see older recordings of this span."
+          />
+        }
+        columns={[
+          {
+            key: "when",
+            header: "When",
+            cell: (s) => <span className="text-xs">{when(s.occurred_at)}</span>,
+          },
+          {
+            key: "status",
+            header: "Status",
+            cell: (s) => <StatusBadge outcome={s.status} />,
+          },
+          {
+            key: "in",
+            hideOnMobile: true,
+            header: "In",
+            cell: (s) =>
+              s.execution_id ? (
+                <Link
+                  className="font-mono text-xs hover:underline"
+                  href={R.applicationEnvironmentRequestPath(
+                    a,
+                    e,
+                    s.execution_id,
+                  )}
+                >
+                  {s.execution_preview}
+                </Link>
+              ) : (
+                <span className="text-muted-foreground text-xs">–</span>
+              ),
+          },
+          {
+            key: "attrs",
+            hideOnMobile: true,
+            header: "Attributes",
+            cell: (s) => <Attributes attributes={s.attributes} />,
+          },
+          {
+            key: "d",
+            header: "Duration",
+            align: "right",
+            cell: (s) => ms(s.duration, 2),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}