📈 Etapa 2.1: Creación del Dashboard Base en Grafana

⬅️ Anterior: Etapa 2 🏠 Inicio ➡️ Siguiente: Etapa 2.2

🎯 Objetivo

Construir un dashboard en Grafana que permita visualizar y analizar las métricas recolectadas por Prometheus y los logs procesados por Loki, comprendiendo cómo reflejan el comportamiento del sistema en términos de rendimiento, latencia y errores.

📋 Construcción del Dashboard

1️⃣ Acceso a Grafana

  1. Ingresa a la interfaz web de Grafana, para esto, desde backstage busca la aplicación obs-stack. Allí encontrarás la url del servicio de Grafana, tal como se muestra en las siguientes imagenes alt text

alt text

  1. En el menú lateral, selecciona “Dashboard” y luego haz clic en “new”. Finalmente, haz clic en “Add Visualization”

alt text

alt text

2️⃣ Panel 1: Solicitudes Procesadas por Endpoint (por segundo)

Propósito: Crear la primera visualización en Grafana a partir de una métrica de Prometheus.

En este panel queremos observar la tasa de solicitudes por segundo agrupada por cada endpoint (uri).

📘 Paso 1: Seleccionar Datasource

  1. Seleccionar Prometheus como Data source en la parte superior.

alt text

📘 Paso 2: Conocer las dos formas de construir una consulta

Grafana ofrece dos modos de creación de consultas

  1. Query Builder (constructor visual):
    • Permite seleccionar las métricas y etiquetas desde menús desplegables sin necesidad de escribir código.
    • Ideal para principiantes o cuando no se recuerda la sintaxis exacta.
    • Puedes filtrar, agregar operaciones como sum, rate, avg y agrupar por etiquetas (by).
  2. Code mode (modo código):
    • Permite escribir directamente la consulta usando el lenguaje PromQL.
    • Ideal para tener control total y combinar funciones más complejas.

Ambos modos producen el mismo resultado. Puedes cambiar entre ellos usando el botón “Code / Builder” sobre el campo de la consulta.

Builder mode alt text

Code mode alt text

📘 Paso 3: Configuración de la consulta

Este panel mostrará cuántas solicitudes procesa tu aplicación por segundo, agrupadas por endpoint (uri).
Con esta visualización podrás identificar qué rutas se usan más, cómo varía la carga en el tiempo y si existen picos de tráfico que coincidan con aumentos en la latencia o errores.

La métrica utilizada cuenta cuántas solicitudes han sido procesadas y PromQL convierte esos conteos acumulados en una tasa (requests per second – RPS), usando la función rate. Para definir la consulta sigue los siguientes pasos:

En Code Mode, escribe la siguiente consulta PromQL:

sum by(uri) (rate(http_server_requests_seconds_count{applicationName="{nombre-de-tu-app}-monitoring"}[1m]))

Si prefieres usar el Query Builder, selecciona:

Metric: http_server_requests_seconds_count
Operation: Range functions -> Rate() con rango de 1m
Aggregate: Aggregate functions -> sum + `By label` uri
Filter: label applicationName  = "{nombre-de-tu-app}-monitoring"

Ejemplo:

sum by(uri) (rate(http_server_requests_seconds_count{applicationName="juan-perez-p-app-monitoring"}[1m]))

📘 Paso 4: Configurar la visualización

En el panel derecho de Grafana encontrarás varias secciones con opciones que te permiten personalizar la visualización. Por ejemplo:

alt text

Recomendaciones

Al final deberías ver algo como esto

alt text

Una vez terminado, guarda el dashboard, asigna un nombre incluyendo tu nombre de usuario. Por ejemplo jose.perez-o-dashboard

3️⃣ Panel 2: Latencia Promedio de Solicitudes

Desde la vista de dashboard, usa la opción Add y luego la opción Visualization para añadir nuevos paneles.

alt text

Título sugerido: Latencia promedio de respuesta por endpoint(s)

Interpretación: Este panel muestra cuánto tarda tu aplicación, en promedio, en responder a las solicitudes por cada endpoint. Una latencia estable y baja indica buen rendimiento; picos pueden sugerir saturación, procesamiento intensivo o problemas en la base de datos.

Query PromQL

sum by(uri) (rate(http_server_requests_seconds_sum{applicationName="{nombre-de-tu-app}-monitoring"}[1m])) / sum by(uri) (rate(http_server_requests_seconds_count{applicationName="{nombre-de-tu-app}-monitoring"}[1m]))

Configuraciones recomendadas:

Tipo de visualización recomendado :

Unidad: segundos (s)

Rangos de color: ( Crear thresholds)

Nota: Usualmente la latencia se mide utilizando histogramas en lugar de calcular simplemente el promedio, observando, por ejemplo el p99 de la latencia, o algun percentil de interés. Para más información sobre cómo añadir los histogramas a la aplicación puedes revisar este blog .

4️⃣ Panel 3: Errores de Aplicación (HTTP 4xx / 5xx)

Título sugerido: Tasa de errores de aplicación (HTTP 4xx / 5xx)

Propósito: Visualizar la frecuencia de errores que ocurren en tu aplicación, diferenciando entre:

Este panel permitirá detectar momentos en los que la aplicación falla y relacionarlos con cambios en la carga o en la latencia.

Query PromQL:

sum by(status, uri) (rate(http_server_requests_seconds_count{status=~"4..|5..", app="{nombre-de-tu-app}-monitoring"}[1m]))

Otros ajustes:

Unit Requests per second

Tipo de visualización recomendado :

Aplica los ajustes de visualización que consideres necesarios

5️⃣ Panel 4: Visualización de Logs de Aplicación (Loki)

Título sugerido: Explorador de logs

Propósito: Observar los logs generados por la aplicación Java en tiempo real, filtrarlos por nivel de severidad (info, warn, error) y relacionarlos con las métricas vistas en los paneles anteriores.

alt text

📘 Paso 1: Crear la variable $LogLevel

  1. En la parte superior del dashboard, haz clic en el ícono ⚙️ (Settings) → Variables → Add variable.
  2. Configura los siguientes campos:
Campo Valor
Name LogLevel
Label LogLevel
Type Custom
Values separated by commas MAYUS INFO, WARN, ERROR
Include All option ✅ Activado
Multi-value ✅ Activado
  1. Haz clic en Add y luego en Save dashboard.

Esta variable permitirá filtrar dinámicamente el nivel de logs visualizado desde un menú desplegable en la parte superior del dashboard.

alt text

📘 Paso 2: Crear el panel de logs

  1. Desde el dashboard, selecciona “Add panel” y elige la fuente de datos Loki.
  2. En el campo de consulta, escribe la siguiente query LogQL:
{app="{nombre-de-tu-app}-monitoring"} | level =~ `$LogLevel`

Interpretación de la consulta:

Muestra todos los logs generados por el contenedor tu aplicacion, filtrando dinámicamente según el nivel seleccionado en $LogLevel.

📘 Paso 3: Configuración de visualización

Tipo: Logs panel

Opciones recomendadas:

alt text

🌟 Extensión del Laboratorio: Creación de Visualizaciones Adicionales

Ahora que ya configuraste tu dashboard base y los paneles principales (solicitudes, latencia, errores y logs), es momento de explorar por tu cuenta las métricas y datos disponibles para crear tus propias visualizaciones.

El objetivo es que practiques la interpretación de métricas y aprendas a elegir representaciones adecuadas para comunicar el estado y comportamiento del sistema.

🛠️ Extensión del Dashboard

Hasta este punto has construido el dashboard base, con paneles que muestran las solicitudes, la latencia, los errores y los logs de la aplicación.
Ahora usarás las métricas restantes disponibles en Prometheus y los datos de Loki para ampliar tu dashboard con tus propias visualizaciones.

📝 Instrucciones

Diseña al menos dos nuevas visualizaciones que complementen las ya existentes.

Para cada una, define: (No olvides agregarlo a tu bitácora) - Propósito: qué quieres analizar o mostrar.
- Título del panel: un nombre claro y descriptivo.
- Query: la expresión PromQL o LogQL que usarás.
- Tipo de visualización: Time series, Gauge, Bar chart, Stat, Logs, entre otros.
- Ajustes opcionales: colores, unidades, leyenda, rango de tiempo o frecuencia de actualización.
- un breve comentario por cada panel adicional donde expliques qué conclusiones o patrones observaste.

💡 Recomendaciones

📝 Análisis Final (Bitácora)

✅ Verificación

Asegúrate de haber completado:

💡 Tip: Un buen dashboard cuenta una historia sobre el comportamiento de tu sistema.

📍 Próximos Pasos

Ahora que tienes un dashboard funcional, es momento de crear tu propia métrica personalizada.

💾 Al hacer clic, tu tiempo será guardado automáticamente y continuarás a la siguiente etapa