Health Dashboard - Copy this React, Tailwind Component to your project
Este código define un dashboard para verificar el estado de health checks de distintas aplicaciones. Aquí te explico las diferentes secciones: 1. Estructura HTML El código contiene una estructura básica de HTML con <!DOCTYPE html>, etiquetas <html>, <head>, y <body>. En la sección <head>, se definen los metadatos y estilos CSS internos. En la sección <body>, se muestra el contenido principal del dashboard. 2. Estilos CSS Los estilos están diseñados para crear una interfaz oscura, con el cuerpo de la página usando un fondo oscuro #1e1e2f y texto de color claro #dcdcdc. Se incluyen: Estilos para el cuerpo, títulos, contenedores, y tablas: Estilo básico y responsive, incluyendo márgenes, padding, colores, sombras, y bordes redondeados. Estilos para formularios: Se definen campos de texto, de número y el botón para añadir un health check. Clases healthy y unhealthy: Colorean el texto en verde para estados "Healthy" y en rojo con negrita para "Unhealthy". Estilo para el loading: Cuando se esté cargando información, aparece una superposición con un spinner animado. 3. Interacción con el usuario (JavaScript) Inicio: El script JavaScript se ejecuta cuando la página está completamente cargada, gracias al uso del evento DOMContentLoaded. Referencias a los elementos HTML: Se obtienen referencias a los elementos del DOM como los inputs, el botón y la tabla. Función generateTable(apps): Genera dinámicamente las filas de la tabla del dashboard con la información de las aplicaciones agregadas. Si el estado de una app es "Unhealthy", se añade un ícono de advertencia y un tooltip con la descripción del error. Cada fila tiene un evento click que permite expandir una subtabla con detalles de los health checks individuales de la app. Función startPolling(url, intervalMinutes): Llama repetidamente a la URL del health check cada cierto número de minutos, usando setInterval, para actualizar los estados de las aplicaciones. Botón addHealthCheckButton: Al hacer clic, valida los campos de entrada (URL, nombre de aplicación y número). Si son válidos: Llama a la función fetchHealthCheckData(url) para obtener los datos del health check. Añade una nueva aplicación a la tabla y comienza el sondeo periódico (polling) para esa URL. Muestra un overlay de carga mientras se obtiene la información. Validación de la URL: Usa la función isValidUrl(string) para asegurarse de que la URL ingresada sea válida. Función fetchHealthCheckData(url): Hace una solicitud a la URL del health check y devuelve los datos en formato JSON. Si el estado es 503, fuerza el estado de la aplicación a "Unhealthy". La solicitud tiene un límite de tiempo usando fetchWithTimeout. 4. Componentes adicionales Tooltip: Muestra detalles adicionales (como descripciones de errores) cuando el usuario pasa el ratón sobre el ícono de advertencia de una aplicación. Loading Spinner: Aparece una animación de carga sobrepuesta mientras se realiza una solicitud al servidor para obtener datos del health check. Este dashboard permite agregar y monitorear el estado de diferentes health checks de aplicaciones, actualizando la información automáticamente cada cierto intervalo de tiempo.
