Kibana-visualisering i React för visning av extern html-sida

I Kibana finns fina möjligheter till att skapa egna visualiseringsplugin exempelvis genom React-kod. I denna bloggpost publicerar jag ett litet visualiseringsplugin för Kibana som laddar ned en extern webbsida och visar den direkt i Kibana-gränssnittet. Detta kan exempelvis vara nyttigt då man vill se information från ett annat system i en Kibana-dashboard (se exempel i figuren nedan).

Projektet kan hittas här: https://github.com/jamesrep/yellowiframeviz

Filer i projektet:

• index.js – Anropas först av all visualiseringskod. Här läses alla konfigurationsalternativ in.
• ./server/routes/yellowvizroutes.js – Här specificeras alla routes. Routes används för att vi antar att endast Kibana når det bakomliggande systemet.
• ./public/yviz.js – Registrerar visualiseringskoden i Kibana. ./public/yellowviz_param_template.html – HTML-kod för parameter-inmatning för Kibana-visualiseringen.
• ./public/yellowviz_controller.js – Controller-koden för visualiseringen. Innehåller React-komponenten.
• ./server/routes/yellowvizroutes.js – Här specificeras alla routes. Routes används för att vi antar att endast Kibana når det bakomliggande systemet.
• ./public/yviz.js – Registrerar visualiseringskoden i Kibana.
• ./public/yellowviz_param_template.html – HTML-kod för parameter-inmatning för Kibana-visualiseringen.
• ./public/yellowviz_controller.js – Controller-koden för visualiseringen. Innehåller React-komponenten.

Kibana.yml:
Vi behöver göra några mindre inställningar i Kibana.yml för att få visualiseringen att fungera som vi vill. Nedan beskrivs möjliga inställningar.

Konfigurera CSP
Eftersom vi vill att kod ska kunna visas i en frame behöver vi lätta upp lite på Kibanas Content-Security-Policy.

csp.rules: 
 - "frame-src 'self'" 

Specificera den host där sidan ska hämtas ifrån.

yellowiframeviz.displayHost: "torstatus.blutmagie.de" 

specificerar path-delen av url:en som ska användas för api-anropet (som vi skapat en route för).

yellowiframeviz.displayPath: "/as-by-routers.php" 

Specificera vilka anrop mot displayHost-servern som kommer kunna routas genom Kibana.

yellowiframeviz.restArray: ["index.html", "main.css"] 

Specificera vilken port som ska användas.

yellowiframeviz.displayPort: 443 

Specificerar att HTTPS ska användas.

yellowiframeviz.useHttps: true

Tanken med visualiseringskoden är endast att kunna integrera med egna system. Därav är host-namnet hårt låst till vad som står specificerat i konfigurationsfilen. Det är dock enkelt att bygga om visualiseringen så att den kan anropa godtyckliga webbsidor. Det finns dock viss säkerhetsproblematik som följer med det förstås… så det blir kanske en annan bloggpost. All kod hittas här: https://github.com/jamesrep/yellowiframeviz