Cómo hacer un gadget que comprueba estado de APIs REST con Sofia2

En este post vamos a ver cómo usando los gadgets tipo HTML5 de la plataforma puedo hacer de forma muy rápida un front de monitorización de servicios REST.

Primero accederé a mi instancia Sofia2 con un rol COLABORADOR (recordad que si tenéis rol USUARIO podéis solicitar el paso a rol COLABORADOR desde la propia consola.

Una vez logado iré a la opción Mis Gadgets:

Y seleccionaré el botón Crear Gadget.

Iré a la pestaña AVANZADO y seleccionaré HTML 5:

 

Le daré un nombre, por ejemplo StatusURLs.

Empezaremos con un ejemplo básico que iremos mejorando…

Para desarrollar el gadget en HTML5 vamos a usar la librería jQuery.

El código inicial es este:

Y el resultado:

Si echáis un ojo al código veréis que cuando pulso el botón Ejecutar hago una petición QUERY a la URL del campo y repito esta petición cada 5 segundos indicando si la petición es correcta o incorrecta.

Puedo depurar el funcionamiento de este HTML en local o copiarlo en el gadget y ver cómo se renderiza:

Tras esto daré Crear para completar la creación del gadget.

Al crear el gadget

ya tendré una URL que puedo ver desde el icono Mostrar URL ddel listado:

https://sofia2.com/console/dashboard/ca248e0e-2701-4b00-af79-0b7d0459dcec

Ahora cambiaremos un poco el gadget para que en lugar de mostrar los datos en una tabla los muestre en un gráfico de barras (para probar el error podéis desconectaros de la red):

Para pintar el gráfico hemos usado la librería CanvasJS, que es muy sencillita, se integra muy bien con jQuery y ofrece bastantes tipos de charts:

El código que añado es básicamente este:

Y la función invokeURL que queda así:

Si edito el código de mi gadget y lo guardo ahora veo:

Y si lo ejecuto:

En un siguiente post, a partir de este gadget generaremos una plantilla de gadget y crearemos un dashboard con los gadgets parametrizados.

A continuación dejamos el código del ejemplo final:

<!DOCTYPE html>

<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>	
    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script type="text/javascript">		
    
        var interval;    
        var chart;
        var vecesOK=0;
        var vecesError=0;
				
        $(document).ready(function () {	
		
			chart = new CanvasJS.Chart("chartContainer", {
				animationEnabled: true,				
				theme: "light2", // "light1", "light2", "dark1", "dark2"
				title:{
					text: "Status URL: "+$("input#myURL").val()
				},
				axisY: {
					title: "Peticiones"
				},
				data: [{        
					type: "column",  
					showInLegend: true, 
					legendMarkerColor: "grey",
					legendText: "PETICIONES SERVIDOR",
					dataPoints: [      
						{ y: 0, label: "OK" },
						{ y: 0,  label: "ERROR" }
					]
				}]
			});
			chart.render();

			function invokeURL() {
                $.ajax({
                    type: "GET",
					//contentType: "application/json; charset=utf-8", NO FUNCIONAN REDIRECCIONES
                    dataType: "json",
                    async: true,
                    url: $("input#myURL").val(),
                    success: function (data,status, xhr) {	
                    	vecesOK++;
                    	//chart.options.data[0].dataPoints.push({y: 23}); // Add a new dataPoint to dataPoints array 
						chart.options.data[0].dataPoints[0].y = vecesOK ;  // Update an existing dataPoint
						chart.options.data[0].dataPoints[1].y = vecesError;
						chart.render();
                    },
					error: function (data,status,xhr) {	
						vecesError++;	
                    	//chart.options.data[0].dataPoints.push({y: 23}); // Add a new dataPoint to dataPoints array 
						chart.options.data[0].dataPoints[0].y = vecesOK ;  // Update an existing dataPoint
						chart.options.data[0].dataPoints[1].y = vecesError;
						chart.render();
					}
                });
			}
			
            $("#start").click(function () {
				interval = setInterval(invokeURL, $("input#myTimer").val());								
                return (false);
            });
			$("#stop").click(function () {
				clearInterval(interval);				
                return (false);
            });

        });
    </script>
</head>
<body>
    <p><div id="myOutput" style='font-size:12pt;font-family:sans-serif'>...</div><p>	
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
    <p>Invoca: <input id="myURL" value="https://sofia2.com/sib-api/services/rest/monitoring" type="text" size="50"/> cada <input id="myTimer" value="5000" type="text" size="4"/> ms</p>
    <p><input id="start" value="Ejecutar" type="submit"/> <input id="stop" value="Parar" type="submit"/></p>	


</body>
</html>

Cómo hacer un gadget que comprueba estado de APIs REST con Sofia2

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s