Herramientas de usuario

Herramientas del sitio


manuales:nagios:capacitacion:graficos_en_ajax

¡Esta es una revisión vieja del documento!


Gráficos en AJAX

Highcharts for Nagios

Highcharts es una librería de JavaScript para generar gráficos interactivos de líneas, área, barras, columnas, torta y muchos más. Es totalmente compatible con la mayoría de los navegadores incluyendo el Safari para iPhone y el Internet Explorer desde su versión 6. Entre sus características se destacan:

  • Gratis para uso No-Comercial
  • Puro JavaScript
  • Sintaxis de configuración sencilla
  • Numerosos tipos de gráficos
  • Etiquetas Tooltip
  • Múltiples ejes
  • Eventos
  • Ejes de fecha y hora
  • Zooming
  • Carga externa de datos
  • Gráfico invertido o eje invertido
  • Rotación del texto en las etiquetas

En este caso vamos mencionar la implementación para tomar gráficos RRD de PNP4Nagios y transformarlos en en formato AJAX de Highcharts.

highcharts4nagios_rs.jpg

Además podemos capturar datos por medio de MK LiveStatus y dibujar gráficos con dichos datos, podemos por ejemplo consultar un array en JSON y escribir las variables, por ejemplo consultamos el numero de servicios en Nagios, luego de dichos servicios cuantos estan en status OK, WARNING y CRITICAL y devolvemos en porcentaje y obtenemos este simple código, que nos va a generar un gráfico que luego podremos exportar en PNG, SVG, JPG, PDF :

            data: [{
                    name: 'OK',
                    y: 96.6,
		    color: colors[2],
		    url: 'http://wiki.cayu.com.ar',
                },{
                    name: 'WARNING',
                    y: 2.0,
		    color: colors[6],
                },{
                    name: 'CRITICAL',
                    y: 1.4,
                    sliced: true,
                    selected: true,
		    color: colors[5],
                },

highcharts4nagios_pie.jpg

Para poder configurar el módulo de exportación de los gráficos a PNG, SVG, PDF. Deberemos tener instalado en nuestro servidor el paquete http://xmlgraphics.apache.org/batik/ y luego indicar en el módulo de exportación lo siguiente :

define ('BATIK_PATH', 'batik-1.7/batik-rasterizer.jar');

jVectorMap

Con jVectorMap podemos dibujar mapas dinámicos vectoriales en AJAX, podemos hacer que por ejemplo al pasar el mouse por cada país por medio de datos obtenidos de MKLiveStatus muestre el estado de hosts y servicios de cada región.

jvectormap.jpg

Ejemplo muy simple :

    jQuery.noConflict();
    jQuery(function(){
      var $ = jQuery;
      $('#map').vectorMap({
        map: 'ar_mill_en',
	hoverOpacity: 0.7,
	hoverColor: false,
	backgroundColor: 'transparent',
	zoomButtons: false,
	zoomOnScroll: false,
        regionStyle: {
    	    initial: {
    		fill: '#E1AF6C'
    	    }
	},
	onRegionClick: function(event, code){
	    cargar_ajax('hostgroup_info.php?code='+code+'');
	}
      });
    })

Extrancción de datos de los RRD de PNP4Nagios

Podemos extraer los datos almacenados en los datos RRD, para luego procesarlos y mostralo en la herramienta de reportes que desarrollemos o por ejemplo, en ves de utilizar Highcharts podemos utilizar la libreria D3js o alguna otra.

https://servidor_nagios/pnp4nagios/xport/csv?host=servidor1&srv=Load%20Linux

timestamp;load_1_min_MIN;load_1_min_MAX;load_1_min_AVERAGE;load_5_min_MIN;load_5_min_MAX;load_5_min_AVERAGE;load_15_min_MIN;load_15_min_MAX;load_15_min_AVERAGE 1425027060;6.0332333333;6.0332333333;6.0332333333;5.899;5.899;5.899;5.7517666667;5.7517666667;5.7517666667 1425027120;6.0332333333;6.0332333333;6.0332333333;5.899;5.899;5.899;5.7517666667;5.7517666667;5.7517666667 1425027180;5.9871333333;5.9871333333;5.9871333333;6.2204;6.2204;6.2204;5.9390333333;5.9390333333;5.9390333333 1425027240;5.9871333333;5.9871333333;5.9871333333;6.2204;6.2204;6.2204;5.9390333333;5.9390333333;5.9390333333 …..

https://servidor_nagios/pnp4nagios/xport/xml?host=servidor2&srv=Load%20Linux

.....
      <entry>load_1_min_MIN</entry>
      <entry>load_1_min_MAX</entry>
      <entry>load_1_min_AVERAGE</entry>
      <entry>load_5_min_MIN</entry>
      <entry>load_5_min_MAX</entry>
      <entry>load_5_min_AVERAGE</entry>
      <entry>load_15_min_MIN</entry>
      <entry>load_15_min_MAX</entry>
      <entry>load_15_min_AVERAGE</entry>
    </legend>
  </meta>
  <data>
    <row><t>1425027180</t><v>5.9871333333e+00</v><v>5.9871333333e+00</v><v>5.9871333333e+00</v><v>6.2204000000e+00</v><v>6.2204000000e+00</v><v>6.2204000000e+00</v><v>5.9390333333e+00</v><v>5.9390333333e+00</v><v>5.9390333333e+00</v></row>
    <row><t>1425027240</t><v>5.9871333333e+00</v><v>5.9871333333e+00</v><v>5.9871333333e+00</v><v>6.2204000000e+00</v><v>6.2204000000e+00</v><v>6.2204000000e+00</v><v>5.9390333333e+00</v><v>5.9390333333e+00</v><v>5.9390333333e+00</v></row>
    <row><t>1425027300</t><v>5.9871333333e+00</v><v>5.9871333333e+00</v><v>5.9871333333e+00</v><v>6.2204000000e+00</v><v>6.2204000000e+00</v><v>6.2204000000e+00</v><v>5.9390333333e+00</v><v>5.9390333333e+00</v><v>5.9390333333e+00</v></row>
    <row><t>1425027360</t><v>5.9871333333e+00</v><v>5.9871333333e+00</v><v>5.9871333333e+00</v><v>6.2204000000e+00</v><v>6.2204000000e+00</v><v>6.2204000000e+00</v><v>5.9390333333e+00</v><v>5.9390333333e+00</v><v>5.9390333333e+00</v></row>
    <row><t>1425027420</t><v>5.9871333333e+00</v><v>5.9871333333e+00</v><v>5.9871333333e+00</v><v>6.2204000000e+00</v><v>6.2204000000e+00</v><v>6.2204000000e+00</v><v>5.9390333333e+00</v><v>5.9390333333e+00</v><v>5.9390333333e+00</v></row>
....

https://servidor_nagios/pnp4nagios/xport/json?host=servidor3&srv=Load%20Linux

{"meta":{"start":"1425027180","step":"60","end":"1425041580","rows":"241","columns":"9","legend":{"entry":["load_1_min_MIN","load_1_min_MAX","load_1_min_AVERAGE","load_5_min_MIN","load_5_min_MAX","load_5_min_AVERAGE","load_15_min_MIN","load_15_min_MAX","load_15_min_AVERAGE"]}},"data":{"row":[{"t":"1425027180","v":["5.9871333333e+00","5.9871333333e+00","5.9871333333e+00","6.2204000000e+00","6.2204000000e+00","6.2204000000e+00","5.9390333333e+00","5.9390333333e+00","5.9390333333e+00"]},{"t":"1425027240","v":["5.9871333333e+00","5.9871333333e+00","5.9871333333e+00","6.2204000000e+00","6.2204000000e+00","6.2204000000e+00","5.9390333333e+00","5.9390333333e+00","5.9390333333e+00"]},{"t":"1425027300","v":["5.9871333333e+00","5.9871333333e+00","5.9871333333e+00","6.2204000000e+00","6.2204000000e+00","6.2204000000e+00","5.9390333333e+00","5.9390333333e+00","5.9390333333e+00"]},{"t":"1425027360","v":["5.9871333333e+00","5.9871333333e+00","5.9871333333e+00","6.2204000000e+00","6.2204000000e+00","6.2204000000e+00","5.9390333333e+00","5.9390333333e+00","5.9390333333e+00"]},{"t":"1425027420","v":["5.9871333333e+00","5.9871333333e+00","5.9871333333e+00","6.2204000000e+00","6.2204000000e+00","6.2204000000e+00","5.9390333333e+00","5.9390333333e+00","5.9390333333e+00"]},{"t":"1425027480","v":
....

Extrancción de datos de las imágenes de los RRD de PNP4Nagios

Si por ejemplo necesitamos embeber las imágenes de pnp4nagios dentro de por ejemplo un reporte en PDF que realizamos con algun script en este caso en PHP, podemos ver el siguiente ejemplo :

<?php
$HOST="srvlinux01";
$SERVICE="Linux Load Average";
$PNPURL="http://nagios.cayu.com.ar/pnp4nagios";
$REQUEST_URI="image?host=$HOST&srv=$SERVICE&view=1&source=0";
$GET="$PNPURL/".urlencode($REQUEST_URI);
print(file_get_contents($GET));
?>
manuales/nagios/capacitacion/graficos_en_ajax.1445532690.txt.gz · Última modificación: 2015/10/22 16:51 por cayu