Compare commits
4 Commits
v0.1.15
...
7bbde43878
| Author | SHA1 | Date | |
|---|---|---|---|
| 7bbde43878 | |||
| da0c5d9efb | |||
| 63316301fb | |||
| 3d375f4792 |
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -8,28 +8,180 @@
|
||||
<link rel="stylesheet" href="~/css/services-overview.css" />
|
||||
</head>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div >
|
||||
<table class="ServiceList">
|
||||
<tr>
|
||||
<th>Container-ID</th>
|
||||
<th>Name</th>
|
||||
<th>Image</th>
|
||||
<th>Host</th>
|
||||
<th>Aktionen</th>
|
||||
|
||||
</tr>
|
||||
@foreach (Container container in Model.Containers)
|
||||
{
|
||||
<tr class="ServiceRow">
|
||||
<td>@container.ContainerId</td>
|
||||
<td>@container.Name</td>
|
||||
<td>@container.Image</td>
|
||||
<td><a class="ServiceEntry" href="/Server/Details/@container.ServerId">@container.Server?.Name</a></td>
|
||||
<td>nicht verfügbar</td>
|
||||
</tr>
|
||||
}
|
||||
</table>
|
||||
<div class="container-fluid mt-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h4><i class="bi bi-box-seam me-2"></i>Container & Services</h4>
|
||||
<span class="badge bg-primary">@Model.Containers.Count Container</span>
|
||||
</div>
|
||||
|
||||
@if (!Model.Containers.Any())
|
||||
{
|
||||
<div class="alert alert-info">
|
||||
<i class="bi bi-info-circle me-2"></i>Keine Container gefunden. Container werden automatisch von den Agents erkannt.
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
var groupedContainers = Model.Containers.GroupBy(c => c.Server?.Name ?? "Unbekannt");
|
||||
|
||||
foreach (var serverGroup in groupedContainers.OrderBy(g => g.Key))
|
||||
{
|
||||
<div class="mb-4">
|
||||
<h5 class="text-muted mb-3">
|
||||
<i class="bi bi-hdd-network me-2"></i>@serverGroup.Key
|
||||
<span class="badge bg-secondary ms-2">@serverGroup.Count()</span>
|
||||
</h5>
|
||||
|
||||
<div class="row g-3">
|
||||
@foreach (var container in serverGroup)
|
||||
{
|
||||
<div class="col-12 col-lg-6 col-xl-4">
|
||||
<div class="card container-card shadow-sm">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="bi bi-box me-2 text-primary"></i>
|
||||
<strong>@container.Name</strong>
|
||||
</div>
|
||||
<span class="badge @(container.IsRunning ? "bg-success" : "bg-danger")">
|
||||
<i class="bi @(container.IsRunning ? "bi-play-fill" : "bi-stop-fill")"></i>
|
||||
@(container.IsRunning ? "Running" : "Stopped")
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="container-info">
|
||||
<div class="info-row">
|
||||
<span class="info-label"><i class="bi bi-tag me-1"></i>ID:</span>
|
||||
<span class="info-value">@(container.ContainerId != null && container.ContainerId.Length > 12 ? container.ContainerId.Substring(0, 12) : container.ContainerId)</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label"><i class="bi bi-image me-1"></i>Image:</span>
|
||||
<span class="info-value">@container.Image</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label"><i class="bi bi-server me-1"></i>Host:</span>
|
||||
<span class="info-value">
|
||||
<a href="/Server/Details/@container.ServerId" class="text-decoration-none">
|
||||
@container.Server?.Name
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="action-buttons mt-3 d-flex gap-2">
|
||||
<button class="btn btn-sm btn-outline-warning flex-fill" onclick="restartContainer('@container.ContainerId')">
|
||||
<i class="bi bi-arrow-clockwise"></i> Restart
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-danger flex-fill" onclick="stopContainer('@container.ContainerId')">
|
||||
<i class="bi bi-stop-circle"></i> Stop
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-info flex-fill" onclick="updateContainer('@container.ContainerId')">
|
||||
<i class="bi bi-arrow-up-circle"></i> Update
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Expandable Metrics Section -->
|
||||
<div class="mt-3">
|
||||
<button class="btn btn-sm btn-outline-secondary w-100 toggle-metrics"
|
||||
data-container-id="@container.Id"
|
||||
onclick="toggleMetrics(this, @container.Id)">
|
||||
<i class="bi bi-graph-up me-1"></i>
|
||||
Metriken anzeigen
|
||||
<i class="bi bi-chevron-down float-end"></i>
|
||||
</button>
|
||||
<div class="metrics-panel collapse" id="metrics-@container.Id">
|
||||
<div class="metrics-content mt-3 p-3 bg-light rounded">
|
||||
<div class="metric-item">
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<small><i class="bi bi-cpu me-1"></i>CPU</small>
|
||||
<small class="text-muted"><span class="metric-value">--</span>%</small>
|
||||
</div>
|
||||
<div class="progress" style="height: 8px;">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-item mt-3">
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<small><i class="bi bi-memory me-1"></i>RAM</small>
|
||||
<small class="text-muted"><span class="metric-value">--</span> MB</small>
|
||||
</div>
|
||||
<div class="progress" style="height: 8px;">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-item mt-3">
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<small><i class="bi bi-ethernet me-1"></i>Network</small>
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-arrow-down text-success"></i> <span class="metric-value">--</span> MB/s
|
||||
<i class="bi bi-arrow-up text-primary ms-2"></i> <span class="metric-value">--</span> MB/s
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-3">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-info-circle me-1"></i>
|
||||
Metriken werden in Echtzeit aktualisiert
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
function toggleMetrics(button, containerId) {
|
||||
const panel = document.getElementById('metrics-' + containerId);
|
||||
const icon = button.querySelector('.float-end');
|
||||
|
||||
if (panel.classList.contains('show')) {
|
||||
panel.classList.remove('show');
|
||||
button.innerHTML = '<i class="bi bi-graph-up me-1"></i>Metriken anzeigen<i class="bi bi-chevron-down float-end"></i>';
|
||||
} else {
|
||||
panel.classList.add('show');
|
||||
button.innerHTML = '<i class="bi bi-graph-up me-1"></i>Metriken verbergen<i class="bi bi-chevron-up float-end"></i>';
|
||||
// Hier könnten echte Metriken geladen werden
|
||||
loadContainerMetrics(containerId);
|
||||
}
|
||||
}
|
||||
|
||||
function loadContainerMetrics(containerId) {
|
||||
// Placeholder für zukünftige API-Calls
|
||||
console.log('Loading metrics for container:', containerId);
|
||||
// TODO: Echte Metriken vom Backend laden
|
||||
}
|
||||
|
||||
function restartContainer(containerId) {
|
||||
if (confirm('Container wirklich neu starten?')) {
|
||||
console.log('Restarting container:', containerId);
|
||||
// TODO: API Call zum Neustarten
|
||||
alert('Restart-Funktion wird implementiert');
|
||||
}
|
||||
}
|
||||
|
||||
function stopContainer(containerId) {
|
||||
if (confirm('Container wirklich stoppen?')) {
|
||||
console.log('Stopping container:', containerId);
|
||||
// TODO: API Call zum Stoppen
|
||||
alert('Stop-Funktion wird implementiert');
|
||||
}
|
||||
}
|
||||
|
||||
function updateContainer(containerId) {
|
||||
if (confirm('Container-Image aktualisieren?')) {
|
||||
console.log('Updating container:', containerId);
|
||||
// TODO: API Call zum Updaten
|
||||
alert('Update-Funktion wird implementiert');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
|
||||
@@ -11,50 +11,187 @@
|
||||
<div id="server-cards-container">
|
||||
|
||||
<div class="container mt-4">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<!-- Server Overview Card -->
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center bg-white border-bottom">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-hdd-network me-2 text-primary"></i>@Model.Name
|
||||
</h5>
|
||||
<span class="badge @(Model.IsOnline ? "bg-success" : "bg-danger")">
|
||||
<i class="bi @(Model.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
|
||||
@(Model.IsOnline ? "Online" : "Offline")
|
||||
</span>
|
||||
<div class="d-flex gap-2 align-items-center">
|
||||
<span class="badge @(Model.IsOnline ? "bg-success" : "bg-danger") px-3 py-2">
|
||||
<i class="bi @(Model.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
|
||||
@(Model.IsOnline ? "Online" : "Offline")
|
||||
</span>
|
||||
<a asp-action="EditServer" asp-route-id="@Model.Id" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-pencil"></i> Bearbeiten
|
||||
</a>
|
||||
<form asp-action="Delete" asp-route-id="@Model.Id" method="post" class="d-inline m-0"
|
||||
onsubmit="return confirm('Diesen Server wirklich löschen?');">
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger">
|
||||
<i class="bi bi-trash"></i> Löschen
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="infocard row g-4 mb-4">
|
||||
<div class="info col-6 text-text col-lg-3">
|
||||
<div><i class="bi bi-globe me-1"></i><strong>IP:</strong> @Model.IPAddress</div>
|
||||
<div><i class="bi bi-pc-display me-1"></i><strong>Typ:</strong> @Model.Type</div>
|
||||
<div><i class="bi bi-calendar-check me-1"></i><strong>Erstellt:</strong>
|
||||
@Model.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
|
||||
<div><i class="bi bi-clock me-1"></i><strong>Last-Seen:</strong>
|
||||
@Model.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
|
||||
</div>
|
||||
<div class="hardware col-6 text-text col-lg-3">
|
||||
<div><i class="bi bi-cpu me-1"></i><strong>CPU:</strong> @(Model.CpuType ?? "not found") </div>
|
||||
<div><i class="bi bi-cpu me-1"></i><strong>CPU-Kerne: </strong> @Model.CpuCores </div>
|
||||
<div><i class="bi bi-gpu-card me-1"></i><strong>GPU:</strong> @(Model.GpuType ?? "not found")
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<!-- System Information -->
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<h6 class="text-muted mb-3 pb-2 border-bottom">
|
||||
<i class="bi bi-info-circle me-2"></i>System
|
||||
</h6>
|
||||
<div class="info-list">
|
||||
<div class="info-item">
|
||||
<span class="info-label">
|
||||
<i class="bi bi-globe text-primary me-1"></i>IP-Adresse
|
||||
</span>
|
||||
<span class="info-value">@Model.IPAddress</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">
|
||||
<i class="bi bi-pc-display text-primary me-1"></i>Typ
|
||||
</span>
|
||||
<span class="info-value">@Model.Type</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">
|
||||
<i class="bi bi-calendar-check text-primary me-1"></i>Erstellt
|
||||
</span>
|
||||
<span class="info-value">@Model.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy")</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">
|
||||
<i class="bi bi-clock text-primary me-1"></i>Last Seen
|
||||
</span>
|
||||
<span class="info-value">
|
||||
@{
|
||||
var timeSinceLastSeen = DateTime.UtcNow - Model.LastSeen;
|
||||
if (timeSinceLastSeen.TotalMinutes < 1)
|
||||
{
|
||||
<span class="text-success">Gerade eben</span>
|
||||
}
|
||||
else if (timeSinceLastSeen.TotalMinutes < 60)
|
||||
{
|
||||
<span>vor @((int)timeSinceLastSeen.TotalMinutes) Min</span>
|
||||
}
|
||||
else if (timeSinceLastSeen.TotalHours < 24)
|
||||
{
|
||||
<span>vor @((int)timeSinceLastSeen.TotalHours) Std</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>@Model.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</span>
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div><i class="bi bi-memory me-1"></i><strong>RAM:</strong> @(Model.RamSize) </div>
|
||||
<div><i class="bi bi-hdd me-1"></i><strong>Disk Space:</strong> ... </div>
|
||||
</div>
|
||||
<div class="hardware col-6 text-text col-lg-3">
|
||||
<div class="card-footer text-end">
|
||||
<a asp-action="EditServer" asp-route-id="@Model.Id" class="btn btn-outline-primary me-2">
|
||||
<i class="bi bi-pencil"></i> Bearbeiten
|
||||
</a>
|
||||
<form asp-action="Delete" asp-route-id="@Model.Id" method="post" class="d-inline"
|
||||
onsubmit="return confirm('Diesen Server wirklich löschen?');">
|
||||
<button type="submit" class="btn btn-outline-danger">
|
||||
<i class="bi bi-trash"></i> Löschen
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hardware - CPU & GPU -->
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<h6 class="text-muted mb-3 pb-2 border-bottom">
|
||||
<i class="bi bi-cpu me-2"></i>Prozessor & Grafik
|
||||
</h6>
|
||||
<div class="info-list">
|
||||
<div class="info-item">
|
||||
<span class="info-label">
|
||||
<i class="bi bi-cpu text-info me-1"></i>CPU
|
||||
</span>
|
||||
<span class="info-value">
|
||||
@if (!string.IsNullOrWhiteSpace(Model.CpuType))
|
||||
{
|
||||
@Model.CpuType
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="text-muted">Unbekannt</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">
|
||||
<i class="bi bi-grid text-info me-1"></i>CPU-Kerne
|
||||
</span>
|
||||
<span class="info-value">
|
||||
@if (Model.CpuCores > 0)
|
||||
{
|
||||
@Model.CpuCores
|
||||
<span class="text-muted">Cores</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="text-muted">Unbekannt</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">
|
||||
<i class="bi bi-gpu-card text-info me-1"></i>GPU
|
||||
</span>
|
||||
<span class="info-value">
|
||||
@if (!string.IsNullOrWhiteSpace(Model.GpuType))
|
||||
{
|
||||
@Model.GpuType
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="text-muted">Keine / Unbekannt</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hardware - Memory -->
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<h6 class="text-muted mb-3 pb-2 border-bottom">
|
||||
<i class="bi bi-memory me-2"></i>Speicher
|
||||
</h6>
|
||||
<div class="info-list">
|
||||
<div class="info-item">
|
||||
<span class="info-label">
|
||||
<i class="bi bi-memory text-success me-1"></i>RAM
|
||||
</span>
|
||||
<span class="info-value">
|
||||
@if (Model.RamSize > 0)
|
||||
{
|
||||
var ramGB = Model.RamSize / (1024.0 * 1024.0 * 1024.0);
|
||||
@($"{ramGB:F1} GB")
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="text-muted">Unbekannt</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
@if (!string.IsNullOrWhiteSpace(Model.Description))
|
||||
{
|
||||
<div class="col-12 col-lg-3">
|
||||
<h6 class="text-muted mb-3 pb-2 border-bottom">
|
||||
<i class="bi bi-card-text me-2"></i>Beschreibung
|
||||
</h6>
|
||||
<p class="text-muted small mb-0">@Model.Description</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@@ -94,10 +231,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 +250,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 +284,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 +303,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 +337,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 +356,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 +410,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 +433,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 +454,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();
|
||||
|
||||
@@ -1,20 +1,75 @@
|
||||
.info {
|
||||
margin: 2rem;
|
||||
margin-top: 3rem;
|
||||
/* Server Details - Info Card */
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.hardware {
|
||||
margin: 2rem;
|
||||
margin-top: 3rem;
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: #6c757d;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text, #212529);
|
||||
font-weight: 400;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.info-value .text-muted {
|
||||
font-style: italic;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Section Headers in Info Card */
|
||||
.card-body h6.text-muted {
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-body h6.text-muted i {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Graph Container */
|
||||
.graphcontainer {
|
||||
height: 25rem;
|
||||
width: 100%;
|
||||
background-color: var(--color-surface);
|
||||
background-color: var(--color-surface, #f8f9fa);
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.graph {
|
||||
width: 100%;
|
||||
height: 22rem;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 992px) {
|
||||
.info-item {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card-header .d-flex.gap-2 {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card-header .btn-sm {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,115 @@
|
||||
.ServiceList {
|
||||
width: 80%;
|
||||
/* Container Card Styling */
|
||||
.container-card {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
background: var(--color-background-secondary, #fff);
|
||||
}
|
||||
|
||||
.ServiceRow {
|
||||
border-style: solid;
|
||||
border-color: var(--color-text);
|
||||
.container-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.ServiceEntry {
|
||||
text-decoration: none;
|
||||
.container-card .card-header {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.container-card .card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Container Info Rows */
|
||||
.container-info {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.4rem 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #6c757d;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: var(--color-text, #212529);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.action-buttons .btn {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
|
||||
/* Metrics Panel */
|
||||
.metrics-panel {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
|
||||
.metrics-panel.show {
|
||||
max-height: 500px;
|
||||
transition: max-height 0.4s ease-in;
|
||||
}
|
||||
|
||||
.metrics-content {
|
||||
background-color: #f8f9fa !important;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.metric-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Toggle Button */
|
||||
.toggle-metrics {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.toggle-metrics:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.action-buttons .btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Badge Styling */
|
||||
.badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.35em 0.65em;
|
||||
}
|
||||
|
||||
/* Server Group Header */
|
||||
h5.text-muted {
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
Reference in New Issue
Block a user