Graphen fertig

This commit is contained in:
2025-08-11 23:07:22 +02:00
parent 588f5851d4
commit 5879673aeb
3 changed files with 25 additions and 31 deletions

View File

@@ -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();

View File

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

View File