100 lines
5.7 KiB
HTML
100 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>WEVAL — Monitoring Dashboard</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{background:#0a0f1a;color:#e0e8f0;font-family:system-ui,-apple-system,sans-serif;min-height:100vh}
|
|
.header{padding:20px 30px;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between}
|
|
.header h1{font-size:18px;background:linear-gradient(135deg,#a78bfa,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
.header .badge{padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600}
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;padding:24px}
|
|
.card{background:#0f1520;border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:20px;transition:all 0.2s}
|
|
.card:hover{border-color:rgba(167,139,250,0.2);box-shadow:0 0 20px rgba(167,139,250,0.05)}
|
|
.card h3{font-size:13px;color:#8899aa;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}
|
|
.metric{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04)}
|
|
.metric:last-child{border:none}
|
|
.metric .label{color:#8899aa;font-size:12px}
|
|
.metric .value{font-size:12px;font-weight:600}
|
|
.up{color:#00e5a0}.down{color:#ef4444}.warn{color:#f59e0b}
|
|
.bar{height:4px;border-radius:2px;background:rgba(255,255,255,0.06);margin-top:4px;overflow:hidden}
|
|
.bar-fill{height:100%;border-radius:2px;transition:width 0.5s}
|
|
#refreshBtn{background:none;border:1px solid rgba(167,139,250,0.3);color:#a78bfa;padding:6px 16px;border-radius:8px;cursor:pointer;font-size:11px}
|
|
#refreshBtn:hover{background:rgba(167,139,250,0.1)}
|
|
#lastUpdate{font-size:10px;color:#556}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>WEVAL Monitoring</h1>
|
|
<div style="display:flex;gap:12px;align-items:center">
|
|
<span id="lastUpdate"></span>
|
|
<button id="refreshBtn" onclick="loadData()">Refresh</button>
|
|
<span id="statusBadge" class="badge" style="background:rgba(0,229,160,0.1);color:#00e5a0">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid" id="grid"></div>
|
|
<script>
|
|
function loadData(){
|
|
fetch('/api/monitoring-dashboard.php').then(r=>r.json()).then(d=>{
|
|
var g=document.getElementById('grid');g.innerHTML='';
|
|
var s=d.summary;
|
|
document.getElementById('statusBadge').innerHTML=s.up+'/'+s.total+' UP ('+s.pct+'%)';
|
|
document.getElementById('statusBadge').style.background=s.pct===100?'rgba(0,229,160,0.1)':'rgba(239,68,68,0.1)';
|
|
document.getElementById('statusBadge').style.color=s.pct===100?'#00e5a0':'#ef4444';
|
|
document.getElementById('lastUpdate').textContent='Updated: '+new Date().toLocaleTimeString()+' ('+s.scan_ms+'ms)';
|
|
// Services card
|
|
var html='<div class="card"><h3>Services ('+s.up+'/'+s.total+')</h3>';
|
|
for(var name in d.services){var sv=d.services[name];var cls=sv.status==='up'?'up':'down';
|
|
html+='<div class="metric"><span class="label">'+name+'</span><span class="value '+cls+'">'+(sv.status==='up'?'UP':'DOWN')+' '+sv.code+' ('+sv.ms+'ms)</span></div>'}
|
|
html+='</div>';
|
|
// Infra card
|
|
var inf=d.infra;
|
|
html+='<div class="card"><h3>Infrastructure</h3>';
|
|
html+='<div class="metric"><span class="label">Disk</span><span class="value '+(parseInt(inf.disk)>85?'warn':'up')+'">'+inf.disk+'</span></div>';
|
|
html+='<div class="metric"><span class="label">RAM</span><span class="value up">'+inf.ram_used+'/'+inf.ram_total+'</span></div>';
|
|
html+='<div class="metric"><span class="label">Ollama Models</span><span class="value up">'+inf.ollama_models+'</span></div>';
|
|
html+='<div class="metric"><span class="label">Uptime</span><span class="value">'+inf.uptime+'</span></div>';
|
|
html+='</div>';
|
|
// Quick metrics
|
|
fetch('/api/live-metrics.php').then(r=>r.json()).then(m=>{
|
|
html+='<div class="card"><h3>Live Metrics</h3>';
|
|
html+='<div class="metric"><span class="label">Disk Usage</span><span class="value">'+m.disk+'</span></div>';
|
|
var pct=parseInt(m.disk);
|
|
html+='<div class="bar"><div class="bar-fill" style="width:'+pct+'%;background:'+(pct>85?'#ef4444':pct>70?'#f59e0b':'#00e5a0')+'"></div></div>';
|
|
html+='<div class="metric"><span class="label">RAM</span><span class="value">'+m.ram+'</span></div>';
|
|
html+='<div class="metric"><span class="label">Ollama</span><span class="value">'+m.ollama+' models</span></div>';
|
|
html+='<div class="metric"><span class="label">Uptime</span><span class="value">'+m.uptime+'</span></div>';
|
|
html+='</div>';
|
|
g.innerHTML=html}).catch(function(){g.innerHTML=html})}).catch(function(e){
|
|
document.getElementById('grid').innerHTML='<div class="card"><h3>Error</h3><p>'+e+'</p></div>'})
|
|
}
|
|
loadData();setInterval(loadData,30000);
|
|
</script>
|
|
<script>
|
|
// Live monitoring data
|
|
(function(){
|
|
function load(){
|
|
fetch('/api/nonreg-latest.json').then(r=>r.json()).then(d=>{
|
|
var el=document.getElementById('nonreg-live');
|
|
if(el)el.innerHTML='<strong>NonReg:</strong> '+d.score+'% ('+d.pass+'/'+d.total+') — '+d.elapsed+'s — '+d.ts;
|
|
}).catch(()=>{});
|
|
fetch('/api/ecosystem-health.php').then(r=>r.json()).then(d=>{
|
|
var el=document.getElementById('health-live');
|
|
if(el)el.innerHTML='<strong>Ecosystem:</strong> '+d.score+' ('+d.percent+'%) — '+d.tools_wired+' tools';
|
|
}).catch(()=>{});
|
|
}
|
|
setTimeout(load,1000);setInterval(load,30000);
|
|
// Inject display divs
|
|
var main=document.querySelector('main,.content,body>div,body');
|
|
if(main){
|
|
var d=document.createElement('div');
|
|
d.style.cssText='background:rgba(15,23,42,0.95);padding:12px;border-radius:8px;margin:12px;font-size:13px;color:#e2e8f0;border:1px solid #1e293b';
|
|
d.innerHTML='<div id="nonreg-live" style="margin-bottom:6px">NonReg: loading...</div><div id="health-live">Health: loading...</div>';
|
|
main.insertBefore(d,main.firstChild);
|
|
}
|
|
})();
|
|
</script></body>
|
|
</html> |