shadcn.io is not affiliated with official shadcn/ui
Cluster Nodes Dashboard Block for React Aria
Six cluster nodes in a list with CPU, memory and pod bars; the chosen node's pods packed into one bar against allocatable CPU, its labels and taints, and Cordon, Drain and Uncordon with confirmations.
Installation
Overview
Pack a node, then cordon or drain it, with this cluster panel for React with React Aria. A hairline frame with a plus mark on each corner puts six Rookhall nodes in a list at the start, each with its state as a word and three thin bars for CPU, memory and pods. Beside it, the chosen node's pods are drawn as the segments of one bar sized by their CPU request against the node's allocatable CPU, with the free part hatched, and the node's labels, taints and pods follow. Cordon and Drain each open an Alert Dialog that says what will happen; confirming changes the state and the pods, and Uncordon puts it back. It's built from Alert Dialog, Badge, Button and Guides. For platform consoles and maintenance runbooks.
FAQ
How do I fill it with my nodes?
Edit NODES: an id, the allocatable cpu (millicores) and mem (GiB), maxPods, labels, taints and a pods list with each pod's CPU and memory request and whether it belongs to a daemon set. The bars, the packing, the free CPU and the header totals are worked out from the pods.
What do Cordon and Drain change?
Cordon marks the node unschedulable: it gains the unschedulable taint and its running pods stay. Drain cordons it first, then the movable pods read "Evicting" and fade in the packing bar, while daemon set pods stay on the node. Uncordon returns it to Ready. Cordon is disabled on a node that is not Ready, and Drain on one already draining.
Why is there a confirmation?
Draining moves running work, so it opens an alert dialog with a destructive action that names the pod count. Cordon asks too, because it changes where new pods can go. After you confirm, focus moves to the node's name so a keyboard user lands on the result.