IncidentTimeline

Forensic incident ledger with lifecycle milestone pins and expandable event entries.

INCIDENT-4412 · PROD-EU

14:02:11
PAGERDUTYCPU alarm firing on api-prod-7
14:03:00detected
14:05:41
K8S@danaPod api-prod-7 restarted on node-3
14:06:12ackedT+4m01s
14:22:30
DEPLOY@ramiRolled back release 4412 → 4411
14:41:58
PAGERDUTYCPU alarm resolved — error rate back under 0.1%
14:42:00mitigatedT+40m
16:05:00resolvedT+123m

Source

"use client"

import {
  IncidentTimeline,
  type TimelineEntry,
} from "@/registry/warren/incident-timeline/incident-timeline"

const ENTRIES: TimelineEntry[] = [
  { kind: "event", severity: "danger", source: "PAGERDUTY", summary: "CPU alarm firing on api-prod-7", at: "14:02:11" },
  { kind: "milestone", phase: "detected", at: "14:03:00" },
  { kind: "event", severity: "warning", source: "K8S", actor: "@dana", summary: "Pod api-prod-7 restarted on node-3", at: "14:05:41" },
  { kind: "milestone", phase: "acked", at: "14:06:12", note: "T+4m01s" },
  { kind: "event", severity: "accent", source: "DEPLOY", actor: "@rami", summary: "Rolled back release 4412 → 4411", at: "14:22:30" },
  { kind: "event", severity: "success", source: "PAGERDUTY", summary: "CPU alarm resolved — error rate back under 0.1%", at: "14:41:58" },
  { kind: "milestone", phase: "mitigated", at: "14:42:00", note: "T+40m" },
  { kind: "milestone", phase: "resolved", at: "16:05:00", note: "T+123m" },
]

export default function IncidentTimelineDemo() {
  return (
    <div className="flex w-full max-w-xl border-2 border-border bg-panel p-2">
      <IncidentTimeline
        entries={ENTRIES}
        header="INCIDENT-4412 · PROD-EU"
        live
        showTooltips
      />
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/incident-timeline.json

Usage

import { IncidentTimeline } from "@/components/ui/incident-timeline"

<IncidentTimeline
  entries={[
    { kind: "event", severity: "danger", source: "PAGERDUTY", summary: "CPU alarm firing", at: "14:02:11" },
    { kind: "milestone", phase: "detected", at: "14:03:00" },
    { kind: "milestone", phase: "resolved", at: "16:05:00", note: "T+123m" },
  ]}
/>

This is the structured incident record, not a log feed — where LogList renders raw timestamped lines, each timeline entry carries a severity, a source system, an optional human actor, and an optional telemetry payload. The caps-label header names the incident above the ledger (the DOM title prop name is left untouched).

Rows share a left gutter rail: lifecycle milestones pin as 8px squares (detected → danger, acked → warning, mitigated → accent, resolved → success), events as 6px squares in their severity tone. Timestamps sit in a fixed mono tabular column.

Unknown milestone phases fall back to a muted pin, so consumer-specific lifecycles degrade gracefully instead of lying with signal color.

Milestone note fields carry durations as verbatim mono tabular text (T+42m) — the MTTR annotation between milestones stays consumer-computed.

Expandable detail

INCIDENT-4412 · TELEMETRY-LINKED

14:02:11
14:03:00detected
14:05:41
14:06:12ackedT+4m01s

Source

"use client"

import { IncidentTimeline, type TimelineEntry } from "@/registry/warren/incident-timeline/incident-timeline"

const ENTRIES: TimelineEntry[] = [
  {
    kind: "event",
    severity: "danger",
    source: "PAGERDUTY",
    summary: "CPU alarm firing on api-prod-7",
    at: "14:02:11",
    detail: `alert: cpu_utilization > 0.95 for 5m
series: api-prod-7 · window 14:57–15:02 UTC
runbook: rb-114 (api saturation)`,
  },
  { kind: "milestone", phase: "detected", at: "14:03:00" },
  {
    kind: "event",
    severity: "warning",
    source: "K8S",
    actor: "@dana",
    summary: "Pod api-prod-7 restarted on node-3",
    at: "14:05:41",
    detail: `OOMKilled, exit code 137
restart_count: 2/5 · node-3 (us-east-1a)`,
  },
  { kind: "milestone", phase: "acked", at: "14:06:12", note: "T+4m01s" },
]

export default function IncidentTimelineExpandable() {
  return (
    <div className="flex w-full max-w-xl border-2 border-border bg-panel p-2">
      <IncidentTimeline entries={ENTRIES} header="INCIDENT-4412 · TELEMETRY-LINKED" />
    </div>
  )
}

Events with a detail render as real <button> rows (aria-expanded) that expand the telemetry payload in place — log excerpts, trace ids, runbook links. Pass live to pulse a marker on the newest entry (disabled under prefers-reduced-motion).

API Reference

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Installation

Usage

Structure

Expandable detail

API Reference

On this page