Kibana 7.10 custom plugin grayed out in dashboard

Elastic Stack Kibana
1

I've create a test plugin for Kibana 7.10 using logic from a 7.8 plugin. It works fine when I create a visualization using the custom plugin. However, when I add the visualization to a dashboard everything is grayed out and I cannot click on the buttons. Is there some config setting I need to set for my plugin in 7.10 to allow it to work within the dashboard? No error messages are displayed in the console. Here is a screenshot of the visualization:

Screen Shot 2021-01-07 at 10.59.23 AM
Screen Shot 2021-01-07 at 10.59.23 AM584×764 25.3 KB

And here it is loaded in a dashboard:

Screen Shot 2021-01-07 at 10.58.54 AM
Screen Shot 2021-01-07 at 10.58.54 AM874×904 38.2 KB

2

This is part of the loading state of the embeddable. So your embeddable should set loading = false to get full color, on the EmbeddableOutput that it provides.

3

I'm currently not using an embeddable object. Can you point me to an example 7.10 plugin that uses this?

4

So you've registered a custom visualization instead. You have two options:

  1. createBaseVisualization if you are providing a toExpressionAst. Your expression is supposed to indicate that it's done rendering using the handlers.
  2. createReactVisualization if you are using a custom React renderer
5

Yes, I'm creating a React visualization like this:

export class ExprExamplePlugin implements Plugin<ExprExamplePluginSetup, ExprExamplePluginStart> {
   public setup(core: CoreSetup, setupDeps: SetupDependencies) {
      setupDeps.visualizations.createReactVisualization({
         name: 'test_plugin',
         title: 'Test Plugin',
         icon: visIcon,
         description: 'Test plugin',
         visConfig: {
           component: Visualization,
           defaults: {
           }
         },
         editorConfig: {
           optionsTemplate: Editor,
         },
         requestHandler: 'none'
      });
   }

   public start() { }
   public stop() { }
}
6

Does your Visualization component call the renderComplete prop when it renders?

7

No it does not. I'm assuming that is causing the issue? Do you have some source code example that shows where/how to properly call that prop?

8

Thanks for your help. I got it working by adding the following functions:

componentDidMount() {
   this.props.renderComplete();
 }

componentDidUpdate() {
   this.props.renderComplete();
 }
9

I had to dig around the Kibana source code to figure that out. If you can think of a good place to document this then we'd appreciate a Github issue or pull request

10

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