Merge pull request 'feat: add aggregated resource usage chart to dashboard' (#55) from feat/dashboard-aggregated-chart into master
Reviewed-on: #55
This commit was merged in pull request #55.
This commit is contained in:
@@ -21,6 +21,7 @@ $router->get('/', [DashboardController::class, 'index'], [AuthMiddleware::class]
|
||||
$router->get('/dashboard', [DashboardController::class, 'index'], [AuthMiddleware::class]);
|
||||
$router->get('/dashboard/stats', [DashboardController::class, 'stats'], [AuthMiddleware::class]);
|
||||
$router->get('/dashboard/refresh-metrics', [DashboardController::class, 'refreshMetrics'], [AuthMiddleware::class]);
|
||||
$router->get('/dashboard/chart-data', [DashboardController::class, 'chartData'], [AuthMiddleware::class]);
|
||||
|
||||
$router->get('/login', [AuthController::class, 'loginForm']);
|
||||
$router->post('/login', [AuthController::class, 'login'], [CSRFMiddleware::class, RateLimitMiddleware::class]);
|
||||
|
||||
@@ -34,12 +34,15 @@ class DashboardController
|
||||
return in_array((int) $s['id'], $accessibleIds, true);
|
||||
})) : [];
|
||||
|
||||
$aggregatedMetrics = $this->monitoringService->getAggregatedHistoricalMetrics($accessibleIds ?? []);
|
||||
|
||||
$recentActivity = $this->auditService->getRecentActivity(10, $userId);
|
||||
|
||||
$this->view->display('dashboard.index', [
|
||||
'title' => 'Dashboard - ServerManager',
|
||||
'stats' => $stats,
|
||||
'servers' => $servers,
|
||||
'aggregatedMetrics' => $aggregatedMetrics,
|
||||
'recentActivity' => $recentActivity,
|
||||
]);
|
||||
}
|
||||
@@ -65,4 +68,16 @@ class DashboardController
|
||||
'message' => 'Metrics refreshed',
|
||||
]);
|
||||
}
|
||||
|
||||
public function chartData(): void
|
||||
{
|
||||
$serverModel = new Server();
|
||||
$accessibleIds = $serverModel->getAccessibleServerIds((int) Session::get('user_id'));
|
||||
$data = $this->monitoringService->getAggregatedHistoricalMetrics($accessibleIds ?? []);
|
||||
|
||||
$this->view->json([
|
||||
'success' => true,
|
||||
'data' => $data,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -173,6 +173,29 @@ class MonitoringService
|
||||
);
|
||||
}
|
||||
|
||||
public function getAggregatedHistoricalMetrics(array $serverIds, int $hours = 24): array
|
||||
{
|
||||
if (empty($serverIds)) {
|
||||
return [];
|
||||
}
|
||||
$placeholders = implode(',', array_fill(0, count($serverIds), '?'));
|
||||
$params = $serverIds;
|
||||
$params[] = $hours;
|
||||
return $this->db->fetchAll(
|
||||
"SELECT
|
||||
DATE_FORMAT(created_at, '%Y-%m-%d %H:%i:00') as time_bucket,
|
||||
AVG(cpu_usage) as avg_cpu,
|
||||
AVG(ram_usage) as avg_ram,
|
||||
AVG(disk_usage) as avg_disk
|
||||
FROM monitoring_history
|
||||
WHERE server_id IN ({$placeholders})
|
||||
AND created_at >= DATE_SUB(NOW(), INTERVAL ? HOUR)
|
||||
GROUP BY time_bucket
|
||||
ORDER BY time_bucket ASC",
|
||||
$params
|
||||
);
|
||||
}
|
||||
|
||||
public function getDashboardStats(?array $serverIds = null): array
|
||||
{
|
||||
$where = '';
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
$stats = $stats ?? [];
|
||||
$servers = $servers ?? [];
|
||||
$recentActivity = $recentActivity ?? [];
|
||||
$aggregatedMetrics = $aggregatedMetrics ?? [];
|
||||
?>
|
||||
|
||||
<div class="page-header">
|
||||
@@ -54,6 +55,15 @@ $recentActivity = $recentActivity ?? [];
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-bottom:1.5rem">
|
||||
<div class="card-header">
|
||||
<h2><i class="fas fa-chart-line"></i> Recursos Agregados (24h)</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="aggregatedChart" height="300"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-grid">
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
@@ -144,8 +154,150 @@ $recentActivity = $recentActivity ?? [];
|
||||
<?= htmlspecialchars($activity['actor_name'] ?? $activity['username'] ?? 'System') ?>
|
||||
· <?= date('H:i', strtotime($activity['created_at'] ?? '')) ?>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
|
||||
<script>
|
||||
const aggregatedData = <?= json_encode($aggregatedMetrics) ?>;
|
||||
|
||||
let aggregatedChart = null;
|
||||
|
||||
function initAggregatedChart(data) {
|
||||
const container = document.getElementById('aggregatedChart').parentNode;
|
||||
const oldCanvas = document.getElementById('aggregatedChart');
|
||||
const newCanvas = document.createElement('canvas');
|
||||
newCanvas.id = 'aggregatedChart';
|
||||
newCanvas.height = 300;
|
||||
container.replaceChild(newCanvas, oldCanvas);
|
||||
const ctx = newCanvas.getContext('2d');
|
||||
const labels = data.map(m => {
|
||||
const d = new Date(m.time_bucket);
|
||||
return d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0');
|
||||
});
|
||||
|
||||
aggregatedChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'CPU',
|
||||
data: data.map(m => parseFloat(m.avg_cpu)),
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 1,
|
||||
},
|
||||
{
|
||||
label: 'RAM',
|
||||
data: data.map(m => parseFloat(m.avg_ram)),
|
||||
borderColor: '#22c55e',
|
||||
backgroundColor: 'rgba(34, 197, 94, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 1,
|
||||
},
|
||||
{
|
||||
label: 'Disk',
|
||||
data: data.map(m => parseFloat(m.avg_disk)),
|
||||
borderColor: '#8b5cf6',
|
||||
backgroundColor: 'rgba(139, 92, 246, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#9ca3af',
|
||||
font: { family: "'Inter', sans-serif" },
|
||||
boxWidth: 12,
|
||||
padding: 16,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: '#1a1d2b',
|
||||
borderColor: '#2a2d3d',
|
||||
borderWidth: 1,
|
||||
titleColor: '#e1e4ed',
|
||||
bodyColor: '#9ca3af',
|
||||
padding: 10,
|
||||
cornerRadius: 8,
|
||||
callbacks: {
|
||||
label: function(ctx) {
|
||||
return ctx.dataset.label + ': ' + ctx.parsed.y.toFixed(1) + '%';
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#6b7280',
|
||||
maxTicksLimit: 12,
|
||||
font: { size: 11 },
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.04)',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
ticks: {
|
||||
color: '#6b7280',
|
||||
font: { size: 11 },
|
||||
callback: function(v) { return v + '%'; },
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(255,255,255,0.04)',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function refreshAggregatedChart() {
|
||||
fetch('/dashboard/chart-data')
|
||||
.then(r => r.json())
|
||||
.then(response => {
|
||||
if (response.success && response.data) {
|
||||
const data = response.data;
|
||||
const labels = data.map(m => {
|
||||
const d = new Date(m.time_bucket);
|
||||
return d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0');
|
||||
});
|
||||
if (aggregatedChart) {
|
||||
aggregatedChart.data.labels = labels;
|
||||
aggregatedChart.data.datasets[0].data = data.map(m => parseFloat(m.avg_cpu));
|
||||
aggregatedChart.data.datasets[1].data = data.map(m => parseFloat(m.avg_ram));
|
||||
aggregatedChart.data.datasets[2].data = data.map(m => parseFloat(m.avg_disk));
|
||||
aggregatedChart.update('none');
|
||||
} else if (data.length > 0) {
|
||||
initAggregatedChart(data);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (aggregatedData.length > 0) {
|
||||
initAggregatedChart(aggregatedData);
|
||||
}
|
||||
|
||||
setInterval(refreshAggregatedChart, 30000);
|
||||
</script>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
Reference in New Issue
Block a user