Distributed trace timeline laying spans across a shared horizontal axis, each row labeled in monospace.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Monitoring15 } from "@/components/beste/piece/monitoring15";
<Monitoring15
spans={[
{
"label": "http.req",
"start": 0,
"width": 100,
"tone": "sky"
},
{
"label": "auth",
"start": 4,
"width": 14,
"tone": "violet"
},
{
"label": "db.query",
"start": 22,
"width": 48,
"tone": "emerald"
},
{
"label": "cache.set",
"start": 76,
"width": 12,
"tone": "amber"
}
]}
/>Single distribution bar splitting incident counts across critical, warning, and info segments with a mono legend.
Inline edge between two named endpoints, drawn as a status-tinted stem with the round-trip latency floating mid-span.
Two-line monospace block reporting read and write throughput with arrow glyphs for direction.
Horizontal scale that drops a marker on the current reading and tints the expected window behind it.
Multi-region availability list with a status dot per cloud region and the round-trip latency rendered in mono.
Single log entry styled like a tail output, with timestamp, level token, source, and message in mono.