Proyecto 1: Códigos de respuesta HTTP con corrección

Lo que vas a aprender en este TP

• Iniciar un tablero
• Añadir una dashlet
• Recuperar los datos
• Transformar una URL de github al formato RAW
• Recuperar los datos de una URL en Grafana con Infinity
• Visualización Bar chart
• Mostrar los datos en forma de tabla
• Transformar los datos
• Convertir campos
• Ordenar los campos
• Visualización Bar chart
• Mappings
• Regex

Introducción #

Lo que vas a aprender en esta sección

• Iniciar un tablero
• Añadir una dashlet

Este proyecto tiene como objetivo hacerle dominar la experiencia de usuario (RUM) en Dynatrace.

Fuente de datos #

Lo que vas a aprender en esta sección

• Recuperar los datos
• Transformar una URL de github al formato RAW
• Recuperar los datos de una URL en Grafana con Infinity
• Visualización Bar chart

1. Transformar la URL

   Debe recuperar los datos del repositorio en la dirección: https://github.com/RousselTM/grafana-formation/blob/main/tp/data/response-code.json. Para poder usarlo en Grafana, debe transformarse a RAW.

   Para ello, debe abrir la URL proporcionada. En la página de GitHub, basta con hacer clic en 'Raw' y obtendrá una nueva URL (https://raw.githubusercontent.com/RousselTM/grafana-formation/refs/heads/main/tp/data/response-code.json) en formato RAW. Esta última se puede usar en Grafana.

   INFORMACIÓN: el procedimiento puede variar según la herramienta: Gitlab, Azure DevOps, ...

2. Añadir la URL

   Debe recuperar los datos de esta URL en Grafana usando una fuente de datos de tipo Infinity (tipo JSON).

   En la pestaña 'Query', debe seleccionar como fuente de datos (data source) 'Infinity' y elegir como tipo 'JSON'. Para indicar la URL, debe seleccionar como source 'URL' y así tendrá un campo 'URL' para introducir nuestra URL en formato RAW.

3. Cambiar de visualización

   Debe cambiar la visualización por defecto y ponerla en forma de tabla.

   En el panel de edición de la izquierda, debe elegir 'Tables' como tipo de visualización.

Transformations #

Lo que vas a aprender en esta sección

• Mostrar los datos en forma de tabla
• Transformar los datos
• Convertir campos
• Ordenar los campos

Para realizar este taller, debe haber completado íntegramente el 'proyecto 1'.

1. Convertir un campo

   Debe convertir el campo 'status' a cadena de caracteres.

   Para ello, debe ir a la pestaña 'Transform data' y añadir una transformación con el botón 'Add another transformation'. Debe añadir la transformación 'Convert filed type' y seleccionar el campo 'status' y asignarle el tipo 'string'

2. Ordenar los valores

   Debe ordenar el contenido del campo 'status' en orden descendente.

   Para ello, debe ir a la pestaña 'Transform data' y añadir una transformación con el botón 'Add another transformation'. Debe añadir la transformación 'Sort by' y seleccionar el campo 'status'. Para ordenarlo de forma descendente, debe marcar la casilla 'Reverse'.

Gestión de colores #

Lo que vas a aprender en esta sección

• Visualización Bar chart
• Mappings
• Regex

Para esta sección, vamos a manipular los colores.

1. Cambiar de visualización

   Debe cambiar la visualización y ponerla en forma de histograma.

   En el panel de edición de la izquierda, debe elegir 'Bar chart' como tipo de visualización.

2. Cambiar la coloración

   Debe modificar la coloración por defecto para convertirla en un semáforo:
   • 200 a 299: Verde
   • 300 a 399: Amarillo
   • 400 a 499: Naranja
   • 500 a 599: Rojo
   .

   Para ello, debe ir a la pestaña 'Transform data' y añadir una transformación con el botón 'Add another transformation'. Debe añadir la transformación 'Convert filed type' y seleccionar el campo 'status' y asignarle el tipo 'string'

Nivel de dificultad : ●●○○○ (2/5)