Cant Get This To Work with ELK 5.6.3 and Angular 4

[structre40]

I am having a difficult time getting this workingin our Angular4 webapp. My markup:

  <div class="mdc-layout-grid">
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-10-desktop mdc-layout-grid__cell--span-6-tablet tabs">
        <iframe id="test1" src="http://localhost:5601/app/kibana#/dashboard/AV813bSSz9YDXQ5d_VDH?embed=true&_g=()" height="600" width="800"></iframe>
      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
        <h4 translate>smart-advisors-recommendations</h4>
      </div>
    </div>
  </div>

and my typsecript that is being run:

ngOnInit() {
    const iframe= document.getElementById('test1');
    //Set visualiztion ID
    let visPartial = {id: "bankAge"};

    //Set isFullState to false meaning: the programmer pass minimal defenetion attributes
    visPartial["isFullState"] = false;

    //Set the elasticsearch index where the data store
    visPartial["visIndex"] = "bank";

    //Set minimal attributes of the visualization, in this example, create pie visualization on the field age
    visPartial["visState"] = {visType: 'pie', field: 'age'};
    visPartial["visDashboardDefenetion"] = {
      col: 1,
      id: "age",
      panelIndex: 9,
      row: 1,
      size_x: 3,
      size_y: 3,
      type: "visualization"
    };

    //Replace visualization with id=memory with the new visualization 
    //visPartial["prevoiusVisId"] = "test1";

    var iWindow = (<HTMLIFrameElement>iframe).contentWindow;
    console.log(iWindow);

    iWindow.postMessage({actionType: "setVisualization", visDefenetion: [visPartial]}, '*');

I am running elastic search and Kibana 5.6.3. Any insights?

[structre40]

A small follow up to this. It does work when using a button. Any guidance to how to get this working within the Angular page lifecycle?

[ytzlax]

Hi, Your issue is known problem when using iframe, When ngOnInit occurred the iframe still not fully load, so kibana dashboard still not ready and so the plugin.

[structre40]

Any recommendation how to get this to work on the page loading instead of a user having to click a button?

[ytzlax]

Hi , until the end of November I will write a code that fire event to the app when the iframe ready, meanwhile I offer you to goggle your question

[ytzlax]

Hi, @structre40 please look at he next pull request https://github.com/elastic/kibana/pull/8914 kibana team add event called "renderComplete" that fire when the visualization is complete, I asked them to do the same thing to the dashboard, meanwhile my solution is to use setTimeout function in the ngOnInit function, like this:

ngOnInit() {
    const iframe= document.getElementById('test1');
    //Set visualiztion ID
    let visPartial = {id: "bankAge"};

    //Set isFullState to false meaning: the programmer pass minimal defenetion attributes
    visPartial["isFullState"] = false;

    //Set the elasticsearch index where the data store
    visPartial["visIndex"] = "bank";

    //Set minimal attributes of the visualization, in this example, create pie visualization on the field age
    visPartial["visState"] = {visType: 'pie', field: 'age'};
    visPartial["visDashboardDefenetion"] = {
      col: 1,
      id: "age",
      panelIndex: 9,
      row: 1,
      size_x: 3,
      size_y: 3,
      type: "visualization"
    };

    //Replace visualization with id=memory with the new visualization 
    //visPartial["prevoiusVisId"] = "test1";

    var iWindow = (<HTMLIFrameElement>iframe).contentWindow;
    console.log(iWindow);
    setTimeout(function(){
        iWindow.postMessage({actionType: "setVisualization", visDefenetion: [visPartial]}, '*');
    }, 3000);