Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Replica Set Latency Monitoring Block for Solid

Reads and writes p99 for a primary and two secondaries as three lines on one scale and one cursor, with each secondary's replication lag as a badge and a bar against a 10 s limit.

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 node of a replica set is slow and how stale its reads are, with this database latency panel for Solid with Ark UI. It is Oplogue, a document-database monitor (made up), watching one primary and two secondaries for an hour. A hairline frame with a plus mark on each corner holds two Tabs, Reads and Writes, and each shows three node rows: the role, the p99 under the cursor and a line of the hour on a scale shared by all three rows, with a line at the 50 ms alert. One hidden range over the three plots is the cursor, so a single minute reads every node. Under the rows the two secondaries show their replication lag as a Badge and a thin bar against a 10 s limit, and a sentence says what a read from the most lagging secondary means at that minute. Guides draw the frame and its bands; the entrance is CSS only. For replica sets, read-preference decisions and any store with asynchronous copies.

FAQ

How do I use my own nodes?

Edit MEMBERS for the nodes, READS and WRITES for the p99 series (one array of 60 minute samples per node, primary first) and LAG_ONE and LAG_TWO for each secondary's lag in tenths of a second. ALERT and LAG_LIMIT set the two lines. The header sentence, the badge values and the stale-read sentence are all derived from these arrays.

What does the stale-read sentence mean?

A secondary applies the primary's changes after a delay, its replication lag. A read sent to that secondary can therefore return data up to that old. The sentence names the secondary with the larger lag at the cursor's minute and gives the figure, so you can see how long a lagging node was a risk for reads that accept stale data.

How does the cursor work?

It is a native range laid over the three plots, named Time, whose value text is the minute. Arrow keys move it one minute, Home and End jump to the ends, and dragging scrubs it. It starts on the minute of the worst lag. Switching between Reads and Writes keeps the minute. A polite status line speaks the reading about 600 ms after the last change.

What is real here and what is typed?

All of it is typed: the series and the lag figures are examples, and no database is contacted. The product is made up and no vendor is named in the panel. In your app feed the same shapes from your database's metrics.

Can I read it without colour?

Yes. Every line is the same foreground stroke, told apart by its row and its label; the alert line is a thin rule, and the cursor is a hairline with a circle on each line. The figures beside each row and the lag badges give every value in words and numbers.

How does it look on a phone?

The node labels narrow, the time labels thin to every other one, and each lag row puts its bar under the name and badge. The two tabs and the rows keep their heights when you switch.