feat(dashboard): add CPU/RAM/disk history chart with 1h/6h/24h/7d range
Uses Chart.js to render line charts from servidor_metricas_history. Chart loads when opening the server detail modal and downsamples to max 300 points for performance. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
ae74d0ef90
commit
fd72eec281
@@ -1,4 +1,5 @@
|
||||
<!-- Servidor Dashboard -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
|
||||
<div x-data="servidorDashboard()" x-init="init()">
|
||||
<!-- Header -->
|
||||
<div class="mb-8 flex items-center justify-between">
|
||||
@@ -355,6 +356,43 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- === Historial de Métricas === -->
|
||||
<template x-if="servidorSeleccionado?.agent_token">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-sm font-bold text-slate-500 uppercase tracking-wider">Historial de Métricas</h3>
|
||||
<div class="flex gap-1">
|
||||
<template x-for="opt in [{h:1,l:'1h'},{h:6,l:'6h'},{h:24,l:'24h'},{h:168,l:'7d'}]" :key="opt.h">
|
||||
<button @click="cargarHistorial(opt.h)"
|
||||
:class="historialHoras === opt.h ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'"
|
||||
class="px-3 py-1 rounded-lg text-xs font-bold transition-colors"
|
||||
x-text="opt.l"></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-slate-50 border border-slate-200 rounded-xl p-4">
|
||||
<template x-if="historialCargando">
|
||||
<div class="flex items-center justify-center h-40 text-slate-400 text-sm gap-2">
|
||||
<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
||||
Cargando historial...
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="!historialCargando && historialVacio">
|
||||
<div class="flex items-center justify-center h-40 text-slate-400 text-sm">Sin datos en este período</div>
|
||||
</template>
|
||||
<div x-show="!historialCargando && !historialVacio">
|
||||
<canvas id="metricasChart" height="120"></canvas>
|
||||
</div>
|
||||
<!-- Leyenda -->
|
||||
<div x-show="!historialCargando && !historialVacio" class="flex gap-4 mt-3 justify-center text-xs text-slate-500">
|
||||
<span class="flex items-center gap-1.5"><span class="w-3 h-1 rounded bg-blue-500 inline-block"></span>CPU %</span>
|
||||
<span class="flex items-center gap-1.5"><span class="w-3 h-1 rounded bg-green-500 inline-block"></span>RAM %</span>
|
||||
<span class="flex items-center gap-1.5"><span class="w-3 h-1 rounded bg-amber-400 inline-block"></span>Disco %</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- === Conexiones BD === -->
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-slate-500 uppercase tracking-wider mb-4">
|
||||
@@ -601,6 +639,10 @@
|
||||
syncCargando: {},
|
||||
pingCargando: {},
|
||||
pingResultado: {},
|
||||
historialHoras: 24,
|
||||
historialCargando: false,
|
||||
historialVacio: false,
|
||||
_chart: null,
|
||||
|
||||
async init() {
|
||||
await this.cargarServidores();
|
||||
@@ -624,12 +666,13 @@
|
||||
this.servidorSeleccionado = { ...servidor };
|
||||
this.pingCargando = {};
|
||||
this.pingResultado = {};
|
||||
this.historialHoras = 24;
|
||||
this.historialVacio = false;
|
||||
this.cargandoConexiones = true;
|
||||
if (this._chart) { this._chart.destroy(); this._chart = null; }
|
||||
try {
|
||||
const r = await fetch(`/app/servidor-dashboard/${servidor.ID}`);
|
||||
const data = await r.json();
|
||||
// Inyectar estado de ping directamente en cada conexión para que
|
||||
// Alpine v3 lo rastreé correctamente dentro del x-for
|
||||
const conexiones = (data.conexiones || []).map(c => ({
|
||||
...c,
|
||||
_pingCargando: false,
|
||||
@@ -644,12 +687,112 @@
|
||||
} finally {
|
||||
this.cargandoConexiones = false;
|
||||
}
|
||||
if (servidor.agent_token) {
|
||||
await this.$nextTick();
|
||||
this.cargarHistorial(24);
|
||||
}
|
||||
},
|
||||
|
||||
cerrarModal() {
|
||||
if (this._chart) { this._chart.destroy(); this._chart = null; }
|
||||
this.servidorSeleccionado = null;
|
||||
},
|
||||
|
||||
async cargarHistorial(horas) {
|
||||
if (!this.servidorSeleccionado) return;
|
||||
this.historialHoras = horas;
|
||||
this.historialCargando = true;
|
||||
this.historialVacio = false;
|
||||
try {
|
||||
const r = await fetch(`/app/servidor/${this.servidorSeleccionado.ID}/metricas-history?horas=${horas}`);
|
||||
const data = await r.json();
|
||||
if (!data || data.length === 0) { this.historialVacio = true; return; }
|
||||
// Downsample si hay muchos puntos (>300 para fluidez)
|
||||
const pts = data.length > 300
|
||||
? data.filter((_, i) => i % Math.ceil(data.length / 300) === 0)
|
||||
: data;
|
||||
const labels = pts.map(p => {
|
||||
const d = new Date(p.created_at);
|
||||
return horas <= 6
|
||||
? d.toLocaleTimeString('es', {hour:'2-digit', minute:'2-digit', second:'2-digit'})
|
||||
: horas <= 24
|
||||
? d.toLocaleTimeString('es', {hour:'2-digit', minute:'2-digit'})
|
||||
: d.toLocaleDateString('es', {month:'short', day:'numeric'}) + ' ' + d.toLocaleTimeString('es', {hour:'2-digit', minute:'2-digit'});
|
||||
});
|
||||
await this.$nextTick();
|
||||
const canvas = document.getElementById('metricasChart');
|
||||
if (!canvas) return;
|
||||
if (this._chart) this._chart.destroy();
|
||||
this._chart = new Chart(canvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'CPU %',
|
||||
data: pts.map(p => p.cpu_pct),
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: 'rgba(59,130,246,0.08)',
|
||||
borderWidth: 1.5,
|
||||
pointRadius: 0,
|
||||
tension: 0.3,
|
||||
fill: true,
|
||||
},
|
||||
{
|
||||
label: 'RAM %',
|
||||
data: pts.map(p => p.ram_pct),
|
||||
borderColor: '#22c55e',
|
||||
backgroundColor: 'rgba(34,197,94,0.08)',
|
||||
borderWidth: 1.5,
|
||||
pointRadius: 0,
|
||||
tension: 0.3,
|
||||
fill: true,
|
||||
},
|
||||
{
|
||||
label: 'Disco %',
|
||||
data: pts.map(p => p.disco_pct),
|
||||
borderColor: '#f59e0b',
|
||||
backgroundColor: 'rgba(245,158,11,0.06)',
|
||||
borderWidth: 1.5,
|
||||
pointRadius: 0,
|
||||
tension: 0.1,
|
||||
fill: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
interaction: { mode: 'index', intersect: false },
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: ctx => `${ctx.dataset.label}: ${ctx.parsed.y?.toFixed(1)}%`
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: { maxTicksLimit: 8, font: { size: 10 }, color: '#94a3b8' },
|
||||
grid: { color: '#f1f5f9' },
|
||||
},
|
||||
y: {
|
||||
min: 0, max: 100,
|
||||
ticks: { stepSize: 25, font: { size: 10 }, color: '#94a3b8',
|
||||
callback: v => v + '%' },
|
||||
grid: { color: '#f1f5f9' },
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Error cargando historial:', e);
|
||||
this.historialVacio = true;
|
||||
} finally {
|
||||
this.historialCargando = false;
|
||||
}
|
||||
},
|
||||
|
||||
abrirAgentModal(servidor) {
|
||||
// Buscar el servidor actualizado en la lista
|
||||
const s = this.servidores.find(sv => sv.ID === servidor.ID) || servidor;
|
||||
|
||||
Reference in New Issue
Block a user