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

Merge pull request 'Graph fix' (#41) from enhancement/database-update into staging
All checks were successful
Gitea CI/CD / dotnet-build-and-test (push) Successful in 58s
Details
Gitea CI/CD / Set Tag Name (push) Successful in 6s
Details
Gitea CI/CD / docker-build-and-push (push) Successful in 7m41s
Details
Gitea CI/CD / Create Tag (push) Successful in 6s
Details

Browse Source 
Reviewed-on: #41
This commit was merged in pull request #41.
This commit is contained in:
Daniel Habenicht
2025-11-06 17:07:18 +01:00
parent 5a33c1c534 3d375f4792
commit 63316301fb
2 changed files with 136 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
Watcher/Controllers/MonitoringController.cs
View File

@@ -378,53 +378,62 @@ public class MonitoringController : Controller
}
[HttpGet("cpu-usage")]
public async Task<IActionResult> GetCpuUsageData(int serverId)
public async Task<IActionResult> GetCpuUsageData(int serverId, int hours = 1)
{
var oneDayAgo = DateTime.UtcNow.AddDays(-1);
var data = await _context.Metrics
.Where(m => m.Timestamp >= oneDayAgo && m.ServerId == serverId)
var startTime = DateTime.UtcNow.AddHours(-hours);
var metrics = await _context.Metrics
.Where(m => m.Timestamp >= startTime && m.ServerId == serverId)
.OrderBy(m => m.Timestamp)
.Select(m => new
{
label = m.Timestamp.ToUniversalTime().ToString("o"),
data = m.CPU_Load
})
.ToListAsync();
// Timestamp-Format basierend auf Zeitbereich anpassen
string format = hours > 1 ? "dd.MM HH:mm" : "HH:mm";
var data = metrics.Select(m => new
{
label = m.Timestamp.ToLocalTime().ToString(format),
data = m.CPU_Load
}).ToList();
return Ok(data);
}
[HttpGet("ram-usage")]
public async Task<IActionResult> GetRamUsageData(int serverId)
public async Task<IActionResult> GetRamUsageData(int serverId, int hours = 1)
{
var oneDayAgo = DateTime.UtcNow.AddDays(-1);
var data = await _context.Metrics
.Where(m => m.Timestamp >= oneDayAgo && m.ServerId == serverId)
var startTime = DateTime.UtcNow.AddHours(-hours);
var metrics = await _context.Metrics
.Where(m => m.Timestamp >= startTime && m.ServerId == serverId)
.OrderBy(m => m.Timestamp)
.Select(m => new
{
label = m.Timestamp.ToUniversalTime().ToString("o"),
data = m.RAM_Load
})
.ToListAsync();
// Timestamp-Format basierend auf Zeitbereich anpassen
string format = hours > 1 ? "dd.MM HH:mm" : "HH:mm";
var data = metrics.Select(m => new
{
label = m.Timestamp.ToLocalTime().ToString(format),
data = m.RAM_Load
}).ToList();
return Ok(data);
}
[HttpGet("gpu-usage")]
public async Task<IActionResult> GetGpuUsageData(int serverId)
public async Task<IActionResult> GetGpuUsageData(int serverId, int hours = 1)
{
var oneDayAgo = DateTime.UtcNow.AddDays(-1);
var data = await _context.Metrics
.Where(m => m.Timestamp >= oneDayAgo && m.ServerId == serverId)
var startTime = DateTime.UtcNow.AddHours(-hours);
var metrics = await _context.Metrics
.Where(m => m.Timestamp >= startTime && m.ServerId == serverId)
.OrderBy(m => m.Timestamp)
.Select(m => new
{
label = m.Timestamp.ToUniversalTime().ToString("o"),
data = m.GPU_Load
})
.ToListAsync();
// Timestamp-Format basierend auf Zeitbereich anpassen
string format = hours > 1 ? "dd.MM HH:mm" : "HH:mm";
var data = metrics.Select(m => new
{
label = m.Timestamp.ToLocalTime().ToString(format),
data = m.GPU_Load
}).ToList();
return Ok(data);
}

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

@@ -58,6 +58,17 @@
</div>
</div>
<div class="mt-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<h6 class="mb-0"><i class="bi bi-graph-up me-1"></i>Metriken</h6>
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-outline-primary active" data-range="1">1 Stunde</button>
<button type="button" class="btn btn-outline-primary" data-range="24">24 Stunden</button>
<button type="button" class="btn btn-outline-primary" data-range="48">48 Stunden</button>
</div>
</div>
</div>
<div class="mt-4">
<h6><i class="bi bi-graph-up me-1"></i>CPU Last</h6>
<div class="graphcontainer p-4 text-center text-muted">
@@ -94,10 +105,13 @@
datasets: [{
label: 'CPU Last (%)',
data: [],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
backgroundColor: 'rgba(54, 162, 235, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.3,
pointRadius: 3
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 4
}]
},
options: {
@@ -110,14 +124,29 @@
title: {
display: true,
text: 'Auslastung in %'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
x: {
title: {
display: false,
text: 'Zeit'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
},
ticks: {
maxTicksLimit: 12,
autoSkip: true
}
}
},
plugins: {
legend: {
display: false
}
}
}
});
@@ -129,10 +158,13 @@
datasets: [{
label: 'RAM Last (%)',
data: [],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.3,
pointRadius: 3
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 4
}]
},
options: {
@@ -145,14 +177,29 @@
title: {
display: true,
text: 'Auslastung in %'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
x: {
title: {
display: false,
text: 'Zeit'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
},
ticks: {
maxTicksLimit: 12,
autoSkip: true
}
}
},
plugins: {
legend: {
display: false
}
}
}
});
@@ -164,10 +211,13 @@
datasets: [{
label: 'GPU Last (%)',
data: [],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(153, 102, 255, 1)',
backgroundColor: 'rgba(153, 102, 255, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.3,
pointRadius: 3
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 4
}]
},
options: {
@@ -180,21 +230,38 @@
title: {
display: true,
text: 'Auslastung in %'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
x: {
title: {
display: false,
text: 'Zeit'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
},
ticks: {
maxTicksLimit: 12,
autoSkip: true
}
}
},
plugins: {
legend: {
display: false
}
}
}
});
let currentHours = 1; // Standard: 1 Stunde
async function loadCpuData() {
try {
const response = await fetch('/monitoring/cpu-usage?serverId=@Model.Id');
const response = await fetch(`/monitoring/cpu-usage?serverId=@Model.Id&hours=${currentHours}`);
if (!response.ok) {
throw new Error(`HTTP-Fehler: ${response.status}`);
}
@@ -217,7 +284,7 @@
async function loadRamData() {
try {
const response = await fetch('/monitoring/ram-usage?serverId=@Model.Id');
const response = await fetch(`/monitoring/ram-usage?serverId=@Model.Id&hours=${currentHours}`);
if (!response.ok) {
throw new Error(`HTTP-Fehler: ${response.status}`);
}
@@ -240,7 +307,7 @@
async function loadGpuData() {
try {
const response = await fetch('/monitoring/gpu-usage?serverId=@Model.Id');
const response = await fetch(`/monitoring/gpu-usage?serverId=@Model.Id&hours=${currentHours}`);
if (!response.ok) {
throw new Error(`HTTP-Fehler: ${response.status}`);
}
@@ -261,6 +328,27 @@
}
}
// Button-Handler für Zeitbereich-Wechsel
document.querySelectorAll('[data-range]').forEach(button => {
button.addEventListener('click', function() {
// Alle Buttons deaktivieren
document.querySelectorAll('[data-range]').forEach(btn => {
btn.classList.remove('active');
});
// Aktuellen Button aktivieren
this.classList.add('active');
// Zeitbereich aktualisieren
currentHours = parseInt(this.getAttribute('data-range'));
// Daten neu laden
loadCpuData();
loadRamData();
loadGpuData();
});
});
// Initiales Laden
loadCpuData();
loadRamData();