698 lines
31 KiB
JavaScript
698 lines
31 KiB
JavaScript
// ------ helpers ------
|
|
const $ = (q)=>document.querySelector(q);
|
|
function safe(v){ return (v===undefined||v===null||v==='') ? '—' : String(v); }
|
|
function ensureArr(a){ return Array.isArray(a)?a:[]; }
|
|
function pct(p){ if(p==null) return '—'; return (p*100).toFixed(1)+'%'; }
|
|
function humanBytes(n){ if(n==null) return '—'; const u=['B','KiB','MiB','GiB','TiB','PiB']; let i=0,x=+n; while(x>=1024&&i<u.length-1){x/=1024;i++;} return x.toFixed(1)+' '+u[i]; }
|
|
function badge(txt, kind){
|
|
const cls={ok:'bg-success-subtle text-success-emphasis',warn:'bg-warning-subtle text-warning-emphasis',
|
|
err:'bg-danger-subtle text-danger-emphasis',info:'bg-info-subtle text-info-emphasis',
|
|
dark:'bg-secondary-subtle text-secondary-emphasis'}[kind||'dark'];
|
|
return `<span class="badge rounded-pill ${cls}">${safe(txt)}</span>`;
|
|
}
|
|
function rowHTML(cols, attrs=''){ return `<tr ${attrs}>${cols.map(c=>`<td>${c??'—'}</td>`).join('')}</tr>`; }
|
|
function setRows(tbody, rows){ tbody.innerHTML = rows.length ? rows.join('') : rowHTML(['—']); }
|
|
function fmtSeconds(s){
|
|
if(s==null) return '—';
|
|
s = Math.floor(s);
|
|
const d = Math.floor(s/86400); s%=86400;
|
|
const h = Math.floor(s/3600); s%=3600;
|
|
const m = Math.floor(s/60); s%=60;
|
|
const parts = [h.toString().padStart(2,'0'), m.toString().padStart(2,'0'), s.toString().padStart(2,'0')].join(':');
|
|
return d>0 ? `${d}d ${parts}` : parts;
|
|
}
|
|
function parseNetConf(val){
|
|
const out={}; if(!val) return out;
|
|
val.split(',').forEach(kv=>{
|
|
const [k,v] = kv.split('=');
|
|
if(k && v!==undefined) out[k.trim()]=v.trim();
|
|
});
|
|
return out;
|
|
}
|
|
function parseVmNetworks(config){
|
|
const nets=[];
|
|
for(const [k,v] of Object.entries(config||{})){
|
|
const m = k.match(/^net(\d+)$/);
|
|
if(m){ nets.push({idx:+m[1], raw:v, ...parseNetConf(v)}); }
|
|
}
|
|
nets.sort((a,b)=>a.idx-b.idx);
|
|
return nets;
|
|
}
|
|
function kvGrid(obj, keys, titleMap={}){
|
|
return `<div class="row row-cols-1 row-cols-md-2 g-2">
|
|
${keys.map(k=>`
|
|
<div class="col">
|
|
<div class="card border-0"><div class="card-body p-2">
|
|
<div class="text-muted small">${titleMap[k]||k}</div>
|
|
<div class="fw-semibold">${safe(obj[k])}</div>
|
|
</div></div>
|
|
</div>`).join('')}
|
|
</div>`;
|
|
}
|
|
|
|
// ------ DOM refs ------
|
|
const nodeInput=$('#node'), btnEnable=$('#btnEnable'), btnDisable=$('#btnDisable'), btnToggleAll=$('#btnToggleAll');
|
|
const btnRefresh=$('#btnRefresh'), btnAuto=$('#btnAuto'), selInterval=$('#selInterval');
|
|
const healthDot=$('#healthDot'), healthTitle=$('#healthTitle'), healthSub=$('#healthSub');
|
|
const qSummary=$('#q-summary'), qCardsWrap=$('#q-cards'), unitsBox=$('#units'), replBox=$('#repl');
|
|
const tblHaRes=$('#ha-res tbody'), tblHaStatus=$('#ha-status tbody'), tblNodes=$('#nodes tbody'), tblNonHA=$('#nonha tbody');
|
|
const pvecmPre=$('#pvecm'), cfgtoolPre=$('#cfgtool'), footer=$('#footer');
|
|
|
|
// ------ actions ------
|
|
async function callAction(act){
|
|
const node = nodeInput.value || '';
|
|
const r = await fetch('/api/'+act,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({node})});
|
|
const d = await r.json(); alert(d.ok?'OK':('ERROR: '+(d.error||'unknown')));
|
|
}
|
|
btnEnable.onclick=()=>callAction('enable');
|
|
btnDisable.onclick=()=>callAction('disable');
|
|
btnToggleAll.onclick=()=>{
|
|
document.querySelectorAll('.accordion-collapse').forEach(el=>{
|
|
const bs = bootstrap.Collapse.getOrCreateInstance(el,{toggle:false});
|
|
el.classList.contains('show')?bs.hide():bs.show();
|
|
});
|
|
};
|
|
|
|
// ------ refresh control ------
|
|
let REF_TIMER = null;
|
|
async function fetchSnapshot(){
|
|
const r = await fetch('/api/info?node='+encodeURIComponent(nodeInput.value||''));
|
|
return await r.json();
|
|
}
|
|
async function doRefresh(){
|
|
const d = await fetchSnapshot();
|
|
renderSnap(d);
|
|
if (!doRefresh.didNonHA){ await renderNonHA(); doRefresh.didNonHA=true; }
|
|
}
|
|
btnRefresh.onclick = doRefresh;
|
|
btnAuto.onclick = ()=>{
|
|
if(REF_TIMER){
|
|
clearInterval(REF_TIMER); REF_TIMER=null;
|
|
btnAuto.textContent='OFF';
|
|
btnAuto.classList.remove('btn-success'); btnAuto.classList.add('btn-outline-success');
|
|
selInterval.disabled = true;
|
|
}else{
|
|
const iv = parseInt(selInterval.value||'30000',10);
|
|
REF_TIMER = setInterval(doRefresh, iv);
|
|
btnAuto.textContent='ON';
|
|
btnAuto.classList.remove('btn-outline-success'); btnAuto.classList.add('btn-success');
|
|
selInterval.disabled = false;
|
|
}
|
|
};
|
|
selInterval.onchange = ()=>{
|
|
if(REF_TIMER){
|
|
clearInterval(REF_TIMER);
|
|
REF_TIMER = setInterval(doRefresh, parseInt(selInterval.value||'30000',10));
|
|
}
|
|
};
|
|
|
|
// ------ VM detail API ------
|
|
async function fetchVmDetail(sid){
|
|
const r = await fetch('/api/vm?sid='+encodeURIComponent(sid));
|
|
return await r.json();
|
|
}
|
|
// ------ Node detail API ------
|
|
async function fetchNodeDetail(name){
|
|
const r = await fetch('/api/node?name='+encodeURIComponent(name));
|
|
return await r.json();
|
|
}
|
|
|
|
// ------ VM detail card ------
|
|
function renderVmDetailCard(d){
|
|
const meta = d.meta || {};
|
|
const cur = d.current || {};
|
|
const cfg = d.config || {};
|
|
const ag = d.agent || {};
|
|
const agInfo= ag.info || null;
|
|
const agOS = ag.osinfo && ag.osinfo.result ? ag.osinfo.result : null;
|
|
const agIfs = ag.ifaces && ag.ifaces.result ? ag.ifaces.result : null;
|
|
|
|
const statusBadge = /running|online|started/i.test(meta.status||cur.status||'')
|
|
? badge(meta.status || cur.status || 'running','ok')
|
|
: badge(meta.status || cur.status || 'stopped','err');
|
|
|
|
const maxmem = cur.maxmem ?? (cfg.memory? Number(cfg.memory)*1024*1024 : null);
|
|
const used = cur.mem ?? null;
|
|
const free = (maxmem!=null && used!=null) ? Math.max(0, maxmem-used) : null;
|
|
const balloonEnabled = (cfg.balloon !== undefined) ? (Number(cfg.balloon)!==0) : (cur.balloon !== undefined && Number(cur.balloon)!==0);
|
|
const binfo = cur.ballooninfo || null;
|
|
|
|
const nets = parseVmNetworks(cfg);
|
|
|
|
let guestName = agOS && (agOS.name || agOS.pretty_name) || (agInfo && agInfo.version) || '';
|
|
let guestIPs = [];
|
|
if (Array.isArray(agIfs)){
|
|
agIfs.forEach(i=>{
|
|
(i['ip-addresses']||[]).forEach(ip=>{
|
|
const a = ip['ip-address']; if (a && !a.startsWith('fe80')) guestIPs.push(a);
|
|
});
|
|
});
|
|
}
|
|
|
|
const nicStats = cur.nics || {};
|
|
const nicRows = Object.keys(nicStats).sort().map(ifn=>{
|
|
const ns = nicStats[ifn]||{};
|
|
return rowHTML([ifn, humanBytes(ns.netin||0), humanBytes(ns.netout||0)]);
|
|
});
|
|
|
|
const bstat = cur.blockstat || {};
|
|
const bRows = Object.keys(bstat).sort().map(dev=>{
|
|
const s=bstat[dev]||{};
|
|
return rowHTML([
|
|
dev, humanBytes(s.rd_bytes||0), safe(s.rd_operations||0),
|
|
humanBytes(s.wr_bytes||0), safe(s.wr_operations||0),
|
|
safe(s.flush_operations||0), humanBytes(s.wr_highest_offset||0)
|
|
]);
|
|
});
|
|
|
|
const ha = cur.ha || {};
|
|
const haBadge = ha.state ? (/started/i.test(ha.state)?badge(ha.state,'ok'):badge(ha.state,'warn')) : badge('—','dark');
|
|
|
|
const sysCards = {
|
|
'QMP status': cur.qmpstatus,
|
|
'QEMU': cur['running-qemu'],
|
|
'Machine': cur['running-machine'],
|
|
'PID': cur.pid,
|
|
'Pressure CPU (some/full)': `${safe(cur.pressurecpusome)}/${safe(cur.pressurecpufull)}`,
|
|
'Pressure IO (some/full)': `${safe(cur.pressureiosome)}/${safe(cur.pressureiofull)}`,
|
|
'Pressure MEM (some/full)': `${safe(cur.pressurememorysome)}/${safe(cur.pressurememoryfull)}`
|
|
};
|
|
|
|
const head = `
|
|
<div class="d-flex flex-wrap align-items-center gap-3 mb-2">
|
|
<div class="fw-bold">${meta.name || cfg.name || d.sid}</div>
|
|
<div class="text-muted small">${(d.type||'').toUpperCase()} / VMID ${d.vmid} @ ${d.node}</div>
|
|
<div class="vr"></div>
|
|
<div>${statusBadge}</div>
|
|
${meta.hastate ? `<div class="vr"></div><div class="small">HA: ${badge(meta.hastate, /started/i.test(meta.hastate)?'ok':'warn')}</div>` : ''}
|
|
${ha.state ? `<div class="vr"></div><div class="small">HA runtime: ${haBadge}</div>` : ''}
|
|
</div>`;
|
|
|
|
const quick = `
|
|
<div class="row row-cols-2 row-cols-md-4 g-2">
|
|
<div class="col"><div class="card border-0"><div class="card-body p-2">
|
|
<div class="text-muted small">CPU</div><div class="fw-semibold">${cur.cpu !== undefined ? (cur.cpu*100).toFixed(1)+'%' : '—'}</div>
|
|
<div class="small text-muted">vCPUs: ${safe(cur.cpus ?? cfg.cores ?? cfg.sockets)}</div>
|
|
</div></div></div>
|
|
<div class="col"><div class="card border-0"><div class="card-body p-2">
|
|
<div class="text-muted small">Memory (used/free/total)</div>
|
|
<div class="fw-semibold">${
|
|
(used!=null && maxmem!=null)
|
|
? `${humanBytes(used)} / ${humanBytes(free)} / ${humanBytes(maxmem)}`
|
|
: '—'
|
|
}</div>
|
|
<div class="small mt-1">Ballooning: ${balloonEnabled ? badge('enabled','ok') : badge('disabled','err')}</div>
|
|
${binfo ? `<div class="small text-muted mt-1">Balloon actual: ${humanBytes(binfo.actual)} | guest free: ${humanBytes(binfo.free_mem)} | guest total: ${humanBytes(binfo.total_mem)}</div>` : ''}
|
|
</div></div></div>
|
|
<div class="col"><div class="card border-0"><div class="card-body p-2">
|
|
<div class="text-muted small">Disk (used/total)</div>
|
|
<div class="fw-semibold">${(cur.disk!=null && cur.maxdisk!=null) ? `${humanBytes(cur.disk)} / ${humanBytes(cur.maxdisk)}` : '—'}</div>
|
|
<div class="small text-muted mt-1">R: ${humanBytes(cur.diskread||0)} | W: ${humanBytes(cur.diskwrite||0)}</div>
|
|
</div></div></div>
|
|
<div class="col"><div class="card border-0"><div class="card-body p-2">
|
|
<div class="text-muted small">Uptime</div><div class="fw-semibold">${fmtSeconds(cur.uptime)}</div>
|
|
<div class="small text-muted mt-1">Tags: ${safe(cfg.tags||meta.tags||'—')}</div>
|
|
</div></div></div>
|
|
</div>`;
|
|
|
|
const netRows = (parseVmNetworks(cfg)).map(n=>{
|
|
const br = n.bridge || n.br || '—';
|
|
const mdl = n.model || n.type || (n.raw?.split(',')[0]?.split('=')[0]) || 'virtio';
|
|
const mac = n.hwaddr || n.mac || (n.raw?.match(/([0-9A-Fa-f]{2}:){5}[0-9A-Fa-f]{2}/)?.[0] || '—');
|
|
const vlan = n.tag || n.vlan || '—';
|
|
const fw = (n.firewall==='1') ? badge('on','warn') : badge('off','dark');
|
|
return rowHTML([`net${n.idx}`, mdl, br, vlan, mac, fw]);
|
|
});
|
|
const netTable = `
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-striped align-middle table-nowrap">
|
|
<thead><tr><th>IF</th><th>Model</th><th>Bridge</th><th>VLAN</th><th>MAC</th><th>FW</th></tr></thead>
|
|
<tbody>${netRows.length?netRows.join(''):rowHTML(['—','—','—','—','—','—'])}</tbody>
|
|
</table>
|
|
</div>`;
|
|
|
|
const nicLive = `
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-striped align-middle table-nowrap">
|
|
<thead><tr><th>TAP</th><th>RX</th><th>TX</th></tr></thead>
|
|
<tbody>${nicRows.length?nicRows.join(''):rowHTML(['—','—','—'])}</tbody>
|
|
</table>
|
|
</div>`;
|
|
|
|
const blkTable = `
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-striped align-middle table-nowrap">
|
|
<thead><tr><th>Device</th><th>Read bytes</th><th>Read ops</th><th>Write bytes</th><th>Write ops</th><th>Flush ops</th><th>Highest offset</th></tr></thead>
|
|
<tbody>${bRows.length?bRows.join(''):rowHTML(['—','—','—','—','—','—','—'])}</tbody>
|
|
</table>
|
|
</div>`;
|
|
|
|
const agentSummary = (agInfo||agOS||guestIPs.length)
|
|
? `<div class="small">
|
|
${agOS ? `<div>Guest OS: <strong>${safe(guestName)}</strong></div>`:''}
|
|
${guestIPs.length ? `<div>Guest IPs: ${guestIPs.map(ip=>badge(ip,'info')).join(' ')}</div>`:''}
|
|
${agInfo ? `<div>Agent: ${badge('present','ok')}</div>`:`<div>Agent: ${badge('not available','err')}</div>`}
|
|
</div>`
|
|
: '<div class="text-muted small">No guest agent data</div>';
|
|
|
|
const cfgFacts = {
|
|
'BIOS': cfg.bios, 'UEFI/EFI disk': cfg.efidisk0 ? 'yes' : 'no',
|
|
'CPU type': cfg.cpu, 'Sockets': cfg.sockets, 'Cores': cfg.cores, 'NUMA': cfg.numa,
|
|
'On boot': cfg.onboot ? 'yes' : 'no', 'OS type': cfg.ostype, 'SCSI hw': cfg.scsihw
|
|
};
|
|
|
|
// Collapsible raw JSON
|
|
const rawId = `raw-${d.type}-${d.vmid}`;
|
|
const rawBtn = `
|
|
<button class="btn btn-sm btn-outline-secondary mt-3" type="button"
|
|
data-bs-toggle="collapse" data-bs-target="#${rawId}">
|
|
Show raw JSON
|
|
</button>`;
|
|
const rawBox = `
|
|
<div id="${rawId}" class="collapse mt-2">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#rt-${d.vmid}" type="button">Runtime</button></li>
|
|
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#cfg-${d.vmid}" type="button">Config</button></li>
|
|
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#agt-${d.vmid}" type="button">Agent</button></li>
|
|
</ul>
|
|
<div class="tab-content border-top pt-3">
|
|
<div class="tab-pane fade show active" id="rt-${d.vmid}"><pre class="small mb-0">${JSON.stringify(cur, null, 2)}</pre></div>
|
|
<div class="tab-pane fade" id="cfg-${d.vmid}"><pre class="small mb-0">${JSON.stringify(cfg, null, 2)}</pre></div>
|
|
<div class="tab-pane fade" id="agt-${d.vmid}"><pre class="small mb-0">${JSON.stringify(ag, null, 2)}</pre></div>
|
|
</div>
|
|
</div>`;
|
|
|
|
return `
|
|
${head}
|
|
${quick}
|
|
|
|
<div class="mt-3">
|
|
<div class="fw-semibold mb-1">Network (config)</div>
|
|
${netTable}
|
|
<div class="fw-semibold mt-3 mb-1">Network (live)</div>
|
|
${nicLive}
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<div class="fw-semibold mb-1">Disks (block statistics)</div>
|
|
${blkTable}
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<div class="fw-semibold mb-1">System / QEMU</div>
|
|
${kvGrid(sysCards, Object.keys(sysCards))}
|
|
</div>
|
|
|
|
<div class="mt-3 mb-1"><div class="fw-semibold">Config facts</div>${kvGrid(cfgFacts, Object.keys(cfgFacts))}</div>
|
|
|
|
<div class="mt-2">${agentSummary}</div>
|
|
|
|
${rawBtn}
|
|
${rawBox}
|
|
`;
|
|
}
|
|
|
|
// ------ Node detail card ------
|
|
function renderNodeDetailCard(d){
|
|
const st = d.status || {};
|
|
const ver = d.version || {};
|
|
const tm = d.time || {};
|
|
const svcs = ensureArr(d.services);
|
|
const netcfg = ensureArr(d.network_cfg);
|
|
const netstat = ensureArr(d.netstat);
|
|
const disks = ensureArr(d.disks);
|
|
const sub = d.subscription || {};
|
|
|
|
// robust online detection
|
|
const isOn = /online|running/i.test(st.status||'') ||
|
|
/online/i.test(st.hastate||'') ||
|
|
(st.uptime>0) ||
|
|
(st.cpu!=null && st.maxcpu!=null) ||
|
|
(st.memory && st.memory.total>0);
|
|
const statusTxt = isOn ? 'online' : (st.status||'offline');
|
|
const sB = isOn ? badge(statusTxt,'ok') : badge(statusTxt,'err');
|
|
|
|
const mem = st.memory || {};
|
|
const root = st.rootfs || {};
|
|
const load = st.loadavg || '';
|
|
|
|
const top = `
|
|
<div class="d-flex flex-wrap align-items-center gap-3 mb-2">
|
|
<div class="fw-bold">${safe(d.node)}</div>
|
|
<div class="vr"></div>
|
|
<div>${sB}</div>
|
|
<div class="vr"></div>
|
|
<div class="small text-muted">CPU: ${pct(st.cpu)}</div>
|
|
<div class="small text-muted">Load: ${safe(load)}</div>
|
|
<div class="small text-muted">Uptime: ${fmtSeconds(st.uptime)}</div>
|
|
</div>`;
|
|
|
|
const memCard = `
|
|
<div class="row row-cols-2 row-cols-md-4 g-2">
|
|
<div class="col"><div class="card border-0"><div class="card-body p-2">
|
|
<div class="text-muted small">Memory</div>
|
|
<div class="fw-semibold">${
|
|
(mem.used!=null && mem.total!=null) ? `${humanBytes(mem.used)} / ${humanBytes(mem.total)} (${pct(mem.used/mem.total)})` : '—'
|
|
}</div>
|
|
</div></div></div>
|
|
<div class="col"><div class="card border-0"><div class="card-body p-2">
|
|
<div class="text-muted small">RootFS</div>
|
|
<div class="fw-semibold">${
|
|
(root.used!=null && root.total!=null) ? `${humanBytes(root.used)} / ${humanBytes(root.total)} (${pct(root.used/root.total)})` : '—'
|
|
}</div>
|
|
</div></div></div>
|
|
<div class="col"><div class="card border-0"><div class="card-body p-2">
|
|
<div class="text-muted small">Kernel / QEMU</div>
|
|
<div class="fw-semibold">${safe(ver.kernel || (ver['release']||''))} / ${safe(ver.qemu||ver['running-qemu']||'')}</div>
|
|
</div></div></div>
|
|
<div class="col"><div class="card border-0"><div class="card-body p-2">
|
|
<div class="text-muted small">Time</div>
|
|
<div class="fw-semibold">${safe(tm.localtime)} ${tm.timezone?`(${tm.timezone})`:''}</div>
|
|
</div></div></div>
|
|
</div>`;
|
|
|
|
// --- NORMALIZE service names + build badge
|
|
const svcMap = {};
|
|
svcs.forEach(s => {
|
|
const raw = (s && s.name) ? s.name : '';
|
|
const key = raw.replace(/\.service$/,''); // normalize
|
|
const st = (s && (s.state || s.active)) || '';
|
|
svcMap[key] = st;
|
|
});
|
|
function svcBadge(name){
|
|
const st = String(svcMap[name]||'').toLowerCase();
|
|
return (/running|active/.test(st)) ? badge('active','ok') :
|
|
(st ? badge(st,'err') : badge('inactive','err'));
|
|
}
|
|
const svcTable = `
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-striped align-middle table-nowrap">
|
|
<thead><tr><th>Service</th><th>State</th><th>Service</th><th>State</th><th>Service</th><th>State</th></tr></thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>watchdog-mux</strong></td><td>${svcBadge('watchdog-mux')}</td>
|
|
<td><strong>pve-ha-crm</strong></td><td>${svcBadge('pve-ha-crm')}</td>
|
|
<td><strong>pve-ha-lrm</strong></td><td>${svcBadge('pve-ha-lrm')}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>`;
|
|
|
|
// Network config
|
|
const netRows = netcfg.map(n=>{
|
|
return rowHTML([safe(n.iface||n.ifname), safe(n.type), safe(n.method||n.autostart), safe(n.bridge_ports||n.address||'—'), safe(n.cidr||n.netmask||'—'), safe(n.comments||'')]);
|
|
});
|
|
const netCfgTable = `
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-striped align-middle table-nowrap">
|
|
<thead><tr><th>IF</th><th>Type</th><th>Method</th><th>Ports/Address</th><th>Netmask/CIDR</th><th>Comment</th></tr></thead>
|
|
<tbody>${netRows.length?netRows.join(''):rowHTML(['—','—','—','—','—','—'])}</tbody>
|
|
</table>
|
|
</div>`;
|
|
|
|
// Netstat live
|
|
const nsRows = netstat.map(x=> rowHTML([safe(x.dev||x.iface), humanBytes(x.rx_bytes||x['receive-bytes']||0), humanBytes(x.tx_bytes||x['transmit-bytes']||0)]));
|
|
const netLiveTable = `
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-striped align-middle table-nowrap">
|
|
<thead><tr><th>IF</th><th>RX</th><th>TX</th></tr></thead>
|
|
<tbody>${nsRows.length?nsRows.join(''):rowHTML(['—','—','—'])}</tbody>
|
|
</table>
|
|
</div>`;
|
|
|
|
// Disks
|
|
const diskRows = disks.map(dv=> rowHTML([safe(dv.devpath||dv.kname||dv.dev), safe(dv.model), safe(dv.size?humanBytes(dv.size):'—'), safe(dv.health||dv.wearout||'—'), safe(dv.serial||'—')]));
|
|
const diskTable = `
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-striped align-middle table-nowrap">
|
|
<thead><tr><th>Device</th><th>Model</th><th>Size</th><th>Health</th><th>Serial</th></tr></thead>
|
|
<tbody>${diskRows.length?diskRows.join(''):rowHTML(['—','—','—','—','—'])}</tbody>
|
|
</table>
|
|
</div>`;
|
|
|
|
// Subscription
|
|
const subBox = `
|
|
<div class="small">
|
|
<div>Status: ${badge(safe(sub.status||'unknown'), /active|valid/i.test(sub.status||'')?'ok':'warn')}</div>
|
|
${sub.productname?`<div>Product: <strong>${safe(sub.productname)}</strong></div>`:''}
|
|
${sub.message?`<div class="text-muted">${safe(sub.message)}</div>`:''}
|
|
</div>`;
|
|
|
|
// Collapsible raw JSON
|
|
const rawId = `raw-node-${safe(d.node)}`;
|
|
const rawBtn = `
|
|
<button class="btn btn-sm btn-outline-secondary mt-3" type="button"
|
|
data-bs-toggle="collapse" data-bs-target="#${rawId}">
|
|
Show raw JSON
|
|
</button>`;
|
|
const rawBox = `
|
|
<div id="${rawId}" class="collapse mt-2">
|
|
<pre class="small mb-0">${JSON.stringify(d, null, 2)}</pre>
|
|
</div>`;
|
|
|
|
return `
|
|
${top}
|
|
${memCard}
|
|
|
|
<div class="mt-3">
|
|
<div class="fw-semibold mb-1">HA services</div>
|
|
${svcTable}
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<div class="fw-semibold mb-1">Network (config)</div>
|
|
${netCfgTable}
|
|
<div class="fw-semibold mt-3 mb-1">Network (live)</div>
|
|
${netLiveTable}
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<div class="fw-semibold mb-1">Disks</div>
|
|
${diskTable}
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<div class="fw-semibold mb-1">Subscription</div>
|
|
${subBox}
|
|
</div>
|
|
|
|
${rawBtn}
|
|
${rawBox}
|
|
`;
|
|
}
|
|
|
|
// ------ Sections ------
|
|
function setHealth(ok, vq, unitsActive){
|
|
healthDot.classList.toggle('ok',!!ok);
|
|
healthDot.classList.toggle('bad',!ok);
|
|
healthTitle.textContent = ok ? 'HA: OK' : 'HA: PROBLEM';
|
|
healthSub.textContent = `Quorate=${String(vq.quorate)} | units=${unitsActive?'active':'inactive'} | members=${safe(vq.members)} | quorum=${safe(vq.quorum)}/${safe(vq.expected)}`;
|
|
}
|
|
|
|
function renderClusterCards(arr){
|
|
const a = ensureArr(arr); qCardsWrap.innerHTML='';
|
|
if(!a.length){ qCardsWrap.innerHTML = badge('No data','dark'); return; }
|
|
const cluster = a.find(x=>x.type==='cluster')||{};
|
|
const qB = cluster.quorate ? badge('Quorate: yes','ok') : badge('Quorate: no','err');
|
|
qCardsWrap.insertAdjacentHTML('beforeend', `
|
|
<div class="col-12">
|
|
<div class="card border-0 shadow-sm"><div class="card-body d-flex flex-wrap align-items-center gap-3">
|
|
<div class="fw-bold">${safe(cluster.name)}</div>
|
|
<div class="text-muted small">id: ${safe(cluster.id)}</div><div class="vr"></div>
|
|
<div>${qB}</div><div class="vr"></div>
|
|
<div class="small">nodes: <strong>${safe(cluster.nodes)}</strong></div>
|
|
<div class="small">version: <strong>${safe(cluster.version)}</strong></div>
|
|
</div></div>
|
|
</div>`);
|
|
const nodes = a.filter(x=>x.type==='node');
|
|
const rows = nodes.map(n=>{
|
|
const online = n.online ? badge('online','ok') : badge('offline','err');
|
|
const local = n.local ? ' '+badge('local','info') : '';
|
|
return rowHTML([safe(n.name), online+local, safe(n.ip), safe(n.nodeid), safe(n.level)]);
|
|
});
|
|
qCardsWrap.insertAdjacentHTML('beforeend', `
|
|
<div class="col-12"><div class="card border-0"><div class="card-body table-responsive pt-2">
|
|
<table class="table table-sm table-striped align-middle table-nowrap">
|
|
<thead><tr><th>Node</th><th>Status</th><th>IP</th><th>NodeID</th><th>Level</th></tr></thead>
|
|
<tbody>${rows.join('')}</tbody>
|
|
</table>
|
|
</div></div></div>`);
|
|
}
|
|
|
|
function renderUnits(units){
|
|
unitsBox.innerHTML='';
|
|
if(!units || !Object.keys(units).length){ unitsBox.innerHTML=badge('No data','dark'); return; }
|
|
const map={active:'ok',inactive:'err',failed:'err',activating:'warn'};
|
|
Object.entries(units).forEach(([k,v])=> unitsBox.insertAdjacentHTML('beforeend', `<span class="me-2">${badge(k,map[v]||'dark')}</span>`));
|
|
}
|
|
|
|
function parsePveSr(text){
|
|
const lines=(text||'').split('\n').map(s=>s.trim()).filter(Boolean), out=[];
|
|
for(const ln of lines){
|
|
if(ln.startsWith('JobID')) continue;
|
|
const m=ln.match(/^(\S+)\s+(\S+)\s+(\S+)\s+(\S+)\s+(\S+)\s+(\S+)\s+(\d+)\s+(\S+)$/);
|
|
if(m) out.push({job:m[1],enabled:m[2],target:m[3],last:m[4],next:m[5],dur:m[6],fail:+m[7],state:m[8]});
|
|
} return out;
|
|
}
|
|
function renderReplication(text){
|
|
const arr=parsePveSr(text);
|
|
if(!arr.length){ replBox.innerHTML='<span class="text-muted small">No replication jobs</span>'; return; }
|
|
const rows=arr.map(x=>{
|
|
const en=/^yes$/i.test(x.enabled)?badge('Yes','ok'):badge('No','err');
|
|
const st=/^ok$/i.test(x.state)?badge(x.state,'ok'):badge(x.state,'err');
|
|
const fc=x.fail>0?badge(String(x.fail),'err'):badge(String(x.fail),'ok');
|
|
return rowHTML([x.job,en,x.target,x.last,x.next,x.dur,fc,st]);
|
|
});
|
|
replBox.innerHTML=`<div class="table-responsive"><table class="table table-sm table-striped align-middle table-nowrap">
|
|
<thead><tr><th>JobID</th><th>Enabled</th><th>Target</th><th>LastSync</th><th>NextSync</th><th>Duration</th><th>FailCount</th><th>State</th></tr></thead>
|
|
<tbody>${rows.join('')}</tbody></table></div>`;
|
|
}
|
|
|
|
// HA Resources table (expandable rows)
|
|
function renderHAResources(list){
|
|
const arr=ensureArr(list); const rows=[];
|
|
arr.forEach(x=>{
|
|
const st = x.state||'—';
|
|
const stB = /start/i.test(st)?badge(st,'ok'):(/stop/i.test(st)?badge(st,'err'):badge(st,'dark'));
|
|
const sid = safe(x.sid);
|
|
rows.push(rowHTML([sid, stB, safe(x.node), safe(x.group), safe(x.flags||x.comment)], `class="vm-row" data-sid="${sid}"`));
|
|
rows.push(`<tr class="vm-detail d-none"><td colspan="5"><div class="spinner-border spinner-border-sm me-2 d-none"></div><div class="vm-json">—</div></td></tr>`);
|
|
});
|
|
setRows(tblHaRes, rows.length?rows:[rowHTML(['—','—','—','—','—'])]);
|
|
Array.from(document.querySelectorAll('#ha-res tbody tr.vm-row')).forEach((tr,i)=>{
|
|
tr.onclick = async ()=>{
|
|
const detailRow = tblHaRes.querySelectorAll('tr.vm-detail')[i];
|
|
const content = detailRow.querySelector('.vm-json');
|
|
const spin = detailRow.querySelector('.spinner-border');
|
|
const open = detailRow.classList.contains('d-none');
|
|
document.querySelectorAll('#ha-res tbody tr.vm-detail').forEach(r=>r.classList.add('d-none'));
|
|
if(open){
|
|
detailRow.classList.remove('d-none'); spin.classList.remove('d-none');
|
|
const sid = tr.getAttribute('data-sid');
|
|
try { const d = await fetchVmDetail(sid); content.innerHTML = renderVmDetailCard(d); }
|
|
catch(e){ content.textContent='ERROR: '+e; }
|
|
spin.classList.add('d-none');
|
|
}
|
|
};
|
|
});
|
|
}
|
|
|
|
function renderHAStatus(list){
|
|
const st=ensureArr(list);
|
|
if(!st.length){ setRows(tblHaStatus, [rowHTML(['—','—','—','—'])]); return; }
|
|
const rows=st.map(n=>{
|
|
const sB=/active|online/i.test(n.state||'')?badge(n.state,'ok'):badge(safe(n.state||'—'),'warn');
|
|
const crmB=/active/i.test(n.crm_state||'')?badge(n.crm_state,'ok'):badge(safe(n.crm_state||'—'),'err');
|
|
const lrmB=/active/i.test(n.lrm_state||'')?badge(n.lrm_state,'ok'):badge(safe(n.lrm_state||'—'),'err');
|
|
return rowHTML([safe(n.node), sB, crmB, lrmB]);
|
|
});
|
|
setRows(tblHaStatus, rows);
|
|
}
|
|
|
|
// Non-HA VM/CT table
|
|
async function renderNonHA(){
|
|
const r = await fetch('/api/list-vmct');
|
|
const d = await r.json();
|
|
const arr = ensureArr(d.nonha);
|
|
if(!arr.length){ setRows(tblNonHA,[rowHTML(['No non-HA VMs/CTs'])]); return; }
|
|
const rows=[];
|
|
arr.forEach(x=>{
|
|
const sid=safe(x.sid), type=safe(x.type), name=safe(x.name), node=safe(x.node);
|
|
const st=/running/i.test(x.status||'')?badge(x.status,'ok'):badge(x.status,'dark');
|
|
rows.push(rowHTML([sid,type,name,node,st], `class="vm-row" data-sid="${sid}`+"\""));
|
|
rows.push(`<tr class="vm-detail d-none"><td colspan="5"><div class="spinner-border spinner-border-sm me-2 d-none"></div><div class="vm-json">—</div></td></tr>`);
|
|
});
|
|
setRows(tblNonHA, rows);
|
|
Array.from(document.querySelectorAll('#nonha tbody tr.vm-row')).forEach((tr,i)=>{
|
|
tr.onclick = async ()=>{
|
|
const detailRow = tblNonHA.querySelectorAll('tr.vm-detail')[i];
|
|
const content = detailRow.querySelector('.vm-json');
|
|
const spin = detailRow.querySelector('.spinner-border');
|
|
const open = detailRow.classList.contains('d-none');
|
|
document.querySelectorAll('#nonha tbody tr.vm-detail').forEach(r=>r.classList.add('d-none'));
|
|
if(open){
|
|
detailRow.classList.remove('d-none'); spin.classList.remove('d-none');
|
|
const sid = tr.getAttribute('data-sid');
|
|
try { const d = await fetchVmDetail(sid); content.innerHTML = renderVmDetailCard(d); }
|
|
catch(e){ content.textContent='ERROR: '+e; }
|
|
spin.classList.add('d-none');
|
|
}
|
|
};
|
|
});
|
|
}
|
|
|
|
// Nodes table (expandable) + sticky first column + robust online detect
|
|
function renderNodesTable(nodes){
|
|
const nrows = ensureArr(nodes).map(n=>{
|
|
const isOn = /online|running/i.test(n.status||'') ||
|
|
/online/i.test(n.hastate||'') ||
|
|
(n.uptime>0) ||
|
|
(n.cpu!=null && n.maxcpu!=null) ||
|
|
(n.mem!=null && n.maxmem!=null);
|
|
const statusTxt = isOn ? 'online' : (n.status||'offline');
|
|
const sB = isOn ? badge(statusTxt,'ok') : badge(statusTxt,'err');
|
|
|
|
const mem=(n.mem!=null&&n.maxmem)?`${humanBytes(n.mem)} / ${humanBytes(n.maxmem)} (${pct(n.mem/n.maxmem)})`:'—';
|
|
const rfs=(n.rootfs!=null&&n.maxrootfs)?`${humanBytes(n.rootfs)} / ${humanBytes(n.maxrootfs)} (${pct(n.rootfs/n.maxrootfs)})`:'—';
|
|
const load=(n.loadavg!=null)?String(n.loadavg):'—';
|
|
const cpu=(n.cpu!=null)?pct(n.cpu):'—';
|
|
|
|
const main = `<tr class="node-row" data-node="${safe(n.node)}">
|
|
<td class="sticky-col fw-semibold">${safe(n.node)}</td>
|
|
<td>${sB}</td><td>${cpu}</td><td>${load}</td><td>${mem}</td><td>${rfs}</td><td>${safe(n.uptime)}</td>
|
|
</tr>`;
|
|
|
|
const detail = `<tr class="node-detail d-none">
|
|
<td colspan="7">
|
|
<div class="spinner-border spinner-border-sm me-2 d-none"></div>
|
|
<div class="node-json">—</div>
|
|
</td>
|
|
</tr>`;
|
|
|
|
return main + detail;
|
|
});
|
|
setRows(tblNodes, nrows);
|
|
|
|
Array.from(document.querySelectorAll('#nodes tbody tr.node-row')).forEach((tr,i)=>{
|
|
tr.onclick = async ()=>{
|
|
const detailRow = tblNodes.querySelectorAll('tr.node-detail')[i];
|
|
const content = detailRow.querySelector('.node-json');
|
|
const spin = detailRow.querySelector('.spinner-border');
|
|
const open = detailRow.classList.contains('d-none');
|
|
document.querySelectorAll('#nodes tbody tr.node-detail').forEach(r=>r.classList.add('d-none'));
|
|
if(open){
|
|
detailRow.classList.remove('d-none'); spin.classList.remove('d-none');
|
|
const name = tr.getAttribute('data-node');
|
|
try { const d = await fetchNodeDetail(name); content.innerHTML = renderNodeDetailCard(d); }
|
|
catch(e){ content.textContent='ERROR: '+e; }
|
|
spin.classList.add('d-none');
|
|
}
|
|
};
|
|
});
|
|
}
|
|
|
|
// ------ main render ------
|
|
function renderSnap(d){
|
|
const vq=d.votequorum||{}; const units=d.units||{}; const allUnits=Object.values(units).every(v=>v==='active');
|
|
const ok = (vq.quorate==='yes') && allUnits;
|
|
setHealth(ok, vq, allUnits);
|
|
|
|
const gl = document.getElementById('global-loading'); if (gl) gl.remove();
|
|
|
|
qSummary.textContent = `Quorate: ${safe(vq.quorate)} | members: ${safe(vq.members)} | expected: ${safe(vq.expected)} | total: ${safe(vq.total)} | quorum: ${safe(vq.quorum)}`;
|
|
renderClusterCards(d.api && d.api.cluster_status);
|
|
renderUnits(units);
|
|
renderReplication(d.replication);
|
|
renderHAResources(d.api && d.api.ha_resources);
|
|
renderHAStatus(d.api && d.api.ha_status);
|
|
renderNodesTable(d.api && d.api.nodes);
|
|
|
|
pvecmPre.textContent = safe(d.pvecm);
|
|
cfgtoolPre.textContent = safe(d.cfgtool);
|
|
|
|
footer.textContent = `node_arg=${safe(d.node_arg)} | host=${safe(d.hostname)} | ts=${new Date((d.ts||0)*1000).toLocaleString()}`;
|
|
}
|
|
|
|
// initial one-shot load (auto refresh OFF by default)
|
|
doRefresh().catch(console.error);
|