gilles/nano_metrics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity
Files
f93f5741da511bf47d1ccfe0511f6a258d1d54df
nano_metrics/dashboard/index.html
T
Gilles Soulier f93f5741da feat: badges SMART pills, versionning serveur, fix copier HTTP 
- Dashboard: icônes SMART → pills OK/USAGÉ/PREFAIL/HS cliquables
  (tuile + popup détail + popup SMART redessiné pour novices)
- Serveur: constante version 0.1.0 exposée via WS server_stats → footer
- Fix copier script install en HTTP (isSecureContext avant clipboard API)
- install.sh: ajout ethtool, suppression logique OVERWRITE_CONFIG

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-23 05:56:44 +02:00

191 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html data-theme="dark" lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nanometrics</title>
<link rel="icon" type="image/x-icon" href="favicon/favicon.ico">
<link rel="icon" type="image/svg+xml" href="favicon/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/favicon-180.png">
<link rel="manifest" href="favicon/site.webmanifest">
<meta name="theme-color" content="#282828">
<link rel="stylesheet" href="vendor/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="tooltip"></div>
<!-- HEADER -->
<div class="header">
<div class="logo">
<div class="logo-led"></div>
<span class="logo-name">NANOMETRICS</span>
<span class="logo-ver">v1.0</span>
</div>
<div class="h-sep"></div>
<div class="h-stats" id="h-stats">
<div class="h-stat"><span class="lbl">AGENTS</span><span class="val c-n" id="stat-total">0</span></div>
<div class="h-stat"><span class="lbl">OK</span><span class="val c-ok" id="stat-ok">0</span></div>
<div class="h-stat"><span class="lbl">WARN</span><span class="val c-warn" id="stat-warn">0</span></div>
<div class="h-stat"><span class="lbl">ERR</span><span class="val c-err" id="stat-err">0</span></div>
</div>
<div class="h-spacer"></div>
<div class="hbtn" id="btn-theme" onclick="App.toggleTheme()" data-tip="Thème clair / sombre">
<i class="fa-solid fa-moon" id="theme-icon"></i>
</div>
<div class="hbtn" id="btn-srvcfg" onclick="Popups.showSrvCfg()" data-tip="Configuration serveur / interface">
<i class="fa-solid fa-sliders"></i>
</div>
</div>
<!-- GRILLE -->
<div class="main"><div class="agents-grid" id="agents-grid"></div></div>
<!-- FOOTER -->
<div class="footer">
<div class="f-mode">LIVE</div>
<div class="f-cell"><i class="fa-solid fa-server" style="font-size:10px"></i><span>SERVEUR</span></div>
<div class="f-cell">
<i class="fa-solid fa-microchip" style="font-size:10px"></i>
<span class="f-val" id="srv-cpu">—</span>
<div class="f-minibar"><div class="f-minifill" id="srv-cpu-bar"></div></div>
</div>
<div class="f-cell">
<i class="fa-solid fa-memory" style="font-size:10px"></i>
<span class="f-val" id="srv-mem">—</span>
<div class="f-minibar"><div class="f-minifill" id="srv-mem-bar"></div></div>
</div>
<div class="f-cell" style="gap:4px">
<i class="fa-solid fa-code-branch" style="font-size:9px;color:var(--ink-4)"></i>
<span id="srv-ver" style="font-family:var(--font-mono);font-size:9px;color:var(--ink-4)">—</span>
</div>
<div class="f-spacer"></div>
<div class="f-right">
<i class="fa-solid fa-rotate"></i>
<span>Actualisation : <span class="f-time" id="f-time">—</span></span>
</div>
</div>
<!-- POPUP DÉTAIL AGENT -->
<div class="overlay" id="overlay-detail" style="display:none" onclick="if(event.target===this)Popups.hideDetail()">
<div class="popup" id="popup-detail" onclick="event.stopPropagation()">
<div class="pop-head">
<div class="agent-icon-wrap" id="pop-icon-wrap" data-tip="Changer l'icône">
<span id="pop-icon-fa"><i class="fa-solid fa-server"></i></span>
<img id="pop-icon-img" src="" alt="" style="display:none">
<div class="agent-icon-overlay"><i class="fa-solid fa-camera"></i><span>Changer</span></div>
</div>
<input type="file" id="icon-upload" accept=".jpg,.jpeg,.png,.webp" style="display:none">
<div style="flex:1">
<div class="pop-host" id="pop-host">—</div>
<div class="pop-ip" id="pop-ip">—</div>
<div id="icon-hint" style="font-size:10px;color:var(--ink-4);font-family:var(--font-terminal);margin-top:2px">
Cliquer sur l'icône pour personnaliser · JPG PNG WEBP · max 128×128 px
</div>
</div>
<div class="pop-led" id="pop-led"></div>
<div class="pop-close" onclick="Popups.hideDetail()" data-tip="Fermer"><i class="fa-solid fa-xmark"></i></div>
</div>
<div class="pop-body" id="pop-body"></div>
<div class="pop-foot">
<span class="pop-uptime" id="pop-uptime"></span>
<span style="font-family:var(--font-terminal);font-size:9px;color:var(--ink-4);display:flex;align-items:center;gap:4px"
data-tip="Taille sauvegardée sur le serveur">
<i class="fa-solid fa-up-right-and-down-left-from-center"></i>Redimensionnable
</span>
<div class="btn-agent-cfg" onclick="Popups.showAgentCfg()" data-tip="Configurer l'agent">
<i class="fa-solid fa-gears"></i>
</div>
</div>
</div>
</div>
<!-- POPUP CONFIG AGENT -->
<div class="overlay" id="overlay-agentcfg" style="display:none;z-index:200" onclick="if(event.target===this)this.style.display='none'">
<div class="popup" id="popup-agentcfg" style="width:520px;max-width:96vw;max-height:90vh" onclick="event.stopPropagation()">
<div style="background:var(--bg-3);padding:14px 18px;border-bottom:1px solid var(--border-2);display:flex;align-items:center;gap:10px">
<div style="width:32px;height:32px;border-radius:8px;background:var(--bg-4);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:15px"><i class="fa-solid fa-gears"></i></div>
<div style="flex:1"><div style="font-weight:700;font-size:14px">Configuration de l'agent</div>
<div style="font-size:11px;color:var(--ink-4);font-family:var(--font-terminal)" id="agentcfg-sub">—</div></div>
<div class="pop-close" onclick="this.closest('.overlay').style.display='none'" data-tip="Fermer"><i class="fa-solid fa-xmark"></i></div>
</div>
<div style="padding:18px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;max-height:62vh" id="agentcfg-body"></div>
<div style="padding:12px 18px;border-top:1px solid var(--border-2);background:var(--bg-3);display:flex;align-items:center;gap:8px">
<div style="flex:1;display:flex;align-items:center;gap:6px;font-family:var(--font-terminal);font-size:11px;color:var(--ink-4)">
<div style="width:6px;height:6px;border-radius:50%;background:var(--ok)"></div>
<span>Config synchronisée avec l'agent</span>
</div>
<button class="btn" onclick="this.closest('.overlay').style.display='none'">Annuler</button>
<button class="btn primary" onclick="Popups.sendAgentConfig()"><i class="fa-solid fa-paper-plane"></i> Envoyer à l'agent</button>
</div>
</div>
</div>
<!-- POPUP CONFIG SERVEUR -->
<div class="overlay" id="overlay-srvcfg" style="display:none" onclick="if(event.target===this)Popups.hideSrvCfg()">
<div class="popup" id="popup-srvcfg" style="width:400px;max-width:96vw;max-height:88vh" onclick="event.stopPropagation()">
<div style="background:var(--bg-3);padding:14px 18px;border-bottom:1px solid var(--border-2);display:flex;align-items:center;gap:10px">
<div style="width:32px;height:32px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:var(--bg-0);font-size:15px"><i class="fa-solid fa-sliders"></i></div>
<span style="flex:1;font-weight:700;font-size:14px">Configuration interface</span>
<div class="pop-close" onclick="Popups.hideSrvCfg()" data-tip="Fermer"><i class="fa-solid fa-xmark"></i></div>
</div>
<div class="scfg-body" id="srvcfg-body"></div>
<div style="padding:12px 18px;border-top:1px solid var(--border-2);background:var(--bg-3);display:flex;gap:8px;justify-content:flex-end">
<button class="btn" onclick="Popups.hideSrvCfg()">Annuler</button>
<button class="btn primary" onclick="Popups.saveSrvCfg()"><i class="fa-solid fa-floppy-disk"></i> Sauvegarder</button>
</div>
</div>
</div>
<!-- POPUP SMART -->
<div class="overlay" id="overlay-smart" style="display:none;z-index:300" onclick="if(event.target===this)this.style.display='none'">
<div class="popup" id="popup-smart" style="width:500px;max-width:96vw;max-height:88vh" onclick="event.stopPropagation()">
<div style="background:var(--bg-3);padding:14px 18px;border-bottom:1px solid var(--border-2);display:flex;align-items:center;gap:10px">
<div style="width:32px;height:32px;border-radius:8px;background:var(--bg-4);display:flex;align-items:center;justify-content:center;color:var(--ok);font-size:15px"><i class="fa-solid fa-shield-heart"></i></div>
<div style="flex:1"><div style="font-weight:700;font-size:14px">Santé du disque dur</div>
<div style="font-size:11px;color:var(--ink-4);font-family:var(--font-terminal)" id="smart-sub">—</div></div>
<div class="pop-close" onclick="this.closest('.overlay').style.display='none'" data-tip="Fermer"><i class="fa-solid fa-xmark"></i></div>
</div>
<div style="padding:18px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;max-height:70vh" id="smart-body"></div>
<div style="padding:12px 18px;border-top:1px solid var(--border-2);background:var(--bg-3);display:flex;align-items:center;gap:8px">
<span style="flex:1;font-size:10px;color:var(--ink-4);font-family:var(--font-terminal)">
<i class="fa-solid fa-circle-info" style="margin-right:4px"></i>Données via smartctl
</span>
<button class="btn primary" onclick="this.closest('.overlay').style.display='none'"><i class="fa-solid fa-xmark"></i> Fermer</button>
</div>
</div>
</div>
<!-- DIALOG SUPPRESSION AGENT -->
<div class="overlay" id="overlay-del" style="display:none;z-index:400" onclick="if(event.target===this)this.style.display='none'">
<div class="popup" style="width:360px;max-width:96vw" onclick="event.stopPropagation()">
<div style="padding:20px 20px 0">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
<div style="width:36px;height:36px;border-radius:8px;background:color-mix(in srgb,var(--err) 15%,transparent);display:flex;align-items:center;justify-content:center;color:var(--err);font-size:16px;flex-shrink:0"><i class="fa-solid fa-triangle-exclamation"></i></div>
<div>
<div style="font-weight:700;font-size:14px">Supprimer l'agent</div>
<div style="font-size:12px;color:var(--fg2);margin-top:2px">Cette action est irréversible</div>
</div>
</div>
<p style="font-size:13px;margin:0 0 8px">Supprimer <strong id="del-agent-name">—</strong> ?<br>
<span style="font-size:11px;color:var(--fg2)">Toutes les métriques historiques seront effacées.</span></p>
</div>
<div style="padding:16px 20px;display:flex;justify-content:flex-end;gap:8px">
<button class="btn" onclick="document.getElementById('overlay-del').style.display='none'">Annuler</button>
<button class="btn" id="del-agent-confirm"
style="background:var(--err);color:#fff;border-color:var(--err)"
onclick="Popups.doDeleteAgent()"><i class="fa-solid fa-trash"></i> Supprimer</button>
</div>
</div>
</div>
<script src="js/api.js"></script>
<script src="js/charts.js"></script>
<script src="js/grid.js"></script>
<script src="js/popups.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink