483 - Dashboards accionables en Grafana

Puedes realizar acciones desde #Grafana utilizando el plugin que hoy comento convirtiendo tus #dashboards en accionables y completamente interactivos

1:25

-3:15

0.8x 1.0x 1.2x 1.4x 1.6x 1.8x 2.0x

1.0x

Seguro que en mas de una ocasión has oído aquello de la información es poder. El problema, es que eso tenía sentido hace años cuando no había tanta información como la que tenemos hoy en día, que mas que estar informados estamos desinformados. Procesar toda la información que disponemos hoy en día es algo cada vez mas complejo, y es necesario recurrir a herramientas que nos faciliten la digestión de tal cantidad de información. Existen gran cantidad de opciones y herramientas que te ayudarán a procesar y resumir la información. Desde simples presentaciones a herramientas como Grafana que te permiten crear Dashboards para ver toda la información en una imagen, por aquello de que una imagen vale mas que mil palabras. Pero ¿y si queremos realizar acciones sobre esos Dashboards?¿Es posible tener dashboards accionables en Grafana? Si, y precisamente esto es de lo que te quiero hablar sobre los dashboardas accionables en Grafana.

Dashboards accionables en Grafana

¿Que es Grafana?

No es la primera vez que te hablo de Grafana, ni de otras herramientas de dashboards. Así, por ejemplo te hablé en el episodio 457 del podcast, titulado vigilar el consumo de tus contenedores Docker, en el 188 sobre Paneles de control a medida, o en el 132, en el que te comentaba que no me hablaba con la Raspberry. Incluso le he dedicado un vídeo del proyecto Self Hosted, para que veas lo sencillo que es levantar un Grafana y ver que pasa en tus contenedores.

Decirte que si quieres ver como se instala Grafana y como lo puedes utilizar para ver lo que pasa en tus contenedores, te recomiendo el vídeo anterior, que seguro te resultará muy interesante.

Pero, si todavía no conoces lo que es Grafana, te cuento a continuación, lo que es y las posibilidades que tiene.

Grafana es una herramienta de visualización y monitorización de código abierto ampliamente utilizada en el ámbito de la tecnología de la información (TI) y la administración de sistemas. Proporciona una plataforma flexible y potente para crear paneles de control interactivos y gráficos en tiempo real basados en datos de diversas fuentes, como bases de datos, servicios web, APIs y más.

Sin embargo, aquí quiero romper una lanza en favor de Grafana y sobre todo llamar tu atención. Y es que, si bien dentro del mundo de las TI es una herramienta ampliamente conocida, fuera, no lo es tanto, y sin embargo, creo que es una herramienta súper potente, para como he dicho en la introducción, gestionar información, información de cualquier tipo.

Por ejemplo, y saliendo fuera del ámbito de las TI, gestionar tu almacén, para esta forma de un solo vistazo, saber si tienes stock o no de un determinado producto en tu almacén. Pero, como te digo, esto se me ocurren decenas de ideas.

Grafana es popular en entornos de monitoreo de infraestructuras, como el monitoreo de sistemas informáticos, redes, bases de datos y aplicaciones, y permite a los usuarios crear paneles de control personalizados con una amplia gama de visualizaciones, como gráficos de líneas, gráficos de barras, tablas, mapas y mucho más. También ofrece características avanzadas, como alertas, anotaciones, integraciones con herramientas populares de monitoreo como Prometheus, InfluxDB, Elasticsearch y más, y soporte para personalización a nivel de usuario y organización.

Algunos ejemplos de uso de Grafana

Como te decía, Grafana, no se limita, ni mucho menos al mundo IT, sino que lo puedes utilizar para todo lo que consideres que es necesario tener controlado.

• Producción industrial: Grafana puede utilizarse para visualizar y monitorear datos de producción en tiempo real, como la producción de bienes, el rendimiento de maquinaria, los datos de sensores en la línea de producción y otros datos de producción importantes para optimizar los procesos de fabricación.
• Clima y del medio ambiente: puedes utilizar Grafana para visualizar y monitorear datos climáticos y del medio ambiente, como temperaturas, humedad, calidad del aire, niveles de contaminantes, condiciones del agua y otros datos relacionados con el medio ambiente. Esto puede ser útil en aplicaciones como la monitorización de la calidad del aire en ciudades, la monitorización de estaciones meteorológicas y la monitorización de la calidad del agua en ríos y lagos.
• Consumo de energía: Grafana se puede utilizar para visualizar y monitorear el consumo de energía en el hogar. Esto puede incluir datos de medidores inteligentes, dispositivos de monitoreo de energía o sistemas de domótica que miden y registran el consumo de energía de los electrodomésticos y sistemas del hogar. Grafana puede ayudar a los propietarios de viviendas a identificar patrones de consumo de energía, identificar electrodomésticos o sistemas ineficientes y optimizar el consumo de energía en el hogar.
• Salud y estado físico: puedes utilizar Grafana para visualizar y monitorear datos de salud y estado físico, como datos de monitores de actividad física, medidores de ritmo cardíaco, monitores de sueño y otros dispositivos de seguimiento de la salud. Esto puede ser útil para el seguimiento de metas de actividad física, monitoreo del sueño, seguimiento de signos vitales y seguimiento del estado de salud en general.
• Sistemas de seguridad: Por supuesto, también puedes utilizar Grafana para visualizar y monitorear datos de sistemas de seguridad en el hogar, como cámaras de seguridad, sensores de movimiento, sensores de puertas/ventanas y otros dispositivos de seguridad. Esto puede ser útil para el monitoreo del estado de seguridad del hogar, la visualización de eventos de seguridad en tiempo real y la identificación de patrones o tendencias en la actividad de seguridad.
• Inventarios: Gestión de los niveles de inventario en tiempo real, lo que permite a los equipos de gestión de almacenes tener una visión clara y actualizada del estado del inventario. Esto puede incluir visualizaciones de gráficos y tablas que muestran el nivel de stock de diferentes productos, la evolución del inventario con el tiempo y alertas cuando los niveles de inventario caen por debajo de ciertos umbrales predefinidos.
• Seguimiento de KPIs de almacén: Puedes controlar los indicadores clave de rendimiento (KPIs) relacionados con la gestión de almacenes. Esto puede incluir KPIs como el tiempo de ciclo de recepción y envío de productos, el tiempo de espera en el almacén, la precisión del picking y embalaje, la eficiencia del espacio de almacenamiento y otros KPIs importantes para la operación eficiente del almacén.
• Control de logística. Puedes llevar un control de los datos de logística y transporte, como la gestión de rutas de entrega, el seguimiento de vehículos de transporte, la gestión de flotas y otros datos relacionados con la logística y transporte de mercancías. Esto puede ayudar a los equipos de gestión de almacenes a optimizar las operaciones de transporte y asegurarse de que los productos sean entregados en tiempo y forma.
• La cadena de suministro: Igualmente, puedes llevar un control de los datos de la cadena de suministro, como el seguimiento de proveedores, la gestión de pedidos, la programación de producción y otros datos relacionados con la cadena de suministro. Esto puede ayudar a los equipos de gestión de almacenes a tener una visión holística de la cadena de suministro y optimizar la gestión de materiales y recursos.

Sobre el título

Te tengo que confesar que le he dado bastantes vueltas al título del podcast, hasta llegar al título de Dashboards accionables en Grafana. Inicialmente, le había puesto interactivos, pero realmente eso no es lo que te mostrarte, porque, como ves, Grafana es interactivo.

Me explico. Tu puedes interaccionar con Grafana, en el sentido de modificar determinados aspectos de visualización. Y es que como has visto, se trata básicamente de una herramienta de visualización. Pero, ¿y si quieres actuar? Si en un gráfico, ves algo que te llama la atención ¿Que haces?¿Llamar por teléfono?.

Siguiendo con los ejemplos anteriores, y partiendo de que tienes un dashboard donde se muestran todos tus stocks. Si ves que uno de tus productos está por debajo de tus necesidades mínimas es momento de actuar. ¿Que tal tener un botón que te permite directamente hacer un pedido?.

Aquí es donde falla Grafana, o simplemente no está pensado para esto

Dynamic Text Panel

Y justo donde falla Grafana, o mejor dicho la configuración por defecto de Grafana es donde entra el complemento del que te quiero hablar, y que me tiene completamente enamorado, Dynamic Text Panel.

Dynamic Text panel es un panel de visualización de texto dinámico que transforma datos de texto/tabla monótonos en tarjetas de información y fáciles de leer. El panel admite variables, Markdown y Handlebars.

El panel de visualización de texto dinámico te permite definir una plantilla de texto utilizando los datos de tu consulta de origen de datos.

Características

Algunas de las características de este complemento, son las siguientes,

• El panel utiliza el editor de código Monaco con autoformato para actualizar plantillas, código JavaScript y estilos.
• Admite Markdown y Handlebars.
• Utiliza markdown-it para renderizar Markdown a HTML.
• Admite resaltado de sintaxis de código utilizando estilos de accesibilidad.
• Permite mostrar objetos anidados utilizando el ayudante Handlebars {{json object}}.
• Permite mostrar variables globales de tiempo (__to y __from) como segundos, formato ISO y con formato utilizando dayjs.
• Permite agregar ayudantes Handlebars y controladores de eventos.
• Permite agregar estilos CSS.
• Admite internacionalización mediante helpers personalizados.

Exprimiendo el complemento

Llegados a este punto, es posible que todavía no veas las posibilidades de interacción. Pero, en el momento, que he mencionado que puedes introducir código JavaScript, ya te puedes imaginar que puedes hacer lo que te venga en gana.

Esto es precisamente lo que ha hecho que me quedara ojiplático. He podido a partir de una serie de datos, construir una tabla en la que podía incluir botones. Estos botones permiten código JavaScript que hace cosas. Por ejemplo, puedes realizar una llamada POST a otro servicio para que realice una acción.

Aquí es justo donde Dashboards accionables toma todo el sentido. Puedes realizar todo tipo de acciones, y además personalizar las respuestas… En fin, que puedes hacer de todo.

¿Porque puedes hacer de todo? Porque te permite pone, HTML, JavaScript y CSS a voluntad. En este sentido, ya puedes poner tus botones, con las acciones que quieras definir. Por ejemplo, realizar una llamada POST a un servicio para publicar algo, o bien para guardar un dato, o para lo que tu consideres. Tienes todo el poder en tus manos.

Aplicación práctica

En mi caso, y a modo de prueba de concepto, lo que he hecho es una tabla, en la que en la que se muestran una serie de valores y en la parte derecha de la misma, para cada una de las filas, tienes tres botones, que te permiten realizar diferentes acciones. Así, por ejemplo, una de las acciones que te permite hacer es publicar un dato en ZincSearch, que es un servicio similar a ElasticSearch, pero implementando en Go.

Sobre la experiencia de usuario. Algo que siempre me trae de cabeza es la experiencia de usuario. Es decir, dar la impresión al usuario de que la acción que ha realizado está haciendo algo. No solo hay que hacer una acción, sino que tiene que dar la sensación de que se está haciendo una acción.

En este sentido, al tener al alcance de tu mano CSS y JavaScript, puedes hacer que esto se convierta en una realidad. Por ejemplo, cuando pulse un botón, que se muestre un mensaje y que se desabilite el botón temporalente, etc.

Mas complementos de Volkov Labs

Tengo que decirte que si bien, este es el complemento que mas me ha impresionado, esto solo es pol ahora, en el sentido de que tienen otros plugins para Grafana dignos de resaltar. Por ejemplo,

• Apache Echarts Panel
• Calendar Panel
• Data Manipulation Panel

Y otro adicional que es Static Data Source, que es el que he estado utilizando para la POC, que te permite tener datos estáticos. Es decir, básicamente, guardar y emular un Data Source.

Más información,

• Volkov Labs