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:
- Elasticsearch and Kibana already installed in your machine and have at least one sample dashboard
- Basic understanding of Elasticsearch and Kibana functionality.3.
- NGINX installed and default configuration setup and basic understanding of Nginx.
- VSCode (Visual Studio Code) or any editor of your choice for editing files.
Now Let’s get into actual work.
1. Setting up nginx for iframe content servicing
- You can copy full URL
<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>
- You can copy short URL. I will be using short URL for this demo.
<iframe src=”http://192.168.1.70:5601/goto/69e33de55f5b45514ad5770f6ec494c0?security_tenant=demo" height=”600" width=”800"></iframe>
- Include Options:
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 …
- Create directory “/dashboards/1” under Nginx default web directory. It is varied, Depending on your configuration and OS.
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
- Create “1.html” file under “/dashboards/1” directory and place below content.
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>
- Let’s modify nginx.conf file.
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;
}
}
- That’s it. We are done. Just restart or reload your nginx using “nginx -s reload”. Navigate to your http://localhost/dashboards/1. You will see authentication page for Kibana. Enter credentials. I will be using username admin and password admin. Boom… Now you see your existing Kibana dashboard embedded in your application webpage.
Sincerely,
Vinay
