Add link for logo by 'ui/chrome'

Elastic Stack Kibana
1

how can I add add a link for brand logo by 'ui/chrome'

2

I'd say you have 2 options:

  1. Modify the source of kibana: global_nav.html You can add the link into the logo section there.
  2. Create a hack plugin that will sniff out the logo and addEventListener.

I'm looking to do something similar, currently I've changed a bunch of other things with kibana (colors.less for example) but I'm trying to migrate out of having changes directly in Kibana.
I'll be creating the hack to inject that event listener along with other styling changes and such. I'm sure there are limits and downsides to using a hack plugin vs modifying kibana itself.

The only downside I see so far is that I can't directly modify the loader screen, so that may stay in my kibana fork.

3
  1. The only downside I see so far is that I can't directly modify the loader screen, so that may stay in my kibana fork.

I modify the css in a pluin to hack the loader screen.

  1. Create a hack plugin that will sniff out the logo and addEventListener.

could you show me some code (add href for brand logo)?

4

Were you able to change the logo itself with the plugin? From what I saw the loader screen is literally written on the html page that then loads all other components of Kibana. I guess I just assumed the plugins weren't available until after the loading screen was done.

For sniffing out the logo you could have a hack plugin that does something like this:

document.querySelector('.logo').addEventListener('click', function() {
  window.location = 'http://www.google.com';
});

I've only proven this in the browser console, but I think you would know where to place it in a hack. I'm going to spend the next couple weeks exploring a "theme" plugin myself to see if I can get this and the loader styled without modifying Kibana itself.

5

I guess you have done many great hack on kibana, is that a public repo? maybe I can provide some commit

6

It's not public unfortunately.
The major changes I've made were to the colors.less file and a couple images. The rest of the changes were around the build steps to accommodate our annoying corporate proxy and our build pipeline.

Wreck.js has no plan to work with proxy settings, so I had to pull some serious shenanigans to get things to install properly.

7

what a pity. thx anymore

8

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