railwatch 0.6.1 → 0.7.0

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

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

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