lizandrogd/soft_usite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mejorar UX del ping en servidor_dashboard

Browse Source 
- Mueve el resultado del ping directamente bajo los datos de la BD
- Muestra mensaje de error cuando falla la conexión (usa campo error del backend)
- Spinner y texto 'Probando...' durante la espera
- Resultado verde/rojo inline con ✓/✗ y tiempo/mensaje de error
- Etiqueta del botón cambia a 'Verificar' (más descriptivo que 'Ping')

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Lizandro Guarnizo
2026-05-21 10:48:40 -05:00
co-authored by Copilot
parent b4b60810a1
commit 194db3e9ed
1 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/servidor_dashboard.html
+14 -11
View File
@@ -203,14 +203,7 @@
<div class="flex items-center gap-2">
<span class="text-white font-bold text-sm px-2 py-0.5 rounded bg-black/20"
x-text="cx.tipo_db?.nombre || 'DB'"></span>
<span class="text-white/80 text-xs font-mono" x-text="'#' + cx.ID"></span>
</div>
<!-- Ping badge -->
<div x-show="pingResultado[cx.ID] !== undefined">
<span class="text-xs px-2 py-1 rounded-full font-bold"
:class="pingResultado[cx.ID]?.exitoso ? 'bg-green-400 text-green-900' : 'bg-red-400 text-red-900'"
x-text="pingResultado[cx.ID]?.exitoso ? '✓ ' + pingResultado[cx.ID].tiempo + 'ms' : '✗ offline'">
</span>
<span class="text-white/80 text-xs font-mono" x-text="(cx.nombre ? cx.nombre + ' · ' : '') + '#' + cx.ID"></span>
</div>
</div>
@@ -229,19 +222,29 @@
<span class="text-slate-900 font-mono" x-text="cx.usuario || '—'"></span>
</div>
<!-- Ping button -->
<!-- Resultado del ping -->
<div x-show="pingResultado[cx.ID] !== undefined" class="mt-1">
<div :class="pingResultado[cx.ID]?.exitoso ? 'bg-green-50 border-green-200 text-green-800' : 'bg-red-50 border-red-200 text-red-800'"
class="rounded-lg px-3 py-2 border text-xs flex items-center gap-2">
<span x-text="pingResultado[cx.ID]?.exitoso ? '✓' : '✗'" class="font-bold text-base leading-none"></span>
<span x-show="pingResultado[cx.ID]?.exitoso" x-text="'Conectado en ' + pingResultado[cx.ID]?.tiempo + ' ms'"></span>
<span x-show="!pingResultado[cx.ID]?.exitoso" x-text="pingResultado[cx.ID]?.error || 'Sin conexión'"></span>
</div>
</div>
<!-- Ping + Query Runner buttons -->
<div class="pt-3 border-t border-slate-100 flex items-center justify-between">
<button @click="hacerPing(cx)"
:disabled="pingCargando[cx.ID]"
class="flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
:class="pingCargando[cx.ID] ? 'bg-slate-100 text-slate-400' : 'bg-blue-50 text-blue-700 hover:bg-blue-100'">
:class="pingCargando[cx.ID] ? 'bg-slate-100 text-slate-400 cursor-wait' : 'bg-blue-50 text-blue-700 hover:bg-blue-100'">
<svg x-show="!pingCargando[cx.ID]" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"/>
</svg>
<svg x-show="pingCargando[cx.ID]" class="w-3.5 h-3.5 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>
<span x-text="pingCargando[cx.ID] ? 'Probando...' : 'Ping'"></span>
<span x-text="pingCargando[cx.ID] ? 'Probando...' : 'Verificar'"></span>
</button>
<button @click="abrirQueryRunner(cx)"