railwatch 0.9.4 → 1.1.0

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

@@ -1,276 +0,0 @@
-import { Link, usePage } from "@inertiajs/react"
-import { Database } from "lucide-react"
-import { useMemo } from "react"
-
-import { DurationPanel, VolumePanel } from "@/components/railwatch/chart-panel"
-import { Mono } from "@/components/railwatch/code"
-import { CopyId } from "@/components/railwatch/copy-id"
-import { DataTable } from "@/components/railwatch/data-table"
-import { EmptyState } from "@/components/railwatch/empty-state"
-import { PageHeader } from "@/components/railwatch/page-header"
-import { Stat, StatStrip } from "@/components/railwatch/stat"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import EnvLayout from "@/layouts/env-layout"
-import { explainWarnings } from "@/lib/explain"
-import { count, ms, when } from "@/lib/format"
-import { cn } from "@/lib/utils"
-import * as R from "@/routes"
-import type { SeriesPoint, SharedProps, Summary } from "@/types"
-
-interface Sample {
-  id: number
-  sql: string
-  duration: number
-  occurred_at: string
-  execution_id: string | null
-  execution_preview: string | null
-  source: string | null
-  connection: string | null
-  row_count: number | null
-}
-// The newest sample in the group the gem captured a plan for. Only slow
-// queries get one, so it's usually not the newest sample overall.
-interface Explain {
-  plan: string
-  occurred_at: string
-  duration: number
-  execution_id: string | null
-}
-interface Props {
-  group_hash: string
-  sql: string | null
-  summary: Summary
-  series: SeriesPoint[]
-  sources: [string, number][]
-  callers: [string, number][]
-  roles: [string, number][]
-  explain: Explain | null
-  samples: Sample[]
-}
-
-export default function QueryShow(p: Props) {
-  const { environment, window } = usePage<SharedProps>().props
-  const a = environment!.application_id
-  const e = environment!.id
-  const s = p.summary
-  const plan = p.explain?.plan ?? ""
-  const warnings = useMemo(() => explainWarnings(plan), [plan])
-  return (
-    <EnvLayout
-      title="Query"
-      crumbs={[
-        {
-          title: "Queries",
-          href: R.applicationEnvironmentQueriesPath(a, e, { window }),
-        },
-        { title: "Query", href: "#" },
-      ]}
-    >
-      <PageHeader
-        title="Query"
-        actions={p.sql ? <CopyId value={p.sql} label="Copy SQL" /> : undefined}
-      />
-      <pre className="bg-muted/60 overflow-x-auto rounded-lg p-3 font-mono text-xs whitespace-pre-wrap">
-        {p.sql ?? "No samples in this window."}
-      </pre>
-      {p.roles.length > 0 && (
-        <div className="text-muted-foreground font-mono text-[11px]">
-          {p.roles.map(([role, n]) => `${role} ${count(n)}`).join(" · ")}
-        </div>
-      )}
-      <StatStrip>
-        <Stat label="Executions" value={count(s.count)} />
-        <Stat label="Avg" value={ms(s.avg / 1000, 2)} />
-        <Stat
-          label="p95"
-          value={ms(s.p95 / 1000, 2)}
-          hint={`p99 ${ms(s.p99 / 1000, 2)}`}
-        />
-        <Stat label="Max" value={ms(s.max / 1000, 2)} />
-      </StatStrip>
-      <Card>
-        <CardHeader>
-          <CardTitle>Query plan</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {p.explain ? (
-            <>
-              <div className="text-muted-foreground mb-2 font-mono text-[11px]">
-                {when(p.explain.occurred_at)} · {ms(p.explain.duration, 2)}
-                {p.explain.execution_id && (
-                  <>
-                    {" · "}
-                    <Link
-                      className="hover:underline"
-                      href={R.applicationEnvironmentRequestPath(
-                        a,
-                        e,
-                        p.explain.execution_id,
-                      )}
-                    >
-                      {p.explain.execution_id}
-                    </Link>
-                  </>
-                )}
-              </div>
-              <div className="bg-muted/60 overflow-x-auto rounded-lg p-3 font-mono text-xs">
-                {plan.split("\n").map((row, i) => {
-                  const hits = warnings.filter((w) => w.line === i + 1)
-                  return (
-                    <div
-                      key={i}
-                      className={cn(
-                        "py-0.5",
-                        hits.length > 0 && "border-warning border-l-2 pl-2",
-                      )}
-                    >
-                      <div
-                        className={cn(
-                          "whitespace-pre",
-                          hits.length > 0 && "text-warning",
-                        )}
-                      >
-                        {row}
-                      </div>
-                      {hits.map((w) => (
-                        <div
-                          key={w.message}
-                          className="text-warning/80 mt-0.5 text-[11px] whitespace-normal"
-                        >
-                          {w.message}
-                        </div>
-                      ))}
-                    </div>
-                  )
-                })}
-              </div>
-            </>
-          ) : (
-            <p className="text-muted-foreground text-xs">
-              Enable plans for slow queries with{" "}
-              <Mono>RAILWATCH_CAPTURE_QUERY_EXPLAIN=true</Mono> (threshold{" "}
-              <Mono>RAILWATCH_EXPLAIN_THRESHOLD_MS</Mono>, default 100ms)
-            </p>
-          )}
-        </CardContent>
-      </Card>
-      <div className="grid gap-4 lg:grid-cols-2">
-        <VolumePanel
-          legend="outcome"
-          label="Executions"
-          seriesLabel="Executions"
-          data={p.series}
-        />
-        <DurationPanel label="Duration" data={p.series} />
-      </div>
-      <div className="grid gap-4 lg:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle>Called from</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <DataTable
-              rows={p.sources}
-              rowKey={([src]) => src}
-              empty={
-                <EmptyState
-                  icon={Database}
-                  title="No source captured"
-                  description="A backtrace location wasn't available for this query."
-                />
-              }
-              columns={[
-                {
-                  key: "s",
-                  header: "Source",
-                  cell: ([src]) => (
-                    <span className="font-mono text-xs">{src}</span>
-                  ),
-                },
-                {
-                  key: "n",
-                  header: "Count",
-                  align: "right",
-                  cell: ([, n]) => n,
-                },
-              ]}
-            />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Executions</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <DataTable
-              rows={p.callers}
-              rowKey={([c]) => c}
-              columns={[
-                {
-                  key: "c",
-                  header: "Execution",
-                  cell: ([c]) => <span className="font-mono text-xs">{c}</span>,
-                },
-                {
-                  key: "n",
-                  header: "Count",
-                  align: "right",
-                  cell: ([, n]) => n,
-                },
-              ]}
-            />
-          </CardContent>
-        </Card>
-      </div>
-      <DataTable
-        rows={p.samples}
-        rowKey={(x) => x.id}
-        columns={[
-          {
-            key: "when",
-            header: "When",
-            cell: (x) => <span className="text-xs">{when(x.occurred_at)}</span>,
-          },
-          {
-            key: "in",
-            header: "In",
-            cell: (x) =>
-              x.execution_id ? (
-                <Link
-                  className="font-mono text-xs hover:underline"
-                  href={R.applicationEnvironmentRequestPath(
-                    a,
-                    e,
-                    x.execution_id,
-                  )}
-                >
-                  {x.execution_preview}
-                </Link>
-              ) : (
-                <span className="text-muted-foreground text-xs">–</span>
-              ),
-          },
-          {
-            key: "rows",
-            hideOnMobile: true,
-            header: "Rows",
-            align: "right",
-            cell: (x) => x.row_count ?? "–",
-          },
-          {
-            key: "conn",
-            hideOnMobile: true,
-            header: "DB",
-            cell: (x) => x.connection,
-          },
-          {
-            key: "d",
-            header: "Duration",
-            align: "right",
-            cell: (x) => ms(x.duration, 2),
-          },
-        ]}
-      />
-    </EnvLayout>
-  )
-}

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

@@ -1,190 +0,0 @@
-import { Link, router, usePage } from "@inertiajs/react"
-import { Package } 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 { PageHeader } from "@/components/railwatch/page-header"
-import { SessionStatusChart } from "@/components/railwatch/series-chart"
-import { Stat, StatStrip } from "@/components/railwatch/stat"
-import EnvLayout from "@/layouts/env-layout"
-import { count, ms, when } from "@/lib/format"
-import { crashFreeTone, rate } from "@/pages/releases/release-health"
-import { releasePath } from "@/pages/releases/release-path"
-import type {
-  ReleaseHealthSummary,
-  SessionStatusPoint,
-  SharedProps,
-} from "@/types"
-
-interface ReleaseRow extends ReleaseHealthSummary {
-  deploy: string
-  ref: string
-  name: string | null
-  deployed_at: string
-  adoption: number
-  new_issues: number
-}
-
-interface Props {
-  releases: ReleaseRow[]
-  series: SessionStatusPoint[]
-  summary: ReleaseHealthSummary & { releases: number }
-}
-
-export default function Releases(p: Props) {
-  const { environment, window: w } = usePage<SharedProps>().props
-  const a = environment!.application_id
-  const e = environment!.id
-  const href = (r: ReleaseRow) => releasePath(a, e, r.deploy, { window: w })
-  const totals = p.series.reduce(
-    (sum, point) => ({
-      ok: sum.ok + point.ok,
-      errored: sum.errored + point.errored,
-      crashed: sum.crashed + point.crashed,
-    }),
-    { ok: 0, errored: 0, crashed: 0 },
-  )
-  return (
-    <EnvLayout title="Releases">
-      <PageHeader
-        title="Releases"
-        description="Sessions per deploy, and how many of them ended without a crash. A release is the deploy stamped on every record the gem ships."
-      />
-      <StatStrip>
-        <Stat
-          label="Crash-free sessions"
-          value={rate(p.summary.crash_free_sessions)}
-          tone={crashFreeTone(p.summary.crash_free_sessions)}
-        />
-        <Stat
-          label="Crash-free users"
-          value={rate(p.summary.crash_free_users)}
-          tone={crashFreeTone(p.summary.crash_free_users)}
-        />
-        <Stat
-          label="Sessions"
-          value={count(p.summary.sessions)}
-          hint={`${count(p.summary.users)} users`}
-        />
-        <Stat label="Active releases" value={count(p.summary.releases)} />
-      </StatStrip>
-      <ChartPanel
-        label="Sessions by status"
-        value={count(p.summary.sessions)}
-        legend={[
-          {
-            key: "ok",
-            label: "ok",
-            value: count(totals.ok),
-            color: "var(--ok)",
-          },
-          {
-            key: "errored",
-            label: "errored",
-            value: count(totals.errored),
-            color: "var(--warning)",
-          },
-          {
-            key: "crashed",
-            label: "crashed",
-            value: count(totals.crashed),
-            color: "var(--danger)",
-          },
-        ]}
-      >
-        <SessionStatusChart data={p.series} />
-      </ChartPanel>
-      <DataTable
-        rows={p.releases}
-        rowKey={(r) => r.deploy}
-        empty={
-          <EmptyState
-            icon={Package}
-            title="No releases in this window"
-            description="A release appears once a deploy is recorded and the app reports sessions for it."
-          />
-        }
-        onRowClick={(r) => router.visit(href(r))}
-        keyboardNav={{
-          onOpen: (r, opts) =>
-            opts?.newTab
-              ? globalThis.window.open(href(r), "_blank")
-              : router.visit(href(r)),
-        }}
-        columns={[
-          {
-            key: "ref",
-            header: "Release",
-            cell: (r) => (
-              <Link
-                className="font-mono text-xs hover:underline"
-                href={href(r)}
-              >
-                {r.ref}
-              </Link>
-            ),
-          },
-          {
-            key: "at",
-            header: "Deployed",
-            cell: (r) => <span className="text-xs">{when(r.deployed_at)}</span>,
-          },
-          {
-            key: "adoption",
-            header: "Adoption",
-            align: "right",
-            cell: (r) => `${r.adoption}%`,
-          },
-          {
-            key: "sessions",
-            header: "Sessions",
-            align: "right",
-            cell: (r) => count(r.sessions),
-          },
-          {
-            key: "cfs",
-            header: "Crash-free sessions",
-            align: "right",
-            cell: (r) => (
-              <span
-                className={
-                  crashFreeTone(r.crash_free_sessions) === "destructive"
-                    ? "text-destructive font-semibold"
-                    : "font-semibold"
-                }
-              >
-                {rate(r.crash_free_sessions)}
-              </span>
-            ),
-          },
-          {
-            key: "cfu",
-            hideOnMobile: true,
-            header: "Crash-free users",
-            align: "right",
-            cell: (r) => rate(r.crash_free_users),
-          },
-          {
-            key: "issues",
-            hideOnMobile: true,
-            header: "New issues",
-            align: "right",
-            cell: (r) => (
-              <span className={r.new_issues ? "text-destructive" : ""}>
-                {count(r.new_issues)}
-              </span>
-            ),
-          },
-          {
-            key: "duration",
-            hideOnMobile: true,
-            header: "Duration",
-            align: "right",
-            cell: (r) => ms(r.avg_duration_ms),
-          },
-        ]}
-      />
-    </EnvLayout>
-  )
-}

data/app/frontend/pages/releases/release-health.tsx

@@ -1,68 +0,0 @@
-import { Stat, StatStrip } from "@/components/railwatch/stat"
-import { count, ms } from "@/lib/format"
-import type { ReleaseHealthSummary } from "@/types"
-
-// Sentry's own bands: anything under 98% crash-free is a release you roll
-// back, 98–99.5% is one you watch.
-export function crashFreeTone(rate: number | null) {
-  if (rate === null) return "default"
-  if (rate >= 99.5) return "success"
-  return rate >= 98 ? "warning" : "destructive"
-}
-
-// A rate is null, not zero, when there were no sessions to divide by.
-export function rate(value: number | null) {
-  return value === null ? "–" : `${value.toFixed(2)}%`
-}
-
-function delta(current: number | null, previous: number | null | undefined) {
-  if (current === null || previous === null || previous === undefined)
-    return undefined
-  return { current, previous, goodDirection: "up" as const }
-}
-
-// The four release-health numbers, shared by the releases index, a release,
-// and a deploy. `previous` turns the crash-free stats into deltas.
-export function ReleaseHealthStrip({
-  health,
-  previous,
-  deltaCaption,
-}: {
-  health: ReleaseHealthSummary
-  previous?: ReleaseHealthSummary | null
-  deltaCaption?: string
-}) {
-  return (
-    <StatStrip>
-      <Stat
-        label="Crash-free sessions"
-        value={rate(health.crash_free_sessions)}
-        tone={crashFreeTone(health.crash_free_sessions)}
-        delta={delta(health.crash_free_sessions, previous?.crash_free_sessions)}
-        deltaCaption={deltaCaption}
-        hint={
-          health.errored === null
-            ? undefined
-            : `${health.errored.toFixed(2)}% errored`
-        }
-      />
-      <Stat
-        label="Crash-free users"
-        value={rate(health.crash_free_users)}
-        tone={crashFreeTone(health.crash_free_users)}
-        delta={delta(health.crash_free_users, previous?.crash_free_users)}
-        deltaCaption={deltaCaption}
-      />
-      <Stat
-        label="Sessions"
-        value={count(health.sessions)}
-        hint={`${count(health.users)} users`}
-      />
-      <Stat
-        label="Session duration"
-        value={ms(health.avg_duration_ms)}
-        hint="average"
-      />
-    </StatStrip>
-  )
-}

data/app/frontend/pages/releases/release-path.ts

@@ -1,25 +0,0 @@
-import * as R from "@/routes"
-
-// A release is identified by its deploy string, and Rails reads a dot in a
-// path segment as a format separator, so /releases/v1.2.3 would arrive as id
-// "v1" with format "2.3". js-routes escapes everything else in a segment but
-// leaves dots alone, so percent-encode them here; the query string (which
-// never holds the deploy) is left as it was generated. String() because
-// eslint does not type-check the generated app/frontend/routes module.
-export function releasePath(
-  applicationId: number,
-  environmentId: number,
-  deploy: string,
-  options?: { window?: string },
-) {
-  const url = String(
-    R.applicationEnvironmentReleasePath(
-      applicationId,
-      environmentId,
-      deploy,
-      options,
-    ),
-  )
-  const [path, query] = url.split("?")
-  return `${path.replace(/\./g, "%2E")}${query ? `?${query}` : ""}`
-}