[PERL] JSON y Highcharts



Ocasionalmente uno tiene que hacer cosas en el trabajo que manualmente pueden llevar mucho tiempo, o cosas que uno quisiera hacer de maneras más sencillas, pero normalmente no se tienen las herramientas ni el tiempo suficiente para automatizar estas tareas. A veces se tiene algo de tiempo y uno empieza a buscar por todo Internet esas maneras de solucionar los problemas del día a día y lo único que se encuentran son pedazos de solución con ejemplos incompletos y que por lo general son incompatibles con cualquier otra cosa. y la búsqueda se hace interminable...

Por eso he decidido compartir los pedazos (...de solución con ejemplos incompletos...) que he podido encontrar y adaptar a mis necesidades, y que sé con seguridad que hay más personas buscando y voy a comenzar con una solución sencilla para desplegar gráficos (como tráfico de red, CPU, escritura en disco, etc.) que funciona con un CGI en Perl, datos en JSON y Javascript con Highcharts.

En mi escenario a solucionar el caso es el siguiente: se requiere monitorear el tráfico de unas interfaces de un equipo de comunicaciones y poder visualizar varias simultáneamente. Para poder solucionarlo separé el problema en 3 partes: Extraer los valores del equipo, graficar los valores, y ver cómo iba a hacer para que algo enviara los valores de la primera parte a la tercera.

Extraer los valores y publicarlos en JSON

En los varios años que llevo trabajando en networking lo único que he aprendido medianamente bien es a automatizar las conexiones CLI a los equipos de comunicaciones, así que simplemente elaboré un pequeño cliente Telnet en Perl sobre un Windows que consultara al dispositivo (en este caso un equipo Brocade) y sacara los datos para exponerlos en JSON. WARNING: Mi código puede contener "espanglish" pero es una fea manía que tengo, no lo lamento:

Con esto listo, el esfuerzo más grande radica en configurar mi par de Highcharts (para este escenario utilicé dos). Cabe señalar que mi solución no es muy elegante pues contiene muchísimo código duplicado, pero es operativa. Espero algún día maquillar ese código y hacerlo agradable a la vista.

Gráficas en Highcharts

Debo admitir que mi experiencia con Highcharts era nula hasta el día de hoy, situación que habla muy bien de la herramienta, pues bastaron un par de horas para poder usarla medianamente bien... dicho esto, para la visualización utilice una página HTML que se debería conectar con JSON al CGI en Perl para traer los datos y alimentar los gráficos, para esto lo primero fue estructurar la página:

Con la estructura de la página, estructuré una gráfica usando la sintaxis de Highcharts. La intención es tener 2 gráficas, una a la izquierda, otra a la derecha, cada una graficando el tráfico de una interfaz diferente, el código para la de la derecha es el siguiente. NOTA: El evento que carga los datos a la gráfica será "requestData":



Una vez estructurada la página y la gráfica, desarrolle una función que leyera los datos del CGI y los dispusiera para el gráfico. Acá nuevamente utilicé una función diferente con un CGI diferente para cada gráfico, espero algún día optimizar esto para usar una sola función que actualice ambos gráficos:



Ya con esto, sólo queda agregar los JS necesarios para que funcione Highcharts, la función "requestData", duplicar gráficas y funciones para poblar (también los Perl), agregar un poco de estilos CSS y cuadrar los DIV de cada gráfico... Al final queda un código como el siguiente:



Con esto ya se puede tener el par de gráficos, que pueden ajustar con las opciones de Highcharts. Cabe mencionar que todo este desarrollo no es mio, hay pedazos de manuales de varios lados y la siempre invaluable ayuda de los valientes de Stackoverflow, lo único que hice fue pegar todo para que me sirviera y espero que quien llegue hasta acá le sea útil también.