Kibana UI customization using a plugin

Elastic Stack Kibana
1

Hi,
We are working with Elastic search and Kibana (version 6.5.1).

We wanted to replace the Kibana logo with our company's logo, & were able to do that by overriding the css by introducing a custom css file this path:

/usr/share/kibana/optimize/bundles/{'Custom css file'}

And included the import to that inserted file in this js:

/usr/share/kibana/src/ui/ui_render/ui_render_mixin.js

const styleSheetPaths =
[
${bundlePath}/vendors.style.css,
${bundlePath}/commons.style.css,
${bundlePath}/{'Custom css file'}, //Made this change
${bundlePath}/${app.getId()}.style.css
].concat(kbnServer.uiExports.styleSheetPaths.map(path => ${basePath}/${path.publicPath}).reverse());

We were also able to replace the Kibana logo in the Throbber by modifying these files:
/usr/share/kibana/src/ui/ui_render/views/ui_app.pug
/usr/share/kibana/src/ui/ui_render/views/chrome.pug

And also were able to replace the Kibana favicons by our favicons by replacing them here.
/usr/share/kibana/src/ui/public/assets/favicons

My point is, I had to modify the code of many files to achieve this, so is there a cleaner way to do this "revamp" of Kibana UI using a plugin, so that maybe when we upgrade our Kibana version, the UI changes still persist?

2

Hello Ashish,

There is not an officially supported way to do these sorts of customizations yet. You may want to follow this issue though which I believe covers most of what you're looking for!

Regards,
Aaron

3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.