railwatch 0.6.1 → 0.7.0

data/app/frontend/components/railwatch/env-switcher.tsx

@@ -0,0 +1,145 @@
+import { Link, router, usePage } from "@inertiajs/react"
+import { Check, ChevronsUpDown, Plus } from "lucide-react"
+
+import { LiveDot } from "@/components/railwatch/live-dot"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+import { cn } from "@/lib/utils"
+import {
+  applicationEnvironmentOverviewPath,
+  newApplicationPath,
+} from "@/routes"
+import type { SharedProps } from "@/types"
+
+function Monogram({ name, className }: { name: string; className?: string }) {
+  return (
+    <span
+      className={cn(
+        "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-md font-mono text-xs font-semibold",
+        className,
+      )}
+    >
+      {name.slice(0, 2).toUpperCase()}
+    </span>
+  )
+}
+
+// Application · environment switcher at the top of the sidebar. Mirrors the
+// Nightwatch app card: monogram, application name, environment name, and
+// a dropdown listing every environment across the account's applications.
+export function EnvSwitcher() {
+  const { applications, environment, embedded } = usePage<SharedProps>().props
+  if (applications.length === 0) return null
+  // Account-level pages (dashboard, issues) have no environment; fall back to
+  // the first application so the card still names something real.
+  const currentApp =
+    applications.find((a) => a.id === environment?.application_id) ??
+    applications[0]
+  // Embedded: one application, one environment, nothing to switch to. The
+  // card stays as a header (which app, which environment) with no menu.
+  if (embedded) {
+    const env = environment ?? currentApp.environments[0]
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton
+            size="lg"
+            asChild
+            className="border-0 py-2 pr-3 pl-2 hover:bg-transparent"
+          >
+            <Link
+              href={applicationEnvironmentOverviewPath(currentApp.id, env.id)}
+              prefetch
+            >
+              <Monogram name={currentApp.name} />
+              <span className="grid flex-1 text-left leading-tight">
+                <span className="truncate text-sm font-semibold">
+                  {currentApp.name}
+                </span>
+                <span className="text-muted-foreground truncate text-xs">
+                  {env.name}
+                </span>
+              </span>
+            </Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    )
+  }
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent hover:bg-sidebar-accent border-0 py-2 pr-3 pl-2"
+            >
+              <Monogram name={currentApp.name} />
+              <span className="grid flex-1 text-left leading-tight">
+                <span className="truncate text-sm font-semibold">
+                  {currentApp.name}
+                </span>
+                <span className="text-muted-foreground truncate text-xs">
+                  {environment
+                    ? environment.name
+                    : `${currentApp.environments.length} environment${currentApp.environments.length === 1 ? "" : "s"}`}
+                </span>
+              </span>
+              <ChevronsUpDown className="size-3.5 opacity-60" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="start"
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-64"
+          >
+            {applications.map((app) => (
+              <div key={app.id}>
+                <DropdownMenuLabel className="label-caps">
+                  {app.name}
+                </DropdownMenuLabel>
+                {app.environments.map((env) => (
+                  <DropdownMenuItem
+                    key={env.id}
+                    onSelect={() =>
+                      router.visit(
+                        applicationEnvironmentOverviewPath(app.id, env.id),
+                      )
+                    }
+                  >
+                    <LiveDot
+                      lastSeenAt={env.paused ? null : env.last_seen_at}
+                      thresholdMs={10 * 60 * 1000}
+                    />
+                    <span className="flex-1">{env.name}</span>
+                    {env.id === environment?.id && (
+                      <Check className="size-3.5" />
+                    )}
+                  </DropdownMenuItem>
+                ))}
+              </div>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={() => router.visit(newApplicationPath())}
+            >
+              <Plus className="size-3.5" />
+              Add application
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

data/app/frontend/components/railwatch/filter-bar.tsx

@@ -0,0 +1,153 @@
+import { Filter as FilterIcon, Search, X } from "lucide-react"
+import { useState } from "react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { parseFilter, serializeFilter } from "@/lib/filter"
+
+export interface FilterField {
+  key: string
+  label: string
+  options?: string[]
+}
+
+// key:value key2:value2 free text query bar: chips for parsed field tokens,
+// a raw-text input for typing (Enter/blur commits), and a field/option
+// autocomplete popover. Full width on phones, a search-box on desktop.
+export function FilterBar({
+  value,
+  fields,
+  onChange,
+  placeholder = "Filter...",
+}: {
+  value: string
+  fields: FilterField[]
+  onChange: (query: string) => void
+  placeholder?: string
+}) {
+  const [draft, setDraft] = useState(value)
+  const [open, setOpen] = useState(false)
+  // Re-sync the draft when `value` changes from outside (e.g. a chip removal
+  // round-tripping through the server, or browser back/forward) without an
+  // effect: https://react.dev/learn/you-might-not-need-an-effect
+  const [syncedValue, setSyncedValue] = useState(value)
+  if (value !== syncedValue) {
+    setSyncedValue(value)
+    setDraft(value)
+  }
+  const parsed = parseFilter(value)
+
+  const removeField = (key: string) => {
+    const next = { ...parsed.fields }
+    delete next[key]
+    const q = serializeFilter({ text: parsed.text, fields: next })
+    setDraft(q)
+    onChange(q)
+  }
+
+  const applyToken = (key: string, val: string) => {
+    const q = serializeFilter({
+      text: parsed.text,
+      fields: { ...parsed.fields, [key]: val },
+    })
+    setDraft(q)
+    onChange(q)
+    setOpen(false)
+  }
+
+  const startToken = (key: string) => {
+    setDraft((d) => `${d}${d && !d.endsWith(" ") ? " " : ""}${key}:`)
+    setOpen(false)
+  }
+
+  const commit = () => onChange(draft)
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <div className="bg-card focus-within:border-ring flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-md border px-2 md:max-w-md md:flex-none md:basis-80">
+        <Search className="text-muted-foreground size-3.5 shrink-0" />
+        {Object.entries(parsed.fields).map(([key, val]) => (
+          <Badge
+            key={key}
+            variant="secondary"
+            className="shrink-0 gap-1 rounded-sm px-1.5 font-mono text-[10px]"
+          >
+            {key}:{val}
+            <button
+              type="button"
+              onClick={() => removeField(key)}
+              className="hover:text-destructive"
+              aria-label={`Remove ${key} filter`}
+            >
+              <X className="size-3" />
+            </button>
+          </Badge>
+        ))}
+        <input
+          data-filter-bar-input
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && commit()}
+          onBlur={commit}
+          placeholder={placeholder}
+          className="placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent font-mono text-xs outline-none"
+        />
+        <kbd className="bg-muted text-muted-foreground hidden rounded px-1 font-mono text-[10px] md:inline">
+          /
+        </kbd>
+      </div>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-8 px-2"
+            aria-label="Add filter"
+          >
+            <FilterIcon className="size-3.5" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-56 p-0" align="start">
+          <Command>
+            <CommandList>
+              <CommandEmpty>No fields.</CommandEmpty>
+              {fields.map((f) =>
+                f.options ? (
+                  <CommandGroup key={f.key} heading={f.label}>
+                    {f.options.map((opt) => (
+                      <CommandItem
+                        key={opt}
+                        onSelect={() => applyToken(f.key, opt)}
+                      >
+                        {opt}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                ) : (
+                  <CommandGroup key={f.key} heading={f.label}>
+                    <CommandItem onSelect={() => startToken(f.key)}>
+                      {f.key}:…
+                    </CommandItem>
+                  </CommandGroup>
+                ),
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}

data/app/frontend/components/railwatch/flamegraph.tsx

@@ -0,0 +1,324 @@
+import { useEffect, useMemo, useRef, useState } from "react"
+
+import { DataTable } from "@/components/railwatch/data-table"
+import { Segmented, SegmentedItem } from "@/components/railwatch/segmented"
+import { Input } from "@/components/ui/input"
+import {
+  type FlameNode,
+  type FlameRect,
+  hottestSelf,
+  hottestTotal,
+  layout,
+  parseCollapsed,
+  search,
+} from "@/lib/flamegraph"
+import { count, pct } from "@/lib/format"
+import { cn } from "@/lib/utils"
+
+const ROW = 18
+const HOTTEST = 15
+
+interface View {
+  tree: FlameNode
+  zoom: FlameNode[]
+  hovered: { rect: FlameRect; x: number; y: number } | null
+}
+
+// Frames read "Class#method (path:line)". The gem strips the Rails root
+// from app paths, so an app frame's path starts with app/, lib/ or config/;
+// a gem frame's path starts with the gem's name (activerecord/...), Ruby's
+// own with ruby/ or <internal:, and a C function has no file at all. Only
+// the app's own frames get the warm end of the palette.
+function isAppFrame(name: string): boolean {
+  const open = name.lastIndexOf(" (")
+  const path = open >= 0 ? name.slice(open + 2) : ""
+  return /^(app|lib|config|db|engines)\//.test(path)
+}
+
+function hashOf(value: string): number {
+  let h = 0
+  for (let i = 0; i < value.length; i++) h = (h * 31 + value.charCodeAt(i)) | 0
+  return Math.abs(h)
+}
+
+// Colour is a stable hash of the frame name so the same frame keeps the same
+// shade between renders and between profiles — warm oranges/ambers for app
+// frames, desaturated slate for everything else.
+function frameColor(name: string): string {
+  const h = hashOf(name)
+  return isAppFrame(name)
+    ? `hsl(${[24, 34, 14, 44, 4][h % 5]} 78% ${52 + (h % 3) * 6}%)`
+    : `hsl(${[215, 220, 210][h % 3]} 14% ${58 + (h % 3) * 7}%)`
+}
+
+function truncate(name: string, width: number): string {
+  const chars = Math.floor((width - 8) / 5.6)
+  if (chars < 4) return ""
+  return name.length <= chars ? name : name.slice(0, chars - 1) + "…"
+}
+
+function Tooltip({
+  rect,
+  total,
+  x,
+  y,
+}: {
+  rect: FlameRect
+  total: number
+  x: number
+  y: number
+}) {
+  return (
+    <div
+      className="bg-popover text-popover-foreground pointer-events-none absolute z-10 max-w-[min(22rem,90vw)] rounded-md border p-2 shadow-md"
+      style={{ left: Math.max(0, x - 8), top: y + 14 }}
+    >
+      <div className="font-mono text-[11px] break-all">{rect.node.name}</div>
+      <div className="text-muted-foreground mt-1 flex flex-wrap gap-x-3 font-mono text-[10px] tabular-nums">
+        <span>{count(rect.node.value)} samples</span>
+        <span>{pct(rect.node.value, total)} of total</span>
+        <span>{pct(rect.node.value, rect.parentValue)} of parent</span>
+        {rect.node.self > 0 && <span>{count(rect.node.self)} self</span>}
+      </div>
+    </div>
+  )
+}
+
+// An icicle chart (root on top, callees below) over collapsed stacks. Click
+// a frame to zoom into it; the breadcrumb walks back out.
+export function Flamegraph({
+  collapsed,
+  className,
+}: {
+  collapsed: string
+  className?: string
+}) {
+  const tree = useMemo(() => parseCollapsed(collapsed), [collapsed])
+  const [query, setQuery] = useState("")
+  const [mode, setMode] = useState<"self" | "total">("self")
+  // Zoom path and hover both point at nodes of one particular tree, so they
+  // are stored with it: a new profile makes the whole view stale at once,
+  // without an effect that resets them a render late.
+  const [state, setState] = useState<View>({ tree, zoom: [], hovered: null })
+  const view = state.tree === tree ? state : { tree, zoom: [], hovered: null }
+  const zoom = view.zoom
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [width, setWidth] = useState(0)
+
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+    setWidth(el.clientWidth)
+    const observer = new ResizeObserver(([entry]) =>
+      setWidth(entry.contentRect.width),
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  const root = zoom[zoom.length - 1] ?? tree
+  const rects = useMemo(() => layout(root, width), [root, width])
+  const matches = useMemo(() => search(tree, query), [tree, query])
+  const hottest = useMemo(
+    () =>
+      mode === "self"
+        ? hottestSelf(root, HOTTEST)
+        : hottestTotal(root, HOTTEST),
+    [root, mode],
+  )
+
+  const depth = rects.reduce((max, r) => Math.max(max, r.depth), 0)
+  const searching = matches.size > 0
+
+  if (tree.value === 0) {
+    return (
+      <p className="text-muted-foreground py-6 text-center text-sm">
+        This profile recorded no samples.
+      </p>
+    )
+  }
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <div className="flex flex-wrap items-center gap-2">
+        <Input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search frames"
+          className="h-8 max-w-56 font-mono text-xs"
+          aria-label="Search frames"
+        />
+        {query !== "" && (
+          <span className="text-muted-foreground font-mono text-[11px]">
+            {matches.size} match{matches.size === 1 ? "" : "es"}
+          </span>
+        )}
+        <div className="ml-auto flex flex-wrap items-center gap-1 font-mono text-[11px]">
+          {[tree, ...zoom].map((node, i) => (
+            <span key={node.id} className="flex items-center gap-1">
+              {i > 0 && <span className="text-muted-foreground">/</span>}
+              <button
+                type="button"
+                onClick={() => setState({ ...view, zoom: zoom.slice(0, i) })}
+                disabled={i === zoom.length}
+                className={cn(
+                  "max-w-40 truncate",
+                  i === zoom.length
+                    ? "text-foreground font-semibold"
+                    : "text-muted-foreground hover:underline",
+                )}
+              >
+                {node.name}
+              </button>
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <div
+        ref={containerRef}
+        className="bg-muted/20 relative overflow-hidden rounded-lg border"
+        onMouseLeave={() => setState({ ...view, hovered: null })}
+      >
+        <svg
+          width={width}
+          height={(depth + 1) * ROW}
+          role="img"
+          aria-label={`Flamegraph of ${tree.value} samples`}
+        >
+          {rects.map((r) => {
+            const label = truncate(r.node.name, r.width)
+            return (
+              <g
+                key={r.id}
+                onClick={() =>
+                  setState({
+                    ...view,
+                    zoom: [...zoom, ...pathTo(root, r.node)],
+                  })
+                }
+                onMouseMove={(e) => {
+                  const box = containerRef.current?.getBoundingClientRect()
+                  setState({
+                    ...view,
+                    hovered: {
+                      rect: r,
+                      x: e.clientX - (box?.left ?? 0),
+                      y: e.clientY - (box?.top ?? 0),
+                    },
+                  })
+                }}
+                className="cursor-pointer"
+              >
+                <rect
+                  x={r.x}
+                  y={r.depth * ROW}
+                  width={Math.max(0, r.width - 1)}
+                  height={ROW - 1}
+                  rx={2}
+                  fill={frameColor(r.node.name)}
+                  opacity={
+                    searching
+                      ? matches.has(r.id)
+                        ? 1
+                        : 0.18
+                      : view.hovered?.rect.id === r.id
+                        ? 1
+                        : 0.88
+                  }
+                  stroke={matches.has(r.id) ? "currentColor" : "none"}
+                  strokeWidth={1}
+                />
+                {label !== "" && (
+                  <text
+                    x={r.x + 4}
+                    y={r.depth * ROW + ROW / 2}
+                    dominantBaseline="central"
+                    className="pointer-events-none fill-black/85 font-mono text-[10px]"
+                  >
+                    {label}
+                  </text>
+                )}
+              </g>
+            )
+          })}
+        </svg>
+        {view.hovered && (
+          <Tooltip
+            rect={view.hovered.rect}
+            total={tree.value}
+            x={view.hovered.x}
+            y={view.hovered.y}
+          />
+        )}
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <h3 className="label-caps">Hottest frames</h3>
+        <Segmented>
+          <SegmentedItem
+            active={mode === "self"}
+            onClick={() => setMode("self")}
+          >
+            Self
+          </SegmentedItem>
+          <SegmentedItem
+            active={mode === "total"}
+            onClick={() => setMode("total")}
+          >
+            Total
+          </SegmentedItem>
+        </Segmented>
+      </div>
+      <DataTable
+        rows={hottest}
+        rowKey={(f) => f.name}
+        empty="No frames in this view."
+        columns={[
+          {
+            key: "name",
+            header: "Frame",
+            className: "max-w-0",
+            cell: (f) => (
+              <span className="block truncate font-mono text-xs" title={f.name}>
+                {f.name}
+              </span>
+            ),
+          },
+          {
+            key: "self",
+            header: "Self",
+            align: "right",
+            cell: (f) => (
+              <span className={mode === "self" ? "font-semibold" : ""}>
+                {count(f.self)}
+              </span>
+            ),
+          },
+          {
+            key: "total",
+            header: "Total",
+            align: "right",
+            cell: (f) => (
+              <span className={mode === "total" ? "font-semibold" : ""}>
+                {count(f.total)}
+              </span>
+            ),
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+// The chain of nodes from the current root down to `target`, so clicking a
+// frame deep in the graph pushes every step onto the breadcrumb.
+function pathTo(from: FlameNode, target: FlameNode): FlameNode[] {
+  if (from === target) return []
+  for (const child of from.children) {
+    const rest = pathTo(child, target)
+    if (rest.length > 0 || child === target) return [child, ...rest]
+  }
+  return []
+}