Cómo crear una interfaz de usuario de seguridad personalizada con widgets de Turbine e IA

Cómo crear una interfaz de usuario de seguridad personalizada con widgets de Turbine e IA

Los equipos de seguridad rara vez carecen de datos. Lo que les falta es la forma correcta de visualizarlos. El panel de control que casi muestra lo que necesita un jefe de turno. El diseño del caso que obliga a un analista a abrir cuatro pestañas para reconstruir una sola alerta. Las pantallas preconfiguradas te acercan a la solución, pero ahí se acaba todo.

Los widgets de Turbine cubren la última etapa. Un widget es un pequeño componente de interfaz personalizado que se crea e integra en Swimlane Turbine, ya sea en un registro de aplicación o en un panel de control, para que la plataforma muestre exactamente lo que su centro de operaciones de seguridad (SOC) necesita, de la forma que lo necesita. Esta guía explica qué son los widgets, dónde se ejecutan, algunos ejemplos útiles y las tres maneras de crearlos, desde una sola línea de código hasta una simple solicitud en lenguaje natural.

¿Tienes poco tiempo? El siguiente video explica lo mismo en pocos minutos.

¿Qué es un widget de turbina?

Un widget de Turbine es un componente web personalizado que se renderiza dentro de Swimlane Turbine y puede leer, mostrar y actualizar tus datos. Los widgets se crean con Lit, una biblioteca ligera de componentes web, y extienden una clase base llamada SwimlaneElement. Esta clase base actúa como puente hacia la plataforma: recibe los datos del registro o informe actual, expone el contexto de la sesión y permite que el widget llame a cualquier API de Turbine sin necesidad de gestionar tokens ni autenticación. Si has trabajado con HTML, CSS y JavaScript, el modelo te resultará familiar.

La recompensa es mayor de lo que parece. En lugar de aceptar las pantallas con las que viene Turbine, puedes ampliar la interfaz y mostrar a tus analistas cualquier vista que puedas describir.

Los widgets se renderizan dentro de Turbine. Aquí se muestra uno sobre un diseño de registro.

Widgets de registro frente a widgets de informe

Los widgets se muestran en dos lugares, y la ubicación determina qué datos pueden ver.

• Widgets de registro Se ubican sobre un diseño de registro, un caso o una alerta, y trabajan con los campos de ese registro en particular. Son ideales para indicadores de puntuación de riesgo, cronogramas de eventos, indicadores de estado o una vista consolidada de una alerta.
• Widgets de informes Se ubican en un panel de control y leen datos agregados de una consulta de informe, lo que los hace ideales para métricas, gráficos, monitores de estado y resúmenes multiusuario.

El mismo marco, dos ámbitos de aplicación: los datos de un solo registro o los datos de varios.

Los widgets de registro leen un solo registro. Los widgets de informe leen varios.

Los 3 mejores Ejemplos de widgets de turbina que vale la pena tomar prestados

El catálogo incluye más de cien widgets, cada uno con su código fuente completo, por lo que la forma más rápida de aprender los patrones es empezar por uno. Tres de los que usamos con frecuencia son:

#1 Widget de calculadora de ROI 

El widget Calculadora de ROI es un widget de informes que convierte la ejecución de playbooks, acciones y el uso de Hero AI en ahorros de tiempo y costes. Responde a la pregunta que todo líder de SOC recibe tarde o temprano de la empresa: ¿qué retorno de inversión se obtiene?

Calculadora de ROI: tiempo y coste ahorrados, por plan de acción, acción y aviso de IA del héroe.

Resumen del caso #2

El widget de resumen del caso funciona a nivel de registro. Recopila una alerta en un solo panel en lugar de en media docena de pestañas.

Resumen del caso: una alerta y todo lo relacionado con ella en una sola vista.

Widget de mapa de calor #3 MITRE ATT&CK

Este widget de informes mapea el volumen de alertas en la matriz MITRE ATT&CK. Como puede verse en la imagen inferior, el color muestra dónde se agrupan las detecciones y, lo que es más útil, dónde se encuentran las brechas. Suele ocupar un lugar permanente en la pantalla del panel de control del centro de operaciones de seguridad (SOC).

Mapa de calor de MITRE ATT&CK: dónde se agrupan las detecciones y dónde se encuentran las brechas.

Tres maneras de construir un widget de turbina

La forma de crear un widget depende de la cantidad de código que quieras modificar. Las tres opciones comparten el mismo editor y la misma biblioteca de componentes, swim-ui, lo que garantiza que todo lo que crees tenga una apariencia nativa de Turbine.

1.    Importar desde la red de distribución de contenido. Muchos widgets están alojados en la CDN de Swimlane y listos para usar. Simplemente pega una línea de importación en el editor de widgets, guarda y se mostrará. Si buscas estabilidad, puedes fijar una versión. No se requieren conocimientos de frameworks.

2.    Construir desde cero. Abre el editor de widgets y escribe tú mismo el código Lit: extiende SwimlaneElement, incorpora swim-ui y define tu método de renderizado. Este método te brinda control total y es la mejor manera de aprender el framework. El sitio de documentación en swimlane.github.io/custom-Widgets contiene la referencia de la API, la biblioteca de componentes y el código fuente de todo el catálogo. swimlane.github.io/custom-Widgets 

3. Construye con IA de héroe. Abra el editor de widgets y elija “Construir con IA de héroe”. Describe lo que quieres en lenguaje sencillo y Hero entra. Modo de creación de widgets, Genera el código del widget en la pestaña de código y muestra una vista previa en tiempo real. Revísalo, haz clic en Aplicar y se añadirá al diseño. Puedes seguir realizando ajustes en la misma sesión, y Hero te hará preguntas aclaratorias cuando necesite más detalles. Hero AI debe estar habilitado en tu cuenta.

Crea con Hero AI: describe el widget, previsualiza el código generado y haz clic en Aplicar.

Preguntas frecuentes

¿Qué es un widget de turbina?

Un componente web personalizado que se ejecuta dentro de Swimlane Turbine y puede leer, mostrar y actualizar sus datos. Los widgets amplían la interfaz de usuario de la plataforma en los diseños de registros y paneles utilizando el marco Lit y la clase base Swimlane Element.

¿Dónde se ejecutan los widgets de turbina?

En dos lugares. Los widgets de registro se ejecutan en un diseño de registro y trabajan con los campos de un solo registro. Los widgets de informe se ejecutan en un panel y leen datos agregados de una consulta de informe.

¿Necesito saber programar para construir uno?

No necesariamente. Puedes importar un widget predefinido desde la CDN con una sola línea de código, o describirle a Hero AI lo que necesitas para que genere el código. Programar desde cero es opcional y te brinda el máximo control.

¿Puede Hero AI crear un widget para mí?

Sí. En el editor de widgets, selecciona «Crear con Hero AI», describe el widget en lenguaje natural y Hero generará el código para que puedas previsualizarlo y aplicarlo. Hero AI debe estar habilitado en tu cuenta.

¿Cuántos widgets hay disponibles?

El catálogo incluye más de cien widgets, cada uno publicado con su código fuente completo que puedes estudiar y adaptar a tu entorno.

¿Listo para empezar a crear tus propios widgets?

Elige la vista que tu equipo desea y créala, ya sea importándola de la CDN, programándola desde cero o describiéndosela a Hero AI. Luego, compártela: publica tu widget en LinkedIn y etiqueta a Swimlane. Si cumple con nuestras expectativas, te enviaremos una muestra.