Thirty-tick history strip in the style of a status page, with pass, slow, and fail segments and a rolling availability number.
The import and the props worth knowing about, in one place.
import { Monitoring4 } from "@/components/beste/piece/monitoring4";
<Monitoring4
surface="card"
bordered={true}
inverted={false}
endpoint="auth.beste.co"
history={[
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"slow",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"fail",
"ok",
"ok",
"ok",
"ok",
"ok",
"slow",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok"
]}
uptime="99.92%"
pastLabel="30d ago"
nowLabel="Today"
/>Bare ECG-style heartbeat trace with a pulsing live dot at the leading edge and no other chrome.
Three server rows whose CPU and memory bars breathe with fresh readings every second, turning amber and red past their thresholds beside a live status dot.
Compact service health row with operational state, pulsing dot, and uptime percentage on the right.
Grid of uptime cells that light up green in reading order with a couple of amber and red blips at fixed spots, then holds, fades, and fills again.