railwatch 0.9.4 → 1.0.0

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

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

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