railwatch 0.9.4 → 1.1.0

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

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

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

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

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