57 lines
2.2 KiB
Plaintext
57 lines
2.2 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Monitor de Salud</title>
|
|
<style>
|
|
/* Estilos base para una interfaz limpia y centrada */
|
|
body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: #f9f9f9; }
|
|
h1 { color: #333; }
|
|
table { width: 100%; border-collapse: collapse; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
|
td { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
|
|
th { background: #f4f4f4; font-weight: bold; }
|
|
tr:hover { background: #fafafa; }
|
|
|
|
/* Estados visuales basados en la respuesta del monitor */
|
|
.OK { color: #2e7d32; font-weight: bold; }
|
|
.ERROR { color: #c62828; font-weight: bold; }
|
|
.TIMEOUT { color: #e65100; font-weight: bold; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Monitor de Salud</h1>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Proyecto</th>
|
|
<th>URL</th>
|
|
<th>Estado</th>
|
|
<th>Última comprobación</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<%# Iteración de la lista de proyectos inyectada de desde el controlador. %>
|
|
<% proyectos.forEach(function(p) { %>
|
|
<tr>
|
|
<td><%= p.nombre %></td>
|
|
<td>
|
|
<a href="<%= p.url_health %>" target="_blank" title="<%= p.url_health %>">
|
|
<%= p.url_health %>
|
|
</a>
|
|
</td>
|
|
<%# La clase CSS coincide con el estado_codigo para aplicar el color correspondiente %>
|
|
<td class="<%= p.estado_codigo || 'PENDIENTE' %>"><%= p.estado_codigo || 'PENDIENTE' %>
|
|
</td>
|
|
<td>
|
|
<%# Formateo de fecha en servidor antes de renderizar %>
|
|
<%= p.fecha ? new Date(p.fecha).toLocaleString('es-ES') : '—' %>
|
|
</td>
|
|
</tr>
|
|
<% }) %>
|
|
</tbody>
|
|
</table>
|
|
</body>
|
|
</html>
|