c03a99d07a
Ich habe das UI Testweise nochmal erweitert und die Art wie wir die SNMP Daten abrufen und anzeigen nochmal überarbeitet. Es gibt jetzt eine kleine API die über Javascript in Intervallen die Daten aktualisiert. In der Datei Changelog sind nochmal die genauen Änderungen erklärt.
186 lines
7.5 KiB
PHP
186 lines
7.5 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
|
|
/**
|
|
* Server-Dashboard (Ansicht).
|
|
*
|
|
* Zeigt Server-Kennzahlen an (Hostname, Uptime, CPU, RAM, Datenträger).
|
|
* Erwartetes Array: `$serverStatus` mit Schlüsseln: hostname, uptime, cpu_usage,
|
|
* memory_usage, disk_usage_c, last_update.
|
|
*/
|
|
|
|
/** @var array<string, mixed> $serverStatus */
|
|
?>
|
|
|
|
<!-- Content Row -->
|
|
<div class="d-sm-flex align-items-center justify-content-between mb-4">
|
|
<h1 class="h3 mb-0 text-gray-800">Server-Dashboard</h1>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Hostname -->
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-left-primary shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
|
|
Hostname
|
|
</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
|
<?php echo htmlspecialchars((string)($serverStatus['hostname'] ?? 'n/a'), ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8'); ?>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-server fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Betriebssystem -->
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-left-success shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
|
|
Betriebssystem
|
|
</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
|
<?php echo htmlspecialchars((string)($serverStatus['os'] ?? 'n/a'), ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8'); ?>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-desktop fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CPU-Auslastung -->
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-left-warning shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
|
|
CPU-Auslastung
|
|
</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
|
<span id="cpu_card_value"><?php echo (int)($serverStatus['cpu_usage'] ?? 0); ?></span> %
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-microchip fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RAM-Auslastung -->
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-left-info shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
|
RAM-Auslastung
|
|
</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
|
<span id="mem_card_value"><?php echo (int)($serverStatus['memory_usage'] ?? 0); ?></span> %
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-memory fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Disk C: / Root -->
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-left-secondary shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">
|
|
Datenträger C: / Root
|
|
</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
|
<span id="disk_usage_text"><?php echo isset($serverStatus['disk_usage_c']) ? (int)$serverStatus['disk_usage_c'] : 'n/a'; ?></span> %
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-hdd fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Uptime -->
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-left-dark shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-dark text-uppercase mb-1">
|
|
System Uptime
|
|
</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
|
<span id="uptime_text"><?php echo htmlspecialchars((string)($serverStatus['uptime'] ?? 'n/a'), ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8'); ?></span>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-clock fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 mb-2">
|
|
<div class="small text-gray-600">Letztes Update: <span id="snmp_last_update"></span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function(){
|
|
const diskEl = document.getElementById('disk_usage_text');
|
|
const uptimeEl = document.getElementById('uptime_text');
|
|
const cpuEl = document.getElementById('cpu_card_value');
|
|
const memEl = document.getElementById('mem_card_value');
|
|
const lastEl = document.getElementById('snmp_last_update');
|
|
|
|
function updateUI(data){
|
|
if(!data) return;
|
|
if(diskEl) diskEl.textContent = (data.disk_usage_c !== null && data.disk_usage_c !== undefined) ? Math.round(data.disk_usage_c) : 'n/a';
|
|
if(uptimeEl) uptimeEl.textContent = data.uptime || 'n/a';
|
|
if(cpuEl) cpuEl.textContent = (data.cpu_usage !== null && data.cpu_usage !== undefined) ? Math.round(data.cpu_usage) : 0;
|
|
if(memEl) memEl.textContent = (data.memory_usage !== null && data.memory_usage !== undefined) ? Math.round(data.memory_usage) : 0;
|
|
if(lastEl) lastEl.textContent = data.last_update ? new Date(data.last_update * 1000).toLocaleTimeString() : '';
|
|
}
|
|
|
|
async function fetchStatus(){
|
|
try{
|
|
const res = await fetch('api/snmp_status.php');
|
|
if(!res.ok) throw new Error('Network response not ok');
|
|
const json = await res.json();
|
|
updateUI(json);
|
|
} catch(e){
|
|
console.error('Abruf SNMP fehlgeschlagen', e);
|
|
}
|
|
}
|
|
|
|
fetchStatus();
|
|
setInterval(fetchStatus, 5000);
|
|
});
|
|
</script>
|