shadcn.io is not affiliated with official shadcn/ui
Incident Response Timeline Block for React Aria
One incident on a rail from alert to resolved: four milestones with phase lengths, a command hand-off diamond, notes, derived response times, and a Timeline or By responder toggle that regroups the events with the minutes each person held command.
Installation
Overview
Review how fast a team responded with this incident response timeline for React with React Aria. It is written for Escalane, a fictional on-call tool, and draws one checkout-errors incident on Wednesday 14 October. A hairline frame has a cell at the start with the response times worked out from the events, to acknowledge 3 min, to mitigate 37 min, to resolve 1 h 9 min, and the number of command hand-offs, and a rail at the end. Detected, Acknowledged, Mitigated and Resolved are solid nodes, the first three with the phase they open and how long it lasted; the hand-off at 02:40 is a diamond; notes are small hollow nodes. A Toggle Group in the header switches between Timeline and By responder, which groups the events under each responder with how long they held command. Both are drawn in one cell, so the panel keeps its height. The incident is example data.
FAQ
How do I change the incident?
Edit EVENTS, oldest first. Each has a kind (detected, acknowledged, handoff, mitigated, resolved or note), a time, a responder id and text. A milestone with a phase opens a phase that ends at the next one; a hand-off has to. The response times, phase lengths and command minutes are all derived.
How is the time a person held command worked out?
heldMinutes() walks the events: whoever acknowledges takes command, each hand-off passes it on, and resolved ends it. A responder who never held it reads Did not hold command.
What stays local in the demo, and how do I wire it for real?
Only the toggle and the status line are state; the data is typed. Feed the same shape from your incident tool, keep the derived values in the helpers and they follow.