Hi there,
We have some dashboards from Kibana that we are injecting in our app through iframes. We do not want to allow filters to display because we still have to do some cleanup in our indexes and also name the fields in a more "human readable" way, which will be tackled in future sprints.
We are using Kibana 8.0.1 (we will upgrade to 8.1.1 next week) and we are hosted on the Elastic Cloud. Our embeds are injected through a reverse proxy, so the domain for Kibana and the app match, so no CORS issues.
Actual behavior
In the mean time, while we use our MVP as is, we realized that embeding a dashboard with no filters causes poor UX as if any user clicks (either on purpose or by mistake) on any visualization piece of data, then some filters are applied and those cannot be removed because the filtering functionality is hidden in the iframe.
I though that then what we could do is just load the iframe with the filters on, and then hide the "add filter" button using some JS, but we have not succeeded in any case.
Desired behavior
The filtered values from clicking in visualization shows, but the "add filter" button does not.
using a promise function
We create a JS function that waits until the div element with id addFilterPopover shows up, and then we apply a .hide() or we inject a display:none; CSS property.
Sample code
console.log("[KibHack] :: Heating engines up...");
waitForElementToDisplay("#addFilterPopover",function(){cosole.log("[KibHack] :: injection happens here");},1000,5000);
function waitForElementToDisplay(selector, callback, checkFrequencyInMs, timeoutInMs) {
var startTimeInMs = Date.now();
(function loopSearch() {
if (document.querySelector(selector) != null) {
callback();
return;
}
else {
setTimeout(function () {
if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
return;
loopSearch();
}, checkFrequencyInMs);
}
})();
}
using a mutation observer
Similar to the above, but in this case we monitor the iframe (we need to set a specific ID when embedding so that we can use it), then we wait until the div element with id addFilterPopover is created and then we apply a .hide() or we inject a display:none; CSS property.
Sample code
console.log("[KibHack] :: Heating engines up...");
// select the target node
var target = document.querySelector('#kibFrame');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
//iterate until the desired mutation is detected, then stop observing
//observer.disconnect();
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }
// pass in the target node, as well as the observer options
observer.observe(target, config);
//
console.log ("bye bye");
The question
Has anyone tried to do something similar and succeeded? Please share some code snippets if possible too.
