Multi-region availability list with a status dot per cloud region and the round-trip latency rendered in mono.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Monitoring7 } from "@/components/beste/piece/monitoring7";
<Monitoring7
regions={[
{
"code": "us-east-1",
"status": "operational",
"latency": "42ms"
},
{
"code": "eu-west-2",
"status": "operational",
"latency": "78ms"
},
{
"code": "ap-south-1",
"status": "degraded",
"latency": "210ms"
},
{
"code": "sa-east-1",
"status": "outage"
}
]}
/>Compact service health row with operational state, pulsing dot, and uptime percentage on the right.
Inline edge between two named endpoints, drawn as a status-tinted stem with the round-trip latency floating mid-span.
Distributed trace timeline laying spans across a shared horizontal axis, each row labeled in monospace.
Single distribution bar splitting incident counts across critical, warning, and info segments with a mono legend.
Thirty-tick history strip in the style of a status page, with pass, slow, and fail segments and a rolling availability number.
Rate-limit row that maps remaining capacity to a chain of filled and hollow dots, with a count beside it.