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

ip

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-05-21 23:49:37 -05:00
parent d80c7a86d3
commit 1a96caeb83
7 changed files with 324 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/notif_config.html
+101 -1
View File
@@ -91,7 +91,81 @@
</p>
</div>
<!-- Toast -->
<!-- ── Umbrales de alerta de servidores ─────────────────────────────── -->
<div class="mt-8" x-data="servidorUmbralConfig()">
<div class="flex items-center justify-between mb-3">
<h2 class="text-base font-bold text-slate-700">🖥️ Umbrales de alerta de servidores</h2>
<label class="flex items-center gap-2 cursor-pointer">
<span class="text-sm text-slate-600">Activo</span>
<input type="checkbox" x-model="form.activo" class="w-4 h-4 rounded accent-[#8eb02f]">
</label>
</div>
<div class="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-0 divide-y sm:divide-y-0 sm:divide-x divide-slate-100">
<!-- Minutos sin ping -->
<div class="p-4">
<label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">⏱ Sin señal (minutos)</label>
<p class="text-xs text-slate-400 mb-2">Alerta si el agente no reporta en X minutos.</p>
<input type="number" min="1" max="120" x-model.number="form.minutos_sin_ping"
class="w-full border border-slate-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#8eb02f]">
</div>
<!-- Umbral CPU -->
<div class="p-4">
<label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">🔥 Umbral CPU (%)</label>
<p class="text-xs text-slate-400 mb-2">Alerta si la CPU supera este porcentaje.</p>
<input type="number" min="50" max="100" x-model.number="form.umbral_cpu"
class="w-full border border-slate-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#8eb02f]">
</div>
<!-- Umbral RAM -->
<div class="p-4">
<label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">🧠 Umbral RAM (%)</label>
<p class="text-xs text-slate-400 mb-2">Alerta si la RAM supera este porcentaje.</p>
<input type="number" min="50" max="100" x-model.number="form.umbral_ram"
class="w-full border border-slate-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#8eb02f]">
</div>
<!-- Umbral Disco -->
<div class="p-4">
<label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">💾 Umbral Disco (%)</label>
<p class="text-xs text-slate-400 mb-2">Alerta si el disco supera este porcentaje.</p>
<input type="number" min="50" max="100" x-model.number="form.umbral_disco"
class="w-full border border-slate-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#8eb02f]">
</div>
<!-- Días antes de vencimiento -->
<div class="p-4">
<label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">📅 Avisar antes de vencer (días)</label>
<p class="text-xs text-slate-400 mb-2">Alerta X días antes de que venza el VPS.</p>
<input type="number" min="1" max="60" x-model.number="form.dias_ante_vencimiento"
class="w-full border border-slate-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#8eb02f]">
</div>
<!-- Guardar -->
<div class="p-4 flex items-end">
<button @click="guardar()"
class="w-full px-4 py-2 rounded-lg text-white text-sm font-medium transition-colors"
style="background:#8eb02f"
onmouseover="this.style.background='#6d8c24'" onmouseout="this.style.background='#8eb02f'">
Guardar umbrales
</button>
</div>
</div>
</div>
<!-- Feedback -->
<div x-show="umbralToast.visible" x-transition
class="fixed bottom-6 left-6 z-50 px-4 py-3 rounded-xl shadow-lg text-white text-sm font-medium"
:class="umbralToast.ok ? 'bg-green-600' : 'bg-red-500'"
x-text="umbralToast.msg">
</div>
</div>
<!-- Toast (eventos) -->
<div x-show="toast.visible" x-transition
class="fixed bottom-6 right-6 z-50 px-4 py-3 rounded-xl shadow-lg text-white text-sm font-medium"
:class="toast.ok ? 'bg-green-600' : 'bg-red-500'"
@@ -107,6 +181,10 @@ const EVENTOS = [
{ evento: 'ticket_respuesta_cliente', destinatario: 'admin', label: 'Respuesta del cliente', icon: '💬' },
{ evento: 'ticket_respuesta_admin', destinatario: 'portal_user', label: 'Respuesta del admin', icon: '💬' },
{ evento: 'factura_subida', destinatario: 'portal_user', label: 'Factura subida / disponible', icon: '🧾' },
// Servidores
{ evento: 'servidor_caido', destinatario: 'admin', label: 'Servidor sin señal (agente caído)', icon: '🔴' },
{ evento: 'servidor_vence_pronto', destinatario: 'admin', label: 'VPS próximo a vencer', icon: '📅' },
{ evento: 'servidor_recurso_alto', destinatario: 'admin', label: 'Recurso al límite (CPU/RAM/Disco)', icon: '⚠️' },
// Próximos eventos (deshabilitados por ahora):
// { evento: 'factura_emitida', destinatario: 'portal_user', label: 'Factura emitida', icon: '🧾' },
// { evento: 'avance_publicado', destinatario: 'portal_user', label: 'Avance publicado', icon: '📦' },
@@ -169,4 +247,26 @@ function notifConfig() {
},
};
}
function servidorUmbralConfig() {
return {
form: { activo: true, minutos_sin_ping: 10, umbral_cpu: 90, umbral_ram: 90, umbral_disco: 90, dias_ante_vencimiento: 7 },
umbralToast: { visible: false, ok: true, msg: '' },
async init() {
try {
const r = await axios.get('/app/servidor-alerta-config');
if (r.data?.data) this.form = r.data.data;
} catch {}
},
async guardar() {
try {
await axios.post('/app/servidor-alerta-config', this.form);
this.umbralToast = { visible: true, ok: true, msg: 'Umbrales guardados' };
} catch {
this.umbralToast = { visible: true, ok: false, msg: 'Error al guardar' };
}
setTimeout(() => this.umbralToast.visible = false, 3000);
},
};
}
</script>
resources/views/servidor_dashboard.html
+32 -11
View File
@@ -46,10 +46,9 @@
<span x-show="agentOnline(servidor)">● En línea</span>
<span x-show="!agentOnline(servidor) && servidor.agent_token">● Fuera</span>
<span x-show="!servidor.agent_token">○ Sin agente</span>
</span> <!-- Badge estado Hostinger -->
<span x-show="servidor.hostinger_vps_id" class="text-xs px-2 py-0.5 rounded-full font-bold"
:class="servidor.hostinger_state === 'running' ? 'bg-emerald-200 text-emerald-900' : (servidor.hostinger_state ? 'bg-amber-200 text-amber-900' : 'bg-slate-200 text-slate-600')">
<span x-text="servidor.hostinger_state || 'Hostinger'" class="capitalize"></span>
</span> <!-- Badge estado Hostinger: solo mostrar cuando NO es running (estados críticos como stopped/error) -->
<span x-show="servidor.hostinger_vps_id && servidor.hostinger_state && servidor.hostinger_state !== 'running'" class="text-xs px-2 py-0.5 rounded-full font-bold bg-amber-200 text-amber-900">
<span x-text="servidor.hostinger_state" class="capitalize"></span>
</span> </div>
</div>
</div>
@@ -129,13 +128,23 @@
</div>
</template>
<!-- Provider & Conexiones -->
<div class="flex items-center justify-between text-xs text-slate-500 pt-1">
<span x-text="servidor.prov_servidor?.nombre || 'Sin proveedor'"></span>
<span>
<span class="font-bold text-blue-600" x-text="servidor.conx_count ?? servidor._conexiones?.length ?? 0"></span>
BD
</span>
<!-- Provider, Vencimiento & Conexiones -->
<div class="space-y-1.5 pt-1">
<!-- Vencimiento -->
<template x-if="servidor.vencimiento">
<div x-data="{ info: vencimientoInfo(servidor.vencimiento) }">
<span class="inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full"
:class="info.clase"
x-text="'📅 ' + info.texto"></span>
</div>
</template>
<div class="flex items-center justify-between text-xs text-slate-500">
<span x-text="servidor.prov_servidor?.nombre || 'Sin proveedor'"></span>
<span>
<span class="font-bold text-blue-600" x-text="servidor.conx_count ?? servidor._conexiones?.length ?? 0"></span>
BD
</span>
</div>
</div>
<!-- Action Buttons -->
@@ -608,6 +617,18 @@
return diffMs < 3 * 60 * 1000; // online si reportó en últimos 3 minutos
},
vencimientoInfo(fecha) {
if (!fecha) return null;
const hoy = new Date(); hoy.setHours(0,0,0,0);
const vence = new Date(fecha); vence.setHours(0,0,0,0);
const dias = Math.round((vence - hoy) / 86400000);
if (dias < 0) return { texto: 'Vencido', clase: 'bg-red-100 text-red-700' };
if (dias === 0) return { texto: 'Vence hoy', clase: 'bg-red-100 text-red-700' };
if (dias <= 7) return { texto: `Vence en ${dias}d`, clase: 'bg-red-100 text-red-700' };
if (dias <= 30) return { texto: `Vence en ${dias}d`, clase: 'bg-amber-100 text-amber-700' };
return { texto: fecha, clase: 'bg-slate-100 text-slate-500' };
},
tiempoDesde(isoStr) {
if (!isoStr) return '—';
const diff = Math.floor((Date.now() - new Date(isoStr).getTime()) / 1000);