Kibana plugin development | Skill matrix

Elastic Stack Kibana
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: ′${AppConstants.APP_NAME}′,
        uiExports: {
    require: ['elasticsearch'],
        name: ′${AppConstants.APP_NAME}′,
        uiExports: {
          app: {
            title: AppConstants.APP_TITLE,
            description: AppConstants.APP_DESCRIPTION,
            main: ′plugins/${AppConstants.APP_NAME}/app′,
            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 `