UI stuff

Tests/populate_testdata.py

@@ -0,0 +1,412 @@
+#!/usr/bin/env python3
+"""
+Watcher Database Test Data Population Script
+Füllt die SQLite-Datenbank mit realistischen Testdaten für lokale Entwicklung
+"""
+
+import sqlite3
+import random
+from datetime import datetime, timedelta
+import os
+
+# Datenbankpfad
+DB_PATH = "Watcher\persistence\watcher.db"
+
+# Prüfe ob Datenbank existiert
+if not os.path.exists(DB_PATH):
+    print(f"❌ Datenbank nicht gefunden: {DB_PATH}")
+    print("Bitte stelle sicher, dass die Anwendung einmal gestartet wurde, um die Datenbank zu erstellen.")
+    exit(1)
+
+print(f"📊 Verbinde mit Datenbank: {DB_PATH}")
+conn = sqlite3.connect(DB_PATH)
+cursor = conn.cursor()
+
+# Lösche vorhandene Daten (optional - auskommentieren wenn bestehende Daten behalten werden sollen)
+print("\n🗑️  Lösche vorhandene Testdaten...")
+cursor.execute("DELETE FROM ContainerMetrics")
+cursor.execute("DELETE FROM Metrics")
+cursor.execute("DELETE FROM LogEvents")
+cursor.execute("DELETE FROM Containers")
+cursor.execute("DELETE FROM Images")
+cursor.execute("DELETE FROM Tags")
+cursor.execute("DELETE FROM Servers")
+# Users werden NICHT gelöscht
+conn.commit()
+
+print("✅ Alte Daten gelöscht (Users bleiben erhalten)\n")
+
+# ============================================================================
+# 2. SERVERS - Test-Server erstellen
+# ============================================================================
+print("\n🖥️  Erstelle Server...")
+
+servers_data = [
+    {
+        "name": "Production-Web-01",
+        "ip": "192.168.1.10",
+        "type": "Ubuntu 22.04",
+        "description": "Haupt-Webserver für Production",
+        "cpu_type": "Intel Core i7-12700K",
+        "cpu_cores": 12,
+        "gpu_type": None,
+        "ram_size": 34359738368,  # 32 GB in Bytes
+        "disk_space": "512 GB NVMe SSD",
+        "is_online": True
+    },
+    {
+        "name": "Dev-Server",
+        "ip": "192.168.1.20",
+        "type": "Debian 12",
+        "description": "Entwicklungs- und Testserver",
+        "cpu_type": "AMD Ryzen 9 5900X",
+        "cpu_cores": 12,
+        "gpu_type": None,
+        "ram_size": 68719476736,  # 64 GB in Bytes
+        "disk_space": "1 TB NVMe SSD",
+        "is_online": True
+    },
+    {
+        "name": "GPU-Server-ML",
+        "ip": "192.168.1.30",
+        "type": "Ubuntu 22.04 LTS",
+        "description": "Machine Learning Training Server",
+        "cpu_type": "AMD Ryzen Threadripper 3970X",
+        "cpu_cores": 32,
+        "gpu_type": "NVIDIA RTX 4090",
+        "ram_size": 137438953472,  # 128 GB in Bytes
+        "disk_space": "2 TB NVMe SSD",
+        "is_online": True
+    },
+    {
+        "name": "Backup-Server",
+        "ip": "192.168.1.40",
+        "type": "Ubuntu 20.04",
+        "description": "Backup und Storage Server",
+        "cpu_type": "Intel Xeon E5-2680 v4",
+        "cpu_cores": 14,
+        "gpu_type": None,
+        "ram_size": 17179869184,  # 16 GB in Bytes
+        "disk_space": "10 TB HDD RAID5",
+        "is_online": False
+    },
+    {
+        "name": "Docker-Host-01",
+        "ip": "192.168.1.50",
+        "type": "Ubuntu 22.04",
+        "description": "Docker Container Host",
+        "cpu_type": "Intel Xeon Gold 6248R",
+        "cpu_cores": 24,
+        "gpu_type": None,
+        "ram_size": 68719476736,  # 64 GB in Bytes
+        "disk_space": "2 TB NVMe SSD",
+        "is_online": True
+    }
+]
+
+server_ids = []
+for server in servers_data:
+    last_seen = datetime.utcnow() - timedelta(minutes=random.randint(0, 30)) if server["is_online"] else datetime.utcnow() - timedelta(hours=random.randint(2, 48))
+
+    cursor.execute("""
+        INSERT INTO Servers (
+            Name, IPAddress, Type, Description,
+            CpuType, CpuCores, GpuType, RamSize, DiskSpace,
+            CPU_Load_Warning, CPU_Load_Critical,
+            CPU_Temp_Warning, CPU_Temp_Critical,
+            RAM_Load_Warning, RAM_Load_Critical,
+            GPU_Load_Warning, GPU_Load_Critical,
+            GPU_Temp_Warning, GPU_Temp_Critical,
+            Disk_Usage_Warning, Disk_Usage_Critical,
+            DISK_Temp_Warning, DISK_Temp_Critical,
+            CreatedAt, IsOnline, LastSeen, IsVerified
+        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+    """, (
+        server["name"], server["ip"], server["type"], server["description"],
+        server["cpu_type"], server["cpu_cores"], server["gpu_type"], server["ram_size"], server["disk_space"],
+        75.0, 90.0,  # CPU Load
+        80.0, 90.0,  # CPU Temp
+        85.0, 95.0,  # RAM Load
+        75.0, 90.0,  # GPU Load
+        70.0, 80.0,  # GPU Temp
+        75.0, 90.0,  # Disk Usage
+        34.0, 36.0,  # Disk Temp
+        datetime.utcnow() - timedelta(days=random.randint(30, 365)),
+        server["is_online"], last_seen, True
+    ))
+    server_ids.append(cursor.lastrowid)
+    print(f"  ✓ Server '{server['name']}' erstellt (ID: {cursor.lastrowid})")
+
+conn.commit()
+
+# ============================================================================
+# 3. METRICS - Server-Metriken erstellen (letzte 48 Stunden)
+# ============================================================================
+print("\n📈 Erstelle Server-Metriken (letzte 48 Stunden)...")
+
+metrics_count = 0
+for server_id in server_ids:
+    # Finde den Server
+    cursor.execute("SELECT IsOnline FROM Servers WHERE Id = ?", (server_id,))
+    is_online = cursor.fetchone()[0]
+
+    if not is_online:
+        continue  # Keine Metriken für offline Server
+
+    # Erstelle Metriken für die letzten 48 Stunden (alle 5 Minuten)
+    start_time = datetime.utcnow() - timedelta(hours=48)
+    current_time = start_time
+
+    # Basis-Werte für realistische Schwankungen
+    base_cpu = random.uniform(20, 40)
+    base_ram = random.uniform(40, 60)
+    base_gpu = random.uniform(10, 30) if server_id == server_ids[2] else 0  # Nur GPU-Server
+
+    while current_time <= datetime.utcnow():
+        # Realistische Schwankungen
+        cpu_load = max(0, min(100, base_cpu + random.gauss(0, 15)))
+        cpu_temp = 30 + (cpu_load * 0.5) + random.gauss(0, 3)
+
+        ram_load = max(0, min(100, base_ram + random.gauss(0, 10)))
+
+        gpu_load = max(0, min(100, base_gpu + random.gauss(0, 20))) if base_gpu > 0 else 0
+        gpu_temp = 25 + (gpu_load * 0.6) + random.gauss(0, 3) if gpu_load > 0 else 0
+        gpu_vram_usage = gpu_load * 0.8 if gpu_load > 0 else 0
+
+        disk_usage = random.uniform(40, 75)
+        disk_temp = random.uniform(28, 35)
+
+        net_in = random.uniform(1000000, 10000000)  # 1-10 Mbps in Bits
+        net_out = random.uniform(500000, 5000000)   # 0.5-5 Mbps in Bits
+
+        cursor.execute("""
+            INSERT INTO Metrics (
+                ServerId, Timestamp,
+                CPU_Load, CPU_Temp,
+                GPU_Load, GPU_Temp, GPU_Vram_Size, GPU_Vram_Usage,
+                RAM_Size, RAM_Load,
+                DISK_Size, DISK_Usage, DISK_Temp,
+                NET_In, NET_Out
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+        """, (
+            server_id, current_time,
+            cpu_load, cpu_temp,
+            gpu_load, gpu_temp, 24.0, gpu_vram_usage,  # 24 GB VRAM
+            64.0, ram_load,
+            512.0, disk_usage, disk_temp,
+            net_in, net_out
+        ))
+
+        metrics_count += 1
+        current_time += timedelta(minutes=5)
+
+    print(f"  ✓ Server {server_id}: {metrics_count} Metriken erstellt")
+
+conn.commit()
+print(f"✅ Insgesamt {metrics_count} Metriken erstellt")
+
+# ============================================================================
+# 4. IMAGES - Docker Images
+# ============================================================================
+print("\n🐳 Erstelle Docker Images...")
+
+images_data = [
+    ("nginx", "latest"),
+    ("nginx", "alpine"),
+    ("postgres", "15"),
+    ("postgres", "14-alpine"),
+    ("redis", "7-alpine"),
+    ("node", "18-alpine"),
+    ("python", "3.11-slim"),
+    ("mysql", "8.0"),
+    ("traefik", "v2.10"),
+    ("portainer", "latest")
+]
+
+image_ids = {}
+for name, tag in images_data:
+    cursor.execute("""
+        INSERT INTO Images (Name, Tag)
+        VALUES (?, ?)
+    """, (name, tag))
+    image_ids[f"{name}:{tag}"] = cursor.lastrowid
+    print(f"  ✓ Image '{name}:{tag}' erstellt")
+
+conn.commit()
+
+# ============================================================================
+# 5. CONTAINERS - Docker Container
+# ============================================================================
+print("\n📦 Erstelle Docker Container...")
+
+# Nur für Server, die online sind
+online_server_ids = [sid for sid in server_ids[:2]]  # Erste 2 Server haben Container
+
+containers_data = [
+    # Production-Web-01
+    ("nginx-web", "abc123def456", "nginx:latest", online_server_ids[0], True),
+    ("postgres-db", "def456ghi789", "postgres:15", online_server_ids[0], True),
+    ("redis-cache", "ghi789jkl012", "redis:7-alpine", online_server_ids[0], True),
+    ("traefik-proxy", "jkl012mno345", "traefik:v2.10", online_server_ids[0], True),
+
+    # Dev-Server
+    ("dev-nginx", "mno345pqr678", "nginx:alpine", online_server_ids[1], True),
+    ("dev-postgres", "pqr678stu901", "postgres:14-alpine", online_server_ids[1], False),
+    ("dev-redis", "stu901vwx234", "redis:7-alpine", online_server_ids[1], True),
+    ("test-app", "vwx234yz567", "node:18-alpine", online_server_ids[1], True),
+    ("portainer", "yz567abc890", "portainer:latest", online_server_ids[1], True),
+]
+
+container_ids = []
+for name, container_id, image, server_id, is_running in containers_data:
+    cursor.execute("""
+        INSERT INTO Containers (Name, ContainerId, Image, ServerId, IsRunning)
+        VALUES (?, ?, ?, ?, ?)
+    """, (name, container_id, image, server_id, is_running))
+    container_ids.append(cursor.lastrowid)
+    status = "🟢 Running" if is_running else "🔴 Stopped"
+    print(f"  ✓ Container '{name}' erstellt - {status}")
+
+conn.commit()
+
+# ============================================================================
+# 6. CONTAINER METRICS - Container-Metriken (letzte 24 Stunden)
+# ============================================================================
+print("\n📊 Erstelle Container-Metriken (letzte 24 Stunden)...")
+
+container_metrics_count = 0
+for container_id in container_ids:
+    # Prüfe ob Container läuft
+    cursor.execute("SELECT IsRunning FROM Containers WHERE Id = ?", (container_id,))
+    is_running = cursor.fetchone()[0]
+
+    if not is_running:
+        continue  # Keine Metriken für gestoppte Container
+
+    # Erstelle Metriken für die letzten 24 Stunden (alle 5 Minuten)
+    start_time = datetime.utcnow() - timedelta(hours=24)
+    current_time = start_time
+
+    # Basis-Werte für Container (meist niedriger als Host)
+    base_cpu = random.uniform(5, 15)
+    base_ram = random.uniform(10, 30)
+
+    while current_time <= datetime.utcnow():
+        cpu_load = max(0, min(100, base_cpu + random.gauss(0, 8)))
+        cpu_temp = 30 + (cpu_load * 0.5) + random.gauss(0, 2)
+
+        ram_load = max(0, min(100, base_ram + random.gauss(0, 5)))
+        ram_size = random.uniform(0.5, 4.0)  # Container nutzen weniger RAM
+
+        cursor.execute("""
+            INSERT INTO ContainerMetrics (
+                ContainerId, Timestamp,
+                CPU_Load, CPU_Temp,
+                RAM_Size, RAM_Load
+            ) VALUES (?, ?, ?, ?, ?, ?)
+        """, (
+            container_id, current_time,
+            cpu_load, cpu_temp,
+            ram_size, ram_load
+        ))
+
+        container_metrics_count += 1
+        current_time += timedelta(minutes=5)
+
+conn.commit()
+print(f"✅ Insgesamt {container_metrics_count} Container-Metriken erstellt")
+
+# ============================================================================
+# 7. LOG EVENTS - Log-Einträge erstellen
+# ============================================================================
+print("\n📝 Erstelle Log Events...")
+
+log_messages = [
+    ("Info", "Server erfolgreich gestartet", None, None),
+    ("Info", "Backup abgeschlossen", server_ids[3], None),
+    ("Warning", "CPU-Auslastung über 80%", server_ids[0], None),
+    ("Info", "Container gestartet", server_ids[0], container_ids[0]),
+    ("Error", "Datenbank-Verbindung fehlgeschlagen", server_ids[1], container_ids[5]),
+    ("Warning", "Speicherplatz unter 25%", server_ids[1], None),
+    ("Info", "Update installiert", server_ids[2], None),
+    ("Info", "Container neu gestartet", server_ids[0], container_ids[2]),
+    ("Warning", "GPU-Temperatur über 75°C", server_ids[2], None),
+    ("Info", "Netzwerk-Check erfolgreich", server_ids[0], None),
+]
+
+for level, message, server_id, container_id in log_messages:
+    timestamp = datetime.utcnow() - timedelta(hours=random.randint(0, 48))
+    cursor.execute("""
+        INSERT INTO LogEvents (Timestamp, Message, Level, ServerId, ContainerId)
+        VALUES (?, ?, ?, ?, ?)
+    """, (timestamp, message, level, server_id, container_id))
+    print(f"  ✓ Log: [{level}] {message}")
+
+conn.commit()
+
+# ============================================================================
+# 8. TAGS - Tags für Server/Container
+# ============================================================================
+print("\n🏷️  Erstelle Tags...")
+
+tags_data = ["production", "development", "backup", "docker", "monitoring", "critical"]
+
+for tag_name in tags_data:
+    cursor.execute("""
+        INSERT INTO Tags (Name)
+        VALUES (?)
+    """, (tag_name,))
+    print(f"  ✓ Tag '{tag_name}' erstellt")
+
+conn.commit()
+
+# ============================================================================
+# Abschluss
+# ============================================================================
+print("\n" + "="*60)
+print("✅ Testdaten erfolgreich erstellt!")
+print("="*60)
+
+# Statistiken ausgeben
+cursor.execute("SELECT COUNT(*) FROM Servers")
+server_count = cursor.fetchone()[0]
+
+cursor.execute("SELECT COUNT(*) FROM Containers")
+container_count = cursor.fetchone()[0]
+
+cursor.execute("SELECT COUNT(*) FROM Metrics")
+metrics_count = cursor.fetchone()[0]
+
+cursor.execute("SELECT COUNT(*) FROM ContainerMetrics")
+container_metrics_count = cursor.fetchone()[0]
+
+cursor.execute("SELECT COUNT(*) FROM LogEvents")
+log_count = cursor.fetchone()[0]
+
+cursor.execute("SELECT COUNT(*) FROM Images")
+image_count = cursor.fetchone()[0]
+
+cursor.execute("SELECT COUNT(*) FROM Tags")
+tag_count = cursor.fetchone()[0]
+
+print(f"""
+📊 STATISTIK:
+   🖥️  Server:             {server_count}
+   📦 Container:          {container_count}
+   📈 Server-Metriken:    {metrics_count}
+   📊 Container-Metriken: {container_metrics_count}
+   📝 Log Events:         {log_count}
+   🐳 Images:             {image_count}
+   🏷️  Tags:              {tag_count}
+
+💡 HINWEIS:
+   - User-Tabelle wurde nicht verändert
+   - Metriken wurden für die letzten 48 Stunden generiert
+   - Server 'Backup-Server' ist offline (für Tests)
+   - Container 'dev-postgres' ist gestoppt (für Tests)
+   - Die Datenbank befindet sich unter: {DB_PATH}
+""")
+
+# Verbindung schließen
+conn.close()
+print("🔒 Datenbankverbindung geschlossen\n")

Watcher/Views/Container/Overview.cshtml

@@ -90,7 +90,7 @@
                                             <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="metrics-content mt-3 p-3 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>

Watcher/Views/Server/Details.cshtml

@@ -13,7 +13,7 @@
     <div class="container mt-4">
         <!-- 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">
+            <div class="card-header d-flex justify-content-between align-items-center border-bottom">
                 <h5 class="mb-0">
                     <i class="bi bi-hdd-network me-2 text-primary"></i>@Model.Name
                 </h5>
@@ -231,8 +231,8 @@
                     datasets: [{
                         label: 'CPU Last (%)',
                         data: [],
-                        borderColor: 'rgba(54, 162, 235, 1)',
+                        borderColor: 'rgba(13, 202, 240, 1)',
-                        backgroundColor: 'rgba(54, 162, 235, 0.1)',
+                        backgroundColor: 'rgba(13, 202, 240, 0.2)',
                         borderWidth: 2,
                         fill: true,
                         tension: 0.4,
@@ -284,8 +284,8 @@
                     datasets: [{
                         label: 'RAM Last (%)',
                         data: [],
-                        borderColor: 'rgba(75, 192, 192, 1)',
+                        borderColor: 'rgba(25, 135, 84, 1)',
-                        backgroundColor: 'rgba(75, 192, 192, 0.1)',
+                        backgroundColor: 'rgba(25, 135, 84, 0.2)',
                         borderWidth: 2,
                         fill: true,
                         tension: 0.4,
@@ -337,8 +337,8 @@
                     datasets: [{
                         label: 'GPU Last (%)',
                         data: [],
-                        borderColor: 'rgba(153, 102, 255, 1)',
+                        borderColor: 'rgba(220, 53, 69, 1)',
-                        backgroundColor: 'rgba(153, 102, 255, 0.1)',
+                        backgroundColor: 'rgba(220, 53, 69, 0.2)',
                         borderWidth: 2,
                         fill: true,
                         tension: 0.4,

Watcher/Views/Server/_ServerCard.cshtml

@@ -1,51 +1,169 @@
 @model IEnumerable<Watcher.Models.Server>
 
-<div class="container py-4">
+<div class="row g-3">
-    <div class="row g-4">
+    @foreach (var server in Model)
-        @foreach (var s in Model)
+    {
-        {
+        <div class="col-12 col-lg-6 col-xl-4">
-            <div class="col-12">
+            <div class="card server-card shadow-sm">
-                <div class="card h-100 border-secondary shadow-sm">
+                <div class="card-header d-flex justify-content-between align-items-center">
-                    <div class="card-body d-flex flex-column gap-3">
+                    <div class="d-flex align-items-center">
-                        <div class="d-flex justify-content-between align-items-center mb-3">
+                        <i class="bi bi-hdd-network me-2 text-primary"></i>
-                            <h5 class="card-title text-text mb-0">
+                        <strong>@server.Name</strong>
-                                <i class="bi bi-pc-display me-2 text-text"></i>(#@s.Id) @s.Name
+                    </div>
-                            </h5>
+                    <span class="badge @(server.IsOnline ? "bg-success" : "bg-danger")">
-
+                        <i class="bi @(server.IsOnline ? "bi-check-circle" : "bi-x-circle")"></i>
-                            <div class="col-md-4 text-text small">
+                        @(server.IsOnline ? "Online" : "Offline")
-                                <div><i class="bi bi-globe me-1"></i><strong>IP:</strong> @s.IPAddress</div>
+                    </span>
-                                <div><i class="bi bi-pc-display me-1"></i><strong>Typ:</strong> @s.Type</div>
+                </div>
-                            </div>
+                <div class="card-body">
-
+                    <!-- Server Info -->
-                            <span class="badge @(s.IsOnline ? "bg-success text-light" : "bg-danger text-light")">
+                    <div class="server-info">
-                                <i class="bi @(s.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
+                        <div class="info-row">
-                                @(s.IsOnline ? "Online" : "Offline")
+                            <span class="info-label"><i class="bi bi-globe me-1"></i>IP:</span>
+                            <span class="info-value">@server.IPAddress</span>
+                        </div>
+                        <div class="info-row">
+                            <span class="info-label"><i class="bi bi-pc-display me-1"></i>Typ:</span>
+                            <span class="info-value">@server.Type</span>
+                        </div>
+                        <div class="info-row">
+                            <span class="info-label"><i class="bi bi-cpu me-1"></i>CPU:</span>
+                            <span class="info-value">@(server.CpuCores > 0 ? $"{server.CpuCores} Cores" : "N/A")</span>
+                        </div>
+                        <div class="info-row">
+                            <span class="info-label"><i class="bi bi-memory me-1"></i>RAM:</span>
+                            <span class="info-value">
+                                @if (server.RamSize > 0)
+                                {
+                                    var ramGB = server.RamSize / (1024.0 * 1024.0 * 1024.0);
+                                    @($"{ramGB:F1} GB")
+                                }
+                                else
+                                {
+                                    <text>N/A</text>
+                                }
                             </span>
-                            <div class="d-flex flex-wrap gap-4">
+                        </div>
-
+                    </div>
-                                <a asp-action="EditServer" asp-route-id="@s.Id" class="btn btn-outline-primary">
-                                    <i class="bi bi-pencil-square me-1"></i> Bearbeiten
-                                </a>
-
-                                <a asp-asp-controller="Server" asp-action="Details" asp-route-id="@s.Id"
-                                    class="btn btn-outline-primary">
-                                    <i class="bi bi-bar-chart-fill me-1"></i> Metrics
-                                </a>
-
-                                <form asp-action="Delete" asp-controller="Server" asp-route-id="@s.Id" method="post"
-                                    onsubmit="return confirm('Diesen Server wirklich löschen?');" class="m-0">
-                                    <button type="submit" class="btn btn-outline-danger">
-                                        <i class="bi bi-trash me-1"></i> Löschen
-                                    </button>
-                                </form>
 
+                    <!-- Current Metrics (wenn online) -->
+                    @if (server.IsOnline)
+                    {
+                        <div class="mt-3 current-metrics">
+                            <h6 class="mb-2"><i class="bi bi-activity me-1"></i>Aktuelle Last</h6>
+                            <div class="metric-bars">
+                                <div class="metric-bar-item">
+                                    <div class="d-flex justify-content-between mb-1">
+                                        <small>CPU</small>
+                                        <small class="metric-value" data-server-id="@server.Id" data-metric="cpu">--</small>
+                                    </div>
+                                    <div class="progress" style="height: 6px;">
+                                        <div class="progress-bar bg-info server-cpu-bar" role="progressbar" style="width: 0%"></div>
+                                    </div>
+                                </div>
+                                <div class="metric-bar-item mt-2">
+                                    <div class="d-flex justify-content-between mb-1">
+                                        <small>RAM</small>
+                                        <small class="metric-value" data-server-id="@server.Id" data-metric="ram">--</small>
+                                    </div>
+                                    <div class="progress" style="height: 6px;">
+                                        <div class="progress-bar bg-success server-ram-bar" role="progressbar" style="width: 0%"></div>
+                                    </div>
+                                </div>
+                                @if (!string.IsNullOrEmpty(server.GpuType))
+                                {
+                                    <div class="metric-bar-item mt-2">
+                                        <div class="d-flex justify-content-between mb-1">
+                                            <small>GPU</small>
+                                            <small class="metric-value" data-server-id="@server.Id" data-metric="gpu">--</small>
+                                        </div>
+                                        <div class="progress" style="height: 6px;">
+                                            <div class="progress-bar bg-danger server-gpu-bar" role="progressbar" style="width: 0%"></div>
+                                        </div>
+                                    </div>
+                                }
                             </div>
                         </div>
+                    }
 
+                    <!-- Action Buttons -->
+                    <div class="action-buttons mt-3 d-flex gap-2">
+                        <a asp-action="Details" asp-route-id="@server.Id" class="btn btn-sm btn-outline-primary flex-fill">
+                            <i class="bi bi-bar-chart-fill"></i> Details
+                        </a>
+                        <button class="btn btn-sm btn-outline-warning flex-fill" onclick="rebootServer(@server.Id)">
+                            <i class="bi bi-arrow-clockwise"></i> Reboot
+                        </button>
+                        <a asp-action="EditServer" asp-route-id="@server.Id" class="btn btn-sm btn-outline-secondary flex-fill">
+                            <i class="bi bi-pencil"></i> Edit
+                        </a>
+                    </div>
 
+                    <!-- Delete Button (separate row) -->
+                    <div class="mt-2">
+                        <form asp-action="Delete" asp-route-id="@server.Id" method="post" class="m-0"
+                              onsubmit="return confirm('Server @server.Name wirklich löschen?');">
+                            <button type="submit" class="btn btn-sm btn-outline-danger w-100">
+                                <i class="bi bi-trash"></i> Server löschen
+                            </button>
+                        </form>
                     </div>
                 </div>
             </div>
-        }
+        </div>
-    </div>
+    }
 </div>
+
+<script>
+    function rebootServer(serverId) {
+        if (confirm('Server wirklich neu starten?')) {
+            console.log('Rebooting server:', serverId);
+            // TODO: API Call zum Neustarten des Servers
+            alert('Reboot-Funktion wird implementiert');
+        }
+    }
+
+    // Lade aktuelle Metriken für alle Server
+    async function loadCurrentMetrics() {
+        const metricElements = document.querySelectorAll('.metric-value');
+
+        for (const element of metricElements) {
+            const serverId = element.getAttribute('data-server-id');
+            const metricType = element.getAttribute('data-metric');
+
+            try {
+                let endpoint = '';
+                if (metricType === 'cpu') endpoint = `/monitoring/cpu-usage?serverId=${serverId}&hours=0.1`;
+                else if (metricType === 'ram') endpoint = `/monitoring/ram-usage?serverId=${serverId}&hours=0.1`;
+                else if (metricType === 'gpu') endpoint = `/monitoring/gpu-usage?serverId=${serverId}&hours=0.1`;
+
+                const response = await fetch(endpoint);
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data && data.length > 0) {
+                        const latestValue = data[data.length - 1].data;
+                        element.textContent = `${latestValue.toFixed(1)}%`;
+
+                        // Update progress bar
+                        const card = element.closest('.card');
+                        let barClass = '';
+                        if (metricType === 'cpu') barClass = '.server-cpu-bar';
+                        else if (metricType === 'ram') barClass = '.server-ram-bar';
+                        else if (metricType === 'gpu') barClass = '.server-gpu-bar';
+
+                        const bar = card.querySelector(barClass);
+                        if (bar) {
+                            bar.style.width = `${latestValue}%`;
+                        }
+                    }
+                }
+            } catch (err) {
+                console.error(`Fehler beim Laden der ${metricType}-Metriken für Server ${serverId}:`, err);
+            }
+        }
+    }
+
+    // Initial laden und alle 30 Sekunden aktualisieren
+    loadCurrentMetrics();
+    setInterval(loadCurrentMetrics, 30000);
+</script>

Watcher/Views/Shared/_Layout.cshtml

@@ -104,7 +104,7 @@
 
                         <div>
                             <strong>@User.Identity?.Name</strong><br />
-                            <small class="text-muted">Profil ansehen</small>
+                            <small style="color: var(--color-text);">Profil ansehen</small>
                         </div>
                     </div>
                 </a>
@@ -115,7 +115,7 @@
             }
 
             <div class="mt-3 pt-3 border-top border-secondary text-center">
-                <small style="color: #adb5bd;">
+                <small style="color: var(--color-muted);">
                     @{
                         var statusColor = UpdateCheckStore.IsUpdateAvailable ? "#ffc107" : "#28a745";
                         var statusTitle = UpdateCheckStore.IsUpdateAvailable
@@ -123,7 +123,7 @@
                             : "System ist aktuell";
                     }
                     <span style="display: inline-block; width: 8px; height: 8px; background-color: @statusColor; border-radius: 50%; margin-right: 8px;" title="@statusTitle"></span>
-                    <i class="bi bi-box me-1"></i>Version: <strong style="color: #fff;">@VersionService.GetVersion()</strong>
+                    <i class="bi bi-box me-1"></i>Version: <strong style="color: var(--color-primary);">@VersionService.GetVersion()</strong>
                 </small>
             </div>
         </div>

Watcher/Views/System/Settings.cshtml

@@ -12,107 +12,96 @@
     <link rel="stylesheet" href="~/css/settings.css" />
 </head>
 
-<div class="Settingscontainer">
+<div class="container mt-4">
+    <h1 class="mb-4">
+        <i class="bi bi-gear-fill me-2"></i>Einstellungen
+    </h1>
 
-    <div class="card shadow mt-5 p-4" style="width: 55%; margin: auto;">
+    <!-- Systemeinformationen Card -->
-        <h4><i class="bi bi-pencil-square me-2"></i>Systemeinformationen</h4>
+    <div class="card settings-card shadow-sm mb-4">
+        <div class="card-header">
+            <h5 class="mb-0">
+                <i class="bi bi-info-circle me-2"></i>Systemeinformationen
+            </h5>
+        </div>
+        <div class="card-body">
+            <!-- System Info Table -->
+            <div class="info-table">
+                <div class="info-row">
+                    <div class="info-label">
+                        <i class="bi bi-tag me-2"></i>Version
+                    </div>
+                    <div class="info-value">@ServerVersion</div>
+                </div>
 
-        <br>
+                <div class="info-row">
+                    <div class="info-label">
+                        <i class="bi bi-shield-lock me-2"></i>Authentifizierung
+                    </div>
+                    <div class="info-value">@(ViewBag.IdentityProvider ?? "nicht gefunden")</div>
+                </div>
 
-        <h5>Watcher Version: @ServerVersion</h5>
+                <div class="info-row">
+                    <div class="info-label">
+                        <i class="bi bi-database me-2"></i>Datenbank-Engine
+                    </div>
+                    <div class="info-value">@(DbEngine ?? "nicht gefunden")</div>
+                </div>
 
-        <hr class="my-4" />
+                @if (ViewBag.DatabaseSize != null)
-
+                {
-        <h5>Authentifizierungsmethode: <strong>@(ViewBag.IdentityProvider ?? "nicht gefunden")</strong></h5>
+                    <div class="info-row">
-        
+                        <div class="info-label">
-
+                            <i class="bi bi-hdd me-2"></i>Datenbankgröße
-        <hr class="my-4" />
+                        </div>
-
+                        <div class="info-value">@ViewBag.DatabaseSize</div>
-        <h5>Datenbank-Engine: <strong>@(DbEngine ?? "nicht gefunden")</strong></h5>
+                    </div>
-
+                }
-        @if (ViewBag.DatabaseSize != null)
-        {
-            <h5>Datenbankgröße: <strong>@ViewBag.DatabaseSize</strong></h5>
-        }
-
-        <!-- Falls Sqlite verwendet wird können Backups erstellt werden -->
-        @if (DbEngine == "SQLite" || DbEngine == "Microsoft.EntityFrameworkCore.Sqlite")
-        {
-            <div class="d-flex gap-2">
-                <form asp-action="CreateSqlDump" method="post" asp-controller="Database">
-                    <button type="submit" class="btn btn-db">
-                        <i class="bi bi-save me-1"></i> Backup erstellen
-                    </button>
-                </form>
-
-                <form asp-action="ManageSqlDumps" method="post" asp-controller="Database">
-                    <button type="submit" class="btn btn-db">
-                        <i class="bi bi-save me-1"></i> Backups verwalten
-                    </button>
-                </form>
             </div>
 
-        }
+            <!-- Datenbank-Backups Section -->
-        else if (DbEngine == "Microsoft.EntityFrameworkCore.MySQL")
+            @if (DbEngine == "SQLite" || DbEngine == "Microsoft.EntityFrameworkCore.Sqlite")
-        {
+            {
-            <p> MySQL Dump aktuell nicht möglich </p>
+                <hr class="my-4" />
-        }
+                <h6 class="mb-3">
-
+                    <i class="bi bi-archive me-2"></i>Datenbank-Backups
-        <!-- Status für Erstellung eines Backups -->
+                </h6>
-        @if (TempData["DumpMessage"] != null)
+                <div class="backup-buttons">
-        {
+                    <form asp-action="CreateSqlDump" method="post" asp-controller="Database">
-            <div class="alert alert-success">
+                        <button type="submit" class="btn btn-outline-primary">
-                <i class="bi bi-check-circle me-1"></i>@TempData["DumpMessage"]
+                            <i class="bi bi-plus-circle me-2"></i>Backup erstellen
-            </div>
+                        </button>
-        }
+                    </form>
-        @if (TempData["DumpError"] != null)
+                    <form asp-action="ManageSqlDumps" method="post" asp-controller="Database">
-        {
+                        <button type="submit" class="btn btn-outline-primary">
-            <div class="alert alert-danger">
+                            <i class="bi bi-folder2-open me-2"></i>Backups verwalten
-                <i class="bi bi-exclamation-circle me-1"></i>@TempData["DumpError"]
+                        </button>
-            </div>
+                    </form>
-        }
+                </div>
+            }
+            else if (DbEngine == "Microsoft.EntityFrameworkCore.MySQL")
+            {
+                <hr class="my-4" />
+                <div class="alert alert-info">
+                    <i class="bi bi-info-circle me-2"></i>MySQL Dump aktuell nicht möglich
+                </div>
+            }
 
+            <!-- Status Messages -->
+            @if (TempData["DumpMessage"] != null)
+            {
+                <div class="alert alert-success mt-3">
+                    <i class="bi bi-check-circle me-2"></i>@TempData["DumpMessage"]
+                </div>
+            }
+            @if (TempData["DumpError"] != null)
+            {
+                <div class="alert alert-danger mt-3">
+                    <i class="bi bi-exclamation-circle me-2"></i>@TempData["DumpError"]
+                </div>
+            }
+        </div>
     </div>
 
-    <div class="card shadow mt-5 p-4" style="width: 55%; margin: auto;">
-        <h4><i class="bi bi-pencil-square me-2"></i>Benachrichtungen</h4>
     
-        <p>Registrierte E-Mail Adresse: <strong>@(ViewBag.mail ?? "nicht gefunden")</strong></p>
-
-        <!-- action="/Notification/UpdateSettings" existiert noch nicht-->
-        <form method="post" action="#">
-            <div class="card p-4 shadow-sm" style="max-width: 500px;">
-                <h5 class="card-title mb-3">
-                    <i class="bi bi-bell me-2"></i>Benachrichtigungseinstellungen
-                </h5>
-
-                <div class="form-check form-switch mb-3">
-                    <input class="form-check-input" type="checkbox" id="notifyOffline" name="NotifyOffline" checked>
-                    <label class="form-check-label" for="notifyOffline">Benachrichtigung bei Server-Offline</label>
-                </div>
-
-                <div class="form-check form-switch mb-3">
-                    <input class="form-check-input" type="checkbox" id="notifyUpdates" name="NotifyUpdates">
-                    <label class="form-check-label" for="notifyUpdates">Benachrichtigung bei neuen Updates</label>
-                </div>
-
-                <div class="form-check form-switch mb-3">
-                    <input class="form-check-input" type="checkbox" id="notifyUser" name="NotifyUser">
-                    <label class="form-check-label" for="notifyUser">Benachrichtigung bei neuen Benutzern</label>
-                </div>
-
-                <div class="form-check form-switch mb-3">
-                    <input class="form-check-input" type="checkbox" id="notifyMaintenance" name="NotifyMaintenance">
-                    <label class="form-check-label" for="notifyMaintenance">Wartungsinformationen erhalten</label>
-                </div>
-
-                <button type="submit" class="btn btn-db mt-3">
-                    <i class="bi bi-save me-1"></i>Speichern
-                </button>
-            </div>
-        </form>
-
-        <hr class="my-4" />
-
-    </div>
 </div>

Watcher/wwwroot/css/Login.css

@@ -19,6 +19,6 @@
 }
 
 .form-error {
-    color: #ff6b6b;
+    color: var(--color-danger);
     font-size: 0.875rem;
 }

Watcher/wwwroot/css/server-detail.css

@@ -14,16 +14,25 @@
 .info-label {
     font-size: 0.85rem;
     font-weight: 500;
-    color: #6c757d;
+    color: var(--color-muted) !important;
     display: flex;
     align-items: center;
 }
 
 .info-value {
     font-size: 0.95rem;
-    color: var(--color-text, #212529);
     font-weight: 400;
     padding-left: 1.25rem;
+    color: var(--color-text, #f9feff) !important;
+}
+
+/* All text within info-value should be visible */
+.info-value,
+.info-value *,
+.info-value span,
+.info-value .text-muted,
+.info-value .text-success {
+    color: var(--color-text, #f9feff) !important;
 }
 
 .info-value .text-muted {
@@ -37,17 +46,23 @@
     text-transform: uppercase;
     letter-spacing: 0.5px;
     font-weight: 600;
+    color: var(--color-text) !important;
 }
 
 .card-body h6.text-muted i {
     font-size: 1rem;
 }
 
+/* Description and other text-muted paragraphs */
+.card-body p.text-muted {
+    color: var(--color-text) !important;
+}
+
 /* Graph Container */
 .graphcontainer {
     height: 25rem;
     width: 100%;
-    background-color: var(--color-surface, #f8f9fa);
+    background-color: var(--color-surface, #212121);
     border-radius: 0.375rem;
 }
 

Watcher/wwwroot/css/server-overview.css

@@ -0,0 +1,106 @@
+/* Server Card Styling */
+.server-card {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    background: var(--color-surface);
+    color: var(--color-text);
+}
+
+.server-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+
+.server-card .card-header {
+    background-color: var(--color-bg);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 0.75rem 1rem;
+}
+
+.server-card .card-body {
+    padding: 1rem;
+}
+
+/* Ensure all text in server-card uses light color */
+.server-card,
+.server-card * {
+    color: var(--color-text);
+}
+
+/* Allow Bootstrap badge colors to work */
+.server-card .badge {
+    color: white;
+}
+
+/* Allow button colors to work */
+.server-card .btn {
+    color: inherit;
+}
+
+/* Server Info Rows */
+.server-info {
+    font-size: 0.9rem;
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.4rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.info-row:last-child {
+    border-bottom: none;
+}
+
+.info-label {
+    color: var(--color-muted);
+    font-weight: 500;
+}
+
+.info-value {
+    word-break: break-all;
+}
+
+/* Current Metrics Section */
+.current-metrics h6 {
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.metric-bar-item {
+    margin-bottom: 0.5rem;
+}
+
+.metric-bar-item:last-child {
+    margin-bottom: 0;
+}
+
+.progress {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Action Buttons */
+.action-buttons .btn {
+    font-size: 0.85rem;
+    padding: 0.4rem 0.6rem;
+}
+
+/* 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;
+}

Watcher/wwwroot/css/services-overview.css

@@ -2,7 +2,7 @@
 .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);
+    background: var(--color-surface);
 }
 
 .container-card:hover {
@@ -11,8 +11,8 @@
 }
 
 .container-card .card-header {
-    background-color: rgba(0, 0, 0, 0.03);
+    background-color: var(--color-bg);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     padding: 0.75rem 1rem;
 }
 
@@ -37,15 +37,24 @@
 }
 
 .info-label {
-    color: #6c757d;
+    color: var(--color-muted);
     font-weight: 500;
 }
 
 .info-value {
-    color: var(--color-text, #212529);
+    color: var(--color-text, #f9feff);
     word-break: break-all;
 }
 
+.info-value a {
+    color: var(--color-text);
+    transition: color 0.2s ease;
+}
+
+.info-value a:hover {
+    color: var(--color-primary);
+}
+
 /* Action Buttons */
 .action-buttons .btn {
     font-size: 0.85rem;
@@ -65,8 +74,8 @@
 }
 
 .metrics-content {
-    background-color: #f8f9fa !important;
+    background-color: var(--color-bg) !important;
-    border: 1px solid #dee2e6;
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .metric-item {
@@ -110,6 +119,6 @@
 /* Server Group Header */
 h5.text-muted {
     font-weight: 600;
-    border-bottom: 2px solid #dee2e6;
+    border-bottom: 2px solid var(--color-accent);
     padding-bottom: 0.5rem;
 }

Watcher/wwwroot/css/settings.css

@@ -1,24 +1,158 @@
-.Settingscontainer {
+/* Settings Card Styling - gleicher Stil wie Server Cards */
+.settings-card {
+    background: var(--color-surface);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.settings-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+
+.settings-card .card-header {
+    background-color: var(--color-bg);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 0.75rem 1rem;
+}
+
+.settings-card .card-header h5 {
+    color: var(--color-text);
+    font-weight: 600;
+    font-size: 1rem;
+}
+
+.settings-card .card-body {
+    padding: 1rem;
+}
+
+/* Info Table Layout - ähnlich wie Server Info Rows */
+.info-table {
     display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    transition: background-color 0.2s ease;
+}
+
+.info-row:last-child {
+    border-bottom: none;
+}
+
+.info-row:hover {
+    background-color: rgba(255, 255, 255, 0.02);
+}
+
+.info-label {
+    color: var(--color-muted);
+    font-weight: 500;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+}
+
+.info-label i {
+    color: var(--color-accent);
+}
+
+.info-value {
+    color: var(--color-text);
+    font-weight: 600;
+    font-size: 0.9rem;
+    text-align: right;
+}
+
+/* Subsection Headers */
+.settings-card h6 {
+    color: var(--color-text);
+    font-weight: 600;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* Backup Buttons */
+.backup-buttons {
+    display: flex;
+    gap: 0.75rem;
     flex-wrap: wrap;
-    /* Wichtig: erlaubt Umbruch */
-    gap: 1rem;
-    /* optionaler Abstand */
 }
 
-.Settingscontainer>* {
+.backup-buttons form {
-    flex: 1 1 calc(50% - 0.5rem);
+    flex: 1;
-    /* 2 Elemente pro Zeile, inkl. Gap */
+    min-width: 200px;
-    box-sizing: border-box;
 }
 
-.btn-db {
+.backup-buttons .btn {
-    background-color: var(--color-primary);
+    width: 100%;
-    border: none;
 }
 
-.btn-db:hover {
+/* Button Styling */
-    background-color: var(--color-accent);
+.settings-card .btn {
-    border: none;
+    font-weight: 500;
+    font-size: 0.85rem;
+    padding: 0.5rem 0.75rem;
+    transition: all 0.2s ease;
 }
 
+.settings-card .btn-outline-primary {
+    border-color: var(--color-accent) !important;
+    color: var(--color-accent) !important;
+    background-color: transparent !important;
+}
+
+.settings-card .btn-outline-primary:hover {
+    background-color: var(--color-accent) !important;
+    border-color: var(--color-accent) !important;
+    color: white !important;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.settings-card .btn-outline-primary:active,
+.settings-card .btn-outline-primary:focus,
+.settings-card .btn-outline-primary:focus-visible {
+    background-color: var(--color-accent) !important;
+    border-color: var(--color-accent) !important;
+    color: white !important;
+}
+
+/* HR Styling */
+.settings-card hr {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    margin: 1.5rem 0;
+}
+
+/* Alert Styling */
+.alert {
+    border-radius: 0.375rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .info-row {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+        padding: 0.75rem;
+    }
+
+    .info-value {
+        text-align: left;
+    }
+
+    .backup-buttons {
+        flex-direction: column;
+    }
+
+    .backup-buttons form {
+        width: 100%;
+    }
+}

Watcher/wwwroot/css/site.css

@@ -6,6 +6,7 @@
     --color-text: #f9feff;
     --color-muted: #c0c0c0;
     --color-success: #14a44d;
+    --color-success-hover: #0f8c3c;
     --color-danger: #ff6b6b;
 }
 
@@ -54,9 +55,30 @@ a {
 }
 
 .btn-pocketid:hover {
-    background-color: #0f8c3c;
+    background-color: var(--color-success-hover);
 }
 
 hr {
     border-top: 1px solid var(--color-accent);
 }
+
+/* Bootstrap Overrides für Dark Theme */
+.text-muted {
+    color: var(--color-muted) !important;
+}
+
+.bg-light {
+    background-color: var(--color-surface) !important;
+}
+
+.text-text {
+    color: var(--color-text) !important;
+}
+
+.text-primary-emphasis {
+    color: var(--color-primary) !important;
+}
+
+.border-secondary {
+    border-color: rgba(255, 255, 255, 0.2) !important;
+}

Watcher/wwwroot/css/user-info.css

@@ -1,6 +1,5 @@
 .table {
-    color: red;
+    color: var(--color-text);
-
 }
 
 .picture {