@spunto/design-system 0.34.0 → 0.35.1

package/src/components/observability/observability.test.tsx

@@ -0,0 +1,255 @@
+import { describe, it, expect } from "vitest"
+import { fireEvent, render, screen } from "@testing-library/react"
+import {
+  byRoute,
+  byService,
+  computeStats,
+  exampleTraces,
+  filterTraces,
+  formatLatency,
+  latencyTone,
+  methodOf,
+  orderSpans,
+  percentile,
+  routeOf,
+  severityClass,
+  SpanWaterfall,
+  spanTree,
+  timeBuckets,
+  TracesOverview,
+  type TraceItem,
+  type TraceSpan,
+} from "./index"
+
+const NOW = Date.parse("2026-09-28T12:00:00Z")
+const MIN = 60_000
+
+function trace(id: string, name: string, durationMs: number, agoMs: number, extra: Partial<TraceItem> = {}): TraceItem {
+  return { traceId: id, name, service: "spunto-api", startTimeMs: NOW - agoMs, durationMs, ...extra }
+}
+
+describe("analytics", () => {
+  it("sépare méthode et route, et laisse entier un nom qui n'est pas HTTP", () => {
+    expect(methodOf("GET /api/orgs/:orgId")).toBe("GET")
+    expect(routeOf("GET /api/orgs/:orgId")).toBe("/api/orgs/:orgId")
+    expect(methodOf("job.worker.create")).toBe("—")
+    expect(routeOf("job.worker.create")).toBe("job.worker.create")
+  })
+
+  it("interpole les percentiles", () => {
+    expect(percentile([], 95)).toBe(0)
+    expect(percentile([10], 95)).toBe(10)
+    expect(percentile([0, 100], 50)).toBe(50)
+    expect(percentile([1, 2, 3, 4, 5], 100)).toBe(5)
+  })
+
+  it("compte les erreurs et le max", () => {
+    const s = computeStats([trace("a", "GET /x", 10, 0), trace("b", "GET /x", 30, 0, { error: true })])
+    expect(s).toMatchObject({ count: 2, errorCount: 1, errorRate: 0.5, max: 30 })
+  })
+
+  it("trie les routes par p95 décroissant, les services par volume", () => {
+    const set = [
+      trace("a", "GET /fast", 5, 0),
+      trace("b", "GET /fast", 7, 0),
+      trace("c", "POST /slow", 900, 0, { service: "spunto-proxy" }),
+    ]
+    expect(byRoute(set).map((r) => r.name)).toEqual(["POST /slow", "GET /fast"])
+    expect(byService(set).map((s) => s.service)).toEqual(["spunto-api", "spunto-proxy"])
+    expect(byService([trace("x", "GET /", 1, 0, { service: null })])[0].service).toBe("(unknown)")
+  })
+
+  it("répartit dans la fenêtre, et ramène au bord ce qui en déborde au lieu de le perdre", () => {
+    const b = timeBuckets([trace("old", "GET /", 1, 90 * MIN), trace("new", "GET /", 1, 1 * MIN)], 60, 6, NOW)
+    expect(b).toHaveLength(6)
+    expect(b[0].total).toBe(1)
+    expect(b[5].total).toBe(1)
+    expect(b.reduce((n, x) => n + x.total, 0)).toBe(2)
+  })
+
+  it("choisit les exemples : erreurs, puis lentes, puis récentes, sans doublon", () => {
+    const set = [trace("e", "GET /", 1, 5, { error: true }), trace("slow", "GET /", 500, 10), trace("recent", "GET /", 2, 0)]
+    const ids = exampleTraces(set, 4).map((t) => t.traceId)
+    expect(ids[0]).toBe("e")
+    expect(new Set(ids).size).toBe(ids.length)
+    expect(ids).toContain("slow")
+    expect(ids).toContain("recent")
+  })
+
+  it("filtre côté client sur statut, méthode et route", () => {
+    const set = [trace("a", "GET /x", 1, 0), trace("b", "POST /x", 1, 0, { error: true }), trace("c", "GET /y", 1, 0)]
+    expect(filterTraces(set, { status: "errors", method: "all", route: "all" }).map((t) => t.traceId)).toEqual(["b"])
+    expect(filterTraces(set, { status: "all", method: "GET", route: "/x" }).map((t) => t.traceId)).toEqual(["a"])
+  })
+})
+
+describe("latence", () => {
+  it("garde la précision d'un span sous la milliseconde", () => {
+    expect(formatLatency(0.42)).toBe("0.42ms")
+    expect(formatLatency(38.4)).toBe("38ms")
+    expect(formatLatency(1234)).toBe("1.23s")
+  })
+
+  it("a un seul jeu de seuils", () => {
+    expect(latencyTone(299)).toBe("fast")
+    expect(latencyTone(300)).toBe("slow")
+    expect(latencyTone(1000)).toBe("critical")
+  })
+})
+
+const SPANS: TraceSpan[] = [
+  { spanId: "db", parentSpanId: "root", name: "pg.query", startTimeMs: 20, durationMs: 5, attributes: { "db.system": "postgresql" } },
+  { spanId: "root", parentSpanId: null, name: "GET /api/x", startTimeMs: 0, durationMs: 100, service: "spunto-api" },
+  { spanId: "rpc", parentSpanId: "root", name: "agent.cmd spawn", startTimeMs: 10, durationMs: 50 },
+  { spanId: "leaf", parentSpanId: "rpc", name: "docker.create", startTimeMs: 12, durationMs: 30 },
+  { spanId: "orphan", parentSpanId: "not-in-trace", name: "late", startTimeMs: 90, durationMs: 1 },
+]
+
+describe("orderSpans", () => {
+  it("met chaque enfant sous son parent, les frères par heure de début", () => {
+    expect(orderSpans(SPANS).map((o) => `${o.span.spanId}:${o.depth}`)).toEqual([
+      "root:0",
+      "rpc:1",
+      "leaf:2",
+      "db:1",
+      "orphan:0",
+    ])
+  })
+
+  it("ne boucle pas sur un span qui est son propre parent", () => {
+    const loop: TraceSpan[] = [{ spanId: "a", parentSpanId: "a", name: "a", startTimeMs: 0, durationMs: 1 }]
+    // Son parent est dans le jeu, donc ce n'est pas une racine : rien à dessiner, mais pas de boucle.
+    expect(orderSpans(loop)).toEqual([])
+  })
+})
+
+describe("SpanWaterfall", () => {
+  it("dessine les spans, et montre les attributs d'un span cliqué", () => {
+    render(<SpanWaterfall traceId="abc123" spans={SPANS} />)
+    expect(screen.getByText("abc123")).toBeTruthy()
+    expect(screen.getByText("5 spans")).toBeTruthy()
+    expect(screen.queryByText("postgresql")).toBeNull()
+    fireEvent.click(screen.getByText("pg.query"))
+    expect(screen.getByText("postgresql")).toBeTruthy()
+  })
+
+  it("relie une ligne de log à son span", () => {
+    render(
+      <SpanWaterfall
+        spans={SPANS}
+        logs={[{ timestamp: new Date(25).toISOString(), body: "\u001b[31mslow query\u001b[0m", spanId: "db", severity: "WARN" }]}
+      />
+    )
+    expect(screen.getByText("1 line with this trace id")).toBeTruthy()
+    fireEvent.click(screen.getByText("slow query"))
+    // La ligne a sélectionné le span : son détail est ouvert.
+    expect(screen.getByText("postgresql")).toBeTruthy()
+  })
+
+  it("dit quand aucun log ne porte ce trace id", () => {
+    render(<SpanWaterfall spans={SPANS} logs={[]} />)
+    expect(screen.getByText(/No log line carries this trace id/)).toBeTruthy()
+  })
+})
+
+describe("TracesOverview", () => {
+  it("n'a de lignes cliquables que si on lui donne onRouteClick", () => {
+    const set = [trace("a", "GET /x", 10, MIN)]
+    const { rerender } = render(<TracesOverview traces={set} lookbackMinutes={60} now={NOW} />)
+    expect(screen.getByText("/x").closest("button")).toBeNull()
+    let clicked = ""
+    rerender(<TracesOverview traces={set} lookbackMinutes={60} now={NOW} onRouteClick={(n) => (clicked = n)} />)
+    fireEvent.click(screen.getByText("/x"))
+    expect(clicked).toBe("GET /x")
+  })
+
+  it("n'affiche les services que sur demande", () => {
+    const set = [trace("a", "GET /x", 10, MIN, { service: "spunto-proxy" })]
+    const { rerender } = render(<TracesOverview traces={set} lookbackMinutes={60} now={NOW} />)
+    expect(screen.queryByText("spunto-proxy")).toBeNull()
+    rerender(<TracesOverview traces={set} lookbackMinutes={60} now={NOW} showServices />)
+    expect(screen.getByText("spunto-proxy")).toBeTruthy()
+  })
+})
+
+describe("SpanWaterfall — repli", () => {
+  it("sait ce que replier cacherait, erreurs comprises", () => {
+    const t = spanTree(orderSpans([...SPANS, { spanId: "boom", parentSpanId: "leaf", name: "x", startTimeMs: 13, durationMs: 1, error: true }]))
+    expect(t.get("root")).toMatchObject({ parentId: null, descendants: 4, descendantError: true })
+    expect(t.get("rpc")).toMatchObject({ parentId: "root", descendants: 2, descendantError: true })
+    expect(t.get("db")).toMatchObject({ parentId: "root", descendants: 0, descendantError: false })
+  })
+
+  it("replie un sous-arbre au chevron, sans sélectionner le span", () => {
+    render(<SpanWaterfall spans={SPANS} />)
+    expect(screen.getByText("docker.create")).toBeTruthy()
+    fireEvent.click(screen.getByLabelText("Collapse agent.cmd spawn"))
+    expect(screen.queryByText("docker.create")).toBeNull()
+    expect(screen.getByText("+1")).toBeTruthy()
+    // Le clic sur le chevron n'a pas ouvert le détail du span.
+    expect(screen.queryByText("kind")).toBeNull()
+    fireEvent.click(screen.getByLabelText("Expand agent.cmd spawn"))
+    expect(screen.getByText("docker.create")).toBeTruthy()
+  })
+
+  it("replie et déplie tout", () => {
+    render(<SpanWaterfall spans={SPANS} />)
+    fireEvent.click(screen.getByText("Collapse all"))
+    expect(screen.queryByText("pg.query")).toBeNull()
+    expect(screen.getByText("GET /api/x")).toBeTruthy()
+    expect(screen.getByText("late")).toBeTruthy()
+    fireEvent.click(screen.getByText("Expand all"))
+    expect(screen.getByText("docker.create")).toBeTruthy()
+  })
+
+  it("part replié à partir d'une profondeur", () => {
+    render(<SpanWaterfall spans={SPANS} defaultCollapsedDepth={1} />)
+    expect(screen.getByText("agent.cmd spawn")).toBeTruthy()
+    expect(screen.queryByText("docker.create")).toBeNull()
+  })
+
+  it("se replie au clavier", () => {
+    render(<SpanWaterfall spans={SPANS} />)
+    const row = screen.getByText("agent.cmd spawn").closest("[role=button]") as HTMLElement
+    fireEvent.keyDown(row, { key: "ArrowLeft" })
+    expect(screen.queryByText("docker.create")).toBeNull()
+    fireEvent.keyDown(row, { key: "ArrowRight" })
+    expect(screen.getByText("docker.create")).toBeTruthy()
+    fireEvent.keyDown(row, { key: "Enter" })
+    expect(row.getAttribute("aria-pressed")).toBe("true")
+  })
+
+  it("déplie les ancêtres d'un span choisi depuis une ligne de log", () => {
+    render(
+      <SpanWaterfall
+        spans={SPANS}
+        defaultCollapsedDepth={0}
+        logs={[{ timestamp: new Date(20).toISOString(), body: "creating container", spanId: "leaf" }]}
+      />
+    )
+    expect(screen.queryByText("docker.create")).toBeNull()
+    fireEvent.click(screen.getByText("creating container"))
+    expect(screen.getAllByText("docker.create").length).toBeGreaterThan(0)
+    expect(screen.getByText("agent.cmd spawn")).toBeTruthy()
+  })
+
+  it("se laisse contrôler", () => {
+    let last: string[] = []
+    render(<SpanWaterfall spans={SPANS} collapsedSpanIds={["root"]} onCollapsedSpanIdsChange={(ids) => (last = ids)} />)
+    expect(screen.queryByText("agent.cmd spawn")).toBeNull()
+    fireEvent.click(screen.getByLabelText("Expand GET /api/x"))
+    expect(last).toEqual([])
+    // Contrôlé : tant que le parent ne change pas la prop, rien ne bouge.
+    expect(screen.queryByText("agent.cmd spawn")).toBeNull()
+  })
+})
+
+describe("severityClass", () => {
+  it("colore en rouge ce qui est grave, quel que soit le vocabulaire du logger", () => {
+    for (const sev of ["ERROR", "error", "ERROR2", "FATAL", "CRITICAL", "critical"]) expect(severityClass(sev)).toBe("text-destructive")
+    expect(severityClass("WARN")).toContain("amber")
+    expect(severityClass("WARNING")).toContain("amber")
+    expect(severityClass("INFO")).toBe("text-muted-foreground")
+    expect(severityClass(null)).toBe("text-muted-foreground")
+  })
+})