Incident Timeline Changelog Block for React

Edit UPDATES and DAY at the top of the file. An update is an at (minutes after midnight UTC on DAY), a message and a stage; the first update is the incident's start, and the last should be Resolved. The time on screen ("08:14 UTC") is spelled out from the minutes, the elapsed chip is counted from the first update, and the total duration in the title and the summary is the last update minus the first, so nothing is typed twice. The date is a fixed ISO day, never computed from today.

Each stage is an outline badge with an icon and the word, so it reads in greyscale and to a screen reader, which hears the word and skips the icon. On the rail the resolved update has a filled dot and the others a ring, so the end of the incident is visible without reading. The four stages are constants at the top of the file, each an icon, an id and a label.

It is a ghost button that is a link (href="#"): point it at your subscription page or the incident's own page. The block has no primary button, because following an incident is not the page's main action. The button renders the link it's given with render, with nativeButton={false}.

The release timeline is one column of releases on a rail with a date column. This one is about a single incident and is split in two: the facts at the start, the updates at the end, with a divider from the top rule to the foot of the block, a stage badge for each update and an elapsed chip rather than a version and a date.

Below lg the two halves stack: the summary first, then a rule, then the updates on their hairline at the start edge. Nothing scrolls sideways at 320 pixels; the stage, time and chip wrap onto a second line if they must. In a right-to-left layout the hairline and dots move to the right edge, the arrow turns, and times and durations stay in reading order.

The header, the summary and the rail fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears. The block has no state.