Watcher/watcher
4
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

Mehr Graphen

Browse Source
This commit is contained in:
Daniel Habenicht
2025-08-11 22:35:55 +02:00
parent de9b8daadc
commit 588f5851d4
2 changed files with 178 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
Watcher/Controllers/MonitoringController.cs
View File

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

143
Watcher/Views/Server/Details.cshtml
View File

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