kodi/podman-mvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(containers): toon totale CPU/MEM per pod en onderscheid inactive vs stats-pauze

Browse Source
This commit is contained in:
kodi
2026-02-20 08:06:46 +01:00
parent 427d7b47a1
commit d18d0c0f77
1 changed files with 51 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/html/index.html
+50 -29
View File
@@ -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 || []);
@@ -863,41 +866,44 @@
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,10 +922,25 @@
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');
}
});
}