railwatch 0.6.0 → 0.7.0

data/app/frontend/lib/env-pages.ts

@@ -0,0 +1,236 @@
+import {
+  Activity,
+  AlertTriangle,
+  ArrowUpRight,
+  Bell,
+  BellRing,
+  Bug,
+  Building2,
+  Cable,
+  CalendarClock,
+  Database,
+  FileText,
+  Flame,
+  Gauge,
+  GitCommit,
+  HardDrive,
+  Layers,
+  LayoutTemplate,
+  Mail,
+  MonitorSmartphone,
+  Package,
+  PieChart,
+  Rocket,
+  Server,
+  Siren,
+  Sparkles,
+  Terminal,
+  Timer,
+  Users,
+  Workflow,
+} from "lucide-react"
+
+import * as R from "@/routes"
+import type { NavItem } from "@/types"
+
+export type EnvPageGroup = "activity" | "monitoring" | "settings"
+
+export interface EnvPage extends NavItem {
+  group: EnvPageGroup
+}
+
+// Shared list of environment sub-pages, used by the sidebar EnvNav, the
+// command palette, and the mobile page switcher so they never drift apart.
+// Grouped the way Nightwatch groups its sidebar: Activity (what the app
+// did), Monitoring (people, deploys, health), Settings (per-environment).
+export function envPages(
+  applicationId: number,
+  environmentId: number,
+  window: string,
+): EnvPage[] {
+  const a = applicationId
+  const e = environmentId
+  const w = { window }
+  return [
+    {
+      title: "Overview",
+      href: R.applicationEnvironmentOverviewPath(a, e, w),
+      icon: Gauge,
+      group: "activity",
+    },
+    {
+      title: "Requests",
+      href: R.applicationEnvironmentRequestsPath(a, e, w),
+      icon: Activity,
+      group: "activity",
+    },
+    {
+      title: "Jobs",
+      href: R.applicationEnvironmentJobsPath(a, e, w),
+      icon: Workflow,
+      group: "activity",
+    },
+    {
+      title: "Scheduled tasks",
+      href: R.applicationEnvironmentScheduledTasksPath(a, e, w),
+      icon: CalendarClock,
+      group: "activity",
+    },
+    {
+      title: "Commands",
+      href: R.applicationEnvironmentCommandsPath(a, e, w),
+      icon: Terminal,
+      group: "activity",
+    },
+    {
+      title: "Exceptions",
+      href: R.applicationEnvironmentExceptionsPath(a, e, w),
+      icon: Bug,
+      group: "activity",
+    },
+    {
+      title: "Queries",
+      href: R.applicationEnvironmentQueriesPath(a, e, w),
+      icon: Database,
+      group: "activity",
+    },
+    {
+      title: "Spans",
+      href: R.applicationEnvironmentSpansPath(a, e, w),
+      icon: Timer,
+      group: "activity",
+    },
+    {
+      title: "Profiles",
+      href: R.applicationEnvironmentProfilesPath(a, e, w),
+      icon: Flame,
+      group: "activity",
+    },
+    {
+      title: "Transactions",
+      href: R.applicationEnvironmentTransactionsPath(a, e, w),
+      icon: GitCommit,
+      group: "activity",
+    },
+    {
+      title: "View renders",
+      href: R.applicationEnvironmentViewRendersPath(a, e, w),
+      icon: LayoutTemplate,
+      group: "activity",
+    },
+    {
+      title: "Cache",
+      href: R.applicationEnvironmentCacheEventsPath(a, e, w),
+      icon: Layers,
+      group: "activity",
+    },
+    {
+      title: "Mail",
+      href: R.applicationEnvironmentMailsPath(a, e, w),
+      icon: Mail,
+      group: "activity",
+    },
+    {
+      title: "Notifications",
+      href: R.applicationEnvironmentNotificationsPath(a, e, w),
+      icon: BellRing,
+      group: "activity",
+    },
+    {
+      title: "Broadcasts",
+      href: R.applicationEnvironmentBroadcastsPath(a, e, w),
+      icon: Cable,
+      group: "activity",
+    },
+    {
+      title: "Outgoing requests",
+      href: R.applicationEnvironmentOutgoingRequestsPath(a, e, w),
+      icon: ArrowUpRight,
+      group: "activity",
+    },
+    {
+      title: "LLM",
+      href: R.applicationEnvironmentLlmCallsPath(a, e, w),
+      icon: Sparkles,
+      group: "activity",
+    },
+    {
+      title: "Storage",
+      href: R.applicationEnvironmentStorageOpsPath(a, e, w),
+      icon: HardDrive,
+      group: "activity",
+    },
+    {
+      title: "Logs",
+      href: R.applicationEnvironmentLogsPath(a, e, w),
+      icon: FileText,
+      group: "activity",
+    },
+    {
+      title: "Deprecations",
+      href: R.applicationEnvironmentDeprecationsPath(a, e, w),
+      icon: AlertTriangle,
+      group: "activity",
+    },
+    {
+      title: "Visits",
+      href: R.applicationEnvironmentVisitsPath(a, e, w),
+      icon: MonitorSmartphone,
+      group: "monitoring",
+    },
+    {
+      title: "Users",
+      href: R.applicationEnvironmentPeoplePath(a, e, w),
+      icon: Users,
+      group: "monitoring",
+    },
+    {
+      title: "Tenants",
+      href: R.applicationEnvironmentTenantsPath(a, e, w),
+      icon: Building2,
+      group: "monitoring",
+    },
+    {
+      title: "Deploys",
+      href: R.applicationEnvironmentDeploysPath(a, e),
+      icon: Rocket,
+      group: "monitoring",
+    },
+    {
+      title: "Releases",
+      href: R.applicationEnvironmentReleasesPath(a, e, w),
+      icon: Package,
+      group: "monitoring",
+    },
+    {
+      title: "Processes",
+      href: R.applicationEnvironmentProcessesPath(a, e),
+      icon: Server,
+      group: "monitoring",
+    },
+    {
+      title: "Alerts",
+      href: R.applicationEnvironmentAlertsPath(a, e),
+      icon: Siren,
+      group: "monitoring",
+    },
+    {
+      title: "Thresholds",
+      href: R.applicationEnvironmentThresholdsPath(a, e),
+      icon: Bell,
+      group: "settings",
+    },
+    {
+      title: "Usage",
+      href: R.applicationEnvironmentUsagePath(a, e),
+      icon: PieChart,
+      group: "settings",
+    },
+  ]
+}
+
+export const ENV_PAGE_GROUPS: { key: EnvPageGroup; title: string }[] = [
+  { key: "activity", title: "Activity" },
+  { key: "monitoring", title: "Monitoring" },
+  { key: "settings", title: "Settings" },
+]

data/app/frontend/lib/execution-path.ts

@@ -0,0 +1,55 @@
+import * as R from "@/routes"
+
+interface ExecutionPathOptions {
+  applicationId: number
+  environmentId: number
+  source: string | null | undefined
+  executionId: string | null | undefined
+}
+
+// Child telemetry uses `job` while the parent record itself is a
+// `job_attempt`, so accept both wire names. Unknown server-side parent kinds
+// use the generic execution surface; browser events intentionally have no
+// server execution to open.
+export function executionPath({
+  applicationId,
+  environmentId,
+  source,
+  executionId,
+}: ExecutionPathOptions): string | null {
+  if (!executionId || source === "browser") return null
+
+  switch (source) {
+    case "request":
+      return R.applicationEnvironmentRequestPath(
+        applicationId,
+        environmentId,
+        executionId,
+      )
+    case "job":
+    case "job_attempt":
+      return R.applicationEnvironmentJobPath(
+        applicationId,
+        environmentId,
+        executionId,
+      )
+    case "scheduled_task":
+      return R.applicationEnvironmentScheduledTaskPath(
+        applicationId,
+        environmentId,
+        executionId,
+      )
+    case "command":
+      return R.applicationEnvironmentCommandPath(
+        applicationId,
+        environmentId,
+        executionId,
+      )
+    default:
+      return R.applicationEnvironmentExecutionPath(
+        applicationId,
+        environmentId,
+        executionId,
+      )
+  }
+}

data/app/frontend/lib/explain.ts

@@ -0,0 +1,50 @@
+export interface ExplainWarning {
+  // 1-based line number within the plan text.
+  line: number
+  message: string
+}
+
+// The parts of a captured query plan that mean the database is doing more
+// work than an index would let it. Each rule carries the plain-English
+// reason, so the panel can say what's wrong rather than just colouring a
+// line. Covers SQLite (EXPLAIN QUERY PLAN), Postgres and MySQL.
+const RULES: { test: RegExp; skip?: RegExp; message: string }[] = [
+  {
+    test: /\bSCAN\b/i,
+    skip: /\bUSING\s+(?:COVERING\s+)?INDEX\b/i,
+    message: "Reads every row of the table — no index covers this filter.",
+  },
+  {
+    test: /\bSeq Scan\b/i,
+    message:
+      "Sequential scan — Postgres reads the whole table; an index on the filtered column avoids it.",
+  },
+  {
+    test: /\bUSING TEMP B-TREE\b/i,
+    message:
+      "Builds a temporary B-tree to sort — an index matching the ORDER BY removes it.",
+  },
+  {
+    test: /filesort/i,
+    message:
+      "Filesort — MySQL sorts the rows itself; an index matching the ORDER BY removes it.",
+  },
+  {
+    test: /\btype:\s*ALL\b/i,
+    message:
+      "Join type ALL — MySQL has no usable index and scans the whole table.",
+  },
+]
+
+// Risky lines of `plan`, in order. One line can raise more than one warning
+// (a full scan that also sorts), so callers should collect by line number
+// rather than assume a single hit.
+export function explainWarnings(plan: string): ExplainWarning[] {
+  return plan
+    .split("\n")
+    .flatMap((text, index) =>
+      RULES.filter((r) => r.test.test(text) && !r.skip?.test(text)).map(
+        (r) => ({ line: index + 1, message: r.message }),
+      ),
+    )
+}

data/app/frontend/lib/filter.ts

@@ -0,0 +1,25 @@
+// Mirrors app/models/filters.rb: "key:value key2:value2 free text" tokens.
+const TOKEN = /^([a-z_]+):(\S+)$/
+
+export interface ParsedFilter {
+  text: string
+  fields: Record<string, string>
+}
+
+export function parseFilter(query: string): ParsedFilter {
+  const text: string[] = []
+  const fields: Record<string, string> = {}
+  for (const word of query.trim().split(/\s+/)) {
+    if (!word) continue
+    const m = TOKEN.exec(word)
+    if (m) fields[m[1]] = m[2]
+    else text.push(word)
+  }
+  return { text: text.join(" "), fields }
+}
+
+export function serializeFilter(parsed: ParsedFilter): string {
+  const tokens = Object.entries(parsed.fields).map(([k, v]) => `${k}:${v}`)
+  if (parsed.text) tokens.push(parsed.text)
+  return tokens.join(" ")
+}

data/app/frontend/lib/flamegraph.ts

@@ -0,0 +1,155 @@
+// Collapsed stacks ("outer;inner;leaf count\n", the format stackprof and
+// vernier both fold to) turned into the tree and rectangles the flamegraph
+// component draws. Pure data — no React, no DOM — so the layout maths is
+// unit-testable on its own.
+
+export interface FlameNode {
+  id: number
+  name: string
+  // Samples in this frame and everything it called.
+  value: number
+  // Samples where this frame was on top of the stack.
+  self: number
+  children: FlameNode[]
+}
+
+export interface FlameRect {
+  id: number
+  node: FlameNode
+  x: number
+  width: number
+  depth: number
+  // The value of the enclosing frame, for the tooltip's "% of parent".
+  parentValue: number
+}
+
+export interface FrameStat {
+  name: string
+  self: number
+  total: number
+}
+
+// Parses collapsed stacks into a tree rooted at a synthetic "all" frame,
+// merging every stack that shares a prefix. Lines without a trailing sample
+// count, with a non-numeric or non-positive count, or with no frames at all
+// are skipped rather than throwing: a profile is a best-effort artefact and
+// one bad line should not blank the page.
+export function parseCollapsed(text: string): FlameNode {
+  let nextId = 0
+  const make = (name: string): FlameNode => ({
+    id: nextId++,
+    name,
+    value: 0,
+    self: 0,
+    children: [],
+  })
+
+  const root = make("all")
+  const index = new Map<string, FlameNode>()
+
+  for (const raw of text.split("\n")) {
+    const line = raw.trim()
+    const sep = line.lastIndexOf(" ")
+    if (sep <= 0) continue
+    const count = Number(line.slice(sep + 1))
+    if (!Number.isFinite(count) || count <= 0) continue
+    const frames = line
+      .slice(0, sep)
+      .split(";")
+      .filter((f) => f.length > 0)
+    if (frames.length === 0) continue
+
+    root.value += count
+    let current = root
+    let path = ""
+    for (const name of frames) {
+      path += ";" + name
+      let child = index.get(path)
+      if (!child) {
+        child = make(name)
+        current.children.push(child)
+        index.set(path, child)
+      }
+      child.value += count
+      current = child
+    }
+    current.self += count
+  }
+  return root
+}
+
+// x/width for every node, proportional to its share of `root`, with depth
+// counted from the given root — so zooming is just calling this again with
+// the clicked node.
+export function layout(root: FlameNode, width: number): FlameRect[] {
+  const rects: FlameRect[] = []
+  const scale = root.value > 0 ? width / root.value : 0
+
+  const walk = (node: FlameNode, x: number, depth: number, parent: number) => {
+    rects.push({
+      id: node.id,
+      node,
+      x,
+      width: node.value * scale,
+      depth,
+      parentValue: parent,
+    })
+    let childX = x
+    for (const child of node.children) {
+      walk(child, childX, depth + 1, node.value)
+      childX += child.value * scale
+    }
+  }
+
+  walk(root, 0, 0, root.value)
+  return rects
+}
+
+// Same frame can appear under many callers; the hottest-frames table folds
+// them by name the way stackprof's own report does. The synthetic root is
+// left out — "all" is never an interesting frame.
+function byName(root: FlameNode): Map<string, FrameStat> {
+  const stats = new Map<string, FrameStat>()
+  const walk = (node: FlameNode, isRoot: boolean) => {
+    if (!isRoot) {
+      const stat = stats.get(node.name) ?? {
+        name: node.name,
+        self: 0,
+        total: 0,
+      }
+      stat.self += node.self
+      stat.total += node.value
+      stats.set(node.name, stat)
+    }
+    for (const child of node.children) walk(child, false)
+  }
+  walk(root, true)
+  return stats
+}
+
+export function hottestSelf(root: FlameNode, n: number): FrameStat[] {
+  return [...byName(root).values()]
+    .sort((a, b) => b.self - a.self || b.total - a.total)
+    .slice(0, n)
+}
+
+export function hottestTotal(root: FlameNode, n: number): FrameStat[] {
+  return [...byName(root).values()]
+    .sort((a, b) => b.total - a.total || b.self - a.self)
+    .slice(0, n)
+}
+
+// Ids of every node whose frame name contains `query`, case-insensitively.
+// A blank query matches nothing rather than everything, so clearing the box
+// clears the highlight.
+export function search(root: FlameNode, query: string): Set<number> {
+  const matches = new Set<number>()
+  const needle = query.trim().toLowerCase()
+  if (needle === "") return matches
+  const walk = (node: FlameNode) => {
+    if (node.name.toLowerCase().includes(needle)) matches.add(node.id)
+    for (const child of node.children) walk(child)
+  }
+  walk(root)
+  return matches
+}

data/app/frontend/lib/format.ts

@@ -0,0 +1,71 @@
+export function ms(value: number | null | undefined, digits = 1): string {
+  if (value === null || value === undefined) return "–"
+  if (value >= 1000) return `${(value / 1000).toFixed(2)}s`
+  if (value < 1 && value > 0) return `${(value * 1000).toFixed(0)}µs`
+  return `${value.toFixed(digits)}ms`
+}
+
+export function count(value: number | null | undefined): string {
+  if (value === null || value === undefined) return "–"
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
+  if (value >= 10_000) return `${(value / 1000).toFixed(1)}k`
+  return value.toLocaleString()
+}
+
+export function bytes(value: number | null | undefined): string {
+  if (!value) return "–"
+  if (value >= 1 << 30) return `${(value / (1 << 30)).toFixed(1)} GB`
+  if (value >= 1 << 20) return `${(value / (1 << 20)).toFixed(1)} MB`
+  if (value >= 1 << 10) return `${(value / (1 << 10)).toFixed(1)} KB`
+  return `${value} B`
+}
+
+// A single cheap model call costs a fraction of a cent, so the precision
+// has to follow the magnitude: $0.0043 is the useful reading, $0.00 is not.
+// null means unpriced, which is not the same as free -- callers that can
+// say so in words should, rather than relying on the dash.
+export function usd(value: number | null | undefined): string {
+  if (value === null || value === undefined) return "–"
+  if (value === 0) return "$0"
+  if (value < 0.01) return `$${value.toFixed(4)}`
+  if (value < 1000) return `$${value.toFixed(2)}`
+  return `$${Math.round(value).toLocaleString()}`
+}
+
+export function pct(numerator: number, denominator: number): string {
+  if (!denominator) return "0%"
+  return `${((numerator / denominator) * 100).toFixed(1)}%`
+}
+
+export function ago(iso: string | null | undefined): string {
+  if (!iso) return "never"
+  const diff = (Date.now() - new Date(iso).getTime()) / 1000
+  if (diff < 60) return `${Math.max(0, Math.floor(diff))}s ago`
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
+  return `${Math.floor(diff / 86400)}d ago`
+}
+
+export function when(iso: string | null | undefined): string {
+  if (!iso) return "–"
+  return new Date(iso).toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  })
+}
+
+export function statusTone(
+  status: number | null | undefined,
+  outcome?: string | null,
+) {
+  if (outcome === "failed") return "destructive"
+  if (outcome === "processed") return "success"
+  if (!status) return "muted"
+  if (status >= 500) return "destructive"
+  if (status >= 400) return "warning"
+  if (status >= 300) return "muted"
+  return "success"
+}

data/app/frontend/lib/keyboard.ts

@@ -0,0 +1,18 @@
+// Page shortcuts must yield to browser shortcuts, IME input, and controls.
+export function ignorePageShortcut(event: KeyboardEvent) {
+  return (
+    event.defaultPrevented ||
+    event.isComposing ||
+    event.repeat ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.altKey ||
+    event.shiftKey ||
+    (event.target instanceof Element &&
+      Boolean(
+        event.target.closest(
+          'input, textarea, select, button, a, [contenteditable]:not([contenteditable="false"]), [role="button"], [role="combobox"], [role="textbox"], [role="menu"], [role="listbox"], [role="dialog"]',
+        ),
+      ))
+  )
+}