From 23cac83061e63f7592b6c30314f17ff951a92750 Mon Sep 17 00:00:00 2001 From: triggermeelmo Date: Mon, 17 Nov 2025 00:47:51 +0100 Subject: [PATCH] =?UTF-8?q?Server-=C3=9Cbersicht=20Metric?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Watcher/Controllers/MonitoringController.cs | 28 +++++++++ Watcher/Views/Server/_ServerCard.cshtml | 69 +++++++++++++-------- 2 files changed, 72 insertions(+), 25 deletions(-) diff --git a/Watcher/Controllers/MonitoringController.cs b/Watcher/Controllers/MonitoringController.cs index 3fda28c..547fe44 100644 --- a/Watcher/Controllers/MonitoringController.cs +++ b/Watcher/Controllers/MonitoringController.cs @@ -453,6 +453,34 @@ public class MonitoringController : Controller return Ok(data); } + [HttpGet("current-metrics/{serverId}")] + public async Task GetCurrentMetrics(int serverId) + { + var latestMetric = await _context.Metrics + .Where(m => m.ServerId == serverId) + .OrderByDescending(m => m.Timestamp) + .FirstOrDefaultAsync(); + + if (latestMetric == null) + { + return Ok(new + { + cpu = 0.0, + ram = 0.0, + gpu = 0.0, + hasData = false + }); + } + + return Ok(new + { + cpu = latestMetric.CPU_Load, + ram = latestMetric.RAM_Load, + gpu = latestMetric.GPU_Load, + hasData = true + }); + } + // Metric Input Byte zu Gigabyte umwandeln public static double CalculateGigabyte(double metricInput) { diff --git a/Watcher/Views/Server/_ServerCard.cshtml b/Watcher/Views/Server/_ServerCard.cshtml index bfe1d6a..4d94081 100644 --- a/Watcher/Views/Server/_ServerCard.cshtml +++ b/Watcher/Views/Server/_ServerCard.cshtml @@ -125,40 +125,59 @@ // Lade aktuelle Metriken für alle Server async function loadCurrentMetrics() { - const metricElements = document.querySelectorAll('.metric-value'); - - for (const element of metricElements) { - const serverId = element.getAttribute('data-server-id'); - const metricType = element.getAttribute('data-metric'); + // Sammle alle eindeutigen Server-IDs + const serverIds = new Set(); + document.querySelectorAll('.metric-value').forEach(el => { + const serverId = el.getAttribute('data-server-id'); + if (serverId) serverIds.add(serverId); + }); + // Lade Metriken für jeden Server + for (const serverId of serverIds) { try { - let endpoint = ''; - if (metricType === 'cpu') endpoint = `/monitoring/cpu-usage?serverId=${serverId}&hours=0.1`; - else if (metricType === 'ram') endpoint = `/monitoring/ram-usage?serverId=${serverId}&hours=0.1`; - else if (metricType === 'gpu') endpoint = `/monitoring/gpu-usage?serverId=${serverId}&hours=0.1`; - - const response = await fetch(endpoint); + const response = await fetch(`/monitoring/current-metrics/${serverId}`); if (response.ok) { const data = await response.json(); - if (data && data.length > 0) { - const latestValue = data[data.length - 1].data; - element.textContent = `${latestValue.toFixed(1)}%`; - // Update progress bar - const card = element.closest('.card'); - let barClass = ''; - if (metricType === 'cpu') barClass = '.server-cpu-bar'; - else if (metricType === 'ram') barClass = '.server-ram-bar'; - else if (metricType === 'gpu') barClass = '.server-gpu-bar'; + if (data.hasData) { + // Update CPU + updateMetric(serverId, 'cpu', data.cpu, '.server-cpu-bar', 'bg-info'); - const bar = card.querySelector(barClass); - if (bar) { - bar.style.width = `${latestValue}%`; - } + // Update RAM + updateMetric(serverId, 'ram', data.ram, '.server-ram-bar', 'bg-success'); + + // Update GPU (falls vorhanden) + updateMetric(serverId, 'gpu', data.gpu, '.server-gpu-bar', 'bg-danger'); } } } catch (err) { - console.error(`Fehler beim Laden der ${metricType}-Metriken für Server ${serverId}:`, err); + console.error(`Fehler beim Laden der Metriken für Server ${serverId}:`, err); + } + } + } + + function updateMetric(serverId, metricType, value, barClass, defaultColorClass) { + // Finde das Element für diesen Server und Metrik-Typ + const metricElement = document.querySelector(`.metric-value[data-server-id="${serverId}"][data-metric="${metricType}"]`); + if (!metricElement) return; + + // Update Text + metricElement.textContent = `${value.toFixed(1)}%`; + + // Update Progress Bar + const card = metricElement.closest('.card'); + const bar = card.querySelector(barClass); + if (bar) { + bar.style.width = `${value}%`; + + // Optional: Farbe basierend auf Wert ändern + bar.className = 'progress-bar'; + if (value >= 90) { + bar.classList.add('bg-danger'); + } else if (value >= 75) { + bar.classList.add('bg-warning'); + } else { + bar.classList.add(defaultColorClass); } } }