railwatch 0.6.1 → 0.7.0

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

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

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