feat: Sistema de monitoreo base con logging y configuración dinámica
- Implementado monitor de procesos Node.js con detección automática - Sistema de logging con niveles (Info, Warning, Error, Critical) - ConfigManager para gestión dinámica de apps monitoreadas - Interfaz web básica con escaneo de procesos - Integración con API central para reportar estados - User-Agent tracking para identificación de agentes - Persistencia de configuración en JSON - Logs almacenados en archivo con rotación - Sistema modular: monitor, interface, logger, config Estructura: - src/main.rs: Orquestador principal - src/monitor.rs: Monitoreo de procesos y envío a API - src/interface.rs: Servidor web Axum con endpoints - src/logger.rs: Sistema de logging a archivo y consola - src/config.rs: Gestión de configuración persistente - web/: Templates HTML para interfaz web - config/: Configuración de apps monitoreadas - logs/: Archivos de log del sistema Features implementadas: ✅ Detección automática de procesos Node.js ✅ Monitoreo de CPU y RAM por proceso ✅ Reportes periódicos a API central (cada 60s) ✅ Interfaz web en puerto 8080 ✅ Logs estructurados con timestamps ✅ Configuración dinámica sin reinicio ✅ Script de despliegue automatizado Próximos pasos: - Integración con systemd para control de procesos - Dashboard mejorado con cards de apps - Logs en tiempo real vía WebSocket - Start/Stop/Restart de aplicaciones
This commit is contained in:
160
web/select.html
Normal file
160
web/select.html
Normal file
@@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Gestionar Procesos - SIAX</title>
|
||||
<style>
|
||||
body {
|
||||
background: #0f172a;
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
padding: 40px;
|
||||
}
|
||||
h1 {
|
||||
color: #3b82f6;
|
||||
}
|
||||
h2 {
|
||||
color: #60a5fa;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.process-item {
|
||||
background: #1e293b;
|
||||
padding: 15px;
|
||||
margin: 10px 0;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.process-info {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.pid {
|
||||
color: #22c55e;
|
||||
font-weight: bold;
|
||||
}
|
||||
.path {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.select-btn {
|
||||
padding: 8px 16px;
|
||||
background: #22c55e;
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
.select-btn:hover {
|
||||
background: #16a34a;
|
||||
}
|
||||
.form-section {
|
||||
background: #1e293b;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
margin-top: 20px;
|
||||
border: 2px solid #3b82f6;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
color: #60a5fa;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: #0f172a;
|
||||
border: 2px solid #475569;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
small {
|
||||
color: #94a3b8;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.submit-btn {
|
||||
padding: 12px 24px;
|
||||
background: #3b82f6;
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.submit-btn:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
.back-btn {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background: #64748b;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.back-btn:hover {
|
||||
background: #475569;
|
||||
}
|
||||
.no-results {
|
||||
background: #7f1d1d;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #ef4444;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>⚙️ Gestionar Procesos a Monitorear</h1>
|
||||
|
||||
<h2>📋 Procesos Node.js Detectados</h2>
|
||||
{{PROCESSES_LIST}}
|
||||
|
||||
<h2>➕ Agregar Proceso Personalizado</h2>
|
||||
<div class="form-section">
|
||||
<form method="POST" action="/add-process">
|
||||
<div class="form-group">
|
||||
<label for="app_name">Nombre de la Aplicación:</label>
|
||||
<input type="text" id="app_name" name="app_name" placeholder="Ej: app_tareas, fidelizacion, mi-api" required>
|
||||
<small>💡 Este nombre se usará para identificar el proceso en el directorio de trabajo</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="port">Puerto:</label>
|
||||
<input type="number" id="port" name="port" placeholder="Ej: 3000, 3001, 8080" required>
|
||||
<small>💡 Puerto donde corre la aplicación</small>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn">💾 Guardar y Monitorear</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<a href="/" class="back-btn">← Volver al Panel</a>
|
||||
|
||||
<script>
|
||||
function fillForm(appName, pid) {
|
||||
document.getElementById('app_name').value = appName;
|
||||
document.querySelector('.form-section').scrollIntoView({ behavior: 'smooth' });
|
||||
document.querySelector('.form-section').style.borderColor = '#22c55e';
|
||||
setTimeout(() => {
|
||||
document.querySelector('.form-section').style.borderColor = '#3b82f6';
|
||||
}, 2000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user