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

Centro de Control Smart Logroño

 

SmartLogroñoVisor2

 

Como comentábamos en abril, el Ayuntamiento de Logroño adjudicó el suministro, implantación, desarrollo y mantenimiento de la Plataforma ‘Smart Logroño‘ a la UTE Indra Sistemas y Suma Info.

 

Minsait IoT Sofia2 servirá como base tecnológica para este proyecto que se extenderá hasta 2021.

 

El Centro de Control Integral Smart Logroño funciona ya como la columna vertebral de los servicios de la ciudad. Dispondrá de un único panel de mando digital que permitirá gestionar en tiempo real servicios como el alumbrado, el tráfico, la seguridad, la recogida de residuos, el riego o la resolución de incidencias y averías.

 

SmartLogroñoVisor1

 

Estamos muy orgullosos de poder aportar nuestro conocimiento y tecnología al innovador proyecto Smart Logroño, un proyecto de futuro que ya forma parte del presente de la ciudad.

 

Centro de Control Smart Logroño

Internacionalización en Dashboard Sofia2

image1

 

En la nueva versión de Sofia2 se han incluido capacidades de internacionalización dentro de los dashboards. Esta característica es configurable desde el menú de edición del propio dashboard.

 

Mediante etiquetas, se pueden internacionalizar los diferentes elementos de texto del dashboard y visualizarlo a través de la configuración de idioma de la propia consola, o bien, a través del parámetro lang de la query, indicando el lenguaje requerido, que debe estar reflejado en el JSON de internacionalización mediante su referencia abreviada (en, es, pt…).

 

image2

image3

 

Este JSON de internacionalización tiene la siguiente estructura


{

"label1": {

"es": "Spanish text 1",

"en": "English text 1",

"pt": "Portuguese text 1"

},

"label1": {

"es": " Spanish text 2",

"en": " English text 2",

"pt": "Portuguese text 2"

},

"label3": {

"es": " Spanish text 3",

"en": " English text 3".

"pt": "Portuguese text 3"

},

….

}

 

Pudiendo tener cualquier número de etiquetas o idiomas reflejados en el mismo. Estas etiquetas habrá que incluirlas dentro de los diferentes elementos de texto con la siguiente sintaxis: #{label1} que será sustituida por el correspondiente valor internacionalizado.

Internacionalización en Dashboard Sofia2

Ejecución de código personalizado en Dashboards

image1

 

Siguiendo con las nuevas capacidades de los Dashboards de Sofia2, otra nueva posibilidad que se nos brinda, es la de ejecutar código javascript propio, para tener un acceso a más bajo nivel en nuestros dashboards, así como incluir nuevas interacciones, como por ejemplo botones que realicen ciertas tareas sobre el mismo o realizar cambios de estilado o la inclusión y eliminación de ciertos elementos.

 

Todo esto se puede programar en la nueva opción habilitada para ello, dentro del menú de dashboard, denominada Custom JS.

image2

 

Como se puede ver, este código tiene la posibilidad de usar jQuery, con lo que podremos acceder a diferentes elementos del dashboard o gadgets gracias a su sencilla sintaxis de selección. También, al igual que el estilado personalizado, este javascript se compartirá entre todas las páginas, por lo que habrá que tener esto en cuenta a la hora de usar esta funcionalidad.

 

A parte de ejecutar cierto código propio, un uso muy interesante es la combinación con el gadget markdown actual. Con este gadget, podemos crear contenido HTML como botones, selectores, checkboxs… combinado con la agilidad de usar bootstrap para ello y referenciar funciones que tengamos definidas en nuestro propio código javascript.

image3

Ejecución de código personalizado en Dashboards

Estilado personalizado en Dashboards Sofia2

image3

Una de las nuevas capacidades más importantes de los Dashboards de Sofia2 es la posibilidad de incluir y editar código de la hoja de estilos (css) en los mismos. Con esta característica, podemos estilar los dashboards de manera profesional, incluyendo cambios de imagen, transparencias, colores, animaciones, eliminar u ocultar elementos que no nos interesen… con toda la potencia que nos brinda este lenguaje de marcado.

 

Todo esto, se ha posibilitado gracias al remodelado del menú de edición de estilos, donde ahora, al pulsar en uno de los estilos predeterminados, podemos ver y editar en vivo el css que contiene. Este css será posteriormente inyectado al dashboard con todo nuestro estilado personalizado.

image1image2

Adicionalmente a esto, también es posible incluir uno o varios estilos externos por url. Mediante el nuevo parámetro de query styles se pueden incluir las referencias a archivos css externos separados por comas que se irán incluyendo en orden en el dashboard. Estos estilos sustituirán a los estilos base del dashboard. Hay que tener en cuenta que los propios elementos del dashboard tienen estilados de posiciones o tamaños por lo que es recomendable partir de un css de los dashboards actuales y a partir de ahí mantenerlo como estilo base.

urlDashboard?styles=url1.css,url2.css

Estilado personalizado en Dashboards Sofia2

Inyección de parámetros en Dashboards

image339

 

En la última release de Sofia2 se han mejorado las capacidades de integración de dashboards y gadgets en aplicaciones o webs. Uno de estos cambios, ha sido la posibilidad de pasar parámetros a los gadgets y dashboards de manera dinámica. Esta integración se apoya en los gadgets paramétricos que ya existían en Sofia2.

 

image1

 

Con esta nueva funcionalidad, se pueden integrar tanto gadgets como dashboards desde su url en sitios externos y, desde estos, refrescar el contenido de los mismos mediante parámetros de url.

 

image2

 

Existen dos formas de incluir estos parámetros a los gadgets:

  • Formato directo: sigue el siguiente formato y sustituye tanto en gadgets como dashboards todos los parámetros por nombre indistintamente.

          urlDashboard/Gadget?param1=value1&param2=value2

 

Gadgets:

image3

 

Dashboards:

  • Formato específico: sólo para dashboard. Con este formato podemos elegir que gadgets reciben un determinado parámetro dentro de un dashboard, con lo que podemos tener, por ejemplo, varias instancias del mismo gadget paramétrico y que cada una reciba un parámetro diferente. En este caso, se tiene que enviar una estructura más compleja en formato JSON sobre el parámetro “params” para indicar que gadget recibe un determinado parámetro o parámetros comunes a todos los gadgets. El formato es el siguiente:

image4

          urlDashboard/Gadget?params={‘idGadget1’:[{‘param1’:value1},{‘param2′: value2}],’all’:[{‘comun1’:value3},{‘param1’: value2}]}

 

Con la palabra reservada ‘all’ indicaremos que todos los gadgets recibirán un determinado parámetro. Si este parámetro ya lo tiene el propio gadget entonces tendrá preferencia el del propio gadget. En el caso anterior, si tenemos dos gadgets con IDs idGadget1 y idGadget2, el primero recibirá los parámetros:

  • param1: value1
  • param2: value2
  • comun1: value3

 

El segundo recibirá:

  • comun1:value3
  • param1:value2

image5

 

Los identificadores de Gadgets pueden obtenerse pulsando, en el modo edición del dashboard, las opciones del gadget.

image6

 

Si un gadget tiene más parámetros que los que recibe, entonces se pintará un formulario en su área de dibujado con los parámetros restantes para poder completar la lista.

Inyección de parámetros en Dashboards