Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

gRPC Latency Monitoring Block for Solid

Three tabs for unary, server stream and bidirectional stream calls, each with a table of seven methods (p50, p99, range bar and rates), the most common status codes ranked, and a header that counts the slow methods.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See which RPC methods are slow, and how each call type behaves, with this latency panel for Solid with Ark UI. It is Callgrove, an RPC observability tool (made up), reading the last hour. A hairline frame with a plus mark on each corner holds three Tabs: Unary, Server stream and Bidirectional stream. Each tab lists seven methods in a table: p50 and p99 (for a stream, the time to the first message), a range bar from p50 to p99 on the tab's own scale with a tick at its slow limit, and two more figures: the deadline-exceeded share and calls a second for unary calls, or messages a second and mean stream length for streams. Under the table the five most common status codes are ranked with their count, share and a bar. The header counts the methods over the limit and changes with the tab. Guides draw the frame and its bands; the entrance is CSS only. For service owners, platform teams and anyone setting deadlines.

FAQ

How do I use my own methods?

Edit GROUPS: each tab has its methods (name, p50, p99 in milliseconds and two figures that mean different things for unary calls and for streams), its limit (the tick and the header's threshold), its max (the right end of the range bars) and its codes with counts out of total. The header, the bars and the ranking are derived from them.

Why do streams show time to first message?

A stream stays open, so its total duration says little about how long a caller waited. The time to the first message is what the caller feels, and it is what p50 and p99 mean on the two stream tabs. The mean length column says how many messages a stream carries on average.

How are the status codes ranked?

By count, largest first, and each share is its count over all calls (or streams) of the tab in the hour, so the five shares need not add to 100. The bars lean on a logarithmic scale so a rare code is still visible next to OK. The codes are the standard gRPC status names.

What is real here and what is typed?

All of it is typed: the methods, services and counts are examples, and nothing is measured. The product is made up. In your app feed the same shapes from your tracing or metrics pipeline.

Can I read it without colour?

Yes. The range bars are foreground on a neutral track, a method over its limit is bold, and every bar's figures are written beside it. Tabs, tables and the ranked list are native and named.

How does it look on a phone?

The range bar and the last column hide; the method, the two latency figures and the third figure stay. The status code rows put their bar under the name. The three tabs share the width and the heights do not change when you switch.