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

[Rakesh_Rayabarapu (Rakesh R)]

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

[matw (Matthias Wilhelm)]

Hi

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

Thx & Best,
Matthias

[Rakesh_Rayabarapu (Rakesh R)]

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.

[matw (Matthias Wilhelm)]

@Rakesh_Rayabarapu

failed to retrieve password hash for reserved user

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

Failed to retrieve password hash for reserved user [kibana]

I have to repurpose all the nodes in my cluster, during that process I accidentally deleted the _security index which is for built in user information. Now in the log it said failed to retrieve password hash for reserved user [kibana]. I don't have snapshot made, how do I restore or rebuild this index so I can get kibana up? thanks!

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

Best,
Matthias

[Rakesh_Rayabarapu (Rakesh R)]

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

[Rakesh_Rayabarapu (Rakesh R)]

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..

[matw (Matthias Wilhelm)]

Great!
Thanks for the feedback!
Best,
Matthias

[Rakesh_Rayabarapu (Rakesh R)]

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.

Could you please help..

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

Thanks in advance.

[matw (Matthias Wilhelm)]

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.

[Rakesh_Rayabarapu (Rakesh R)]

Thanks for the suggestion, Matthias..

I will try get in to source for this change.

Thanks once again.

[Rakesh_Rayabarapu (Rakesh R)]

Hello Matthias,

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

[matw (Matthias Wilhelm)]

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

[Rakesh_Rayabarapu (Rakesh R)]

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

[matw (Matthias Wilhelm)]

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

[Rakesh_Rayabarapu (Rakesh R)]

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