Kibana HTML page additional elements - customization of home page

[Potter_Ginny]

Hello people,

Does anyone know what exact directory or folder path is Kibana home page's HTML file located?? Is it also possible for me to insert some code there if I want to add more elements like modal/ footer/header or even just text? Version 7.1.1 is what I'm using.

Pls. help out. Thanks all!

[azasypkin]

Hi @Potter_Ginny,

I think for 7.1.1 this stuff is located here.

I know you can write a plugin that extends this screen, but not sure to what extent. Try dig here. In newer versions of Kibana it should be even more customizable I believe.

Best,
Oleg

[Potter_Ginny]

Hi there @azasypkin,

Thanks for providing the location/path. Just a few more questions, how will the implementation be in that js file? I was expecting the actual HTML file where I can insert the following code.

<div id="someID" data-widgetid="some Id Number" data-appid="some Id Num" ></div>
<link rel="stylesheet" href="some link for the css">
<script src="some link for the js"></script>

Do you think it's possible?
Those 3 lines are all I need to input in Kibana so that a footer can be shown. This footer will just contain some text and hyperlinks such as terms of use and privacy policy. It's already created and has been used in other customized web apps in our team. It's just a bit more challenging in this aspect since Kibana is a vendor application yet we also need to insert our organization's standard footer.

I hope this clears up my inquiry more. Thanks so much!

[azasypkin]

@Potter_Ginny

I was expecting the actual HTML file where I can insert the following code.

Yeah, it's a JSX, shouldn't be too different from HTML in such a simple case. But note that you can import external resources because of default CSP settings. You'll need to host them with Kibana or relax CSP (not recommended obviously).

It's just a bit more challenging in this aspect since Kibana is a vendor application yet we also need to insert our organization's standard footer.

Yeah, that's unfortunate, we know that and want to fix in the scope of this issue. For the time being you also have two options (not ideal though since they are tailored for other use cases):

• Login assistance message (Kibana 7.6+)
• Access notice (presumably Kibana 7.8+)

Best,
Oleg

[Potter_Ginny]

Hello Oleg/ @azasypkin,

Thanks for the clarification and suggestions. I've been trying to look for alternative ways on how am I going to implement it.
Recently, I've stumbled upon the Elastic UI Framework and am currently thinking that I may put the details in the header instead since this is existing in Kibana.

If possible, there would just be an additional icon on the right and upon clicking, there would be a popover/ modal that will be displayed where I can put my text and hyperlinks. And since the header is fixed on top and can be seen in every page of Kibana, I would just like to include another icon button on it which will trigger a modal to be opened/displayed.

Do you know what exact js file is needed to update the existing header? And on what file do we render the React element (if needed)?

Again, thanks for addressing our concerns!