railwatch 0.6.1 → 0.7.0

data/app/frontend/lib/source-link.ts

@@ -0,0 +1,217 @@
+// Builds "open this file" URLs: either into the application's repository on
+// GitHub/GitLab (pinned to the deploy's git SHA when we have one, else the
+// default branch) or into the user's local editor via its URL scheme. The
+// repository URL comes from the application, the editor and local checkout
+// path from the user's profile.
+
+export interface SourceUrlOptions {
+  file: string
+  line?: number | null
+  repositoryUrl?: string | null
+  ref?: string | null
+  defaultBranch?: string | null
+  editor?: string | null
+  editorRoot?: string | null
+}
+
+function present(value: string | null | undefined): string | null {
+  const trimmed = (value ?? "").trim()
+  return trimmed === "" ? null : trimmed
+}
+
+function hasControlCharacters(value: string): boolean {
+  return [...value].some((character) => {
+    const code = character.codePointAt(0) ?? 0
+    return code <= 0x1f || (code >= 0x7f && code <= 0x9f)
+  })
+}
+
+function decodeToFixedPoint(value: string): string | null {
+  let decoded = value
+
+  try {
+    // Each useful decode consumes at least one percent escape, so an
+    // input-length bound reaches a fixed point without an arbitrary pass cap.
+    for (let remaining = value.length + 1; remaining > 0; remaining -= 1) {
+      const next = decodeURIComponent(decoded)
+      if (next === decoded) return decoded
+      decoded = next
+    }
+  } catch {
+    return null
+  }
+
+  return null
+}
+
+function encodePathSegments(value: string): string | null {
+  try {
+    return value.split("/").map(encodeURIComponent).join("/")
+  } catch {
+    return null
+  }
+}
+
+function isAbsolutePath(value: string): boolean {
+  return (
+    value.startsWith("/") ||
+    value.startsWith("\\") ||
+    /^[a-z]:[\\/]/iu.test(value)
+  )
+}
+
+function sourcePath(value: string | null | undefined): {
+  raw: string
+  encoded: string
+} | null {
+  const raw = present(value)
+  if (!raw || isAbsolutePath(raw)) return null
+
+  const decoded = decodeToFixedPoint(raw)
+  if (!decoded || isAbsolutePath(decoded)) return null
+
+  if (
+    decoded.includes("\\") ||
+    hasControlCharacters(decoded) ||
+    /%(?:2e|2f|5c)/iu.test(decoded) ||
+    decoded
+      .split("/")
+      .some((segment) => segment === "" || segment === "." || segment === "..")
+  )
+    return null
+
+  const encoded = encodePathSegments(raw)
+  return encoded ? { raw, encoded } : null
+}
+
+function encodedRoot(value: string | null | undefined): {
+  raw: string
+  encoded: string
+} | null {
+  const raw = present((value ?? "").replace(/\/+$/, ""))
+  if (!raw) return null
+  const encoded = encodePathSegments(raw)
+  return encoded ? { raw, encoded } : null
+}
+
+function gitRef(value: string | null | undefined): {
+  raw: string
+  encoded: string
+} | null {
+  const raw = present(value)
+  if (
+    !raw ||
+    raw === "@" ||
+    raw.startsWith("/") ||
+    raw.endsWith("/") ||
+    raw.endsWith(".") ||
+    raw.includes("//") ||
+    raw.includes("..") ||
+    raw.includes("@{") ||
+    raw.includes("[") ||
+    hasControlCharacters(raw) ||
+    /[ ~^:?*\\]/u.test(raw) ||
+    raw
+      .split("/")
+      .some(
+        (component) => component.startsWith(".") || component.endsWith(".lock"),
+      )
+  )
+    return null
+
+  try {
+    return { raw, encoded: encodeURIComponent(raw) }
+  } catch {
+    return null
+  }
+}
+
+// "https://github.com/org/repo.git/" -> "https://github.com/org/repo"
+function repository(url: string | null | undefined): string | null {
+  return present((url ?? "").replace(/\/+$/, "").replace(/\.git$/, ""))
+}
+
+function host(url: string | null | undefined): "github" | "gitlab" | null {
+  const repo = repository(url)
+  if (!repo) return null
+  if (repo.includes("gitlab")) return "gitlab"
+  if (repo.includes("github")) return "github"
+  return null
+}
+
+export function sourceUrl({
+  file,
+  line,
+  repositoryUrl,
+  ref,
+  defaultBranch,
+  editor,
+  editorRoot,
+}: SourceUrlOptions): string | null {
+  const path = sourcePath(file)
+  if (!path) return null
+
+  if (editor === "github" || editor === "gitlab") {
+    const repo = repository(repositoryUrl)
+    const at = gitRef(present(ref) ?? defaultBranch)
+    if (!repo || !at) return null
+    const blob = editor === "gitlab" ? "-/blob" : "blob"
+    return `${repo}/${blob}/${at.encoded}/${path.encoded}${line ? `#L${line}` : ""}`
+  }
+
+  const root = encodedRoot(editorRoot)
+  if (!root) return null
+  const target = `${root.raw}/${path.raw}`
+  const encodedTarget = `${root.encoded}/${path.encoded}`
+  const suffix = line ? `:${line}` : ""
+  switch (editor) {
+    case "vscode":
+      return `vscode://file${encodedTarget}${suffix}`
+    case "cursor":
+      return `cursor://file${encodedTarget}${suffix}`
+    case "zed":
+      return `zed://file${encodedTarget}${suffix}`
+    case "rubymine":
+      return `jetbrains://rubymine/navigate/reference?project=&path=${encodeURIComponent(`${target}${suffix}`)}`
+    case "textmate":
+      return `txmt://open?url=${encodeURIComponent(`file://${target}`)}${line ? `&line=${line}` : ""}`
+    default:
+      return null
+  }
+}
+
+export function commitUrl(
+  repositoryUrl: string | null | undefined,
+  sha: string | null | undefined,
+): string | null {
+  const repo = repository(repositoryUrl)
+  const commit = gitRef(sha)
+  if (!repo || !commit) return null
+  switch (host(repositoryUrl)) {
+    case "github":
+      return `${repo}/commit/${commit.encoded}`
+    case "gitlab":
+      return `${repo}/-/commit/${commit.encoded}`
+    default:
+      return null
+  }
+}
+
+export function compareUrl(
+  repositoryUrl: string | null | undefined,
+  from: string | null | undefined,
+  to: string | null | undefined,
+): string | null {
+  const repo = repository(repositoryUrl)
+  const start = gitRef(from)
+  const end = gitRef(to)
+  if (!repo || !start || !end) return null
+  switch (host(repositoryUrl)) {
+    case "github":
+      return `${repo}/compare/${start.encoded}...${end.encoded}`
+    case "gitlab":
+      return `${repo}/-/compare/${start.encoded}...${end.encoded}`
+    default:
+      return null
+  }
+}

data/app/frontend/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

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

@@ -0,0 +1,171 @@
+import { Link, router, usePage } from "@inertiajs/react"
+import { ChevronDown, ChevronRight } from "lucide-react"
+import { useState } from "react"
+
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { FilterBar } from "@/components/railwatch/filter-bar"
+import { JsonViewer } from "@/components/railwatch/json-viewer"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { RelativeTime } from "@/components/railwatch/relative-time"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import EnvLayout from "@/layouts/env-layout"
+import { parseFilter, serializeFilter } from "@/lib/filter"
+import * as R from "@/routes"
+import type { SharedProps } from "@/types"
+
+interface AlertRow {
+  id: number
+  event: string
+  status: string
+  sent_at: string | null
+  error: string | null
+  payload: Record<string, unknown>
+  created_at: string
+  integration: { kind: string; name: string }
+  issue: { id: number; key: string; title: string } | null
+}
+interface Props {
+  alerts: AlertRow[]
+  q: string
+  statuses: string[]
+}
+
+export default function AlertsIndex(p: Props) {
+  const { environment } = usePage<SharedProps>().props
+  const [expanded, setExpanded] = useState<number | null>(null)
+  const visit = (q: string) => {
+    const path = environment
+      ? R.applicationEnvironmentAlertsPath(
+          environment.application_id,
+          environment.id,
+          { q: q || undefined },
+        )
+      : R.alertsPath({ q: q || undefined })
+    router.visit(path, { preserveState: true, preserveScroll: true })
+  }
+  const retry = (id: number) =>
+    router.post(R.retryAlertPath(id), {}, { preserveScroll: true })
+
+  // "Did anything fail to deliver?" is the question this page exists to
+  // answer after an incident, so it gets a button rather than a token the
+  // reader has to know how to type.
+  const parsed = parseFilter(p.q)
+  const failedOnly = parsed.fields.status === "failed"
+  const toggleFailed = () => {
+    const fields = { ...parsed.fields }
+    if (failedOnly) delete fields.status
+    else fields.status = "failed"
+    visit(serializeFilter({ text: parsed.text, fields }))
+  }
+
+  return (
+    <EnvLayout title="Alerts" crumbs={[{ title: "Alerts", href: "#" }]}>
+      <PageHeader
+        withWindow={false}
+        title="Alerts"
+        description="Fired alerts across your integrations, newest first."
+      />
+      <div className="flex flex-wrap items-center gap-2">
+        <FilterBar
+          value={p.q}
+          fields={[
+            {
+              key: "event",
+              label: "Event",
+              options: ["new_issue", "regressed_issue", "threshold", "quota"],
+            },
+            { key: "status", label: "Status", options: p.statuses },
+          ]}
+          onChange={visit}
+          placeholder="event:new_issue status:failed"
+        />
+        <Button
+          size="sm"
+          variant={failedOnly ? "default" : "outline"}
+          className="h-8"
+          onClick={toggleFailed}
+        >
+          Failed only
+        </Button>
+      </div>
+      {p.alerts.length === 0 ? (
+        <EmptyState title="No alerts have fired." />
+      ) : (
+        <div className="divide-y rounded-md border">
+          {p.alerts.map((a) => {
+            const isOpen = expanded === a.id
+            return (
+              <div key={a.id} className="p-3">
+                <button
+                  type="button"
+                  className="flex w-full flex-wrap items-center gap-3 text-left text-sm"
+                  onClick={() => setExpanded(isOpen ? null : a.id)}
+                >
+                  {isOpen ? (
+                    <ChevronDown className="text-muted-foreground size-4 shrink-0" />
+                  ) : (
+                    <ChevronRight className="text-muted-foreground size-4 shrink-0" />
+                  )}
+                  <span className="font-mono text-xs">{a.event}</span>
+                  <span className="text-muted-foreground text-xs">
+                    {a.integration.name} ({a.integration.kind})
+                  </span>
+                  {a.issue && (
+                    <Link
+                      href={R.issuePath(a.issue.id)}
+                      onClick={(e) => e.stopPropagation()}
+                      className="text-xs hover:underline"
+                    >
+                      <span className="font-mono font-semibold">
+                        {a.issue.key}
+                      </span>{" "}
+                      <span className="text-muted-foreground">
+                        {a.issue.title}
+                      </span>
+                    </Link>
+                  )}
+                  <span className="ml-auto flex items-center gap-2">
+                    <Badge
+                      variant={
+                        a.status === "failed" ? "destructive" : "outline"
+                      }
+                      className="capitalize"
+                      title={a.error ?? undefined}
+                    >
+                      {a.status}
+                    </Badge>
+                    <RelativeTime
+                      iso={a.sent_at ?? a.created_at}
+                      className="text-muted-foreground text-xs"
+                    />
+                    {a.status === "failed" && (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          retry(a.id)
+                        }}
+                      >
+                        Retry
+                      </Button>
+                    )}
+                  </span>
+                </button>
+                {isOpen && (
+                  <div className="mt-3 space-y-2 pl-7">
+                    {a.error && (
+                      <p className="text-destructive text-xs">{a.error}</p>
+                    )}
+                    <JsonViewer data={a.payload} />
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </EnvLayout>
+  )
+}

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

@@ -0,0 +1,171 @@
+import { Link, router, usePage } from "@inertiajs/react"
+import { Cable } from "lucide-react"
+
+import { DataTable } from "@/components/railwatch/data-table"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { Badge } from "@/components/ui/badge"
+import EnvLayout from "@/layouts/env-layout"
+import { bytes, count, ms, when } from "@/lib/format"
+import * as R from "@/routes"
+import type { SharedProps } from "@/types"
+
+interface Stream {
+  group_hash: string
+  kind: string
+  name: string
+  count: number
+  bytes: number
+  avg: number
+}
+interface Recent {
+  id: number
+  kind: string
+  failed: boolean
+  stream: string | null
+  channel: string | null
+  action: string | null
+  bytes: number | null
+  duration: number
+  occurred_at: string
+  execution_id: string | null
+  execution_preview: string | null
+}
+interface Props {
+  streams: Stream[]
+  recent: Recent[]
+}
+
+export default function Broadcasts(p: Props) {
+  const { environment } = usePage<SharedProps>().props
+  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="Broadcasts">
+      <PageHeader
+        title="Broadcasts"
+        description="Action Cable broadcasts, transmits, and channel actions (covers inertia_cable and Turbo Streams)."
+      />
+      <DataTable
+        rows={p.streams}
+        rowKey={(s) => `${s.group_hash}-${s.kind}`}
+        empty={
+          <EmptyState
+            icon={Cable}
+            title="No broadcasts in this window"
+            description="Action Cable broadcasts appear here as your app sends them."
+          />
+        }
+        columns={[
+          { key: "k", header: "Kind", cell: (s) => s.kind },
+          {
+            key: "n",
+            header: "Stream / channel",
+            cell: (s) => <span className="font-mono text-xs">{s.name}</span>,
+          },
+          {
+            key: "c",
+            hideOnMobile: true,
+            header: "Count",
+            align: "right",
+            cell: (s) => count(s.count),
+          },
+          {
+            key: "b",
+            hideOnMobile: true,
+            header: "Bytes",
+            align: "right",
+            cell: (s) => bytes(s.bytes),
+          },
+          {
+            key: "avg",
+            hideOnMobile: true,
+            header: "Avg",
+            align: "right",
+            cell: (s) => ms(s.avg, 3),
+          },
+        ]}
+      />
+      <h2 className="text-sm font-semibold">Recent</h2>
+      <DataTable
+        rows={p.recent}
+        rowKey={(r) => r.id}
+        empty={
+          <EmptyState
+            icon={Cable}
+            title="No broadcasts in this window"
+            description="Action Cable broadcasts appear here as your app sends them."
+          />
+        }
+        keyboardNav={{
+          onOpen: (r, opts) => {
+            const href = recentHref(r)
+            if (!href) return
+            if (opts?.newTab) 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: "k",
+            header: "Kind",
+            cell: (r) =>
+              r.failed ? (
+                <span className="flex items-center gap-1.5">
+                  {r.kind}
+                  <Badge variant="destructive">failed</Badge>
+                </span>
+              ) : (
+                r.kind
+              ),
+          },
+          {
+            key: "s",
+            header: "Stream / channel",
+            cell: (r) => (
+              <span className="font-mono text-xs">
+                {r.stream ?? r.channel}
+                {r.action ? `#${r.action}` : ""}
+              </span>
+            ),
+          },
+          {
+            key: "b",
+            hideOnMobile: true,
+            header: "Bytes",
+            align: "right",
+            cell: (r) => bytes(r.bytes),
+          },
+          {
+            key: "d",
+            header: "Duration",
+            align: "right",
+            cell: (r) => ms(r.duration, 3),
+          },
+          {
+            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
+            },
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}

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

@@ -0,0 +1,127 @@
+import { router, usePage } from "@inertiajs/react"
+import { Layers } from "lucide-react"
+
+import { 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 { SparklineCell } from "@/components/railwatch/sparkline-cell"
+import EnvLayout from "@/layouts/env-layout"
+import { count, ms } from "@/lib/format"
+import * as R from "@/routes"
+import type { SeriesPoint, SharedProps } from "@/types"
+
+interface Key {
+  group_hash: string
+  key: string
+  count: number
+  hits: number
+  misses: number
+  hit_rate: number | null
+  avg: number
+  sparkline: number[]
+}
+interface Props {
+  keys: Key[]
+  series: SeriesPoint[]
+  q: string
+}
+
+export default function CacheEvents(p: Props) {
+  const { environment, window } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  return (
+    <EnvLayout title="Cache">
+      <PageHeader
+        title="Cache"
+        description="Rails.cache reads, writes, and hit rates by key shape (ids collapsed)."
+      />
+      <VolumePanel
+        legend="cache"
+        label="Cache ops"
+        seriesLabel="Cache ops"
+        data={p.series}
+      />
+      <FilterBar
+        value={p.q}
+        fields={[{ key: "store", label: "Store" }]}
+        onChange={(q) =>
+          router.visit(
+            R.applicationEnvironmentCacheEventsPath(a, e, {
+              window,
+              q: q || undefined,
+            }),
+            { preserveState: true },
+          )
+        }
+        placeholder="store:MemoryStore"
+      />
+      <DataTable
+        rows={p.keys}
+        rowKey={(k) => k.group_hash}
+        empty={
+          <EmptyState
+            icon={Layers}
+            title="No cache activity in this window"
+            description="Cache reads and writes instrumented by the gem appear here."
+          />
+        }
+        columns={[
+          {
+            key: "k",
+            header: "Store · key",
+            cell: (k) => <span className="font-mono text-xs">{k.key}</span>,
+          },
+          {
+            key: "trend",
+            hideOnMobile: true,
+            header: "Trend",
+            cell: (k) => <SparklineCell data={k.sparkline} />,
+          },
+          {
+            key: "n",
+            header: "Ops",
+            align: "right",
+            cell: (k) => count(k.count),
+          },
+          {
+            key: "h",
+            header: "Hits",
+            align: "right",
+            cell: (k) => count(k.hits),
+          },
+          {
+            key: "m",
+            hideOnMobile: true,
+            header: "Misses",
+            align: "right",
+            cell: (k) => count(k.misses),
+          },
+          {
+            key: "r",
+            hideOnMobile: true,
+            header: "Hit rate",
+            align: "right",
+            cell: (k) =>
+              k.hit_rate == null ? (
+                "–"
+              ) : (
+                <span className={k.hit_rate < 50 ? "text-amber-600" : ""}>
+                  {k.hit_rate}%
+                </span>
+              ),
+          },
+          {
+            key: "avg",
+            hideOnMobile: true,
+            header: "Avg",
+            align: "right",
+            cell: (k) => ms(k.avg, 3),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}