Embed Discover app into Kibana app plugin

[Thomas_Vaudry-Read]

I am developing a Kibana application plugin, and would like to embed the discover app into one of the pages. There does not seem to be much documentation on how to use the embeddables, and if that would even work for a saved search from discover.

Any help with this would be greatly appreciated.

[Vadims_Daleckis (Vadim)]

Hello @Thomas_Vaudry-Read ,

Welcome to Elastic Discuss forum!

There is not much documentation indeed, but you can find some here and here.

The best way to learn how to use embeddable is to run Kibana with --run-examples flag.

yarn start --run-examples

Then in the left sidebar there will be a section with example plugins available and you can edit the embeddable_explorer plugin to learn how to work with embeddables.

Going back specifically to your question, you can render in your app embeddables which are registered using registerEmbeddableFactory method. The whole Discover app is not an embeddable, unfortunately.

But Discover plugin registers an embeddable widget which can display Discover search results (SearchEmbeddable), here. In your app you can render that search embeddable.

To render the search embeddable which Discover app registers, you will need to get the embeddable factory.

const factory = plugins.embeddable.getEmbeddableFactory('search');

And then use that factory to render the embeddable:

const embeddable = factory.create(/* ... */);
embeddable.render(element);

[Thomas_Vaudry-Read]

@Vadims_Daleckis Thanks for the reply. This is what I needed to move forward!

Now I am wondering how do I pass in the time range from the search bar on the page?
Basically, how do we pass the parameters from search/filters to the embeddables? I thought it may have worked automatically, but it does not.

[Vadims_Daleckis (Vadim)]

@Thomas_Vaudry-Read,

I've looked it up how it is done for the dashboard embeddable: basically, you get the query object from the data plugin and use that to access the time range and provide it to your embeddable.

Where query comes from data plugin.

[Thomas_Vaudry-Read]

This works for passing in the initial value, but then it does not update as you continue to change the query, time range or filters. I noticed there is an onInputUpdated function you pass into the renderer of the embeddable, but have not seen any proper implementations.

There must be something I am missing with regards to how the embeddable will automatically update/refresh when the inputs are changed. Unfortunately, again, there is not much documentation in this area. Any help will be appreciated.

[Vadims_Daleckis (Vadim)]

There must be something I am missing with regards to how the embeddable will automatically update/refresh when the inputs are changed.

Embeddable will indeed automatically update when you change its input. You need to use embeddable.updateInput({ /* ... */ }) method for that.

Query, time range and filter have unfortunately their separate states in Kibana, so you would need to do something similar for each one separately.

To subscribe to time range changes and update the embeddable with the latest value, you could do something like this:

query.timefilter.timefilter.getTimeUpdate$().subscribe(() => {
  embeddable.updateInput({
    timeRange: {
      ..._.cloneDeep(query.timefilter.timefilter.getTime()),
    },
  });
});