188 lines
7.9 KiB
HTML
188 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>WEVAL — SSO Monitor L99</title>
|
|
<style>
|
|
:root{--bg:#09090b;--s1:#18181b;--s2:#27272a;--acc:#3b82f6;--g:#22c55e;--r:#ef4444;--t:#fafafa;--dim:#a1a1aa;--hf:'JetBrains Mono',monospace;--bf:'Inter',sans-serif}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:var(--bf);background:var(--bg);color:var(--t);min-height:100vh;padding:20px}
|
|
.wrap{max-width:1200px;margin:0 auto}
|
|
.hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}
|
|
.hdr h1{font-size:1.3rem;font-weight:700}.hdr h1 b{color:var(--acc)}
|
|
.badge{padding:4px 12px;border-radius:20px;font-size:.7rem;font-family:var(--hf);text-transform:uppercase;letter-spacing:1px}
|
|
.badge-ok{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);color:var(--g)}
|
|
.badge-fail{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);color:var(--r)}
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:20px 0}
|
|
.card{background:var(--s1);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:20px}
|
|
.card h3{font-size:.75rem;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
|
|
.big{font-size:2.5rem;font-weight:700;font-family:var(--hf)}
|
|
.big.green{color:var(--g)}.big.red{color:var(--r)}.big.blue{color:var(--acc)}
|
|
.sub{font-size:.8rem;color:var(--dim);margin-top:4px}
|
|
.pages{margin:20px 0}
|
|
.pages table{width:100%;border-collapse:collapse}
|
|
.pages th,.pages td{padding:8px 12px;text-align:left;border-bottom:1px solid rgba(255,255,255,.04)}
|
|
.pages th{font-size:.7rem;color:var(--dim);text-transform:uppercase}
|
|
.pages td{font-size:.85rem;font-family:var(--hf)}
|
|
.st{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
|
|
.st.ok{background:var(--g);box-shadow:0 0 8px rgba(34,197,94,.4)}
|
|
.st.fail{background:var(--r);box-shadow:0 0 8px rgba(239,68,68,.4)}
|
|
.btn{padding:8px 16px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:var(--s2);color:var(--t);cursor:pointer;font-size:.8rem;transition:.2s}
|
|
.btn:hover{border-color:var(--acc);background:rgba(59,130,246,.1)}
|
|
.btn.running{opacity:.5;pointer-events:none}
|
|
.diag{background:var(--s1);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:16px;margin:16px 0;font-size:.82rem;line-height:1.6}
|
|
.diag h3{color:var(--acc);margin-bottom:8px}
|
|
.hist{display:flex;align-items:flex-end;gap:4px;height:60px;margin-top:12px}
|
|
.hist-bar{flex:1;background:var(--g);border-radius:3px 3px 0 0;min-width:12px;transition:.3s;position:relative}
|
|
.hist-bar.fail{background:var(--r)}
|
|
.hist-bar:hover::after{content:attr(data-tip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--s2);padding:4px 8px;border-radius:4px;font-size:.65rem;white-space:nowrap;font-family:var(--hf)}
|
|
.loading{text-align:center;padding:40px;color:var(--dim)}
|
|
@keyframes spin{to{transform:rotate(360deg)}}
|
|
.spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--dim);border-top-color:var(--acc);border-radius:50%;animation:spin .6s linear infinite}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="hdr">
|
|
<h1><b>WEVAL</b> SSO Monitor L99</h1>
|
|
<div style="display:flex;align-items:center;gap:12px">
|
|
<span id="status-badge" class="badge badge-ok">LOADING</span>
|
|
<button class="btn" id="btn-run" onclick="runTest()">▶ Run Test Now</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h3>Score</h3>
|
|
<div class="big green" id="score">—</div>
|
|
<div class="sub" id="score-sub">Loading...</div>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Pages Protégées</h3>
|
|
<div class="big blue" id="pages-count">—</div>
|
|
<div class="sub">Authentik Forward Auth</div>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Watchdog IA</h3>
|
|
<div class="big green" id="watchdog">—</div>
|
|
<div class="sub" id="watchdog-sub">Groq llama-3.3-70b</div>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Historique</h3>
|
|
<div class="hist" id="history"></div>
|
|
<div class="sub" id="hist-sub">Dernières exécutions</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="diag-section" style="display:none">
|
|
<div class="diag">
|
|
<h3>🧠 Derniers Diagnostics IA</h3>
|
|
<pre id="diag-content" style="color:var(--dim);white-space:pre-wrap"></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pages">
|
|
<h3 style="font-size:.85rem;margin-bottom:12px">Pages Protégées — Détail</h3>
|
|
<div id="pages-table"><div class="loading"><span class="spinner"></span> Chargement...</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API = '/api/sso-monitor.php';
|
|
|
|
async function load() {
|
|
try {
|
|
const r = await fetch(API);
|
|
const d = await r.json();
|
|
|
|
// Score
|
|
const s = d.latest;
|
|
document.getElementById('score').textContent = s ? s.score+'%' : '—';
|
|
document.getElementById('score').className = 'big ' + (s && s.score === 100 ? 'green' : 'red');
|
|
document.getElementById('score-sub').textContent = s ? `${s.pass}/${s.total} pass — ${s.date}` : 'No data';
|
|
|
|
// Badge
|
|
const badge = document.getElementById('status-badge');
|
|
badge.textContent = d.status;
|
|
badge.className = 'badge ' + (d.status === 'OK' ? 'badge-ok' : 'badge-fail');
|
|
|
|
// Pages count
|
|
document.getElementById('pages-count').textContent = d.protected_pages;
|
|
|
|
// Watchdog
|
|
document.getElementById('watchdog').textContent = d.watchdog;
|
|
document.getElementById('watchdog').className = 'big ' + (d.watchdog === 'ACTIVE' ? 'green' : 'red');
|
|
|
|
// History bars
|
|
const hist = document.getElementById('history');
|
|
hist.innerHTML = '';
|
|
(d.history || []).forEach(h => {
|
|
const bar = document.createElement('div');
|
|
bar.className = 'hist-bar' + (h.score < 100 ? ' fail' : '');
|
|
bar.style.height = h.score + '%';
|
|
bar.setAttribute('data-tip', h.date + ' — ' + h.score + '%');
|
|
hist.appendChild(bar);
|
|
});
|
|
|
|
// IA Diagnostics
|
|
if (d.ia_diagnostics && d.ia_diagnostics.length > 0) {
|
|
document.getElementById('diag-section').style.display = 'block';
|
|
document.getElementById('diag-content').textContent = d.ia_diagnostics.join('\n\n');
|
|
}
|
|
|
|
// Pages table — run live test
|
|
loadPages();
|
|
} catch(e) {
|
|
document.getElementById('score').textContent = 'ERR';
|
|
document.getElementById('score').className = 'big red';
|
|
}
|
|
}
|
|
|
|
async function loadPages() {
|
|
const table = document.getElementById('pages-table');
|
|
table.innerHTML = '<div class="loading"><span class="spinner"></span> Test en cours sur 51 pages...</div>';
|
|
|
|
try {
|
|
const r = await fetch(API + '?action=run', {method:'POST'});
|
|
const d = await r.json();
|
|
|
|
// Parse output
|
|
const lines = (d.output || '').split('\n');
|
|
const mainLine = lines[0] || '';
|
|
const match = mainLine.match(/(\d+)\/(\d+)\s*\((\d+)%\)/);
|
|
|
|
if (match) {
|
|
document.getElementById('score').textContent = match[3]+'%';
|
|
document.getElementById('score').className = 'big ' + (match[3]==='100' ? 'green' : 'red');
|
|
document.getElementById('score-sub').textContent = `${match[1]}/${match[2]} pass — just now`;
|
|
}
|
|
|
|
table.innerHTML = '<div style="color:var(--g);font-family:var(--hf);font-size:.85rem;padding:16px">' + d.output.replace(/\n/g,'<br>') + '</div>';
|
|
} catch(e) {
|
|
table.innerHTML = '<div style="color:var(--r);padding:16px">Error: '+e.message+'</div>';
|
|
}
|
|
}
|
|
|
|
async function runTest() {
|
|
const btn = document.getElementById('btn-run');
|
|
btn.textContent = '⏳ Running...';
|
|
btn.classList.add('running');
|
|
|
|
try {
|
|
const r = await fetch(API + '?action=run', {method:'POST'});
|
|
const d = await r.json();
|
|
btn.textContent = '✅ Done';
|
|
load();
|
|
} catch(e) {
|
|
btn.textContent = '❌ Error';
|
|
}
|
|
|
|
setTimeout(() => { btn.textContent = '▶ Run Test Now'; btn.classList.remove('running'); }, 3000);
|
|
}
|
|
|
|
load();
|
|
setInterval(load, 300000); // Refresh every 5min
|
|
</script>
|
|
</body>
|
|
</html>
|