railwatch 0.6.1 → 0.7.0

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

@@ -0,0 +1,220 @@
+import { Link, router, usePage } from "@inertiajs/react"
+
+import { DurationPanel } from "@/components/railwatch/chart-panel"
+import { DataTable } from "@/components/railwatch/data-table"
+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 { Badge } from "@/components/ui/badge"
+import { usePercentile } from "@/hooks/use-percentile"
+import EnvLayout from "@/layouts/env-layout"
+import { executionPath } from "@/lib/execution-path"
+import { count, ms, when } from "@/lib/format"
+import * as R from "@/routes"
+import type { GroupRow, SeriesPoint, SharedProps } from "@/types"
+
+// AR's transaction.active_record event reports outcome as commit, rollback,
+// restart, or blank (still-open at instrumentation time).
+function OutcomeBadge({ outcome }: { outcome: string }) {
+  const variant =
+    outcome === "rollback"
+      ? "destructive"
+      : outcome === "restart"
+        ? "secondary"
+        : outcome === "commit"
+          ? "outline"
+          : "secondary"
+  return (
+    <Badge variant={variant} className="font-mono">
+      {outcome || "open"}
+    </Badge>
+  )
+}
+
+interface Recent {
+  id: number
+  outcome: string
+  connection: string | null
+  duration: number
+  statement_count: number | null
+  occurred_at: string
+  execution_id: string | null
+  execution_source: string | null
+  execution_preview: string | null
+  group_hash: string
+}
+interface Props {
+  transactions: GroupRow[]
+  series: SeriesPoint[]
+  recent: Recent[]
+  sort: string
+  dir: string
+}
+
+export default function Transactions(p: Props) {
+  const { environment, window } = usePage<SharedProps>().props
+  const { percentile } = usePercentile()
+  const a = environment!.application_id
+  const e = environment!.id
+
+  const sortBy = (field: string) =>
+    router.visit(
+      R.applicationEnvironmentTransactionsPath(a, e, {
+        window,
+        sort: field,
+        dir: p.sort === field && p.dir === "desc" ? "asc" : "desc",
+      }),
+      { preserveState: true },
+    )
+
+  return (
+    <EnvLayout title="Transactions">
+      <PageHeader
+        title="Transactions"
+        description="ActiveRecord transactions, grouped by connection and outcome."
+        actions={<PercentilePicker />}
+      />
+      <DurationPanel label="Duration" data={p.series} percentile={percentile} />
+      <DataTable
+        rows={p.transactions}
+        rowKey={(t) => t.group_hash}
+        empty="No transactions in this window."
+        columns={[
+          {
+            key: "name",
+            header: "Connection · outcome",
+            cell: (t) => <span className="font-mono text-xs">{t.name}</span>,
+          },
+          {
+            key: "trend",
+            hideOnMobile: true,
+            header: "Trend",
+            cell: (t) => <SparklineCell data={t.sparkline} />,
+          },
+          {
+            key: "n",
+            header: (
+              <SortHeader
+                label="Count"
+                active={p.sort === "count"}
+                dir={p.dir === "asc" ? "asc" : "desc"}
+                onClick={() => sortBy("count")}
+              />
+            ),
+            align: "right",
+            cell: (t) => count(t.count),
+          },
+          {
+            key: "errors",
+            hideOnMobile: true,
+            header: (
+              <SortHeader
+                label="Rollbacks"
+                active={p.sort === "errors"}
+                dir={p.dir === "asc" ? "asc" : "desc"}
+                onClick={() => sortBy("errors")}
+              />
+            ),
+            align: "right",
+            cell: (t) => count(t.errors),
+          },
+          {
+            key: "avg",
+            hideOnMobile: true,
+            header: (
+              <SortHeader
+                label="Avg"
+                active={p.sort === "avg"}
+                dir={p.dir === "asc" ? "asc" : "desc"}
+                onClick={() => sortBy("avg")}
+              />
+            ),
+            align: "right",
+            cell: (t) => ms(t.avg, 2),
+          },
+          {
+            key: percentile,
+            header: (
+              <SortHeader
+                label={percentile}
+                active={p.sort === percentile}
+                dir={p.dir === "asc" ? "asc" : "desc"}
+                onClick={() => sortBy(percentile)}
+              />
+            ),
+            align: "right",
+            cell: (t) => (
+              <span className="font-semibold">{ms(t[percentile], 2)}</span>
+            ),
+          },
+        ]}
+      />
+      <h2 className="text-sm font-semibold">Recent transactions</h2>
+      <DataTable
+        rows={p.recent}
+        rowKey={(t) => t.id}
+        columns={[
+          {
+            key: "when",
+            header: "When",
+            className: "w-40",
+            cell: (t) => (
+              <span className="text-xs tabular-nums">
+                {when(t.occurred_at)}
+              </span>
+            ),
+          },
+          {
+            key: "conn",
+            hideOnMobile: true,
+            header: "Connection",
+            cell: (t) => (
+              <span className="font-mono text-xs">{t.connection ?? ""}</span>
+            ),
+          },
+          {
+            key: "outcome",
+            header: "Outcome",
+            cell: (t) => <OutcomeBadge outcome={t.outcome} />,
+          },
+          {
+            key: "statements",
+            hideOnMobile: true,
+            header: "Statements",
+            align: "right",
+            cell: (t) =>
+              t.statement_count === null ? "—" : count(t.statement_count),
+          },
+          {
+            key: "in",
+            hideOnMobile: true,
+            header: "In",
+            cell: (t) =>
+              t.execution_id ? (
+                <Link
+                  className="font-mono text-xs hover:underline"
+                  href={executionPath({
+                    applicationId: a,
+                    environmentId: e,
+                    source: t.execution_source,
+                    executionId: t.execution_id,
+                  })!}
+                >
+                  {t.execution_preview}
+                </Link>
+              ) : (
+                <span className="text-muted-foreground text-xs">–</span>
+              ),
+          },
+          {
+            key: "d",
+            header: "Duration",
+            align: "right",
+            cell: (t) => ms(t.duration, 2),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}

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

@@ -0,0 +1,241 @@
+import { Link, router, usePage } from "@inertiajs/react"
+
+import { DurationPanel } from "@/components/railwatch/chart-panel"
+import { DataTable } from "@/components/railwatch/data-table"
+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 { Badge } from "@/components/ui/badge"
+import { usePercentile } from "@/hooks/use-percentile"
+import EnvLayout from "@/layouts/env-layout"
+import { executionPath } from "@/lib/execution-path"
+import { count, ms, when } from "@/lib/format"
+import * as R from "@/routes"
+import type { GroupRow, SeriesPoint, SharedProps } from "@/types"
+
+function KindBadge({ kind }: { kind: string | null }) {
+  if (!kind) return null
+  const variant =
+    kind === "partial" ? "secondary" : kind === "layout" ? "outline" : "default"
+  return (
+    <Badge variant={variant} className="font-mono">
+      {kind}
+    </Badge>
+  )
+}
+
+type ViewRenderGroup = GroupRow & { kind: string | null }
+interface Slowest {
+  id: number
+  identifier: string
+  kind: string | null
+  layout: string | null
+  duration: number
+  occurred_at: string
+  execution_id: string | null
+  execution_source: string | null
+  execution_preview: string | null
+  group_hash: string
+}
+interface Props {
+  renders: ViewRenderGroup[]
+  series: SeriesPoint[]
+  slowest: Slowest[]
+  sort: string
+  dir: string
+  q: string
+}
+
+export default function ViewRenders(p: Props) {
+  const { environment, window } = usePage<SharedProps>().props
+  const { percentile } = usePercentile()
+  const a = environment!.application_id
+  const e = environment!.id
+
+  const sortBy = (field: string) =>
+    router.visit(
+      R.applicationEnvironmentViewRendersPath(a, e, {
+        window,
+        sort: field,
+        dir: p.sort === field && p.dir === "desc" ? "asc" : "desc",
+        q: p.q || undefined,
+      }),
+      { preserveState: true },
+    )
+
+  return (
+    <EnvLayout title="View renders">
+      <PageHeader
+        title="View renders"
+        description="Every template your app rendered, grouped by identifier."
+        actions={<PercentilePicker />}
+      />
+      <DurationPanel label="Duration" data={p.series} percentile={percentile} />
+      <FilterBar
+        value={p.q}
+        fields={[{ key: "template", label: "Template" }]}
+        onChange={(q) =>
+          router.visit(
+            R.applicationEnvironmentViewRendersPath(a, e, {
+              window,
+              q: q || undefined,
+            }),
+            { preserveState: true },
+          )
+        }
+        placeholder="template:widgets/_row"
+      />
+      <DataTable
+        rows={p.renders}
+        rowKey={(r) => r.group_hash}
+        empty="No view renders in this window."
+        columns={[
+          {
+            key: "id",
+            header: "Template",
+            grow: true,
+            cell: (r) => <span className="font-mono text-xs">{r.name}</span>,
+          },
+          {
+            key: "kind",
+            hideOnMobile: true,
+            header: "Kind",
+            cell: (r) => <KindBadge kind={r.kind} />,
+          },
+          {
+            key: "trend",
+            hideOnMobile: true,
+            header: "Trend",
+            cell: (r) => <SparklineCell data={r.sparkline} />,
+          },
+          {
+            key: "n",
+            header: (
+              <SortHeader
+                label="Count"
+                active={p.sort === "count"}
+                dir={p.dir === "asc" ? "asc" : "desc"}
+                onClick={() => sortBy("count")}
+              />
+            ),
+            align: "right",
+            cell: (r) => count(r.count),
+          },
+          {
+            key: "avg",
+            hideOnMobile: true,
+            header: (
+              <SortHeader
+                label="Avg"
+                active={p.sort === "avg"}
+                dir={p.dir === "asc" ? "asc" : "desc"}
+                onClick={() => sortBy("avg")}
+              />
+            ),
+            align: "right",
+            cell: (r) => ms(r.avg, 2),
+          },
+          {
+            key: percentile,
+            header: (
+              <SortHeader
+                label={percentile}
+                active={p.sort === percentile}
+                dir={p.dir === "asc" ? "asc" : "desc"}
+                onClick={() => sortBy(percentile)}
+              />
+            ),
+            align: "right",
+            cell: (r) => (
+              <span className="font-semibold">{ms(r[percentile], 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: (r) => ms(r.max, 2),
+          },
+        ]}
+      />
+      <h2 className="text-sm font-semibold">Slowest recent renders</h2>
+      <DataTable
+        rows={p.slowest}
+        rowKey={(s) => s.id}
+        columns={[
+          {
+            key: "when",
+            header: "When",
+            className: "w-40",
+            cell: (s) => (
+              <span className="text-xs tabular-nums">
+                {when(s.occurred_at)}
+              </span>
+            ),
+          },
+          {
+            key: "id",
+            header: "Template",
+            grow: true,
+            cell: (s) => (
+              <span className="font-mono text-xs">{s.identifier}</span>
+            ),
+          },
+          {
+            key: "kind",
+            hideOnMobile: true,
+            header: "Kind",
+            cell: (s) => <KindBadge kind={s.kind} />,
+          },
+          {
+            key: "layout",
+            hideOnMobile: true,
+            header: "Layout",
+            cell: (s) => (
+              <span className="text-muted-foreground font-mono text-xs">
+                {s.layout ?? ""}
+              </span>
+            ),
+          },
+          {
+            key: "in",
+            hideOnMobile: true,
+            header: "In",
+            cell: (s) =>
+              s.execution_id ? (
+                <Link
+                  className="font-mono text-xs hover:underline"
+                  href={executionPath({
+                    applicationId: a,
+                    environmentId: e,
+                    source: s.execution_source,
+                    executionId: s.execution_id,
+                  })!}
+                >
+                  {s.execution_preview}
+                </Link>
+              ) : (
+                <span className="text-muted-foreground text-xs">–</span>
+              ),
+          },
+          {
+            key: "d",
+            header: "Duration",
+            align: "right",
+            cell: (s) => ms(s.duration, 2),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}