Kibana plugin development | Skill matrix

Elastic Stack Kibana
1

Hi,

I wish to develop a Kibana App to act as an input to Elasticsearch.

I am willing to invest time and effort in understanding the technology stack needed to develop this App. I have browsed through majority of the apps mentioned here:

Known plugins | Kibana Guide [8.11] | Elastic

I found that majority of them use Angular. I have some basic front-end development experience, however, I have never worked on angular or node extensively.

Majority of the development by me has been carried out in python. I read a post somewhere where they mentioned that Kibana is planning to move to React in the long term, would it make sense to focus on learning React?

Can someone help out with what technologies should I learn (Any particular order) in order to develop the plugin?

Please ignore any foolish mistakes or assumptions I might have made in this post.

Regards,
N

2

Have you tried looking at :slight_smile:https://www.elastic.co/guide/en/kibana/current/plugin-development.html

Its the guide to plugin development. It may help you get started.

Cheers
Rashmi

3

Hi Rashmi,

Yes. I have gone through the doc. I figured out that the technology used would be angular or react from these docs only. But the challenge is the docs cover visualization creation extensively and do not cover creating your own apps for kibana that well.

Hence this post. I tried the freenode irc, but could not get much response there as well.

Regards,
N

4

So I might have made some progress with this. Here are a few bullet points that outline my current understanding of Kibana plugins:

  1. Kibana Apps are SPA (Single Page Applications) developed using either Angular or React.
  2. The Kibana team is planning to move away from Angular and towards React. This was evident from the following posts/discussions on Git.
  1. With Kibana v6.3 a kibana plugin generator has been added. This can be used as a reference to create React-based plugins, as evident from the following discussions:
  1. An EUI library is now available to ensure better code sharing between Kibana and its plugins. Documentation or usage example for it is sadly missing.

What is still however not clear or missing for me is the way to interact with Elasticsearch from within the plugin/app. I can definitely use the Elasticsearch.js client library and hard-code the config or add a json config in the plugin folder. But I do not think it is the ideal way and getting the config from kibana.yml should definitely be possible. Anyone with some experience in that particular setting, please update me about the same.

Regards,
N

5

As for getting Elasticsearch URL - it is possible, by reading kibana config in your plugin. All you need is add server function like this:

server.route({
    path: '/api/<some your url>/{attr}',
    method: 'GET',
    handler(req, reply) {
      reply(server.config().get(req.params.attr));
    }
  });

and then perform get requests from you client side code in plugin.

You can get any settings from kibana.yml (look throw the file and use )))

1 Like
6

Hi undwood,

Thank you for the example. Do you have a sample plugin written in react? Would be a good reference point.

Regards
N

7

I'm sorry, but I can't share the whole code. But as for starting kit, I can write some key things to start writhing kibana plugin using react.

  1. I use plugin generator from Elastic documentation - It builds a stub for any kibana plugin.
  2. index.js - leave it as it has been generated. And ad initialisation of the server api.
index.js 
    import { resolve } from 'path';
    import { AppConstants } from './public/config/AppConfig';
    import api from './server/api/init';
    export default function (kibana) {
      return new kibana.Plugin({
        require: ['elasticsearch'],
        name: &prime;${AppConstants.APP_NAME}&prime;,
        uiExports: {
    require: ['elasticsearch'],
        name: &prime;${AppConstants.APP_NAME}&prime;,
        uiExports: {
          app: {
            title: AppConstants.APP_TITLE,
            description: AppConstants.APP_DESCRIPTION,
            main: &prime;plugins/${AppConstants.APP_NAME}/app&prime;,
            injectVars: function (server) {
              const config = server.config();
              return {
                kbnIndex: config.get('kibana.index'),
                esShardTimeout: config.get('elasticsearch.shardTimeout'),
                esApiVersion: config.get('elasticsearch.apiVersion'),
                basePath: config.get('server.basePath')
              };
            }
          },
          translations: [
            resolve(__dirname, './translations/es.json')
          ],
          hacks: [
            'plugins/bieibro/hack'
          ]
        },
        config(Joi) {
          return Joi.object({
            enabled: Joi.boolean().default(true)
          }).default();
        },
        init(server, options) {
          console.log("----- server init");
          api(server);
        }
      });
    }
  1. server api is the following
init.js 
export default function (server) {
  server.route({
    path: '/api/bb/config/{attr}',
    method: 'GET',
    handler(req, reply) {
      reply(server.config().get(req.params.attr));
    }
  });
}
  1. The react start component (with redux support)
app.js 
import React from 'react';
import 'ui/autoload/styles';
import 'plugins/kbn_vislib_vis_types/kbn_vislib_vis_types';
import './less/main.less';

import { AppConstants } from './config/AppConfig';
import { render } from 'react-dom';
import chrome from 'ui/chrome';
import App  from './app/App';
import { Provider } from 'react-redux';
import configureStore from './store';

chrome.setRootTemplate(&prime;<div id="root" class="${AppConstants.APP_NAME}"></div>&prime;)
  .setRootController(() => {
    // Mount the React app
    const el = document.getElementById('root');
    const store = configureStore();
    render(
      <Provider store={store}>
        <App/>
      </Provider>
      , el);
  });
  1. And then, you can implement all, what you wish with react. But, as I understand, we can't use React Router in plugin. If anybody know, how to do this - please write an example

PS replace &prime; to `

8

Thanks for the skeleton undwood. Will try and let you know how it goes :slight_smile:

9

Found a plugin that does exactly that!

10

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