- ds
- Operations
- Cluster map
Cluster map
Nodes and the pods on them, at a glance.
ip-10-4-11-23m6i.2xlarge · ap-south-1a
cpu
64%
mem
71%
ip-10-4-12-90m6i.2xlarge · ap-south-1a
cpu
58%
mem
66%
ip-10-4-17-82m6i.2xlarge · ap-south-1bMemoryPressure
cpu
81%
mem
93%
ip-10-4-18-05c6i.xlarge · ap-south-1bCordoned
cpu
37%
mem
41%
ip-10-4-21-66m6i.2xlarge · ap-south-1cNotReady
Kubelet stopped posting status 4m ago. 9 pods are being rescheduled.
ip-10-4-22-14g5.xlarge · ap-south-1c
cpu
22%
mem
48%
RunningPendingCrashLoopBackOffCompletedTerminating
Show code
<div class="nodes">
<div class="knode">
<div class="knode-h"><b>ip-10-4-11-23</b><small>m6i.2xlarge · ap-south-1a</small></div>
<div class="meter-row"><span>cpu</span><div class="meter" style="--v:0.64"><i></i></div><span>64%</span></div>
<div class="meter-row"><span>mem</span><div class="meter" style="--v:0.71"><i></i></div><span>71%</span></div>
<div class="pods"><button class="pod" aria-label="search-api: Running"></button><button class="pod" aria-label="search-api: Running"></button><button class="pod" aria-label="orders-enricher: Running"></button><button class="pod" aria-label="ledger-writer: Running"></button><button class="pod" aria-label="event-relay: Running"></button><button class="pod" aria-label="search-api: Running"></button><button class="pod" aria-label="coredns: Running"></button><button class="pod" aria-label="checkout-api: Running"></button><button class="pod" aria-label="fluent-bit: Running"></button><button class="pod" aria-label="fluent-bit: Running"></button><button class="pod" aria-label="ledger-writer: Running"></button><button class="pod" aria-label="checkout-api: Running"></button><button class="pod" aria-label="node-exporter: Running"></button><button class="pod" aria-label="checkout-api: Running"></button><button class="pod" aria-label="event-relay: Running"></button><button class="pod" aria-label="ledger-writer: Running"></button><button class="pod" aria-label="search-api: Running"></button><button class="pod" aria-label="fluent-bit: Running"></button><button class="pod" aria-label="checkout-api: Running"></button><button class="pod" aria-label="coredns: Running"></button><button class="pod" aria-label="ledger-writer: Running"></button><button class="pod" aria-label="node-exporter: Running"></button></div>
</div>
<div class="knode">
<div class="knode-h"><b>ip-10-4-12-90</b><small>m6i.2xlarge · ap-south-1a</small></div>
<div class="meter-row"><span>cpu</span><div class="meter" style="--v:0.58"><i></i></div><span>58%</span></div>
<div class="meter-row"><span>mem</span><div class="meter" style="--v:0.66"><i></i></div><span>66%</span></div>
<div class="pods"><button class="pod" aria-label="search-api: Running"></button><button class="pod" aria-label="fluent-bit: Running"></button><button class="pod" aria-label="coredns: Running"></button><button class="pod" aria-label="fluent-bit: Running"></button><button class="pod" aria-label="ledger-writer: Running"></button><button class="pod" aria-label="event-relay: Running"></button><button class="pod" aria-label="checkout-api: Running"></button><button class="pod" data-state="pending" aria-label="coredns: Pending"></button><button class="pod" aria-label="event-relay: Running"></button><button class="pod" aria-label="event-relay: Running"></button><button class="pod" aria-label="orders-enricher: Running"></button><button class="pod" aria-label="ledger-writer: Running"></button><button class="pod" aria-label="checkout-api: Running"></button><button class="pod" aria-label="fluent-bit: Running"></button><button class="pod" aria-label="orders-enricher: Running"></button><button class="pod" data-state="completed" aria-label="node-exporter: Completed"></button><button class="pod" data-state="completed" aria-label="node-exporter: Completed"></button><button class="pod" aria-label="coredns: Running"></button><button class="pod" aria-label="ledger-writer: Running"></button></div>
</div>
<div class="knode">
<div class="knode-h"><b>ip-10-4-17-82</b><small>m6i.2xlarge · ap-south-1b</small><span class="badge warn">MemoryPressure</span></div>
<div class="meter-row"><span>cpu</span><div class="meter" style="--v:0.81"><i></i></div><span>81%</span></div>
<div class="meter-row"><span>mem</span><div class="meter warn" style="--v:0.93"><i></i></div><span>93%</span></div>
<div class="pods"><button class="pod" aria-label="search-api: Running"></button><button class="pod" aria-label="orders-enricher: Running"></button><button class="pod" aria-label="checkout-api: Running"></button><button class="pod" aria-label="search-api: Running"></button><button class="pod" data-state="crash" aria-label="coredns: CrashLoopBackOff"></button><button class="pod" aria-label="node-exporter: Running"></button><button class="pod" aria-label="event-relay: Running"></button><button class="pod" aria-label="search-api: Running"></button><button class="pod" aria-label="checkout-api: Running"></button><button class="pod" aria-label="orders-enricher: Running"></button><button class="pod" aria-label="checkout-api: Running"></button><button class="pod" aria-label="search-api: Running"></button><button class="pod" aria-label="search-api: Running"></button><button class="pod" aria-label="checkout-api: Running"></button><button class="pod" aria-label="ledger-writer: Running"></button><button class="pod" aria-label="search-api: Running"></button><button class="pod" aria-label="ledger-writer: Running"></button><button class="pod" aria-label="node-exporter: Running"></button><button class="pod" aria-label="fluent-bit: Running"></button><button class="pod" aria-label="search-api: Running"></button><button class="pod" aria-label="orders-enricher: Running"></button><button class="pod" data-state="pending" aria-label="orders-enricher: Pending"></button><button class="pod" aria-label="orders-enricher: Running"></button><button class="pod" aria-label="coredns: Running"></button><button class="pod" aria-label="ledger-writer: Running"></button><button class="pod" aria-label="search-api: Running"></button></div>
</div>
<div class="knode cordoned">
<div class="knode-h"><b>ip-10-4-18-05</b><small>c6i.xlarge · ap-south-1b</small><span class="badge outline">Cordoned</span></div>
<div class="meter-row"><span>cpu</span><div class="meter" style="--v:0.37"><i></i></div><span>37%</span></div>
<div class="meter-row"><span>mem</span><div class="meter" style="--v:0.41"><i></i></div><span>41%</span></div>
<div class="pods"><button class="pod" aria-label="ledger-writer: Running"></button><button class="pod" aria-label="node-exporter: Running"></button><button class="pod" aria-label="fluent-bit: Running"></button><button class="pod" data-state="terminating" aria-label="orders-enricher: Terminating"></button><button class="pod" data-state="terminating" aria-label="checkout-api: Terminating"></button><button class="pod" aria-label="event-relay: Running"></button><button class="pod" aria-label="orders-enricher: Running"></button><button class="pod" aria-label="orders-enricher: Running"></button><button class="pod" data-state="terminating" aria-label="fluent-bit: Terminating"></button><button class="pod" aria-label="orders-enricher: Running"></button><button class="pod" aria-label="checkout-api: Running"></button></div>
</div>
<div class="knode notready">
<div class="knode-h"><b>ip-10-4-21-66</b><small>m6i.2xlarge · ap-south-1c</small><span class="badge down">NotReady</span></div>
<p class="hint">Kubelet stopped posting status 4m ago. 9 pods are being rescheduled.</p>
</div>
<div class="knode">
<div class="knode-h"><b>ip-10-4-22-14</b><small>g5.xlarge · ap-south-1c</small></div>
<div class="meter-row"><span>cpu</span><div class="meter" style="--v:0.22"><i></i></div><span>22%</span></div>
<div class="meter-row"><span>mem</span><div class="meter" style="--v:0.48"><i></i></div><span>48%</span></div>
<div class="pods"><button class="pod" aria-label="fluent-bit: Running"></button><button class="pod" aria-label="orders-enricher: Running"></button><button class="pod" data-state="completed" aria-label="search-api: Completed"></button><button class="pod" aria-label="fluent-bit: Running"></button><button class="pod" aria-label="ledger-writer: Running"></button><button class="pod" aria-label="search-api: Running"></button></div>
</div>
</div>
<div class="state-key"><span><i class="pod"></i>Running</span><span><i class="pod" data-state="pending"></i>Pending</span><span><i class="pod" data-state="crash"></i>CrashLoopBackOff</span><span><i class="pod" data-state="completed"></i>Completed</span><span><i class="pod" data-state="terminating"></i>Terminating</span></div>Six nodes across three zones, one card each: name, instance type and zone, CPU and memory requested, and a square per pod. Running pods are the calm green, so the one crash-looping pod and the pending ones are what you see first. A node under pressure gets an amber badge and an amber memory bar; a cordoned node is hatched while it drains; a node that stopped reporting gets a red border and says what is happening to its pods.
| Class | On | What it does |
|---|---|---|
.nodes | div | A grid of node cards, 15rem minimum. |
.knode | div | A node. .cordoned hatches it, .notready gives it a red border. |
.knode-h | div | Name in <b>, type and zone in <small>, a condition .badge on the right. |
.meter-row | div | From 1.0: CPU and memory, compacted inside a node. |
.pods | div | The pod squares. |
.pod | button, i | A pod. Running by default; data-state: pending (amber ring), crash (red), completed (faint), terminating (hatched). |
Do
- Requested CPU and memory on the card; that is what decides where the next pod lands.
- A label on each pod with the workload and state. It is the hover text and the screen reader text.
- Group nodes by zone or node pool when there are more than a dozen.
Don't
- A colour per workload. State is what matters at this altitude; workload is in the label.
- Hiding completed job pods entirely. A node full of them is worth knowing about.
- Animating pods. Hundreds of moving squares are noise.
Accessibility
- Pods are buttons with labels, so the grid can be walked by keyboard. For large clusters, make the node the stop and open its pods in a panel.
- States differ in shape as well as colour: a ring for pending, hatching for terminating.