railwatch 0.6.1 → 0.7.0

data/app/frontend/components/railwatch/chart-panel.tsx

@@ -0,0 +1,170 @@
+import type { ReactNode } from "react"
+
+import {
+  LatencyChart,
+  ThroughputChart,
+} from "@/components/railwatch/series-chart"
+import { count, ms } from "@/lib/format"
+import { cn } from "@/lib/utils"
+import type { DeployMarker, Percentile, SeriesPoint } from "@/types"
+
+// Nightwatch's chart card: a mono label with the headline number at the
+// left, a colour-keyed legend with per-series totals at the right, the
+// chart below, and the bucket range under it (drawn by the chart itself).
+export function ChartPanel({
+  label,
+  value,
+  legend,
+  children,
+  className,
+}: {
+  label: string
+  value: ReactNode
+  legend?: { key: string; label: string; value: ReactNode; color: string }[]
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn("bg-card rounded-lg border p-4", className)}>
+      <div className="mb-3 flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <div className="label-caps">{label}</div>
+          <div className="mt-0.5 text-xl font-semibold tracking-tight tabular-nums">
+            {value}
+          </div>
+        </div>
+        {legend && (
+          <div className="flex shrink-0 gap-4">
+            {legend.map((l) => (
+              <div key={l.key} className="text-right">
+                <div className="label-caps flex items-center justify-end gap-1.5">
+                  <span
+                    className="inline-block h-2.5 w-1 rounded-sm"
+                    style={{ background: l.color }}
+                  />
+                  {l.label}
+                </div>
+                <div className="mt-0.5 font-mono text-sm tabular-nums">
+                  {l.value}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      {children}
+    </div>
+  )
+}
+
+function sum(data: SeriesPoint[], key: "count" | "errors" | "client_errors") {
+  return data.reduce((n, d) => n + d[key], 0)
+}
+
+// What the three stacked series mean for each record type. Rollups store
+// them as count / client_errors / errors; the words differ per page.
+export const VOLUME_LEGENDS = {
+  request: { ok: "1/2/3xx", warn: "4xx", error: "5xx" },
+  job: { ok: "processed", warn: "released", error: "failed" },
+  outcome: { ok: "ok", warn: null, error: "failed" },
+  exception: { ok: "handled", warn: null, error: "unhandled" },
+  cache: { ok: "hit", warn: "miss", error: "write" },
+} as const
+
+export type VolumeLegend = keyof typeof VOLUME_LEGENDS
+
+// Volume panel: total as the headline, and a colour-keyed legend naming the
+// ok / warning / error slices in the record type's own words.
+export function VolumePanel({
+  data,
+  deploys,
+  label = "Requests",
+  seriesLabel,
+  legend = "request",
+  className,
+}: {
+  data: SeriesPoint[]
+  deploys?: DeployMarker[]
+  label?: string
+  seriesLabel?: string
+  legend?: VolumeLegend
+  className?: string
+}) {
+  const total = sum(data, "count")
+  const errors = sum(data, "errors")
+  const client = sum(data, "client_errors")
+  const words = VOLUME_LEGENDS[legend]
+  const items = [
+    {
+      key: "ok",
+      label: words.ok,
+      value: count(total - errors - client),
+      color: "var(--ok)",
+    },
+    words.warn && {
+      key: "warn",
+      label: words.warn,
+      value: count(client),
+      color: "var(--warning)",
+    },
+    {
+      key: "error",
+      label: words.error,
+      value: count(errors),
+      color: "var(--danger)",
+    },
+  ].filter((i): i is NonNullable<typeof i> => Boolean(i))
+  return (
+    <ChartPanel
+      label={label}
+      value={count(total)}
+      className={className}
+      legend={items}
+    >
+      <ThroughputChart data={data} deploys={deploys} label={seriesLabel} />
+    </ChartPanel>
+  )
+}
+
+// Duration panel: min — max range as the headline, avg and pNN legend.
+export function DurationPanel({
+  data,
+  deploys,
+  percentile = "p95",
+  label = "Duration",
+  className,
+}: {
+  data: SeriesPoint[]
+  deploys?: DeployMarker[]
+  percentile?: Percentile
+  label?: string
+  className?: string
+}) {
+  const withData = data.filter((d) => d.count > 0)
+  const avgs = withData.flatMap((d) => (d.avg == null ? [] : [d.avg]))
+  const pcts = withData.flatMap((d) =>
+    d[percentile] == null ? [] : [d[percentile]],
+  )
+  const avg = avgs.length ? avgs.reduce((a, b) => a + b, 0) / avgs.length : 0
+  const pct = pcts.length ? Math.max(...pcts) : 0
+  const lo = avgs.length ? Math.min(...avgs) : 0
+  const hi = pcts.length ? Math.max(...pcts) : 0
+  return (
+    <ChartPanel
+      label={label}
+      value={withData.length ? `${ms(lo)} — ${ms(hi)}` : "—"}
+      className={className}
+      legend={[
+        { key: "avg", label: "avg", value: ms(avg), color: "var(--warning)" },
+        {
+          key: percentile,
+          label: percentile,
+          value: ms(pct),
+          color: "var(--primary)",
+        },
+      ]}
+    >
+      <LatencyChart data={data} deploys={deploys} percentile={percentile} />
+    </ChartPanel>
+  )
+}

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

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils"
+
+export function Sql({
+  children,
+  className,
+}: {
+  children: string
+  className?: string
+}) {
+  return (
+    <code
+      className={cn("block max-w-full truncate font-mono text-xs", className)}
+      title={children}
+    >
+      {children}
+    </code>
+  )
+}
+
+export function Mono({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return <span className={cn("font-mono text-xs", className)}>{children}</span>
+}

data/app/frontend/components/railwatch/command-palette.tsx

@@ -0,0 +1,132 @@
+import { router, usePage } from "@inertiajs/react"
+import { AlertOctagon, LayoutGrid, Plug, SearchIcon, Users } from "lucide-react"
+import { useState } from "react"
+
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command"
+import { envPages } from "@/lib/env-pages"
+import {
+  applicationEnvironmentOverviewPath,
+  dashboardPath,
+  issuesPath,
+  settingsIntegrationsPath,
+  settingsMembersPath,
+} from "@/routes"
+import type { NavItem, SharedProps } from "@/types"
+
+const staticNav = (embedded: boolean): NavItem[] => [
+  ...(embedded
+    ? []
+    : [{ title: "Dashboard", href: dashboardPath(), icon: LayoutGrid }]),
+  { title: "Issues", href: issuesPath(), icon: AlertOctagon },
+  ...(embedded
+    ? []
+    : [
+        { title: "Integrations", href: settingsIntegrationsPath(), icon: Plug },
+        { title: "Members", href: settingsMembersPath(), icon: Users },
+      ]),
+]
+
+export function CommandPalette({
+  open,
+  onOpenChange,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const [query, setQuery] = useState("")
+  const {
+    applications,
+    environment,
+    embedded,
+    window: currentWindow,
+  } = usePage<SharedProps>().props
+
+  const go = (href: string) => {
+    onOpenChange(false)
+    router.visit(href)
+  }
+
+  const envItems = environment
+    ? envPages(
+        environment.application_id,
+        environment.id,
+        currentWindow ?? "24h",
+      )
+    : []
+
+  return (
+    <CommandDialog open={open} onOpenChange={onOpenChange}>
+      <CommandInput
+        placeholder="Search pages, applications, issues…"
+        value={query}
+        onValueChange={setQuery}
+      />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Navigation">
+          {staticNav(!!embedded).map((item) => (
+            <CommandItem key={item.title} onSelect={() => go(item.href)}>
+              {item.icon && <item.icon />}
+              <span>{item.title}</span>
+            </CommandItem>
+          ))}
+        </CommandGroup>
+        {envItems.length > 0 && (
+          <CommandGroup
+            heading={`${environment!.application_name} · ${environment!.name}`}
+          >
+            {envItems.map((item) => (
+              <CommandItem key={item.title} onSelect={() => go(item.href)}>
+                {item.icon && <item.icon />}
+                <span>{item.title}</span>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        )}
+        {!embedded && (
+          <CommandGroup heading="Applications">
+            {applications.flatMap((app) =>
+              app.environments.map((env) => (
+                <CommandItem
+                  key={`${app.id}-${env.id}`}
+                  value={`${app.name} ${env.name}`}
+                  onSelect={() =>
+                    go(applicationEnvironmentOverviewPath(app.id, env.id))
+                  }
+                >
+                  <span>
+                    {app.name} · {env.name}
+                  </span>
+                </CommandItem>
+              )),
+            )}
+          </CommandGroup>
+        )}
+        {query.trim() && (
+          <>
+            <CommandSeparator />
+            <CommandGroup heading="Search">
+              <CommandItem
+                value={query}
+                onSelect={() =>
+                  go(`${issuesPath()}?q=${encodeURIComponent(query)}`)
+                }
+              >
+                <SearchIcon />
+                <span>Search issues for &ldquo;{query}&rdquo;</span>
+              </CommandItem>
+            </CommandGroup>
+          </>
+        )}
+      </CommandList>
+    </CommandDialog>
+  )
+}

data/app/frontend/components/railwatch/copy-block.tsx

@@ -0,0 +1,52 @@
+import { CheckIcon, CopyIcon } from "lucide-react"
+import { useState } from "react"
+
+import { Button } from "@/components/ui/button"
+import { useClipboard } from "@/hooks/use-clipboard"
+import { cn } from "@/lib/utils"
+
+const COPIED_RESET_MS = 1500
+
+// A code block with a copy button in its corner. Everything Railwatch asks a
+// developer to paste somewhere else — a Gemfile line, a token, an MCP client
+// config — goes through this, so "copy" behaves the same everywhere.
+export function CopyBlock({
+  code,
+  className,
+}: {
+  code: string
+  className?: string
+}) {
+  const [, copy] = useClipboard()
+  const [justCopied, setJustCopied] = useState(false)
+
+  const handleCopy = () => {
+    void copy(code).then((ok) => {
+      if (!ok) return
+      setJustCopied(true)
+      window.setTimeout(() => setJustCopied(false), COPIED_RESET_MS)
+    })
+  }
+
+  return (
+    <div className={cn("relative", className)}>
+      <pre className="bg-muted overflow-x-auto rounded p-3 pr-10 font-mono text-xs">
+        {code}
+      </pre>
+      <Button
+        type="button"
+        aria-label={justCopied ? "Copied code" : "Copy code"}
+        variant="ghost"
+        size="icon"
+        className="absolute top-1.5 right-1.5 size-6"
+        onClick={handleCopy}
+      >
+        {justCopied ? (
+          <CheckIcon className="size-3.5 text-emerald-500" />
+        ) : (
+          <CopyIcon className="size-3.5 opacity-60" />
+        )}
+      </Button>
+    </div>
+  )
+}

data/app/frontend/components/railwatch/copy-id.tsx

@@ -0,0 +1,49 @@
+import { CheckIcon, CopyIcon } from "lucide-react"
+import { useState } from "react"
+
+import { Button } from "@/components/ui/button"
+import { useClipboard } from "@/hooks/use-clipboard"
+import { cn } from "@/lib/utils"
+
+const COPIED_RESET_MS = 1500
+
+export function CopyId({
+  value,
+  label,
+  className,
+}: {
+  value: string
+  label?: string
+  className?: string
+}) {
+  const [, copy] = useClipboard()
+  const [justCopied, setJustCopied] = useState(false)
+
+  const handleCopy = () => {
+    void copy(value).then((ok) => {
+      if (!ok) return
+      setJustCopied(true)
+      window.setTimeout(() => setJustCopied(false), COPIED_RESET_MS)
+    })
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="sm"
+      className={cn(
+        "h-auto gap-1.5 px-1.5 py-0.5 font-mono text-xs",
+        className,
+      )}
+      onClick={handleCopy}
+    >
+      {label ?? value}
+      {justCopied ? (
+        <CheckIcon className="size-3 text-emerald-500" />
+      ) : (
+        <CopyIcon className="size-3 opacity-60" />
+      )}
+    </Button>
+  )
+}

data/app/frontend/components/railwatch/cursor-load-more.tsx

@@ -0,0 +1,39 @@
+import { router } from "@inertiajs/react"
+import { useState } from "react"
+
+import { Button } from "@/components/ui/button"
+import type { CursorMeta } from "@/types"
+
+export function CursorLoadMore({
+  meta,
+  href,
+  only,
+}: {
+  meta: CursorMeta
+  href: (cursor: string) => string
+  only: string[]
+}) {
+  const [loading, setLoading] = useState(false)
+  if (!meta.has_more || !meta.next_cursor) return null
+
+  return (
+    <div className="flex justify-center pt-3">
+      <Button
+        type="button"
+        variant="outline"
+        disabled={loading}
+        onClick={() =>
+          router.visit(href(meta.next_cursor!), {
+            only,
+            preserveState: true,
+            preserveScroll: true,
+            onStart: () => setLoading(true),
+            onFinish: () => setLoading(false),
+          })
+        }
+      >
+        {loading ? "Loading…" : "Load " + meta.limit + " more"}
+      </Button>
+    </div>
+  )
+}

data/app/frontend/components/railwatch/data-table.tsx

@@ -0,0 +1,195 @@
+import type { ReactNode } from "react"
+import { useEffect, useRef } from "react"
+
+import { useChartHover } from "@/components/railwatch/chart-hover"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { useRowNav } from "@/hooks/use-row-nav"
+import { cn } from "@/lib/utils"
+
+const INTERACTIVE_TARGET =
+  'a, button, input, select, textarea, [role="button"], [role="link"], [contenteditable="true"]'
+
+function isInteractiveTarget(target: EventTarget | null) {
+  return target instanceof Element && target.closest(INTERACTIVE_TARGET)
+}
+
+export interface Column<T> {
+  key: string
+  header: ReactNode
+  cell: (row: T) => ReactNode
+  className?: string
+  align?: "left" | "right"
+  // Hide this column below the md breakpoint. Phones get the columns that
+  // identify the row and the one number that matters; the rest come back
+  // on wider screens. Every page marks its own secondary columns.
+  hideOnMobile?: boolean
+  // The column that identifies the row (route, SQL, job class). It takes
+  // whatever width the numeric columns leave over and truncates, so the
+  // table fits its container instead of forcing a sideways scroll.
+  grow?: boolean
+}
+
+export interface KeyboardNav<T> {
+  onOpen: (row: T, opts?: { newTab?: boolean }) => void
+  enabled?: boolean
+  // Fires whenever j/k/Esc change the highlighted row, so a page can drive
+  // other row-scoped shortcuts (e.g. issues' r/i/a) off the same state.
+  onHighlightChange?: (row: T | null) => void
+}
+
+export function DataTable<T>({
+  rows,
+  columns,
+  rowKey,
+  empty = "Nothing here yet.",
+  onRowClick,
+  keyboardNav,
+  hoverKey,
+  rowClassName,
+  className,
+}: {
+  rows: T[]
+  columns: Column<T>[]
+  rowKey: (row: T) => string | number
+  empty?: ReactNode
+  onRowClick?: (row: T) => void
+  keyboardNav?: KeyboardNav<T>
+  // Per-row tint for a row whose own state matters (a crashed session), on
+  // top of the highlight/hover states below.
+  rowClassName?: (row: T) => string | undefined
+  // Links rows to a chart via ChartHoverProvider: hovering a row sets this
+  // key (e.g. the row's group_hash) as the shared hovered key, and rows
+  // whose key matches an externally-hovered chart point get `data-hovered`.
+  hoverKey?: (row: T) => string | undefined
+  className?: string
+}) {
+  const { highlighted, activate } = useRowNav({
+    rows,
+    rowKey,
+    onOpen: keyboardNav?.onOpen ?? (() => undefined),
+    enabled: Boolean(keyboardNav) && keyboardNav?.enabled !== false,
+  })
+
+  const rowRefs = useRef(new Map<string | number, HTMLTableRowElement>())
+
+  useEffect(() => {
+    if (highlighted == null) return
+    rowRefs.current.get(highlighted)?.scrollIntoView({ block: "nearest" })
+  }, [highlighted])
+
+  useEffect(() => {
+    if (!keyboardNav?.onHighlightChange) return
+    const row = rows.find((r) => rowKey(r) === highlighted) ?? null
+    keyboardNav.onHighlightChange(row)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [highlighted])
+
+  const { hoveredKey, setHoveredKey } = useChartHover()
+  const colClass = (c: Column<T>) =>
+    cn(
+      c.align === "right" && "text-right",
+      c.hideOnMobile && "hidden md:table-cell",
+      c.grow && "w-full max-w-0 truncate",
+      c.className,
+    )
+
+  return (
+    <div
+      tabIndex={keyboardNav && keyboardNav.enabled !== false ? 0 : undefined}
+      onFocusCapture={activate}
+      onPointerDownCapture={activate}
+      className={cn(
+        "bg-card -mx-3 overflow-x-auto border-y md:mx-0 md:rounded-lg md:border",
+        className,
+      )}
+    >
+      <Table>
+        <TableHeader>
+          <TableRow className="hover:bg-transparent">
+            {columns.map((c) => (
+              <TableHead key={c.key} className={colClass(c)}>
+                {c.header}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.length === 0 && (
+            <TableRow>
+              <TableCell
+                colSpan={columns.length}
+                className="p-0 whitespace-normal"
+              >
+                {typeof empty === "string" ? (
+                  <EmptyState title={empty} />
+                ) : (
+                  <div className="text-muted-foreground min-h-24 text-center">
+                    {empty}
+                  </div>
+                )}
+              </TableCell>
+            </TableRow>
+          )}
+          {rows.map((row) => {
+            const key = rowKey(row)
+            const isHighlighted = Boolean(keyboardNav) && highlighted === key
+            const rowHoverKey = hoverKey?.(row)
+            const isHovered = rowHoverKey != null && hoveredKey === rowHoverKey
+            return (
+              <TableRow
+                key={key}
+                ref={(el) => {
+                  if (el) rowRefs.current.set(key, el)
+                  else rowRefs.current.delete(key)
+                }}
+                data-state={isHighlighted ? "highlighted" : undefined}
+                data-hovered={isHovered || undefined}
+                className={cn(
+                  onRowClick && "cursor-pointer",
+                  rowClassName?.(row),
+                  isHighlighted &&
+                    "bg-accent shadow-[inset_2px_0_0_0_var(--primary)]",
+                  isHovered && !isHighlighted && "bg-accent/50",
+                )}
+                onClick={
+                  onRowClick
+                    ? (event) => {
+                        if (!isInteractiveTarget(event.target)) onRowClick(row)
+                      }
+                    : undefined
+                }
+                onMouseEnter={
+                  rowHoverKey ? () => setHoveredKey(rowHoverKey) : undefined
+                }
+                onMouseLeave={
+                  rowHoverKey ? () => setHoveredKey(null) : undefined
+                }
+              >
+                {columns.map((c) => (
+                  <TableCell
+                    key={c.key}
+                    className={cn(
+                      "py-1.5 text-xs",
+                      c.align === "right" && "font-mono tabular-nums",
+                      colClass(c),
+                    )}
+                  >
+                    {c.cell(row)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            )
+          })}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}