UI Routing and dead buttons fix

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/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/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/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>
                     }