stephan/kiddo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

release: 0.2.3

Browse Source
This commit is contained in:
Stephan Wilkens
2026-01-15 17:52:21 +01:00
parent 5850ef8358
commit 9ad9501722
128 changed files with 171 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
backend/templates/index.html
View File

@ -102,18 +102,23 @@
<div class="metric-card" id="metricCpu">
<div class="label"><i data-lucide="cpu"></i> CPU</div>
<div class="value">-</div>
<div class="metric-bar"><div class="metric-bar-fill primary" id="metricCpuBar"></div></div>
</div>
<div class="metric-card" id="metricRam">
<div class="label"><i data-lucide="memory-stick"></i> RAM</div>
<div class="value">-</div>
<div class="metric-bar"><div class="metric-bar-fill info" id="metricRamBar"></div></div>
</div>
<div class="metric-card" id="metricGpu">
<div class="label"><i data-lucide="monitor"></i> GPU</div>
<div class="value">-</div>
<div class="metric-bar"><div class="metric-bar-fill warning" id="metricGpuBar"></div></div>
</div>
<div class="metric-card" id="metricNet">
<div class="label"><i data-lucide="network"></i> Netzwerk</div>
<div class="value">-</div>
<div class="metric-bar"><div class="metric-bar-fill success" id="metricNetBar"></div></div>
<div class="text-muted" style="font-size: 0.75rem; margin-top: 6px;">Skala: 100 Mbps</div>
</div>
</div>
<div class="text-muted" style="font-size: 0.75rem; margin-top: 0.5rem;">Aktualisierung alle 5 Sekunden.</div>
@ -551,22 +556,33 @@
try {
const data = await api('/system/metrics');
document.querySelector('#metricCpu .value').textContent = `${data.cpu_percent.toFixed(1)}%`;
document.getElementById('metricCpuBar').style.width = `${Math.min(100, data.cpu_percent).toFixed(1)}%`;
const ramGb = data.ram_total_mb / 1024.0;
document.querySelector('#metricRam .value').textContent = `${data.ram_used_percent.toFixed(1)}% (${ramGb.toFixed(1)} GB)`;
document.getElementById('metricRamBar').style.width = `${Math.min(100, data.ram_used_percent).toFixed(1)}%`;
if (data.gpu_present && data.gpu_vram_total_mb) {
const gpuGb = data.gpu_vram_total_mb / 1024.0;
const gpuPct = data.gpu_vram_used_percent ?? 0;
document.querySelector('#metricGpu .value').textContent = `${gpuPct.toFixed(1)}% (${gpuGb.toFixed(1)} GB)`;
document.getElementById('metricGpuBar').style.width = `${Math.min(100, gpuPct).toFixed(1)}%`;
} else {
document.querySelector('#metricGpu .value').textContent = 'Nicht verfuegbar';
document.getElementById('metricGpuBar').style.width = '0%';
}
document.querySelector('#metricNet .value').textContent = `${data.net_rx_mbps.toFixed(1)} / ${data.net_tx_mbps.toFixed(1)} Mbps`;
const netPeak = Math.max(data.net_rx_mbps, data.net_tx_mbps);
const netPercent = Math.min(100, (netPeak / 100.0) * 100.0);
document.getElementById('metricNetBar').style.width = `${netPercent.toFixed(1)}%`;
lucide.createIcons();
} catch (err) {
document.querySelector('#metricCpu .value').textContent = 'Fehler';
document.querySelector('#metricRam .value').textContent = 'Fehler';
document.querySelector('#metricGpu .value').textContent = 'Fehler';
document.querySelector('#metricNet .value').textContent = 'Fehler';
document.getElementById('metricCpuBar').style.width = '0%';
document.getElementById('metricRamBar').style.width = '0%';
document.getElementById('metricGpuBar').style.width = '0%';
document.getElementById('metricNetBar').style.width = '0%';
}
}