shadcn.io is not affiliated with official shadcn/ui
Incident Timeline Monitoring Block for Vue
One incident as a single clock: alerts, deploys, people and status updates merged in order, a source filter with counts, an elapsed or UTC gutter and the four phase marks with the time to acknowledge.
Installation
Overview
Read one outage from first signal to the all-clear with this incident timeline for Vue with Ark UI. It is Embertrail, an incident management tool, replaying a checkout outage (all made up): a release lands, alerts fire seven minutes later, the primary on-call acknowledges, a config change and a rollback follow, and the incident is resolved. A Toggle Group turns the four sources on and off (Alerts, Deploys, People, Updates, each with its count) and a Switch changes the gutter from the time since the first event to the UTC clock. Four marks (detected, acknowledged, mitigated, resolved) are found in the events and shown above the list with the time to acknowledge worked out from them. The list holds its height whatever is on, and turning every source off shows a message in the same space. Guides draw the frame and its bands; the entrance is CSS only. For post-incident reviews, status updates and on-call handovers.
FAQ
How do I use my own incident?
Edit ENTRIES: each event has the minutes since the first event (at), a source (alert, deploy, people or update), the text, the initials of who did it (empty for something automatic) and an optional mark of detected, acknowledged, mitigated or resolved. The start of the clock is START_MINUTES, and the marks, the counts on the toggles, the header length and the time to acknowledge are all worked out from the list.
How does the source filter work?
It is a multi-select toggle group, so any mix of the four sources can be on, and turning them all off is allowed. The list is drawn over an unseen copy of the full list, so the panel never changes height, and the status line says how many events are showing.
What is real here and what is typed?
All of it is typed. Nothing is paged, acknowledged or posted, and the initials are examples. In your app feed the same shape from your alerting, deploy and chat tools; the marks and the times are derived from the events.