init

watcher-monitoring/Views/Home/Index.cshtml

@@ -0,0 +1,128 @@
+@model dynamic
+
+@{
+    ViewData["Title"] = "Dashboard";
+}
+
+<div class="container-fluid px-4">
+    <!--
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <h1 class="section-title mb-0">System Dashboard</h1>
+        <span class="text-muted">Last updated: @DateTime.Now.ToString("HH:mm:ss")</span>
+    </div>
+    -->
+
+    <div class="row g-4 mb-4">
+        <div class="col-md-3">
+            <div class="metric-card">
+                <div class="metric-label">Total Servers</div>
+                <div class="metric-value">@ViewBag.TotalServers</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>
+        </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>
+        </div>
+        <div class="col-md-3">
+            <div class="metric-card">
+                <div class="metric-label">Totoal Services</div>
+                <div class="metric-value">@ViewBag.ServiceCount</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row g-4">
+        <div class="col-lg-8">
+            <div class="card">
+                <h2 class="card-title">Monitored Servers</h2>
+                <ul class="server-list">
+                    @if (ViewBag.Servers != null && ViewBag.Servers.Count > 0)
+                    {
+                        @foreach (var server in ViewBag.Servers)
+                        {
+                            <li class="server-item">
+                                <div class="server-info">
+                                    <span class="server-name">@server.Name</span>
+                                    <span class="server-ip">@server.IPAddress</span>
+                                </div>
+                                <span class="status-badge @(server.IsOnline ? "status-online" : "status-offline")">
+                                    @(server.IsOnline ? "Online" : "Offline")
+                                </span>
+                            </li>
+                        }
+                    }
+                    else
+                    {
+                        <li class="text-center py-4" style="color: var(--text-muted)">
+                            No servers configured yet
+                        </li>
+                    }
+                </ul>
+            </div>
+        </div>
+
+        <div class="col-lg-4">
+            <div class="card">
+                <h2 class="card-title">Quick Stats</h2>
+                <div class="card-text">
+                    <div class="d-flex justify-content-between mb-3 pb-3" style="border-bottom: 1px solid var(--border-color)">
+                        <span style="color: var(--text-secondary)">System Uptime</span>
+                        <span class="fw-semibold">99.8%</span>
+                    </div>
+                    <div class="d-flex justify-content-between mb-3 pb-3" style="border-bottom: 1px solid var(--border-color)">
+                        <span style="color: var(--text-secondary)">Avg Response Time</span>
+                        <span class="fw-semibold">42ms</span>
+                    </div>
+                    <div class="d-flex justify-content-between mb-3 pb-3" style="border-bottom: 1px solid var(--border-color)">
+                        <span style="color: var(--text-secondary)">Database Size</span>
+                        <span class="fw-semibold">210 MiB</span>
+                    </div>
+                    <div class="d-flex justify-content-between mb-3 pb-3" style="border-bottom: 1px solid var(--border-color)">
+                        <span style="color: var(--text-secondary)">Last Backup</span>
+                        <span class="fw-semibold">3 Days ago</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <h2 class="card-title">System Health</h2>
+                <div class="card-text">
+                    <div class="mb-3">
+                        <div class="d-flex justify-content-between mb-1">
+                            <span style="font-size: 0.875rem; color: var(--text-secondary)">Database Health</span>
+                            <span style="font-size: 0.875rem; font-weight: 600">34%</span>
+                        </div>
+                        <div style="height: 8px; background-color: var(--bg-tertiary); border-radius: 4px; overflow: hidden;">
+                            <div style="height: 100%; width: 34%; background-color: var(--success); transition: width 0.3s ease;"></div>
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <div class="d-flex justify-content-between mb-1">
+                            <span style="font-size: 0.875rem; color: var(--text-secondary)">Network Status</span>
+                            <span style="font-size: 0.875rem; font-weight: 600">68%</span>
+                        </div>
+                        <div style="height: 8px; background-color: var(--bg-tertiary); border-radius: 4px; overflow: hidden;">
+                            <div style="height: 100%; width: 68%; background-color: var(--warning); transition: width 0.3s ease;"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@section Scripts {
+    <script>
+        setInterval(function() {
+            location.reload();
+        }, 30000);
+    </script>
+}