?

watcher-monitoring/Controllers/ApiController.cs

@@ -8,6 +8,7 @@ using watcher_monitoring.Models;
 using watcher_monitoring.Data;
 using watcher_monitoring.Attributes;
 using watcher_monitoring.Payloads;
+using System.Net;
 
 
 
@@ -122,7 +123,7 @@ public class APIController : Controller
     public async Task<IActionResult> Containers()
     {
         List<Container> containers = await _context.Containers.ToListAsync();
-        return Ok();
+        return Ok(containers);
     }
 
     [HttpDelete("delete-container")]
@@ -166,15 +167,25 @@ public class APIController : Controller
         }
 
         try {
-            Server server = new Server
+            Server newServer = new Server
             {
-                Name = "test",
+                Name = dto.hostName,
-                IPAddress = dto.IpAddress
+                IPAddress = dto.ipAddress
             };
 
-            _context.Servers.Add(server);
+            _context.Servers.Add(newServer);
             await _context.SaveChangesAsync();
-            return Ok(); 
+
+            var server = await _context.Servers.FindAsync(dto.ipAddress);
+
+            if (server != null)
+            {
+                return Ok(server.Id);
+            } else
+            {
+                return BadRequest();
+            }
+             
         } catch (Exception ex)
         {
             Console.WriteLine(ex.Message);
@@ -201,7 +212,7 @@ public class APIController : Controller
         try
         {
             // Find Server in Database
-            var server = await _context.Servers.FindAsync(dto.Id);
+            var server = await _context.Servers.FindAsync(dto.id);
 
             if (server == null)
             {
@@ -210,11 +221,11 @@ public class APIController : Controller
             }
 
             // Add Hardware Configuration
-            server.CpuType = dto.CpuType;
+            server.CpuType = dto.cpuType;
-            server.CpuCores = dto.CpuCores;
+            server.CpuCores = dto.cpuCores;
-            server.GpuType = dto.GpuType;
+            server.GpuType = dto.gpuType;
-            server.RamSize = dto.RamSize;
+            server.RamSize = dto.ramSize;
-            // Diskspace fehlt
+            // TODO: Diskspace fehlt
 
             await _context.SaveChangesAsync();
             _logger.LogInformation("Harware configuration successfull for server {server}", server.Name);
@@ -231,9 +242,34 @@ public class APIController : Controller
 
     // Server-Metrics endpoint for watcher-agent
     [HttpPost("agent-server-metrics/{id}")]
-    public async Task<IActionResult> ServerMetrics ([FromBody] HardwareDto dto)
+    public async Task<IActionResult> ServerMetrics ([FromBody] MetricDto dto)
     {
-        return Ok();
+        if (!ModelState.IsValid)
+        {
+            var errors = ModelState.Values
+                .SelectMany(v => v.Errors)
+                .Select(e => e.ErrorMessage)
+                .ToList();
+
+            _logger.LogError("Invalid monitoring payload");
+            return BadRequest(new { error = "Invalid monitoring payload", details = errors });
+        }
+
+        var server = await _context.Servers.FindAsync(dto.id);
+
+        if (server != null)
+        {
+            // neues Objekt mit Typ Metric anlegen
+
+            // Metric in Datenbank eintragen
+
+            return Ok();
+        }
+        else
+        {
+            _logger.LogError("metric cannot be added to database");
+            return BadRequest();
+        }
     }
 
     // Service-Detection endpoint for watcher-agent
@@ -244,7 +280,7 @@ public class APIController : Controller
     }
 
     // Container-Metrics endpoint for watcher-agent
-    [HttpPost("agent-container-metrics/{id}")]
+    [HttpPost("agent-container-metrics")]
     public async Task<IActionResult> ContainerMetrics ([FromBody] HardwareDto dto)
     {
         return Ok();

watcher-monitoring/Controllers/HomeController.cs

@@ -4,7 +4,7 @@ using Microsoft.AspNetCore.Mvc;
 using watcher_monitoring.Models;
 
 using watcher_monitoring.Data;
-using System.Threading.Tasks;
+using watcher_monitoring.ViewModels;
 using Microsoft.EntityFrameworkCore;
 
 namespace watcher_monitoring.Controllers;
@@ -24,18 +24,19 @@ public class HomeController : Controller
     // Dashboard
     public async Task<IActionResult> Index()
     {
-        List<Server> servers = await _context.Servers.ToListAsync();
+        List<Server> _servers = await _context.Servers.ToListAsync();
-        List<Container> containers = await _context.Containers.ToListAsync();
+        List<Container> _containers = await _context.Containers.ToListAsync();
 
-        ViewBag.Containers = containers;
+        var homeVm = new HomeViewModel
-        ViewBag.ContainerCount = containers.Count();
+        {
+            servers = _servers,
+            containers = _containers,
+            serversCount = _servers.Count,
+            serversOnline = (from server in _servers where server.IsOnline select server).Count(),
+            serversOffline = _servers.Count - (from server in _servers where server.IsOnline select server).Count()
+        };
 
-        ViewBag.TotalServers = servers.Count;
+        return View(homeVm);
-        ViewBag.OnlineServers = servers.Count(s => s.IsOnline);
-        ViewBag.OfflineServers = servers.Count(s => !s.IsOnline);
-        ViewBag.Servers = servers;
-
-        return View();
     }
 
     public IActionResult Privacy()

watcher-monitoring/Controllers/MonitoringController.cs

@@ -25,4 +25,10 @@ public class MonitoringController : Controller
         return View();
     }
 
+    [HttpGet("server")]
+    public async Task <IActionResult> ServerIndex()
+    {
+        return View();
+    }
+
 }

watcher-monitoring/Controllers/UserController.cs

@@ -22,7 +22,7 @@ public class UserController : Controller
     }
 
     // GET: /User
-    [HttpGet]
+
     public async Task<IActionResult> Index()
     {
         var users = await _context.Users

watcher-monitoring/Payloads/HardwareDto.cs

@@ -6,21 +6,18 @@ namespace watcher_monitoring.Payloads;
 public class HardwareDto
 {
     [Required]
-    public required int Id;
+    public required int id;
-
-    [Required]
-    public string? IpAddress { get; set; }
 
     // Hardware Info
     [Required]
-    public string? CpuType { get; set; }
+    public string? cpuType { get; set; }
 
     [Required]
-    public int CpuCores { get; set; }
+    public int cpuCores { get; set; }
 
     [Required]
-    public string? GpuType { get; set; }
+    public string? gpuType { get; set; }
 
     [Required]
-    public double RamSize { get; set; }
+    public double ramSize { get; set; }
 }

watcher-monitoring/Payloads/MetricDto.cs

@@ -0,0 +1,44 @@
+using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations.Schema;
+
+namespace watcher_monitoring.Payloads;
+
+public class MetricDto
+{
+    // Server Identity
+    [Required]
+    public int id { get; set; }
+
+    // Hardware Metrics
+    // CPU
+    public double cpuLoad { get; set; } // %
+
+    public double cpuTemp { get; set; } // deg C
+
+    // GPU
+    public double gpuLoad { get; set; } // %
+
+    public double gpuTemp { get; set; } // deg C
+
+    public double vRamSize { get; set; } // Bytes
+
+    public double vRamLoad { get; set; } // %
+
+    // RAM
+    public double ramSize { get; set; } // Bytes
+
+    public double ramLoad { get; set; } // %
+
+    // Disks
+    public double diskSize { get; set; } // Bytes
+
+    public double diskLoad { get; set; } // Bytes
+
+    public double diskTempp { get; set; } // deg C (if available)
+
+    // Network
+    public double netIn { get; set; } // Bytes/s
+
+    public double netOut { get; set; } // Bytes/s
+
+}

watcher-monitoring/Payloads/RegistrationDto.cs

@@ -7,5 +7,7 @@ namespace watcher_monitoring.Payloads;
 public class RegistrationDto
 {
     [Required]
-    public required string IpAddress { get; set; }
+    public required string ipAddress { get; set; }
+
+    public required string hostName { get; set; }
 }

watcher-monitoring/ViewModels/HomeViewModel.cs

@@ -0,0 +1,20 @@
+using SQLitePCL;
+using watcher_monitoring.Data;
+using watcher_monitoring.Models;
+
+namespace watcher_monitoring.ViewModels;
+
+public class HomeViewModel
+{
+    public List<Server> servers { get; set; } = new();
+
+    public List<Container> containers { get; set; } = new();
+
+    public int serversCount { get; set; }
+
+    public int serversOnline { get; set; }
+
+    public int serversOffline { get; set; }
+
+    public int containersCount { get; set; }
+}

watcher-monitoring/Views/Home/Index.cshtml

@@ -16,25 +16,25 @@
         <div class="col-md-3">
             <div class="metric-card">
                 <div class="metric-label">Total Servers</div>
-                <div class="metric-value">@ViewBag.TotalServers</div>
+                <div class="metric-value">@Model.serversCount</div>
             </div>
         </div>
         <div class="col-md-3">
             <div class="metric-card">
                 <div class="metric-label">Online</div>
-                <div class="metric-value" style="color: var(--success)">@ViewBag.OnlineServers</div>
+                <div class="metric-value" style="color: var(--success)">@Model.serversOnline</div>
             </div>
         </div>
         <div class="col-md-3">
             <div class="metric-card">
                 <div class="metric-label">Offline</div>
-                <div class="metric-value" style="color: var(--danger)">@ViewBag.OfflineServers</div>
+                <div class="metric-value" style="color: var(--danger)">@Model.serversOffline</div>
             </div>
         </div>
         <div class="col-md-3">
             <div class="metric-card">
                 <div class="metric-label">Total Containers</div>
-                <div class="metric-value">@ViewBag.ContainerCount</div>
+                <div class="metric-value">@Model.containersCount</div>
             </div>
         </div>
     </div>
@@ -42,11 +42,11 @@
     <div class="row g-4">
         <div class="col-lg-4">
             <div class="card">
-                <h2 class="card-title">Monitored Servers</h2>
+                <h2 class="card-title"><a href="/Monitoring/server" style="text-decoration: none;">Monitored Servers</a></h2>
                 <ul class="server-list">
-                    @if (ViewBag.Servers != null && ViewBag.Servers.Count > 0)
+                    @if (Model.servers != null && Model.servers.Count > 0)
                     {
-                        @foreach (var server in ViewBag.Servers)
+                        @foreach (var server in Model.servers)
                         {
                             <li class="server-item">
                                 <div class="server-info">
@@ -70,11 +70,11 @@
         </div>
         <div class="col-lg-4">
             <div class="card">
-                <h2 class="card-title">Monitored Containers</h2>
+                <h2 class="card-title"><a href="/Monitoring/server" style="text-decoration: none;">Monitored Containers</a></h2>
                 <ul class="server-list">
-                    @if (ViewBag.Containers != null && ViewBag.Containers.Count > 0)
+                    @if (Model.containers != null && Model.containers.Count > 0)
                     {
-                        @foreach (var container in ViewBag.Containers)
+                        @foreach (var container in Model.containers)
                         {
                             <li class="server-item">
                                 <div class="server-info">

watcher-monitoring/Views/Monitoring/ContainerIndex.cshtml

@@ -0,0 +1,471 @@
+@model dynamic
+
+@{
+    ViewData["Title"] = "Container Overview";
+}
+
+<div class="container-fluid px-4">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <h1 class="section-title mb-0">Container Overview</h1>
+        <span class="text-muted">Last updated: @DateTime.Now.ToString("HH:mm:ss")</span>
+    </div>
+
+    <div class="row g-4">
+        <!-- Container Card 1 -->
+        <div class="col-xl-4 col-lg-6">
+            <div class="card server-detail-card">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <h2 class="card-title mb-1">test</h2>
+                        <span class="server-ip">nginx:latest</span>
+                    </div>
+                    <span class="status-badge status-online">Running</span>
+                </div>
+
+                <div class="server-metrics">
+                    <!-- CPU Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">CPU Usage</span>
+                            <span class="metric-value-small">400%</span>
+                        </div>
+                        <canvas id="cpuChart1" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Memory Usage -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">Memory Usage</span>
+                            <span class="metric-value-small">400 MB</span>
+                        </div>
+                        <canvas id="memChart1" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Network I/O -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">Network I/O</span>
+                            <span class="metric-value-small">400 MB/s</span>
+                        </div>
+                        <canvas id="netChart1" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Uptime -->
+                    <div class="metric-section">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="metric-label-small">Uptime</span>
+                            <span class="metric-value-small">400 days</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Container Card 2 -->
+        <div class="col-xl-4 col-lg-6">
+            <div class="card server-detail-card">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <h2 class="card-title mb-1">test</h2>
+                        <span class="server-ip">postgres:14</span>
+                    </div>
+                    <span class="status-badge status-online">Running</span>
+                </div>
+
+                <div class="server-metrics">
+                    <!-- CPU Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">CPU Usage</span>
+                            <span class="metric-value-small">400%</span>
+                        </div>
+                        <canvas id="cpuChart2" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Memory Usage -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">Memory Usage</span>
+                            <span class="metric-value-small">400 MB</span>
+                        </div>
+                        <canvas id="memChart2" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Network I/O -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">Network I/O</span>
+                            <span class="metric-value-small">400 MB/s</span>
+                        </div>
+                        <canvas id="netChart2" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Uptime -->
+                    <div class="metric-section">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="metric-label-small">Uptime</span>
+                            <span class="metric-value-small">400 days</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Container Card 3 -->
+        <div class="col-xl-4 col-lg-6">
+            <div class="card server-detail-card">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <h2 class="card-title mb-1">test</h2>
+                        <span class="server-ip">redis:alpine</span>
+                    </div>
+                    <span class="status-badge status-warning">Restarting</span>
+                </div>
+
+                <div class="server-metrics">
+                    <!-- CPU Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">CPU Usage</span>
+                            <span class="metric-value-small">400%</span>
+                        </div>
+                        <canvas id="cpuChart3" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Memory Usage -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">Memory Usage</span>
+                            <span class="metric-value-small">400 MB</span>
+                        </div>
+                        <canvas id="memChart3" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Network I/O -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">Network I/O</span>
+                            <span class="metric-value-small">400 MB/s</span>
+                        </div>
+                        <canvas id="netChart3" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Uptime -->
+                    <div class="metric-section">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="metric-label-small">Uptime</span>
+                            <span class="metric-value-small">400 days</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Container Card 4 -->
+        <div class="col-xl-4 col-lg-6">
+            <div class="card server-detail-card">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <h2 class="card-title mb-1">test</h2>
+                        <span class="server-ip">node:18-alpine</span>
+                    </div>
+                    <span class="status-badge status-online">Running</span>
+                </div>
+
+                <div class="server-metrics">
+                    <!-- CPU Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">CPU Usage</span>
+                            <span class="metric-value-small">400%</span>
+                        </div>
+                        <canvas id="cpuChart4" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Memory Usage -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">Memory Usage</span>
+                            <span class="metric-value-small">400 MB</span>
+                        </div>
+                        <canvas id="memChart4" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Network I/O -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">Network I/O</span>
+                            <span class="metric-value-small">400 MB/s</span>
+                        </div>
+                        <canvas id="netChart4" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Uptime -->
+                    <div class="metric-section">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="metric-label-small">Uptime</span>
+                            <span class="metric-value-small">400 days</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Container Card 5 -->
+        <div class="col-xl-4 col-lg-6">
+            <div class="card server-detail-card">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <h2 class="card-title mb-1">test</h2>
+                        <span class="server-ip">mongo:6.0</span>
+                    </div>
+                    <span class="status-badge status-offline">Stopped</span>
+                </div>
+
+                <div class="server-metrics">
+                    <!-- CPU Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">CPU Usage</span>
+                            <span class="metric-value-small">400%</span>
+                        </div>
+                        <canvas id="cpuChart5" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Memory Usage -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">Memory Usage</span>
+                            <span class="metric-value-small">400 MB</span>
+                        </div>
+                        <canvas id="memChart5" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Network I/O -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">Network I/O</span>
+                            <span class="metric-value-small">400 MB/s</span>
+                        </div>
+                        <canvas id="netChart5" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Uptime -->
+                    <div class="metric-section">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="metric-label-small">Uptime</span>
+                            <span class="metric-value-small">400 days</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Container Card 6 -->
+        <div class="col-xl-4 col-lg-6">
+            <div class="card server-detail-card">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <h2 class="card-title mb-1">test</h2>
+                        <span class="server-ip">traefik:v2.9</span>
+                    </div>
+                    <span class="status-badge status-online">Running</span>
+                </div>
+
+                <div class="server-metrics">
+                    <!-- CPU Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">CPU Usage</span>
+                            <span class="metric-value-small">400%</span>
+                        </div>
+                        <canvas id="cpuChart6" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Memory Usage -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">Memory Usage</span>
+                            <span class="metric-value-small">400 MB</span>
+                        </div>
+                        <canvas id="memChart6" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Network I/O -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">Network I/O</span>
+                            <span class="metric-value-small">400 MB/s</span>
+                        </div>
+                        <canvas id="netChart6" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Uptime -->
+                    <div class="metric-section">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="metric-label-small">Uptime</span>
+                            <span class="metric-value-small">400 days</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@section Scripts {
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        // Configuration for charts
+        const chartConfig = {
+            type: 'line',
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        enabled: false
+                    }
+                },
+                scales: {
+                    x: {
+                        display: false
+                    },
+                    y: {
+                        display: false,
+                        min: 0,
+                        max: 100
+                    }
+                },
+                elements: {
+                    line: {
+                        tension: 0.4,
+                        borderWidth: 2
+                    },
+                    point: {
+                        radius: 0
+                    }
+                },
+                interaction: {
+                    intersect: false,
+                    mode: 'index'
+                }
+            }
+        };
+
+        // Generate random data for demo
+        function generateData() {
+            return Array.from({ length: 20 }, () => Math.floor(Math.random() * 60) + 20);
+        }
+
+        // Create CPU charts
+        for (let i = 1; i <= 6; i++) {
+            const ctx = document.getElementById(`cpuChart${i}`);
+            if (ctx) {
+                new Chart(ctx, {
+                    ...chartConfig,
+                    data: {
+                        labels: Array(20).fill(''),
+                        datasets: [{
+                            data: generateData(),
+                            borderColor: '#58a6ff',
+                            backgroundColor: 'rgba(88, 166, 255, 0.1)',
+                            fill: true
+                        }]
+                    }
+                });
+            }
+        }
+
+        // Create Memory charts
+        for (let i = 1; i <= 6; i++) {
+            const ctx = document.getElementById(`memChart${i}`);
+            if (ctx) {
+                new Chart(ctx, {
+                    ...chartConfig,
+                    data: {
+                        labels: Array(20).fill(''),
+                        datasets: [{
+                            data: generateData(),
+                            borderColor: '#3fb950',
+                            backgroundColor: 'rgba(63, 185, 80, 0.1)',
+                            fill: true
+                        }]
+                    }
+                });
+            }
+        }
+
+        // Create Network I/O charts
+        for (let i = 1; i <= 6; i++) {
+            const ctx = document.getElementById(`netChart${i}`);
+            if (ctx) {
+                new Chart(ctx, {
+                    ...chartConfig,
+                    data: {
+                        labels: Array(20).fill(''),
+                        datasets: [{
+                            data: generateData(),
+                            borderColor: '#d29922',
+                            backgroundColor: 'rgba(210, 153, 34, 0.1)',
+                            fill: true
+                        }]
+                    }
+                });
+            }
+        }
+
+        // Auto-refresh every 30 seconds
+        setInterval(function() {
+            location.reload();
+        }, 30000);
+    </script>
+}
+
+<style>
+    .server-detail-card {
+        max-height: 500px;
+        height: 100%;
+        transition: transform 0.2s ease;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .server-detail-card:hover {
+        transform: translateY(-4px);
+    }
+
+    .server-metrics {
+        padding-top: 1rem;
+        flex: 1;
+        overflow: hidden;
+    }
+
+    .metric-section {
+        padding: 0.5rem 0.75rem;
+        background-color: var(--bg-tertiary);
+        border-radius: 6px;
+        border: 1px solid var(--border-color);
+    }
+
+    .metric-label-small {
+        font-size: 0.875rem;
+        color: var(--text-secondary);
+        font-weight: 500;
+    }
+
+    .metric-value-small {
+        font-size: 0.875rem;
+        color: var(--text-primary);
+        font-weight: 600;
+    }
+
+    .chart-canvas {
+        height: 50px !important;
+        max-height: 50px !important;
+        margin-top: 0.5rem;
+    }
+</style>

watcher-monitoring/Views/Monitoring/ServerIndex.cshtml

@@ -0,0 +1,398 @@
+@model dynamic
+
+@{
+    ViewData["Title"] = "Server Overview";
+}
+
+<div class="container-fluid px-4">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <h1 class="section-title mb-0">Server Overview</h1>
+        <span class="text-muted">Last updated: @DateTime.Now.ToString("HH:mm:ss")</span>
+    </div>
+
+    <div class="row g-4">
+        <!-- Server Card 1 -->
+        <div class="col-xl-4 col-lg-6">
+            <div class="card server-detail-card">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <h2 class="card-title mb-1">test</h2>
+                        <span class="server-ip">192.168.1.100</span>
+                    </div>
+                    <span class="status-badge status-online">Online</span>
+                </div>
+
+                <div class="server-metrics">
+                    <!-- CPU Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">CPU Load</span>
+                            <span class="metric-value-small">400%</span>
+                        </div>
+                        <canvas id="cpuChart1" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- RAM Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">RAM Load</span>
+                            <span class="metric-value-small">400 MB</span>
+                        </div>
+                        <canvas id="ramChart1" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Uptime -->
+                    <div class="metric-section">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="metric-label-small">Uptime</span>
+                            <span class="metric-value-small">400 days</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Server Card 2 -->
+        <div class="col-xl-4 col-lg-6">
+            <div class="card server-detail-card">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <h2 class="card-title mb-1">test</h2>
+                        <span class="server-ip">192.168.1.101</span>
+                    </div>
+                    <span class="status-badge status-online">Online</span>
+                </div>
+
+                <div class="server-metrics">
+                    <!-- CPU Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">CPU Load</span>
+                            <span class="metric-value-small">400%</span>
+                        </div>
+                        <canvas id="cpuChart2" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- RAM Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">RAM Load</span>
+                            <span class="metric-value-small">400 MB</span>
+                        </div>
+                        <canvas id="ramChart2" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Uptime -->
+                    <div class="metric-section">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="metric-label-small">Uptime</span>
+                            <span class="metric-value-small">400 days</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Server Card 3 -->
+        <div class="col-xl-4 col-lg-6">
+            <div class="card server-detail-card">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <h2 class="card-title mb-1">test</h2>
+                        <span class="server-ip">192.168.1.102</span>
+                    </div>
+                    <span class="status-badge status-warning">Warning</span>
+                </div>
+
+                <div class="server-metrics">
+                    <!-- CPU Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">CPU Load</span>
+                            <span class="metric-value-small">400%</span>
+                        </div>
+                        <canvas id="cpuChart3" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- RAM Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">RAM Load</span>
+                            <span class="metric-value-small">400 MB</span>
+                        </div>
+                        <canvas id="ramChart3" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Uptime -->
+                    <div class="metric-section">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="metric-label-small">Uptime</span>
+                            <span class="metric-value-small">400 days</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Server Card 4 -->
+        <div class="col-xl-4 col-lg-6">
+            <div class="card server-detail-card">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <h2 class="card-title mb-1">test</h2>
+                        <span class="server-ip">192.168.1.103</span>
+                    </div>
+                    <span class="status-badge status-online">Online</span>
+                </div>
+
+                <div class="server-metrics">
+                    <!-- CPU Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">CPU Load</span>
+                            <span class="metric-value-small">400%</span>
+                        </div>
+                        <canvas id="cpuChart4" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- RAM Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">RAM Load</span>
+                            <span class="metric-value-small">400 MB</span>
+                        </div>
+                        <canvas id="ramChart4" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Uptime -->
+                    <div class="metric-section">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="metric-label-small">Uptime</span>
+                            <span class="metric-value-small">400 days</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Server Card 5 -->
+        <div class="col-xl-4 col-lg-6">
+            <div class="card server-detail-card">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <h2 class="card-title mb-1">test</h2>
+                        <span class="server-ip">192.168.1.104</span>
+                    </div>
+                    <span class="status-badge status-offline">Offline</span>
+                </div>
+
+                <div class="server-metrics">
+                    <!-- CPU Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">CPU Load</span>
+                            <span class="metric-value-small">400%</span>
+                        </div>
+                        <canvas id="cpuChart5" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- RAM Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">RAM Load</span>
+                            <span class="metric-value-small">400 MB</span>
+                        </div>
+                        <canvas id="ramChart5" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Uptime -->
+                    <div class="metric-section">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="metric-label-small">Uptime</span>
+                            <span class="metric-value-small">400 days</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Server Card 6 -->
+        <div class="col-xl-4 col-lg-6">
+            <div class="card server-detail-card">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <h2 class="card-title mb-1">test</h2>
+                        <span class="server-ip">192.168.1.105</span>
+                    </div>
+                    <span class="status-badge status-online">Online</span>
+                </div>
+
+                <div class="server-metrics">
+                    <!-- CPU Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">CPU Load</span>
+                            <span class="metric-value-small">400%</span>
+                        </div>
+                        <canvas id="cpuChart6" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- RAM Load -->
+                    <div class="metric-section mb-3">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <span class="metric-label-small">RAM Load</span>
+                            <span class="metric-value-small">400 MB</span>
+                        </div>
+                        <canvas id="ramChart6" class="chart-canvas"></canvas>
+                    </div>
+
+                    <!-- Uptime -->
+                    <div class="metric-section">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="metric-label-small">Uptime</span>
+                            <span class="metric-value-small">400 days</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@section Scripts {
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        // Configuration for charts
+        const chartConfig = {
+            type: 'line',
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        enabled: false
+                    }
+                },
+                scales: {
+                    x: {
+                        display: false
+                    },
+                    y: {
+                        display: false,
+                        min: 0,
+                        max: 100
+                    }
+                },
+                elements: {
+                    line: {
+                        tension: 0.4,
+                        borderWidth: 2
+                    },
+                    point: {
+                        radius: 0
+                    }
+                },
+                interaction: {
+                    intersect: false,
+                    mode: 'index'
+                }
+            }
+        };
+
+        // Generate random data for demo
+        function generateData() {
+            return Array.from({ length: 20 }, () => Math.floor(Math.random() * 60) + 20);
+        }
+
+        // Create CPU charts
+        for (let i = 1; i <= 6; i++) {
+            const ctx = document.getElementById(`cpuChart${i}`);
+            if (ctx) {
+                new Chart(ctx, {
+                    ...chartConfig,
+                    data: {
+                        labels: Array(20).fill(''),
+                        datasets: [{
+                            data: generateData(),
+                            borderColor: '#58a6ff',
+                            backgroundColor: 'rgba(88, 166, 255, 0.1)',
+                            fill: true
+                        }]
+                    }
+                });
+            }
+        }
+
+        // Create RAM charts
+        for (let i = 1; i <= 6; i++) {
+            const ctx = document.getElementById(`ramChart${i}`);
+            if (ctx) {
+                new Chart(ctx, {
+                    ...chartConfig,
+                    data: {
+                        labels: Array(20).fill(''),
+                        datasets: [{
+                            data: generateData(),
+                            borderColor: '#3fb950',
+                            backgroundColor: 'rgba(63, 185, 80, 0.1)',
+                            fill: true
+                        }]
+                    }
+                });
+            }
+        }
+
+        // Auto-refresh every 30 seconds
+        setInterval(function() {
+            location.reload();
+        }, 30000);
+    </script>
+}
+
+<style>
+    .server-detail-card {
+        max-height: 420px;
+        height: 100%;
+        transition: transform 0.2s ease;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .server-detail-card:hover {
+        transform: translateY(-4px);
+    }
+
+    .server-metrics {
+        padding-top: 1rem;
+        flex: 1;
+        overflow: hidden;
+    }
+
+    .metric-section {
+        padding: 0.5rem 0.75rem;
+        background-color: var(--bg-tertiary);
+        border-radius: 6px;
+        border: 1px solid var(--border-color);
+    }
+
+    .metric-label-small {
+        font-size: 0.875rem;
+        color: var(--text-secondary);
+        font-weight: 500;
+    }
+
+    .metric-value-small {
+        font-size: 0.875rem;
+        color: var(--text-primary);
+        font-weight: 600;
+    }
+
+    .chart-canvas {
+        height: 50px !important;
+        max-height: 50px !important;
+        margin-top: 0.5rem;
+    }
+</style>

watcher-monitoring/Views/Shared/_Layout.cshtml

@@ -42,6 +42,21 @@
                                 @User.Identity.Name
                             </a>
                             <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
+                              <li>
+                                    <form asp-controller="User" asp-action="Index" method="post" style="display:inline;">
+                                        @Html.AntiForgeryToken()
+                                        <button type="submit" class="dropdown-item">
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+                                                stroke="currentColor" stroke-width="2"
+                                                style="display: inline-block; vertical-align: middle; margin-right: 8px;">
+                                                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+                                                <polyline points="16 17 21 12 16 7"></polyline>
+                                                <line x1="21" y1="12" x2="9" y2="12"></line>
+                                            </svg>
+                                            Settings
+                                        </button>
+                                    </form>
+                                </li>
                                 <li>
                                     <form asp-controller="Auth" asp-action="Logout" method="post" style="display:inline;">
                                         @Html.AntiForgeryToken()
@@ -57,16 +72,6 @@
                                         </button>
                                     </form>
                                 </li>
-                                <li class="dropdown-item">
-                                    <a style="display: inline-block; vertical-align: middle; margin-right: 8px;">
-                                        asp-area="" asp-controller="User" asp-action="Index"><svg width="16" height="16"
-                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-                                            style="display: inline-block; vertical-align: middle; margin-right: 8px;">
-                                            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
-                                            <polyline points="16 17 21 12 16 7"></polyline>
-                                            <line x1="21" y1="12" x2="9" y2="12"></line>
-                                        </svg>Settings</a>
-                                </li>
                             </ul>
                         </li>
                     }