shadcn.io is not affiliated with official shadcn/ui
Redis Cluster Status Monitoring Block for React Aria
A Redis cluster drawn slot by slot: 16,384 slots in three primary ranges with replica bars, a pinned failover event, six node cards with memory, operations and replication lag, and the chosen node's keys, evictions and clients.
Installation
Overview
See how a Redis cluster is laid out and which node is under strain, with this cluster panel for React with React Aria. It is Slotmarch, a cluster monitor (made up). A hairline frame with a plus mark on each corner opens with the 16,384 hash slots as one proportional bar split into three primary ranges, each with its replica as a thin bar under it, hatched while that replica syncs. A pinned event says that a replica was promoted after its primary stopped answering, with a button that selects the node that took over. Six node cards are one radio group: role, state word, memory against its limit, operations a second, and a primary's slot range or a replica's lag in bytes. The chosen node's keys, evictions and clients read in a row at the bottom. The header names the fullest node and the replica that is behind. Guides draw the frame; the entrance is CSS only. For platform teams who watch cache clusters.
FAQ
How do I use my own cluster?
Edit NODES and RANGES at the top of the file: each node has its role, the range it serves or copies, memory in gigabytes, operations a second, keys, evictions, clients, its lag in bytes and a syncing flag. FAILOVER holds the event. The header and the bar widths (slots over 16,384) are derived. On a real cluster these come from CLUSTER NODES, INFO and your metrics.
What does the pinned event show?
That the replica of one range was promoted, which node it replaced and the range it now serves. The button selects the promoted node so its card and its range on the slot bar are highlighted together. The old primary is shown as a replica that is syncing, which is why its bar is hatched.
What is replication lag here?
The number of bytes a replica trails its primary by, shown on the replica's card and in the header for the one that is syncing. A primary shows its slot range in that line instead, so every card has the same five lines and the grid never changes height.
What is real here and what stays local?
The nodes, ranges and figures are typed examples and the product is made up; nothing connects to a cluster and no failover or rebalance can be started. Choosing a card only changes what is highlighted and read out.