mirror of
https://github.com/myronblair/jarvis
synced 2026-06-30 17:50:23 -05:00
refactor: merge LOCAL SYSTEM + DO SERVER into single JARVIS SERVER panel
This commit is contained in:
+38
-48
@@ -677,9 +677,11 @@ body::after{
|
||||
<!-- LEFT: System Stats -->
|
||||
<div id="leftPanel">
|
||||
<div class="panel">
|
||||
<div class="panel-title">LOCAL SYSTEM <div class="indicator"></div></div>
|
||||
<div class="panel-title">JARVIS SERVER <span style="font-size:0.5rem;color:var(--text-dim)">165.22.1.228</span><div class="indicator"></div></div>
|
||||
|
||||
<!-- Metric bars -->
|
||||
<div class="metric-row">
|
||||
<div class="metric-label">CPU USAGE <span id="cpu-val">--%</span></div>
|
||||
<div class="metric-label">CPU <span id="cpu-val">--%</span></div>
|
||||
<div class="metric-bar"><div class="metric-bar-fill" id="cpu-bar" style="width:0%"></div></div>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
@@ -687,36 +689,28 @@ body::after{
|
||||
<div class="metric-bar"><div class="metric-bar-fill" id="mem-bar" style="width:0%"></div></div>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
<div class="metric-label">DISK / <span id="disk-val">--%</span></div>
|
||||
<div class="metric-label">DISK <span id="disk-val">--%</span></div>
|
||||
<div class="metric-bar"><div class="metric-bar-fill" id="disk-bar" style="width:0%"></div></div>
|
||||
</div>
|
||||
<div class="val-row"><div class="lbl">UPTIME</div><div class="val" id="uptime-val">--</div></div>
|
||||
<div class="val-row"><div class="lbl">LOAD AVG</div><div class="val" id="load-val">--</div></div>
|
||||
<div class="val-row"><div class="lbl">HOSTNAME</div><div class="val" id="host-val">--</div></div>
|
||||
</div>
|
||||
<div class="val-row"><div class="lbl">LOAD</div><div class="val" id="load-val">--</div></div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-title">SERVICES</div>
|
||||
<!-- Services -->
|
||||
<div style="font-family:var(--font-display);font-size:0.5rem;letter-spacing:2px;color:var(--text-dim);margin:10px 0 5px">SERVICES</div>
|
||||
<div id="services-list">
|
||||
<div class="loading-shimmer" style="margin-bottom:6px"></div>
|
||||
<div class="loading-shimmer"></div>
|
||||
<div class="loading-shimmer" style="margin-bottom:4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-title">DO SERVER <span style="font-size:0.55rem;color:var(--text-dim)">165.22.1.228</span></div>
|
||||
<div id="do-stats">
|
||||
<div class="loading-shimmer" style="margin-bottom:6px"></div>
|
||||
<div class="loading-shimmer"></div>
|
||||
<!-- Site health -->
|
||||
<div style="font-family:var(--font-display);font-size:0.5rem;letter-spacing:2px;color:var(--text-dim);margin:10px 0 5px">WEBSITES</div>
|
||||
<div id="sites-list">
|
||||
<div class="loading-shimmer" style="margin-bottom:4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-title">TOP PROCESSES</div>
|
||||
<!-- Top processes -->
|
||||
<div style="font-family:var(--font-display);font-size:0.5rem;letter-spacing:2px;color:var(--text-dim);margin:10px 0 5px">PROCESSES</div>
|
||||
<div id="procs-list">
|
||||
<div class="loading-shimmer" style="margin-bottom:4px"></div>
|
||||
<div class="loading-shimmer" style="margin-bottom:4px"></div>
|
||||
<div class="loading-shimmer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1240,40 +1234,36 @@ function setBar(id, pct) {
|
||||
el.className = 'metric-bar-fill' + (pct>90?' danger':pct>75?' warn':'');
|
||||
}
|
||||
|
||||
// ── RENDER: DO SERVER ─────────────────────────────────────────────────
|
||||
// ── RENDER: DO SERVER (site health only — metrics merged into system panel) ───
|
||||
function renderDO(d) {
|
||||
const el = document.getElementById('do-stats');
|
||||
const dot = document.getElementById('bb-do-dot');
|
||||
const dot = document.getElementById('bb-do-dot');
|
||||
const status = document.getElementById('bb-do-status');
|
||||
const sitesEl = document.getElementById('sites-list');
|
||||
|
||||
if (!d || d.error) {
|
||||
el.innerHTML = `<div class="text-dim" style="font-size:0.75rem">${d?.error || 'Unreachable'}</div>`;
|
||||
dot.className='bb-dot offline'; status.textContent='OFFLINE';
|
||||
document.getElementById('tb-do').className='text-red';
|
||||
document.getElementById('tb-do').textContent='OFFLINE';
|
||||
if (!d || d.error || !d.reachable) {
|
||||
if (dot) dot.className = 'bb-dot offline';
|
||||
if (status) status.textContent = 'OFFLINE';
|
||||
document.getElementById('tb-do').className = 'text-red';
|
||||
document.getElementById('tb-do').textContent = 'OFFLINE';
|
||||
if (sitesEl) sitesEl.innerHTML = '<div class="text-dim" style="font-size:0.72rem">Unavailable</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const reachable = d.reachable;
|
||||
dot.className = 'bb-dot ' + (reachable ? 'online' : 'offline');
|
||||
status.textContent = reachable ? 'ONLINE' : 'OFFLINE';
|
||||
document.getElementById('tb-do').className = reachable ? 'text-green' : 'text-red';
|
||||
document.getElementById('tb-do').textContent = reachable ? 'ONLINE' : 'OFFLINE';
|
||||
dot.className = 'bb-dot online';
|
||||
status.textContent = 'ONLINE';
|
||||
document.getElementById('tb-do').className = 'text-green';
|
||||
document.getElementById('tb-do').textContent = 'ONLINE';
|
||||
|
||||
if (!reachable) { el.innerHTML='<div class="text-red" style="font-size:0.75rem">UNREACHABLE</div>'; return; }
|
||||
|
||||
const cpuClass = (d.cpu_pct||0)>80?'danger':(d.cpu_pct||0)>60?'warn':'ok';
|
||||
const memClass = (d.memory?.percent||0)>80?'danger':(d.memory?.percent||0)>60?'warn':'ok';
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="val-row"><div class="lbl">CPU</div><div class="val ${cpuClass}">${d.cpu_pct??'--'}%</div></div>
|
||||
<div class="val-row"><div class="lbl">MEMORY</div><div class="val ${memClass}">${d.memory?.percent??'--'}%</div></div>
|
||||
<div class="val-row"><div class="lbl">DISK</div><div class="val">${d.disk_used_pct??'--'}</div></div>
|
||||
<div class="val-row"><div class="lbl">UPTIME</div><div class="val">${d.uptime??'--'}</div></div>
|
||||
<div class="val-row"><div class="lbl">LOAD</div><div class="val">${d.load_1m??'--'}</div></div>
|
||||
${d.sites && Object.keys(d.sites).length ? `<div style="margin-top:8px;font-family:var(--font-mono);font-size:0.65rem;color:var(--text-dim)">WEBSITES:</div>
|
||||
${Object.entries(d.sites).map(([k,v])=>{const cls=v==='up'?'ok':v==='down'?'danger':'warn';const lbl=k.replace(/^https?:\/\//,'').replace(/\.com$/,'').replace(/\.orbishosting$/,'');return`<div class="val-row"><div class="lbl" style="font-size:.62rem">${lbl}</div><div class="val ${cls}">${v.toUpperCase()}</div></div>`}).join('')}` : ''}
|
||||
`;
|
||||
if (sitesEl && d.sites && Object.keys(d.sites).length) {
|
||||
sitesEl.innerHTML = Object.entries(d.sites).map(([k, v]) => {
|
||||
const cls = v === 'up' ? 'ok' : v === 'down' ? 'danger' : 'warn';
|
||||
const lbl = k.replace(/^https?:\/\//, '').replace(/\.orbishosting\.com$/, '').replace(/\.com$/, '');
|
||||
return `<div class="val-row">
|
||||
<div class="lbl" style="font-size:0.62rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${lbl}</div>
|
||||
<div class="val ${cls}">${v.toUpperCase()}</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadNetwork() {
|
||||
|
||||
Reference in New Issue
Block a user