Also if you temporarily remove .gz and .br files Kibana should serve you original non-compressed JS file - just to reduce a number of "variables" while you're debugging.
I have created and shared a guide, showing the steps for customizing the Kibana UI components, that I have been able to apply thus far. I was able to customize the Login logo just the way I was looking for. Now I will deal with the top left header logo.
Well, I haven't try with SVG files, but perhaps what you need to do is to reduce the size of the source image file. This will generate a smaller SVG file.
I also had the recursive error, but I was generating a base64 file from an original image that was 721x689px. I recommend to use a source image with size between 90px and 100x, but can try a different size. Just try to reduce the source image.
And for the text do the following:
Open file $ sudo nano /usr/share/kibana/x-pack/plugins/security/target/public/4.plugin.js
Search for the welcome text and replace it with your own {id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"Welcome to Elastic"} Result: {id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"custom_text"}
Save changes to JavaScript file and generate the compressed files. Update files permissions. Then restart Kibana. $ npx gzip-cli /usr/share/kibana/x-pack/plugins/security/target/public/4.plugin.js -e=gz -e=br
I am very glad to let you know that thanks to your help, I was able to successfully customize the login logo and the navbar logo. Also shared the steps so other users in need may benefit from it.
Would you help me to do the same with the Space Selector and the Exit Full Screen logos?
If your logo is not too big, just change the size option of the object and you don't have to remove any frame. You can choose any of these: s, m, l, xl, xxl and original {type:"logoElastic",size:"xxl"}
If your logo does not fit in the frame, it will move out and won't look good. To prevent that from happening and you can also set a custom size beyond the options above, you need to remove the logo frame object from the code and leave only the logo object.
Remove this block: ,external_kbnSharedDeps_React_default.a.createElement("span",{className:"loginWelcome__logo"},
and the last parenthesis from here: … {type:"logoElastic",size:"xxl"})),…
Once done, you can use size:"original” and the logo will take the same size of the source image where the SVG or base64 came from.
Spaces Selector: "logoElastic" near/before xpack.spaces.spaceSelector.selectSpacesTitle string in ..../kibana-7.9.2-linux-x86_64/x-pack/plugins/spaces/target/public/1.plugin.js
Exit Full Screen: "logoElastic" near/before kibana-react.exitFullScreenButton string in ..../kibana-7.9.2-linux-x86_64/src/plugins/kibana_react/target/public/kibanaReact.plugin.js (there is a chance you'll need to update this one in other files, but the idea is the same).
Hmm, this recursive error is weird, it'd be great if anyone can investigate that. But can't you just put your SVG file to, let's say, ..../kibana-7.9.2-linux-x86_64/src/core/server/core_app/assets/my_svg.svg and reference it from the bundle like type:"/ui/my_svg.svg?
Apache, Apache Lucene, Apache Hadoop, Hadoop, HDFS and the yellow elephant
logo are trademarks of the
Apache Software Foundation
in the United States and/or other countries.