@spunto/design-system 0.33.0 → 0.35.0

package/src/components/observability/trace-filters.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { RefreshCwIcon } from "lucide-react"
+import { cn } from "../../utils"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select"
+import { methodOf, routeOf } from "./analytics"
+import type { TraceItem } from "./types"
+
+// ── Trace filters ─────────────────────────────────────────────────────────
+// Two kinds of filter live in one bar, and the split is the point: `lookbackMinutes` and
+// `minDurationMs` are meant for the backend query (they change what is fetched), `status`,
+// `method` and `route` are applied client-side by `filterTraces` (they narrow what was fetched,
+// without a round-trip). The bar draws; which is which is the app's call.
+
+export interface TraceFilters {
+  lookbackMinutes: number
+  minDurationMs: number
+  status: "all" | "errors"
+  /** "all" or an HTTP method. */
+  method: string
+  /** "all" or a route template. */
+  route: string
+}
+
+export const DEFAULT_TRACE_FILTERS: TraceFilters = {
+  lookbackMinutes: 60,
+  minDurationMs: 0,
+  status: "all",
+  method: "all",
+  route: "all",
+}
+
+/** Applies the client-side half of the filters (status, method, route). Order is kept. */
+export function filterTraces<T extends TraceItem>(traces: T[], filters: Pick<TraceFilters, "status" | "method" | "route">): T[] {
+  return traces.filter(
+    (t) =>
+      (filters.status !== "errors" || t.error) &&
+      (filters.method === "all" || methodOf(t.name) === filters.method) &&
+      (filters.route === "all" || routeOf(t.name) === filters.route)
+  )
+}
+
+/** The method and route options a set of traces offers, sorted — to feed the bar's selects. */
+export function traceFilterOptions(traces: TraceItem[]): { methods: string[]; routes: string[] } {
+  return {
+    methods: Array.from(new Set(traces.map((t) => methodOf(t.name)).filter((m) => m !== "—"))).sort(),
+    routes: Array.from(new Set(traces.map((t) => routeOf(t.name)))).sort(),
+  }
+}
+
+const LOOKBACKS = [
+  { label: "15m", v: 15 },
+  { label: "1h", v: 60 },
+  { label: "6h", v: 360 },
+  { label: "24h", v: 1440 },
+]
+const LATENCIES = [
+  { label: "Any", v: 0 },
+  { label: ">100ms", v: 100 },
+  { label: ">300ms", v: 300 },
+  { label: ">1s", v: 1000 },
+]
+
+function Segmented<T extends string | number>({
+  value,
+  options,
+  onChange,
+  accent,
+}: {
+  value: T
+  options: { label: string; v: T }[]
+  onChange: (v: T) => void
+  accent?: string
+}) {
+  return (
+    <div className="flex overflow-hidden rounded-lg border border-border" role="group">
+      {options.map((o) => (
+        <button
+          key={String(o.v)}
+          type="button"
+          aria-pressed={value === o.v}
+          onClick={() => onChange(o.v)}
+          className={cn(
+            "px-2.5 py-1.5 text-xs font-medium transition-colors",
+            value === o.v
+              ? accent
+                ? "text-white"
+                : "bg-primary text-primary-foreground"
+              : "bg-card text-muted-foreground hover:bg-muted"
+          )}
+          style={value === o.v && accent ? { background: accent } : undefined}
+        >
+          {o.label}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function FilterField({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="px-0.5 font-mono text-[9px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/70">
+        {label}
+      </span>
+      {children}
+    </div>
+  )
+}
+
+export interface TraceFiltersBarProps {
+  filters: TraceFilters
+  onChange: (filters: TraceFilters) => void
+  /** Options of the Method select — see `traceFilterOptions`. */
+  methods: string[]
+  /** Options of the Route select — see `traceFilterOptions`. */
+  routes: string[]
+  /** Shows a refresh button when given. */
+  onRefresh?: () => void
+  /** Spins the refresh icon. */
+  isFetching?: boolean
+  className?: string
+}
+
+export function TraceFiltersBar({ filters, onChange, methods, routes, onRefresh, isFetching, className }: TraceFiltersBarProps) {
+  const set = (patch: Partial<TraceFilters>) => onChange({ ...filters, ...patch })
+  // Base UI renders the raw value in SelectValue unless it knows the labels: without `items`, the
+  // trigger reads "all" instead of "All routes".
+  const methodItems = { all: "All methods", ...Object.fromEntries(methods.map((m) => [m, m])) }
+  const routeItems = { all: "All routes", ...Object.fromEntries(routes.map((r) => [r, r])) }
+  const narrowed =
+    filters.status !== "all" || filters.method !== "all" || filters.route !== "all" || filters.minDurationMs !== 0
+
+  return (
+    <div className={cn("flex flex-wrap items-end gap-x-5 gap-y-3 rounded-xl border border-border bg-card px-4 py-3", className)}>
+      <FilterField label="Window">
+        <Segmented value={filters.lookbackMinutes} options={LOOKBACKS} onChange={(v) => set({ lookbackMinutes: v })} />
+      </FilterField>
+
+      <FilterField label="Min latency">
+        <Segmented value={filters.minDurationMs} options={LATENCIES} onChange={(v) => set({ minDurationMs: v })} />
+      </FilterField>
+
+      <FilterField label="Status">
+        <Segmented
+          value={filters.status}
+          options={[
+            { label: "All", v: "all" as const },
+            { label: "Errors", v: "errors" as const },
+          ]}
+          onChange={(v) => set({ status: v })}
+          accent={filters.status === "errors" ? "var(--destructive)" : undefined}
+        />
+      </FilterField>
+
+      <FilterField label="Method">
+        <Select items={methodItems} value={filters.method} onValueChange={(v) => set({ method: (v as string | null) ?? "all" })}>
+          <SelectTrigger className="h-8 w-[132px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All methods</SelectItem>
+            {methods.map((m) => (
+              <SelectItem key={m} value={m}>
+                {m}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </FilterField>
+
+      <FilterField label="Route">
+        <Select items={routeItems} value={filters.route} onValueChange={(v) => set({ route: (v as string | null) ?? "all" })}>
+          <SelectTrigger className="h-8 w-[260px] max-w-[52vw]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent className="max-w-[70vw]">
+            <SelectItem value="all">All routes</SelectItem>
+            {routes.map((r) => (
+              <SelectItem key={r} value={r} className="font-mono text-xs">
+                {r}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </FilterField>
+
+      <div className="ml-auto flex items-end gap-2">
+        {narrowed && (
+          <button
+            type="button"
+            onClick={() => onChange({ ...DEFAULT_TRACE_FILTERS, lookbackMinutes: filters.lookbackMinutes })}
+            className="h-8 rounded-lg border border-border px-2.5 text-xs text-muted-foreground transition-colors hover:bg-muted"
+          >
+            Reset
+          </button>
+        )}
+        {onRefresh && (
+          <button
+            type="button"
+            onClick={onRefresh}
+            className="flex h-8 w-8 items-center justify-center rounded-lg border border-border text-muted-foreground transition-colors hover:bg-muted"
+            title="Refresh"
+            aria-label="Refresh"
+          >
+            <RefreshCwIcon className={cn("h-3.5 w-3.5", isFetching && "animate-spin")} />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/observability/trace-list.tsx

@@ -0,0 +1,193 @@
+"use client"
+
+import { ChevronRightIcon } from "lucide-react"
+import { cn, formatRelativeTime } from "../../utils"
+import { computeStats, exampleTraces, methodOf, routeOf } from "./analytics"
+import { formatLatency, latencyColor, latencyTextClass } from "./latency"
+import { TraceStatTile } from "./traces-overview"
+import type { TraceItem } from "./types"
+
+function MethodChip({ method, className }: { method: string; className?: string }) {
+  if (method === "—") return null
+  return (
+    <span className={cn("shrink-0 rounded-sm bg-muted px-1.5 py-0.5 font-mono text-[10px] font-semibold text-muted-foreground", className)}>
+      {method}
+    </span>
+  )
+}
+
+// ── Trace list ────────────────────────────────────────────────────────────
+// One row per request: error dot, method, route, a latency bar relative to the slowest of the
+// set, when. The app sorts and filters; the list draws what it's given, in that order.
+// `compact` is the dense variant for traces that aren't necessarily HTTP (any service's OTLP
+// spans): wall-clock time, service, root span name, duration — one line each.
+
+export interface TraceListProps {
+  traces: TraceItem[]
+  onSelectTrace: (traceId: string) => void
+  /** Highlights the row whose waterfall is open. */
+  selectedTraceId?: string | null
+  variant?: "requests" | "compact"
+  className?: string
+}
+
+export function TraceList({ traces, onSelectTrace, selectedTraceId, variant = "requests", className }: TraceListProps) {
+  if (variant === "compact") {
+    return (
+      <div className={cn("max-h-96 overflow-auto rounded-lg border border-border", className)}>
+        {traces.map((t) => (
+          <button
+            key={t.traceId}
+            type="button"
+            onClick={() => onSelectTrace(t.traceId)}
+            className={cn(
+              "grid w-full grid-cols-[5.5rem_7rem_1fr_5rem] items-center gap-3 border-b border-border/60 px-3 py-1.5 text-left text-xs last:border-b-0 hover:bg-muted/50",
+              selectedTraceId === t.traceId && "bg-muted/60"
+            )}
+          >
+            <span className="font-mono tabular-nums text-muted-foreground" suppressHydrationWarning>
+              {new Date(t.startTimeMs).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", second: "2-digit" })}
+            </span>
+            <span className="truncate font-mono text-muted-foreground">{t.service ?? "—"}</span>
+            <span className="flex min-w-0 items-center gap-1.5">
+              {t.error && <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-destructive" aria-label="error" />}
+              <span className="truncate font-mono">{t.name}</span>
+            </span>
+            <span className="text-right font-mono tabular-nums">{formatLatency(t.durationMs)}</span>
+          </button>
+        ))}
+      </div>
+    )
+  }
+  const maxDuration = Math.max(1, ...traces.map((t) => t.durationMs))
+  return (
+    <div className={cn("overflow-hidden rounded-xl border border-border bg-card", className)}>
+      <div className="hidden grid-cols-[1fr_auto_auto_auto] items-center gap-4 border-b border-border bg-muted/30 px-4 py-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground sm:grid">
+        <span>Request</span>
+        <span className="w-28 text-right">Latency</span>
+        <span className="w-24 text-right">When</span>
+        <span className="w-4" />
+      </div>
+      {traces.map((t) => (
+        <button
+          key={t.traceId}
+          type="button"
+          onClick={() => onSelectTrace(t.traceId)}
+          className={cn(
+            "grid w-full grid-cols-[1fr_auto_auto] items-center gap-4 border-b border-border/60 px-4 py-3 text-left transition-colors last:border-0 hover:bg-muted/40 sm:grid-cols-[1fr_auto_auto_auto]",
+            selectedTraceId === t.traceId && "bg-muted/60"
+          )}
+        >
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              {t.error && <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-destructive" aria-label="error" />}
+              <MethodChip method={methodOf(t.name)} />
+              <span className="truncate font-mono text-[13px]">{routeOf(t.name)}</span>
+            </div>
+            <div className="mt-1.5 h-1 w-full max-w-xs overflow-hidden rounded-full bg-muted">
+              <div
+                className="h-full rounded-full"
+                style={{
+                  width: `${Math.max(2, Math.round((t.durationMs / maxDuration) * 100))}%`,
+                  background: latencyColor(t.durationMs),
+                }}
+              />
+            </div>
+          </div>
+          <span className={cn("w-28 text-right font-mono text-sm tabular-nums", latencyTextClass(t.durationMs))}>
+            {formatLatency(t.durationMs)}
+          </span>
+          <span className="hidden w-24 text-right text-xs text-muted-foreground tabular-nums sm:inline" suppressHydrationWarning>
+            {formatRelativeTime(t.startTimeMs)}
+          </span>
+          <ChevronRightIcon className="hidden h-4 w-4 text-muted-foreground/50 sm:block" />
+        </button>
+      ))}
+    </div>
+  )
+}
+
+/** Placeholder rows with the list's height, while the app fetches. */
+export function TraceListSkeleton({ rows = 8, className }: { rows?: number; className?: string }) {
+  return (
+    <div className={cn("space-y-2", className)}>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="h-14 animate-pulse rounded-lg border border-border bg-muted/40" />
+      ))}
+    </div>
+  )
+}
+
+// ── Route detail ──────────────────────────────────────────────────────────
+// What a click on a route of the overview opens: its own stats, then example traces (errors,
+// slowest, most recent) to click into a waterfall.
+
+export interface TraceRouteDetailProps {
+  /** Full root span name, as `RouteStat.name` / `onRouteClick` hand it. */
+  routeName: string
+  /** The whole set — the component keeps the rows of `routeName`. */
+  traces: TraceItem[]
+  onSelectTrace: (traceId: string) => void
+  className?: string
+}
+
+export function TraceRouteDetail({ routeName, traces, onSelectTrace, className }: TraceRouteDetailProps) {
+  const rows = traces.filter((t) => t.name === routeName)
+  const s = computeStats(rows)
+  const examples = exampleTraces(rows)
+
+  return (
+    <div className={cn("space-y-5", className)}>
+      <div>
+        <MethodChip method={methodOf(routeName)} className="text-[11px]" />
+        <p className="mt-1.5 break-all font-mono text-sm">{routeOf(routeName)}</p>
+      </div>
+
+      <div className="grid grid-cols-3 gap-2">
+        <TraceStatTile size="sm" label="Requests" value={s.count.toLocaleString()} />
+        <TraceStatTile
+          size="sm"
+          label="Error rate"
+          value={`${(s.errorRate * 100).toFixed(s.errorRate ? 1 : 0)}%`}
+          accent={s.errorRate > 0 ? "var(--destructive)" : undefined}
+        />
+        <TraceStatTile size="sm" label="Max" value={formatLatency(s.max)} accent={latencyColor(s.max)} />
+        <TraceStatTile size="sm" label="p50" value={formatLatency(s.p50)} accent={latencyColor(s.p50)} />
+        <TraceStatTile size="sm" label="p95" value={formatLatency(s.p95)} accent={latencyColor(s.p95)} />
+        <TraceStatTile size="sm" label="p99" value={formatLatency(s.p99)} accent={latencyColor(s.p99)} />
+      </div>
+
+      <div>
+        <p className="mb-2 font-mono text-[9.5px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/70">
+          Example traces
+        </p>
+        <div className="overflow-hidden rounded-xl border border-border bg-card">
+          {examples.length === 0 ? (
+            <p className="px-3 py-6 text-center text-xs text-muted-foreground">No traces for this route.</p>
+          ) : (
+            examples.map((t) => (
+              <button
+                key={t.traceId}
+                type="button"
+                onClick={() => onSelectTrace(t.traceId)}
+                className="flex w-full items-center gap-3 border-b border-border/60 px-3 py-2.5 text-left transition-colors last:border-0 hover:bg-muted/40"
+              >
+                {t.error && <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-destructive" aria-label="error" />}
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate font-mono text-[11px] text-muted-foreground">{t.traceId}</span>
+                  <span className="text-[10px] text-muted-foreground/70" suppressHydrationWarning>
+                    {formatRelativeTime(t.startTimeMs)}
+                  </span>
+                </span>
+                <span className="shrink-0 font-mono text-xs tabular-nums" style={{ color: latencyColor(t.durationMs) }}>
+                  {formatLatency(t.durationMs)}
+                </span>
+                <ChevronRightIcon className="h-4 w-4 shrink-0 text-muted-foreground/50" />
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}