ViewUpdates
This commit is contained in:
@@ -1,7 +1,11 @@
|
|||||||
using Microsoft.AspNetCore.Mvc;
|
using System.Diagnostics;
|
||||||
using Microsoft.AspNetCore.Authorization;
|
using Microsoft.AspNetCore.Authorization;
|
||||||
|
using Microsoft.AspNetCore.Mvc;
|
||||||
|
using watcher_monitoring.Models;
|
||||||
|
|
||||||
using watcher_monitoring.Data;
|
using watcher_monitoring.Data;
|
||||||
|
using watcher_monitoring.ViewModels;
|
||||||
|
using Microsoft.EntityFrameworkCore;
|
||||||
|
|
||||||
namespace watcher_monitoring.Controllers;
|
namespace watcher_monitoring.Controllers;
|
||||||
|
|
||||||
@@ -28,7 +32,12 @@ public class MonitoringController : Controller
|
|||||||
[HttpGet("server")]
|
[HttpGet("server")]
|
||||||
public async Task <IActionResult> ServerIndex()
|
public async Task <IActionResult> ServerIndex()
|
||||||
{
|
{
|
||||||
return View();
|
var ServerIndexViewModel = new ServerIndexViewModel
|
||||||
|
{
|
||||||
|
servers = await _context.Servers.ToListAsync()
|
||||||
|
};
|
||||||
|
|
||||||
|
return View(ServerIndexViewModel);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
10
watcher-monitoring/ViewModels/ServerIndexViewModel.cs
Normal file
10
watcher-monitoring/ViewModels/ServerIndexViewModel.cs
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
using watcher_monitoring.Data;
|
||||||
|
using watcher_monitoring.Models;
|
||||||
|
|
||||||
|
namespace watcher_monitoring.ViewModels;
|
||||||
|
|
||||||
|
public class ServerIndexViewModel
|
||||||
|
{
|
||||||
|
public List<Server> servers { get; set; } = new();
|
||||||
|
|
||||||
|
}
|
||||||
@@ -11,251 +11,48 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
<!-- Server Card 1 -->
|
@foreach (var server in Model.servers)
|
||||||
<div class="col-xl-4 col-lg-6">
|
{
|
||||||
<div class="card server-detail-card">
|
<div class="col-xl-4 col-lg-6">
|
||||||
<div class="d-flex justify-content-between align-items-start mb-3">
|
<div class="card server-detail-card">
|
||||||
<div>
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||||
<h2 class="card-title mb-1">test</h2>
|
<div>
|
||||||
<span class="server-ip">192.168.1.100</span>
|
<h2 class="card-title mb-1">@server.Name</h2>
|
||||||
</div>
|
<span class="server-ip">@server.IPAddress</span>
|
||||||
<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>
|
</div>
|
||||||
<canvas id="cpuChart1" class="chart-canvas"></canvas>
|
<span class="status-badge status-online">@server.State</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- RAM Load -->
|
<div class="server-metrics">
|
||||||
<div class="metric-section mb-3">
|
<!-- CPU Load -->
|
||||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
<div class="metric-section mb-3">
|
||||||
<span class="metric-label-small">RAM Load</span>
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||||
<span class="metric-value-small">400 MB</span>
|
<span class="metric-label-small">CPU Load</span>
|
||||||
|
<span class="metric-value-small">400%</span>
|
||||||
|
</div>
|
||||||
|
<canvas id="cpuChart1" class="chart-canvas"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<canvas id="ramChart1" class="chart-canvas"></canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Uptime -->
|
<!-- RAM Load -->
|
||||||
<div class="metric-section">
|
<div class="metric-section mb-3">
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||||
<span class="metric-label-small">Uptime</span>
|
<span class="metric-label-small">RAM Load</span>
|
||||||
<span class="metric-value-small">400 days</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>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -346,7 +143,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Auto-refresh every 30 seconds
|
// Auto-refresh every 30 seconds
|
||||||
setInterval(function() {
|
setInterval(function () {
|
||||||
location.reload();
|
location.reload();
|
||||||
}, 30000);
|
}, 30000);
|
||||||
</script>
|
</script>
|
||||||
@@ -395,4 +192,4 @@
|
|||||||
max-height: 50px !important;
|
max-height: 50px !important;
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user