Embed Kibana dashboards without using iframe

Elastic Stack Kibana
1

Currently we embed Kibana dashboards and visualizations on a Portal overview page in a React app, using the normal share iframe method. We've noticed significant increase in page loading time on portals where more than 2-3 of these iframes are configured. Unfortunately the content comes from different indices and is rendered in different sections on the portal, so it's not enough to limit the number of kibana-iframes.

The majority of the performance hit seem to be for bootstrapping the Kibana app and loading required resources (js, css etc). Once loaded it's blazingly fast to filter, loading additional data, and interact with the injected visualizations.

Is there an alternative way to render Kibana visualizations without having to rely on iframes bootstrapping the whole app for each visualization?

2

Hi Sebastian,

Using iframe to embed Kibana is the recommended approach as per the docs. You could try some alternatives such as <object>, <embed>, <iframe> lazy loading, or WebComponents, but it would be experimental and I'm not sure it would solve your problem.

You mention your portal is loading 203 of these iframes. Can you explain a bit more what you're trying to do? Do you have multiple dashboards with different indices being loaded in each iframe?

3

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