Custom logos for Kibana 7.8.1

Elastic Stack Kibana
1

Hi,

I recently moved to ELK stack 7.8.1. It was hard for me to customize previous version 6.8.9, but after make a cocktail of workarounds, I was finally able to add own logo, colors and texts.

There is an old thread to implement an official and easy way that would allow users to customize Kibana web UI, but I don't see much activity here: https://github.com/elastic/kibana/issues/17879. Unsure if this is a dead project or it's still being developed.

I am not against editing CSS files if there is not official feature to customize Kibana yet, but after reading and trying a lot of new workarounds, I am not making much progress on finding the right files to edit Kibana 7.8.1.

Could somebody please at least provide a list of the files that we need to edit this time?

Targets:

  • Loading logo
  • Login logo
  • Top left logo (on top of the side menu)
  • Full screen logo

Thank you

2

I tried changing the code but nothing works.
After so many tries I finally got the solution.

Checkout the code from the GitHub, make changes in the source typescript files, build from source.

You will get the changes applied, in developer mode you can see them live.
You can change the loading text too.

I managed to change the login page, the loader icon and the logos on top left.

3

For the client side changes (everything with public as part of the path), you need to rebuild Kibana https://www.elastic.co/guide/en/kibana/master/building-kibana.html.

4

@vivek.1011 and @flash1293,

I appreciate your help and the time dedicated to helping me and others that may use your advise. I'll be trying both ways and share the feedback later.

Thank you

5

Hi @flash1293,

I tried to change just the Login logo for a quick test. Once I edited the code in /usr/share/kibana/x-pack/plugins/security/public/authentication/login/login_page.js and removed the "optimize" folder and restarted Kibana service, the app won't start. Later I realize that I had to empty the "optimize" folder rather than delete it, then restarted Kibana. Service started normally and files started to show up on the folder, but Login icon was not changed.

Am I doing something wrong or missing something?

Thank you

6

Would it work if I edit file /usr/share/kibana/x-pack/plugins/security/public/authentication/login/__snapshots__/login_page.test.tsx.snap, line 270 - 273 and then restart Kibana, or there is no other way other that re-compile Kibana from source code?

<EuiIcon
size="xxl"
type="logoElastic"
/>
7

How did you edit the code (what exact changes)? The snapshot files are not related to this.

8

I have tried a few things, like changing the type of content or the element to be generated in /usr/share/kibana/x-pack/plugins/security/public/authentication/login/login_page.js, specifically the portion of code below:

},  /*#__PURE__*/__react.default.createElement(_eui.EuiIcon, {
  type: "logoElastic",
  size: "l"

I have even removed the above code, stopped Kibana, removed "optimize" folder, started Kibana, cleared cache and local data on my browser and tried different browsers, but nothing have changed. It's almost like the server is not reading from that file.

Also I was messing a little bit with this file: /usr/share/kibana/node_modules/@elastic/eui/lib/components/icon/assets/logo_elastic.js, but again, nothing changed. Browser keep showing exactly the same logo.

If I use the browser dev tools, I see the css file involved in this page is located at http://host:5601/32141/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.light.css. If I apply any change while in browser dev mode, I can see the new result, but I have not been able to locate folder "32141" on the system files, so I did a search and found /usr/share/kibana/node_modules/@kbn/ui-shared-deps/target/kbn-ui-shared-deps.light.css, but again, any change I make it won't be reflected later in browser :worried: .

I am sure that I am missing something or doing something wrong, but I can't find what it is...

Thank you

9

Hi @flash1293,

I have been editing file /usr/share/kibana/x-pack/plugins/security/public/authentication/login/login_page.js in so many ways that I ran out of ideas. Also changed other files .css and/or .js that were mentioned in a dozen of tutorials or forums, and yet the Login logo stays the same. No change at all. That's why (I might be wrong :sweat_smile:) I tend to think that Kibana is not reading from that file.

My mind is about to explode... :crazy_face:

10

I tried this exactly before, changing the js files in default distribution and cleaning the optimize folder, the changes don't apply. That is why I went with building from source.

11

In default distribution, i tried changing the code in the target folder too, a file something named 6.plugin.js is generated, but changing that won't help either.

I was only able to change the loading screen by changing the files in the default distribution, the file template.js located in /src/server/rendering/views/

You can also change loading text.

For others I guess you will have to build from source.

1 Like
12

Hi @ManuelF,
maybe you can try this plugin.

13

I checked that and you are right - this behavior changed recently. Plugins in the new setup (like the security plugin containing the login page) are not using the optimize folder anymore and won't be rebuilt automatically. In earlier versions most of the client side code is built using the optimize folder, so this workaround will work. The right way in recent versions is to check out the Kibana source (in your case branch 7.8), do your changes and then build a new distributable from scratch as described here: Building a Kibana distributable | Kibana Guide [master] | Elastic

cc @ManuelF

14

Hi @vivek.1011,

Thank you for your comments. So far that's all I have been able to change, the loading logo and text.

I also tried modifying file 6.plugin.js without success...

15

Hi @chbas,

Thank you for your comments. I'll take a look at that plugin and give it a try. Would this work with current version 7.8.1 ?

Update
I tried the plugin and followed all steps. Nothing changed. All logos remain the same. Loading logo and text are the only I could change so far by editing files under src/core/server/rendering/views/.

Deleting folder /usr/share/kibana/optimize does seems to make any difference as @flash1293 explained:

... this behavior changed recently. Plugins in the new setup (like the security plugin containing the login page) are not using the optimize folder anymore and won't be rebuilt automatically. In earlier versions most of the client side code is built using the optimize folder, so this workaround will work.

Perhaps a new version of this plugin will work with current version 7.8.1

Thank you

16

Hi @flash1293,

I was trying to avoid recompiling Kibana from source, as it might introduce errors, but it seems that there is no other solution, unless the plugin suggested by @chbas works or the official KIbana project is finished (hopefully soon).

Any other solution that I could try?

Thank you

17

Hi @vivek.1011,

I am using SELKS 6, which integrates ELK 7.8.1. I have never compiled Kibana before (nor any other ELK component). I am afraid to venture to compile Kibana and that due to my lack of knowledge and little experience, I could leave Kibana inoperative.

Would you kindly please share the steps or a guide that allows me to modify Kibana and recompile it?

Thank you in advance

18

Follow instructions on this page.

Checkout source, setup node, install yarn, bootstrap Kibana, run es, run Kibana, make live changes, build Kibana :+1:

19

I'll try this later. Thank you

20

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