Custom UI Changes on local machine(server machine) is not reflecting on external IP

Elastic Stack Kibana
1

Hi Team,
I made custom logo changes in these files "template.js", security.chunk.4.js" and "core.entry.js" and generated the file (gz and br) with npx. [Steps from this post - Custom Logo Kibana 7.10.0 (guide)]

The logo changes are working fine when accessed directly on the server machine (http://localhost:5601), but the logo changes failed to reflect when tried to access externally from other machines (http://public-ip:5601).

Tried deleting cookies, browser data, temp, %temp%, incognito mode, other browsers (edge, mozilla) and from other machines (colleagues). I'm pretty much convinced that the issue is not on the client side, but not sure what else could be causing it.

Appreciate any help or leads on this issue.

Thanks in advance

2

Hi

What is the replacement you've used for your logo? given it's a different path, is it accessible externally?

Thx & Best,
Matthias

3

Hi Matthias..
Thanks for response..

Used base64 for logos and given custom text.

I found that, The changes are reflecting when accessed with the machine DNS name.

But, The changes are not reflecting when same instance is accessed with public IP.

new update:
I thought it will get fix once we restart the machine, But after restart, Elastic search is not getting started. throwing error like: failed to retrieve password hash for reserved user [elastic]

Could you please help me to fix this issue..

Thanks in advance.

4

So the error you're experiencing now it an Elasticsearch error, maybe here is some info about it?

When you access the instance externally, is the default logo displayed?

Best,
Matthias

5

Hi Matthias,

Elasticsearch error got fixed, thanks for suggestion.

But, default logo did not fixed fully with restart.

Logo get fixed for changes in "formate.js".
Failed for "Security.chunk.4.js" and "core.entry.js".

I mean logo not reflecting on login page and navbar.

thanks
Rakesh

6

Hello Matthias,

Here is the new update on UI Changes (logo) with external (public IP).

after shutdown and restarting server machine, new public IP has generated and UI changes are reflecting fine on New Public IP.

Thanks for support and response.

Good Bye..

1 Like
7

Great!
Thanks for the feedback!
Best,
Matthias

8

Thanks Matthias,

I have one more concern in login page.

I need the welcome text to be spilt into two lines, the first line with same font size, but second line to be with small in font size.

image
image712×483 23.5 KB

Could you please help..

we trying the changes in Security.chunk.4.js file. for ref I'm adding screen shot of script.

image
image1256×313 52.1 KB

Thanks in advance.

9

Well this would be a very complex change working on the build version, you might think of checking out Kibana from source, make those changes, start you own build for that.

10

Thanks for the suggestion, Matthias.. :slight_smile:

I will try get in to source for this change.

Thanks once again.

1 Like
11

Hello Matthias,

could you please share location of source code for the above changes.

12

You could search for 'xpack.security.loginPage.welcomeTitle' in the code, that should give you the location
best,
Matthias

13

Hello Matthias,

I found this code in security.chunk.4.js. related to "xpack.security.loginPage.welcomeTitle".

external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_ElasticEui_["EuiTitle"],{size:"m",className:"loginWelcome__title"},external_kbnSharedDeps_React_default.a.createElement("h1",null,external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_KbnI18nReact_["FormattedMessage"],{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"Welcome to Device Name Performance Monitoring Tool"}))),

What we would like to get is "defaultMessage:"Welcome to Device Name Performance Monitoring Tool"" need spilt into two lines after Device Name, that is text "Performance Monitoring Tool" should come in next line with small font size.

Thanks,
Rakesh

14

Hi
You still work on the compiled code, you'd need to have a look at the source code
Theoretically, if you still would like to hack on the compiled one, you could duplicate the function creating the element, and change the text.
Best,
Matthias

15

New Update on Rendering UI changes without changing IP.

Steps:

  1. Open Page that need UI Changes in chrome browser
  2. F12 (This Opens Developer Tool Tab)
  3. Select Network tab.
  4. Check the Disable Cache option.
  5. Refresh the URL that needs Update UI changes.
  6. Uncheck the Disable Cache Option if you want to cache (Optional Step)

Thanks,
Rakesh R

16

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