Server-Übersicht Metric

Watcher/Controllers/MonitoringController.cs

@@ -453,6 +453,34 @@ public class MonitoringController : Controller
         return Ok(data);
     }
 
+    [HttpGet("current-metrics/{serverId}")]
+    public async Task<IActionResult> 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)
     {

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);
             }
         }
     }