railwatch 0.9.4 → 1.0.0

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

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

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

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