Reusing existing Kibana devtools in own custom Plugins?


I see the advice on plugin development docs suggesting to use React for new Kibana plugins to future proof them. But, a lot of the current code base is in Angular (1.6?). If I for example wanted to be able to reuse a part of the console dev tools (just the query editor panel with autocompletion and syntax highlighting, etc.) how feasible would that be?

(Catherine Liu) #2

The Kibana team is working towards converting all of our plugins into React, and I don't believe we have converted the console plugin just yet. You are welcome to copy the plugin and Reactify it if you're concerned about future-proofing your plugin. It would also help us a great deal if you would like to contribute any React changes you make to the Kibana repo.

For the base code editor, our Elastic UI framework has a code editor React component you can use in your plugin. If you set the mode prop to "ace/mode/json", you'll get the same syntax highlighting used in dev tools.

Our EUI code editor is a wrapper component for the AceEditor component, and you can pass any props defined for the AceEditor component onto the EUI code editor component as well. You may want to consult the documentation for the AceEditor in the react-ace docs.

For the autocomplete, I suspect you'll need to look at how the autocomplete is implemented in the console plugin and tweak it to work with the React code editor.

(Protar Smith) #3

This plugin is indeed a very useful one, I will Love to try it personally. Waiting for some reviews out of it.

With Regards,
Tutuapp | Plex | Vidmate

(system) #4

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