161 lines
7.2 KiB
Plaintext
161 lines
7.2 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">
|
|
<a href="/monitoring/server" style="text-decoration: none;">
|
|
<div class="metric-card">
|
|
<div class="metric-label">Total Servers</div>
|
|
<div class="metric-value">@Model.serversCount</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<a href="/monitoring/container" style="text-decoration: none;">
|
|
<div class="metric-card">
|
|
<div class="metric-label">Online</div>
|
|
<div class="metric-value" style="color: var(--success)">@Model.serversOnline</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="metric-card">
|
|
<div class="metric-label">Offline</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">@Model.containersCount</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-lg-4">
|
|
<div class="card">
|
|
<h2 class="card-title"><a href="/Monitoring/server" style="text-decoration: none;">Server Issues</a></h2>
|
|
<ul class="server-list">
|
|
@if (Model.servers != null && Model.servers.Count > 0)
|
|
{
|
|
@foreach (var server in Model.servers)
|
|
{
|
|
@if (server.State != "online")
|
|
{
|
|
<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.State=="warning" ? "status-warning" : "status-offline")">
|
|
@(server.State=="warning" ? "Warning" : "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"><a href="/Monitoring/server" style="text-decoration: none;">Monitored Containers</a></h2>
|
|
<ul class="server-list">
|
|
@if (Model.containers != null && Model.containers.Count > 0)
|
|
{
|
|
@foreach (var container in Model.containers)
|
|
{
|
|
<li class="server-item">
|
|
<div class="server-info">
|
|
<span class="server-name">@container.Name</span>
|
|
<span class="server-ip">Container Image</span>
|
|
</div>
|
|
</li>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<li class="text-center py-4" style="color: var(--text-muted)">
|
|
No Containers added 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>
|
|
}
|