shadcn.io is not affiliated with official shadcn/ui
gRPC Latency Monitoring Block for Radix UI
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.
Installation
Overview
See which RPC methods are slow, and how each call type behaves, with this latency panel for React with Radix 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.