Tool Open Source · Apache 2.0 ~20 min lectura

Dashboard Metrics Manager Gatling · Node.js · React · Docker

Dashboard self-hosted para importar, almacenar y comparar reportes de Gatling a lo largo del tiempo. Sube archivos .zip o .tar.gz directamente desde la terminal o la interfaz web, y obtén métricas de percentiles, tracking de SLA, detección automática de regresiones y notificaciones a Slack o Teams — sin depender de herramientas de terceros.

Node.js 20TypeScriptReact 18ViteDockerNginxRechartsExpressshadcn/uiTanStack Query v5

rcampos09/dashborad-metrics-manager-gatling

Repositorio público · Apache 2.0 · Node.js + React + Docker Compose

El problema que resuelve

Gatling genera reportes HTML estáticos excelentes — pero cada ejecución queda aislada en una carpeta local. Si quieres responder preguntas como "¿el p95 de este endpoint mejoró respecto al despliegue anterior?" o "¿cuándo empezó a degradarse el throughput?", tienes que comparar manualmente HTML por HTML.

Este dashboard centraliza todos tus reportes en una sola interfaz, los almacena con metadatos (versión, entorno, ticket de JIRA) y construye una línea de tiempo de métricas de rendimiento que permite detectar regresiones automáticamente, comparar dos runs en paralelo y generar vistas ejecutivas sin trabajo manual.

📊

Histórico de métricas

p50/p95/p99 + RPS + error rate en gráfico temporal interactivo

🔔

Alertas automáticas

Detecta cuando el p95 supera el 20% del promedio de las últimas 5 ejecuciones

🔗

Trazabilidad total

Vincula cada run a un ticket de JIRA o Azure DevOps para contexto de sprint

Stack técnico

Capa	Tecnología	Rol
Backend	Node.js 20 + TypeScript	Runtime y lenguaje del servidor REST
	Express	API REST para subida de archivos, CRUD y webhooks
	Cheerio	Extrae métricas (p50/p95/p99, RPS, error rate) del HTML de Gatling
	lowdb + adm-zip/tar	Persistencia JSON + extracción de archivos .zip/.tar.gz
Frontend	React 18 + TypeScript + Vite	SPA que consume la API REST del backend
	Recharts	Gráficos de línea temporal de p95/p99/RPS con líneas de SLA
	Tailwind CSS + shadcn/ui	Diseño de la interfaz — tablas, filtros, diálogos de comparación
	TanStack Query v5	Gestión de estado del servidor — cache, refetch y mutaciones
Infra	Docker + Docker Compose	Orquesta backend, frontend y Nginx en un solo comando
Infra	Nginx	Proxy reverso del frontend — límite de subida: 500 MB

Instalación — un comando

Solo necesitas Docker ≥ 24 y Docker Compose v2. No hay que instalar Node.js ni configurar nada manualmente.

1 — Clonar el repositorio

2 — Levantar el stack completo

3 — Abrir el dashboard

El puerto 3000 es la interfaz React servida por Nginx. La API REST del backend corre en el puerto 3001 (interno al stack Docker).

Importar un reporte de Gatling

Comprime el directorio de resultados de Gatling y súbelo con curl o arrastrándolo en la interfaz web. Formatos soportados: .zip, .tar.gz, .tgz.

Terminal — comprimir y subir reporte curl + multipart/form-data

# 1. Ir al directorio de resultados de Gatling
cd your-gatling-project/target/gatling

# 2. Comprimir el directorio de la última ejecución
zip -r /tmp/run.zip crudsimulation-20260308053047242/

# 3. Subir al dashboard con metadatos opcionales
curl -X POST http://localhost:3001/api/reports/upload \
  -F "file=@/tmp/run.zip" \
  -F "environment=staging" \
  -F "version=v1.2.3" \
  -F "notes=Post-deploy smoke test" \
  -F "ticketUrl=https://acme.atlassian.net/browse/PERF-123"

¿Cómo extrae las métricas?

El backend descomprime el archivo, lee el index.html del reporte usando Cheerio y extrae los valores de percentiles (p50, p75, p95, p99), min, max, promedio, stdDev, RPS y tasa de error para cada request y para el total de la simulación. Los datos se almacenan en db.json via Docker volume — persisten entre reinicios del contenedor.

Funcionalidades principales

📈

Timeline interactivo

Gráfico de línea con p50/p95/p99 y RPS por ejecución en el tiempo. Líneas de SLA configurables como referencia visual. Filtra por simulación, entorno o rango de fechas.

🎯

Baseline y columna delta

Fija cualquier run como baseline. Una columna delta compara automáticamente todas las ejecuciones posteriores contra esa referencia — verde si mejora, rojo si regresa.

⚠️

Detección de regresiones

Alerta automática cuando el p95 de la última ejecución supera en más del 20% el promedio de las últimas 5. Sin configuración — funciona desde la primera importación.

🔔

Webhooks a Slack / Teams

Envía notificaciones cuando una aserción falla o se detecta una regresión. Configurable por simulación con payload personalizable para webhooks genéricos.

🔍

Comparación side-by-side

Abre dos reportes HTML originales en un visor de pantalla dividida. Ideal para revisiones detalladas de flame graphs o distribuciones de respuesta.

📋

Vista ejecutiva

Resumen de pass rate y tendencia para managers. Vista técnica con min/max p95 y promedio de error rate para TL. Exportación a CSV con filtros activos.

Estructura del proyecto

dashborad-metrics-manager-gatling/

├── docker-compose.yml — Orquesta backend + frontend + nginx

├── backend/

├── src/routes/ — API REST: /reports/upload, /reports, /webhooks

├── src/services/ — Extracción Cheerio + lógica de regresiones

└── db.json — Persistencia JSON (montado como volumen Docker)

├── frontend/

├── src/components/ — Timeline chart, tabla de runs, filtros, comparación

└── src/hooks/ — TanStack Query — fetching, caché, mutaciones

└── nginx/

└── nginx.conf — Proxy reverso + límite de 500 MB para uploads

Integrar en CI/CD

Agrega un paso post-ejecución en tu pipeline para subir el reporte automáticamente después de cada run de Gatling. Compatible con GitHub Actions, GitLab CI, Jenkins o cualquier sistema que tenga acceso de red al dashboard.

.github/workflows/performance.yml — fragmento GitHub Actions

- name: Run Gatling tests
  run: ./mvnw gatling:test

- name: Upload report to dashboard
  if: always()
  run: |
    REPORT_DIR=$(ls -td target/gatling/*/ | head -1)
    zip -r /tmp/gatling-run.zip "$REPORT_DIR"
    curl -X POST ${{ secrets.DASHBOARD_URL }}/api/reports/upload \
        -F "file=@/tmp/gatling-run.zip" \
        -F "environment=staging" \
        -F "version=${{ github.sha }}"

Referencia de funcionalidades

Categoría	Funcionalidad
Timeline	Gráfico p50/p95/p99/RPS interactivo con líneas de SLA configurables
Baseline	Fija cualquier run como referencia — columna delta compara automáticamente
SLA	Umbrales de p95/p99 por simulación — resaltado visual en caso de brecha
Regresiones	Auto-alerta si el p95 más reciente supera en >20% el promedio de los últimos 5 runs
Webhooks	Notificaciones a Slack, Teams o JSON genérico en caso de aserción fallida
Filtros	Por fecha, estado, entorno y ticket URL — los filtros son compartibles por URL
Vista ejecutiva	Pass rate + tendencia para managers · min/max p95 + error rate para TL
Trazabilidad	Vincula runs a JIRA o Azure DevOps — filtro y badge visual en la tabla
Comparación	Visor de pantalla dividida con los HTML originales de dos runs
Metadatos	Edita versión, entorno, notas y ticket después de la importación
Exportación	Exporta resultados filtrados como CSV

🚀

Dashboard listo para producción

Repositorio público, Apache 2.0. Un docker compose up --build y tienes histórico de tus tests de Gatling disponible en el navegador. Abre un issue o pull request si quieres proponer mejoras.

Ver repositorio en GitHub ← Volver a Learning