El Blog de Jorge de la Cruz

El Blog de Jorge de la Cruz - Todas las novedades sobre VMware, Veeam, InfluxData, Grafana, Zimbra, etc.

Grafana: Novedades en Grafana v9.2, nuevo panel Canvas, o lo que es igual a añadir nuestras propias imágenes

- Escrito en: opensource, vmware

Saludos amigos, hoy os traigo una nueva entrada sobre Grafana. Antes que nada perdonar la sequía, pero de verdad que ha sido un 2022 muy intenso, con muchos proyectos que me han estado tomando más tiempo del que me gustaría.

Volvamos a lo bueno, a la chicha, la matería, el asunto. Estaba revisando las novedades de Grafana 9, que hay muchas y os los contaré con más detalle en otro post, pero veo con sorpresa que en la última actualización, 9.2, ya incluyen un nuevo panel de Canvas.

Para todos aquellos que os gusta añadir métricas encima de vuestros mapas, seguramente recordaréis el anciano NagVis:

Y algunos otros, usando PRTG, seguramente recordaréis los fantásticos mapas que os dejé para monitorizar nuestros NAS:

Soporte de Canvas en Grafana v9.2+

Todo está muy bien, pero se de buena tinta que ya lleváis usando Grafana mucho tiempo, seguramente para monitorizar vuestros Veeams, y vuestros VMwares. Y para todo ello, ya era hora que pudieramos añadir nuestros paneles a Grafana, al finalizar este tutorial tendréis algo similar a lo siguiente:

Este nuevo panel que combina la potencia de Grafana con la flexibilidad de los elementos personalizados como son imágenes e iconos. Las visualizaciones con Canvas son paneles extensibles construidos con formularios que nos permiten colocar explícitamente elementos dentro de diseños estáticos y dinámicos. Esto nos permitirá diseñar visualizaciones personalizadas y superponer datos de maneras que no son posibles con los paneles estándar de Grafana, todo dentro de la UI de Grafana. Si has utilizado algunas de las herramientas mencionadas, NagVis, PRTG, o similares, el diseño de paneles Canvas te resultará muy familiar.

Encuentra torda la información oficial aquí.

Paso a paso para conseguir un Canvas como el que os muestro – Temperatura y estado de un Servidor Supermicro A+ Server 5019D-FTN4

Yo se que muchas veces poneros los dientes largos con hermosos dashboards está bien, pero de sobra sabéis que siempre os doy todo paso a paso, o incluso los dashboards ya listos. Lo primero que tendremos que asegurarnos es que estamos corriendo Grafana v9.2 o superior:

Una vez que tenemos la versión que necesitamos, podremos reusar nuestros paneles que tienen ya información, por ejemplo, yo he usado mi panel con las temperaturas que vienen por IPMI desde mis Supermicro, y he cambiado el panel de tipo Stat, a tipo Canvas:

Lo siguiente será subir la imagen que queremos, ¡atención! podemos usar una imagen con URL pública, como yo en mi caso:

Una vez tenemos la imagen bonita que queremos, comenzaremos a añadir elementos a la capa, hay varios tipos incluso texto estático, iconos, y por supuesto valores desde nuestras métricas, en mi caso selecciono una de mis consultas:

Si quisieramos ver un poquito más los parámetros de cada elemento, podemos verlo a la derecha haciendo scroll:

Y bueno, ¡pues ya estaría! Ponemos tantos valores como queramos, de tantas consultas como necesitemos. Si queremos algo más elegante siempre podremos usar .gif para que quede más dinámico.

Consejos y configuraciones avanzadas

Hay algunos pasos un poco más avanzados para que consigamos ver el valor que deseamos, os voy a abrir el melón de la sabiduría, espero que os sirva.

Consulta de InfluxDB Flux

Os dejo la consulta exacta que realizo para leer datos de IPMI que telegraf almacena de manera nativa:

from(bucket: "telegraf")
  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)
  |> filter(fn: (r) => r["_measurement"] == "ipmi_sensor")
  |> filter(fn: (r) => r["server"] == "192.168.1.61")
  |> filter(fn: (r) => r["name"] == "cpu_temp")
  |> filter(fn: (r) => r["_field"] == "value")
  |> aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)
  |> yield(name: "mean")

Convertir el feo output de InfluxDB a algo más humano

Cada consulta de Grafana se trae todas las tags, values y demás. Quizá si la hacemos más compleja no, pero por defecto viene muy larga y poco sencillo de usar. He usado el campo de Transformations, al lado de las queries, y he usado dos optimizaciones, la primera “Concatenate fields”, y la segunda “Organize fields”, como podéis ver:

De esta manera, cuando estamos en el desplegable del Canvas, podremos ver algo que cualquiera puede leer: CPU Temperature, System Temperature, etc.

Overrides, editar algunos parámetros al vuelo

En mi caso, quiero mostrar algunos resultados que no son solo grados Celsius, imáginemos la velocidad de los ventiladores, he añadido un override por cada ventilador, y como veis he dicho que el valor es de tipo rpm, y color azul (recordando al viento, y al airflow)

Conclusiones y mucho más

Canvas es realmente algo que llevaba esperando muchos años, había algunos plugins de terceros que hacían algo similar, pero siempre es mucho mejor contar con soporte, y documentación del fabricante. Como aferrimo usuario de mapas en NagVis, o en PRTG, creo que este paso, además de incluirlo en la versión de open source, es un gran paso para todos.

Espero que os guste, y me gustaría dejaros la serie completa aquí, para que empecéis a jugar con los plugins que os he ido contando todos estos años:

 

Reader Interactions

Trackbacks

  2. […] Canvas es un nuevo panel que se introdujo en Grafana 9.2 en modo experimental. Combina el poder de Grafana con la flexibilidad de elementos personalizados. Las visualizaciones de Canvas son paneles extensibles construidos con formularios que le permiten colocar elementos de forma explícita en diseños estáticos y dinámicos. Esto le permite diseñar visualizaciones personalizadas y superponer datos de maneras que no son posibles con los paneles estándar de Grafana, todo dentro de la interfaz de usuario de Grafana. Si ha utilizado herramientas populares de diseño de interfaz de usuario y web, entonces diseñar paneles de Canvas se sentirá muy familiar. […]

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.