kodi
e4214858ac
- Containers kolom toont nu uitsluitend het numerieke aantal containers - Shared network namespace wordt bepaald via expliciete isShared check - 'shared' badge verplaatst van Containers kolom naar Flags kolom - Eerdere uitlijnings-experimenten en CSS overrides opgeschoond - Duidelijke scheiding aangebracht tussen metriek (aantal) en status (shared netns) Resultaat: semantisch correctere tabel, stabielere layout en betere leesbaarheid.
551 lines
18 KiB
JavaScript
551 lines
18 KiB
JavaScript
// webui/html/assets/js/tabs/networks.js
|
|
(function () {
|
|
// Gebruik gedeelde helpers uit index.html (staan op window in non-module scripts)
|
|
const apiGet = window.apiGet || (async (path) => {
|
|
const r = await fetch('/api' + path, { headers: { 'Accept': 'application/json' } });
|
|
if (!r.ok) {
|
|
const t = await r.text().catch(() => '');
|
|
throw new Error(`HTTP ${r.status} ${path}: ${t}`);
|
|
}
|
|
return r.json();
|
|
});
|
|
|
|
const esc = window.esc || ((s) => String(s)
|
|
.replaceAll('&', '&')
|
|
.replaceAll('<', '<')
|
|
.replaceAll('>', '>')
|
|
.replaceAll('"', '"')
|
|
.replaceAll("'", ''')
|
|
);
|
|
|
|
function cssId(s) {
|
|
return String(s).replaceAll(/[^a-zA-Z0-9_-]/g, '_');
|
|
}
|
|
|
|
async function fetchNetworksUsage() {
|
|
return apiGet('/networks/usage');
|
|
}
|
|
|
|
async function fetchNetworksList() {
|
|
// returns { networks: [...] }
|
|
return apiGet('/networks');
|
|
}
|
|
|
|
async function fetchNetworkInspect(name) {
|
|
return apiGet('/networks/' + encodeURIComponent(name));
|
|
}
|
|
|
|
const state = {
|
|
expanded: new Set(),
|
|
usage: null,
|
|
list: null,
|
|
inspectCache: new Map(),
|
|
filters: {
|
|
q: '',
|
|
connectedOnly: false,
|
|
hideDefaults: true,
|
|
sharedOnly: false,
|
|
sort: 'name_asc',
|
|
},
|
|
};
|
|
|
|
function toggleNetworkRow(name) {
|
|
if (state.expanded.has(name)) state.expanded.delete(name);
|
|
else state.expanded.add(name);
|
|
renderNetworks();
|
|
}
|
|
|
|
async function refresh() {
|
|
const statusEl = document.getElementById('networksStatus');
|
|
if (statusEl) statusEl.textContent = 'Bezig met laden...';
|
|
|
|
try {
|
|
const [usage, list] = await Promise.all([
|
|
fetchNetworksUsage(),
|
|
fetchNetworksList(),
|
|
]);
|
|
state.usage = usage;
|
|
state.list = list;
|
|
if (statusEl) statusEl.textContent = `Laatst geladen: ${new Date().toLocaleString()}`;
|
|
renderNetworksSummary();
|
|
renderNetworks();
|
|
} catch (e) {
|
|
console.error(e);
|
|
if (statusEl) statusEl.textContent = 'Fout: ' + (e?.message || e);
|
|
}
|
|
}
|
|
|
|
function computeNetworkStats() {
|
|
const totalNetworks = Array.isArray(state.list?.networks) ? state.list.networks.length : 0;
|
|
const byNetwork = state.usage?.byNetwork || {};
|
|
const usedNetworks = Object.keys(byNetwork).length;
|
|
|
|
let connectedContainers = 0;
|
|
for (const v of Object.values(byNetwork)) {
|
|
const cs = v?.containers;
|
|
if (Array.isArray(cs)) connectedContainers += cs.length;
|
|
}
|
|
|
|
const unusedNetworks = Math.max(0, totalNetworks - usedNetworks);
|
|
|
|
const byMeta = state.usage?.byContainerMeta || {};
|
|
let sharedNetns = 0;
|
|
for (const meta of Object.values(byMeta)) {
|
|
if (meta?.networkMode && String(meta.networkMode).startsWith('container:')) sharedNetns += 1;
|
|
}
|
|
|
|
return { totalNetworks, usedNetworks, unusedNetworks, connectedContainers, sharedNetns };
|
|
}
|
|
|
|
function renderNetworksSummary() {
|
|
const host = document.getElementById('networksSummary');
|
|
if (!host) return;
|
|
|
|
// beginstatus
|
|
if (!state.list && !state.usage) {
|
|
host.innerHTML = `
|
|
<div class="statCard"><div class="statValue">-</div><div class="statLabel">Netwerken</div></div>
|
|
<div class="statCard"><div class="statValue">-</div><div class="statLabel">Verbonden containers</div></div>
|
|
<div class="statCard"><div class="statValue">-</div><div class="statLabel">Ongebruikt</div></div>
|
|
<div class="statCard"><div class="statValue">-</div><div class="statLabel">Shared netns</div></div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const s = computeNetworkStats();
|
|
host.innerHTML = `
|
|
<div class="statCard">
|
|
<div class="statValue">${s.totalNetworks}</div>
|
|
<div class="statLabel">Netwerken</div>
|
|
<div class="statHint">${s.usedNetworks} in gebruik</div>
|
|
</div>
|
|
<div class="statCard">
|
|
<div class="statValue">${s.connectedContainers}</div>
|
|
<div class="statLabel">Verbonden containers</div>
|
|
</div>
|
|
<div class="statCard">
|
|
<div class="statValue">${s.unusedNetworks}</div>
|
|
<div class="statLabel">Ongebruikt</div>
|
|
</div>
|
|
<div class="statCard">
|
|
<div class="statValue">${s.sharedNetns}</div>
|
|
<div class="statLabel">Shared netns</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderNetworkUsersListHTML(netName, containers) {
|
|
if (!containers.length) {
|
|
return `<div class="muted">Geen containers gevonden op dit netwerk.</div>`;
|
|
}
|
|
|
|
const rows = containers.map(c => {
|
|
const cname = c.name || '?';
|
|
const pod = c.pod || '';
|
|
const shared = c.networkMode && String(c.networkMode).startsWith('container:');
|
|
const via = c.networkOwnerName ? `via ${c.networkOwnerName}` : (c.networkOwnerId ? `via ${c.networkOwnerId}` : '');
|
|
|
|
const badges = [];
|
|
if (pod) badges.push(`<span class="badge">pod: ${esc(pod)}</span>`);
|
|
if (shared) badges.push(`<span class="badge">shared netns</span>`);
|
|
if (via) badges.push(`<span class="badge">${esc(via)}</span>`);
|
|
|
|
return `<li>
|
|
<b>${esc(cname)}</b>
|
|
${badges.length ? `<div class="row gap" style="margin-top:4px; flex-wrap:wrap;">${badges.join('')}</div>` : ``}
|
|
</li>`;
|
|
}).join('');
|
|
|
|
return `<div>
|
|
<div class="muted" style="margin-bottom:6px;">Containers op <b>${esc(netName)}</b>:</div>
|
|
<ul style="margin:0; padding-left:18px;">${rows}</ul>
|
|
</div>`;
|
|
}
|
|
|
|
function renderNetworksRelationsHTML(usage) {
|
|
const byContainer = usage.byContainer || {};
|
|
const byMeta = usage.byContainerMeta || {};
|
|
|
|
const multi = Object.entries(byContainer)
|
|
.filter(([_, nets]) => Array.isArray(nets) && nets.length > 1)
|
|
.sort((a, b) => a[0].localeCompare(b[0]));
|
|
|
|
const shared = Object.entries(byMeta)
|
|
.filter(([_, meta]) => meta && meta.networkMode && String(meta.networkMode).startsWith('container:'))
|
|
.sort((a, b) => a[0].localeCompare(b[0]));
|
|
|
|
let html = '';
|
|
|
|
html += `<h3 style="margin:0 0 6px 0;">Containers met meerdere netwerken</h3>`;
|
|
if (!multi.length) {
|
|
html += `<div class="muted" style="margin-bottom:12px;">Geen.</div>`;
|
|
} else {
|
|
html += `<ul style="margin:0 0 12px 0; padding-left:18px;">` + multi.map(([name, nets]) =>
|
|
`<li><b>${esc(name)}</b> → ${esc(nets.join(', '))}</li>`
|
|
).join('') + `</ul>`;
|
|
}
|
|
|
|
html += `<h3 style="margin:0 0 6px 0;">Shared network namespace</h3>`;
|
|
if (!shared.length) {
|
|
html += `<div class="muted">Geen.</div>`;
|
|
} else {
|
|
html += `<ul style="margin:0; padding-left:18px;">` + shared.map(([name, meta]) => {
|
|
const ownerName = meta.networkOwnerName || '';
|
|
const ownerId = meta.networkOwnerId || '';
|
|
const owner = ownerName || ownerId || '?';
|
|
|
|
// Probeer netwerken van de owner te tonen (bv. ["pasta"] of ["none"])
|
|
const ownerNets = ownerName && Array.isArray(byContainer[ownerName]) ? byContainer[ownerName] : [];
|
|
const mode = ownerNets.find(n => n === 'pasta' || n === 'none' || n === 'host') || '';
|
|
|
|
const extra = mode ? ` <span class="muted">(mode: ${esc(mode)})</span>` : '';
|
|
|
|
return `<li><b>${esc(name)}</b> deelt netwerkstack met <b>${esc(owner)}</b>${extra}</li>`;
|
|
}).join('') + `</ul>`;
|
|
}
|
|
return html;
|
|
}
|
|
|
|
async function onInspectNetwork(name) {
|
|
const box = document.getElementById('inspectBox-' + cssId(name));
|
|
const status = document.getElementById('inspectStatus-' + cssId(name));
|
|
if (status) status.textContent = 'Inspect laden...';
|
|
|
|
try {
|
|
let data = state.inspectCache.get(name);
|
|
if (!data) {
|
|
data = await fetchNetworkInspect(name);
|
|
state.inspectCache.set(name, data);
|
|
}
|
|
if (box) {
|
|
box.style.display = '';
|
|
box.textContent = JSON.stringify(data, null, 2);
|
|
}
|
|
if (status) status.textContent = '';
|
|
} catch (e) {
|
|
console.error(e);
|
|
if (status) status.textContent = 'Fout: ' + (e?.message || e);
|
|
}
|
|
}
|
|
function isDefaultNetworkName(name) {
|
|
return name === 'podman' || name === 'podman-default-kube-network';
|
|
}
|
|
|
|
function fmtSubnets(net) {
|
|
// We proberen verschillende mogelijke shapes:
|
|
// - net.subnets: ["10.88.0.0/16"]
|
|
// - net.subnets: [{subnet:"10.88.0.0/16", gateway:"10.88.0.1"}]
|
|
// - net.ipam / net.ipamConfig: unknown => tonen we niets i.p.v. crash
|
|
const s = net?.subnets;
|
|
if (!s) return [];
|
|
if (Array.isArray(s)) {
|
|
return s.map(x => {
|
|
if (typeof x === 'string') return x;
|
|
if (x && typeof x === 'object') {
|
|
const subnet = x.subnet || x.Subnet || '';
|
|
const gw = x.gateway || x.Gateway || '';
|
|
return gw ? `${subnet} (gw ${gw})` : subnet;
|
|
}
|
|
return String(x);
|
|
}).filter(Boolean);
|
|
}
|
|
return [String(s)];
|
|
}
|
|
|
|
function flagsHTML(netName, netMeta) {
|
|
const badges = [];
|
|
|
|
if (isDefaultNetworkName(netName)) badges.push(`<span class="badge">default</span>`);
|
|
if (netMeta?.internal === true) badges.push(`<span class="badge">internal</span>`);
|
|
if (netMeta?.dnsEnabled === true) badges.push(`<span class="badge">dns</span>`);
|
|
if (netMeta?.ipv6Enabled === true) badges.push(`<span class="badge">ipv6</span>`);
|
|
|
|
// driver badge (maar niet voor mode, die tonen we in driver kolom)
|
|
if (netMeta?.driver) {
|
|
const d = String(netMeta.driver);
|
|
if (d !== 'mode') {
|
|
badges.push(`<span class="badge">${esc(d)}</span>`);
|
|
}
|
|
}
|
|
|
|
return badges.join(' ');
|
|
}
|
|
|
|
function buildNetworksViewModel() {
|
|
const list = Array.isArray(state.list?.networks) ? state.list.networks : [];
|
|
const usageByNetwork = state.usage?.byNetwork || {};
|
|
|
|
// 1) Start met de lijst uit /api/networks (leidend voor metadata/unused)
|
|
const items = list
|
|
.map(n => {
|
|
const name = n?.name || n?.Name || '';
|
|
const usage = usageByNetwork[name] || null;
|
|
const containers = Array.isArray(usage?.containers) ? usage.containers : [];
|
|
return {
|
|
name,
|
|
meta: n || {},
|
|
containers,
|
|
containerCount: containers.length,
|
|
};
|
|
})
|
|
.filter(x => x.name); // sanity
|
|
|
|
// 2) Voeg "usage-only" netwerken toe (zoals pasta/host/none) die niet in /api/networks staan
|
|
const seen = new Set(items.map(x => x.name));
|
|
for (const netName of Object.keys(usageByNetwork)) {
|
|
if (seen.has(netName)) continue;
|
|
|
|
const usage = usageByNetwork[netName] || null;
|
|
const containers = Array.isArray(usage?.containers) ? usage.containers : [];
|
|
|
|
// meta leeg, maar we geven driver=mode zodat het netjes in de UI komt
|
|
items.push({
|
|
name: netName,
|
|
meta: { driver: 'mode' },
|
|
containers,
|
|
containerCount: containers.length,
|
|
});
|
|
seen.add(netName);
|
|
}
|
|
|
|
return items;
|
|
}
|
|
|
|
function applyFiltersAndSort(vm) {
|
|
const q = (state.filters.q || '').trim().toLowerCase();
|
|
const connectedOnly = !!state.filters.connectedOnly;
|
|
const hideDefaults = !!state.filters.hideDefaults;
|
|
const sharedOnly = !!state.filters.sharedOnly;
|
|
|
|
const byMeta = state.usage?.byContainerMeta || {};
|
|
|
|
let out = vm.slice();
|
|
|
|
if (hideDefaults) {
|
|
out = out.filter(n => !isDefaultNetworkName(n.name));
|
|
}
|
|
|
|
if (connectedOnly) {
|
|
out = out.filter(n => n.containerCount > 0);
|
|
}
|
|
|
|
if (sharedOnly) {
|
|
const byMeta = state.usage?.byContainerMeta || {};
|
|
const byContainer = state.usage?.byContainer || {};
|
|
|
|
// alle containers met networkMode=container:...
|
|
const sharedEntries = Object.entries(byMeta)
|
|
.filter(([_, meta]) => String(meta?.networkMode ?? "").startsWith("container:"));
|
|
|
|
// welke netwerken zijn "relevant" voor shared netns?
|
|
const sharedNetworks = new Set();
|
|
|
|
// helper: voeg netwerken van containerKey toe via byContainer
|
|
function addNetworksFor(containerKey) {
|
|
const nets = byContainer[containerKey];
|
|
if (Array.isArray(nets)) {
|
|
for (const n of nets) sharedNetworks.add(n);
|
|
}
|
|
}
|
|
|
|
for (const [name, meta] of sharedEntries) {
|
|
addNetworksFor(name); // netwerken van de shared container zelf
|
|
|
|
// netwerken van de owner/infra (heel belangrijk in jouw geval)
|
|
const ownerName = meta?.networkOwnerName;
|
|
if (ownerName) addNetworksFor(ownerName);
|
|
}
|
|
|
|
out = out.filter(n => sharedNetworks.has(n.name));
|
|
}
|
|
|
|
if (q) {
|
|
out = out.filter(n => {
|
|
const nameHit = n.name.toLowerCase().includes(q);
|
|
const driver = (n.meta?.driver || '').toLowerCase();
|
|
const driverHit = driver.includes(q);
|
|
const subnets = fmtSubnets(n.meta).join(' ').toLowerCase();
|
|
const subnetHit = subnets.includes(q);
|
|
return nameHit || driverHit || subnetHit;
|
|
});
|
|
}
|
|
|
|
const sort = state.filters.sort || 'name_asc';
|
|
if (sort === 'containers_desc') {
|
|
out.sort((a, b) => (b.containerCount - a.containerCount) || a.name.localeCompare(b.name));
|
|
} else if (sort === 'driver_asc') {
|
|
out.sort((a, b) => String(a.meta?.driver || '').localeCompare(String(b.meta?.driver || '')) || a.name.localeCompare(b.name));
|
|
} else {
|
|
out.sort((a, b) => a.name.localeCompare(b.name));
|
|
}
|
|
|
|
return out;
|
|
}
|
|
|
|
function renderNetworks() {
|
|
const tbody = document.getElementById('networksTbody');
|
|
const rel = document.getElementById('networksRelations');
|
|
if (!tbody || !rel) return;
|
|
|
|
tbody.innerHTML = '';
|
|
rel.innerHTML = '';
|
|
|
|
const usage = state.usage;
|
|
if (!usage || !usage.byNetwork) {
|
|
tbody.innerHTML = `<tr><td colspan="6" class="muted">Geen data. Klik op Vernieuwen.</td></tr>`;
|
|
rel.innerHTML = `<div class="muted">Geen data.</div>`;
|
|
return;
|
|
}
|
|
|
|
const vmAll = buildNetworksViewModel();
|
|
const vm = applyFiltersAndSort(vmAll);
|
|
|
|
for (const row of vm) {
|
|
const netName = row.name;
|
|
const containers = row.containers;
|
|
const meta = row.meta;
|
|
|
|
const isOpen = state.expanded.has(netName);
|
|
const arrow = isOpen ? '▾' : '▸';
|
|
|
|
const driver = meta?.driver || meta?.Driver || '';
|
|
const subnets = fmtSubnets(meta);
|
|
const subnetsHtml = subnets.length
|
|
? `<div style="display:flex; flex-direction:column; gap:2px;">${subnets.slice(0, 2).map(s => `<span class="muted">${esc(s)}</span>`).join('')}${subnets.length > 2 ? `<span class="muted">+${subnets.length - 2}</span>` : ''}</div>`
|
|
: (
|
|
(meta?.driver === 'mode')
|
|
? `<span class="muted">network mode</span>`
|
|
: `<span class="muted">—</span>`
|
|
);
|
|
|
|
// 1. Controleer of dit een shared netwerk is
|
|
const isShared = containers.some(c => typeof c?.networkMode === 'string' && c.networkMode.startsWith('container:'));
|
|
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td><button class="btn small ghost" title="Open/dicht">${arrow}</button></td>
|
|
<td>
|
|
<div style="display:flex; align-items:center; gap:8px;">
|
|
<span>${esc(netName)}</span>
|
|
${isDefaultNetworkName(netName) ? `<span class="badge">default</span>` : ``}
|
|
</div>
|
|
</td>
|
|
<td>${driver
|
|
? (String(driver) === 'mode' ? `<span class="badge">MODE</span>` : esc(driver))
|
|
: `<span class="muted">—</span>`}
|
|
</td>
|
|
<td>${subnetsHtml}</td>
|
|
|
|
<td style="text-align:right;">
|
|
<span>${containers.length}</span>
|
|
</td>
|
|
|
|
<td>
|
|
<div class="row gap" style="flex-wrap:wrap;">
|
|
${isShared ? `<span class="badge">shared</span>` : ``}
|
|
${flagsHTML(netName, meta)}
|
|
</div>
|
|
</td>
|
|
`;
|
|
|
|
tr.querySelector('button').addEventListener('click', () => toggleNetworkRow(netName));
|
|
tbody.appendChild(tr);
|
|
|
|
if (isOpen) {
|
|
const tr2 = document.createElement('tr');
|
|
tr2.innerHTML = `
|
|
<td></td>
|
|
<td colspan="5">
|
|
<div style="padding:8px 0;">
|
|
${renderNetworkUsersListHTML(netName, containers)}
|
|
<div class="row gap" style="margin-top:8px;">
|
|
<button class="btn small" data-inspect="${esc(netName)}">Inspect details</button>
|
|
<span class="muted" id="inspectStatus-${cssId(netName)}"></span>
|
|
</div>
|
|
<pre class="code" id="inspectBox-${cssId(netName)}" style="display:none; margin-top:8px; max-height:260px; overflow:auto;"></pre>
|
|
</div>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(tr2);
|
|
|
|
const btn = tr2.querySelector('button[data-inspect]');
|
|
btn.addEventListener('click', async () => {
|
|
await onInspectNetwork(netName);
|
|
});
|
|
}
|
|
}
|
|
|
|
rel.innerHTML = renderNetworksRelationsHTML(usage);
|
|
}
|
|
|
|
function bindUiOnce() {
|
|
const btn = document.getElementById('networksRefreshBtn');
|
|
if (btn && !btn.dataset.bound) {
|
|
btn.dataset.bound = '1';
|
|
btn.addEventListener('click', refresh);
|
|
}
|
|
|
|
const search = document.getElementById('networksSearch');
|
|
const fConnected = document.getElementById('networksFilterConnected');
|
|
const fHideDefaults = document.getElementById('networksFilterHideDefaults');
|
|
const fShared = document.getElementById('networksFilterShared');
|
|
const sort = document.getElementById('networksSort');
|
|
|
|
function rerender() {
|
|
renderNetworks();
|
|
}
|
|
|
|
if (search && !search.dataset.bound) {
|
|
search.dataset.bound = '1';
|
|
search.addEventListener('input', () => {
|
|
state.filters.q = search.value || '';
|
|
rerender();
|
|
});
|
|
}
|
|
|
|
if (fConnected && !fConnected.dataset.bound) {
|
|
fConnected.dataset.bound = '1';
|
|
fConnected.addEventListener('change', () => {
|
|
state.filters.connectedOnly = !!fConnected.checked;
|
|
rerender();
|
|
});
|
|
}
|
|
|
|
if (fHideDefaults && !fHideDefaults.dataset.bound) {
|
|
fHideDefaults.dataset.bound = '1';
|
|
state.filters.hideDefaults = !!fHideDefaults.checked;
|
|
fHideDefaults.addEventListener('change', () => {
|
|
state.filters.hideDefaults = !!fHideDefaults.checked;
|
|
rerender();
|
|
});
|
|
}
|
|
|
|
if (fShared && !fShared.dataset.bound) {
|
|
fShared.dataset.bound = '1';
|
|
fShared.addEventListener('change', () => {
|
|
state.filters.sharedOnly = !!fShared.checked;
|
|
rerender();
|
|
});
|
|
}
|
|
|
|
if (sort && !sort.dataset.bound) {
|
|
sort.dataset.bound = '1';
|
|
sort.addEventListener('change', () => {
|
|
state.filters.sort = sort.value || 'name_asc';
|
|
rerender();
|
|
});
|
|
}
|
|
|
|
renderNetworksSummary();
|
|
}
|
|
|
|
// Expose minimal API
|
|
window.mvpNetworks = {
|
|
refresh,
|
|
state,
|
|
bindUiOnce,
|
|
};
|
|
|
|
// Bind when script loads (DOM is already mostly there because script is at end of body)
|
|
bindUiOnce();
|
|
})(); |