gilles/nano_metrics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity

feat: type de jauge configurable (compact / standard)

Browse Source 
- ServerConfig: champ gauge_type (défaut "compact")
- CSS: classes .gs-* pour la BatteryGauge standard (label + bar 9px + gloss interne)
- Grid: helper renderGaugeRow() — sélectionne compact ou standard selon la config
- Grid: rerenderAll() pour appliquer le changement sans recharger la page
- Popup config serveur: select "Type de jauge" dans la section Affichage des tuiles

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gilles Soulier
2026-05-23 05:10:28 +02:00
parent 22b429f247
commit fdf76477e5
4 changed files with 74 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/js/grid.js
+42 -19
View File
@@ -36,6 +36,28 @@ const Grid = (() => {
return '';
}
function renderGaugeRow(faIcon, tip, label, pct, fillClass, valStr, extra) {
const standard = (App.serverConfig?.gauge_type ?? 'compact') === 'standard';
if (standard) {
return `<div class="gs-row">
<div class="gs-header">
<span class="gs-ico" data-tip="${tip}"><i class="fa-solid fa-${faIcon}"></i></span>
<span class="gs-lbl">${label}</span>
<span class="gs-val">${valStr}</span>${extra || ''}
</div>
<div class="gs-bar">
<div class="gs-fill ${fillClass}" style="width:${(pct ?? 0).toFixed(1)}%"></div>
<div class="gs-gloss"></div>
</div>
</div>`;
}
return `<div class="g-row">
<div class="g-ico" data-tip="${tip}"><i class="fa-solid fa-${faIcon}"></i></div>
<div class="g-bar"><div class="g-fill ${fillClass}" style="width:${(pct ?? 0).toFixed(0)}%"></div></div>
<span class="g-val">${valStr}</span>${extra || ''}
</div>`;
}
function renderTile(agent, metrics) {
const id = agent.id;
const sc = statusClass(agent);
@@ -77,24 +99,19 @@ const Grid = (() => {
<div class="t-led ${ledClass(agent.status)}"></div>
</div>
<div class="tile-gauges">
<div class="g-row">
<div class="g-ico" data-tip="CPU"><i class="fa-solid fa-microchip"></i></div>
<div class="g-bar"><div class="g-fill ${offline ? '' : gFill(cpu ?? 0)}"
style="width:${offline ? 0 : (cpu ?? 0).toFixed(0)}%"></div></div>
<span class="g-val">${offline ? '—' : fmtPct(cpu)}</span>
</div>
<div class="g-row">
<div class="g-ico" data-tip="RAM"><i class="fa-solid fa-memory"></i></div>
<div class="g-bar"><div class="g-fill ${offline ? '' : gFill(memPct ?? 0)}"
style="width:${offline ? 0 : (memPct ?? 0).toFixed(0)}%"></div></div>
<span class="g-val">${offline ? '—' : (metrics?.memory_used && metrics?.memory_total ? fmt(metrics.memory_used) + '/' + fmt(metrics.memory_total) : '—')}</span>
</div>
<div class="g-row">
<div class="g-ico" data-tip="Disque"><i class="fa-solid fa-hard-drive"></i></div>
<div class="g-bar"><div class="g-fill ${offline ? '' : (diskPct >= (App.serverConfig?.warn_disk ?? 75) ? 'w' : '')}"
style="width:${offline ? 0 : (diskPct ?? 0).toFixed(0)}%"></div></div>
<span class="g-val">${offline ? '—' : (metrics?.hdd_used && metrics?.hdd_total ? fmt(metrics.hdd_used) + '/' + fmt(metrics.hdd_total) : '—')}</span>${smartIco}
</div>
${renderGaugeRow('microchip', 'CPU', 'CPU',
offline ? 0 : (cpu ?? 0),
offline ? '' : gFill(cpu ?? 0),
offline ? '—' : fmtPct(cpu))}
${renderGaugeRow('memory', 'RAM', 'MÉMOIRE',
offline ? 0 : (memPct ?? 0),
offline ? '' : gFill(memPct ?? 0),
offline ? '—' : (metrics?.memory_used && metrics?.memory_total ? fmt(metrics.memory_used) + '/' + fmt(metrics.memory_total) : '—'))}
${renderGaugeRow('hard-drive', 'Disque', 'DISQUE',
offline ? 0 : (diskPct ?? 0),
offline ? '' : (diskPct >= (App.serverConfig?.warn_disk ?? 75) ? 'w' : ''),
offline ? '—' : (metrics?.hdd_used && metrics?.hdd_total ? fmt(metrics.hdd_used) + '/' + fmt(metrics.hdd_total) : '—'),
smartIco)}
</div>
<div class="tile-foot">
<span class="tile-foot-info">
@@ -173,6 +190,12 @@ const Grid = (() => {
document.getElementById('stat-err').textContent = err;
}
function rerenderAll() {
const grid = document.getElementById('agents-grid');
if (!grid) return;
grid.innerHTML = [..._agents.values()].map(({ agent, metrics }) => renderTile(agent, metrics)).join('');
}
function removeAgent(id) {
_agents.delete(id);
const el = document.getElementById('tile-' + id);
@@ -191,5 +214,5 @@ const Grid = (() => {
updateStats();
}
return { refresh, update, updateStatus, removeAgent, getAgent, fmt, fmtPct };
return { refresh, update, updateStatus, removeAgent, rerenderAll, getAgent, fmt, fmtPct };
})();