railwatch 0.6.0 → 0.7.0

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

@@ -0,0 +1,262 @@
+import { Link, usePage } from "@inertiajs/react"
+import { AlertOctagon, MonitorSmartphone } 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 { IssueStatusBadge } from "@/components/railwatch/status-badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import EnvLayout from "@/layouts/env-layout"
+import { ago, count, ms, when } from "@/lib/format"
+import { ReleaseHealthStrip } from "@/pages/releases/release-health"
+import * as R from "@/routes"
+import type {
+  ReleaseHealthSummary,
+  SessionStatusPoint,
+  SharedProps,
+} from "@/types"
+
+interface SessionRow {
+  id: number
+  session_id: string
+  source: string | null
+  status: string | null
+  user_ref: string | null
+  duration: number | null
+  requests: number
+  visits: number
+  errors: number
+  occurred_at: string
+  started_at: string | null
+}
+
+interface IssueLink {
+  id: number
+  key: string
+  title: string
+  status: string
+}
+
+interface Props {
+  release: {
+    deploy: string
+    ref: string
+    name: string | null
+    deploy_id: number | null
+    deployed_at: string | null
+    previous_ref: string | null
+  }
+  summary: ReleaseHealthSummary
+  previous_summary: ReleaseHealthSummary | null
+  series: SessionStatusPoint[]
+  sessions: SessionRow[]
+  new_issues: IssueLink[]
+  resolved_issues: IssueLink[]
+}
+
+function IssueTable({
+  rows,
+  empty,
+}: {
+  rows: IssueLink[]
+  empty: { title: string; description: string }
+}) {
+  return (
+    <DataTable
+      rows={rows}
+      rowKey={(i) => i.id}
+      empty={<EmptyState icon={AlertOctagon} {...empty} />}
+      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} />,
+        },
+      ]}
+    />
+  )
+}
+
+export default function ReleaseShow(p: Props) {
+  const { environment, window: w } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  return (
+    <EnvLayout
+      title={p.release.ref}
+      crumbs={[
+        {
+          title: "Releases",
+          href: R.applicationEnvironmentReleasesPath(a, e, { window: w }),
+        },
+        { title: p.release.ref, href: "#" },
+      ]}
+    >
+      <PageHeader
+        withWindow={false}
+        title={<span className="font-mono">{p.release.deploy}</span>}
+        description={`${p.release.deployed_at ? when(p.release.deployed_at) : "never deployed"}${p.release.name ? ` · ${p.release.name}` : ""}${p.release.previous_ref ? ` · after ${p.release.previous_ref}` : ""}`}
+        actions={
+          p.release.deploy_id && (
+            <Button asChild variant="outline" size="sm">
+              <Link
+                href={R.applicationEnvironmentDeployPath(
+                  a,
+                  e,
+                  p.release.deploy_id,
+                )}
+              >
+                Deploy
+              </Link>
+            </Button>
+          )
+        }
+      />
+      <ReleaseHealthStrip
+        health={p.summary}
+        previous={p.previous_summary}
+        deltaCaption={
+          p.release.previous_ref ? `vs ${p.release.previous_ref}` : undefined
+        }
+      />
+      <ChartPanel label="Sessions by status" value={count(p.summary.sessions)}>
+        <SessionStatusChart data={p.series} />
+      </ChartPanel>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Issues first seen in this release</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <IssueTable
+              rows={p.new_issues}
+              empty={{
+                title: "No new issues in this release",
+                description:
+                  "Issues first seen while this release was live would show here.",
+              }}
+            />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Issues resolved in this release</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <IssueTable
+              rows={p.resolved_issues}
+              empty={{
+                title: "No issues marked resolved in this release",
+                description:
+                  "Issues resolved and tagged with this deploy would show here.",
+              }}
+            />
+          </CardContent>
+        </Card>
+      </div>
+      <h2 className="text-sm font-semibold">Sessions</h2>
+      <DataTable
+        rows={p.sessions}
+        rowKey={(s) => s.id}
+        rowClassName={(s) =>
+          s.status === "crashed" ? "bg-destructive/5" : undefined
+        }
+        empty={
+          <EmptyState
+            icon={MonitorSmartphone}
+            title="No sessions reported for this release"
+            description="Sessions come from the browser client and the gem's request middleware; config.track_sessions turns both off."
+          />
+        }
+        columns={[
+          {
+            key: "id",
+            header: "Session",
+            cell: (s) => (
+              <span className="font-mono text-xs">{s.session_id}</span>
+            ),
+          },
+          {
+            key: "source",
+            hideOnMobile: true,
+            header: "Source",
+            cell: (s) => <span className="text-xs">{s.source}</span>,
+          },
+          {
+            key: "status",
+            header: "Status",
+            cell: (s) => (
+              <span
+                className={
+                  s.status === "crashed"
+                    ? "text-destructive text-xs font-semibold"
+                    : "text-xs"
+                }
+              >
+                {s.status}
+              </span>
+            ),
+          },
+          {
+            key: "user",
+            hideOnMobile: true,
+            header: "User",
+            cell: (s) => (
+              <span className="font-mono text-xs">{s.user_ref}</span>
+            ),
+          },
+          {
+            key: "duration",
+            header: "Duration",
+            align: "right",
+            cell: (s) => ms(s.duration),
+          },
+          {
+            key: "activity",
+            hideOnMobile: true,
+            header: "Requests / visits",
+            align: "right",
+            cell: (s) => `${count(s.requests)} / ${count(s.visits)}`,
+          },
+          {
+            key: "errors",
+            hideOnMobile: true,
+            header: "Errors",
+            align: "right",
+            cell: (s) => (
+              <span className={s.errors ? "text-destructive" : ""}>
+                {count(s.errors)}
+              </span>
+            ),
+          },
+          {
+            key: "started",
+            header: "Started",
+            align: "right",
+            cell: (s) => ago(s.started_at),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}

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

@@ -0,0 +1,235 @@
+import { Link, router, usePage } from "@inertiajs/react"
+import { Activity } from "lucide-react"
+
+import { ChartHoverProvider } from "@/components/railwatch/chart-hover"
+import { DurationPanel, VolumePanel } from "@/components/railwatch/chart-panel"
+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 { SavedViewsMenu } from "@/components/railwatch/saved-views"
+import { SortHeader } from "@/components/railwatch/sort-header"
+import { SparklineCell } from "@/components/railwatch/sparkline-cell"
+import { usePercentile } from "@/hooks/use-percentile"
+import EnvLayout from "@/layouts/env-layout"
+import { count, ms, pct } from "@/lib/format"
+import * as R from "@/routes"
+import type { DeployMarker, GroupRow, SeriesPoint, SharedProps } from "@/types"
+
+interface Props {
+  routes: GroupRow[]
+  series: SeriesPoint[]
+  deploys: DeployMarker[]
+  sort: string
+  dir: string
+  q: string
+}
+
+export default function Requests(p: Props) {
+  const { environment, window } = usePage<SharedProps>().props
+  const { percentile } = usePercentile()
+  const a = environment!.application_id
+  const e = environment!.id
+
+  const visit = (params: Record<string, string | undefined>) =>
+    router.visit(
+      R.applicationEnvironmentRequestsPath(a, e, {
+        window,
+        sort: p.sort,
+        dir: p.dir,
+        q: p.q || undefined,
+        ...params,
+      }),
+      { preserveState: true },
+    )
+
+  const sortBy = (field: string) =>
+    visit({
+      sort: field,
+      dir: p.sort === field && p.dir === "desc" ? "asc" : "desc",
+    })
+
+  const routeHref = (x: GroupRow) =>
+    R.routeApplicationEnvironmentRequestsPath(a, e, x.group_hash, { window })
+
+  return (
+    <EnvLayout title="Requests">
+      <ChartHoverProvider>
+        <PageHeader
+          title="Requests"
+          description="Every route your app served, with error rates and percentiles."
+          actions={
+            <>
+              <SavedViewsMenu page="requests" />
+              <PercentilePicker />
+            </>
+          }
+        />
+        <FilterBar
+          value={p.q}
+          fields={[
+            {
+              key: "method",
+              label: "Method",
+              options: ["GET", "POST", "PUT", "PATCH", "DELETE"],
+            },
+            {
+              key: "status",
+              label: "Status",
+              options: ["2xx", "3xx", "4xx", "5xx"],
+            },
+            { key: "route", label: "Route" },
+          ]}
+          onChange={(q) => visit({ q: q || undefined })}
+          placeholder="method:GET status:5xx route:/widgets"
+        />
+        <div className="grid gap-4 lg:grid-cols-2">
+          <VolumePanel label="Requests" data={p.series} deploys={p.deploys} />
+          <DurationPanel
+            label="Latency"
+            data={p.series}
+            deploys={p.deploys}
+            percentile={percentile}
+          />
+        </div>
+        <DataTable
+          rows={p.routes}
+          rowKey={(x) => x.group_hash}
+          empty={
+            <EmptyState
+              icon={Activity}
+              title="No requests in this window"
+              description="HTTP requests to your app appear here as they're reported."
+            />
+          }
+          hoverKey={(x) => x.group_hash}
+          keyboardNav={{
+            onOpen: (x, opts) =>
+              opts?.newTab
+                ? globalThis.window.open(routeHref(x), "_blank")
+                : router.visit(routeHref(x)),
+          }}
+          columns={[
+            {
+              key: "name",
+              header: "Route",
+              grow: true,
+              cell: (x) => (
+                <Link
+                  className="font-mono text-xs hover:underline"
+                  href={routeHref(x)}
+                  title={x.name}
+                >
+                  {x.name}
+                </Link>
+              ),
+            },
+            {
+              key: "trend",
+              hideOnMobile: true,
+              header: "Trend",
+              cell: (x) => (
+                <SparklineCell data={x.sparkline} hoverKey={x.group_hash} />
+              ),
+            },
+            {
+              key: "ok",
+              hideOnMobile: true,
+              header: "2xx",
+              align: "right",
+              cell: (x) => count(x.count - x.errors - x.client_errors),
+            },
+            {
+              key: "4xx",
+              hideOnMobile: true,
+              header: "4xx",
+              align: "right",
+              cell: (x) => count(x.client_errors),
+            },
+            {
+              key: "5xx",
+              header: (
+                <SortHeader
+                  label="5xx"
+                  active={p.sort === "errors"}
+                  dir={p.dir === "asc" ? "asc" : "desc"}
+                  onClick={() => sortBy("errors")}
+                />
+              ),
+              align: "right",
+              cell: (x) => (
+                <span className={x.errors ? "text-destructive" : ""}>
+                  {count(x.errors)}
+                </span>
+              ),
+            },
+            {
+              key: "total",
+              header: (
+                <SortHeader
+                  label="Total"
+                  active={p.sort === "count"}
+                  dir={p.dir === "asc" ? "asc" : "desc"}
+                  onClick={() => sortBy("count")}
+                />
+              ),
+              align: "right",
+              cell: (x) => count(x.count),
+            },
+            {
+              key: "err",
+              hideOnMobile: true,
+              header: "Error %",
+              align: "right",
+              cell: (x) => pct(x.errors, x.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: (x) => ms(x.avg),
+            },
+            {
+              key: percentile,
+              header: (
+                <SortHeader
+                  label={percentile}
+                  active={p.sort === percentile}
+                  dir={p.dir === "asc" ? "asc" : "desc"}
+                  onClick={() => sortBy(percentile)}
+                />
+              ),
+              align: "right",
+              cell: (x) => (
+                <span className="font-semibold">{ms(x[percentile])}</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: (x) => ms(x.max),
+            },
+          ]}
+        />
+      </ChartHoverProvider>
+    </EnvLayout>
+  )
+}

data/app/frontend/pages/requests/route.tsx

@@ -0,0 +1,159 @@
+import { router, usePage } from "@inertiajs/react"
+
+import { DurationPanel, VolumePanel } from "@/components/railwatch/chart-panel"
+import { DataTable } from "@/components/railwatch/data-table"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { Stat, StatStrip } from "@/components/railwatch/stat"
+import { StatusBadge } from "@/components/railwatch/status-badge"
+import { useWindow } from "@/hooks/use-window"
+import EnvLayout from "@/layouts/env-layout"
+import { count, ms, pct, when } from "@/lib/format"
+import * as R from "@/routes"
+import type {
+  DeployMarker,
+  ExecutionRow,
+  SeriesPoint,
+  SharedProps,
+  SummaryWithDelta,
+} from "@/types"
+
+interface Props {
+  route: string
+  group_hash: string
+  summary: SummaryWithDelta
+  series: SeriesPoint[]
+  deploys: DeployMarker[]
+  requests: ExecutionRow[]
+}
+
+export default function Route(p: Props) {
+  const { environment, window } = usePage<SharedProps>().props
+  const { window: currentWindow, label: windowLabel } = useWindow()
+  const a = environment!.application_id
+  const e = environment!.id
+  const s = p.summary.current
+  const prev = p.summary.previous
+  const deltaCaption =
+    currentWindow === "custom"
+      ? "vs previous period"
+      : `vs previous ${windowLabel}`
+  return (
+    <EnvLayout
+      title={p.route}
+      crumbs={[
+        {
+          title: "Requests",
+          href: R.applicationEnvironmentRequestsPath(a, e, { window }),
+        },
+        { title: p.route, href: "#" },
+      ]}
+    >
+      <PageHeader title={<span className="font-mono">{p.route}</span>} />
+      <StatStrip>
+        <Stat label="Requests" value={count(s.count)} />
+        <Stat
+          label="Errors"
+          value={pct(s.errors, s.count)}
+          tone={s.errors ? "destructive" : "success"}
+          hint={`${s.errors} 5xx · ${s.client_errors} 4xx`}
+          delta={{
+            current: s.count ? (s.errors / s.count) * 100 : 0,
+            previous: prev.count ? (prev.errors / prev.count) * 100 : 0,
+            goodDirection: "down",
+          }}
+          deltaCaption={deltaCaption}
+        />
+        <Stat label="p50" value={ms(s.p50 / 1000)} />
+        <Stat
+          label="p95"
+          value={ms(s.p95 / 1000)}
+          delta={{ current: s.p95, previous: prev.p95, goodDirection: "down" }}
+          deltaCaption={deltaCaption}
+        />
+        <Stat
+          label="p99 / max"
+          value={ms(s.p99 / 1000)}
+          hint={`max ${ms(s.max / 1000)}`}
+        />
+      </StatStrip>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <VolumePanel label="Requests" data={p.series} deploys={p.deploys} />
+        <DurationPanel label="Latency" data={p.series} deploys={p.deploys} />
+      </div>
+      <DataTable
+        rows={p.requests}
+        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 tabular-nums">
+                {when(x.occurred_at)}
+              </span>
+            ),
+          },
+          {
+            key: "status",
+            header: "Status",
+            cell: (x) => <StatusBadge status={x.status} />,
+          },
+          {
+            key: "dur",
+            header: "Duration",
+            align: "right",
+            cell: (x) => ms(x.duration),
+          },
+          {
+            key: "q",
+            hideOnMobile: true,
+            header: "Queries",
+            align: "right",
+            cell: (x) => x.queries ?? "–",
+          },
+          {
+            key: "user",
+            hideOnMobile: true,
+            header: "User",
+            cell: (x) => (
+              <span className="font-mono text-xs">{x.user_ref ?? "–"}</span>
+            ),
+          },
+          {
+            key: "tenant",
+            hideOnMobile: true,
+            header: "Tenant",
+            cell: (x) => (
+              <span className="font-mono text-xs">{x.tenant ?? "–"}</span>
+            ),
+          },
+          {
+            key: "comp",
+            hideOnMobile: true,
+            header: "Inertia",
+            cell: (x) => (
+              <span className="font-mono text-xs">
+                {x.inertia_component ?? ""}
+              </span>
+            ),
+          },
+          {
+            key: "ex",
+            header: "Exception",
+            cell: (x) => (
+              <span className="text-destructive line-clamp-1 text-xs">
+                {x.exception_preview ?? ""}
+              </span>
+            ),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}