From fd72eec2818608654894213fabcc86b12fcb1fe2 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 25 Jun 2026 11:05:10 -0500
Subject: [PATCH] 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>
---
 resources/views/servidor_dashboard.html | 147 +++++++++++++++++++++++-
 1 file changed, 145 insertions(+), 2 deletions(-)

diff --git a/resources/views/servidor_dashboard.html b/resources/views/servidor_dashboard.html
index fbd8b66..d3dde01 100644
--- a/resources/views/servidor_dashboard.html
+++ b/resources/views/servidor_dashboard.html
@@ -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;