Load Avg
@@ -328,7 +325,8 @@ const SERVICES = [
];
const hist = {cpu:[], load:[]};
const svcHist = {};
-SERVICES.forEach(s => svcHist[s.id] = []);
+const svcLatHist = {};
+SERVICES.forEach(s => { svcHist[s.id] = []; svcLatHist[s.id] = []; });
let streamData = null;
function p(n){ return String(n).padStart(2,'0'); }
@@ -396,15 +394,12 @@ async function fetchHealth(){
window._cpuCount=cpuCount;
document.getElementById('cpu-val').textContent=`${cpuPct}%`;
- const cb=document.getElementById('cpu-bar');cb.style.width=`${cpuPct}%`;cb.className='bar-fill'+(cpuPct>80?' crit':cpuPct>60?' warn':'');
- document.getElementById('cpu-bin').textContent=cpuPct.toString(2).padStart(8,'0');
+ renderBinBar('cpu-bar',cpuPct,60,80);
document.getElementById('mem-val').textContent=`${data.mem_used_mb}/${data.mem_total_mb}MB (${memPct}%)`;
- const mb=document.getElementById('mem-bar');mb.style.width=`${memPct}%`;mb.className='bar-fill'+(memPct>85?' crit':memPct>65?' warn':'');
- document.getElementById('mem-bin').textContent=memPct.toString(2).padStart(8,'0');
+ renderBinBar('mem-bar',memPct,65,85);
if(data.disk){
document.getElementById('disk-val').textContent=`${data.disk.used_gb}/${data.disk.total_gb}GB (${diskPct}%)`;
- const db=document.getElementById('disk-bar');db.style.width=`${diskPct}%`;db.className='bar-fill'+(diskPct>90?' crit':diskPct>75?' warn':'');
- document.getElementById('disk-bin').textContent=diskPct.toString(2).padStart(8,'0');
+ renderBinBar('disk-bar',diskPct,75,90);
}
document.getElementById('cpu-count-label').textContent=`(core:${cpuCount})`;
['load-1','load-5','load-15'].forEach((id,i)=>{
@@ -453,17 +448,50 @@ function buildServiceCards(){
SERVICES.forEach(svc=>{
const card=document.createElement('div'); card.className='service-card'; card.id=`svc-${svc.id}`;
const dots=Array(5).fill(0).map((_,i)=>`
`).join('');
- card.innerHTML=`
${svc.name}...
${svc.desc}`;
+ card.innerHTML=`
${svc.name}...
${svc.desc}`;
grid.appendChild(card);
});
}
-function updateLatencyBar(id,ms){
- const bar=document.getElementById(`lbar-${id}`); if(!bar)return;
- if(ms===null){bar.style.width='100%';bar.style.background='var(--crit)';return;}
- const w=ms<=50?100:ms<=200?80:ms<=500?55:35;
- const color=ms<=200?'var(--ok)':ms<=500?'#FB923C':'var(--crit)';
- bar.style.width=w+'%'; bar.style.background=color;
+function renderBinBar(id,pct,warnTh,critTh){
+ const el=document.getElementById(id); if(!el)return;
+ const cells=20,filled=Math.round(pct/100*cells);
+ const cls=pct>critTh?'crit':pct>warnTh?'warn':'';
+ el.className='bin-bar'+(cls?' '+cls:'');
+ el.innerHTML=Array.from({length:cells},(_,i)=>
+ `
${i`
+ ).join('');
+}
+
+function updateSparkline(id, ms, ok){
+ const h = svcLatHist[id];
+ h.push(ok ? (ms||0) : null);
+ if(h.length > 12) h.shift();
+ const svg = document.getElementById(`spark-${id}`);
+ if(!svg || h.length < 2) return;
+ const valid = h.filter(v => v !== null);
+ if(valid.length < 2){ svg.innerHTML=''; return; }
+ const maxV = Math.max(...valid, 1);
+ const W=100, H=24, pad=2;
+ const pts = h.map((v,i) => {
+ const x = (i/(h.length-1))*W;
+ const y = v===null ? H-pad : H-pad - ((v/maxV)*(H-pad*2));
+ return `${x.toFixed(1)},${y.toFixed(1)}`;
+ }).join(' ');
+ const color = !ok ? 'rgba(248,113,113,0.7)' : maxV > 500 ? 'rgba(251,146,60,0.7)' : 'rgba(34,211,238,0.6)';
+ const area = h.map((v,i) => {
+ const x=(i/(h.length-1))*W;
+ const y=v===null?H-pad:H-pad-((v/maxV)*(H-pad*2));
+ return `${x.toFixed(1)},${y.toFixed(1)}`;
+ });
+ area.push(`${W},${H}`, `0,${H}`);
+ svg.innerHTML = `
+
+
+
+
+
+ `;
}
function pushSvcHistory(id,ok){
@@ -498,7 +526,7 @@ async function checkService(svc){
badge.className='service-badge '+(ok?'ok':'crit');
badge.textContent=ok?'OK':'DOWN';
latEl.textContent=ms?`${ms}ms`:'';
- updateLatencyBar(svc.id,ok?ms:null);
+ updateSparkline(svc.id,ms,!!ok);
pushSvcHistory(svc.id,!!ok);
}else{
await fetch(svc.url,{method:'HEAD',mode:'no-cors',signal:ctrl.signal});
@@ -506,7 +534,7 @@ async function checkService(svc){
const ms=Date.now()-t0;
badge.className='service-badge ok'; badge.textContent='OK';
latEl.textContent=`${ms}ms`;
- updateLatencyBar(svc.id,ms);
+ updateSparkline(svc.id,ms,true);
pushSvcHistory(svc.id,true);
}
}catch(e){
@@ -555,10 +583,21 @@ function updateStream(data){
const r=rows[Math.floor(Date.now()/1000)%rows.length];
pushStreamRow(r.label,r.value,r.bin,r.pct,r.level);
const ip='100.77.11.43';
- const ipBin=ip.split('.').map(o=>toBin(parseInt(o),8)).join(' ');
- const base=`${ipBin} // ${data.hostname||'ubuntu-pc'} // ${data.node_version||''} // `;
+ const b8 = n => n.toString(2).padStart(8,'0');
+ const segments = [
+ `CPU:${b8(cpuPct??0)}`,
+ `MEM:${b8(memPct??0)}`,
+ `DISK:${b8(diskPct??0)}`,
+ `LOAD:${b8(Math.min(255,Math.round((loadAvg[0]||0)*64)))}`,
+ `UP:${(data.uptime_s||0).toString(2)}`,
+ `SESSION:${b8(data.active_sessions||0)}`,
+ `TIME:${(Math.floor(Date.now()/1000)).toString(2).slice(-20)}`,
+ `IP:${ip.split('.').map(o=>b8(parseInt(o))).join('.')}`,
+ `HOST:${(data.hostname||'ubuntu-pc').split('').map(c=>b8(c.charCodeAt(0))).join(' ')}`,
+ ];
+ const tape = segments.join(' // ') + ' // ';
const el=document.getElementById('stream-ticker-inner');
- if(el)el.textContent=base+base;
+ if(el){ el.textContent=tape+tape; el.style.animation='none'; void el.offsetWidth; el.style.animation=''; }
}
setInterval(()=>{if(streamData)updateStream(streamData);},4000);