Release Pins Service Health Dashboard Block for React

Each lane holds a typed list of { day, minutes } entries. The month's uptime is 1 - minutes down / minutes in the month, rounded to two decimals, so the figure, the outlined cells and the lane's one-line note always agree. The one lane under the 99.9% target takes the warning dot and says "under the 99.9% target" in words. The numbers in the block are example data.

Add an entry to RELEASES with an ISO date, a version, a title, a summary and a kind. The pin's place along the lane is computed from the day of the month, for the thirty-day layout and for the phone's fourteen days, and the card and the list under the lanes read the same entry. The header counts RELEASES.length.

The hover card is a convenience, not the only way in. The same version, date and summary are always on the page in the list of release cells under the lanes, and each pin is a link that a screen reader announces with its version, date and title. The card is Base UI's preview card: it opens on hover and on keyboard focus.

Thirty cells would be about nine pixels wide at 320 pixels. Below the sm breakpoint the cells older than the last fourteen days are removed, the track switches to fourteen columns, and the pins from those days are hidden with them. The month's uptime still covers all thirty days, and a line under the legend says the view is the last fourteen days.

The block follows your theme and uses foreground weights, so it reads in every preset and for people who can't tell green from red. A normal day is a solid cell and a day with downtime is an outlined cell, and every lane also says it in words. Only the lane that missed its target uses a status colour, once.

Yes. The timeline is a time series, so each track keeps its own left-to-right direction and the oldest day stays at the start of the month; the labels, the version numbers and the uptime figures are isolated so they don't reorder.