Embedded Dashboards — Kibana iframe

In this article I will be showing you how to integrate Kibana dashboards into your existing application using iframe. For the demo purposes I will be using already setup Elasticsearch, Kibana and Nginx server for serving the contents of demo website

.

Prerequisites:

https://code.visualstudio.com

https://atom.io

Now Let’s get into actual work.

1. Setting up nginx for iframe content servicing

<iframe src=”http://192.168.1.70:5601/app/dashboards?security_tenant=demo#/view/722b74f0-b882-11e8-a6d9-e546fe2bba5f?embed=true&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!f%2Cvalue%3A900000)%2Ctime%3A(from%3Anow-7d%2Cto%3Anow))" height=”600" width=”800"></iframe>

<iframe src=”http://192.168.1.70:5601/goto/69e33de55f5b45514ad5770f6ec494c0?security_tenant=demo" height=”600" width=”800"></iframe>

Depending on your Kibana version you will have different options to include in the URL while copying iframe code. I will choose filter bar for this demo.

2. Setting up Nginx for iframe content servicing

Note: Please make sure your Nginx is up and running. If you configure default port 80 via http for listening, you can access Nginx http://localhost You should be seeing some welcome page or whatever page you configured for/ directive in Nginx conf

You can use any text editor for this work. I will use VSCode.

Now let’s get back to our work …

Example: /usr/share/nginx/html — RHEL

/usr/local/var/www — Mac OS home brew install

In my case full path /usr/local/var/www/dashboards/1

Please make sure you replace below iframe code with your iframe code copied in step 1 and replace in your iframe code, Kibana host (including port if you have one) with localhost. We will be creating Nginx reverse proxy.

Example: in my case URL http://192.168.1.70:5601/goto/69e33de55f5b45514ad5770f6ec494c0?security_tenant=demo

becomes http://localhost/goto/8d73da799a84c179ee56534b55843fee?security_tenant=demo

1.html File Contents:

<!DOCTYPE html>

<html>

<head>

<title>Welcome to embedded dashboard !</title>

</head>

<body>

<iframe src=”http://localhost/goto/8d73da799a84c179ee56534b55843fee?security_tenant=demo" height=”600" width=”800"></iframe>

</body>

</html>

I will be using default conf file under /usr/local/etc/nginx/nginx.conf.

proxy_pass is the value of your Kibana instance

server {

listen 80;

server_name localhost;

access_log /Users/vinay/work/logs/nginx/access.log json-log;

location /dashboards/1 {

root /usr/local/var/www;

index 1.html 1.htm;

}

location / {

proxy_pass http://192.168.1.70:5601;

}

}

Sincerely,

Vinay

Principal Software Engineer, DIY Enthusiast