From 588f5851d4085711ac2f75000ab98f25713fc89d Mon Sep 17 00:00:00 2001
From: daniel-hbn <danielhabenicht@icloud.com>
Date: Mon, 11 Aug 2025 22:35:55 +0200
Subject: [PATCH] Mehr Graphen

---
 Watcher/Controllers/MonitoringController.cs |  38 ++++++
 Watcher/Views/Server/Details.cshtml         | 143 +++++++++++++++++++-
 2 files changed, 178 insertions(+), 3 deletions(-)

diff --git a/Watcher/Controllers/MonitoringController.cs b/Watcher/Controllers/MonitoringController.cs
index e52a760..68264f9 100644
--- a/Watcher/Controllers/MonitoringController.cs
+++ b/Watcher/Controllers/MonitoringController.cs
@@ -249,4 +249,42 @@ public class MonitoringController : Controller
 
         return Ok(data);
     }
+
+    [HttpGet("ram-usage")]
+    public async Task<IActionResult> GetRamUsageData()
+    {
+        var oneDayAgo = DateTime.UtcNow.AddDays(-1);
+        var data = await _context.Metrics
+                                .Where(m => m.Timestamp >= oneDayAgo)
+                                .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
+                                })
+                                .ToListAsync();
+
+        return Ok(data);
+    }
+
+    [HttpGet("gpu-usage")]
+    public async Task<IActionResult> GetGpuUsageData()
+    {
+        var oneDayAgo = DateTime.UtcNow.AddDays(-1);
+        var data = await _context.Metrics
+                                .Where(m => m.Timestamp >= oneDayAgo)
+                                .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
+                                })
+                                .ToListAsync();
+
+        return Ok(data);
+    }
 }
\ No newline at end of file
diff --git a/Watcher/Views/Server/Details.cshtml b/Watcher/Views/Server/Details.cshtml
index 0a99e82..72dc53c 100644
--- a/Watcher/Views/Server/Details.cshtml
+++ b/Watcher/Views/Server/Details.cshtml
@@ -4,7 +4,6 @@
 }
 
 <div id="server-cards-container">
-    <!--  @await Html.PartialAsync("_ServerDetails")  -->
 
     <div class="container mt-4"></div>
     <div class="card shadow-sm">
@@ -58,6 +57,20 @@
         </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%">
+            <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%">
+            <canvas id="gpuUsageChart" style="width: 800px; height: 400px; border: 1px solid red;"></canvas>
+        </div>
+    </div>
+
 </div>
 
 </div>
@@ -67,9 +80,11 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script>
         document.addEventListener("DOMContentLoaded", function () {
-            const ctx = document.getElementById('cpuUsageChart').getContext('2d');
+            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 cpuChart = new Chart(ctx, {
+            const cpuChart = new Chart(ctx_cpu, {
                 type: 'line',
                 data: {
                     labels: [],
@@ -105,6 +120,78 @@
                 }
             });
 
+            const ramChart = new Chart(ctx_ram, {
+                type: 'line',
+                data: {
+                    labels: [],
+                    datasets: [{
+                        label: 'RAM Last (%)',
+                        data: [],
+                        borderColor: 'rgb(255, 99, 132)',
+                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                        fill: true,
+                        tension: 0.3,
+                        pointRadius: 3
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            max: 100,
+                            title: {
+                                display: true,
+                                text: 'Prozent'
+                            }
+                        },
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Zeit'
+                            }
+                        }
+                    }
+                }
+            });
+
+            const gpuChart = new Chart(ctx_gpu, {
+                type: 'line',
+                data: {
+                    labels: [],
+                    datasets: [{
+                        label: 'GPU Last (%)',
+                        data: [],
+                        borderColor: 'rgb(255, 99, 132)',
+                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                        fill: true,
+                        tension: 0.3,
+                        pointRadius: 3
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            max: 100,
+                            title: {
+                                display: true,
+                                text: 'Prozent'
+                            }
+                        },
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Zeit'
+                            }
+                        }
+                    }
+                }
+            });
+
             async function loadCpuData() {
                 try {
                     const response = await fetch('/monitoring/cpu-usage');
@@ -128,11 +215,61 @@
                 }
             }
 
+            async function loadRamData() {
+                try {
+                    const response = await fetch('/monitoring/ram-usage');
+                    if (!response.ok) {
+                        throw new Error(`HTTP-Fehler: ${response.status}`);
+                    }
+
+                    const data = await response.json();
+
+                    if (!Array.isArray(data) || data.length === 0) {
+                        console.warn('Keine RAM-Daten empfangen.');
+                        return;
+                    }
+
+                    cpuChart.data.labels = data.map(d => d.label ?? '');
+                    cpuChart.data.datasets[0].data = data.map(d => Number(d.data));
+
+                    cpuChart.update();
+                } catch (err) {
+                    console.error('Fehler beim Laden der RAM-Daten:', err);
+                }
+            }
+
+            async function loadGpuData() {
+                try {
+                    const response = await fetch('/monitoring/gpu-usage');
+                    if (!response.ok) {
+                        throw new Error(`HTTP-Fehler: ${response.status}`);
+                    }
+
+                    const data = await response.json();
+
+                    if (!Array.isArray(data) || data.length === 0) {
+                        console.warn('Keine GPU-Daten empfangen.');
+                        return;
+                    }
+
+                    cpuChart.data.labels = data.map(d => d.label ?? '');
+                    cpuChart.data.datasets[0].data = data.map(d => Number(d.data));
+
+                    cpuChart.update();
+                } catch (err) {
+                    console.error('Fehler beim Laden der GPU-Daten:', err);
+                }
+            }
+
             // Initiales Laden
             loadCpuData();
+            loadRamData();
+            loadGpuData();
 
             // Alle 30 Sekunden aktualisieren
             setInterval(loadCpuData, 30000);
+            setInterval(loadRamData, 30000);
+            setInterval(loadGpuData, 30000);
         });
     </script>
 }
\ No newline at end of file