Descubre cómo Crawson Macaw implementó dashboards de seguridad aeroportuaria en el aeropuerto de Londres-Stansted (STN) usando Canvas y Elastic Cloud.

<html><head></head><body><p>En <a href="https://www.crimsonmacaw.com/">Crimson Macaw</a>, recientemente emprendimos un proyecto interesante con Manchester Airport Group (MAG). Ten&#xED;amos que crear e implementar dashboards en tiempo real para las operaciones de seguridad aeroportuaria en el aeropuerto de Stansted.
</p><p>Esto le dar&#xED;a a la sala de control y al personal de seguridad una mejor visi&#xF3;n del flujo de pasajeros y el rendimiento de seguridad, lo que les permitir&#xED;a <strong>tomar decisiones con rapidez</strong> bas&#xE1;ndose en datos en tiempo real. Los datos deb&#xED;an ingestarse de una serie de sistemas locales y fuentes de datos externas y luego visualizarse en una serie de pantallas grandes.
</p><h2>Desaf&#xED;os de la ingesta de datos</h2><p>Despu&#xE9;s de decidirnos por Elasticsearch como la capa de almacenamiento de datos, tuvimos que determinar qu&#xE9; datos se ingestar&#xED;an y c&#xF3;mo lo har&#xED;amos. La informaci&#xF3;n estaba disponible en diversas fuentes. Sistemas de bases de datos locales, archivos que se colocan con frecuencia en dep&#xF3;sitos AWS S3, as&#xED; como de fuentes de datos API externas. Un ejemplo son los datos de <em>National Rail</em>, que cargamos en Elasticsearch usando las interfaces STOMP (protocolo de transmisi&#xF3;n de mensajer&#xED;a orientada a texto).
</p><p>Esto, en s&#xED;, present&#xF3; algunos desaf&#xED;os iniciales que tuvimos que superar:
</p><ul>
	<li>Los sondeos para obtener datos de las bases de datos deb&#xED;an hacerse con una frecuencia mayor a una vez por minuto.</li>
	<li>Los datos entrantes de STOMP se comprimieron con gzip.</li>
</ul><h3>Sondeo de bases de datos con una frecuencia mayor a una vez por minuto</h3><p>Solucionamos el primer problema con un parche simple para el plugin <a href="/guide/en/logstash/6.5/plugins-inputs-jdbc.html">logstash-input-jdbc</a> ya existente. Antes del parche, las tareas solo pod&#xED;an expresarse en formato cron. Se us&#xF3; un Programador de tareas conocido como rufus-scheduler, que admit&#xED;a el suministro de expresiones de programaci&#xF3;n como cron o como n&#xFA;mero de segundos. El &#xFA;nico cambio fue una sola l&#xED;nea de c&#xF3;digo para usar el m&#xE9;todo de repetici&#xF3;n en lugar de cron:
</p><div style="background-color: rgb(240, 240, 240); font-size: 16px; padding: 10px; word-break: break-word; white-space: pre-wrap; border-width: 0px 0px 0px 3px; border-style: none none none solid; border-top-color: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: rgb(57, 189, 177); border-radius: 0px; font-family: monospace, serif; box-sizing: border-box; overflow-wrap: break-word; width: 100%; display: inline-block; margin: 0px 0px 10px; overflow: auto; line-height: 1.42857;"><span style="color: #008;">if</span> <span style="color: #066;">@schedule</span>
<span style="color: #066;">  </span><span style="color: #066;">@scheduler</span> = <span style="color: #606;">Rufus</span>::<span style="color: #606;">Scheduler</span>.<span style="color: #008;">new</span>(:<span style="color: #000;">max_work_threads</span> =&gt; <span style="color: #066;">1</span>)
<span style="background-color: #ffcccc;"><span style="color: #066;">  @scheduler</span>.<span style="color: #000; background-color: #ff3333;">cron</span> <span style="color: #066;">@schedule</span> <span style="color: #008;">do</span></span>
<span style="background-color: #ccffcc;"><span style="color: #066;">  @scheduler</span>.<span style="color: #000; background-color: #33ff33;">repeat</span> <span style="color: #066;">@schedule</span> <span style="color: #008;">do</span></span>
<span style="color: #000;">    execute_query</span>(<span style="color: #000;">queue</span>)
<span style="color: #008;">  end</span>
</div><p>Para poder hacer uso de esto, nuestro <a href="https://github.com/crimsonmacaw/logstash-input-jdbc">parche est&#xE1; disponible en GitHub</a>.
</p><h3>Manejo de mensajes comprimidos con Gzip</h3><p>Para manejar los mensajes comprimidos que llegaban de las interfaces STOMP, tuvimos que descomprimirlos para filtrar los datos usando Logstash. Si bien existe un c&#xF3;dec para leer l&#xED;neas de datos de un mensaje comprimido con gzip, en nuestro caso de uso los mensajes descomprimidos con gzip eran XML multil&#xED;nea. Para superar esto, creamos nuestro propio plugin, <a href="https://github.com/crimsonmacaw/logstash-codec-gzip">logstash-codec-gzip</a>, que se encuentra disponible en GitHub.
</p><h2>Visualizaci&#xF3;n de datos usando Canvas</h2><p>Comenzamos a usar Kibana para visualizar los datos disponibles en Elasticsearch hospedados en Elastic Cloud, pero no pudimos lograr exactamente lo que quer&#xED;amos. Se sent&#xED;a como si se necesitara un nivel de control m&#xE1;s granular. Encontramos Canvas por casualidad, cuando el jefe de BI de Manchester Airport Group y yo est&#xE1;bamos en el&#xA0;AWS Summit en Londres en mayo de 2018. Conversamos con las personas del stand de Elastic, que nos hablaron de Canvas y de c&#xF3;mo pensaban que era la mejor opci&#xF3;n para lo que quer&#xED;amos lograr
</p><blockquote>&#x201C;Estamos teniendo dificultades al tratar de visualizar nuestros datos en Kibana, ya que no ofrece el control de bajo nivel que necesitamos&#x201D;.<br>
	&#x201C;&#xBF;Han o&#xED;do sobre Canvas?&#x201D;<br>
	&#x201C;No, &#xBF;qu&#xE9; es eso?&#x201D;<br>
	&#x201C;Es nuestra nueva herramienta de visualizaci&#xF3;n; est&#xE1; en vista previa de tecnolog&#xED;a por el momento pero, seg&#xFA;n lo que dicen, podr&#xED;a darles lo que necesitan&#x201D;.
</blockquote><h2>Instalaci&#xF3;n de Canvas y primeras impresiones</h2><p>Canvas estaba disponible como plugin de Kibana y se instal&#xF3; usando el proceso normal de agregar cualquier plugin de Kibana. Dado que Canvas no estaba disponible en Elastic Cloud durante la fase de vista previa de tecnolog&#xED;a, hospedamos a Kibana en el entorno de AWS de Manchester Airport Group, completamente en script, usando Terraform.
</p><p>Canvas tiene un buen lenguaje de expresi&#xF3;n simple para controlar c&#xF3;mo se visualiza cada elemento. Me recuerda a la programaci&#xF3;n shell donde la salida de un comando se canaliza a la siguiente, y las subexpresiones se logran declarando una expresi&#xF3;n entre corchetes.
</p><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt88fdd13e074ebbdb/5c3047b9c3c5fd7f678c15a5/airport1-upd.png" data-sys-asset-uid="blt88fdd13e074ebbdb" alt="" "="">
</p><figcaption>Nuestro primer intento en un Dashboard de Canvas para las llegadas de trenes (ver a continuaci&#xF3;n la versi&#xF3;n actual)</figcaption><p>Despu&#xE9;s de un par de d&#xED;as familiariz&#xE1;ndonos con Canvas, pudimos visualizar las llegadas de trenes al aeropuerto de Stansted. Este dashboard se cre&#xF3; usando el elemento Markdown para el texto, e Image Repeat para los iconos e im&#xE1;genes en el pie de p&#xE1;gina.
</p><p>Todo se ve&#xED;a muy bien y ten&#xED;amos el control de los elementos individuales, pero todav&#xED;a faltaba algo. Para nuestro caso de uso, necesit&#xE1;bamos m&#xE1;s control para lo siguiente:
</p><ul>
	<li>Brindar formato de marcas de tiempo con base en una zona horaria: los datos se almacenaban como UTC, pero con el tiempo necesario para ajustarse con base en el horario de verano.</li>
	<li>Cambiar el color del texto o las im&#xE1;genes seg&#xFA;n los umbrales conocidos.</li>
</ul><h2>Expandir Canvas</h2><p>Escribir plugins para Canvas es muy similar a escribir plugins para Kibana. Se escriben en NodeJS y utilizan registros que permiten agregar funciones adicionales e incluso nuevos elementos que se pueden seleccionar dentro de la UI de Canvas. Creamos 3 plugins para lograr el nivel de control necesario.
</p><h3>Uso de zonas horarias al formatear marcas de hora</h3><p>Este fue el primer plugin que escribimos, es una expansi&#xF3;n muy simple del <code>formatdate</code> incorporado:
</p><pre class="prettyprint">import moment from &apos;moment&apos;;
import &apos;moment-timezone/builds/moment-timezone-with-data&apos;;
export const formatdatetz = () =&gt; ({
  name: &apos;formatdatetz&apos;,
  type: &apos;string&apos;,
  help: &apos;Output a ms since epoch number as a formatted string according to a given timezone&apos;,
  context: {
    types: [&apos;number&apos;],
  },
  args: {
    _: {
      types: [&apos;string&apos;],
      help: &apos;MomentJS Format with which to bucket (Consulte https://momentjs.com/docs/#/displaying/)&apos;,
      required: true
    },
    timezone: {
      types: [&apos;string&apos;],
      help: &apos;The timezone&apos;,
      required: true,
      default: &apos;UTC&apos;
    }
  },
  fn: (context, args) =&gt; {
    if (!args._) return moment.utc(new Date(context)).tz(args.timezone).toISOString();
    return moment.utc(new Date(context)).tz(args.timezone).format(args._);
  },
});
</pre><p>El <a href="https://github.com/crimsonmacaw/nodejs-canvas-plugin-formatdatetz">plugin formatdatetz</a> est&#xE1; disponible en GitHub para que lo instales sobre Canvas. La instalaci&#xF3;n es tan simple como:
</p><pre class="prettyprint">./bin/kibana-plugin install https://github.com/crimsonmacaw/nodejs-canvas-plugin-formatdatetz/releases/download/v1.0.2/canvas-plugin-formatdatetz-1.0.2.zip
</pre><h3>Controlar el color del texto y de las im&#xE1;genes</h3><p>No pudimos usar Markdown para controlar el estilo de texto e im&#xE1;genes (aunque puedes proporcionar hojas de estilo en cascada con Canvas, la sintaxis de Markdown no es compatible con la configuraci&#xF3;n de atributos de clase HTML para el estilo que se aplicar&#xE1;).
</p><p>El enfoque m&#xE1;s simple fue que cre&#xE1;ramos un plugin que permitiera la codificaci&#xF3;n directa de HTML y, de una manera similar al elemento Markdown, permitiera expresiones entre llaves para el enlace de datos. Como las im&#xE1;genes SVG se pueden incrustar directamente en HTML, pudimos aplicar el mismo nivel de control para cambiar din&#xE1;micamente las im&#xE1;genes en funci&#xF3;n de los datos recuperados de Elasticsearch.
</p><h2>Crear las visualizaciones</h2><p>Una vez que tuvimos los complementos que quer&#xED;amos, fue posible tener el control para crear algo simple como una tabla con diferentes colores en las filas.
</p><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt46514fc853daa281/5c3047b7c599e169662410c4/airport2-upd.png" data-sys-asset-uid="blt46514fc853daa281" alt="" "="">
</p><figcaption>El primer intento de dise&#xF1;o para el dashboard de concentrador de red de seguridad basado en los dise&#xF1;os de pantalla del usuario (el dashboard actual para esto est&#xE1; abajo y se ve muy diferente)</figcaption><p>Las visualizaciones ahora empezaban a verse mejor, los datos se estaban rellenando en cada uno de los marcadores de posici&#xF3;n relevantes, pero la apariencia todav&#xED;a no se sent&#xED;a del todo bien y surgi&#xF3; una solicitud que lo reflejaba.
</p><blockquote>&quot;&#xBF;Podemos hacer que se vean m&#xE1;s atractivas?&quot;
</blockquote><p>Era hora de inspirarse en Internet: la b&#xFA;squeda de &#x201C;dashboard moderno&#x201D; en plataformas como <a href="https://www.pinterest.co.uk/">Pinterest</a> y <a href="https://dribbble.com/">Dribbble</a> proporcion&#xF3; algunos enfoques interesantes para dise&#xF1;ar un dashboard y se tom&#xF3; una direcci&#xF3;n diferente.
</p><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt1c7ff9864cbc8732/5c3047ab29d13af10bc2ab08/airport3-upd.jpg" data-sys-asset-uid="blt1c7ff9864cbc8732" alt="" "=""></p><figcaption>El dashboard del unificador de red de seguridad, de nuevo, es en la actualidad un tema oscuro, con el uso de indicadores y degradados de color (a&#xFA;n sin terminar, cambiar&#xE1;n m&#xE1;s)</figcaption><p>Se agregaron varios elementos a la pantalla, en su mayor&#xED;a usando el plugin HTML que hab&#xED;amos creado, que ten&#xED;a una mezcla de HTML simple y algunas im&#xE1;genes SVG complejas generadas din&#xE1;micamente.
</p><p>A pesar de que la respuesta inicial fue positiva, los usuarios que no hab&#xED;an sido parte del dise&#xF1;o no entendieron todas las m&#xE9;tricas sin una explicaci&#xF3;n.
</p><blockquote>&#x201C;&#xA1;Incre&#xED;ble! Eso se ve mucho mejor, pero &#xBF;qu&#xE9; significa la parte inferior de las barras?&#x201D;
</blockquote><p>Regresando al requisito original de que las operaciones de seguridad aeroportuaria puedan <strong>tomar decisiones r&#xE1;pidamente</strong>, significa que, aunque podr&#xED;as producir algo que pueda parecer impresionante, no siempre es la mejor manera de visualizar la informaci&#xF3;n. Los usuarios deber&#xED;an poder saber instant&#xE1;neamente lo que se muestra frente a ellos sin que se tenga que explicar el dashboard.
</p><h3>Un enfoque iterativo</h3><p>Habiendo adquirido dominio en el lenguaje de expresi&#xF3;n de Canvas, realizamos una serie de talleres con edici&#xF3;n en vivo de dashboards con los interesados en la sala. Estaba claro que hab&#xED;amos pasado del dise&#xF1;o de pantalla construido antes de que la gente hubiera visto la herramienta o basado en sus informes actuales a enfoques inspirados sobre la mejor manera de mostrar la informaci&#xF3;n en los dashboards. Las partes interesadas llevaron las &#xFA;ltimas versiones de los dashboards a los usuarios finales para obtener comentarios y los cambios se realizaron en funci&#xF3;n de los comentarios proporcionados.
</p><h2>Dashboards finales</h2><p>Los siguientes dashboards fueron el resultado de colaboraci&#xF3;n y pensamiento creativo.
</p><blockquote>&#x201C;Los dashboards que Crawson Macaw ha creado para nosotros usando Elasticsearch y Canvas le han dado al aeropuerto de Stansted una visualizaci&#xF3;n moderna en tiempo real de nuestros datos, los cuales anteriormente se guardaban en sistemas individuales. Esto ha creado una serie de eficiencias en nuestros procesos internos que antes no habr&#xED;an sido posibles&#x201D;. <em>Stuart Hutson, jefe de BI y Anal&#xED;ticas, Manchester Airport Group</em>
</blockquote><p>Ten en cuenta que los datos en todos los dashboards se han aleatorizado para fines de presentaci&#xF3;n. &#xA1;Creamos un&#xA0;<a href="https://github.com/crimsonmacaw/nodejs-canvas-plugin-randomise">plugin aleatorio</a> para que Canvas pueda hacer esto!
</p><h3>Concentrador de red de seguridad</h3><p>Este dashboard muestra el estado actual de la seguridad aeroportuaria, desde las personas que ingresan y salen del &#xE1;rea de seguridad aeroportuaria hasta las tasas de cumplimiento, as&#xED; como informaci&#xF3;n sobre las pistas individuales. La forma elegida para las pistas de seguridad refleja la disposici&#xF3;n f&#xED;sica dentro del &#xE1;rea de seguridad aeroportuaria, de modo que el personal de operaciones pueda relacionar inmediatamente el dashboard de instrumentos con una pista f&#xED;sica.
</p><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltd3bcb6c0c16af459/5c3047b6e71ce40c6e4ad94b/airport4-upd.gif" data-sys-asset-uid="bltd3bcb6c0c16af459" alt="" "="">
</p><h3>Contenedor de seguridad</h3><p>Este dashboard muestra informaci&#xF3;n de tendencias, permitiendo ver a las personas que ingresan al &#xE1;rea de seguridad aeroportuaria representadas en funci&#xF3;n de un pron&#xF3;stico previsto de los turnos de pasajeros y los tiempos de espera en la cola en diferentes &#xE1;reas.
</p><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt677696a197b04e17/5c3047b4682c4c4866a7981a/airport5-upd.gif" data-sys-asset-uid="blt677696a197b04e17" alt="" "="">
</p><h3>Salidas de vuelos</h3><p>Muy similar a un FIDS (pantalla de visualizaci&#xF3;n de informaci&#xF3;n de vuelo) normal, pero con el detalle adicional de hacer coincidir el porcentaje de pasajeros que han ingresado al &#xE1;rea de seguridad aeroportuaria con los pasajeros previstos para los pr&#xF3;ximos vuelos.
</p><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt0189f48e0b730f44/5c3047b229d13af10bc2ab0e/airport6-upd.gif" data-sys-asset-uid="blt0189f48e0b730f44" alt="" "="">
</p><h3>Legadas de tren</h3><p>Un gran porcentaje de pasajeros que llegan al aeropuerto de Stansted en tren y las demoras en sus viajes pueden tener un efecto significativo en el n&#xFA;mero de personas que llegan al &#xE1;rea de seguridad aeroportuaria. Un solo tren tendr&#xE1; cientos de viajeros y varios trenes pueden llegar en poco tiempo despu&#xE9;s de que se hayan resuelto los problemas.
</p><p>El dashboard no solo muestra una tabla t&#xED;pica de informaci&#xF3;n del tren, sino que tambi&#xE9;n muestra la hora de llegada del tren en una l&#xED;nea de tiempo. Se puede ver que esto ha cambiado significativamente desde la primera iteraci&#xF3;n cuando est&#xE1;bamos experimentando con Canvas.
</p><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltbf18813a83ba7dc7/5c3047afad674d236e764868/airport7-upd.jpg" data-sys-asset-uid="bltbf18813a83ba7dc7" alt="" "="">
</p><h2>Conclusi&#xF3;n</h2><p>Canvas es una herramienta brillante que permite una visualizaci&#xF3;n de datos muy impresionante en tiempo real. Aunque Canvas se encuentra actualmente en versi&#xF3;n beta y puede necesitar algunas caracter&#xED;sticas adicionales, tener la capacidad de expandir su funcionalidad principal con plugins se siente como el enfoque de Elastic en cuanto al software.
</p><p>Muchas herramientas de BI te limitan a gr&#xE1;ficos y tablas con un pu&#xF1;ado de medidores y otras visualizaciones est&#xE1;ndar. La simplicidad de crear dashboards con Canvas permite a los ingenieros de datos y especialistas en visualizaci&#xF3;n de datos la libertad de crear visualizaciones limitadas &#xFA;nicamente por su imaginaci&#xF3;n.
</p><hr><p><a href="https://www.linkedin.com/in/robertbruce1980">Robert Bruce</a> es socio fundador y director de Ingenier&#xED;a en <a href="https://www.crimsonmacaw.com/">Crimson Macaw</a>, una empresa de consultor&#xED;a de TI de la nube/datos con sede en Manchester, Reino Unido. Robert ha trabajado en la industria de la ingenier&#xED;a de datos e Internet durante m&#xE1;s de 20 a&#xF1;os y ahora trabaja en el espacio de la tecnolog&#xED;a de la nube.
</p></body></html>

Articles by Robert Bruce

Monitoreo de las operaciones de seguridad aeroportuaria con Canvas y Elasticsearch

Productos

Compañía

Resources

SaaS

Orquestación

Articles by Robert Bruce

Monitoreo de las operaciones de seguridad aeroportuaria con Canvas y Elasticsearch