Kibana Plug-in development

This article translates Timrose's article, the original address: https://www.timroes.de/2016/02/21/writing-kibana-plugins-custom-applications/

Before you read this tutorial, you need to read part 1th-the basics.

This tutorial series describes how to create an application in Kibana. An application is a plug-in that is part of the Kibana platform and can place anything you show. Kibana just link to this section, you can design this plugin as you wish. Plug-in is a well-known example of Elastic's timelion plugin.

In this tutorial, we will build a very simple Elasticsearch state page application. It lists all the indexes, and clicking on one will take you to the information page about the index. You can see this effect in the animation below.

In this tutorial, we will learn how to create a basic structure plug-in for an application plug-in how to create multiple sub-pages in a communication plug-in with Elasticsearch and how to navigate

The full plug-in source code can be found on GitHub. I used a lot of ECMAScript 2015 syntax for this plugin. Kibana uses Webpack to bundle your plug-in files together, so you can safely use ECMAScript 2015.
GitHub Address:

Https://github.com/timroes/elasticsearch_status

Create a plug-in basic structure

In the previous tutorial we saw the structure of the index.js. To register a new plugin, you can use the key Uiexport in the object app as follows:

Export default function (Kibana) {
  return new Kibana. Plugin ({
   require: [' elasticsearch '],

    uiexports: {
      app: {
        title: ' Indices ',
        description: ' An Awesome Kibana plugin ',
        main: ' Plugins/elasticsearch_status/app ',
        icon: ' plugins/elasticsearch_status/ Icon.svg '}}
);

In require, we can refer to other modules. The common values are Kibana and elasticsearch. These modules are specified because Kibana loads our plugins after loading these modules, ensuring that the referenced modules are loaded successfully. We have quoted the Elasticsearch module here because we are going to use the Elasticsearch data later.
The information in Uiexports is to describe the plugin information.
-Title: The name of the plugin.
-Description: Simple Introduction to plugin information.
-Icon: Plugin's chart
-Main: The source location of the plugin. Default plugins/plug-in name/js file name

There are other parameters, such as if you do not want the plugin to appear in the navigation, you can add the parameter hidden:true. (This is the Kibana status page.) ) Create Server API

If you are querying elasticsearch from a plug-in, the best solution is to create a new Kibana Server API. You call this API in your plugin and it will query elasticsearch for you.

Why not query Elasticsearch directly from your plugin. Of course, you can also use the Elasticsearch JavaScript client to query es directly from your front end. However, these calls will be performed in the user's browser, resulting in cors (cross-origin resource sharing) issues. The best solution is to use the Kibana server.

Therefore, as mentioned above, our plug-in will get a list of all indexes and need to retrieve statistics for a particular index. Let's take a look at the second interface.

To add a new server API to Kibana, use the Init method to specify:

// ...
return new Kibana. Plugin ({
  //...
  Init (server, options) {
    //initialization goes here
  }
});

If you are unfamiliar with this JavaScript syntax, this has a shortcut init:function (server, Options) {...}.

The server object passed to the method is actually a Hapijs server object. You can create a new interface as follows:

Inside your init method:
server.route ({
  path: '/api/elasticsearch_status/index/{name} ',
  method: ' GET ' ,
  handler (req, reply) {
    //More to come here under the next step
    reply ("Hello world");
  }
);

This allows you to create a new get API on the Kibana server. You can now call the/api/elasticsearch_status/index/interface (and now you're not doing anything). The handler method will get two parameters: the first is a request that has already been created. You can access a lot from the request here (for example, using Req.params.name you will get the name of the index passed in the URL). The second parameter is a reply function. You must call this function and pass the data that it should return to the client that called the API.

For complete documentation, see the official HAPI documentation for the routing method. (https://hapijs.com/api#serverrouteoptions) query Elasticsearch

Now we need to somehow process the query Elasticsearch the data with the relevant index in some way. There is a practical way to invoke elasticsearch that we can use. This method is also the reason why we need the elastic search module in Index.js. The following code will enter the processing function of our API:

Server.plugins.elasticsearch.callWithRequest (req, ' cluster.state ', {
  metric: ' metadata ',
  index: Req.params.name
}). Then (function (response) {
  reply (response.metadata.indices[req.params.name]);
});

We need to pass the request in the API as the first parameter to the Callwithrequest method. This method passes authentication between the call to the Kibana server and the call to Elasticsearch. The second parameter is the name of the function of the Elasticsearch JavaScript client that we want to invoke-in our case we're going to call the Cluster.state () method, and we're going to pass the index (read from the request parameter) to the method.

The method returns a commitment that will be resolved through the elasticsearch response. In the Resolve function, we will extract the data we need from the response (in our case, index stats) and return it (through the reply method).

If you are developing callwithrequest for Kibana 5.2, the usage outlined in this blog will vary slightly.

We have created a Kibana server API that can now be called. If you notice GitHub's source code, you'll notice that I extract the API build to another module and call this method from the Init method. I recommend doing this to keep your code readable-if you have a lot of APIs you create, you may even want to use multiple modules.

The second server API (for getting a list of all indexes) can be found in the source code. I won't go into detail in this post because we've covered all the topics that you can write yourself. creating a front end

We should create a front end for our plugins. We have previously registered a specific app.js and index.js as the primary file. It's time to write about them.

We will insert the first two lines of the file as follows:

Import ' Ui/autoload/styles ';
Import './less/main.less ';

If you use Kibana 5, the first line is important and you should always place it in the plug-in. This causes Kibana to load all of the styles it typically has. If you do not import (or require, if you like ES5 syntax) This module, your application will look out of tune with the Kibana framework. If you use Kibana 4, this file does not exist and you cannot import it (this lets us go back to the huge warning in the first article about the lack of a stable public API).

The second line is optional and shows how to insert your own less style for your application. You only need to import your less file. You can also use sass. I recommend using relative paths, these files are also in your public folder, so you don't need to repeat your plugin ID. Create routing Options

Kibana uses Angularjs ' ngrouter to route between pages. If your application wants to use routing, you must explicitly enable it and configure some routes in the App.js file:

Import uiroutes from ' ui/routes ';

Import overviewtemplate from './templates/index.html ';
Import detailtemplate from './templates/detail.html ';

Uiroutes.enable ();
Uiroutes
. When ('/', {
  template:overviewtemplate,
  controller: ' Elasticsearchstatuscontroller ',
  Controlleras: ' Ctrl '
})
. When ('/index/:name ', {
  template:detailtemplate,
  controller: ' Elasticsearchdetailcontroller ',
  controlleras: ' Ctrl '
});

If you need to use routing, you must define uiroutes.enable (). After that, you can use when and otherwise calls, just as you would with $routeprovider. In this case, we are going to configure two routes: one for the base path and one for the path/index/:name, which is a placeholder for the name of the index. You can set up a template for two routes by using the statements above in import to place the actual HTML files (these templates files in the folder in this example). We also use two controllers that we haven't written yet.

Below we write the controller, we use the Global module registry Kibana:

Import uimodules from ' ui/modules ';

Uimodules
. Get (' App/elasticsearch_status ')
. Controller (' Elasticsearchstatuscontroller ', function ($http) {
  $http. Get ('.. /api/elasticsearch_status/indices '). Then ((response) = {
    this.indices = response.data;
  });
});

Uimodules is the core service of Kibana and is responsible for all modules in the application. If you want to get or create a, use its Get method. The first parameter is the name of the module to get or create. If the module already exists or does not create it, the service will be responsible for returning the module. The second parameter can be an array of modules, which are dependent on the module. If the modules already exist, they will be added to the module's list of dependencies before they are returned. These modules do not exist, just add them to the newly created module.

When you see this behavior different from the Angular.module method, you create a module when you specify a dependency, and get the module when you do not pass the second argument. Using this service, Kibana will also be interested in loading our angle module.

The above controller itself is using the $http service to get an index list from our interface and store it in the controller.

The last missing part is now our template templates/index.html:

<div class= "Container" >
  <div class= "Row" >
    <div class= "Col-12-sm" >
      
 
The HTML in our tutorials remains fairly simple. We just ng-repeat to iterate over all the indexes, and we retrieve them from the API and link to them. In addition, we use some bootstrap CSS classes to design our content. The HTML of the detailed page can be found in the source code of GitHub.

At the beginning of Kibana 5, Kibana will only give you the next navigation, as shown in the figure above. Once you are switched to your plugin, there is no title bar or anything. If you want this style, you will have to create it in your. Before Kibana 5, you still have access to bar and can be modified through the service:

Import Chrome from ' ui/chrome ';

Chrome
setnavbackground (' #FF00FF ')//Turns The navbar in beautiful pink
. Setbrand ({
  logo: ' <css Background property value for the Logo> ',
  smalllogo: ' <css Background property value A smaller version> ' 
  });