Add index.html
This commit is contained in:
Corback
+719
@@ -0,0 +1,719 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CoyoteOS — Dashboard</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg:#0a0a0f; --surface:#111118; --surface2:#18181f; --border:#1f1f2e;
|
||||
--text:#e2e2f0; --muted:#6b6b88;
|
||||
--green:#22c55e; --orange:#f97316; --red:#ef4444;
|
||||
--blue:#3b82f6; --purple:#a855f7; --accent:#7c3aed;
|
||||
}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh}
|
||||
|
||||
/* Header */
|
||||
header{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;
|
||||
border-bottom:1px solid var(--border);background:linear-gradient(90deg,#0d0d18,#110d1a);
|
||||
position:sticky;top:0;z-index:100}
|
||||
.logo{font-size:1.1rem;font-weight:700;letter-spacing:.05em;color:#fff}
|
||||
.logo span{color:var(--accent)}
|
||||
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);
|
||||
box-shadow:0 0 8px var(--green);animation:pulse 2s infinite;display:inline-block}
|
||||
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
|
||||
.last-update{font-size:.72rem;color:var(--muted)}
|
||||
|
||||
/* Layout */
|
||||
main{padding:1.5rem 2rem;max-width:1600px;margin:0 auto;display:flex;flex-direction:column;gap:1.2rem}
|
||||
|
||||
/* Section title */
|
||||
.section-title{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;
|
||||
letter-spacing:.15em;margin-bottom:.8rem;display:flex;align-items:center;gap:.6rem}
|
||||
.section-title::after{content:"";flex:1;height:1px;background:var(--border)}
|
||||
|
||||
/* Cards */
|
||||
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.2rem 1.4rem}
|
||||
|
||||
/* Grids */
|
||||
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
|
||||
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
|
||||
@media(max-width:1000px){.grid-3{grid-template-columns:repeat(2,1fr)}}
|
||||
@media(max-width:650px){.grid-3,.grid-2{grid-template-columns:1fr}}
|
||||
|
||||
/* Progress bars */
|
||||
.bar-bg{background:#1a1a2a;border-radius:6px;height:5px;overflow:hidden}
|
||||
.bar-fill{height:100%;border-radius:6px;transition:width .6s ease}
|
||||
|
||||
/* Colors */
|
||||
.c-green{color:var(--green)} .c-orange{color:var(--orange)} .c-red{color:var(--red)}
|
||||
.c-blue{color:var(--blue)} .c-purple{color:var(--purple)} .c-muted{color:var(--muted)}
|
||||
|
||||
/* Pipeline card */
|
||||
.pipeline-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
|
||||
.pipeline-header{display:flex;align-items:center;justify-content:space-between;
|
||||
padding:1rem 1.4rem;border-bottom:1px solid var(--border);
|
||||
background:linear-gradient(135deg,#0d0d18,#160d24);cursor:pointer;user-select:none}
|
||||
.pipeline-header h2{font-size:.85rem;font-weight:600;color:#c4b5fd}
|
||||
.pipeline-body{padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:1rem}
|
||||
.pipeline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
|
||||
.pipeline-stat{text-align:center}
|
||||
.pipeline-stat .n{font-size:2.2rem;font-weight:700}
|
||||
.pipeline-stat .l{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:.2rem}
|
||||
.current-pdf{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.8rem 1rem}
|
||||
.pdf-name{font-size:.9rem;font-weight:600;color:#c4b5fd;margin-bottom:.4rem;word-break:break-all}
|
||||
.chunk-progress{display:flex;align-items:center;gap:.8rem;margin-top:.6rem}
|
||||
.chunk-bar-wrap{flex:1;background:#1a1a2a;border-radius:4px;height:8px;overflow:hidden}
|
||||
.chunk-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--purple));border-radius:4px;transition:width .4s}
|
||||
.chunk-label{font-size:.75rem;color:var(--muted);white-space:nowrap}
|
||||
.log-box{background:#080810;border:1px solid var(--border);border-radius:8px;padding:.8rem;
|
||||
font-family:'Cascadia Code','Consolas',monospace;font-size:.7rem;max-height:160px;overflow-y:auto;line-height:1.6}
|
||||
.log-ok{color:var(--green)} .log-err{color:var(--red)} .log-info{color:#6b6b88}
|
||||
.log-cur{color:#c4b5fd} .log-chunk{color:var(--blue)} .log-dl{color:var(--orange)}
|
||||
|
||||
/* VM cards */
|
||||
.vm-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
|
||||
.vm-header{padding:.8rem 1.2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.7rem}
|
||||
.vm-dot{width:9px;height:9px;border-radius:50%}
|
||||
.vm-dot.up{background:var(--green);box-shadow:0 0 6px var(--green)}
|
||||
.vm-dot.down{background:var(--red)}
|
||||
.vm-name{font-size:.85rem;font-weight:600}
|
||||
.vm-ip{font-size:.7rem;color:var(--muted);margin-left:auto;font-family:monospace}
|
||||
.vm-body{padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem}
|
||||
.vm-row{display:flex;align-items:center;justify-content:space-between}
|
||||
.vm-row .lbl{font-size:.72rem;color:var(--muted)}
|
||||
.vm-row .val{font-size:.85rem;font-weight:600}
|
||||
.mini-bar-wrap{flex:1;margin:0 .8rem;background:#1a1a2a;border-radius:3px;height:4px;overflow:hidden}
|
||||
.mini-bar{height:100%;border-radius:3px;transition:width .5s}
|
||||
|
||||
/* Summary */
|
||||
.summary-card{background:linear-gradient(135deg,#0f0a1e,#0a1020);border:1px solid #2a1a4a;
|
||||
border-radius:12px;padding:1.4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;text-align:center}
|
||||
.sum-item .n{font-size:1.8rem;font-weight:700}
|
||||
.sum-item .l{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:.3rem}
|
||||
.sum-divider{border-left:1px solid var(--border)}
|
||||
|
||||
/* Sites */
|
||||
.sites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
|
||||
.site-btn{background:var(--surface);border:1px solid var(--border);border-radius:10px;
|
||||
padding:1rem;text-decoration:none;color:var(--text);
|
||||
display:flex;flex-direction:column;align-items:center;gap:.5rem;
|
||||
transition:border-color .2s,background .2s}
|
||||
.site-btn:hover{background:var(--surface2);border-color:var(--accent)}
|
||||
.site-btn .site-icon{font-size:1.5rem}
|
||||
.site-btn .site-name{font-size:.8rem;font-weight:600;text-align:center}
|
||||
.site-btn .site-status{display:flex;align-items:center;gap:.4rem;font-size:.68rem}
|
||||
.sdot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
|
||||
.sdot-up{background:var(--green);box-shadow:0 0 5px var(--green)}
|
||||
.sdot-down{background:var(--red);box-shadow:0 0 5px var(--red)}
|
||||
|
||||
/* Badge */
|
||||
.badge{display:inline-flex;align-items:center;gap:.35rem;border-radius:20px;
|
||||
padding:.2rem .7rem;font-size:.68rem;font-weight:600}
|
||||
.badge-running{background:#0a2a0a;border:1px solid #22c55e44;color:var(--green)}
|
||||
.badge-idle{background:#1a1a1a;border:1px solid #33333366;color:var(--muted)}
|
||||
.badge-done{background:#0a1a2a;border:1px solid #3b82f644;color:var(--blue)}
|
||||
|
||||
/* Collapsible */
|
||||
.coll-hdr{display:flex;align-items:center;justify-content:space-between;
|
||||
cursor:pointer;user-select:none;margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--border)}
|
||||
.coll-hdr .coll-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
|
||||
.coll-arrow{font-size:.7rem;color:var(--muted);transition:transform .2s}
|
||||
.coll-arrow.open{transform:rotate(180deg)}
|
||||
.coll-body{overflow:hidden;transition:max-height .3s ease;max-height:0}
|
||||
.coll-body.open{max-height:600px}
|
||||
.coll-inner{padding-top:.4rem}
|
||||
|
||||
/* Container list */
|
||||
.ct-row{display:flex;align-items:center;gap:.4rem;padding:.12rem 0;font-size:.7rem}
|
||||
.ct-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
|
||||
.ct-dot.up{background:var(--green);box-shadow:0 0 4px var(--green)}
|
||||
.ct-dot.down{background:var(--red)}
|
||||
.ct-name{color:var(--text);flex:1}
|
||||
.ct-img{color:var(--muted);font-size:.63rem}
|
||||
|
||||
/* Ollama models */
|
||||
.ollama-model{display:flex;align-items:center;gap:.5rem;padding:.2rem 0;font-size:.72rem}
|
||||
.ollama-model .m-name{color:var(--green);font-weight:600;flex:1}
|
||||
.ollama-model .m-size{color:var(--muted)}
|
||||
|
||||
/* AdminSys */
|
||||
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
|
||||
.admin-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
|
||||
.admin-card-header{padding:.8rem 1.2rem;background:linear-gradient(135deg,#120a1e,#0a1220);
|
||||
border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.6rem}
|
||||
.admin-card-header .a-title{font-size:.85rem;font-weight:600;flex:1}
|
||||
.admin-card-body{padding:.8rem 1.2rem;display:flex;flex-direction:column;gap:.4rem}
|
||||
|
||||
/* Reboot buttons */
|
||||
.reboot-row{display:flex;gap:.6rem;flex-wrap:wrap;padding:.4rem 0}
|
||||
.btn-reboot{background:#1a0a0a;border:1px solid #ef444444;color:var(--red);
|
||||
border-radius:8px;padding:.4rem .9rem;font-size:.75rem;font-weight:600;cursor:pointer;
|
||||
transition:background .2s;white-space:nowrap}
|
||||
.btn-reboot:hover{background:#2a0a0a}
|
||||
|
||||
/* Group container controls */
|
||||
.group-card{background:var(--surface2);border:1px solid var(--border);border-radius:8px;margin-bottom:.4rem}
|
||||
.group-hdr{display:flex;align-items:center;gap:.5rem;padding:.5rem .8rem;cursor:pointer}
|
||||
.group-icon{font-size:.9rem}
|
||||
.group-name{font-size:.78rem;font-weight:600;flex:1}
|
||||
.group-badge{font-size:.62rem;color:var(--muted);background:#1a1a2a;border-radius:4px;padding:.1rem .4rem}
|
||||
.btn-group-toggle{font-size:.67rem;color:var(--muted);background:transparent;border:1px solid var(--border);
|
||||
border-radius:4px;padding:.15rem .5rem;cursor:pointer;transition:background .15s}
|
||||
.btn-group-toggle:hover{background:var(--border)}
|
||||
.group-containers{padding:0 .8rem .5rem;display:flex;flex-direction:column;gap:.25rem}
|
||||
.ct-control-row{display:flex;align-items:center;gap:.4rem}
|
||||
.ct-control-name{flex:1;font-size:.72rem;color:var(--text)}
|
||||
.btn-ct{font-size:.62rem;border:none;border-radius:4px;padding:.2rem .5rem;cursor:pointer;font-weight:600;transition:opacity .15s}
|
||||
.btn-ct:hover{opacity:.8}
|
||||
.btn-ct.stop{background:#2a0a0a;color:var(--red)}
|
||||
.btn-ct.start{background:#0a2a0a;color:var(--green)}
|
||||
.btn-ct.restart{background:#0a1a2a;color:var(--blue)}
|
||||
.btn-ct:disabled{opacity:.4;cursor:not-allowed}
|
||||
|
||||
/* Toast */
|
||||
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:#1a1a2a;border:1px solid var(--border);
|
||||
border-radius:8px;padding:.7rem 1.2rem;font-size:.8rem;z-index:999;
|
||||
animation:fadeIn .3s ease;pointer-events:none}
|
||||
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="logo"><span>Coyote</span>OS — Dashboard</div>
|
||||
<div style="display:flex;align-items:center;gap:1.2rem">
|
||||
<span><span class="live-dot"></span><span style="font-size:.8rem;margin-left:.4rem">Live</span></span>
|
||||
<span class="last-update" id="last-update">Chargement...</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- ── PIPELINES ── -->
|
||||
<div>
|
||||
<div class="section-title">Pipelines actifs</div>
|
||||
<div class="grid-2">
|
||||
|
||||
<!-- MAO -->
|
||||
<div class="pipeline-card">
|
||||
<div class="pipeline-header" onclick="toggleColl(this.nextElementSibling)">
|
||||
<h2>qwen2.5 — Wiki MAO</h2>
|
||||
<div style="display:flex;align-items:center;gap:.6rem">
|
||||
<span id="pipeline-badge" class="badge badge-idle">● Vérification...</span>
|
||||
<span style="color:var(--muted);font-size:.8rem">▲</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coll-body open" style="max-height:600px">
|
||||
<div class="pipeline-body">
|
||||
<div class="pipeline-grid">
|
||||
<div class="pipeline-stat"><div class="n c-green" id="p-done">—</div><div class="l">Terminés</div></div>
|
||||
<div class="pipeline-stat"><div class="n" style="color:#888">77</div><div class="l">Total FR/EN</div></div>
|
||||
<div class="pipeline-stat"><div class="n c-orange" id="p-failed">—</div><div class="l">Échecs</div></div>
|
||||
<div class="pipeline-stat"><div class="n c-blue" id="p-speed">—</div><div class="l">Moy. s/chunk</div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:.4rem">
|
||||
<span style="font-size:.72rem;color:var(--muted)">Progression</span>
|
||||
<span style="font-size:.72rem;font-weight:600" id="p-pct">0%</span>
|
||||
</div>
|
||||
<div class="bar-bg" style="height:8px"><div class="bar-fill" id="p-bar" style="width:0%;background:var(--purple)"></div></div>
|
||||
</div>
|
||||
<div class="current-pdf">
|
||||
<div class="pdf-name" id="p-name">Attente...</div>
|
||||
<div style="font-size:.7rem;color:var(--muted)" id="p-eta"></div>
|
||||
<div class="chunk-progress">
|
||||
<div class="chunk-bar-wrap"><div class="chunk-bar" id="p-chunk-bar" style="width:0%"></div></div>
|
||||
<span class="chunk-label" id="p-chunk-label">chunk —/—</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:.67rem;color:var(--muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.1em">Log</div>
|
||||
<div class="log-box" id="log-box">Chargement...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fallout -->
|
||||
<div class="pipeline-card">
|
||||
<div class="pipeline-header" style="background:linear-gradient(135deg,#0d1010,#0d1a10)" onclick="toggleColl(this.nextElementSibling)">
|
||||
<h2 style="color:#4ade80">nomic-embed-text — Fallout ChromaDB</h2>
|
||||
<div style="display:flex;align-items:center;gap:.6rem">
|
||||
<span id="fallout-badge" class="badge badge-idle">● Vérification...</span>
|
||||
<span style="color:var(--muted);font-size:.8rem">▲</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coll-body open" style="max-height:600px">
|
||||
<div class="pipeline-body">
|
||||
<div class="pipeline-grid">
|
||||
<div class="pipeline-stat"><div class="n c-green" id="f-done">—</div><div class="l">Indexés</div></div>
|
||||
<div class="pipeline-stat"><div class="n" style="color:#888">17</div><div class="l">Total</div></div>
|
||||
<div class="pipeline-stat"><div class="n c-orange" id="f-failed">—</div><div class="l">Échecs</div></div>
|
||||
<div class="pipeline-stat"><div class="n c-blue" id="f-speed">—</div><div class="l">Moy. s/embed</div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:.4rem">
|
||||
<span style="font-size:.72rem;color:var(--muted)">Progression</span>
|
||||
<span style="font-size:.72rem;font-weight:600" id="f-pct">0%</span>
|
||||
</div>
|
||||
<div class="bar-bg" style="height:8px"><div class="bar-fill" id="f-bar" style="width:0%;background:var(--green)"></div></div>
|
||||
</div>
|
||||
<div class="current-pdf">
|
||||
<div class="pdf-name" id="f-name" style="color:#4ade80">Attente...</div>
|
||||
<div class="chunk-progress">
|
||||
<div class="chunk-bar-wrap"><div class="chunk-bar" id="f-chunk-bar" style="width:0%;background:linear-gradient(90deg,#22c55e,#4ade80)"></div></div>
|
||||
<span class="chunk-label" id="f-chunk-label">chunk —/—</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:.67rem;color:var(--muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.1em">Log</div>
|
||||
<div class="log-box" id="f-log-box">Chargement...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── VMs ── -->
|
||||
<div>
|
||||
<div class="section-title">État des VMs</div>
|
||||
<div class="grid-3">
|
||||
|
||||
<!-- Ampère -->
|
||||
<div class="vm-card">
|
||||
<div class="vm-header">
|
||||
<div class="vm-dot up" id="vm-ampere-dot"></div>
|
||||
<div><div class="vm-name">Ampère</div><div style="font-size:.65rem;color:var(--muted)">ARM 4c / 24 Go — Cerveau</div></div>
|
||||
<div class="vm-ip">82.70.224.131</div>
|
||||
</div>
|
||||
<div class="vm-body">
|
||||
<div class="vm-row"><span class="lbl">CPU</span>
|
||||
<div class="mini-bar-wrap"><div class="mini-bar" id="vm-a-cpu-bar" style="width:0%"></div></div>
|
||||
<span class="val" id="vm-a-cpu">—</span></div>
|
||||
<div class="vm-row"><span class="lbl">RAM</span>
|
||||
<div class="mini-bar-wrap"><div class="mini-bar" id="vm-a-mem-bar" style="width:0%;background:var(--blue)"></div></div>
|
||||
<span class="val c-blue" id="vm-a-mem">—</span></div>
|
||||
<div class="vm-row"><span class="lbl">Disque</span>
|
||||
<div class="mini-bar-wrap"><div class="mini-bar" id="vm-a-disk-bar" style="width:0%;background:var(--purple)"></div></div>
|
||||
<span class="val c-purple" id="vm-a-disk">—</span></div>
|
||||
<div class="vm-row"><span class="lbl">Uptime</span><span class="val c-green" id="vm-a-uptime">—</span></div>
|
||||
<div class="vm-row"><span class="lbl">Réseau ↓/↑</span><span class="val" id="vm-a-net" style="font-size:.78rem">—</span></div>
|
||||
<!-- Ollama -->
|
||||
<div class="coll-hdr" onclick="toggleColl(this.nextElementSibling)">
|
||||
<span class="coll-lbl">Ollama — modèles actifs</span><span class="coll-arrow open">▲</span>
|
||||
</div>
|
||||
<div class="coll-body open"><div class="coll-inner" id="vm-a-ollama">Chargement...</div></div>
|
||||
<!-- Containers -->
|
||||
<div class="coll-hdr" onclick="toggleColl(this.nextElementSibling)">
|
||||
<span class="coll-lbl">Containers Docker (live)</span><span class="coll-arrow open">▲</span>
|
||||
</div>
|
||||
<div class="coll-body open"><div class="coll-inner" id="vm-a-containers">Chargement...</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Guardian -->
|
||||
<div class="vm-card">
|
||||
<div class="vm-header">
|
||||
<div class="vm-dot up" id="vm-guardian-dot"></div>
|
||||
<div><div class="vm-name">Guardian</div><div style="font-size:.65rem;color:var(--muted)">AMD 1c / 1 Go — Bouclier</div></div>
|
||||
<div class="vm-ip">82.70.226.48</div>
|
||||
</div>
|
||||
<div class="vm-body">
|
||||
<div class="vm-row"><span class="lbl">CPU</span>
|
||||
<div class="mini-bar-wrap"><div class="mini-bar" id="vm-g-cpu-bar" style="width:0%"></div></div>
|
||||
<span class="val" id="vm-g-cpu">—</span></div>
|
||||
<div class="vm-row"><span class="lbl">RAM</span>
|
||||
<div class="mini-bar-wrap"><div class="mini-bar" id="vm-g-mem-bar" style="width:0%;background:var(--blue)"></div></div>
|
||||
<span class="val c-blue" id="vm-g-mem">—</span></div>
|
||||
<div class="vm-row"><span class="lbl">Disque</span>
|
||||
<div class="mini-bar-wrap"><div class="mini-bar" id="vm-g-disk-bar" style="width:0%;background:var(--purple)"></div></div>
|
||||
<span class="val c-purple" id="vm-g-disk">—</span></div>
|
||||
<div class="vm-row"><span class="lbl">Uptime</span><span class="val c-green" id="vm-g-uptime">—</span></div>
|
||||
<div class="coll-hdr" onclick="toggleColl(this.nextElementSibling)">
|
||||
<span class="coll-lbl">Containers Docker</span><span class="coll-arrow open">▲</span>
|
||||
</div>
|
||||
<div class="coll-body open"><div class="coll-inner">
|
||||
<div class="ct-row"><div class="ct-dot up"></div><span class="ct-name">pdffetch</span><span class="ct-img">python:alpine</span></div>
|
||||
<div class="ct-row"><div class="ct-dot up"></div><span class="ct-name">adguardhome</span><span class="ct-img">adguard/adguardhome</span></div>
|
||||
<div class="ct-row"><div class="ct-dot up"></div><span class="ct-name">wg-easy</span><span class="ct-img">ghcr.io/wg-easy</span></div>
|
||||
<div class="ct-row"><div class="ct-dot up"></div><span class="ct-name">node-exporter</span><span class="ct-img">prom/node-exporter</span></div>
|
||||
<div class="ct-row"><div class="ct-dot up"></div><span class="ct-name">portainer_agent</span><span class="ct-img">portainer/agent</span></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vigile -->
|
||||
<div class="vm-card">
|
||||
<div class="vm-header">
|
||||
<div class="vm-dot up" id="vm-vigile-dot"></div>
|
||||
<div><div class="vm-name">Vigile</div><div style="font-size:.65rem;color:var(--muted)">AMD 1c / 1 Go — Sentinelle</div></div>
|
||||
<div class="vm-ip">79.72.30.231</div>
|
||||
</div>
|
||||
<div class="vm-body">
|
||||
<div class="vm-row"><span class="lbl">CPU</span>
|
||||
<div class="mini-bar-wrap"><div class="mini-bar" id="vm-v-cpu-bar" style="width:0%"></div></div>
|
||||
<span class="val" id="vm-v-cpu">—</span></div>
|
||||
<div class="vm-row"><span class="lbl">RAM</span>
|
||||
<div class="mini-bar-wrap"><div class="mini-bar" id="vm-v-mem-bar" style="width:0%;background:var(--blue)"></div></div>
|
||||
<span class="val c-blue" id="vm-v-mem">—</span></div>
|
||||
<div class="vm-row"><span class="lbl">Disque</span>
|
||||
<div class="mini-bar-wrap"><div class="mini-bar" id="vm-v-disk-bar" style="width:0%;background:var(--purple)"></div></div>
|
||||
<span class="val c-purple" id="vm-v-disk">—</span></div>
|
||||
<div class="vm-row"><span class="lbl">Uptime</span><span class="val c-green" id="vm-v-uptime">—</span></div>
|
||||
<div class="coll-hdr" onclick="toggleColl(this.nextElementSibling)">
|
||||
<span class="coll-lbl">Containers Docker</span><span class="coll-arrow open">▲</span>
|
||||
</div>
|
||||
<div class="coll-body open"><div class="coll-inner">
|
||||
<div class="ct-row"><div class="ct-dot up"></div><span class="ct-name">fallout_db</span><span class="ct-img">postgres:16-alpine</span></div>
|
||||
<div class="ct-row"><div class="ct-dot up"></div><span class="ct-name">node-exporter</span><span class="ct-img">prom/node-exporter</span></div>
|
||||
<div class="ct-row"><div class="ct-dot up"></div><span class="ct-name">portainer_agent</span><span class="ct-img">portainer/agent</span></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── RÉSUMÉ 30j ── -->
|
||||
<div>
|
||||
<div class="section-title">Totaux infrastructure — 30 derniers jours</div>
|
||||
<div class="summary-card">
|
||||
<div class="sum-item"><div class="n c-blue" id="sum-rx">—</div><div class="l">Entrant ↓</div></div>
|
||||
<div class="sum-item sum-divider"><div class="n c-purple" id="sum-tx">—</div><div class="l">Sortant ↑</div></div>
|
||||
<div class="sum-item sum-divider"><div class="n" id="sum-total" style="color:#c4b5fd">—</div><div class="l">Total 3 VMs</div></div>
|
||||
</div>
|
||||
<div style="margin-top:.4rem;font-size:.68rem;color:var(--muted);text-align:right">Source : Prometheus PromQL</div>
|
||||
</div>
|
||||
|
||||
<!-- ── ADMINSYS ── -->
|
||||
<div>
|
||||
<div class="section-title">AdminSys</div>
|
||||
<div class="admin-grid">
|
||||
|
||||
<!-- Reboot VMs -->
|
||||
<div class="admin-card">
|
||||
<div class="admin-card-header">
|
||||
<span style="font-size:1.1rem">🔄</span>
|
||||
<span class="a-title">Redémarrage VMs</span>
|
||||
</div>
|
||||
<div class="admin-card-body" style="padding:1rem 1.2rem">
|
||||
<div style="font-size:.72rem;color:var(--muted);margin-bottom:.6rem">⚠️ Double-cliquez pour confirmer le reboot</div>
|
||||
<div class="reboot-row">
|
||||
<button class="btn-reboot" ondblclick="rebootVM('ampere',this)">⚡ Ampère</button>
|
||||
<button class="btn-reboot" ondblclick="rebootVM('guardian',this)">⚡ Guardian</button>
|
||||
<button class="btn-reboot" ondblclick="rebootVM('vigile',this)">⚡ Vigile</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Container groups -->
|
||||
<div class="admin-card" style="grid-column:span 2">
|
||||
<div class="admin-card-header">
|
||||
<span style="font-size:1.1rem">🐋</span>
|
||||
<span class="a-title">Containers Ampère — Groupes</span>
|
||||
<span style="font-size:.68rem;color:var(--muted)">Cliquer sur un groupe pour déployer</span>
|
||||
</div>
|
||||
<div class="admin-card-body" id="groups-body">Chargement...</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── SITES ── -->
|
||||
<div>
|
||||
<div class="section-title">Accès rapides — Services CoyoteOS</div>
|
||||
<div class="sites-grid" id="sites-grid"></div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Toast -->
|
||||
<div id="toast" class="toast" style="display:none"></div>
|
||||
|
||||
<script>
|
||||
// ── Helpers ──────────────────────────────────────────────────────────────
|
||||
function fmt(b){if(!b)return"N/A";if(b>=1e12)return(b/1e12).toFixed(2)+" To";if(b>=1e9)return(b/1e9).toFixed(1)+" Go";if(b>=1e6)return(b/1e6).toFixed(1)+" Mo";if(b>=1e3)return(b/1e3).toFixed(0)+" Ko";return b+" o"}
|
||||
function fmtSpd(b){if(b>=1e6)return(b/1e6).toFixed(1)+" Mo/s";if(b>=1e3)return(b/1e3).toFixed(0)+" Ko/s";return b+" o/s"}
|
||||
function pctColor(p){if(p>=90)return"var(--red)";if(p>=70)return"var(--orange)";return"var(--green)"}
|
||||
function setBar(id,pct,color){const el=document.getElementById(id);if(el){el.style.width=pct+"%";if(color)el.style.background=color}}
|
||||
function setText(id,val){const el=document.getElementById(id);if(el)el.textContent=val}
|
||||
|
||||
function toast(msg, color="var(--green)"){
|
||||
const t=document.getElementById("toast");
|
||||
t.textContent=msg; t.style.color=color; t.style.display="block";
|
||||
setTimeout(()=>t.style.display="none",3000);
|
||||
}
|
||||
|
||||
function toggleColl(body){
|
||||
const open=body.classList.toggle("open");
|
||||
const arrow=body.previousElementSibling?.querySelector(".coll-arrow");
|
||||
if(arrow)arrow.classList.toggle("open",open);
|
||||
}
|
||||
|
||||
// ── Metrics Ampère ───────────────────────────────────────────────────────
|
||||
async function refreshMetrics(){
|
||||
try{
|
||||
const d=await fetch("/metrics").then(r=>r.json());
|
||||
const cpu=d.cpu.percent; const mem=d.memory.percent; const dsk=d.disk.percent;
|
||||
setText("vm-a-cpu",cpu+"%"); document.getElementById("vm-a-cpu").style.color=pctColor(cpu);
|
||||
setBar("vm-a-cpu-bar",cpu,pctColor(cpu));
|
||||
setText("vm-a-mem",mem+"%"); setBar("vm-a-mem-bar",mem,null);
|
||||
setText("vm-a-disk",dsk+"%"); document.getElementById("vm-a-disk").style.color=pctColor(dsk);
|
||||
setBar("vm-a-disk-bar",dsk,pctColor(dsk));
|
||||
const u=d.uptime; setText("vm-a-uptime",u.days+"j "+u.hours+"h "+u.minutes+"m");
|
||||
const net=d.network; setText("vm-a-net","↓"+fmtSpd(net.rx_bps)+" ↑"+fmtSpd(net.tx_bps));
|
||||
setText("last-update","Mis à jour "+new Date().toLocaleTimeString("fr-FR"));
|
||||
}catch(e){document.getElementById("vm-ampere-dot").className="vm-dot down"}
|
||||
}
|
||||
|
||||
// ── Métriques Guardian/Vigile via Prometheus ────────────────────────────
|
||||
async function refreshVmMetrics(instance, prefix){
|
||||
try{
|
||||
const d=await fetch(`/vm-metrics?instance=${instance}`).then(r=>r.json());
|
||||
if(!d.available) return;
|
||||
const cpu=d.cpu||0; const mem=d.mem_pct||0; const dsk=d.disk_pct||0;
|
||||
setText(`vm-${prefix}-cpu`,cpu+"%"); document.getElementById(`vm-${prefix}-cpu`).style.color=pctColor(cpu);
|
||||
setBar(`vm-${prefix}-cpu-bar`,cpu,pctColor(cpu));
|
||||
setText(`vm-${prefix}-mem`,mem+"%"); setBar(`vm-${prefix}-mem-bar`,mem,null);
|
||||
setText(`vm-${prefix}-disk`,dsk+"%"); document.getElementById(`vm-${prefix}-disk`).style.color=pctColor(dsk);
|
||||
setBar(`vm-${prefix}-disk-bar`,dsk,pctColor(dsk));
|
||||
if(d.uptime_human) setText(`vm-${prefix}-uptime`,d.uptime_human);
|
||||
document.getElementById(`vm-${prefix}-dot`).className="vm-dot up";
|
||||
}catch(e){}
|
||||
}
|
||||
|
||||
// ── Ollama ───────────────────────────────────────────────────────────────
|
||||
async function refreshOllama(){
|
||||
try{
|
||||
const models=await fetch("/ollama-ps").then(r=>r.json());
|
||||
const el=document.getElementById("vm-a-ollama");
|
||||
if(!models.length){el.innerHTML='<div style="font-size:.7rem;color:var(--muted)">Aucun modèle chargé</div>';return}
|
||||
el.innerHTML=models.map(m=>`<div class="ollama-model">
|
||||
<span class="m-name">${m.name}</span>
|
||||
<span class="m-size">${m.size_gb}Go</span>
|
||||
</div>`).join("");
|
||||
}catch(e){}
|
||||
}
|
||||
|
||||
// ── Docker Ampère ────────────────────────────────────────────────────────
|
||||
async function refreshDocker(){
|
||||
try{
|
||||
const cs=await fetch("/docker-ps").then(r=>r.json());
|
||||
const el=document.getElementById("vm-a-containers");
|
||||
if(!cs.length){el.innerHTML='<div class="ct-row" style="color:var(--muted)">Aucun container</div>';return}
|
||||
el.innerHTML=cs.map(c=>{
|
||||
const up=c.state==="running";
|
||||
return`<div class="ct-row"><div class="ct-dot ${up?"up":"down"}"></div><span class="ct-name" style="color:${up?"var(--text)":"var(--muted)"}">${c.name}</span><span class="ct-img">${c.image}</span></div>`;
|
||||
}).join("");
|
||||
}catch(e){}
|
||||
}
|
||||
|
||||
// ── Pipelines ────────────────────────────────────────────────────────────
|
||||
function logLine(l){
|
||||
l=l.trim(); if(!l)return"";
|
||||
if(l.match(/OK \(\d/))return`<div class="log-ok">${l}</div>`;
|
||||
if(l.match(/ERREUR|Error/i))return`<div class="log-err">${l}</div>`;
|
||||
if(l.match(/^\[.+\.pdf\]/))return`<div class="log-cur">${l}</div>`;
|
||||
if(l.match(/chunk \d+\/\d+/))return`<div class="log-chunk">${l}</div>`;
|
||||
if(l.match(/Ko|chars|chunks|trouvés|Mo|Download/))return`<div class="log-dl">${l}</div>`;
|
||||
return`<div class="log-info">${l}</div>`;
|
||||
}
|
||||
|
||||
async function refreshPipeline(){
|
||||
try{
|
||||
const d=await fetch("/pipeline").then(r=>r.json());
|
||||
const done=d.done||0; const pct=Math.round((done/77)*100);
|
||||
setText("p-done",done); setText("p-failed",d.failed||0);
|
||||
setText("p-speed",d.avg_chunk_s?d.avg_chunk_s+"s":"—");
|
||||
setText("p-pct",pct+"%"); setBar("p-bar",pct,null);
|
||||
const badge=document.getElementById("pipeline-badge");
|
||||
if(d.running&&d.current_pdf){badge.className="badge badge-running";badge.textContent="● En cours"}
|
||||
else if(d.running){badge.className="badge badge-running";badge.textContent="● Actif"}
|
||||
else if(done>0){badge.className="badge badge-idle";badge.textContent="⏸ Cron 2h00"}
|
||||
else{badge.className="badge badge-idle";badge.textContent="● En attente"}
|
||||
if(d.running&&d.current_pdf){
|
||||
setText("p-name",d.current_pdf);
|
||||
setText("p-eta",(d.eta_current_pdf?"ETA: "+d.eta_current_pdf:"")+(d.last_chunk_s?" · "+d.last_chunk_s+"s/chunk":""));
|
||||
if(d.current_chunk&&d.total_chunks){
|
||||
const cp=Math.round(d.current_chunk/d.total_chunks*100);
|
||||
setBar("p-chunk-bar",cp,null); setText("p-chunk-label","chunk "+d.current_chunk+"/"+d.total_chunks);
|
||||
}
|
||||
}else{setText("p-name",done>0?"En pause — cron 2h00":"Pipeline en attente...");setText("p-eta","")}
|
||||
if(d.log_tail?.length){const b=document.getElementById("log-box");b.innerHTML=d.log_tail.map(logLine).join("");b.scrollTop=b.scrollHeight}
|
||||
}catch(e){}
|
||||
}
|
||||
|
||||
async function refreshFallout(){
|
||||
try{
|
||||
const d=await fetch("/fallout-ingest").then(r=>r.json());
|
||||
const done=d.done||0; const pct=Math.round((done/17)*100);
|
||||
setText("f-done",done); setText("f-failed",d.failed||0);
|
||||
setText("f-speed",d.avg_embed_s?d.avg_embed_s+"s":"—");
|
||||
setText("f-pct",pct+"%"); setBar("f-bar",pct,null);
|
||||
const badge=document.getElementById("fallout-badge");
|
||||
if(d.running&&d.current_pdf){badge.className="badge badge-running";badge.textContent="● En cours"}
|
||||
else if(d.running){badge.className="badge badge-running";badge.textContent="● Actif"}
|
||||
else if(done===17){badge.className="badge badge-done";badge.textContent="✓ 17/17 indexés"}
|
||||
else if(done>0){badge.className="badge badge-done";badge.textContent="✓ "+done+"/17"}
|
||||
else{badge.className="badge badge-idle";badge.textContent="● En attente"}
|
||||
if(d.running&&d.current_pdf){
|
||||
setText("f-name",d.current_pdf);
|
||||
if(d.current_chunk&&d.total_chunks){
|
||||
const cp=Math.round(d.current_chunk/d.total_chunks*100);
|
||||
setBar("f-chunk-bar",cp,null); setText("f-chunk-label","chunk "+d.current_chunk+"/"+d.total_chunks);
|
||||
}
|
||||
}else{setText("f-name",done===17?"✓ Indexation terminée":(done>0?done+"/17 PDFs indexés":"En attente..."))}
|
||||
if(d.log_tail?.length){const b=document.getElementById("f-log-box");b.innerHTML=d.log_tail.map(logLine).join("");b.scrollTop=b.scrollHeight}
|
||||
}catch(e){}
|
||||
}
|
||||
|
||||
// ── Summary ──────────────────────────────────────────────────────────────
|
||||
async function refreshSummary(){
|
||||
try{
|
||||
const d=await fetch("/summary30").then(r=>r.json());
|
||||
setText("sum-rx",d.rx_30d?fmt(d.rx_30d):"via Grafana");
|
||||
setText("sum-tx",d.tx_30d?fmt(d.tx_30d):"via Grafana");
|
||||
setText("sum-total",d.total_bw?fmt(d.total_bw):"via Grafana");
|
||||
}catch(e){}
|
||||
}
|
||||
|
||||
// ── Sites ─────────────────────────────────────────────────────────────────
|
||||
const ICONS={globe:"🌐",book:"📚",git:"🐙",chart:"📊",music:"🎵",studio:"🎹",dash:"🖥️"};
|
||||
async function refreshSites(){
|
||||
try{
|
||||
const sites=await fetch("/sites").then(r=>r.json());
|
||||
document.getElementById("sites-grid").innerHTML=sites.map(s=>{
|
||||
const dot=s.up?"sdot-up":"sdot-down";
|
||||
const lbl=s.up?"En ligne":(s.status?"Erreur "+s.status:"Hors ligne");
|
||||
return`<a class="site-btn" href="${s.url}" target="_blank">
|
||||
<div class="site-icon">${ICONS[s.icon]||"🔗"}</div>
|
||||
<div class="site-name">${s.name}</div>
|
||||
<div class="site-status"><div class="sdot ${dot}"></div><span style="color:${s.up?"var(--green)":"var(--red)"}">${lbl}</span></div>
|
||||
</a>`;
|
||||
}).join("");
|
||||
}catch(e){}
|
||||
}
|
||||
|
||||
// ── AdminSys — Groups ─────────────────────────────────────────────────────
|
||||
let allContainers = [];
|
||||
let groups = [];
|
||||
|
||||
async function loadGroups(){
|
||||
try{
|
||||
[groups, allContainers] = await Promise.all([
|
||||
fetch("/groups").then(r=>r.json()),
|
||||
fetch("/docker-ps").then(r=>r.json())
|
||||
]);
|
||||
renderGroups();
|
||||
}catch(e){}
|
||||
}
|
||||
|
||||
function getContainerState(name){
|
||||
const c=allContainers.find(x=>x.name===name);
|
||||
return c?c.state:"unknown";
|
||||
}
|
||||
|
||||
function renderGroups(){
|
||||
const body=document.getElementById("groups-body");
|
||||
body.innerHTML=groups.map(g=>{
|
||||
const ctHtml=g.containers.map(name=>{
|
||||
const state=getContainerState(name);
|
||||
const up=state==="running"; const unknown=state==="unknown";
|
||||
const dot=unknown?"":up?'<div class="ct-dot up"></div>':'<div class="ct-dot down"></div>';
|
||||
const btns=g.protected?"":`
|
||||
<button class="btn-ct ${up?"stop":"start"}" onclick="ctAction('ampere','${name}','${up?"stop":"start"}',this)">
|
||||
${up?"■ Stop":"▶ Start"}
|
||||
</button>
|
||||
${up?`<button class="btn-ct restart" onclick="ctAction('ampere','${name}','restart',this)">↺</button>`:""}
|
||||
`;
|
||||
return`<div class="ct-control-row">${dot}<span class="ct-control-name" style="color:${unknown?"var(--muted)":up?"var(--text)":"var(--red)"}">${name}</span>${btns}</div>`;
|
||||
}).join("");
|
||||
const runCount=g.containers.filter(n=>getContainerState(n)==="running").length;
|
||||
const allUp=runCount===g.containers.filter(n=>getContainerState(n)!=="unknown").length;
|
||||
const groupBtn=g.protected?"":
|
||||
`<button class="btn-group-toggle" onclick="groupAction('${g.id}','${allUp?"stop":"start"}',this)">${allUp?"■ Stop tout":"▶ Start tout"}</button>`;
|
||||
return`<div class="group-card">
|
||||
<div class="group-hdr" onclick="toggleGrp(this)">
|
||||
<span class="group-icon">${g.icon}</span>
|
||||
<span class="group-name">${g.name}</span>
|
||||
<span class="group-badge">${runCount}/${g.containers.length} up</span>
|
||||
${groupBtn}
|
||||
<span style="color:var(--muted);font-size:.7rem;margin-left:.3rem">▼</span>
|
||||
</div>
|
||||
<div class="group-containers" style="display:none">${ctHtml}</div>
|
||||
</div>`;
|
||||
}).join("");
|
||||
}
|
||||
|
||||
function toggleGrp(hdr){
|
||||
const body=hdr.nextElementSibling;
|
||||
body.style.display=body.style.display==="none"?"flex":"none";
|
||||
body.style.flexDirection="column";
|
||||
}
|
||||
|
||||
async function ctAction(vm, name, action, btn){
|
||||
btn.disabled=true; btn.textContent="...";
|
||||
try{
|
||||
const r=await fetch("/admin/docker",{method:"POST",headers:{"Content-Type":"application/json"},
|
||||
body:JSON.stringify({vm,container:name,action})}).then(r=>r.json());
|
||||
toast(r.ok?`✓ ${name} ${action}`:`✗ Erreur ${name}`,r.ok?"var(--green)":"var(--red)");
|
||||
await new Promise(r=>setTimeout(r,800));
|
||||
allContainers=await fetch("/docker-ps").then(r=>r.json());
|
||||
renderGroups();
|
||||
}catch(e){toast("Erreur réseau","var(--red)");btn.disabled=false}
|
||||
}
|
||||
|
||||
async function groupAction(groupId, action, btn){
|
||||
btn.disabled=true; btn.textContent="...";
|
||||
const g=groups.find(x=>x.id===groupId);
|
||||
if(!g){btn.disabled=false;return}
|
||||
const targets=action==="stop"?g.containers.filter(n=>getContainerState(n)==="running")
|
||||
:g.containers.filter(n=>getContainerState(n)!=="running");
|
||||
for(const name of targets){
|
||||
await fetch("/admin/docker",{method:"POST",headers:{"Content-Type":"application/json"},
|
||||
body:JSON.stringify({vm:"ampere",container:name,action})});
|
||||
}
|
||||
toast(`✓ Groupe ${g.name} — ${action}`,"var(--green)");
|
||||
allContainers=await fetch("/docker-ps").then(r=>r.json());
|
||||
renderGroups();
|
||||
}
|
||||
|
||||
async function rebootVM(vm, btn){
|
||||
btn.textContent="Rebooting..."; btn.disabled=true;
|
||||
try{
|
||||
const r=await fetch("/admin/reboot",{method:"POST",headers:{"Content-Type":"application/json"},
|
||||
body:JSON.stringify({vm})}).then(r=>r.json());
|
||||
toast(r.ok?`⚡ ${vm} reboot lancé`:`✗ Erreur reboot ${vm}`,r.ok?"var(--orange)":"var(--red)");
|
||||
}catch(e){toast("Erreur réseau","var(--red)")}
|
||||
setTimeout(()=>{btn.disabled=false;btn.textContent=`⚡ ${vm.charAt(0).toUpperCase()+vm.slice(1)}`;},5000);
|
||||
}
|
||||
|
||||
// ── Init ─────────────────────────────────────────────────────────────────
|
||||
refreshMetrics();
|
||||
refreshVmMetrics("Guardian","g");
|
||||
refreshVmMetrics("Vigile","v");
|
||||
refreshOllama();
|
||||
refreshDocker();
|
||||
refreshPipeline();
|
||||
refreshFallout();
|
||||
refreshSummary();
|
||||
refreshSites();
|
||||
loadGroups();
|
||||
|
||||
setInterval(refreshMetrics, 5000);
|
||||
setInterval(()=>refreshVmMetrics("Guardian","g"), 15000);
|
||||
setInterval(()=>refreshVmMetrics("Vigile","v"), 15000);
|
||||
setInterval(refreshOllama, 10000);
|
||||
setInterval(refreshDocker, 15000);
|
||||
setInterval(refreshPipeline, 8000);
|
||||
setInterval(refreshFallout, 8000);
|
||||
setInterval(refreshSummary, 60000);
|
||||
setInterval(refreshSites, 30000);
|
||||
setInterval(loadGroups, 20000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user