Service Link

Inline edge between two named endpoints, drawn as a status-tinted stem with the round-trip latency floating mid-span.

api

42ms

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Monitoring16 } from "@/components/beste/piece/monitoring16";

<Monitoring16
  from="api"
  to="db"
  latency="42ms"
  status="healthy"
/>

More Monitoring pieces

http.req

auth

db.query

cache.set

monitoring15

Distributed trace timeline laying spans across a shared horizontal axis, each row labeled in monospace.

Requests

12.4Kreq/s

+12%

monitoring10

Headline number for traffic volume with a trend arrow and tinted delta badge against a prior window.

Critical2m ago

5xx error rate above 2%

checkout-api

monitoring3

Incident card pairing a bell glyph, label tag, title, and service line with a configurable accent tone.

us-east-1

42ms

eu-west-2

78ms

ap-south-1

210ms

sa-east-1

—

monitoring7

Multi-region availability list with a status dot per cloud region and the round-trip latency rendered in mono.

live

monitoring17

Bare ECG-style heartbeat trace with a pulsing live dot at the leading edge and no other chrome.

API Gateway

Operational99.98%

monitoring1

Compact service health row with operational state, pulsing dot, and uptime percentage on the right.