@spunto/design-system 0.34.0 → 0.35.1

package/src/components/observability/traces-overview.tsx

@@ -0,0 +1,284 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { ChevronRightIcon } from "lucide-react"
+import { cn } from "../../utils"
+import { byRoute, byService, computeStats, timeBuckets } from "./analytics"
+import { formatLatency, latencyColor } from "./latency"
+import type { TraceItem } from "./types"
+
+// ── Traces overview ───────────────────────────────────────────────────────
+// The dashboard of a set of traces: stat tiles, requests and p95 over time, per-service cards,
+// slowest routes. Everything is derived from the `traces` it is handed (see analytics.ts), so the
+// app filters once and the list and this view can't disagree.
+
+const KICKER = "font-mono text-[9.5px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/70"
+
+/** A labelled number. `size="sm"` is the denser tile of a side sheet. */
+export function TraceStatTile({
+  label,
+  value,
+  sub,
+  accent,
+  size = "md",
+  className,
+}: {
+  label: string
+  value: ReactNode
+  sub?: string
+  /** CSS colour of the value (a `latencyColor`, `var(--destructive)`…). */
+  accent?: string
+  size?: "sm" | "md"
+  className?: string
+}) {
+  const sm = size === "sm"
+  return (
+    <div className={cn("border border-border bg-card", sm ? "rounded-lg p-2.5" : "rounded-xl p-4", className)}>
+      <p className={cn(KICKER, sm && "text-[9px]")}>{label}</p>
+      <p
+        className={cn("font-display font-bold tabular-nums", sm ? "mt-0.5 text-lg" : "mt-1 text-2xl")}
+        style={accent ? { color: accent } : undefined}
+      >
+        {value}
+      </p>
+      {sub && <p className="mt-0.5 text-[11px] text-muted-foreground">{sub}</p>}
+    </div>
+  )
+}
+
+function clock(ms: number): string {
+  const d = new Date(ms)
+  return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`
+}
+
+interface ChartProps {
+  traces: TraceItem[]
+  lookbackMinutes: number
+  /** End of the window. Defaults to render time — pass it to freeze a demo or a test. */
+  now?: number
+  buckets?: number
+  className?: string
+}
+
+/** Stacked bars (ok + errors) per time bucket. Plain SVG on the run/destructive tokens. */
+export function RequestsOverTime({ traces, lookbackMinutes, now = Date.now(), buckets: n = 32, className }: ChartProps) {
+  const buckets = timeBuckets(traces, lookbackMinutes, n, now)
+  const max = Math.max(1, ...buckets.map((b) => b.total))
+  const W = 100
+  const H = 34
+  const bw = W / buckets.length
+  return (
+    <div className={cn("rounded-xl border border-border bg-card p-4", className)}>
+      <div className="mb-3 flex items-center justify-between">
+        <p className={KICKER}>Requests over time</p>
+        <span className="text-[11px] text-muted-foreground">peak {max}/bucket</span>
+      </div>
+      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" className="h-24 w-full overflow-visible" role="img" aria-label="Requests over time">
+        {buckets.map((b, i) => {
+          const h = (b.total / max) * H
+          const eh = (b.errors / max) * H
+          const x = i * bw
+          return (
+            <g key={i}>
+              <rect x={x + bw * 0.12} y={H - h} width={bw * 0.76} height={h} fill="var(--run)" opacity={0.85} rx={0.4} />
+              {eh > 0 && <rect x={x + bw * 0.12} y={H - eh} width={bw * 0.76} height={eh} fill="var(--destructive)" rx={0.4} />}
+            </g>
+          )
+        })}
+      </svg>
+      <div className="mt-1 flex justify-between font-mono text-[10px] text-muted-foreground/70">
+        <span>{clock(buckets[0]?.start ?? now)}</span>
+        <span>{clock(buckets[Math.floor(buckets.length / 2)]?.start ?? now)}</span>
+        <span>now</span>
+      </div>
+    </div>
+  )
+}
+
+/** p95 latency per time bucket, area + line on the ship token. */
+export function LatencyOverTime({ traces, lookbackMinutes, now = Date.now(), buckets: n = 32, className }: ChartProps) {
+  const buckets = timeBuckets(traces, lookbackMinutes, n, now)
+  const max = Math.max(1, ...buckets.map((b) => b.p95))
+  const W = 100
+  const H = 34
+  const pts = buckets.map((b, i) => [(i / (buckets.length - 1 || 1)) * W, H - (b.p95 / max) * H] as const)
+  const line = pts.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)} ${y.toFixed(2)}`).join(" ")
+  const area = `${line} L ${W} ${H} L 0 ${H} Z`
+  return (
+    <div className={cn("rounded-xl border border-border bg-card p-4", className)}>
+      <div className="mb-3 flex items-center justify-between">
+        <p className={KICKER}>p95 latency over time</p>
+        <span className="text-[11px] text-muted-foreground">peak {formatLatency(max)}</span>
+      </div>
+      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" className="h-24 w-full" role="img" aria-label="p95 latency over time">
+        <path d={area} fill="var(--ship)" opacity={0.12} />
+        <path d={line} fill="none" stroke="var(--ship)" strokeWidth={0.8} vectorEffect="non-scaling-stroke" />
+      </svg>
+      <div className="mt-1 flex justify-between font-mono text-[10px] text-muted-foreground/70">
+        <span>{clock(buckets[0]?.start ?? now)}</span>
+        <span>now</span>
+      </div>
+    </div>
+  )
+}
+
+function pct(rate: number): string {
+  return `${(rate * 100).toFixed(rate ? 1 : 0)}%`
+}
+
+export interface TracesOverviewProps {
+  traces: TraceItem[]
+  lookbackMinutes: number
+  now?: number
+  /** Makes each route row a button (with a chevron). Omit for a read-only table. */
+  onRouteClick?: (routeName: string) => void
+  /** Per-service cards between the charts and the routes — for a view spanning several services. */
+  showServices?: boolean
+  /** Rows of the slowest-routes table. */
+  routeLimit?: number
+  className?: string
+}
+
+export function TracesOverview({
+  traces,
+  lookbackMinutes,
+  now,
+  onRouteClick,
+  showServices = false,
+  routeLimit = 12,
+  className,
+}: TracesOverviewProps) {
+  if (traces.length === 0) {
+    return (
+      <div
+        className={cn(
+          "flex flex-col items-center justify-center rounded-xl border border-dashed border-border bg-muted/20 py-16 text-center text-sm text-muted-foreground",
+          className
+        )}
+      >
+        No traces match the current filters — nothing to analyze yet.
+      </div>
+    )
+  }
+
+  const s = computeStats(traces)
+  const routes = byRoute(traces).slice(0, routeLimit)
+  const services = showServices ? byService(traces) : []
+  const maxRouteP95 = Math.max(1, ...routes.map((r) => r.p95))
+  const cols = onRouteClick ? "grid-cols-[auto_1fr_auto_auto_auto_auto]" : "grid-cols-[auto_1fr_auto_auto_auto]"
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+        <TraceStatTile label="Requests" value={s.count.toLocaleString()} sub="over the window" />
+        <TraceStatTile
+          label="Error rate"
+          value={pct(s.errorRate)}
+          sub={`${s.errorCount} error${s.errorCount !== 1 ? "s" : ""}`}
+          accent={s.errorRate > 0 ? "var(--destructive)" : undefined}
+        />
+        <TraceStatTile label="p50" value={formatLatency(s.p50)} accent={latencyColor(s.p50)} />
+        <TraceStatTile label="p95" value={formatLatency(s.p95)} accent={latencyColor(s.p95)} />
+        <TraceStatTile label="p99" value={formatLatency(s.p99)} accent={latencyColor(s.p99)} />
+      </div>
+
+      <div className="grid gap-3 lg:grid-cols-2">
+        <RequestsOverTime traces={traces} lookbackMinutes={lookbackMinutes} now={now} />
+        <LatencyOverTime traces={traces} lookbackMinutes={lookbackMinutes} now={now} />
+      </div>
+
+      {services.length > 0 && (
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {services.map((svc) => (
+            <div key={svc.service} className="rounded-xl border border-border bg-card p-4">
+              <div className="flex items-center justify-between">
+                <span className="font-mono text-xs font-semibold">{svc.service}</span>
+                <span
+                  className="font-mono text-[11px] tabular-nums"
+                  style={{ color: svc.errorRate > 0 ? "var(--destructive)" : "var(--muted-foreground)" }}
+                >
+                  {pct(svc.errorRate)} err
+                </span>
+              </div>
+              <div className="mt-2 flex items-baseline justify-between">
+                <span className="font-display text-xl font-bold tabular-nums">{svc.count.toLocaleString()}</span>
+                <span className="font-mono text-xs tabular-nums" style={{ color: latencyColor(svc.p95) }}>
+                  p95 {formatLatency(svc.p95)}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Slowest routes — horizontal scroll on mobile */}
+      <div className="overflow-hidden rounded-xl border border-border bg-card">
+        <div className="flex items-center justify-between border-b border-border px-4 py-2.5">
+          <p className={KICKER}>Slowest routes (by p95)</p>
+          {onRouteClick && <span className="text-[10px] text-muted-foreground/60">tap a row for details</span>}
+        </div>
+        <div className="overflow-x-auto">
+          <div className="min-w-[560px]">
+            <div
+              className={cn(
+                "grid items-center gap-x-4 border-b border-border bg-muted/30 px-4 py-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+                cols
+              )}
+            >
+              <span className="w-12">Method</span>
+              <span>Route</span>
+              <span className="w-14 text-right">Count</span>
+              <span className="w-16 text-right">p50</span>
+              <span className="w-24 text-right">p95</span>
+              {onRouteClick && <span className="w-4" />}
+            </div>
+            {routes.map((r) => {
+              const cells = (
+                <>
+                  <span className="w-12 font-mono text-[10px] font-semibold text-muted-foreground">{r.method}</span>
+                  <div className="min-w-0">
+                    <span className="block truncate font-mono text-[12px]">{r.route}</span>
+                    {r.errorRate > 0 && (
+                      <span className="text-[10px] text-destructive">{(r.errorRate * 100).toFixed(0)}% errors</span>
+                    )}
+                  </div>
+                  <span className="w-14 text-right text-xs text-muted-foreground tabular-nums">{r.count}</span>
+                  <span className="w-16 text-right font-mono text-xs text-muted-foreground tabular-nums">
+                    {formatLatency(r.p50)}
+                  </span>
+                  <div className="flex w-24 items-center justify-end gap-2">
+                    <span className="h-1.5 w-10 overflow-hidden rounded-full bg-muted">
+                      <span
+                        className="block h-full rounded-full"
+                        style={{ width: `${Math.max(4, (r.p95 / maxRouteP95) * 100)}%`, background: latencyColor(r.p95) }}
+                      />
+                    </span>
+                    <span className="font-mono text-xs tabular-nums" style={{ color: latencyColor(r.p95) }}>
+                      {formatLatency(r.p95)}
+                    </span>
+                  </div>
+                </>
+              )
+              const rowClass = cn("grid w-full items-center gap-x-4 border-b border-border/50 px-4 py-2 text-left last:border-0", cols)
+              return onRouteClick ? (
+                <button
+                  key={r.name}
+                  type="button"
+                  onClick={() => onRouteClick(r.name)}
+                  className={cn(rowClass, "transition-colors hover:bg-muted/40")}
+                >
+                  {cells}
+                  <ChevronRightIcon className="h-4 w-4 text-muted-foreground/50" />
+                </button>
+              ) : (
+                <div key={r.name} className={rowClass}>
+                  {cells}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/observability/types.ts

@@ -0,0 +1,29 @@
+// The shapes the observability components read. Structural and lax on purpose (the package rule —
+// see docs/shared-packages.md): they are what a trace backend hands back once flattened, not the
+// OpenAPI type of one app, so Cloud's per-org `/traces` and the admin's global one both fit.
+
+/** One trace, as a list row: its root span flattened. */
+export interface TraceItem {
+  traceId: string
+  /** Name of the root span — for an HTTP trace, "GET /api/orgs/:orgId/…". Grouping key. */
+  name: string
+  /** Emitting service ("spunto-api", "spunto-proxy"…). */
+  service?: string | null
+  startTimeMs: number
+  durationMs: number
+  error?: boolean
+}
+
+/** One span of a trace, for the waterfall. */
+export interface TraceSpan {
+  spanId: string
+  /** A parent absent from the set is treated as a root, never as an error. */
+  parentSpanId?: string | null
+  name: string
+  service?: string | null
+  kind?: string | null
+  startTimeMs: number
+  durationMs: number
+  error?: boolean
+  attributes?: Record<string, string>
+}