Merge pull request 'Server Card schöner gemacht' (#42) from enhancement/database-update into staging

Reviewed-on: #42

Watcher/Views/Container/Overview.cshtml

@@ -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 class="container-fluid mt-4">
-    <div >
+    <div class="d-flex justify-content-between align-items-center mb-4">
-            <table class="ServiceList">
+        <h4><i class="bi bi-box-seam me-2"></i>Container & Services</h4>
-                <tr>
+        <span class="badge bg-primary">@Model.Containers.Count Container</span>
-                    <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>
 
+    @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>
+}

Watcher/Views/Server/Details.cshtml

@@ -11,50 +11,176 @@
 <div id="server-cards-container">
 
     <div class="container mt-4">
-        <div class="card shadow-sm">
+        <!-- Server Overview Card -->
-            <div class="card-header d-flex justify-content-between align-items-center">
+        <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")">
+                <div class="d-flex gap-2 align-items-center">
-                    <i class="bi @(Model.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
+                    <span class="badge @(Model.IsOnline ? "bg-success" : "bg-danger") px-3 py-2">
-                    @(Model.IsOnline ? "Online" : "Offline")
+                        <i class="bi @(Model.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
-                </span>
+                        @(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="card-body">
-                <div class="info col-6 text-text col-lg-3">
+                <div class="row g-4">
-                    <div><i class="bi bi-globe me-1"></i><strong>IP:</strong> @Model.IPAddress</div>
+                    <!-- System Information -->
-                    <div><i class="bi bi-pc-display me-1"></i><strong>Typ:</strong> @Model.Type</div>
+                    <div class="col-12 col-md-6 col-lg-3">
-                    <div><i class="bi bi-calendar-check me-1"></i><strong>Erstellt:</strong>
+                        <h6 class="text-muted mb-3 pb-2 border-bottom">
-                        @Model.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
+                            <i class="bi bi-info-circle me-2"></i>System
-                    <div><i class="bi bi-clock me-1"></i><strong>Last-Seen:</strong>
+                        </h6>
-                        @Model.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
+                        <div class="info-list">
-                </div>
+                            <div class="info-item">
-                <div class="hardware col-6 text-text col-lg-3">
+                                <span class="info-label">
-                    <div><i class="bi bi-cpu me-1"></i><strong>CPU:</strong> @(Model.CpuType ?? "not found") </div>
+                                    <i class="bi bi-globe text-primary me-1"></i>IP-Adresse
-                    <div><i class="bi bi-cpu me-1"></i><strong>CPU-Kerne: </strong> @Model.CpuCores </div>
+                                </span>
-                    <div><i class="bi bi-gpu-card me-1"></i><strong>GPU:</strong> @(Model.GpuType ?? "not found")
+                                <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>
 

Watcher/wwwroot/css/server-detail.css

@@ -1,20 +1,75 @@
-.info {
+/* Server Details - Info Card */
-    margin: 2rem;
+.info-list {
-    margin-top: 3rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
 }
 
-.hardware {
+.info-item {
-    margin: 2rem;
+    display: flex;
-    margin-top: 3rem;
+    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;
+    }
+}

Watcher/wwwroot/css/services-overview.css

@@ -1,12 +1,115 @@
-.ServiceList {
+/* Container Card Styling */
-    width: 80%;
+.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 {
+.container-card:hover {
-    border-style: solid;
+    transform: translateY(-2px);
-    border-color: var(--color-text);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
 }
 
-.ServiceEntry {
+.container-card .card-header {
-    text-decoration: none;
+    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;
 }