railwatch 0.9.3 → 1.0.0

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

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

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

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

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

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

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

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