Need help with 6.x Kibana plugin migration to 7.x (embedded dashboard)

[jmcclure (James McClure)]

Hi,

I have a working Kibana plugin used in 6.7.1 and need to update this plugin or find another mechanism to provide the same functionality as we migrate to 7.x. I have reviewed the legacy plugin migration documentation, and I have also looked at the example plugins in 7.12. I'm stuck and not quite sure where to start in the new framework for Kibana ,or if what I am currently doing is even possible in the new framework right now (maybe in the future).

Some background...
My React application renders Kibana dashboards by leveraging the iframe element, which contains the Kibana URL in a ref attribute. The URL query string contains a date range and other query parameters (global and app data); including embed: true. The URL path is configured to use the dashboard's ID as in .../app/kibana#/dashboard/{id}?...

It is the plugin's responsibility to intercept any date range change caused by the user drilling down on a graph panel and changing the from and to values in the date range. That event is capture as a "route update" by the plugin and published as a custom message that can be received by the parent window (my React application).

    const uiModules = require("ui/modules");
    uiModules.get('app/dashboard', ['kibana/courier', 'ngRoute']).run(function ($rootScope, Private, $location) {
       $rootScope.$on('$routeUpdate', () => {
           if(parent) {
               parent.postMessage("kibanaUpdateEvent##" + $location.url(), "*")
           }
       });
    }); 

My application is only interested in the date range that is parsed from the updated location URL sent as an event from the plugin via this mechanism. The legacy "ui/modules" is not listed directly as a Kibana Platform service. Any help would be appreciated.

Thanks,
James

[joshdover]

I don't believe what you want to do is possible in Kibana 7.12, at least not in the same way.

One purpose of the new architecture is to better isolate applications and plugins from one another to avoid implicit dependencies in behavior. For this reason, we only allow the current application to watch for changes in the current URL (since the current app is the one "in control" of the page) rather than any arbitrary plugin.

However, there is an API that allows you to directly monitor changes to the time filters. You'll need to add the "data" plugin to your list of "requiredPlugins" in your kibana.json file. Then you should be able to do something like this:

import { CoreSetup, CoreStart } from '../src/core/public';
import { DataPublicPluginStart } from '../src/plugins/data/public';

interface StartDependencies {
  data: DataPublicPluginStart
}

class MyPlugin {
  setup(core: CoreSetup) {}

  start(core: CoreStart, { data }: StartDependencies) {
    data.query.timefilter.timefilter.getTimeUpdate$().subscribe((timefilter) => {
      // do something with each updated filter
    });

    // if you need the data filters, they're also available similarly
    data.query.filterManager.getUpdates$().subscribe((filters) => {
      // do something with each updated filter
    });
  }
}

I hope this helps!

[jmcclure (James McClure)]

@joshdover this is awesome information; thanks! Will put something together this week to determine if this will work for our specific use case.

James