diff --git a/webui/html/index.html b/webui/html/index.html index 3ee54f6..c3eb0ad 100644 --- a/webui/html/index.html +++ b/webui/html/index.html @@ -626,6 +626,9 @@ const res = await api(`/pods/actions/${encodeURIComponent(action)}/${encodeURIComponent(name)}`, 'POST'); showModal(`Pod ${action}: ${name}`, JSON.stringify(res, null, 2)); await fetchPods(); + if (currentTab === 'containers') { + await fetchContainers(); + } } catch (e) { showModal(`Pod ${action} fout`, e.stack || e.message); } @@ -681,7 +684,7 @@ `; } - function renderContainersGrouped(list, tbody) { + function renderContainersGrouped(list, tbody, podStatus) { const groups = new Map(); for (const c of (list || [])) { const k = _podKey(c); @@ -689,6 +692,10 @@ groups.get(k).push(c); } + for (const podName of Object.keys(podStatus || {})) { + if (!groups.has(podName)) groups.set(podName, []); + } + const keys = Array.from(groups.keys()).sort((a, b) => { if (a === '(geen pod)' && b !== '(geen pod)') return 1; if (b === '(geen pod)' && a !== '(geen pod)') return -1; @@ -713,22 +720,24 @@ const isRealPod = (pod !== '(geen pod)'); const total = items.length; - const running = items.filter(x => { - const s = (x.Status || x.State || '').toLowerCase(); - return s === 'running'; - }).length; + let cls = 'muted'; + let label = '-'; - let cls = 'warn'; // default - let label = `${running}/${total}`; + if (total > 0) { + const running = items.filter(x => { + const s = (x.Status || x.State || '').toLowerCase(); + return s === 'running'; + }).length; - if (total === 0) { // edge case - cls = 'muted'; - } else if (running === total) { - cls = 'ok'; // groen - } else if (running === 0) { - cls = 'bad'; // rood + label = `${running}/${total}`; + if (running === total) cls = 'ok'; + else if (running === 0) cls = 'bad'; + else cls = 'warn'; } else { - cls = 'warn'; // oranje + const ps = String((podStatus && podStatus[pod]) || '').toLowerCase(); + if (ps === 'active') { cls = 'ok'; label = 'active'; } + else if (ps === 'inactive') { cls = 'bad'; label = 'inactive'; } + else { cls = 'muted'; label = ps || 'unknown'; } } html += ` @@ -796,12 +805,25 @@ } async function fetchContainers() { - const containers = await api('/containers-dashboard', 'GET'); - const list = Array.isArray(containers) ? containers : (containers?.containers || []); - document.getElementById('countContainers').textContent = list.length; - const tbody = document.getElementById('containersTbody'); - renderContainersGrouped(list, tbody); + const [containers, pods] = await Promise.all([ + api('/containers-dashboard', 'GET'), + api('/pods-dashboard', 'GET') + ]); + + const list = Array.isArray(containers) ? containers : (containers?.containers || []); + document.getElementById('countContainers').textContent = list.length; + + const podsList = Array.isArray(pods) ? pods : []; + const podStatus = {}; + for (const p of podsList) { + const n = p?.Name || p?.name; + if (!n) continue; + podStatus[n] = (p?.Status || p?.status || '').toLowerCase(); // "active"/"inactive"/... + } + + const tbody = document.getElementById('containersTbody'); + renderContainersGrouped(list, tbody, podStatus); } let containersStatsES = null;