railwatch 0.9.3 → 1.0.0

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

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

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

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