Added Server View
This commit is contained in:
@@ -178,7 +178,14 @@ public class APIController : Controller
|
|||||||
|
|
||||||
var server = await _context.Servers.FindAsync(dto.ipAddress);
|
var server = await _context.Servers.FindAsync(dto.ipAddress);
|
||||||
|
|
||||||
return Ok(server.Id);
|
if (server != null)
|
||||||
|
{
|
||||||
|
return Ok(server.Id);
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
return BadRequest();
|
||||||
|
}
|
||||||
|
|
||||||
} catch (Exception ex)
|
} catch (Exception ex)
|
||||||
{
|
{
|
||||||
Console.WriteLine(ex.Message);
|
Console.WriteLine(ex.Message);
|
||||||
|
|||||||
@@ -25,4 +25,10 @@ public class MonitoringController : Controller
|
|||||||
return View();
|
return View();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[HttpGet("server")]
|
||||||
|
public async Task <IActionResult> ServerIndex()
|
||||||
|
{
|
||||||
|
return View();
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
398
watcher-monitoring/Views/Monitoring/ServerIndex.cshtml
Normal file
398
watcher-monitoring/Views/Monitoring/ServerIndex.cshtml
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user