railwatch 0.9.4 → 1.0.0

data/app/frontend/pages/visits/index.tsx

@@ -1,321 +0,0 @@
-import { router, usePage } from "@inertiajs/react"
-import { MonitorSmartphone } from "lucide-react"
-
-import { DurationPanel, VolumePanel } from "@/components/railwatch/chart-panel"
-import { DataTable } from "@/components/railwatch/data-table"
-import { EmptyState } from "@/components/railwatch/empty-state"
-import { FilterBar } from "@/components/railwatch/filter-bar"
-import { PageHeader } from "@/components/railwatch/page-header"
-import { PercentilePicker } from "@/components/railwatch/percentile-picker"
-import { SortHeader } from "@/components/railwatch/sort-header"
-import { SparklineCell } from "@/components/railwatch/sparkline-cell"
-import { Stat, StatStrip } from "@/components/railwatch/stat"
-import { StatusBadge } from "@/components/railwatch/status-badge"
-import { usePercentile } from "@/hooks/use-percentile"
-import EnvLayout from "@/layouts/env-layout"
-import { bytes, count, ms, pct, when } from "@/lib/format"
-import * as R from "@/routes"
-import type { GroupRow, SeriesPoint, SharedProps } from "@/types"
-
-interface Visit {
-  id: number
-  component: string
-  url: string
-  method: string
-  duration: number
-  status: string
-  partial: boolean
-  only: string[]
-  props_bytes: number | null
-  occurred_at: string
-  user_ref: string | null
-  lcp: number | null
-  cls: number | null
-  inp: number | null
-  ttfb: number | null
-}
-type VitalKey = "lcp" | "cls" | "inp" | "ttfb"
-interface Vital {
-  value: number
-  rating: "good" | "needs-improvement" | "poor"
-  samples: number
-}
-interface Props {
-  components: (GroupRow & { lcp: number | null; inp: number | null })[]
-  series: SeriesPoint[]
-  recent: Visit[]
-  vitals: Partial<Record<VitalKey, Vital>>
-  sort: string
-  dir: string
-  q: string
-}
-
-const vitalKeys: VitalKey[] = ["lcp", "cls", "inp", "ttfb"]
-const vitalLabels: Record<VitalKey, string> = {
-  lcp: "LCP",
-  cls: "CLS",
-  inp: "INP",
-  ttfb: "TTFB",
-}
-const ratingTones = {
-  good: "success",
-  "needs-improvement": "warning",
-  poor: "destructive",
-} as const
-
-// cls is a unitless layout-shift score; the rest are durations.
-const vitalValue = (key: VitalKey, value: number) =>
-  key === "cls" ? value.toFixed(2) : ms(value)
-
-const visitVitals = (v: Visit) =>
-  [
-    v.lcp === null ? null : `LCP ${ms(v.lcp)}`,
-    v.inp === null ? null : `INP ${ms(v.inp)}`,
-    v.cls === null ? null : `CLS ${v.cls.toFixed(2)}`,
-  ]
-    .filter((part): part is string => part !== null)
-    .join(" · ")
-
-export default function Visits(p: Props) {
-  const { environment, window } = usePage<SharedProps>().props
-  const { percentile } = usePercentile()
-  const a = environment!.application_id
-  const e = environment!.id
-
-  const sortBy = (field: string) =>
-    router.visit(
-      R.applicationEnvironmentVisitsPath(a, e, {
-        window,
-        sort: field,
-        dir: p.sort === field && p.dir === "desc" ? "asc" : "desc",
-      }),
-      { preserveState: true },
-    )
-
-  const measured = vitalKeys.filter((key) => p.vitals[key])
-
-  return (
-    <EnvLayout title="Visits">
-      <PageHeader
-        title="Inertia visits"
-        description="Page-load timing measured in the browser: from router start to finish, per component, with prop payload size."
-        actions={<PercentilePicker />}
-      />
-      {measured.length > 0 ? (
-        <StatStrip>
-          {measured.map((key) => {
-            const vital = p.vitals[key]!
-            return (
-              <Stat
-                key={key}
-                label={vitalLabels[key]}
-                value={vitalValue(key, vital.value)}
-                tone={ratingTones[vital.rating]}
-                hint={`${vital.rating} · p75 of ${count(vital.samples)}`}
-              />
-            )
-          })}
-        </StatStrip>
-      ) : (
-        <p className="text-muted-foreground text-xs">
-          Web vitals are reported by the browser client from the initial page
-          load; update app/frontend/lib/railwatch.ts from{" "}
-          <span className="font-mono">
-            bin/rails generate railwatch:install
-          </span>
-          .
-        </p>
-      )}
-      <div className="grid gap-4 lg:grid-cols-2">
-        <VolumePanel
-          legend="outcome"
-          label="Visits"
-          seriesLabel="Visits"
-          data={p.series}
-        />
-        <DurationPanel
-          label="Duration"
-          data={p.series}
-          percentile={percentile}
-        />
-      </div>
-      <DataTable
-        rows={p.components}
-        rowKey={(c) => c.group_hash}
-        empty={
-          <EmptyState
-            icon={MonitorSmartphone}
-            title="No visits yet"
-            description="Call startRailwatch() from your Inertia entrypoint to track page visits."
-          />
-        }
-        columns={[
-          {
-            key: "c",
-            header: "Component",
-            cell: (c) => <span className="font-mono text-xs">{c.name}</span>,
-          },
-          {
-            key: "trend",
-            hideOnMobile: true,
-            header: "Trend",
-            cell: (c) => <SparklineCell data={c.sparkline} />,
-          },
-          {
-            key: "n",
-            header: (
-              <SortHeader
-                label="Visits"
-                active={p.sort === "count"}
-                dir={p.dir === "asc" ? "asc" : "desc"}
-                onClick={() => sortBy("count")}
-              />
-            ),
-            align: "right",
-            cell: (c) => count(c.count),
-          },
-          {
-            key: "e",
-            hideOnMobile: true,
-            header: "Errors",
-            align: "right",
-            cell: (c) => pct(c.errors, c.count),
-          },
-          {
-            key: "avg",
-            hideOnMobile: true,
-            header: (
-              <SortHeader
-                label="Avg"
-                active={p.sort === "avg"}
-                dir={p.dir === "asc" ? "asc" : "desc"}
-                onClick={() => sortBy("avg")}
-              />
-            ),
-            align: "right",
-            cell: (c) => ms(c.avg),
-          },
-          {
-            key: "lcp",
-            hideOnMobile: true,
-            header: "LCP",
-            align: "right",
-            cell: (c) => ms(c.lcp),
-          },
-          {
-            key: "inp",
-            hideOnMobile: true,
-            header: "INP",
-            align: "right",
-            cell: (c) => ms(c.inp),
-          },
-          {
-            key: percentile,
-            header: (
-              <SortHeader
-                label={percentile}
-                active={p.sort === percentile}
-                dir={p.dir === "asc" ? "asc" : "desc"}
-                onClick={() => sortBy(percentile)}
-              />
-            ),
-            align: "right",
-            cell: (c) => (
-              <span className="font-semibold">{ms(c[percentile])}</span>
-            ),
-          },
-        ]}
-      />
-      <h2 className="text-sm font-semibold">Recent</h2>
-      <FilterBar
-        value={p.q}
-        fields={[{ key: "component", label: "Component" }]}
-        onChange={(q) =>
-          router.visit(
-            R.applicationEnvironmentVisitsPath(a, e, {
-              window,
-              q: q || undefined,
-            }),
-            { preserveState: true },
-          )
-        }
-        placeholder="component:Widgets/Show"
-      />
-      <DataTable
-        rows={p.recent}
-        rowKey={(v) => v.id}
-        columns={[
-          {
-            key: "when",
-            header: "When",
-            cell: (v) => <span className="text-xs">{when(v.occurred_at)}</span>,
-          },
-          {
-            key: "st",
-            header: "",
-            cell: (v) => (
-              <StatusBadge
-                label={v.status}
-                outcome={
-                  v.status === "error"
-                    ? "failed"
-                    : v.status === "success"
-                      ? "processed"
-                      : undefined
-                }
-              />
-            ),
-          },
-          {
-            key: "c",
-            header: "Component",
-            cell: (v) => (
-              <span className="font-mono text-xs">
-                {v.component}
-                {v.partial && (
-                  <span className="text-muted-foreground">
-                    {" "}
-                    (partial: {v.only.join(", ")})
-                  </span>
-                )}
-              </span>
-            ),
-          },
-          {
-            key: "u",
-            hideOnMobile: true,
-            header: "URL",
-            cell: (v) => (
-              <span className="font-mono text-xs">
-                {v.method.toUpperCase()} {v.url}
-              </span>
-            ),
-          },
-          {
-            key: "v",
-            hideOnMobile: true,
-            header: "Vitals",
-            cell: (v) => (
-              <span className="text-muted-foreground font-mono text-[11px] tabular-nums">
-                {visitVitals(v)}
-              </span>
-            ),
-          },
-          {
-            key: "b",
-            hideOnMobile: true,
-            header: "Props",
-            align: "right",
-            cell: (v) => bytes(v.props_bytes),
-          },
-          {
-            key: "d",
-            header: "Duration",
-            align: "right",
-            cell: (v) => ms(v.duration),
-          },
-        ]}
-      />
-    </EnvLayout>
-  )
-}

data/app/frontend/public/icon.svg

@@ -1,5 +0,0 @@
-<svg width="512" height="512" viewBox="0 0 1254 1254" xmlns="http://www.w3.org/2000/svg">
-  <rect width="1254" height="1254" rx="274" fill="#020E24"/>
-  <path d="M 236 324.989 L 236 404.978 496.750 405.239 L 757.500 405.500 765.665 408.577 C 777.060 412.870, 784.110 417.355, 792.381 425.574 C 833.878 466.807, 812.048 538.520, 752.263 557.363 C 737.593 561.987, 732.018 562.115, 560.250 561.798 C 471.562 561.634, 399 561.557, 399 561.626 C 399 561.695, 406.313 568.648, 415.250 577.077 C 436.108 596.747, 508.719 665.823, 525 681.483 C 612.468 765.614, 693.318 845.033, 770.500 922.639 L 840.500 993.023 951.250 993.011 C 1012.163 993.005, 1062 992.732, 1062 992.404 C 1062 992.076, 1056.942 986.113, 1050.761 979.154 C 1039.889 966.913, 1035.649 962.220, 1005.428 928.979 C 997.688 920.465, 984.624 906.075, 976.396 897 C 933.021 849.161, 888.142 799.872, 868.953 779 C 857.071 766.075, 841.562 749.200, 834.490 741.500 C 827.417 733.800, 814.456 719.721, 805.686 710.213 C 796.916 700.705, 789.994 692.673, 790.303 692.363 C 790.613 692.054, 795.578 690.983, 801.338 689.983 C 895.506 673.637, 967.601 596.363, 980.578 497.866 C 982.637 482.242, 982.086 446.289, 979.576 432.500 C 960.757 329.105, 884.022 255.740, 784.576 246.063 C 777.168 245.342, 687.144 245, 504.826 245 L 236 245 236 324.989" fill="#fff"/>
-  <path d="M 243.550 507.838 C 244.072 508.299, 247.425 510.859, 251 513.526 C 294.327 545.849, 358.703 617.861, 503.521 796 C 560.192 865.711, 593.994 908.954, 627.414 954.500 L 642.090 974.500 689.045 975 C 714.871 975.275, 736 975.275, 735.999 975 C 735.994 973.773, 698.564 930.428, 663.901 891.507 C 571.946 788.257, 436.131 649.261, 367.500 588.162 C 325.285 550.581, 286.033 524.106, 252.457 510.567 C 243.188 506.829, 241.991 506.462, 243.550 507.838 M 236 520 C 236 521.800, 236.667 522, 242.655 522 C 249.247 522, 249.293 521.981, 247.500 520 C 246.164 518.524, 244.420 518, 240.845 518 C 236.667 518, 236 518.275, 236 520 M 236 532.500 L 236 537 249.067 537 L 262.134 537 258.446 532.500 L 254.759 528 245.380 528 L 236 528 236 532.500 M 236 553.500 L 236 562 258.500 562 C 270.875 562, 280.991 561.663, 280.981 561.250 C 280.970 560.837, 278.237 557.013, 274.908 552.750 L 268.854 545 252.427 545 L 236 545 236 553.500 M 235.909 585 C 235.859 589.950, 235.777 595.462, 235.727 597.250 L 235.636 600.500 273.840 600.762 L 312.044 601.024 302.772 588.569 L 293.500 576.114 264.750 576.057 L 236 576 235.909 585 M 235.570 627.477 C 235.212 629.389, 234.979 637.714, 235.053 645.977 L 235.188 661 295.571 661 L 355.955 661 342.326 642.500 L 328.698 624 282.460 624 L 236.223 624 235.570 627.477 M 236 717.750 L 236 741.500 324.591 741.326 C 373.315 741.230, 413.343 740.990, 413.541 740.792 C 413.739 740.594, 406.184 729.985, 396.752 717.216 L 379.603 694 307.802 694 L 236 694 236 717.750 M 236.235 813.250 L 236.500 842.500 362.358 842.754 C 472.189 842.975, 488.146 842.822, 487.658 841.552 C 487.351 840.751, 477.621 827.475, 466.036 812.048 L 444.973 784 340.471 784 L 235.970 784 236.235 813.250 M 235.683 898.750 C 234.872 900.147, 235.511 973.844, 236.341 974.675 C 237.491 975.825, 392.185 976.287, 495.665 975.450 L 581.829 974.753 578.959 970.126 C 575.681 964.845, 552.884 930.825, 539.500 911.243 L 530.500 898.075 383.309 898.038 C 302.354 898.017, 235.922 898.337, 235.683 898.750" fill="#FFC22B"/>
-</svg>