129 lines
5.7 KiB
Plaintext
129 lines
5.7 KiB
Plaintext
@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>
|
|
}
|