Observability cockpit primitives
An internal Datadog / Honeycomb-style cockpit covering metrics, logs, traces, SLOs, synthetic tests and incident response. Wired against the Mufflermen platform services — quotes-api, parts-catalogue, workshop-scheduler, quote-pdf — running across AU-East-1, AU-West-1 and APAC. Visual reference only — no real backend wired.
Observability cockpit primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Observability cockpit primitives: An internal Datadog / Honeycomb-style cockpit covering metrics, logs, traces, SLOs, synthetic tests and incident response. Wired against the Mufflermen platform services — quotes-api, parts-catalogue, workshop-scheduler, quote-pdf — running across AU-East-1, AU-West-1 and APAC. Visual reference only — no real backend wired.
Metric tile
Single-metric tile with current value, unit, delta chip, sparkline trend and a small service caption.
Query builder
Visual metric query builder — metric picker, filter chips and toggleable group-by chips with a live query preview.
Dashboard grid
12-column dashboard grid with neuomorphic tiles, drag-handle hint, sub-titles and arbitrary tile content.
Alert rule card
Alert rule card — threshold + operator + current value + tone-shifting state chip + last-triggered footer.
Log stream table
Streaming log table with severity chips, severity filter row and structured key/value fields per row.
Trace flame graph
Distributed-trace flame graph with stacked bars per span, depth-based rows and click-to-select highlighting.
Span detail pane
Span detail — trace + span IDs, operation, kind, duration, error chip, tag list and linked log lines.
Service map graph
Observability-style service dependency map with throughput-labelled edges and click-to-inspect nodes.
Error budget burndown
Burndown chart — ideal vs actual remaining budget with tone shift, end marker and a compact trend sparkline.
SLO card
Compact SLO card — objective vs actual, window selector, budget remaining radial gauge and health chip.
Correlation matrix
Pearson-style heatmap of correlations between metrics with tone-coded cells and a -1 / 0 / +1 legend.
Anomaly detection strip
Time series with annotated outliers, tone-coded markers per anomaly kind and a list of detected events.
Synthetic test row
Per-test row — name, kind, region, last outcome chip, latency chip and 30-day uptime micro-stat.
Incident timeline
Operational incident timeline with detect / page / ack / mitigate / comm / resolve events and impact chips.
Full cockpit
Internal-facing composition — metric tiles, query bar, service map, dashboard grid, log stream, traces, SLOs and a live incident timeline.