railwatch 0.9.4 → 1.0.0

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

@@ -1,205 +0,0 @@
-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.
-//
-// A visit the user makes (a window, range or filter change; anything that
-// is not itself a background reload) supersedes the reload: one in flight
-// is cancelled, since it is for the URL being left and would otherwise land
-// on top of the new page, none starts until the visit is over, and the
-// visit counts as the latest reload, so the throttle does not follow it
-// with a second fetch of what it just loaded.
-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 navigating = 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 ||
-        navigating ||
-        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()
-    }
-
-    // `async` is every visit the page starts by itself: these reloads, a
-    // poll, a prefetch, a deferred prop.
-    const stopOnStart = router.on("start", (event) => {
-      if (event.detail.visit.async) return
-      navigating = true
-      pending = false
-      lastReloadAt = Date.now()
-      cancelReload?.()
-    })
-    const stopOnFinish = router.on("finish", (event) => {
-      if (event.detail.visit.async) return
-      navigating = false
-      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)
-      stopOnStart()
-      stopOnFinish()
-      scheduleRef.current = () => undefined
-      document.removeEventListener("visibilitychange", onVisibilityChange)
-      subscription.unsubscribe()
-    }
-  }, [environmentId])
-
-  return { connected, lastEventAt, lastRefreshedAt, paused, setPaused }
-}

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

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

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

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

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

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

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

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

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

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

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

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