.. _use_dashboards: *********************************************************************** Configuración e integración de dashboards de Grafana en WOCU-Monitoring *********************************************************************** WOCU-Monitoring ofrece como complemento a sus funciones una serie de herramientas y aplicaciones *OpenSource*, desde donde es posible generar y exportar variedad de cuadros de mando (*dashboards*), véase `Grafana `_. .. Attention:: La sección :ref:`dashboards` es un módulo adicional que enriquece las funcionalidades que WOCU-Monitoring ofrece por defecto. Gracias a la versatilidad de WOCU-Monitoring para gestionar y procesar infinidad de métricas, con valores recogidos y almacenados durante chequeos, es posible integrar y renderizar cuadros de mando con potentes capacidades gráficas, es decir, WOCU-Monitoring soporta la integración, visualización y tratamiento de datos de multitud de fuentes y los renderiza en su propia interfaz. La pestaña :ref:`dashboards` de un Reino determinado, centraliza los diferentes cuadros de mando habilitados en WOCU-Monitoring, bajo libre configuración y elección del Administrador. .. image:: ../images/use_cases/5_049_aggregator_use_cases-dashboard-view_0-50.jpg :align: center El presente caso de uso abarca desde la creación de un panel en `Grafana `_, hasta su integración y visualización en la pestaña :ref:`dashboards` de un Reino en WOCU. Esta entrada se presenta dividida en cuatro bloques: 1. Creación del *dashboard* en Grafana. 2. Exportación del *dashboard* desde Grafana 3. Integración del *dashboard* en WOCU. 4. Visualización en la pestaña :ref:`dashboards` de un Reino. **1. Creación de un dashboard en Grafana** ---------------------------------- Existen dos vías de acceso a Grafana: * Mediante la URL válida resultado del acceso por protocolo HTTP a la IP de monitorización, añadiendo posteriormente el sufijo *grafana*: .. centered:: ``http:///grafana`` * Desde WOCU-Monitoring, a través de su acceso directo ubicado en la barra superior de navegación, siempre y cuando haya sido dado de alta previamente. .. image:: ../images/use_cases/5_050_aggregator_use_cases-grafana-link-menu_0-40.jpg :align: center .. admonition:: Recuerda WOCU-Monitoring reserva la barra superior para que el Administrador pueda configurar y anclar enlaces directos a herramientas complementarias a WOCU-Monitoring. Más información en: :ref:`add_links` A continuación, abandonaremos la aplicación y accederemos a la página principal *Home* de Grafana. En el menú vertical izquierdo, habrá que hacer clic sobre el icono **➕**, y eligir la opción **Dashboard**, para comenzar con la configuración. .. image:: ../images/use_cases/5_051_aggregator_use_cases-grafana-add-dash_0-40.jpg :align: center El primer paso consistirá en agregar el primer panel (elemento gráfico básico para la visualización de datos). Grafana provee diferentes tipos de paneles, en nuestro caso, seleccionaremos un panel de tipo gráfico: **Graph**. .. image:: ../images/use_cases/5_052_aggregator_use_cases-grafana-add-panel_0-40.jpg :align: center Como punto de partida trabajaremos sobre esta gráfica, comenzando a editar desde el menú desplegable superior (junto al título del panel): .. image:: ../images/use_cases/5_053_aggregator_use_cases-grafana-graph-edit_0-40.jpg :align: center A continuación, comenzaremos a configurar las métricas y otros aspectos visuales de la gráfica. En este panel vamos añadir las métricas ``traffic_in`` y ``traffic_out``, para visualizar el caudal de tráfico de las diferentes interfaces de red de un Dispositivo. Para ello realizaremos la siguiente configuración: - Nos mantenemos en :guilabel:`Metrics` y en el desplegable **Data Source** elegiremos la bases de datos ``influx-demos`` a la que se conectará Grafana para extraer los datos métricos. Toda BBDD debe ser dada de alta previamente desde el módulo de configuración de Grafana. Más información en: :ref:`sources`. .. image:: ../images/use_cases/5_056_aggregator_use_cases-grafana-source_0-40.jpg :align: center Grafana permite agregar varias consultas para solapar gráficas de diferentes datos. A continuación, definiremos una *query* por cada métrica. Los datos se visualizarán automáticamente en la gráfica superior: .. image:: ../images/use_cases/5_055_aggregator_use_cases-grafana-query_0-40.jpg :align: center +------------------------------------------------------------------------+ | **Query A** | | | | * :guilabel:`FROM`: en **Select measurement** | | definiremos la expresión regular | | ``/metric_.*traffic_in/``, para capturar todas las métricas de | | tráfico de entrada existentes en la BBDD. | | | | A continuación, en el operador **WHERE** definiremos la siguiente | | consulta: | | | | **host_name** =~ ``/^$EquiposRed$/`` --> esta variable consulta y | | devuelve solo los equipos con conectividad de la BBDD. | | | | **service_description** =~ ``/^$InterfacesRed$/`` --> esta variable| | complementa la anterior condición, devolviendo las interfaces | | (cuando existan) de los equipos de red. En conclusión, | | se filtrará los equipos | | de red que tengan aplicado el pack de monitorización genérico de | | tráfico. | | Más información en: :ref:`variable`. | | | | Los siguientes parámetros serán configurados para reunir en un único | | valor (promedio) todos los valores de tráfico de entrada por | | interfaz y mostrarlos en la leyenda, mediante el uso de | | *tags* y patrones: | | | | * :guilabel:`GROUP BY`: pueden existir varios servicios asociados | | a una métrica y viceversa, por lo tanto, añadiremos la | | ``tag (service_description)`` para agrupar todos los servicios | | asociados a la métrica de tráfico entrante. | | | | * :guilabel:`ALIAS BY`: añadimos el patrón | | ``[[tag_service_description]]_IN`` como identificativo de la | | las interfaces de red con tráfico entrante en la leyenda. | +------------------------------------------------------------------------+ +------------------------------------------------------------------------+ | **Query B** | | | | * :guilabel:`FROM`: en **Select measurement** | | definiremos la expresión regular | | ``/metric_.*traffic_out/``, para capturar todas las métricas de | | tráfico de entrada existentes en la BBDD. | | | | A continuación, en el operador **WHERE** definiremos la siguiente | | consulta: | | | | **host_name** =~ ``/^$EquiposRed$/`` --> esta variable consulta y | | devuelve solo los equipos con conectividad de la BBDD. | | | | **service_description** =~ ``/^$InterfacesRed$/`` --> esta variable| | complementa la anterior condición, devolviendo las interfaces | | (cuando existan) de los equipos de red. En conclusión, | | se filtrará los equipos | | de red que tengan aplicado el pack de monitorización genérico de | | tráfico. | | Más información en: :ref:`variable`. | | | | Los siguientes parámetros serán configurados para reunir en un único | | valor (promedio) todos los valores de tráfico de salida por | | equipo o interfaz y mostrarlos en la leyenda, mediante el uso de | | *tags* y patrones: | | | | * :guilabel:`GROUP BY`: pueden existir varios servicios asociados | | a una métrica y viceversa, por lo tanto, añadiremos la | | ``tag (service_description)`` para agrupar todos los servicios | | asociados a la métrica de tráfico saliente. | | | | * :guilabel:`ALIAS BY`: añadimos el patrón | | ``[[tag_service_description]]_OUT`` como identificativo de la | | las interfaces de red con tráfico de salida en la leyenda. | +------------------------------------------------------------------------+ - En :guilabel:`Axes` se configuran los ejes de la gráfica modificando la escala y tipo de unidad. Para este caso de uso, en ambos ejes cambiaremos la unidad a: ``Bits/sec`` para la medición de datos de tráfico. .. image:: ../images/use_cases/5_056_aggregator_use_cases-grafana-axes_0-40.jpg :align: center - En :guilabel:`Legend` se configura la leyenda de la gráfica. Para este caso de uso mostraremos la leyenda en formato tabular (casilla ``As table``) y añadiremos el último valor recogido de la métrica (casilla ``current``), el valor medio (casilla ``avg``) y total (casilla ``total``) resultado de la *query* planteada. .. image:: ../images/use_cases/5_057_aggregator_use_cases-grafana-legend_0-40.jpg :align: center - En :guilabel:`Display` se define el estilo de la gráfica. Para nuestro caso de uso, marcaremos la casilla ``Points``, para trazar con puntos los datos a lo largo del eje y ajustaremos su tamaño en ``Point radius``. Por último, seleccionando la opción *connected* en ``Null value`` la gráfica enlazará también los valores nulos (desconocidos o perdidos). .. image:: ../images/use_cases/5_058_aggregator_use_cases-grafana-display_0-40.jpg :align: center - Para finalizar la configuración, en :guilabel:`General` añadiremos el título a la gráfica en el campo ``Title`` que será mostrado en la parte superior del panel. .. image:: ../images/use_cases/5_059_aggregator_use_cases-grafana-general_0-40.jpg :align: center Por último, ya disponemos de la primera gráfica del *dashboard*. .. image:: ../images/use_cases/5_060_aggregator_use_cases-grafana-graph_0-40.jpg :align: center En función de la configuración establecida mediante el uso de variables, en la parte superior de la gráfica podemos seleccionar dos elementos que influirán en los datos mostrados: un Dispositivo determinado en el desplegable **EquiposRed** y una de las interfaces de red identificadas en dicho Dispositivo en el filtro **InterfacesRed**. En consecuencia la gráfica quedará acotada y actualizada con los valores métricos relativos al tráfico de entrada y salida de dicha interfaz. .. image:: ../images/use_cases/5_065_aggregator_use_cases-grafana-filters_0-40.jpg :align: center De modo que esta gráfica refleja el caudal de tráfico de de los Dispositivos con la interfaz *N*. **2. Exportación e integración del dashboard en WOCU** ----------------------------------- Generado el *dashboard* final, se procederá a su exportación. Para ello, en el encabezado superior de la vista, entre las acciones disponibles en la parte derecha, haremos clic sobre la opción **Share dashboard**. .. image:: ../images/use_cases/5_044_aggregator_use_cases-grafana-export_0-40.jpg :align: center A continuación, se abrirá el siguiente cuadro de diálogo con tres posibles opciones para compartir el *dashboard* (Link, Snapshot y Export). Nos mantenemos en la vista de la sección ``Link``, donde automáticamente se generará un enlace único del *dashboard* que tendremos que copiar. .. image:: ../images/use_cases/5_045_aggregator_use_cases-grafana-export-confirmation_0-40.jpg :align: center Conservaremos la configuración que viene establecida por defecto, para exportar el *dashboard* con el último rango de tiempo guardado y los valores de las variables de plantilla seleccionadas. .. Attention:: Es importante guardar todos los cambios realizados antes de generar y copiar el enlace. El último paso en Grafana será pulsar el botón **Copy**, para que el enlace del *dashboard* pase a nuestro portapapeles. .. image:: ../images/use_cases/5_046_aggregator_use_cases-grafana-copy_0-40.jpg :align: center **3. Integración del cuadro de mando en WOCU-Monitoring** ----------------------------------------- La agregación del *dashboard* será llevada a cabo solo por Administradores del sistema, pero será visible para el resto de usuarios. Iniciando sesión en WOCU-Monitoring y desde la :doc_url:`Configuración Avanzada del Import-tool `, podremos vincular nuestro *Dashboard* construido en `Grafana `_. .. image:: ../images/setup/4_086_import-tool_advanced-configuration_button_0-62.png :align: center Dentro de la vista de administración, habrá que localizar la opción **Extended Dashboards**, y hacer clic en el botón **Añadir** (*+ Add*), ubicado en la misma fila, tal y como se aprecia en la siguiente imagen: .. image:: ../images/use_cases/5_047_aggregator_use_cases-wocu-extended-dashboards_0-40.jpg :align: center A continuación accederemos a una nueva ventana para dar de alta el *dashboard* en WOCU, cuyos campos tendrán que ser editados manualmente. Estos son: .. image:: ../images/use_cases/5_048_aggregator_use_cases-wocu-extended-dashboards-add_0-40.jpg :align: center **• Name**: añadiremos un identificador con el que se conocerá el *dashboard* en WOCU-Monitoring, por ejemplo: ``Grafana-documentantion``. **• Hostgroup**: seleccionando un *Hostgroups* del desplegable, el *dashboard* será visible además de en el Reino Estándar, en el *Reino Basado en Hostgroups* en el que esté integrado el *Hostgroup* elegido. **• Fullview**: en la sección :ref:`dashboards`, existen dos vistas: :ref:`full` y :ref:`panels`, por las que se distribuirán los diferentes paneles y *dashboards*. Marcaremos esta casilla, para que nuestro *dashboard* sea visible una única vista. **• Visible**: dejaremos marcada esta casilla para visualizar el nuevo *dashboard*. En caso contrario, quedará configurado pero no será visible en WOCU-Monitoring. **• Created**: indica la fecha y hora exacta de creación y alta del *dashboard* en WOCU-Monitoring. Ya configurado, guardaremos la edición y reiniciaremos sesión en WOCU-Monitoring. En el `Import-tool` en el que esté configurado este Reino, ya estará disponible el nuevo *dashboard*: **Grafana-documentantion**. **4. Visualización en la pestaña Dashboard de un Reino** ------------------------------------ Una vez dentro del Reino en cuestión y de la pestaña :ref:`dashboards`, debemos acceder a la vista :ref:`full` (como hemos configurado previamente) y seleccionar el *dashboard* añadido recientemente en el **Filtro Search**, donde se listan todos los paneles disponibles. De forma inmediata será mostrado en la interfaz. .. image:: ../images/use_cases/5_061_aggregator_use_cases-dashboard-selector_0-40.jpg :align: center Por defecto, el panel representará los datos recopilados en las últimas 24 horas, pero esto puede ser modificado gracias al **Selector por rango temporal**, donde es posible elegir un nuevo criterio temporal predefinido, o configurar un nuevo periodo mediante la opción *Custom Range*. También es posible ejecutar refrescos forzados de datos haciendo clic sobre el icono de las flechas en movimiento circular (🔁). .. image:: ../images/use_cases/5_062_aggregator_use_cases-dashboard-time-interval_0-40.jpg :align: center :scale: 80 % Por último, un *dashboards* es un entorno dinámico compuesto por elementos interactivos con funcionalidades extras, que permiten sacar un mayor partido a los datos mostrados en sus diferentes representaciones gráficas. Algunas funcionalidades e interacciones posibles son: * Cambiar el tamaño del panel o reubicarlo. .. image:: ../images/use_cases/5_063_aggregator_use_cases-dashboard-resize_0-40.jpg :align: center * Visualizar una única serie de datos en la gráfica haciendo clic sobre la misma en la leyenda, y obtener los valores exactos registrados en un punto en concreto de la gráfica. .. image:: ../images/use_cases/5_064_aggregator_use_cases-dashboard-detail_0-40.jpg :align: center Existen multitud de opciones aplicables que variarán en función de la tipología del elemento y del alcance de la herramienta que los provee a WOCU. Conoce más funcionalidades en: :ref:`custom-dashboards`. .. Note:: Recuerda que un *dashboard* bien construido permite conocer en tiempo real o en periodos de tiempo concretos, el progreso y evolución de métricas relevantes que impactan en nuestro negocio. Lo que facilita la medición del rendimiento, la toma decisiones y la aplicación de medidas de actuación en consecuencia. .. _sources: Alta de Fuentes de Datos (Data Sources) en Grafana -------------------------------------------------- Previo a la creación de un primer *dashboard* es necesario dar de alta la fuente de origen de datos (*backends* de almacenamiento), de donde se extraerán los valores métricos para ser representados. La adición de un nuevo *Data Sources* se realiza desde el módulo **Configuration**, accesible en el menú vertical izquierdo, como se observa en la siguiente imagen: .. image:: ../images/use_cases/5_070_aggregator_use_cases-dashboard-add-data-sources_0-40.jpg :align: center A continuación, pulsando el botón verde **Add Data Source** accederemos al formulario de alta: .. image:: ../images/use_cases/5_071_aggregator_use_cases-dashboard-add-data-sources_0-40.jpg :align: center Para este caso de uso hemos creado el siguiente *Data Source*: .. image:: ../images/use_cases/5_072_aggregator_use_cases-dashboard-add-data-sources_0-40.jpg :align: center **Name**: nombre por el que será identificada la fuente de datos en Grafana. Añadiremos ``Influx_demos`` para este caso de uso. **Type**: Grafana soporta diferentes tipos de fuentes de datos donde almacena todas las métricas registradas. En función de la tipología elegida, existirán unos parámetros de configuración adecuados a las características y capacidades de la fuente. En este caso de uso crearemos una BBDD *InfluxBD* como origen de datos métricos. **URL**: de la máquina donde se aloja la BBDD *InfluxBD*. Es el resultado del acceso por protocolo HTTP a la dirección IP, más el puerto de la **API InfluxDB** (por defecto ``8086``): .. centered:: ``http://:8086`` **Database**: nombre de la BBDD de *InfluxDB*, a la que se va acceder para la petición de valores métricos. Recuerda que cada BBDD recopila distintas métricas. Es importante conocer previamente el alcance y contenido de cada BBDD. En este caso de uso utilizaremos la BBDD ``wocu-demos``. Guardados los cambios realizados, este nuevo *Data Source* quedará creado en Grafana para ser utilizado como origen de valores métricos de cualquier *dashboard*. .. Attention:: Es preciso disponer de permisos de administración para el alta de *Data Sources* en el sistema. .. _variable: Construcción de Variables de consulta en Grafana ------------------------------------------------ Es posible predefinir una *query* concreta a una BBDD mediante la configuración de variables. La construcción de variables de consulta, se realiza en el módulo **Setting**, accesible desde las acciones del menú superior del panel, como se observa en la siguiente imagen: .. image:: ../images/use_cases/5_066_aggregator_use_cases-dashboard-setting_0-40.jpg :align: center A continuación, pulsando el botón verde **Add Variable** accederemos al formulario de construcción: .. image:: ../images/use_cases/5_067_aggregator_use_cases-dashboard-new-variable_0-40.jpg :align: center En este caso de uso hemos utilizado dos variables: **1.** ``EquiposRed`` .. image:: ../images/use_cases/5_068_aggregator_use_cases-dashboard-equipored_0-40.jpg :align: center Su configuración es la siguiente: **Name**: nombre por el que será conocida la variable en el *dashboard*. **Type**: opción *query*, ya que la función de nuestra variable es consultar y devolver elementos. **Data Source**: ``Influx_demos`` es la fuente de datos donde Grafana va a realizar la consulta y petición de datos. **Refresh**: opción *on Dashboard Load* para que el sistema refresque datos cuando cambiemos de *dashboard*. **Query**: espacio para introducir la consulta que devolverá todos los equipos en los que se mide la conectividad y tráfico de red, es decir, que tengan asignados packs de monitorización de medición de tráfico. :: SHOW TAG VALUES WITH KEY = host_name WHERE service_description =~ /^Traffic.*/ Una previsualización de los elementos que cumplan con la consulta planteada será visible en la parte inferior de la vista. Guardados los cambios realizados, la variable quedará creada para ser aplicada en configuración de cualquier panel del *dashboard*. **2.** ``InterfacesRed`` .. image:: ../images/use_cases/5_069_aggregator_use_cases-dashboard-interfaces_0-40.jpg :align: center Su configuración es la siguiente: **Name**: nombre por el que será conocida la variable en el *dashboard*. **Type**: opción *query*, ya que la función de nuestra variable es consultar y devolver elementos. **Data Source**: ``Influx_demos`` es la fuente de datos donde Grafana va a realizar la consulta y petición de datos. **Refresh**: opción *on Dashboard Load* para que el sistema refresque datos cuando cambiemos de *dashboard*. **Query**: espacio para introducir la consulta que devolverá las interfaces de red descubiertas para cada equipo. Por cada interfaz se pintará en la gráfica los valores relativos al tráfico de entrada y salida que han sido registrados en WOCU-Monitoring. :: SHOW TAG VALUES WITH KEY = "service_description" WHERE "service_description" =~ /^Traffic.*/ AND "host_name" =~ /^$EquiposRed$/ Una previsualización de los elementos que cumplan con la consulta planteada será visible en la parte inferior de la vista. Guardados los cambios realizados, la variable quedará creada para ser aplicada en configuración de cualquier panel del *dashboard*. .. admonition:: Recuerda Tanto Grafana como Influx son soluciones que, aunque se integran como parte de WOCU-Monitoring, no son desarrollos creados ni mantenidos por nuestro equipo técnico, de modo que su descripción técnica o de funcionamiento excede el alcance de este Manual de Usuario. Amplia información en su documentación oficial: * `Documentación de Grafana `_ * `Documentación de Influx `_