railwatch 0.9.3 → 1.0.0

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

@@ -1,309 +0,0 @@
-import { Link, router, usePage } from "@inertiajs/react"
-import {
-  ArrowUpRight,
-  Check,
-  ChevronDown,
-  ChevronRight,
-  Copy,
-} from "lucide-react"
-import { useState } from "react"
-
-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 { SparklineCell } from "@/components/railwatch/sparkline-cell"
-import { StatusBadge } from "@/components/railwatch/status-badge"
-import { useClipboard } from "@/hooks/use-clipboard"
-import { usePercentile } from "@/hooks/use-percentile"
-import EnvLayout from "@/layouts/env-layout"
-import { bytes, count, ms, pct, when } from "@/lib/format"
-import * as R from "@/routes"
-import type { GroupRow, SeriesPoint, SharedProps } from "@/types"
-
-interface Recent {
-  id: number
-  host: string
-  method: string
-  url: string
-  status_code: number | null
-  duration: number
-  request_size: number | null
-  response_size: number | null
-  error: string | null
-  source: string | null
-  occurred_at: string
-  execution_id: string | null
-  execution_preview: string | null
-  response_body: string | null
-}
-interface Props {
-  hosts: GroupRow[]
-  series: SeriesPoint[]
-  recent: Recent[]
-  q: string
-}
-
-// The gem captures a response body only for failed calls, and only the
-// first 4 KiB of it, so the whole thing already sits in the row -- tapping
-// just grows the row rather than fetching anything.
-function ResponseBody({ body }: { body: string }) {
-  const [open, setOpen] = useState(false)
-  const [, copy] = useClipboard()
-  const [copied, setCopied] = useState(false)
-  const Chevron = open ? ChevronDown : ChevronRight
-  return (
-    <div className="flex flex-col items-end gap-1">
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        aria-expanded={open}
-        className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
-      >
-        <Chevron className="size-3" />
-        Body
-      </button>
-      {open && (
-        <div className="w-[70vw] max-w-[36rem] space-y-1 text-left">
-          <button
-            type="button"
-            onClick={() => {
-              void (async () => {
-                const ok = await copy(body)
-                if (ok) {
-                  setCopied(true)
-                  setTimeout(() => setCopied(false), 1200)
-                }
-              })()
-            }}
-            className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
-          >
-            {copied ? (
-              <Check className="size-3" />
-            ) : (
-              <Copy className="size-3" />
-            )}
-            Copy
-          </button>
-          <pre className="bg-muted max-h-64 overflow-auto rounded p-2 font-mono text-[10px] break-all whitespace-pre-wrap">
-            {body}
-          </pre>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default function OutgoingRequests(p: Props) {
-  const { environment, window } = usePage<SharedProps>().props
-  const { percentile } = usePercentile()
-  const a = environment!.application_id
-  const e = environment!.id
-  const recentHref = (r: Recent) =>
-    r.execution_id
-      ? R.applicationEnvironmentRequestPath(a, e, r.execution_id)
-      : null
-  return (
-    <EnvLayout title="Outgoing requests">
-      <PageHeader
-        title="Outgoing requests"
-        description="HTTP calls your app makes to other services, by host and method."
-        actions={<PercentilePicker />}
-      />
-      <div className="grid gap-4 lg:grid-cols-2">
-        <VolumePanel
-          legend="request"
-          label="Outgoing requests"
-          seriesLabel="Calls"
-          data={p.series}
-        />
-        <DurationPanel
-          label="Latency"
-          data={p.series}
-          percentile={percentile}
-        />
-      </div>
-      <DataTable
-        rows={p.hosts}
-        rowKey={(h) => h.group_hash}
-        empty={
-          <EmptyState
-            icon={ArrowUpRight}
-            title="No outgoing requests in this window"
-            description="HTTP calls your app makes to other services appear here."
-          />
-        }
-        columns={[
-          {
-            key: "h",
-            header: "Host",
-            cell: (h) => <span className="font-mono text-xs">{h.name}</span>,
-          },
-          {
-            key: "trend",
-            hideOnMobile: true,
-            header: "Trend",
-            cell: (h) => <SparklineCell data={h.sparkline} />,
-          },
-          {
-            key: "n",
-            header: "Calls",
-            align: "right",
-            cell: (h) => count(h.count),
-          },
-          {
-            key: "f",
-            hideOnMobile: true,
-            header: "Failed",
-            align: "right",
-            cell: (h) => (
-              <span className={h.errors ? "text-destructive" : ""}>
-                {pct(h.errors, h.count)}
-              </span>
-            ),
-          },
-          {
-            key: "avg",
-            hideOnMobile: true,
-            header: "Avg",
-            align: "right",
-            cell: (h) => ms(h.avg),
-          },
-          {
-            key: percentile,
-            header: percentile,
-            align: "right",
-            cell: (h) => (
-              <span className="font-semibold">{ms(h[percentile])}</span>
-            ),
-          },
-          {
-            key: "max",
-            hideOnMobile: true,
-            header: "Max",
-            align: "right",
-            cell: (h) => ms(h.max),
-          },
-        ]}
-      />
-      <h2 className="text-sm font-semibold">Recent</h2>
-      <FilterBar
-        value={p.q}
-        fields={[
-          { key: "host", label: "Host" },
-          {
-            key: "status",
-            label: "Status",
-            options: ["2xx", "3xx", "4xx", "5xx"],
-          },
-        ]}
-        onChange={(q) =>
-          router.visit(
-            R.applicationEnvironmentOutgoingRequestsPath(a, e, {
-              window,
-              q: q || undefined,
-            }),
-            { preserveState: true },
-          )
-        }
-        placeholder="host:api.test status:5xx"
-      />
-      <DataTable
-        rows={p.recent}
-        rowKey={(r) => r.id}
-        empty={
-          <EmptyState
-            icon={ArrowUpRight}
-            title="No outgoing requests in this window"
-            description="HTTP calls your app makes to other services appear here."
-          />
-        }
-        keyboardNav={{
-          onOpen: (r, opts) => {
-            const href = recentHref(r)
-            if (!href) return
-            if (opts?.newTab) globalThis.window.open(href, "_blank")
-            else router.visit(href)
-          },
-        }}
-        columns={[
-          {
-            key: "when",
-            header: "When",
-            cell: (r) => <span className="text-xs">{when(r.occurred_at)}</span>,
-          },
-          {
-            key: "st",
-            header: "Status",
-            cell: (r) => (
-              <StatusBadge
-                status={r.status_code}
-                label={r.error ? "error" : undefined}
-                outcome={r.error ? "failed" : undefined}
-              />
-            ),
-          },
-          {
-            key: "u",
-            hideOnMobile: true,
-            header: "Request",
-            cell: (r) => (
-              <span className="font-mono text-xs">
-                <span className="font-semibold">{r.method}</span> {r.url}
-              </span>
-            ),
-          },
-          {
-            key: "sz",
-            hideOnMobile: true,
-            header: "In/out",
-            align: "right",
-            cell: (r) => `${bytes(r.request_size)} / ${bytes(r.response_size)}`,
-          },
-          {
-            key: "d",
-            header: "Duration",
-            align: "right",
-            cell: (r) => ms(r.duration),
-          },
-          {
-            key: "src",
-            hideOnMobile: true,
-            header: "Source",
-            cell: (r) => (
-              <span className="text-muted-foreground font-mono text-xs">
-                {r.source ?? ""}
-              </span>
-            ),
-          },
-          {
-            key: "in",
-            hideOnMobile: true,
-            header: "In",
-            cell: (r) => {
-              const href = recentHref(r)
-              return href ? (
-                <Link className="font-mono text-xs hover:underline" href={href}>
-                  {r.execution_preview}
-                </Link>
-              ) : null
-            },
-          },
-          {
-            key: "body",
-            header: "Response",
-            align: "right",
-            cell: (r) =>
-              r.response_body ? (
-                <ResponseBody body={r.response_body} />
-              ) : (
-                <span className="text-muted-foreground">–</span>
-              ),
-          },
-        ]}
-      />
-    </EnvLayout>
-  )
-}

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

@@ -1,333 +0,0 @@
-import { Link, usePage } from "@inertiajs/react"
-import { AlertOctagon, Server } 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 { Onboarding } from "@/components/railwatch/onboarding"
-import { PageHeader } from "@/components/railwatch/page-header"
-import { RelativeTime } from "@/components/railwatch/relative-time"
-import { SparklineCell } from "@/components/railwatch/sparkline-cell"
-import { Stat, StatStrip } from "@/components/railwatch/stat"
-import { IssueStatusBadge } from "@/components/railwatch/status-badge"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { useWindow } from "@/hooks/use-window"
-import EnvLayout from "@/layouts/env-layout"
-import { ago, count, ms, pct } from "@/lib/format"
-import { crashFreeTone, rate } from "@/pages/releases/release-health"
-import * as R from "@/routes"
-import type {
-  DeployMarker,
-  GroupRow,
-  IssueRow,
-  SeriesPoint,
-  SharedProps,
-  SummaryWithDelta,
-} from "@/types"
-
-interface Props {
-  totals: { requests: SummaryWithDelta; jobs: SummaryWithDelta }
-  request_series: SeriesPoint[]
-  job_series: SeriesPoint[]
-  slow_routes: GroupRow[]
-  top_jobs: GroupRow[]
-  issues: IssueRow[]
-  deploys: DeployMarker[]
-  // null until the environment reports sessions at all.
-  release_health: {
-    deploy: string
-    ref: string
-    sessions: number
-    crash_free_sessions: number
-  } | null
-  processes: Record<
-    string,
-    {
-      role: string
-      deploy: string
-      ruby_version: string
-      rails_version: string
-      railwatch_version: string
-      booted_at: string
-    }
-  >
-}
-
-export default function Overview(p: Props) {
-  const { environment } = usePage<SharedProps>().props
-  const { window: currentWindow, label: windowLabel } = useWindow()
-  const a = environment!.application_id
-  const e = environment!.id
-  const r = p.totals.requests.current
-  const rPrev = p.totals.requests.previous
-  const j = p.totals.jobs.current
-  const jPrev = p.totals.jobs.previous
-  const deltaCaption =
-    currentWindow === "custom"
-      ? "vs previous period"
-      : `vs previous ${windowLabel}`
-  return (
-    <EnvLayout title="Overview" crumbs={[{ title: "Overview", href: "#" }]}>
-      <ChartHoverProvider>
-        <PageHeader
-          title={`${environment!.application_name} · ${environment!.name}`}
-          description={
-            environment!.last_seen_at ? (
-              <>
-                Last event <RelativeTime iso={environment!.last_seen_at} />
-              </>
-            ) : (
-              "No events received yet."
-            )
-          }
-        />
-        {!environment!.last_seen_at && (
-          <Onboarding tokenPrefix={environment!.token_prefix} />
-        )}
-        <StatStrip>
-          <Stat
-            label="Requests"
-            roll={{ value: r.count, format: count }}
-            hint={`${pct(r.errors, r.count)} 5xx · ${pct(r.client_errors, r.count)} 4xx`}
-            tone={r.errors > 0 ? "warning" : undefined}
-            delta={{
-              current: r.count,
-              previous: rPrev.count,
-              goodDirection: "up",
-            }}
-            deltaCaption={deltaCaption}
-          />
-          <Stat
-            label="Request p95"
-            value={ms(r.p95 / 1000)}
-            hint={`avg ${ms(r.avg / 1000)} · max ${ms(r.max / 1000)}`}
-            delta={{
-              current: r.p95,
-              previous: rPrev.p95,
-              goodDirection: "down",
-            }}
-            deltaCaption={deltaCaption}
-          />
-          <Stat
-            label="Job attempts"
-            roll={{ value: j.count, format: count }}
-            hint={`${pct(j.errors, j.count)} failed`}
-            tone={j.errors > 0 ? "warning" : undefined}
-            delta={{
-              current: j.count,
-              previous: jPrev.count,
-              goodDirection: "up",
-            }}
-            deltaCaption={deltaCaption}
-          />
-          <Stat
-            label="Open issues"
-            value={p.issues.length}
-            tone={p.issues.length ? "destructive" : "success"}
-          />
-          {p.release_health && (
-            <Stat
-              label="Crash-free sessions"
-              value={rate(p.release_health.crash_free_sessions)}
-              tone={crashFreeTone(p.release_health.crash_free_sessions)}
-              hint={`${p.release_health.ref} · ${count(p.release_health.sessions)} sessions`}
-            />
-          )}
-        </StatStrip>
-        <div className="grid gap-4 lg:grid-cols-2">
-          <VolumePanel
-            label="Requests"
-            data={p.request_series}
-            deploys={p.deploys}
-          />
-          <DurationPanel
-            label="Request latency"
-            data={p.request_series}
-            deploys={p.deploys}
-          />
-        </div>
-        <div className="grid gap-4 lg:grid-cols-2">
-          <Card>
-            <CardHeader>
-              <CardTitle>Slowest routes (p95)</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <DataTable
-                rows={p.slow_routes}
-                rowKey={(x) => x.group_hash}
-                hoverKey={(x) => x.group_hash}
-                columns={[
-                  {
-                    key: "name",
-                    header: "Route",
-                    grow: true,
-                    cell: (x) => (
-                      <Link
-                        className="font-mono text-xs hover:underline"
-                        href={R.routeApplicationEnvironmentRequestsPath(
-                          a,
-                          e,
-                          x.group_hash,
-                        )}
-                      >
-                        {x.name}
-                      </Link>
-                    ),
-                  },
-                  {
-                    key: "trend",
-                    hideOnMobile: true,
-                    header: "Trend",
-                    cell: (x) => (
-                      <SparklineCell
-                        data={x.sparkline}
-                        hoverKey={x.group_hash}
-                      />
-                    ),
-                  },
-                  {
-                    key: "count",
-                    header: "Count",
-                    align: "right",
-                    cell: (x) => count(x.count),
-                  },
-                  {
-                    key: "p95",
-                    header: "p95",
-                    align: "right",
-                    cell: (x) => ms(x.p95),
-                  },
-                  {
-                    key: "errors",
-                    hideOnMobile: true,
-                    header: "5xx",
-                    align: "right",
-                    cell: (x) => x.errors,
-                  },
-                ]}
-              />
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader>
-              <CardTitle>Open issues</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <DataTable
-                rows={p.issues}
-                rowKey={(x) => x.id}
-                empty={
-                  <EmptyState
-                    icon={AlertOctagon}
-                    title="No open issues"
-                    description="Issues are grouped from repeated request, job, and exception errors."
-                  />
-                }
-                columns={[
-                  {
-                    key: "key",
-                    header: "Issue",
-                    cell: (x) => (
-                      <Link
-                        className="font-mono text-xs hover:underline"
-                        href={R.issuePath(x.id)}
-                      >
-                        {x.key}
-                      </Link>
-                    ),
-                  },
-                  {
-                    key: "title",
-                    header: "Title",
-                    cell: (x) => (
-                      <span className="line-clamp-1 text-xs">{x.title}</span>
-                    ),
-                  },
-                  {
-                    key: "status",
-                    hideOnMobile: true,
-                    header: "",
-                    cell: (x) => <IssueStatusBadge status={x.status} />,
-                  },
-                  {
-                    key: "n",
-                    hideOnMobile: true,
-                    header: "Count",
-                    align: "right",
-                    cell: (x) => count(x.occurrences),
-                  },
-                  {
-                    key: "last",
-                    header: "Last",
-                    align: "right",
-                    cell: (x) => ago(x.last_seen_at),
-                  },
-                ]}
-              />
-            </CardContent>
-          </Card>
-        </div>
-        <div className="grid gap-4 lg:grid-cols-2">
-          <VolumePanel
-            label="Jobs"
-            legend="job"
-            seriesLabel="Attempts"
-            data={p.job_series}
-            deploys={p.deploys}
-          />
-          <Card>
-            <CardHeader>
-              <CardTitle>Servers</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <DataTable
-                rows={Object.entries(p.processes)}
-                rowKey={([s]) => s}
-                empty={
-                  <EmptyState
-                    icon={Server}
-                    title="No process has reported yet"
-                    description="Server processes report here once they boot with the gem installed."
-                  />
-                }
-                columns={[
-                  {
-                    key: "server",
-                    header: "Server",
-                    cell: ([s]) => (
-                      <span className="font-mono text-xs">{s}</span>
-                    ),
-                  },
-                  { key: "role", header: "Role", cell: ([, v]) => v.role },
-                  {
-                    key: "deploy",
-                    header: "Deploy",
-                    cell: ([, v]) => (
-                      <span className="font-mono text-xs">
-                        {v.deploy?.slice(0, 10)}
-                      </span>
-                    ),
-                  },
-                  {
-                    key: "ver",
-                    hideOnMobile: true,
-                    header: "Ruby / Rails",
-                    cell: ([, v]) => `${v.ruby_version} / ${v.rails_version}`,
-                  },
-                  {
-                    key: "boot",
-                    hideOnMobile: true,
-                    header: "Booted",
-                    align: "right",
-                    cell: ([, v]) => ago(v.booted_at),
-                  },
-                ]}
-              />
-            </CardContent>
-          </Card>
-        </div>
-      </ChartHoverProvider>
-    </EnvLayout>
-  )
-}