How to customize Kibana UI and add content using HTML

Potter_Ginny · April 15, 2020, 8:31am

Hello,

I would like to add a floating footer at every page of Kibana. This will be our own custom footer and it will contain some text and hyperlinks leading to important sites in our organization. Where could be the main HTML file for the home page? Btw, I'm using kibana-7.1.1-windows-x86_64 version.

Need help. Thanks a lot!

majagrubic · April 15, 2020, 10:40am

Hi,

Please note that we have a feature request with this functionality (adding a customizable header/footer) already open (see here), so I'd suggest you follow that issue and maybe you won't have to do your own custom implementation.

Potter_Ginny · April 16, 2020, 2:31am

Hi,

Actually, there is already an existing framework for the footer that I will be putting in Kibana's pages. This has been done and is already used by other custom web apps that we have since it's the standard that was set, we're just trying to comply as well & implement it in Kibana (being our data visualization tool). The only thing that I'd be doing here is to insert the ff. lines of code in the HTML file of Kibana.

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

Do you think this is possible? I'd like to know which HTML file is needed to achieve this. In what folder directory is it exactly located? Again, we're using 7.1.1 version.
Thank you so much!

majagrubic · April 20, 2020, 8:33pm

To be honest, I am not sure if something like this is possible, but having a look here would be a good starting point:

github.com

elastic/kibana/blob/af37d5fc12d65d6b74a13163ff1a4eb65422d4a7/src/core/public/core_system.ts

/*
 * Licensed to Elasticsearch B.V. under one or more contributor
 * license agreements. See the NOTICE file distributed with
 * this work for additional information regarding copyright
 * ownership. Elasticsearch B.V. licenses this file to you under
 * the Apache License, Version 2.0 (the "License"); you may
 * not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import './core.css';

This file has been truncated. show original

This is where our core DOM elements are being created.

system · May 18, 2020, 8:33pm

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