APM panels

npx shadcn@latest add https://docs.nasaqui.com/r/apm-panels.json

import { LatencyPercentiles, ErrorRatePanel, EndpointTable, TraceList } from "@fadymondy/nasaq/web";

import { LatencyPercentiles } from "@fadymondy/nasaq/web";

export function Latency() {
  return (
    <LatencyPercentiles
      targetMs={500}
      summary={{ p50: 121, p95: 486, p99: 1140 }}
      data={[
        { time: "2026-09-29T09:00", p50: 118, p95: 470, p99: 1050 },
        { time: "2026-09-29T09:05", p50: 124, p95: 492, p99: 1210 },
      ]}
    />
  );
}

LatencyPercentiles     data-slot="latency-percentiles"   percentile chips + line chart + target line
ErrorRatePanel         data-slot="error-rate-panel"      rate, SLO status, chart, top errors
EndpointTable          data-slot="endpoint-table"        method, route, requests, p50, p95, error rate
TraceList              data-slot="trace-list"            rows, and the span waterfall of the selected trace

import { ErrorRatePanel } from "@fadymondy/nasaq/web";

export const Errors = () => (
  <ErrorRatePanel
    slo={0.01}
    data={[{ time: "2026-09-29T09:00", requests: 5200, errors: 41 }, { time: "2026-09-29T09:05", requests: 5100, errors: 190 }]}
    topErrors={[{ id: "e1", message: "TimeoutError: query exceeded 1200ms", count: 214, endpoint: "GET /v1/analytics" }]}
  />
);

import { TraceList } from "@fadymondy/nasaq/web";

export const Traces = () => (
  <TraceList
    defaultSelectedId="t1"
    traces={[{ id: "t1", method: "POST", name: "/v1/reports/export", status: 200, durationMs: 2480, startedAt: Date.now(), spans: [
      { id: "a", name: "POST /v1/reports/export", service: "api", startMs: 0, durationMs: 2480 },
      { id: "b", parentId: "a", name: "SELECT issues", service: "postgres", startMs: 50, durationMs: 640 },
    ] }]}
  />
);