From 5879673aeb963dff85bcd0e454effa6a8944a18e Mon Sep 17 00:00:00 2001
From: Daniel Habenicht <danielhabenicht@icloud.com>
Date: Mon, 11 Aug 2025 23:07:22 +0200
Subject: [PATCH] Graphen fertig

---
 Watcher/Controllers/MonitoringController.cs | 26 +++++++-----------
 Watcher/Views/Server/Details.cshtml         | 30 ++++++++++-----------
 Watcher/wwwroot/js/server_uptime.js         |  0
 3 files changed, 25 insertions(+), 31 deletions(-)
 create mode 100644 Watcher/wwwroot/js/server_uptime.js

diff --git a/Watcher/Controllers/MonitoringController.cs b/Watcher/Controllers/MonitoringController.cs
index 68264f9..3357bf2 100644
--- a/Watcher/Controllers/MonitoringController.cs
+++ b/Watcher/Controllers/MonitoringController.cs
@@ -232,17 +232,15 @@ public class MonitoringController : Controller
     }
 
     [HttpGet("cpu-usage")]
-    public async Task<IActionResult> GetCpuUsageData()
+    public async Task<IActionResult> GetCpuUsageData(int serverId)
     {
         var oneDayAgo = DateTime.UtcNow.AddDays(-1);
         var data = await _context.Metrics
-                                .Where(m => m.Timestamp >= oneDayAgo)
+                                .Where(m => m.Timestamp >= oneDayAgo && m.ServerId == serverId)
                                 .OrderBy(m => m.Timestamp)
                                 .Select(m => new
                                 {
-                                    // Hier die Formatierung anpassen
-                                    // 'o' ist der Standard-Formatbezeichner für ISO 8601-Format mit Zeitzone
-                                    label = m.Timestamp.ToUniversalTime().ToString("o"), // Wichtig: ToUniversalTime() für Konsistenz
+                                    label = m.Timestamp.ToUniversalTime().ToString("o"),
                                     data = m.CPU_Load
                                 })
                                 .ToListAsync();
@@ -251,17 +249,15 @@ public class MonitoringController : Controller
     }
 
     [HttpGet("ram-usage")]
-    public async Task<IActionResult> GetRamUsageData()
+    public async Task<IActionResult> GetRamUsageData(int serverId)
     {
         var oneDayAgo = DateTime.UtcNow.AddDays(-1);
         var data = await _context.Metrics
-                                .Where(m => m.Timestamp >= oneDayAgo)
+                                .Where(m => m.Timestamp >= oneDayAgo && m.ServerId == serverId)
                                 .OrderBy(m => m.Timestamp)
                                 .Select(m => new
                                 {
-                                    // Hier die Formatierung anpassen
-                                    // 'o' ist der Standard-Formatbezeichner für ISO 8601-Format mit Zeitzone
-                                    label = m.Timestamp.ToUniversalTime().ToString("o"), // Wichtig: ToUniversalTime() für Konsistenz
+                                    label = m.Timestamp.ToUniversalTime().ToString("o"),
                                     data = m.RAM_Load
                                 })
                                 .ToListAsync();
@@ -270,18 +266,16 @@ public class MonitoringController : Controller
     }
 
     [HttpGet("gpu-usage")]
-    public async Task<IActionResult> GetGpuUsageData()
+    public async Task<IActionResult> GetGpuUsageData(int serverId)
     {
         var oneDayAgo = DateTime.UtcNow.AddDays(-1);
         var data = await _context.Metrics
-                                .Where(m => m.Timestamp >= oneDayAgo)
+                                .Where(m => m.Timestamp >= oneDayAgo && m.ServerId == serverId)
                                 .OrderBy(m => m.Timestamp)
                                 .Select(m => new
                                 {
-                                    // Hier die Formatierung anpassen
-                                    // 'o' ist der Standard-Formatbezeichner für ISO 8601-Format mit Zeitzone
-                                    label = m.Timestamp.ToUniversalTime().ToString("o"), // Wichtig: ToUniversalTime() für Konsistenz
-                                    data = m.RAM_Load
+                                    label = m.Timestamp.ToUniversalTime().ToString("o"),
+                                    data = m.GPU_Load
                                 })
                                 .ToListAsync();
 
diff --git a/Watcher/Views/Server/Details.cshtml b/Watcher/Views/Server/Details.cshtml
index 72dc53c..2a8be81 100644
--- a/Watcher/Views/Server/Details.cshtml
+++ b/Watcher/Views/Server/Details.cshtml
@@ -52,21 +52,21 @@
 
     <div class="mt-4">
         <h6><i class="bi bi-graph-up me-1"></i>CPU Last</h6>
-        <div class="bg-light border rounded p-4 text-center text-muted" style="height: 1000px; width: 100%">
+        <div class="bg-light border rounded p-4 text-center text-muted" style="height: 500px; width: 100%">
             <canvas id="cpuUsageChart" style="width: 800px; height: 400px; border: 1px solid red;"></canvas>
         </div>
     </div>
 
     </div>
         <h6><i class="bi bi-graph-up me-1"></i>RAM Last</h6>
-        <div class="bg-light border rounded p-4 text-center text-muted" style="height: 1000px; width: 100%">
+        <div class="bg-light border rounded p-4 text-center text-muted" style="height: 500px; width: 100%">
             <canvas id="ramUsageChart" style="width: 800px; height: 400px; border: 1px solid red;"></canvas>
         </div>
     </div>
 
     <div class="mt-4"></div>
         <h6><i class="bi bi-graph-up me-1"></i>GPU Last</h6>
-        <div class="bg-light border rounded p-4 text-center text-muted" style="height: 1000px; width: 100%">
+        <div class="bg-light border rounded p-4 text-center text-muted" style="height: 500px; width: 100%">
             <canvas id="gpuUsageChart" style="width: 800px; height: 400px; border: 1px solid red;"></canvas>
         </div>
     </div>
@@ -81,8 +81,8 @@
     <script>
         document.addEventListener("DOMContentLoaded", function () {
             const ctx_cpu = document.getElementById('cpuUsageChart').getContext('2d');
-            const ctx_cpu = document.getElementById('ramUsageChart').getContext('2d');
-            const ctx_cpu = document.getElementById('gpuUsageChart').getContext('2d');
+            const ctx_ram = document.getElementById('ramUsageChart').getContext('2d');
+            const ctx_gpu = document.getElementById('gpuUsageChart').getContext('2d');
 
             const cpuChart = new Chart(ctx_cpu, {
                 type: 'line',
@@ -107,7 +107,7 @@
                             max: 100,
                             title: {
                                 display: true,
-                                text: 'Prozent'
+                                text: 'Auslastung in %'
                             }
                         },
                         x: {
@@ -194,7 +194,7 @@
 
             async function loadCpuData() {
                 try {
-                    const response = await fetch('/monitoring/cpu-usage');
+                    const response = await fetch('/monitoring/cpu-usage?serverId=@Model.Id');
                     if (!response.ok) {
                         throw new Error(`HTTP-Fehler: ${response.status}`);
                     }
@@ -217,7 +217,7 @@
 
             async function loadRamData() {
                 try {
-                    const response = await fetch('/monitoring/ram-usage');
+                    const response = await fetch('/monitoring/ram-usage?serverId=@Model.Id');
                     if (!response.ok) {
                         throw new Error(`HTTP-Fehler: ${response.status}`);
                     }
@@ -229,10 +229,10 @@
                         return;
                     }
 
-                    cpuChart.data.labels = data.map(d => d.label ?? '');
-                    cpuChart.data.datasets[0].data = data.map(d => Number(d.data));
+                    ramChart.data.labels = data.map(d => d.label ?? '');
+                    ramChart.data.datasets[0].data = data.map(d => Number(d.data));
 
-                    cpuChart.update();
+                    ramChart.update();
                 } catch (err) {
                     console.error('Fehler beim Laden der RAM-Daten:', err);
                 }
@@ -240,7 +240,7 @@
 
             async function loadGpuData() {
                 try {
-                    const response = await fetch('/monitoring/gpu-usage');
+                    const response = await fetch('/monitoring/gpu-usage?serverId=@Model.Id');
                     if (!response.ok) {
                         throw new Error(`HTTP-Fehler: ${response.status}`);
                     }
@@ -252,10 +252,10 @@
                         return;
                     }
 
-                    cpuChart.data.labels = data.map(d => d.label ?? '');
-                    cpuChart.data.datasets[0].data = data.map(d => Number(d.data));
+                    gpuChart.data.labels = data.map(d => d.label ?? '');
+                    gpuChart.data.datasets[0].data = data.map(d => Number(d.data));
 
-                    cpuChart.update();
+                    gpuChart.update();
                 } catch (err) {
                     console.error('Fehler beim Laden der GPU-Daten:', err);
                 }
diff --git a/Watcher/wwwroot/js/server_uptime.js b/Watcher/wwwroot/js/server_uptime.js
new file mode 100644
index 0000000..e69de29