mai
/
posimai-root
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add binary representation of CPU/MEM/DISK metrics under progress bars 

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
posimai 2026-03-31 21:48:09 +09:00
parent eb2d8877c5
commit df1a41560b
1 changed files with 7 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
posimai-dev/station.html
View File

@ -83,6 +83,7 @@
.metric-header-row { display:flex;justify-content:space-between;align-items:baseline; } .metric-header-row { display:flex;justify-content:space-between;align-items:baseline; }
.metric-label { font-size:12px;color:var(--text2); } .metric-label { font-size:12px;color:var(--text2); }
.metric-val { font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500; } .metric-val { font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500; }
.metric-bin { font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.18em;color:rgba(34,211,238,0.35);margin-top:2px;transition:color 0.4s; }
.bar-track { height:4px;border-radius:2px;background:rgba(255,255,255,0.05);overflow:hidden; } .bar-track { height:4px;border-radius:2px;background:rgba(255,255,255,0.05);overflow:hidden; }
.bar-fill { height:100%;border-radius:2px;background:var(--accent);transition:width 0.8s cubic-bezier(0.4,0,0.2,1),background 0.4s; } .bar-fill { height:100%;border-radius:2px;background:var(--accent);transition:width 0.8s cubic-bezier(0.4,0,0.2,1),background 0.4s; }
.bar-fill.warn { background:var(--warn); } .bar-fill.warn { background:var(--warn); }
@ -200,14 +201,17 @@
<div class="metric-item"> <div class="metric-item">
<div class="metric-header-row"><span class="metric-label">CPU</span><span class="metric-val" id="cpu-val">—</span></div> <div class="metric-header-row"><span class="metric-label">CPU</span><span class="metric-val" id="cpu-val">—</span></div>
<div class="bar-track"><div class="bar-fill" id="cpu-bar" style="width:0%"></div></div> <div class="bar-track"><div class="bar-fill" id="cpu-bar" style="width:0%"></div></div>
<div class="metric-bin" id="cpu-bin">--------</div>
</div> </div>
<div class="metric-item"> <div class="metric-item">
<div class="metric-header-row"><span class="metric-label">Memory</span><span class="metric-val" id="mem-val">—</span></div> <div class="metric-header-row"><span class="metric-label">Memory</span><span class="metric-val" id="mem-val">—</span></div>
<div class="bar-track"><div class="bar-fill" id="mem-bar" style="width:0%"></div></div> <div class="bar-track"><div class="bar-fill" id="mem-bar" style="width:0%"></div></div>
<div class="metric-bin" id="mem-bin">--------</div>
</div> </div>
<div class="metric-item"> <div class="metric-item">
<div class="metric-header-row"><span class="metric-label">Disk (/)</span><span class="metric-val" id="disk-val">—</span></div> <div class="metric-header-row"><span class="metric-label">Disk (/)</span><span class="metric-val" id="disk-val">—</span></div>
<div class="bar-track"><div class="bar-fill" id="disk-bar" style="width:0%"></div></div> <div class="bar-track"><div class="bar-fill" id="disk-bar" style="width:0%"></div></div>
<div class="metric-bin" id="disk-bin">--------</div>
</div> </div>
<div> <div>
<div class="metric-label" style="margin-bottom:6px">Load Avg <span id="cpu-count-label" style="color:var(--text3);font-size:9px"></span></div> <div class="metric-label" style="margin-bottom:6px">Load Avg <span id="cpu-count-label" style="color:var(--text3);font-size:9px"></span></div>
@ -393,11 +397,14 @@ async function fetchHealth(){
document.getElementById('cpu-val').textContent=`${cpuPct}%`; 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':''); 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');
document.getElementById('mem-val').textContent=`${data.mem_used_mb}/${data.mem_total_mb}MB (${memPct}%)`; 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':''); 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');
if(data.disk){ if(data.disk){
document.getElementById('disk-val').textContent=`${data.disk.used_gb}/${data.disk.total_gb}GB (${diskPct}%)`; 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':''); 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');
} }
document.getElementById('cpu-count-label').textContent=`(core:${cpuCount})`; document.getElementById('cpu-count-label').textContent=`(core:${cpuCount})`;
['load-1','load-5','load-15'].forEach((id,i)=>{ ['load-1','load-5','load-15'].forEach((id,i)=>{