railwatch 0.6.1 → 0.7.0

data/app/frontend/hooks/use-live.ts

@@ -0,0 +1,179 @@
+import { router } from "@inertiajs/react"
+import { useEffect, useRef, useState, useSyncExternalStore } from "react"
+
+import { getConsumer } from "@/lib/cable"
+
+const RELOAD_THROTTLE_MS = 5_000
+const PAUSED_STORAGE_KEY = "railwatch:live-paused"
+
+export interface LiveEvent {
+  event: string
+  at: string
+  counts: Record<string, number>
+}
+
+// Whether live updates are actually flowing right now: subscribed and not
+// paused. The page's LiveToggle owns the one `useLive` subscription, so
+// anything else that needs the answer -- a number that only animates while
+// the data behind it is moving -- reads it from here rather than opening a
+// second WebSocket subscription of its own.
+let live = false
+const liveWatchers = new Set<() => void>()
+
+function publishLive(value: boolean) {
+  if (live === value) return
+  live = value
+  for (const watcher of liveWatchers) watcher()
+}
+
+function subscribeLive(onChange: () => void) {
+  liveWatchers.add(onChange)
+  return () => {
+    liveWatchers.delete(onChange)
+  }
+}
+
+export function useIsLive() {
+  return useSyncExternalStore(
+    subscribeLive,
+    () => live,
+    () => false,
+  )
+}
+
+// Subscribes to an environment's EnvironmentChannel stream. On each message,
+// reloads the page's Inertia data props in the background (a partial
+// `router.reload`, not a navigation), throttled to at most once every 5s and
+// only while the tab is visible; one reload fires on return to the tab if an
+// event arrived while it was hidden. Pass `only` to limit the reload to
+// specific props, matching whatever `router.reload({ only })` accepts;
+// omit it to refresh every prop the current page was rendered with.
+export function useLive(
+  environmentId: number,
+  {
+    only,
+    onEvent,
+  }: { only?: string[]; onEvent?: (event: LiveEvent) => void } = {},
+) {
+  const [connected, setConnected] = useState(false)
+  const [lastEventAt, setLastEventAt] = useState<number | null>(null)
+  const [lastRefreshedAt, setLastRefreshedAt] = useState<number | null>(null)
+  const [subscribedEnvironment, setSubscribedEnvironment] =
+    useState(environmentId)
+  if (subscribedEnvironment !== environmentId) {
+    setSubscribedEnvironment(environmentId)
+    setConnected(false)
+    setLastEventAt(null)
+    setLastRefreshedAt(null)
+  }
+  const [paused, setPausedState] = useState(() => {
+    if (typeof window === "undefined") return false
+    return localStorage.getItem(PAUSED_STORAGE_KEY) === "1"
+  })
+
+  const onlyRef = useRef(only)
+  const onEventRef = useRef(onEvent)
+  const pausedRef = useRef(paused)
+  useEffect(() => {
+    onlyRef.current = only
+    onEventRef.current = onEvent
+    pausedRef.current = paused
+  })
+
+  const scheduleRef = useRef<() => void>(() => undefined)
+
+  useEffect(() => {
+    publishLive(connected && !paused)
+    return () => publishLive(false)
+  }, [connected, paused])
+
+  function setPaused(value: boolean) {
+    pausedRef.current = value
+    localStorage.setItem(PAUSED_STORAGE_KEY, value ? "1" : "0")
+    setPausedState(value)
+    scheduleRef.current()
+  }
+
+  useEffect(() => {
+    let disposed = false
+    let pending = false
+    let inFlight = false
+    let lastReloadAt = -Infinity
+    let timer: ReturnType<typeof setTimeout> | undefined
+    let cancelReload: (() => void) | undefined
+
+    function reload() {
+      pending = false
+      inFlight = true
+      lastReloadAt = Date.now()
+      // router.reload always preserves scroll and state; that's why
+      // ReloadOptions omits those keys (unlike router.visit).
+      router.reload({
+        only: onlyRef.current,
+        onCancelToken: (token) => {
+          cancelReload = () => token.cancel()
+        },
+        onSuccess: () => {
+          if (!disposed) setLastRefreshedAt(Date.now())
+        },
+        onFinish: () => {
+          cancelReload = undefined
+          inFlight = false
+          maybeReload()
+        },
+      })
+    }
+
+    function maybeReload() {
+      clearTimeout(timer)
+      timer = undefined
+      if (
+        disposed ||
+        !pending ||
+        inFlight ||
+        pausedRef.current ||
+        document.visibilityState !== "visible"
+      )
+        return
+      const delay = RELOAD_THROTTLE_MS - (Date.now() - lastReloadAt)
+      if (delay > 0) timer = setTimeout(maybeReload, delay)
+      else reload()
+    }
+
+    function onVisibilityChange() {
+      maybeReload()
+    }
+
+    document.addEventListener("visibilitychange", onVisibilityChange)
+    scheduleRef.current = maybeReload
+    const subscription = getConsumer().subscriptions.create(
+      { channel: "EnvironmentChannel", id: environmentId },
+      {
+        connected: () => {
+          if (!disposed) setConnected(true)
+        },
+        disconnected: () => {
+          if (!disposed) setConnected(false)
+        },
+        received: (data: LiveEvent) => {
+          if (disposed) return
+          setLastEventAt(Date.now())
+          onEventRef.current?.(data)
+          pending = true
+          maybeReload()
+        },
+      },
+    )
+
+    return () => {
+      disposed = true
+      cancelReload?.()
+      clearTimeout(timer)
+      scheduleRef.current = () => undefined
+      document.removeEventListener("visibilitychange", onVisibilityChange)
+      subscription.unsubscribe()
+    }
+  }, [environmentId])
+
+  return { connected, lastEventAt, lastRefreshedAt, paused, setPaused }
+}

data/app/frontend/hooks/use-mobile-navigation.ts

@@ -0,0 +1,8 @@
+import { useCallback } from "react"
+
+export function useMobileNavigation() {
+  return useCallback(() => {
+    // Remove pointer-events style from body...
+    document.body.style.removeProperty("pointer-events")
+  }, [])
+}

data/app/frontend/hooks/use-mobile.ts

@@ -0,0 +1,21 @@
+import { useSyncExternalStore } from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+
+function mediaQueryListener(callback: (event: MediaQueryListEvent) => void) {
+  mql.addEventListener("change", callback)
+
+  return () => {
+    mql.removeEventListener("change", callback)
+  }
+}
+
+function isSmallerThanBreakpoint() {
+  return mql.matches
+}
+
+export function useIsMobile() {
+  return useSyncExternalStore(mediaQueryListener, isSmallerThanBreakpoint)
+}

data/app/frontend/hooks/use-percentile.ts

@@ -0,0 +1,24 @@
+import { router } from "@inertiajs/react"
+
+import type { Percentile } from "@/types"
+
+const PERCENTILES: Percentile[] = ["p50", "p95", "p99"]
+
+// Client-only URL param (?pct=), not inertia_share'd like window: every
+// list page reads/writes it the same way the count/p95 sort toggle already
+// does with router.visit + preserveState.
+export function usePercentile() {
+  const url = new URL(globalThis.location.href)
+  const raw = url.searchParams.get("pct")
+  const percentile: Percentile = PERCENTILES.includes(raw as Percentile)
+    ? (raw as Percentile)
+    : "p95"
+
+  const set = (value: Percentile) => {
+    const next = new URL(globalThis.location.href)
+    next.searchParams.set("pct", value)
+    router.visit(next.toString(), { preserveScroll: true, preserveState: true })
+  }
+
+  return { percentile, set }
+}

data/app/frontend/hooks/use-reduced-motion.ts

@@ -0,0 +1,25 @@
+import { useSyncExternalStore } from "react"
+
+const QUERY = "(prefers-reduced-motion: reduce)"
+
+// Whether the user has asked their OS for less motion. Read in JavaScript
+// rather than left to CSS: a global `animation: none` does not stop a Web
+// Animations API animation, so a component that animates has to decide not
+// to. Follows the media query live, so turning the setting on stops the
+// motion without a reload.
+function subscribe(onChange: () => void) {
+  const query = window.matchMedia(QUERY)
+  query.addEventListener("change", onChange)
+  return () => {
+    query.removeEventListener("change", onChange)
+  }
+}
+
+function snapshot() {
+  return window.matchMedia(QUERY).matches
+}
+
+export function useReducedMotion() {
+  // Server-rendered markup carries no motion, so it renders as if reduced.
+  return useSyncExternalStore(subscribe, snapshot, () => true)
+}

data/app/frontend/hooks/use-row-nav.ts

@@ -0,0 +1,106 @@
+import { useEffect, useRef, useState } from "react"
+
+import { ignorePageShortcut } from "@/lib/keyboard"
+
+const navigators = new Map<symbol, () => void>()
+let activeNavigator: symbol | undefined
+
+export interface RowNavOptions<T> {
+  rows: T[]
+  rowKey: (row: T) => string | number
+  onOpen: (row: T, opts?: { newTab?: boolean }) => void
+  enabled?: boolean
+}
+
+// j/k highlight a row, Enter opens it (onOpen), "o" opens it in a new tab
+// (onOpen with newTab: true), Esc clears the highlight, and "/" focuses the
+// page's FilterBar input (matched by `[data-filter-bar-input]`) if present.
+// Ignored while focus is in a form field or a modifier key is held. Backs
+// `DataTable`'s `keyboardNav` prop; extracted here so every list page shares
+// one implementation.
+export function useRowNav<T>({
+  rows,
+  rowKey,
+  onOpen,
+  enabled = true,
+}: RowNavOptions<T>) {
+  const [highlighted, setHighlighted] = useState<string | number | null>(null)
+  const [identity] = useState(() => Symbol("row-nav"))
+  function activate() {
+    if (!enabled || activeNavigator === identity) return
+    if (activeNavigator) navigators.get(activeNavigator)?.()
+    activeNavigator = identity
+  }
+
+  useEffect(() => {
+    if (!enabled) return
+    navigators.set(identity, () => setHighlighted(null))
+    activeNavigator ??= identity
+    return () => {
+      navigators.delete(identity)
+      if (activeNavigator === identity)
+        activeNavigator = navigators.keys().next().value
+    }
+  }, [enabled, identity])
+
+  const rowsRef = useRef(rows)
+  const rowKeyRef = useRef(rowKey)
+  const onOpenRef = useRef(onOpen)
+  useEffect(() => {
+    rowsRef.current = rows
+    rowKeyRef.current = rowKey
+    onOpenRef.current = onOpen
+  })
+
+  useEffect(() => {
+    if (!enabled) return
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (activeNavigator !== identity || ignorePageShortcut(event)) return
+
+      if (event.key === "/") {
+        const input = document.querySelector<HTMLElement>(
+          "[data-filter-bar-input]",
+        )
+        if (input) {
+          event.preventDefault()
+          input.focus()
+        }
+        return
+      }
+
+      const currentRows = rowsRef.current
+      const key = rowKeyRef.current
+      const index = currentRows.findIndex((r) => key(r) === highlighted)
+
+      if (event.key === "j") {
+        if (currentRows.length === 0) return
+        event.preventDefault()
+        const next = Math.min(index + 1, currentRows.length - 1)
+        setHighlighted(key(currentRows[next]))
+      } else if (event.key === "k") {
+        if (currentRows.length === 0) return
+        event.preventDefault()
+        const prev = index < 0 ? 0 : Math.max(index - 1, 0)
+        setHighlighted(key(currentRows[prev]))
+      } else if (event.key === "Enter") {
+        if (index >= 0) {
+          event.preventDefault()
+          onOpenRef.current(currentRows[index])
+        }
+      } else if (event.key === "o") {
+        if (index >= 0) {
+          event.preventDefault()
+          onOpenRef.current(currentRows[index], { newTab: true })
+        }
+      } else if (event.key === "Escape") {
+        setHighlighted(null)
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown)
+    return () => document.removeEventListener("keydown", onKeyDown)
+  }, [highlighted, enabled, identity])
+
+  return { highlighted, setHighlighted, activate }
+}

data/app/frontend/hooks/use-step.ts

@@ -0,0 +1,27 @@
+import { router, usePage } from "@inertiajs/react"
+
+import type { SharedProps, Step } from "@/types"
+
+export const STEP_LABELS: Record<Step, string> = {
+  "1m": "1 minute",
+  "5m": "5 minutes",
+  "15m": "15 minutes",
+  "1h": "1 hour",
+  "6h": "6 hours",
+  "1d": "1 day",
+}
+
+// The chart bucket width (?step=) and the widths the current window offers,
+// both inertia_share'd by EnvironmentScoped like `window` is. Changing the
+// window drops the step so the new window draws at its own default.
+export function useStep() {
+  const { step = "1h", steps = [] } = usePage<SharedProps>().props
+
+  const set = (value: Step) => {
+    const url = new URL(globalThis.location.href)
+    url.searchParams.set("step", value)
+    router.visit(url.toString(), { preserveScroll: true, preserveState: true })
+  }
+
+  return { step, steps, set, label: STEP_LABELS[step] ?? step }
+}

data/app/frontend/hooks/use-ticker.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react"
+
+// Re-renders the calling component every `intervalMs`, so relative-time
+// labels ("2m ago") and freshness checks stay current without a reload.
+export function useTicker(intervalMs = 30_000) {
+  const [, setTick] = useState(0)
+
+  useEffect(() => {
+    const id = window.setInterval(() => setTick((tick) => tick + 1), intervalMs)
+    return () => window.clearInterval(id)
+  }, [intervalMs])
+}

data/app/frontend/hooks/use-window.ts

@@ -0,0 +1,58 @@
+import { router, usePage } from "@inertiajs/react"
+
+import type { SharedProps, Window } from "@/types"
+
+export const WINDOWS: { value: Window; label: string }[] = [
+  { value: "1h", label: "1 hour" },
+  { value: "6h", label: "6 hours" },
+  { value: "24h", label: "24 hours" },
+  { value: "7d", label: "7 days" },
+  { value: "30d", label: "30 days" },
+]
+
+function formatRange(from: string, to: string) {
+  const fmt: Intl.DateTimeFormatOptions = {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }
+  return `${new Date(from).toLocaleString(undefined, fmt)} – ${new Date(to).toLocaleString(undefined, fmt)}`
+}
+
+export function useWindow() {
+  const { window: current = "24h", range } = usePage<SharedProps>().props
+
+  const set = (value: Window) => {
+    const url = new URL(globalThis.location.href)
+    url.searchParams.set("window", value)
+    url.searchParams.delete("from")
+    url.searchParams.delete("to")
+    url.searchParams.delete("step")
+    router.visit(url.toString(), { preserveScroll: true, preserveState: true })
+  }
+
+  // Sets an explicit ?from=&to= range, dropping the fixed `window` param.
+  const setRange = (from: string, to: string) => {
+    const url = new URL(globalThis.location.href)
+    url.searchParams.set("from", from)
+    url.searchParams.set("to", to)
+    url.searchParams.delete("window")
+    url.searchParams.delete("step")
+    router.visit(url.toString(), { preserveScroll: true, preserveState: true })
+  }
+
+  const label =
+    current === "custom" && range
+      ? formatRange(range.from, range.to)
+      : (WINDOWS.find((w) => w.value === current)?.label ?? current)
+
+  return {
+    window: current,
+    from: range?.from,
+    to: range?.to,
+    set,
+    setRange,
+    label,
+  }
+}

data/app/frontend/layouts/app/app-sidebar-layout.tsx

@@ -0,0 +1,107 @@
+import { router, usePage } from "@inertiajs/react"
+import { type PropsWithChildren, useEffect, useState } from "react"
+
+import { AppContent } from "@/components/app-content"
+import { AppShell } from "@/components/app-shell"
+import { AppSidebar } from "@/components/app-sidebar"
+import { AppSidebarHeader } from "@/components/app-sidebar-header"
+import { CommandPalette } from "@/components/railwatch/command-palette"
+import { ShortcutsDialog } from "@/components/railwatch/shortcuts-dialog"
+import { useHotkeys } from "@/hooks/use-hotkeys"
+import {
+  applicationEnvironmentJobsPath,
+  applicationEnvironmentOverviewPath,
+  applicationEnvironmentQueriesPath,
+  applicationEnvironmentRequestsPath,
+  dashboardPath,
+  issuesPath,
+} from "@/routes"
+import type { BreadcrumbItem, SharedProps } from "@/types"
+
+export default function AppSidebarLayout({
+  children,
+  breadcrumbs = [],
+}: PropsWithChildren<{
+  breadcrumbs?: BreadcrumbItem[]
+}>) {
+  const [paletteOpen, setPaletteOpen] = useState(false)
+  const [shortcutsOpen, setShortcutsOpen] = useState(false)
+  const { environment, window } = usePage<SharedProps>().props
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault()
+        setPaletteOpen((open) => !open)
+      }
+    }
+    document.addEventListener("keydown", onKeyDown)
+    return () => document.removeEventListener("keydown", onKeyDown)
+  }, [])
+
+  // "g" then a letter jumps to the current environment's Overview/Requests/
+  // Jobs/Queries/Issues when a page has one loaded (env-scoped pages share
+  // it via EnvironmentScoped); otherwise "g i" falls back to global issues.
+  useHotkeys({
+    "?": () => setShortcutsOpen((open) => !open),
+    "g d": () => router.visit(dashboardPath()),
+    "g i": () =>
+      router.visit(
+        environment
+          ? issuesPath({
+              application_id: environment.application_id,
+              environment_id: environment.id,
+            })
+          : issuesPath(),
+      ),
+    ...(environment && {
+      "g o": () =>
+        router.visit(
+          applicationEnvironmentOverviewPath(
+            environment.application_id,
+            environment.id,
+            { window },
+          ),
+        ),
+      "g r": () =>
+        router.visit(
+          applicationEnvironmentRequestsPath(
+            environment.application_id,
+            environment.id,
+            { window },
+          ),
+        ),
+      "g j": () =>
+        router.visit(
+          applicationEnvironmentJobsPath(
+            environment.application_id,
+            environment.id,
+            { window },
+          ),
+        ),
+      "g q": () =>
+        router.visit(
+          applicationEnvironmentQueriesPath(
+            environment.application_id,
+            environment.id,
+            { window },
+          ),
+        ),
+    }),
+  })
+
+  return (
+    <AppShell variant="sidebar">
+      <AppSidebar />
+      <AppContent variant="sidebar" className="overflow-x-hidden">
+        <AppSidebarHeader
+          breadcrumbs={breadcrumbs}
+          onOpenCommandPalette={() => setPaletteOpen(true)}
+        />
+        {children}
+      </AppContent>
+      <CommandPalette open={paletteOpen} onOpenChange={setPaletteOpen} />
+      <ShortcutsDialog open={shortcutsOpen} onOpenChange={setShortcutsOpen} />
+    </AppShell>
+  )
+}

data/app/frontend/layouts/app-layout.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react"
+
+import AppLayoutTemplate from "@/layouts/app/app-sidebar-layout"
+import type { BreadcrumbItem } from "@/types"
+
+interface AppLayoutProps {
+  children: ReactNode
+  breadcrumbs?: BreadcrumbItem[]
+}
+
+export default function AppLayout({
+  children,
+  breadcrumbs,
+  ...props
+}: AppLayoutProps) {
+  return (
+    <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
+      {children}
+    </AppLayoutTemplate>
+  )
+}

data/app/frontend/layouts/env-layout.tsx

@@ -0,0 +1,53 @@
+import { Head, usePage } from "@inertiajs/react"
+import type { ReactNode } from "react"
+
+import AppLayout from "@/layouts/app-layout"
+import { applicationEnvironmentOverviewPath, applicationPath } from "@/routes"
+import type { BreadcrumbItem, SharedProps } from "@/types"
+
+// Layout for every environment-scoped telemetry page: breadcrumbs from the
+// shared environment prop, page title, and consistent padding.
+export default function EnvLayout({
+  title,
+  children,
+  crumbs = [],
+}: {
+  title: string
+  children: ReactNode
+  crumbs?: BreadcrumbItem[]
+}) {
+  const { environment } = usePage<SharedProps>().props
+  const base: BreadcrumbItem[] = environment
+    ? [
+        {
+          title: environment.application_name,
+          href: applicationPath(environment.application_id),
+        },
+        {
+          title: environment.name,
+          href: applicationEnvironmentOverviewPath(
+            environment.application_id,
+            environment.id,
+          ),
+        },
+      ]
+    : []
+  const breadcrumbs = [
+    ...base,
+    ...(crumbs.length ? crumbs : [{ title, href: "#" }]),
+  ]
+  return (
+    <AppLayout breadcrumbs={breadcrumbs}>
+      <Head
+        title={
+          environment
+            ? `${title} · ${environment.application_name} ${environment.name}`
+            : title
+        }
+      />
+      <div className="flex flex-1 flex-col gap-4 p-3 md:gap-5 md:p-6">
+        {children}
+      </div>
+    </AppLayout>
+  )
+}

data/app/frontend/layouts/persistent-layout.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react"
+
+import { Toaster } from "@/components/ui/sonner"
+import { useFlash } from "@/hooks/use-flash"
+
+interface PersistentLayoutProps {
+  children: ReactNode
+}
+
+export default function PersistentLayout({ children }: PersistentLayoutProps) {
+  useFlash()
+  return (
+    <>
+      {children}
+      <Toaster position="bottom-right" offset={16} />
+    </>
+  )
+}

data/app/frontend/lib/cable.ts

@@ -0,0 +1,10 @@
+import { type Consumer, createConsumer } from "@rails/actioncable"
+
+let consumer: Consumer | undefined
+
+// One ActionCable consumer (one WebSocket) shared by the whole app, opened
+// lazily on first subscription rather than on every page load.
+export function getConsumer(): Consumer {
+  consumer ??= createConsumer()
+  return consumer
+}