fix: align pool/AZ headers with cluster border and improve mock data (#16)

* fix: align node pool type bars with cluster border

- Defer pool header rect drawing to after final content width is calculated
- Exclude trailing column padding from overallMaxX to get true content edge
- Draw rects at exact final width instead of scaling, eliminating stroke distortion
- Add symmetric padding (10px) on both left and right sides of cluster
- Ensures pool type headers (MASTER, INFRA, WORKER) extend full cluster width

* style(cluster): align pool and AZ header borders with node stroke edges

Compensate for PIXI.js 2px node stroke extending 1px outward on each
side by offsetting header rects by -1 and widening by +2. Also use
`left` constant for unassigned pods spacing.

* feat(mock): improve mock data with realistic pool/AZ distribution

Configure mock clusters with 3 masters (1 per AZ), 3-5 infra nodes
(at least 1 per AZ), and 3-7 workers per AZ using deterministic
hash-based variation across clusters.

Author: thpham

app/src/cluster.js

@@ -141,12 +141,9 @@ export default class Cluster extends PIXI.Graphics {
         totalNodesInPool += pool.azGroups[az].length
       }
 
-      // Add pool header/label
+      // Add pool header/label (rect drawn later with correct width)
       const poolHeader = new PIXI.Graphics()
       poolHeader.allowChildren = true
-      poolHeader.rect(0, 0, 200, poolHeaderHeight)  // Width will be adjusted later
-      poolHeader.fill({ color: poolColor, alpha: 0.3 })
-      poolHeader.stroke({ width: 1, color: poolColor, alpha: 0.8 })
 
       const poolLabel = new PIXI.Text({
         text: `${poolType.toUpperCase()} (${totalNodesInPool})`,
@@ -157,7 +154,7 @@ export default class Cluster extends PIXI.Graphics {
       poolHeader.addChild(poolLabel)
       poolHeader.y = currentY
       poolHeader.x = left
-      poolHeaders.push({ header: poolHeader, poolType: poolType })
+      poolHeaders.push({ header: poolHeader, color: poolColor })
 
       currentY += poolHeaderHeight + 2
 
@@ -186,7 +183,8 @@ export default class Cluster extends PIXI.Graphics {
         if (showAZHeaders) {
           const azHeader = new PIXI.Graphics()
           azHeader.allowChildren = true
-          azHeader.rect(0, 0, azWidthPx, azHeaderHeight)
+          // Offset by -1 and widen by +2 to align with node 2px stroke (extends 1px outward each side)
+          azHeader.rect(-1, 0, azWidthPx + 2, azHeaderHeight)
           azHeader.fill({ color: poolColor, alpha: 0.15 })
           azHeader.stroke({ width: 1, color: poolColor, alpha: 0.4 })
 
@@ -233,28 +231,18 @@ export default class Cluster extends PIXI.Graphics {
         azStartX += azWidthPx + azColumnPadding
       }
 
-      // Track the rightmost point
-      if (azStartX > overallMaxX) {
-        overallMaxX = azStartX
+      // Track the rightmost content edge (exclude trailing azColumnPadding)
+      const poolRightEdge = azStartX - azColumnPadding
+      if (poolRightEdge > overallMaxX) {
+        overallMaxX = poolRightEdge
       }
 
       // Move currentY past this pool's content
       currentY = poolStartY + poolMaxHeight + 5  // Extra spacing between pools
     }
 
-    // Update pool header widths and add them
-    for (const { header } of poolHeaders) {
-      header.width = overallMaxX - left
-      this.addChild(header)
-    }
-
-    // Add AZ headers
-    for (const azHeader of azHeaders) {
-      this.addChild(azHeader)
-    }
-
     // Place unassigned pods
-    let unassignedX = overallMaxX + 10
+    let unassignedX = overallMaxX + left  // Consistent spacing
     const unassignedY = top + poolHeaderHeight + 2
 
     for (const pod of Object.values(this.cluster.unassigned_pods)) {
@@ -271,8 +259,23 @@ export default class Cluster extends PIXI.Graphics {
       overallMaxX = unassignedX
     }
 
-    // Draw cluster border
-    const width = overallMaxX
+    // Draw pool header rects at correct width (after all content is positioned)
+    // Add +2 to account for node 2px stroke extending 1px outward on each side
+    const poolHeaderWidth = overallMaxX - left + 2
+    for (const { header, color } of poolHeaders) {
+      header.rect(-1, 0, poolHeaderWidth, poolHeaderHeight)
+      header.fill({ color: color, alpha: 0.3 })
+      header.stroke({ width: 1, color: color, alpha: 0.8 })
+      this.addChild(header)
+    }
+
+    // Add AZ headers
+    for (const azHeader of azHeaders) {
+      this.addChild(azHeader)
+    }
+
+    // Draw cluster border (add right padding equal to left)
+    const width = overallMaxX + left
     const height = currentY - padding
     this.rect(0, 0, width, height)
     this.stroke({ width: 2, color: App.current.theme.primaryColor })

kube_ops_view/mock.py

@@ -92,40 +92,62 @@ def query_mock_cluster(cluster):
     index = int(cluster.id.split("-")[-1])
     nodes = {}
 
-    # Define availability zones for realistic distribution
     availability_zones = ["us-east-1a", "us-east-1b", "us-east-1c"]
 
-    for i in range(10):
-        # add/remove the second to last node every 13 seconds
-        if i == 8 and int(time.time() / 13) % 2 == 0:
+    # Node layout per pool:
+    #   Masters: 3 nodes, 1 per AZ (indices 0-2)
+    #   Infra:   3-5 nodes, at least 1 per AZ (indices 3-7)
+    #   Workers: 3-7 nodes per AZ (indices 8+)
+    #
+    # Use cluster index to vary infra/worker counts across mock clusters
+    infra_per_az = [1, 1, 1]  # base: 1 per AZ = 3 total
+    if index >= 1:
+        infra_per_az[0] = 2   # 4 total for cluster 1+
+    if index >= 2:
+        infra_per_az[1] = 2   # 5 total for cluster 2+
+
+    worker_per_az = [
+        3 + hash_int((index + 1) * 101) % 5,  # 3-7 for AZ a
+        3 + hash_int((index + 1) * 202) % 5,  # 3-7 for AZ b
+        3 + hash_int((index + 1) * 303) % 5,  # 3-7 for AZ c
+    ]
+
+    # Build node list: (role, az_index)
+    node_specs = []
+
+    # Masters: 1 per AZ
+    for az_i in range(3):
+        node_specs.append(("master", az_i))
+
+    # Infra: variable per AZ
+    for az_i in range(3):
+        for _ in range(infra_per_az[az_i]):
+            node_specs.append(("infra", az_i))
+
+    # Workers: 3-7 per AZ
+    for az_i in range(3):
+        for _ in range(worker_per_az[az_i]):
+            node_specs.append(("worker", az_i))
+
+    for i, (role, az_i) in enumerate(node_specs):
+        # add/remove one worker node every 13 seconds for dynamism
+        if role == "worker" and i == len(node_specs) - 1 and int(time.time() / 13) % 2 == 0:
             continue
-        labels = {}
 
-        # Assign AZ based on node index (distribute across zones)
-        az = availability_zones[i % len(availability_zones)]
-        labels["topology.kubernetes.io/zone"] = az
+        labels = {}
+        labels["topology.kubernetes.io/zone"] = availability_zones[az_i]
 
-        # Assign node roles based on index for realistic pool distribution
-        # Nodes 0-2: master/control-plane nodes
-        # Nodes 3-4: infra nodes (some with worker role too for multi-role demo)
-        # Nodes 5-9: worker nodes
-        if i < 3:
-            # Master nodes
+        if role == "master":
             if index == 0:
                 labels["node-role.kubernetes.io/master"] = ""
                 labels["node-role.kubernetes.io/control-plane"] = ""
             elif index == 1:
                 labels["node-role.kubernetes.io/control-plane"] = ""
             else:
                 labels["kubernetes.io/role"] = "master"
-        elif i < 5:
-            # Infra nodes
+        elif role == "infra":
             labels["node-role.kubernetes.io/infra"] = ""
-            # Node 3 has both infra and worker roles (multi-role demo)
-            if i == 3:
-                labels["node-role.kubernetes.io/worker"] = ""
         else:
-            # Worker nodes
             labels["node-role.kubernetes.io/worker"] = ""
 
         pods = {}
@@ -158,10 +180,10 @@ def query_mock_cluster(cluster):
                 "allocatable": {"cpu": "7800m", "memory": "62Gi"},
             },
             "pods": pods,
-            # get data from containers (usage)
             "usage": {"cpu": f"{usage_cpu}m", "memory": f"{usage_memory}Mi"},
         }
         nodes[node["name"]] = node
+
     pod = generate_mock_pod(index, 11, index)
     unassigned_pods = {"{}/{}".format(pod["namespace"], pod["name"]): pod}
     return {