140 lines
9.3 KiB
HTML
140 lines
9.3 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>
|
|
<!-- WAVE 162 — Unified Pipeline Overlay -->
|
|
<div id="unifiedLiveOverlay" style="position:fixed;bottom:12px;right:12px;width:280px;max-height:calc(100vh - 120px);overflow-y:auto;background:linear-gradient(135deg,rgba(10,14,26,0.94),rgba(30,30,60,0.92));border:1px solid rgba(6,182,212,0.4);border-radius:10px;padding:10px;backdrop-filter:blur(14px);z-index:9999;font:600 9px Nunito,system-ui;color:#e2e8f0;box-shadow:0 4px 30px rgba(0,0,0,0.5)">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid rgba(100,116,139,0.3)">
|
|
<div style="font:900 10px Orbitron,system-ui;color:#06b6d4">🔴 <b id=closeLive style=cursor:pointer;margin-right:6px;color:gray onclick=unifiedLiveOverlay.remove()>x</b>UNIFIED LIVE</div>
|
|
<div id="ulo-ts" style="font-size:8px;color:#64748b"></div>
|
|
</div>
|
|
<div id="ulo-body">Loading...</div>
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
const U='/api/weval-unified-pipeline.php';
|
|
async function tick(){
|
|
try{
|
|
const r=await fetch(U,{cache:'no-cache'});
|
|
if(!r.ok) return;
|
|
const d=await r.json();
|
|
const body=document.getElementById('ulo-body');
|
|
const ts=document.getElementById('ulo-ts');
|
|
if(!body) return;
|
|
const h=d.l99.health||'?';
|
|
const hc={GREEN:'#10b981',YELLOW:'#f59e0b',RED:'#ef4444'}[h]||'#64748b';
|
|
let html='<div style="background:'+hc+'15;border-left:3px solid '+hc+';padding:5px;margin-bottom:5px;border-radius:3px"><b style="color:'+hc+'">● '+h+'</b> L99 <b>'+d.l99.pass+'/'+d.l99.total+'</b><br><span style="color:#94a3b8">Disk '+d.system.disk_pct+'% Docker '+d.system.docker_count+' Crons '+d.system.cron_count+'</span></div>';
|
|
html+='<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:5px"><div style="background:rgba(6,182,212,0.1);border:1px solid rgba(6,182,212,0.3);border-radius:4px;padding:4px"><div style="font:800 8px Orbitron;color:#06b6d4">SOVEREIGN</div><b>'+d.providers.count+'</b> providers<br><b>'+d.ollama.models+'</b> Ollama<br><b>'+d.qdrant.collections.length+'</b> Qdrant</div><div style="background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.3);border-radius:4px;padding:4px"><div style="font:800 8px Orbitron;color:#8b5cf6">PAPERCLIP</div><b>'+d.goals.length+'</b> goals<br><b>'+d.projects.length+'</b> projects<br><b>'+d.routines.length+'</b> routines</div></div>';
|
|
html+='<div style="background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);border-radius:4px;padding:4px;margin-bottom:5px"><div style="font:800 8px Orbitron;color:#f59e0b">ETHICA</div><b>'+(d.ethica.hcps_validated/1000).toFixed(0)+'K</b> HCPs '+d.ethica.coverage.join(' ')+'</div>';
|
|
const rpa=d.routines_per_agent||{};
|
|
const top=Object.entries(rpa).sort((a,b)=>b[1]-a[1]).slice(0,5);
|
|
if(top.length){
|
|
html+='<div style="font:800 8px Orbitron;color:#10b981;margin:4px 0">TOP AGENTS</div>';
|
|
top.forEach(([n,c])=>{html+='<div style="display:flex;justify-content:space-between;padding:1px 3px;background:rgba(16,185,129,0.05);border-radius:2px;margin-bottom:1px"><span>'+n+'</span><b style="color:#10b981">'+c+'</b></div>';});
|
|
}
|
|
html+='<div style="margin-top:5px;padding-top:4px;border-top:1px solid rgba(100,116,139,0.3);font-size:8px;color:#64748b;text-align:center"><a href="/wevia-master.html" style="color:#06b6d4">Master</a> · <a href="/agents-archi.html" style="color:#06b6d4">Archi</a> · <a href="/wevia-meeting-rooms.html" style="color:#06b6d4">Rooms</a> · <a href="https://paperclip.weval-consulting.com" style="color:#06b6d4" target="_blank">Paperclip</a></div>';
|
|
body.innerHTML=html;
|
|
if(ts) ts.textContent=new Date().toLocaleTimeString('fr-FR',{hour:'2-digit',minute:'2-digit',second:'2-digit'});
|
|
}catch(e){}
|
|
}
|
|
setTimeout(tick,1500);setInterval(tick,30000);
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |