{% extends "base.html" %}{% block title %}Monitor{% endblock %}{% block body %}
<div class="head"><div><small>SERVER / OBSERVABILITY</small><h1>Live Monitor</h1><p>Lightweight telemetry with short-lived cache and live visual history.</p></div><div class="action-row"><span class="tag" id="monitor-state">● Live</span><button class="soft" id="monitor-pause">Pause</button></div></div>
<div class="stats"><div class="card stat"><small>CPU</small><strong id="cpu">—</strong><span>Current utilization</span></div><div class="card stat"><small>RAM</small><strong id="ram">—</strong><span id="ram-detail">—</span></div><div class="card stat"><small>SWAP</small><strong id="swap">—</strong><span id="swap-detail">—</span></div><div class="card stat"><small>DISK</small><strong id="disk">—</strong><span id="disk-detail">—</span></div><div class="card stat"><small>LOAD 1M</small><strong id="load">—</strong><span id="load-detail">5m / 15m —</span></div></div>
<section class="grid2"><div class="card"><div class="cardhead"><div><small>CPU HISTORY</small><h2>Processor load</h2></div><span class="tag">Last 60 samples</span></div><div class="monitor-chart"><canvas id="cpu-chart"></canvas></div><div class="chart-legend"><span style="color:#2d6df6">CPU %</span></div></div><div class="card"><div class="cardhead"><div><small>MEMORY HISTORY</small><h2>RAM utilization</h2></div><span class="tag">Live</span></div><div class="monitor-chart"><canvas id="ram-chart"></canvas></div><div class="chart-legend"><span style="color:#16a36d">RAM %</span></div></div></section>
<section class="grid2"><div class="card"><div class="cardhead"><div><small>STORAGE</small><h2>Disk utilization</h2></div><span class="tag" id="disk-free">—</span></div><div class="monitor-chart"><canvas id="disk-chart"></canvas></div><div class="chart-legend"><span style="color:#d28b18">Disk %</span></div></div><div class="card"><div class="cardhead"><div><small>NETWORK</small><h2>Traffic counters</h2></div><span class="tag">RX / TX</span></div><div class="monitor-chart"><canvas id="net-chart"></canvas></div><div class="chart-legend"><span style="color:#7c4dff">RX</span><span style="color:#d84c5b">TX</span></div><div class="info"><div><small>RX RATE</small><b id="rx-rate">—</b></div><div><small>TX RATE</small><b id="tx-rate">—</b></div><div><small>READ I/O</small><b id="read-rate">—</b></div><div><small>WRITE I/O</small><b id="write-rate">—</b></div></div></div></section>
<section class="monitor-layout"><div class="card"><div class="cardhead"><div><small>SERVICE HEALTH</small><h2>Installed services</h2></div><a class="soft" href="/admin/services">Manage services →</a></div><div id="services" class="servicegrid"></div></div><div class="card"><div class="cardhead"><div><small>SYSTEM</small><h2>Runtime</h2></div></div><div class="info" style="grid-template-columns:1fr 1fr"><div><small>RX</small><b id="rx">—</b></div><div><small>TX</small><b id="tx">—</b></div><div><small>UPTIME</small><b id="uptime">—</b></div><div><small>PROCESSES</small><b id="procs">—</b></div></div></div></section>
<section class="card"><div class="cardhead"><div><small>PROCESSES</small><h2>Top memory consumers</h2></div><span class="tag">Live snapshot</span></div><div class="tablewrap"><table><thead><tr><th>PID</th><th>Process</th><th>State</th><th>Memory</th></tr></thead><tbody id="processes"></tbody></table></div></section>
<script>
const H={cpu:[],ram:[],disk:[],rx:[],tx:[]};let paused=false,timer=null;function fmtBytes(n){if(!n)return'0 B';const u=['B','KB','MB','GB','TB'];let i=0,x=n;while(x>=1024&&i<4){x/=1024;i++}return x.toFixed(x>=100?0:1)+' '+u[i]}
function setupCanvas(id){const c=document.getElementById(id),x=c.getContext('2d');function size(){c.width=c.clientWidth*devicePixelRatio;c.height=c.clientHeight*devicePixelRatio;x.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0)}size();addEventListener('resize',size);return {c,x,size}}
const charts={cpu:setupCanvas('cpu-chart'),ram:setupCanvas('ram-chart'),disk:setupCanvas('disk-chart'),net:setupCanvas('net-chart')};
function line(ch,sets,max=100){const {c,x}=ch,w=c.clientWidth,h=c.clientHeight;x.clearRect(0,0,w,h);x.strokeStyle='#e8edf5';x.lineWidth=1;for(let i=1;i<4;i++){let y=i*h/4;x.beginPath();x.moveTo(0,y);x.lineTo(w,y);x.stroke()}sets.forEach(set=>{if(set.data.length<2)return;x.strokeStyle=set.color;x.lineWidth=2.4;x.beginPath();set.data.forEach((v,i)=>{let xx=i*(w-10)/(set.data.length-1)+5,yy=h-6-(Math.min(max,Math.max(0,v))/max)*(h-12);i?x.lineTo(xx,yy):x.moveTo(xx,yy)});x.stroke()})}
function draw(){line(charts.cpu,[{data:H.cpu,color:'#2d6df6'}]);line(charts.ram,[{data:H.ram,color:'#16a36d'}]);line(charts.disk,[{data:H.disk,color:'#d28b18'}]);const mx=Math.max(1,...H.rx,...H.tx);line(charts.net,[{data:H.rx,color:'#7c4dff'},{data:H.tx,color:'#d84c5b'}],mx)}
function renderServices(items){const box=document.getElementById('services');box.innerHTML=(items||[]).filter(s=>s.installed).slice(0,18).map(s=>`<div class="mini-stat"><div style="display:flex;justify-content:space-between;gap:8px"><b>${s.name}</b><span class="${s.running?'ok':'muted'}">● ${s.running?'Running':'Stopped'}</span></div><small>${s.version||'Version unavailable'}</small></div>`).join('')||'<div class="empty">No installed services detected yet.</div>'}
async function poll(){if(paused)return;try{const d=await fetch('/api/monitor',{cache:'no-store'}).then(r=>r.json());document.getElementById('cpu').textContent=d.cpu_percent+'%';document.getElementById('ram').textContent=d.memory.percent+'%';document.getElementById('swap').textContent=d.memory.swap_percent+'%';document.getElementById('swap-detail').textContent=fmtBytes(d.memory.swap_used)+' / '+fmtBytes(d.memory.swap_total);document.getElementById('ram-detail').textContent=fmtBytes(d.memory.used)+' / '+fmtBytes(d.memory.total);document.getElementById('disk').textContent=d.disk.percent+'%';document.getElementById('disk-detail').textContent=fmtBytes(d.disk.used)+' / '+fmtBytes(d.disk.total);document.getElementById('disk-free').textContent=fmtBytes(d.disk.free)+' free';document.getElementById('load').textContent=d.load['1m'].toFixed(2);document.getElementById('load-detail').textContent=d.load['5m'].toFixed(2)+' / '+d.load['15m'].toFixed(2);document.getElementById('rx').textContent=fmtBytes(d.network.rx);document.getElementById('tx').textContent=fmtBytes(d.network.tx);document.getElementById('rx-rate').textContent=fmtBytes(d.rates.rx_bps)+'/s';document.getElementById('tx-rate').textContent=fmtBytes(d.rates.tx_bps)+'/s';document.getElementById('read-rate').textContent=fmtBytes(d.rates.read_bps)+'/s';document.getElementById('write-rate').textContent=fmtBytes(d.rates.write_bps)+'/s';document.getElementById('uptime').textContent=Math.floor(+d.uptime/3600)+'h '+Math.floor((+d.uptime%3600)/60)+'m';document.getElementById('procs').textContent=d.processes.length;H.cpu.push(d.cpu_percent);H.ram.push(d.memory.percent);H.disk.push(d.disk.percent);H.rx.push(d.network.rx);H.tx.push(d.network.tx);Object.keys(H).forEach(k=>{if(H[k].length>60)H[k].shift()});document.getElementById('processes').innerHTML=(d.processes||[]).slice(0,12).map(p=>`<tr><td>${p.pid}</td><td><b>${p.name}</b></td><td>${p.state}</td><td>${fmtBytes(p.memory)}</td></tr>`).join('');renderServices(d.apps);draw();document.getElementById('monitor-state').textContent='● Updated '+new Date().toLocaleTimeString()}catch(e){document.getElementById('monitor-state').textContent='● Update unavailable'}}poll();timer=setInterval(poll,2500);document.getElementById('monitor-pause').onclick=()=>{paused=!paused;document.getElementById('monitor-pause').textContent=paused?'Resume':'Pause';document.getElementById('monitor-state').textContent=paused?'● Paused':'● Live'};
</script>{% endblock %}