Incident Acknowledge Flow
Checkout API
DownInvestigatingResolved- Failing from 4 of 12 regions9:41 AM
- Acknowledged by Carole9:42 AM
- Recovered everywhere9:45 AM
Carole King
On call
AcknowledgeAcknowledged
Checkout API
DownInvestigatingResolvedCarole King
On call
A service goes down, the on-call engineer presses Acknowledge with a labeled cursor, and the timeline fills in until it is resolved.
The import and the props worth knowing about, in one place.
import { Monitoring27 } from "@/components/beste/piece/monitoring27";
<Monitoring27
service="Checkout API"
downLabel="Down"
investigatingLabel="Investigating"
resolvedLabel="Resolved"
events={[
{
"label": "Failing from 4 of 12 regions",
"time": "9:41 AM",
"tone": "down"
},
{
"label": "Acknowledged by Carole",
"time": "9:42 AM",
"tone": "investigating"
},
{
"label": "Recovered everywhere",
"time": "9:45 AM",
"tone": "resolved"
}
]}
onCall={{
"name": "Carole King",
"avatar": {
"src": "https://images.unsplash.com/photo-1621983266286-09645be8fd01?q=80&w=200&h=200&auto=format&fit=crop",
"alt": "Woman with short hair under a blue sky"
}
}}
onCallLabel="On call"
acknowledgeLabel="Acknowledge"
acknowledgedLabel="Acknowledged"
cursorLabel="Carole"
framed={true}
stepMs={800}
/>