React Incident Timeline / Postmortem
The screen a review is run from. It keeps two things apart on purpose: a timeline of what happened, and a separate, honest list of why. The sequence and the causes are rarely the same events, and conflating them is how a postmortem turns into a blameless-sounding story that still teaches nothing.
EQ-07 etch chamber pressure excursion
Etch tool EQ-07 chamber pressure alarm
02:14Pressure exceeded 12 mTorr for 3 consecutive wafers.
— SPC monitor
On-call process engineer acknowledged
02:20— M. Okafor
Escalated to equipment engineering
02:28Turbo pump current trending high; suspected bearing wear.
— M. Okafor
Tool placed in maintenance, lots rerouted to EQ-09
02:368 lots rerouted; WIP impact contained to the affected chamber.
— Equipment eng.
Turbo pump replaced, chamber pumped down
03:12— Field service
Tool qualified and returned to production
03:48Pressure stable at 8.2 mTorr across 5 qual wafers.
— Process eng.
Contributing factors
- Turbo pump bearing wore past its vibration limit mid-shift.
- Pump was 40 days past its recommended PM interval — deferred during the quarter-end push.
- No redundant chamber for this recipe, so the whole tool went down.
- Pump-current trend crossed its warning band 2 hours earlier but had no alert configured.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| title | string | Incident summary |
| severity | 1 – 4 | Drives the SEV badge |
| status | IncidentStatus | ongoing, mitigated, or resolved |
| events | IncidentEvent[] | { id, offset, at, kind, label, actor?, detail? } |
| factors | Factor[] | { id, category, label } grouped by cause type |
Metrics are derived, not typed in
The three numbers a review argues about — time to detect, to acknowledge, to resolve — are computed from the events, not entered separately. Each IncidentEvent carries an offset in minutes from t0 (the earliest event) and a pre-formatted at string for display; the metrics read the first detect, ack, and resolve events and subtract. That means the header can never contradict the timeline below it, and adding an event that changes the story updates the numbers for free.
kind gives each event its icon and colour — detection is red, acknowledgement and escalation amber, mitigation the brand colour, resolution green — so the shape of the response is legible before a word is read. A long red-to-amber gap is a detection or paging problem; a long amber-to-green gap is a repair problem.
Causes get their own space
The factor list is grouped into trigger (the thing that broke), contributing (what made it worse or more likely), and detection gap (why it wasn't caught sooner) — the three questions a good postmortem answers. Deferred maintenance and a missing alert are not on the timeline because they are not events; they are the conditions that made the timeline inevitable, and they belong exactly here.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.