Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Microservice Mesh Dashboard Block for React Aria

Eight services in a list beside a table of the picked service's outgoing calls with error rate, p99 and circuit breaker, and a retries slider that works out the extra load each callee receives.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See what retries do to the services you call with this service mesh panel for React with React Aria. A hairline frame with a plus mark on each corner holds a list of eight Meshhaven services, each with a health word, its calls a second, its error rate and p99. Beside it, a table lists the outgoing calls of the one you pick: callee, calls a second, errors, p99 and circuit breaker (Closed, Half-open or Open). A Slider sets retries per call from 0 to 5 and the last column works out the load each callee gets, such as "With 3 retries, orders to ledger gets 1,428 requests a second, 19% more". An Open breaker blocks its edge, and "Reset breaker" closes it in the demo. It's built from Slider, Native Select, Button and Guides. For service owners and on-call engineers.

FAQ

How do I fill it with my services?

Edit SERVICES: each has an id, its rate, errors and p99, and its edges, each with a callee, a first-try rate, an errors percentage, a p99 and a breaker state. The health word, the header, the table and the reading are worked out from them.

How is the extra load worked out?

Each failed call is retried, so with an error rate e and n retries the extra calls are e plus e squared and so on up to e to the power n, as a share of the first-try calls. At 16% errors and 3 retries that is 0.16 + 0.026 + 0.004, about 19% more. It assumes errors are independent; a callee that is down fails every retry.

What do the breaker states do?

An Open breaker rejects calls, so its edge carries nothing and reads Blocked. Closed and Half-open both let calls through here. Reset breaker closes an Open edge in this demo and the load comes back.

What stays local, and how do I wire it for real?

Everything: the rates are typed over a fixed five-minute window and nothing is measured or reset on a real mesh. To wire it, feed edges from your mesh telemetry and send Reset breaker to your control plane behind a confirmation.

How do I use it with the keyboard?

Services are buttons that mark the current one with aria-current, the slider takes arrow keys, Home and End, and the status line reads the result of the slider or a reset.

How does it look on a phone?

The list becomes a select above the table, and the table keeps callee, calls a second and the load with retries. Errors and breaker move under the callee name, with the reset button beside it, and p99 is dropped.

All 200 dashboard blocks