From d18d0c0f77fb01a44c1dcb15598c4386584a1a3d Mon Sep 17 00:00:00 2001
From: kodi <kodi@lab.local>
Date: Fri, 20 Feb 2026 08:06:46 +0100
Subject: [PATCH] feat(containers): toon totale CPU/MEM per pod en onderscheid
 inactive vs stats-pauze

---
 webui/html/index.html | 81 +++++++++++++++++++++++++++----------------
 1 file changed, 51 insertions(+), 30 deletions(-)

diff --git a/webui/html/index.html b/webui/html/index.html
index 4e0731b..82426bd 100644
--- a/webui/html/index.html
+++ b/webui/html/index.html
@@ -229,6 +229,10 @@
     .pod-group-row:hover td {
       background: rgba(255,255,255,0.07);
     }
+    .stale {
+      opacity: 0.65;
+      font-style: italic;
+    }
   </style>
 </head>
 
@@ -770,8 +774,8 @@
           <td class="muted">-</td>
           <td>${isRealPod ? '<span class="btn small muted">pod</span>' : '<span class="muted">-</span>'}</td>
 
-          <td class="muted num" id="podcpu-${cssSafeId(pod)}">-</td>
-          <td class="muted num" id="podmem-${cssSafeId(pod)}">-</td>
+          <td class="muted num" id="podcpu-${cssSafeId(pod)}" data-podstatus="${esc((podStatus && podStatus[pod]) || '')}">-</td>
+          <td class="muted num" id="podmem-${cssSafeId(pod)}" data-podstatus="${esc((podStatus && podStatus[pod]) || '')}">-</td>
           <td class="mono">${esc(podPortsText)}</td>
           <td>
             ${isRealPod ? `
@@ -820,10 +824,9 @@
   }
 
   async function fetchContainers() {
-
-  const [containers, pods] = await Promise.all([
-    api('/containers-dashboard', 'GET'),
-    api('/pods-dashboard', 'GET')
+    const [containers, pods] = await Promise.all([
+      api('/containers-dashboard', 'GET'),
+      api('/pods-dashboard', 'GET')
   ]);
 
   const list = Array.isArray(containers) ? containers : (containers?.containers || []);
@@ -862,42 +865,45 @@
         if (!cname) continue;
 
         const key = cssSafeId(cname);
+        
+        const cpuPct = Number(st?.CPUPerc ?? st?.CPU ?? st?.AvgCPU ?? 0);
+        const memBytes = Number(st?.MemUsage ?? 0);
+        const memPct = Number(st?.MemPerc ?? 0);
+
 
         const pod = containersC2P.get(cname);
         if (pod) {
-          const cpuPct = Number(st?.CPUPerc ?? st?.CPU ?? st?.AvgCPU ?? 0);
-          const memBytes = Number(st?.MemUsage ?? 0);
-          const memPct = Number(st?.MemPerc ?? 0);
-
           podCpu.set(pod, (podCpu.get(pod) || 0) + cpuPct);
           podMem.set(pod, (podMem.get(pod) || 0) + memBytes);
           podMemPct.set(pod, (podMemPct.get(pod) || 0) + memPct);
         }
 
-        for (const [pod, cpuSum] of podCpu.entries()) {
-          const el = document.getElementById(`podcpu-${cssSafeId(pod)}`);
-          if (el) el.textContent = cpuSum.toFixed(2) + "%";
-        }
-
-        for (const [pod, memSum] of podMem.entries()) {
-          const el = document.getElementById(`podmem-${cssSafeId(pod)}`);
-          if (el) {
-            const memPct = podMemPct.get(pod) || 0;
-            el.textContent = `${formatBytes(memSum)} (${memPct.toFixed(1)}%)`;
-          }
-        }
-
         // CPU: jouw API geeft CPU als fractie (0.00384 -> 0.384%)
-        const cpuPct = Number(st?.CPUPerc ?? st?.CPU ?? st?.AvgCPU ?? 0);
         const cpuEl = document.getElementById(`cpu-${key}`);
         if (cpuEl) cpuEl.textContent = cpuPct.toFixed(2) + "%";
 
         // MEM: bytes + percentage
         const memEl = document.getElementById(`mem-${key}`);
         if (memEl) {
-          const mem = formatBytes(st?.MemUsage);
-          const memp = Number(st?.MemPerc ?? 0);
-          memEl.textContent = `${mem} (${memp.toFixed(1)}%)`;
+          const mem = formatBytes(memBytes);
+          memEl.textContent = `${mem} (${memPct.toFixed(1)}%)`;
+        }
+      }
+      // NA de container-loop: pod totals renderen
+      for (const [pod, cpuSum] of podCpu.entries()) {
+        const el = document.getElementById(`podcpu-${cssSafeId(pod)}`);
+        if (el) {
+          el.textContent = cpuSum.toFixed(2) + "%";
+          el.classList.remove('stale');
+        }
+      }
+
+      for (const [pod, memSum] of podMem.entries()) {
+        const el = document.getElementById(`podmem-${cssSafeId(pod)}`);
+        if (el) {
+          const mp = podMemPct.get(pod) || 0;
+          el.textContent = `${formatBytes(memSum)} (${mp.toFixed(1)}%)`;
+          el.classList.remove('stale');
         }
       }
     });
@@ -916,12 +922,27 @@
 
   function resetPodTotals() {
     document.querySelectorAll('[id^="podcpu-"]').forEach(el => {
-      el.textContent = '-';
+      const ps = String(el.getAttribute('data-podstatus') || '').toLowerCase();
+      if (ps === 'inactive') {
+        el.textContent = '-';
+        el.classList.remove('stale');
+      } else {
+        el.textContent = '—';
+        el.classList.add('stale');
+      }
     });
+
     document.querySelectorAll('[id^="podmem-"]').forEach(el => {
-      el.textContent = '-';
+      const ps = String(el.getAttribute('data-podstatus') || '').toLowerCase();
+      if (ps === 'inactive') {
+        el.textContent = '-';
+        el.classList.remove('stale');
+      } else {
+        el.textContent = '—';
+        el.classList.add('stale');
+      }
     });
-  }  
+  }
 
   async function containerInspect(name) {
     try {