Embeding dashboards as iframes within a Kibana Application

Elastic Stack Kibana
1

Hello, I am currently working to create a plugin that can be used as a kind of configurable works space for users where they can quickly store and view multiple dashboards together. when I add a Kibana dashboard to the page whenever I refresh or attempt to navigate somewhere else on the site it causes the page to become unresponsive. the only thing I can think of is that it is trying to reload/navigate with both the iframe and the main window. Does anyone know a way to prevent this or at least what causes this behavior in the iframes? thanks for help here is my code and some screen shots

        interface Style extends CSS.Properties, CSS.PropertiesHyphen {}
        const tablestyle: Style ={
          border:0, 
          padding:'0px', 
          margin:'0 auto', 
          width:'1200px', 
          height:'400px' 
        };
        const constyle: Style = {
          float:'left',
          width:'33%',
          height:'100%',
          overflow:'hidden'
        };
        const istyle: Style = {
          width:'109%',
          height:'100%',
          overflow:'auto'
        };

        export const FavoritesTable = ({
          basename,
          notifications,
          http,
          navigation,
        }: SpittingAlpacaAppDeps) => {
          
          //const [favorites, setFavorites] = useState<|undefined>();

          return (

            <table  cellSpacing="0" cellPadding="0" style={tablestyle}>
                <div style={constyle}>
                  <iframe src="https://192.168.1.195/gja/goto/0ac6fb6f1b676dc44ded7d82e78f51d0" style={istyle}> </iframe>
                </div>
                <div style={constyle}>
                  <iframe src="https://192.168.1.195/gja/goto/0ac6fb6f1b676dc44ded7d82e78f51d0" style={istyle}> </iframe>
                </div>
                <div style={constyle}>
                  <iframe src="https://192.168.1.195/gja/goto/0ac6fb6f1b676dc44ded7d82e78f51d0" style={istyle} > </iframe>
                </div>
            </table>

          );
        }

Untitled
Untitled1396×385 9.72 KB

2

This looks like behavior that would happen without an iframe too: I suggest that you navigate to the same URL in a private browsing window to see what happens. My suspicion is that the time range is not set correctly.

3

I opened the url in its own tab and it appears to redirect and refresh as expected. the time range that is being used in the example is showing blank but that is expected since i am just using it for testing atm. Are you saying it may be breaking since their is no data being displayed?

Edit I attempted to give a time range with data and the issue with refreshing remains

Untitled1
Untitled12296×958 20 KB

4

Okay, I think I understand what you're seeing, which appears to be a performance issue in Kibana. You might be able to improve the dashboard performance by:

  • Upgrading to the latest Kibana (not sure what you're using, but we did have a performance issue in 7.9.0)
  • Putting fewer panels on each dashboard: the more panels, the worse the performance is
  • Setting the auto-refresh interval higher than it is

Performance issues like this can be tricky to diagnose because they are dependent on so many environmental factors.

5

hmmm interesting thought i hadnt considered it just being a performance issue. I am not using autorefresh on the iframes and the dash issue persists even if i drop it down to just one iframe. however it may be from trying to run 2 instances of kibana in one tab. Is there another alternative to displaying a snapshot of a dashboard within a kibana plugin without using iframes?

6

There are several alternatives to using an iframe, but the behavior you're seeing is pretty concerning. It might help us find an unknown performance issue if you could grab a performance snapshot from your browser while using Kibana.

Your alternatives are:

  • The Canvas app is often used for presenting data full-screen, and can cycle through pages on a timer. You can embed panels in Canvas, just like you can in Dashboard- but you can also do more styling.
  • You can replicate most of the dashboard functionality using the Kibana embeddable API, which lets you embed panels for saved objects. There is a Kibana example app if you enable examples from the command line.
  • Since you have a custom plugin, you can fetch data and render it using any mechanism you want- not just built-in Kibana features.
7

Thanks I think using the embeddable API sounds like the correct approach for my use case. Is there any documentation I can reference for implementing it/ is there a place I can directly view the code from the example one thing I have learned about Kibana is you don't know how it works until you spend a few hours milling through the source?

Additionally I have no problem providing any performance data you need to figure out the cause of this behavior anything that helps Kibana will help my project. Just let me know what you need and I will work to get it - I am not a web dev by trade so I may need a minor bit of handholding for some of it depending on what you need.

8

All of the examples are here: https://github.com/elastic/kibana/tree/master/examples

You can take a performance trace using the Performance tab in Chrome, which I saw you were using. I believe there is also a way to export the results of a performance trace from the same place, which would let us view the same results: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance

9

sorry for the delayed response hurray holidays. Thanks for sharing the example code. i attempted to do a performance trace a few times and it just keeps hanging for ever until i kill the ta. normally it will display a page unresponsive. im assuming running the performance capture prevents that from happening so i cant escape the page. i did a little more experimenting and found that the problem only rises when navigating to another page in kibana. if i go some where else (ie. google) it works fine i did get a successful performance capture from this and nothing in it stood out as odd to me but i can provide it if you want to see it. what do you think the next steps should be for this?

10

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