railwatch 0.6.0 → 0.7.0

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

@@ -0,0 +1,105 @@
+import { Link, usePage } from "@inertiajs/react"
+
+import { Flamegraph } from "@/components/railwatch/flamegraph"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { Stat, StatStrip } from "@/components/railwatch/stat"
+import { Card, CardContent } from "@/components/ui/card"
+import EnvLayout from "@/layouts/env-layout"
+import { executionPath } from "@/lib/execution-path"
+import { bytes, count, ms, when } from "@/lib/format"
+import * as R from "@/routes"
+import type { SharedProps } from "@/types"
+
+interface Props {
+  profile: {
+    id: number
+    profiler: string
+    mode: string | null
+    interval: number | null
+    duration: number
+    samples: number
+    stacks_bytes: number | null
+    group_hash: string | null
+    execution_id: string | null
+    execution_preview: string | null
+    execution_source: string | null
+    occurred_at: string
+    deploy: string | null
+    server: string | null
+  }
+  collapsed: string
+  truncated: boolean
+}
+
+export default function ProfileShow(p: Props) {
+  const { environment, window } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  const x = p.profile
+
+  return (
+    <EnvLayout
+      title={x.execution_preview ?? "Profile"}
+      crumbs={[
+        {
+          title: "Profiles",
+          href: R.applicationEnvironmentProfilesPath(a, e, { window }),
+        },
+        { title: x.execution_preview ?? `Profile ${x.id}`, href: "#" },
+      ]}
+    >
+      <PageHeader
+        withWindow={false}
+        title={
+          <span className="font-mono">
+            {x.execution_preview ?? `Profile ${x.id}`}
+          </span>
+        }
+        description={
+          <span className="flex flex-wrap gap-x-3 text-xs">
+            <span>{when(x.occurred_at)}</span>
+            <span>
+              {x.profiler}
+              {x.mode ? ` · ${x.mode}` : ""}
+            </span>
+            {x.server && <span>server {x.server}</span>}
+            {x.deploy && <span>deploy {x.deploy.slice(0, 12)}</span>}
+            {x.execution_id && (
+              <Link
+                className="hover:underline"
+                href={executionPath({
+                  applicationId: a,
+                  environmentId: e,
+                  source: x.execution_source,
+                  executionId: x.execution_id,
+                })!}
+              >
+                view execution
+              </Link>
+            )}
+          </span>
+        }
+      />
+      <StatStrip>
+        <Stat label="Samples" value={count(x.samples)} />
+        <Stat
+          label="Duration"
+          value={ms(x.duration)}
+          hint={x.interval ? `every ${ms(x.interval / 1000, 2)}` : undefined}
+        />
+        <Stat label="Profiler" value={x.profiler} hint={x.mode ?? undefined} />
+        <Stat
+          label="Stacks"
+          value={bytes(x.stacks_bytes)}
+          hint={p.truncated ? "truncated for display" : "uncompressed"}
+          tone={p.truncated ? "warning" : undefined}
+        />
+      </StatStrip>
+      <Card>
+        <CardContent className="pt-4">
+          <Flamegraph collapsed={p.collapsed} />
+        </CardContent>
+      </Card>
+    </EnvLayout>
+  )
+}

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

@@ -0,0 +1,492 @@
+import { Link, router, usePage } from "@inertiajs/react"
+import {
+  CheckIcon,
+  ChevronDown,
+  ChevronRight,
+  CopyIcon,
+  Database,
+} from "lucide-react"
+import { useState } from "react"
+
+import { Sql } from "@/components/railwatch/code"
+import { CursorLoadMore } from "@/components/railwatch/cursor-load-more"
+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 { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { useClipboard } from "@/hooks/use-clipboard"
+import { usePercentile } from "@/hooks/use-percentile"
+import { useWindow } from "@/hooks/use-window"
+import EnvLayout from "@/layouts/env-layout"
+import { count, ms } from "@/lib/format"
+import * as R from "@/routes"
+import type {
+  CursorMeta,
+  GroupRow,
+  SharedProps,
+  SummaryWithDelta,
+} from "@/types"
+
+// Telemetry::NPlusOne#suggestion — the fix Railwatch reads off the repeated
+// statement's shape. Null when the SQL isn't a shape a preload can fix.
+interface Suggestion {
+  kind: string
+  parent: string | null
+  association: string
+  code: string
+  explanation: string
+}
+interface N1 {
+  group_hash: string
+  occurrences: number
+  sql: string
+  source: string | null
+  max_count: number
+  suggestion: Suggestion | null
+}
+interface Sample {
+  id: number
+  sql: string
+  duration: number
+  occurred_at: string
+  execution_id: string | null
+  execution_preview: string | null
+  source: string | null
+  group_hash: string
+}
+interface Props {
+  queries: GroupRow[]
+  n_plus_ones: N1[]
+  slowest: Sample[]
+  summary: SummaryWithDelta
+  sort: string
+  dir: string
+  q: string
+  pagination: CursorMeta
+}
+
+const COPIED_RESET_MS = 1500
+
+// The fix for one N+1, revealed under its row. Mono block plus a Copy
+// button so the suggested `includes` goes straight into the editor.
+function Fix({ suggestion }: { suggestion: Suggestion }) {
+  const [, copy] = useClipboard()
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = () => {
+    void copy(suggestion.code).then((ok) => {
+      if (!ok) return
+      setCopied(true)
+      window.setTimeout(() => setCopied(false), COPIED_RESET_MS)
+    })
+  }
+
+  return (
+    <div className="border-warning/40 bg-muted/40 mt-2 space-y-2 rounded-lg border p-2">
+      <div className="flex items-start justify-between gap-2">
+        <pre className="overflow-x-auto font-mono text-xs whitespace-pre-wrap">
+          {suggestion.code}
+        </pre>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-6 shrink-0 gap-1 px-1.5 text-xs"
+          onClick={(event) => {
+            event.stopPropagation()
+            handleCopy()
+          }}
+        >
+          {copied ? (
+            <CheckIcon className="size-3 text-emerald-500" />
+          ) : (
+            <CopyIcon className="size-3 opacity-60" />
+          )}
+          Copy
+        </Button>
+      </div>
+      <p className="text-muted-foreground text-xs whitespace-normal">
+        {suggestion.explanation}
+      </p>
+    </div>
+  )
+}
+
+export default function Queries(p: Props) {
+  const { environment, window, range } = usePage<SharedProps>().props
+  const { percentile } = usePercentile()
+  const { label: windowLabel } = useWindow()
+  // group_hash of the N+1 row whose suggested fix is expanded, if any.
+  const [openFix, setOpenFix] = useState<string | null>(null)
+  const a = environment!.application_id
+  const e = environment!.id
+  const timeParams =
+    window === "custom"
+      ? { from: range?.from, to: range?.to }
+      : { window: window }
+  const cursorTimeParams = range
+    ? { from: range.from, to: range.to }
+    : timeParams
+  const samplesPath = (cursor?: string, q = p.q) =>
+    R.applicationEnvironmentQueriesPath(a, e, {
+      ...(cursor ? cursorTimeParams : timeParams),
+      q: q || undefined,
+      cursor,
+      limit: p.pagination.limit,
+      sort: p.sort,
+      dir: p.dir,
+    })
+  const summary = p.summary.current
+  const previous = p.summary.previous
+  const deltaCaption =
+    window === "custom" ? "vs previous period" : `vs previous ${windowLabel}`
+  const fixable = p.n_plus_ones.filter((n) => n.suggestion).length
+
+  const toggleFix = (n: N1) => {
+    if (!n.suggestion) return
+    setOpenFix((current) => (current === n.group_hash ? null : n.group_hash))
+  }
+
+  const sortBy = (field: string) =>
+    router.visit(
+      R.applicationEnvironmentQueriesPath(a, e, {
+        ...timeParams,
+        q: p.q || undefined,
+        sort: field,
+        dir: p.sort === field && p.dir === "desc" ? "asc" : "desc",
+      }),
+      { preserveState: true },
+    )
+
+  const queryHref = (groupHash: string) =>
+    R.applicationEnvironmentQueryPath(a, e, groupHash, timeParams)
+  const openQuery = (groupHash: string, opts?: { newTab?: boolean }) =>
+    opts?.newTab
+      ? globalThis.window.open(queryHref(groupHash), "_blank")
+      : router.visit(queryHref(groupHash))
+
+  return (
+    <EnvLayout title="Queries">
+      <PageHeader
+        title="Queries"
+        description="Every SQL shape your app ran, grouped by normalized statement."
+        actions={<PercentilePicker />}
+      />
+      <StatStrip>
+        <Stat
+          label="Queries"
+          value={count(summary.count)}
+          delta={{
+            current: summary.count,
+            previous: previous.count,
+            goodDirection: "down",
+          }}
+          deltaCaption={deltaCaption}
+        />
+        <Stat
+          label="N+1 groups"
+          value={count(p.n_plus_ones.length)}
+          tone={p.n_plus_ones.length > 0 ? "warning" : undefined}
+          hint={
+            p.n_plus_ones.length > 0
+              ? `${fixable} with a suggested fix`
+              : undefined
+          }
+        />
+        <Stat
+          label="Avg"
+          value={ms(summary.avg / 1000, 2)}
+          delta={{
+            current: summary.avg,
+            previous: previous.avg,
+            goodDirection: "down",
+          }}
+          deltaCaption={deltaCaption}
+        />
+        <Stat
+          label="p95"
+          value={ms(summary.p95 / 1000, 2)}
+          hint={`p99 ${ms(summary.p99 / 1000, 2)}`}
+          delta={{
+            current: summary.p95,
+            previous: previous.p95,
+            goodDirection: "down",
+          }}
+          deltaCaption={deltaCaption}
+        />
+      </StatStrip>
+      {p.n_plus_ones.length > 0 && (
+        <Card className="border-amber-500/40">
+          <CardHeader>
+            <CardTitle>N+1 queries detected</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <DataTable
+              rows={p.n_plus_ones}
+              rowKey={(n) => n.group_hash}
+              onRowClick={toggleFix}
+              keyboardNav={{
+                onOpen: (n, opts) => openQuery(n.group_hash, opts),
+              }}
+              columns={[
+                {
+                  key: "sql",
+                  header: "Query shape",
+                  grow: true,
+                  cell: (n) => (
+                    <>
+                      <Link
+                        href={R.applicationEnvironmentQueryPath(
+                          a,
+                          e,
+                          n.group_hash,
+                        )}
+                      >
+                        <Sql className="hover:underline">{n.sql}</Sql>
+                      </Link>
+                      {openFix === n.group_hash && n.suggestion && (
+                        <Fix suggestion={n.suggestion} />
+                      )}
+                    </>
+                  ),
+                },
+                {
+                  key: "fix",
+                  header: "Fix",
+                  cell: (n) =>
+                    n.suggestion ? (
+                      <button
+                        type="button"
+                        aria-expanded={openFix === n.group_hash}
+                        aria-label={`Suggested fix: ${n.suggestion.code}`}
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          toggleFix(n)
+                        }}
+                        className="border-warning/50 text-warning hover:bg-warning/10 inline-flex items-center gap-0.5 rounded-md border py-0.5 pr-1.5 pl-0.5 font-mono text-[11px] uppercase"
+                      >
+                        {openFix === n.group_hash ? (
+                          <ChevronDown className="size-3" />
+                        ) : (
+                          <ChevronRight className="size-3" />
+                        )}
+                        Fix
+                      </button>
+                    ) : null,
+                },
+                {
+                  key: "src",
+                  hideOnMobile: true,
+                  header: "Source",
+                  cell: (n) => (
+                    <span className="text-muted-foreground font-mono text-xs">
+                      {n.source ?? ""}
+                    </span>
+                  ),
+                },
+                {
+                  key: "occ",
+                  header: "Executions affected",
+                  align: "right",
+                  cell: (n) => n.occurrences,
+                },
+                {
+                  key: "mx",
+                  hideOnMobile: true,
+                  header: "Max repeats",
+                  align: "right",
+                  cell: (n) => n.max_count,
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+      )}
+      <DataTable
+        rows={p.queries}
+        rowKey={(q) => q.group_hash}
+        empty={
+          <EmptyState
+            icon={Database}
+            title="No queries in this window"
+            description="SQL queries executed by your app appear here as they're reported."
+          />
+        }
+        hoverKey={(q) => q.group_hash}
+        keyboardNav={{
+          onOpen: (q, opts) => openQuery(q.group_hash, opts),
+        }}
+        columns={[
+          {
+            key: "sql",
+            header: "Query",
+            grow: true,
+            cell: (q) => (
+              <Link href={queryHref(q.group_hash)}>
+                <Sql className="hover:underline">{q.name}</Sql>
+              </Link>
+            ),
+          },
+          {
+            key: "trend",
+            hideOnMobile: true,
+            header: "Trend",
+            cell: (q) => (
+              <SparklineCell data={q.sparkline} hoverKey={q.group_hash} />
+            ),
+          },
+          {
+            key: "n",
+            header: (
+              <SortHeader
+                label="Count"
+                active={p.sort === "count"}
+                dir={p.dir === "asc" ? "asc" : "desc"}
+                onClick={() => sortBy("count")}
+              />
+            ),
+            align: "right",
+            cell: (q) => count(q.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: (q) => ms(q.avg, 2),
+          },
+          {
+            key: percentile,
+            header: (
+              <SortHeader
+                label={percentile}
+                active={p.sort === percentile}
+                dir={p.dir === "asc" ? "asc" : "desc"}
+                onClick={() => sortBy(percentile)}
+              />
+            ),
+            align: "right",
+            cell: (q) => (
+              <span className="font-semibold">{ms(q[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: (q) => ms(q.max, 2),
+          },
+        ]}
+      />
+      <h2 className="text-sm font-semibold">Slowest individual queries</h2>
+      <FilterBar
+        value={p.q}
+        fields={[
+          { key: "after", label: "After" },
+          { key: "before", label: "Before" },
+          { key: "user", label: "User" },
+          { key: "tenant", label: "Tenant" },
+          { key: "deploy", label: "Deploy" },
+          { key: "source", label: "Source" },
+          {
+            key: "kind",
+            label: "Execution kind",
+            options: ["request", "job", "scheduled_task", "command"],
+          },
+          { key: "connection", label: "Connection" },
+          { key: "role", label: "Role" },
+          { key: "adapter", label: "Adapter" },
+        ]}
+        onChange={(q) =>
+          router.visit(samplesPath(undefined, q), {
+            only: ["slowest", "pagination", "q"],
+            preserveState: true,
+            reset: ["slowest"],
+          })
+        }
+        placeholder="connection:primary role:reading source:app/models"
+      />
+      <DataTable
+        rows={p.slowest}
+        rowKey={(s) => s.id}
+        keyboardNav={{
+          onOpen: (s, opts) => openQuery(s.group_hash, opts),
+        }}
+        columns={[
+          {
+            key: "sql",
+            header: "SQL",
+            grow: true,
+            cell: (s) => (
+              <Link href={queryHref(s.group_hash)}>
+                <Sql className="hover:underline">{s.sql}</Sql>
+              </Link>
+            ),
+          },
+          {
+            key: "exe",
+            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: "src",
+            hideOnMobile: true,
+            header: "Source",
+            cell: (s) => (
+              <span className="text-muted-foreground font-mono text-xs">
+                {s.source ?? ""}
+              </span>
+            ),
+          },
+          {
+            key: "d",
+            header: "Duration",
+            align: "right",
+            cell: (s) => ms(s.duration, 2),
+          },
+        ]}
+      />
+      <CursorLoadMore
+        meta={p.pagination}
+        href={samplesPath}
+        only={["slowest", "pagination"]}
+      />
+    </EnvLayout>
+  )
+}