railwatch 0.6.1 → 0.8.0

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

@@ -0,0 +1,102 @@
+import { router, usePage } from "@inertiajs/react"
+import { Users } from "lucide-react"
+
+import { DataTable } from "@/components/railwatch/data-table"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { PageHeader } from "@/components/railwatch/page-header"
+import EnvLayout from "@/layouts/env-layout"
+import { ago, count } from "@/lib/format"
+import * as R from "@/routes"
+import type { SharedProps } from "@/types"
+
+interface Person {
+  ref: string
+  requests: number
+  errors: number
+  last_seen_at: string
+  name: string | null
+  email: string | null
+  tenant: string | null
+}
+interface Props {
+  people: Person[]
+}
+
+export default function People(p: Props) {
+  const { environment } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  const personHref = (x: Person) =>
+    R.applicationEnvironmentPersonPath(a, e, x.ref)
+  return (
+    <EnvLayout title="Users">
+      <PageHeader
+        title="Users"
+        description="Your application's users as seen in telemetry, with their activity and errors."
+      />
+      <DataTable
+        rows={p.people}
+        rowKey={(x) => x.ref}
+        empty={
+          <EmptyState
+            icon={Users}
+            title="No authenticated activity in this window"
+            description="People appear here once requests are tagged with an authenticated user."
+          />
+        }
+        onRowClick={(x) => router.visit(personHref(x))}
+        keyboardNav={{
+          onOpen: (x, opts) =>
+            opts?.newTab
+              ? window.open(personHref(x), "_blank")
+              : router.visit(personHref(x)),
+        }}
+        columns={[
+          {
+            key: "n",
+            header: "User",
+            cell: (x) => (
+              <span className="text-xs">
+                <span className="font-medium">{x.name ?? x.ref}</span>
+                {x.email && (
+                  <span className="text-muted-foreground"> · {x.email}</span>
+                )}
+              </span>
+            ),
+          },
+          {
+            key: "t",
+            hideOnMobile: true,
+            header: "Tenant",
+            cell: (x) => (
+              <span className="font-mono text-xs">{x.tenant ?? ""}</span>
+            ),
+          },
+          {
+            key: "r",
+            header: "Requests",
+            align: "right",
+            cell: (x) => count(x.requests),
+          },
+          {
+            key: "e",
+            hideOnMobile: true,
+            header: "Errors",
+            align: "right",
+            cell: (x) => (
+              <span className={x.errors ? "text-destructive" : ""}>
+                {x.errors}
+              </span>
+            ),
+          },
+          {
+            key: "l",
+            header: "Last seen",
+            align: "right",
+            cell: (x) => ago(x.last_seen_at),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}

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

@@ -0,0 +1,149 @@
+import { Link, router, usePage } from "@inertiajs/react"
+
+import { DataTable } from "@/components/railwatch/data-table"
+import { PageHeader } from "@/components/railwatch/page-header"
+import {
+  IssueStatusBadge,
+  StatusBadge,
+} from "@/components/railwatch/status-badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import EnvLayout from "@/layouts/env-layout"
+import { ago, ms, when } from "@/lib/format"
+import * as R from "@/routes"
+import type { ExecutionRow, SharedProps } from "@/types"
+
+interface Props {
+  person: {
+    person_ref: string
+    name: string
+    email: string | null
+    tenant: string | null
+    first_seen_at: string
+    last_seen_at: string
+  } | null
+  person_ref: string
+  executions: ExecutionRow[]
+  issues: {
+    id: number
+    key: string
+    title: string
+    status: string
+    count: number
+  }[]
+}
+
+export default function PersonShow(p: Props) {
+  const { environment, window } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  const name = p.person?.name ?? p.person_ref
+  return (
+    <EnvLayout
+      title={name}
+      crumbs={[
+        {
+          title: "Users",
+          href: R.applicationEnvironmentPeoplePath(a, e, { window }),
+        },
+        { title: name, href: "#" },
+      ]}
+    >
+      <PageHeader
+        title={name}
+        description={
+          p.person
+            ? `${p.person.email ?? ""} ${p.person.tenant ? `· tenant ${p.person.tenant}` : ""} · first seen ${ago(p.person.first_seen_at)} · last seen ${ago(p.person.last_seen_at)}`
+            : "Not yet identified."
+        }
+      />
+      {p.issues.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Issues affecting this user</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <DataTable
+              rows={p.issues}
+              rowKey={(i) => i.id}
+              columns={[
+                {
+                  key: "k",
+                  header: "Issue",
+                  cell: (i) => (
+                    <Link
+                      className="font-mono text-xs hover:underline"
+                      href={R.issuePath(i.id)}
+                    >
+                      {i.key}
+                    </Link>
+                  ),
+                },
+                {
+                  key: "t",
+                  header: "Title",
+                  cell: (i) => (
+                    <span className="line-clamp-1 text-xs">{i.title}</span>
+                  ),
+                },
+                {
+                  key: "s",
+                  header: "",
+                  cell: (i) => <IssueStatusBadge status={i.status} />,
+                },
+                {
+                  key: "n",
+                  header: "Hits",
+                  align: "right",
+                  cell: (i) => i.count,
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+      )}
+      <DataTable
+        rows={p.executions}
+        rowKey={(x) => x.execution_id}
+        onRowClick={(x) =>
+          x.execution_id &&
+          router.visit(
+            R.applicationEnvironmentRequestPath(a, e, x.execution_id),
+          )
+        }
+        columns={[
+          {
+            key: "when",
+            header: "When",
+            cell: (x) => <span className="text-xs">{when(x.occurred_at)}</span>,
+          },
+          { key: "k", header: "Kind", cell: (x) => x.kind },
+          {
+            key: "n",
+            header: "Name",
+            cell: (x) => <span className="font-mono text-xs">{x.name}</span>,
+          },
+          {
+            key: "st",
+            header: "Status",
+            cell: (x) => <StatusBadge status={x.status} outcome={x.outcome} />,
+          },
+          {
+            key: "d",
+            header: "Duration",
+            align: "right",
+            cell: (x) => ms(x.duration),
+          },
+          {
+            key: "ex",
+            header: "Exception",
+            cell: (x) => (
+              <span className="text-destructive line-clamp-1 text-xs">
+                {x.exception_preview ?? ""}
+              </span>
+            ),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}

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

@@ -0,0 +1,335 @@
+import { AlertTriangle, Server } from "lucide-react"
+
+import { ChartPanel } from "@/components/railwatch/chart-panel"
+import { DataTable } from "@/components/railwatch/data-table"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { MetricChart } from "@/components/railwatch/metric-chart"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { Stat, StatStrip } from "@/components/railwatch/stat"
+import { UtilisationBar } from "@/components/railwatch/utilisation-bar"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import EnvLayout from "@/layouts/env-layout"
+import { ago, bytes, count, ms, when } from "@/lib/format"
+
+interface Sample {
+  id: number
+  server: string
+  role: string | null
+  pid: number | null
+  deploy: string | null
+  sampled_at: string
+  threads_busy: number | null
+  threads_max: number | null
+  backlog: number | null
+  pool_busy: number | null
+  pool_size: number | null
+  pool_waiting: number | null
+  queue_depth: number | null
+  queue_latency: number | null
+  memory: number | null
+}
+interface HealthPoint {
+  t: string
+  utilisation: number
+  backlog: number
+  queue_depth: number
+  queue_latency: number
+}
+interface QueueDepth {
+  queue: string
+  depth: number
+}
+interface Proc {
+  id: number
+  booted_at: string
+  pid: number
+  role: string
+  server: string
+  deploy: string | null
+  ruby_version: string
+  rails_version: string
+  railwatch_version: string
+  boot_seconds: number | null
+  detail: Record<string, string>
+}
+interface Props {
+  samples: Sample[]
+  series: HealthPoint[]
+  queues: QueueDepth[]
+  silent_servers: string[]
+  processes: Proc[]
+}
+
+const percent = (value: number) => `${value.toFixed(0)}%`
+
+function sum(values: (number | null)[]) {
+  return values.reduce<number>((n, v) => n + (v ?? 0), 0)
+}
+
+function max(values: (number | null)[]) {
+  return values.reduce<number>((n, v) => Math.max(n, v ?? 0), 0)
+}
+
+export default function Processes(p: Props) {
+  const utilisations = p.samples.flatMap((s) =>
+    s.threads_max ? [((s.threads_busy ?? 0) / s.threads_max) * 100] : [],
+  )
+  const utilisation = utilisations.length
+    ? utilisations.reduce((a, b) => a + b, 0) / utilisations.length
+    : 0
+  const backlog = sum(p.samples.map((s) => s.backlog))
+  const queueDepth = max(p.samples.map((s) => s.queue_depth))
+  const oldestJob = max(p.samples.map((s) => s.queue_latency))
+  const reporting = p.samples.length > 0 || p.series.length > 0
+
+  return (
+    <EnvLayout title="Processes">
+      <PageHeader
+        title="Processes"
+        description="What every web and worker process is doing right now: thread pools, socket backlog, queue depth, and the boots behind them."
+      />
+      {p.silent_servers.length > 0 && (
+        <Card className="border-warning/40">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <AlertTriangle className="text-warning size-4" />
+              {p.silent_servers.length === 1
+                ? "1 expected host is silent"
+                : `${p.silent_servers.length} expected hosts are silent`}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="flex flex-wrap gap-1.5">
+              {p.silent_servers.map((server) => (
+                <span
+                  key={server}
+                  className="border-warning/40 bg-warning/10 text-warning rounded-sm border px-1.5 font-mono text-[11px]"
+                >
+                  {server}
+                </span>
+              ))}
+            </div>
+            <p className="text-muted-foreground text-xs">
+              No health sample or execution from these hosts in the last 10
+              minutes. Expected hosts come from your Kamal post-deploy hook, or
+              from the environment settings if you set them by hand.
+            </p>
+          </CardContent>
+        </Card>
+      )}
+      {reporting ? (
+        <>
+          <StatStrip>
+            <Stat label="Live processes" value={p.samples.length} />
+            <Stat
+              label="Thread utilisation"
+              value={percent(utilisation)}
+              tone={
+                utilisation >= 90
+                  ? "destructive"
+                  : utilisation >= 70
+                    ? "warning"
+                    : undefined
+              }
+              hint="averaged across live processes"
+            />
+            <Stat label="Backlog" value={count(backlog)} />
+            <Stat label="Queue depth" value={count(queueDepth)} />
+            <Stat label="Oldest job" value={ms(oldestJob)} />
+          </StatStrip>
+          <DataTable
+            rows={p.samples}
+            rowKey={(s) => s.id}
+            empty={
+              <EmptyState
+                title="No process reported in the last 10 minutes"
+                description="Health samples are older than the live window."
+              />
+            }
+            columns={[
+              {
+                key: "server",
+                header: "Server",
+                cell: (s) => (
+                  <span className="font-mono text-xs">{s.server}</span>
+                ),
+              },
+              { key: "role", header: "Role", cell: (s) => s.role },
+              {
+                key: "pid",
+                hideOnMobile: true,
+                header: "PID",
+                align: "right",
+                cell: (s) => s.pid,
+              },
+              {
+                key: "threads",
+                header: "Threads",
+                cell: (s) => (
+                  <UtilisationBar busy={s.threads_busy} max={s.threads_max} />
+                ),
+              },
+              {
+                key: "pool",
+                hideOnMobile: true,
+                header: "DB pool",
+                cell: (s) => (
+                  <UtilisationBar busy={s.pool_busy} max={s.pool_size} />
+                ),
+              },
+              {
+                key: "mem",
+                hideOnMobile: true,
+                header: "Memory",
+                align: "right",
+                cell: (s) => bytes(s.memory),
+              },
+              {
+                key: "seen",
+                header: "Last sample",
+                align: "right",
+                cell: (s) => (
+                  <span title={when(s.sampled_at)}>{ago(s.sampled_at)}</span>
+                ),
+              },
+            ]}
+          />
+          {p.queues.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Queue depth</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <DataTable
+                  rows={p.queues}
+                  rowKey={(q) => q.queue}
+                  columns={[
+                    { key: "q", header: "Queue", cell: (q) => q.queue },
+                    {
+                      key: "d",
+                      header: "Ready jobs",
+                      align: "right",
+                      cell: (q) => count(q.depth),
+                    },
+                  ]}
+                />
+              </CardContent>
+            </Card>
+          )}
+          <div className="grid gap-4 lg:grid-cols-2">
+            <ChartPanel label="Thread utilisation" value={percent(utilisation)}>
+              <MetricChart
+                label="Utilisation"
+                format={percent}
+                data={p.series.map((s) => ({ t: s.t, value: s.utilisation }))}
+              />
+            </ChartPanel>
+            <ChartPanel label="Backlog" value={count(backlog)}>
+              <MetricChart
+                label="Backlog"
+                color="var(--warning)"
+                format={count}
+                data={p.series.map((s) => ({ t: s.t, value: s.backlog }))}
+              />
+            </ChartPanel>
+            <ChartPanel label="Queue depth" value={count(queueDepth)}>
+              <MetricChart
+                label="Ready jobs"
+                format={count}
+                data={p.series.map((s) => ({ t: s.t, value: s.queue_depth }))}
+              />
+            </ChartPanel>
+            <ChartPanel label="Oldest job" value={ms(oldestJob)}>
+              <MetricChart
+                label="Oldest job"
+                color="var(--danger)"
+                format={(v) => ms(v)}
+                data={p.series.map((s) => ({ t: s.t, value: s.queue_latency }))}
+              />
+            </ChartPanel>
+          </div>
+        </>
+      ) : (
+        <EmptyState
+          icon={Server}
+          title="No health samples yet"
+          description="The gem reports thread pool, backlog and queue health every 15s from each web and worker process."
+        />
+      )}
+      <h2 className="text-sm font-semibold">Process boots</h2>
+      <DataTable
+        rows={p.processes}
+        rowKey={(x) => x.id}
+        empty={
+          <EmptyState
+            icon={Server}
+            title="No process has booted with Railwatch yet"
+            description="Server processes report here once they boot with the gem installed."
+          />
+        }
+        columns={[
+          {
+            key: "b",
+            header: "Booted",
+            cell: (x) => (
+              <span className="text-xs" title={when(x.booted_at)}>
+                {ago(x.booted_at)}
+              </span>
+            ),
+          },
+          {
+            key: "s",
+            header: "Server",
+            cell: (x) => <span className="font-mono text-xs">{x.server}</span>,
+          },
+          { key: "r", header: "Role", cell: (x) => x.role },
+          {
+            key: "pid",
+            hideOnMobile: true,
+            header: "PID",
+            align: "right",
+            cell: (x) => x.pid,
+          },
+          {
+            key: "d",
+            header: "Deploy",
+            cell: (x) => (
+              <span className="font-mono text-xs">
+                {x.deploy?.slice(0, 12)}
+              </span>
+            ),
+          },
+          {
+            key: "v",
+            hideOnMobile: true,
+            header: "Ruby / Rails / Railwatch",
+            cell: (x) => (
+              <span className="font-mono text-xs">
+                {x.ruby_version} / {x.rails_version} / {x.railwatch_version}
+              </span>
+            ),
+          },
+          {
+            key: "ad",
+            hideOnMobile: true,
+            header: "DB / queue / cache",
+            cell: (x) => (
+              <span className="font-mono text-xs">
+                {x.detail.database_adapter} / {x.detail.queue_adapter} /{" "}
+                {x.detail.cache_store?.replace("ActiveSupport::Cache::", "")}
+              </span>
+            ),
+          },
+          {
+            key: "boot",
+            hideOnMobile: true,
+            header: "Boot",
+            align: "right",
+            cell: (x) =>
+              x.boot_seconds ? `${x.boot_seconds.toFixed(1)}s` : "–",
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}

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

@@ -0,0 +1,110 @@
+import { Link, usePage } from "@inertiajs/react"
+import { Flame } from "lucide-react"
+
+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 { Stat, StatStrip } from "@/components/railwatch/stat"
+import EnvLayout from "@/layouts/env-layout"
+import { count, ms, pct } from "@/lib/format"
+import * as R from "@/routes"
+import type { SharedProps } from "@/types"
+
+interface ProfileGroup {
+  group_hash: string
+  name: string | null
+  profile_id: number
+  count: number
+  avg_duration: number
+  max_samples: number | null
+  last_seen_at: string
+}
+interface Props {
+  profiles: ProfileGroup[]
+  summary: {
+    profiles: number
+    executions: number
+    profiled: number
+    avg_samples: number
+  }
+}
+
+export default function Profiles(p: Props) {
+  const { environment, window } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  const s = p.summary
+
+  return (
+    <EnvLayout title="Profiles">
+      <PageHeader
+        title="Profiles"
+        description="Sampled stack profiles, grouped by the execution they profiled."
+      />
+      <StatStrip>
+        <Stat label="Profiles" value={count(s.profiles)} />
+        <Stat
+          label="Executions profiled"
+          value={pct(s.profiled, s.executions)}
+          hint={`${count(s.profiled)} of ${count(s.executions)}`}
+        />
+        <Stat label="Avg samples" value={count(s.avg_samples)} />
+      </StatStrip>
+      <DataTable
+        rows={p.profiles}
+        rowKey={(g) => g.group_hash}
+        empty={
+          <EmptyState
+            icon={Flame}
+            title="No profiles in this window"
+            description="Set RAILWATCH_PROFILE_SAMPLE_RATE in the app to profile slow executions."
+          />
+        }
+        columns={[
+          {
+            key: "name",
+            header: "Execution",
+            className: "max-w-0",
+            cell: (g) => (
+              <Link
+                href={R.applicationEnvironmentProfilePath(a, e, g.profile_id, {
+                  window,
+                })}
+                className="block truncate font-mono text-xs hover:underline"
+              >
+                {g.name ?? g.group_hash}
+              </Link>
+            ),
+          },
+          {
+            key: "n",
+            header: "Profiles",
+            align: "right",
+            cell: (g) => count(g.count),
+          },
+          {
+            key: "avg",
+            header: "Avg duration",
+            align: "right",
+            cell: (g) => ms(g.avg_duration),
+          },
+          {
+            key: "samples",
+            hideOnMobile: true,
+            header: "Max samples",
+            align: "right",
+            cell: (g) => count(g.max_samples),
+          },
+          {
+            key: "last",
+            hideOnMobile: true,
+            header: "Last seen",
+            align: "right",
+            cell: (g) => <RelativeTime iso={g.last_seen_at} />,
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}