shadcn.io is not affiliated with official shadcn/ui
Incident Severity Changelog Block for React
An incident log grouped under P0 to P4 headings, with a toggle group that filters it, a band of five median-time-to-resolve cells and rows of id, title, users affected and state, each severity a shape and a word.
Installation
Overview
An incident log for React with Base UI, written for Triagebay, a fictional incident desk for small ops teams. A start-aligned header carries the title, one sentence and a toggle group at its end: All, then P0 to P4, each with the number of incidents it holds. Under the header a band of five cells gives the median time to resolve each severity over the last 90 days ("P1, Major: 48 min, median to resolve"). The log under it runs from rail to rail and ends the block: one group per severity under its own heading, worst first, each row an id in mono, the title, the users affected and a state word. Severity is never a colour: P0 is a filled diamond, P1 a filled square, P2 a half square, P3 a ring and P4 a dot, always beside the label and its name. Pressing a level shows only that group, and a polite line reads the result. On a phone the band becomes a labelled sideways scroller that snaps to a cell, the toggles wrap, and each row keeps its id, state and title. It's built from Guides and Toggle Group, with CSS transitions for the entrance and your theme's tokens for every colour. For status pages, ops handbooks and release notes that report incidents by how bad they were. The incidents and figures are example data.
FAQ
How do I change the incidents and levels?
Edit INCIDENTS and SEVERITIES at the top of the file. An incident is an id, a severity (the id of a level), a state word, a title and the number of users. A level is an id, a label, a name, the median mttr in minutes and a shape, a few Tailwind classes that draw its glyph. The toggle counts, the group headings and their counts are all computed from the incidents, so adding a row updates them; a level with no incidents would show an empty heading, so drop it from the list instead.
How are the severities told apart without colour?
Each level has its own shape, drawn in CSS and shown beside its label and name: a filled diamond, a filled square, a half-filled square, a ring and a small dot. The shapes are decoration for sighted readers (they are hidden from assistive technology) because the label and the name carry the meaning, so a screen reader hears "P1 Major". In greyscale or a high-contrast theme the five stay different.
How does the filter work, and can it be switched off?
The toggle group chooses one level, or All, and the log shows only that group. Pressing the chosen item again does nothing, so the log is never empty. The block's height follows the filter, since a group of one row is shorter than five. A visually hidden status line announces how many incidents are showing.
What is the band, and why does it not match the log?
The band shows the median time to resolve each level over the last 90 days, a reading you supply (mttr, in minutes, written as "22 min", "2 h 15 min" or "1 d 2 h"). The log lists one month's incidents, so the two cover different periods, and the band says so in its label. Both are example data.
How does it fit on a phone and in a right-to-left layout?
Below sm the band is a sideways scroller with a name and a focus ring, so a keyboard can scroll it, and each cell snaps into place. A row puts the id and the state on one line with the title under them, and the users-affected column is dropped. In a right-to-left layout the columns mirror, while ids, counts and durations stay in reading order.
Related
- Pro
Incident Timeline Changelog
Incidents and uptimeOne incident as a split: a summary at the start and its four updates on a hairline at the end, each with a stage badge, a time in UTC, an elapsed chip counted from the first update and one sentence.
- Pro
Post-Mortem Changelog
Incidents and uptimeA blameless post-mortem as one framed report: three impact cells, a five-whys accordion from the symptom to the root cause, and an action-items table with owners, due days and states beside a progress bar.
- Pro
Release Blockers Changelog
Deploys and rolloutsA verdict header counted from the data with a cleared bar, a toggle group (Open, Cleared, All) and an inset framed table of blockers with owners, states as shapes and words, and the day each was opened.
- Pro
Rollback History Changelog
Deploys and rolloutsA table of rollbacks that runs rail to rail and ends the block: the day, the version it came from and the one restored, a reason badge, a sortable time to revert and how each ended, with a summary counted from the rows.
- Pro
Release Pins Service Health Dashboard
Incidents and uptimeA health board for a hosting product: four service lanes of thirty daily cells, with a row of release pins above them that open a card of what shipped, and the month's uptime at the end of each lane.
- Pro
A table of services in a tinted frame with sortable column heads, 30-day uptime strips, response times and error rates, and a mark and a word on any service that is down.