Creating custom Kibana plugin in React

Elastic Stack Kibana
1

I want to create custom Kibana plugin in React rather than AngularJS. I have written a simple React component and imported it in my main file as

return VisFacory.createReactVisualization({
      visConfig: {
          component: ReactComponent;
          .....
          .....
      }
});

My react component file is : 

import ....
class ReactComponent extends Component{
   render(){
      return (
         <div>Simple react plugin</div>
      );
}
}
ReactDOM.render(<ReactComponent/>);

Is this the correct way to go about it because I am getting an error stating

Uncaught Invariant Violation : Minified React error #200. What does the error signify?

2

Hi Mishal,

Some fixes:

Your ReactComponent should avoid ReactDOM.render and just export your component. So, it should looks like this:

import ....
export default class ReactComponent extends Component{
   render(){
      return (
         <div>Simple react plugin</div>
      );
  }
}

Your component will be rendered by kibana for this reason you are specifying your component in visConfig. :slight_smile:

3

Hi, I implemented the react component as you mentioned. However I ran into another problem. Here are my files

app.js

import { CATEGORY } from 'ui/vis/vis_category';
import { VisFactoryProvider }  from 'ui/vis/vis_factory';
import {Schemas} from 'ui/vis/editors/default/schemas';
import {VisTypesRegistryProvider} from 'ui/registry/vis_types';
import {ReactComponent} from './vis/ReactComponent';

const MynewVisType = (Private) => {
    const visFactory = Private(VisFactoryProvider);
    return visFactory.createReactVisualization({
        name: 'ml_d3',
        title: 'D3',
        icon: 'fa fa-eye',
        description: 'Cool new d3 chart',

        category: CATEGORY.OTHER,
        visConfig: {
            component: ReactComponent
        }
    });
}

VisTypesRegistryProvider.register(MynewVisType);
export default MynewVisType;

index.js:

export default function(kibana){
    return new kibana.Plugin({
        uiExports:{
            visTypes:[
                'plugins/d3kib/app'
            ]
        }
    });
}

ReactComponent.js

import React, {Component} from "react";
export default class ReactComponent extends Component{
   render(){
      return (
         <div>Simple react plugin</div>
      );
  }
}

package.json

{
    "name": "d3kib",
    "main": "index.js",
    "version": "1.0.0",
    "description": "Plugin to integrate d3 scripts",
    "kibana": {
        "version": "6.3.2"
    },
    "dependencies": {
        "ansi-to-html": "0.6.4",
        "handlebars": "4.0.6",
        "lodash.escape": "4.0.1",
        "lodash.get": "4.4.2",
        "lodash.set": "4.3.2",
        "react": "16.0.0"
    }
}

I am getting the error:

32%20PM
Screenshot 2018-11-10 at 3.55.32 PM.png2854×1458 426 KB

Is there something I might be missing? :slight_smile:

4

I'm not sure that your problem is it, but for kibana 6.3 you should use template: ReactComponent instead of component: ReactComponent (docs).

Actually, I'm using kibana 6.4 and writing plugins for it. I may not know some specific settings for kibana 6.3.

5

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