Customizing Kibana Web Application

Published in

Gradiant Talks

4 min readMar 16, 2018

Update III:
Added upport to kibana and kibana-oss from 7.0.x to 7.6.x.

Update II:
github repo to build a customized kibana docker image now supporting 7.0.x kibana versions:
https://github.com/Gradiant/dockerized-kibana
You can inspect the Dockerfile to get more details about the new changes.

Update:
github repo to build a customized kibana docker image now supporting 6.0.x to 6.5.x kibana versions:
https://github.com/Gradiant/dockerized-kibana

The ELK Stack ( Elasticsearch, Logstash, Kibana) is part of our Data Analysis toolset. We make an extensive use of Kibana to explore, discover and visualize data. Kibana has also become a good option to share our findings and analytical results with others. However, we would like to give it a customized look&feel, so people identify the exposed dashboard with our brand.

We have made some minor changes to Kibana code to fulfill the following requirements:

Custom logo and colors in the sidebar.
Custom title for kibana html pages.
Custom throbber.
Custom favicons.
Custom Kibana docker image.

We have successfully modified Kibana 5 (5.5.2) and Kibana 6 (6.1.3) following the instructions shown below. The code can be found in this github repo.

Custom logo an colors in the sidebar

Kibana references its stylesheets in the jade file kibana/src/ui/views/ui_app.jade. Jade is a clean, whitespace sensitive syntax for writing html. ui_app.jade template is the base of kibana’s html pages and stores the link to the main kibana css (commons.style.css) in the var files:

var files = [
 bundleFile(‘commons.style.css’),
 bundleFile(‘#{app.id}.style.css’),
 bundleFile(‘commons.bundle.js’),
 bundleFile(‘#{app.id}.bundle.js’)
 ];

We introduce here our own css, just after the commons.style.css:

var files = [
 bundleFile(‘commons.style.css’),
 bundleFile(‘gradiant_style.style.css’),
 bundleFile(‘#{app.id}.style.css’),
 bundleFile(‘commons.bundle.js’),
 bundleFile(‘#{app.id}.bundle.js’)
 ];

Now we need to include our stylesheet in the kibana/optimize/bundles/ path. We can just copy the file in the path, however, whenever kibana needs to optimize and cache its bundles (this happens every time a new plugin is installed, a file on kibana/src path is modified, or certain configurations are changed such as server.basePath), the file will be lost, since it does not come from a kibana source file or from a plugin. To solve this, we have implemented our own kibana plugin. Theplugin contains the following files:

We have defined the plugin as a kibana app, but with the hidden field so that it does not appear as an item in the navigation sidebar. The index.js of the public folder simply imports the main.less file where our custom style lives.

As Kibana does, we have defined the style sheet through a Less file. Less (sometimes stylized as LESS) is a dynamic style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or on the server side. For our custom style we have decided to overwrite the following kibana style properties:

// background color of sidebar
.global-nav {
 background-color: #eb2026;
}
// background color of sidebar selected/hover items
.global-nav-link.active,.global-nav-link:hover 
{
 background-color:#000000
}
// background color and logo of sidebar
.global-nav .logo-small.kibana,.global-nav .logo.kibana
{
 background-color:#ffffff;
 background-size: 150px 50px;
 background-image: url(“data:image/svg+xml;base64,encodedSVGlogo)
}

To add a custom logo you must replace encodedSVGlogo with your logo in svg format and encoded in base64. In Linux OS, you can obtain the base64 encoded string of a file with a simple command:

$ base64 logo.svg

Otherwise, the svg format is a vector format, so the logo can be opened in any text editor to copy its content to one of the multiple websites offering base64 online encoding and decoding.

Custom title for kibana html pages

The title of the Kibana website can be found in the file kibana/src/ui/views/chrome.jade. Just modify the line title Kibana with title YourTitleHere.

Custom throbber

The throbber is the animation that appears on the Kibana page while it does not load all its components. The throbber logo is embedded in .kibanaWelcomeLogo block in file kibana/src/ui/views/ui_app.jade and/or /usr/share/kibana/src/ui/views/chrome.jade.

The message provided by the throbber (Loading Kibana)is the file kibana /src/core_plugins/kibana/ translations/en.json.

Custom favicons

Finally, Kibana’s web favicons can be found on kibana/src/ui/public/assets/favicons path . We have also replaced them by the corresponding ones of gradiant.

Custom Kibana docker image

A custom docker image has also been created that includes all the changes described above. To generate the image we need the kibana plugin (gradiant-style.zip), the custom favicons and a Dockerfile.

FROM docker.elastic.co/kibana/kibana-oss:6.1.3MAINTAINER cgiraldo@gradiant.org
COPY favicons/* /usr/share/kibana/src/ui/public/assets/favicons/
RUN sed -i 's/Kibana/Gradiant-Analytics/g' /usr/share/kibana/src/core_plugins/kibana/translations/en.json
RUN sed -i 's/svg+xml;base64,.*");/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnDQogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iDQogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIg0KICAgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIg0KICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiAgIHZlcnNpb249IjEuMSINCiAgIGlkPSJzdmcyIg0KICAgdmlld0JveD0iMCAwIDE1NC4wMyAyMDAuMTEiPg0KICA8bWV0YWRhdGENCiAgICAgaWQ9Im1ldGFkYXRhMzAiPg0KICAgIDxyZGY6UkRGPg0KICAgICAgPGNjOldvcmsNCiAgICAgICAgIHJkZjphYm91dD0iIj4NCiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+DQogICAgICAgIDxkYzp0eXBlDQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+DQogICAgICAgIDxkYzp0aXRsZT5Mb2dvLUtpYmFuYUljb248L2RjOnRpdGxlPg0KICAgICAgPC9jYzpXb3JrPg0KICAgIDwvcmRmOlJERj4NCiAgPC9tZXRhZGF0YT4NCiAgPGRlZnMNCiAgICAgaWQ9ImRlZnMyOCIgLz4NCiAgPHRpdGxlDQogICAgIGlkPSJ0aXRsZTQiPkxvZ28tS2liYW5hSWNvbjwvdGl0bGU+DQogIDxwYXRoDQogICAgIHN0eWxlPSJmaWxsOiNlYjIwMjY7ZmlsbC1vcGFjaXR5OjE7b3BhY2l0eTowLjUiDQogICAgIGlkPSJwYXRoOSINCiAgICAgZD0iTSAxNTMuNDM2MjYsMTIyLjYwNzA4IEMgMTMwLjY0NjgsMTA3Ljc1Mjk2IDkwLjQwNTEzMSwxMzYuOTUyODcgNzcuMDE5NDgxLDE0NS41NjU5OSA1NC41OTcxMTgsMTU5Ljk5NjQ5IDE4LjYxOTcwMiwxNzAuNTI5OTMgMC4wMzc5MzMxMiwxNDcuOTA5OTIgMzAuNDgwMzc4LDE1MC4yNTM4IDMwLjgxOTI2MSwxMTMuMTc1MDEgMzAuMjI2MjE1LDkyLjYxNjQ3MyBjIC0wLjczNDIzMywtMjUuNDE1NzY0IDIuODI0LC00OC4xNzcwMSAyMy40MTA3NiwtNjQuNjY5MDM2IC0xLjU1MzE4OCwxMC42NDYzNjkgLTMuNjQyOTE2LDIwLjg0MDkyMSA2LjI5NzQ3NCwzMi41MzIxOTUgOC40NzE5MjIsOS44ODM5MjIgMjEuNzE2MzgzLDE1LjI3NzcyIDM0LjAyODg3NywxOC4zMjc1OSAyNC41Njg2MDQsNi4wNDMzMTIgNTEuMTk4NzA0LDE2LjY4OTY3NyA1OS40NzI5MzQsNDMuNzk5ODU4Ig0KICAgICBjbGFzcz0iY2xzLTEiIC8+DQo8L3N2Zz4=");/g' /usr/share/kibana/src/ui/views/ui_app.jade
# HTML title information
RUN sed -i 's/title Kibana/title Grad-mgda/g' /usr/share/kibana/src/ui/views/chrome.jade
RUN sed -i "s/bundleFile('commons.style.css')/bundleFile('commons.style.css'),bundleFile('gradiant_style.style.css')/g" /usr/share/kibana/src/ui/views/ui_app.jade
COPY gradiant_style.zip /tmp/gradiant_style.zip
RUN bin/kibana-plugin install file:///tmp/gradiant_style.zip