app插件案例

简介

在这个案例中，项目目标是实现一个elasticsearch_status app插件，在插件中可以查看elasticsearch 所有的index,以及他们的status。在这个案例中主要讲解如何开发app插件，以及如何在kibana中与elasticsearch通信。

实践

准备

首先新建项目 elasticsearch_status(源码详见)

然后利用模板工具生成项目

1.修改index.js

这个文件主要是根据kibana api 定义该插件类型，本次demo 定义插件类型为app.修改内容如下：

const api =require('./server/routes');
export default function (kibana) {
  return new kibana.Plugin({
    require: ['elasticsearch'],

    uiExports: {
      // Register the app component of our plugin to uiExports
      app: {
        // The title of the app (will be shown to the user)
        title: 'Indices',
        // An description of the application.
        description: 'An awesome Kibana plugin',
        // The require reference to the JavaScript file for this app
        main: 'plugins/elasticsearch_status/app',
        // The require reference to the icon of the app
        icon: 'plugins/elasticsearch_status/icon.svg'
      }
    },

    // The init method will be executed when the Kibana server starts and loads
    // this plugin. It is used to set up everything that you need.
    init(server, options) {
      // Just call the api module that we imported above (the server/routes.js file)
      // and pass the server to it, so it can register several API interfaces at the server.
      api(server);
    }

  });
};

在上面代码中app{}按照kibana插件接口编写，没有什么好解释的。在init(){}方法可以在kibana启动的时候调用，在这里面可以做任意化的操作，这块是用作server端，提供路由查询elasticsearch功能。该方法中传入参数server,也很有用途，比较获取配置信息，创建路由等。

2.新增routes.js

在server目录新建routes.js文件，主要是用作提供server端查询elasticsearch数据。

export default function (server) {

  const call = server.plugins.elasticsearch.getCluster('admin').callWithRequest;
  server.route({
    path: '/api/elasticsearch_status/indices',
    method: 'GET',
    handler(req, reply) {
        call(req, 'cluster.state').then(function (response) {
          // Return just the names of all indices to the client.
          reply(
            Object.keys(response.metadata.indices)
          );
        });
    }
  });

  // Add a route to retrieve the status of an index by its name
  server.route({
    path: '/api/elasticsearch_status/index/{name}',
    method: 'GET',
    handler(req, reply) {
      call(req, 'cluster.state', {
        metric: 'metadata',
        index: req.params.name
      }).then(function (response) {
        reply(response.metadata.indices[req.params.name]);
      });
    }
  });

};

3.新增app.js

const uiModules =require ('ui/modules');
const uiRoutes =require ('ui/routes');

require ('ui/autoload/styles');
require ('./less/main.less');
const overviewTemplate =require('./templates/index.html');
const detailTemplate =require('./templates/detail.html');

uiRoutes.enable();
uiRoutes
.when('/', {
  template: overviewTemplate,
  controller: 'elasticsearchStatusController',
  controllerAs: 'ctrl'
})
.when('/index/:name', {
  template: detailTemplate,
  controller: 'elasticsearchDetailController',
  controllerAs: 'ctrl'
});

uiModules
.get('app/elasticsearch_status')
.controller('elasticsearchStatusController', function ($http) {
  $http.get('../api/elasticsearch_status/indices').then((response) => {
    this.indices = response.data;
  });
})
.controller('elasticsearchDetailController', function($routeParams, $http) {
  this.index = $routeParams.name;

  $http.get(`../api/elasticsearch_status/index/${this.index}`).then((response) => {
    this.status = response.data;
  });
});

该文件主要是提供controller,调用后台API,在页面展示数据

index.html

<div class="container">
  <div class="row">
    <div class="col-12-sm">
      <h1>Elasticsearch Status</h1>
      <ul class="indexList">
        <li ng-repeat="index in ctrl.indices">
          <a href="#/index/{{index}}">{{ index }}</a>
        </li>
      </ul>
    </div>
  </div>
</div>

显示所有index 列表 detail.html

<div class="container">
  <div class="row">
    <div class="col-12-sm">
            <a href="#/">Index list</a>
      <h1>Index: {{ ctrl.index }}</h1>
            <pre>{{ ctrl.status | json }}</pre>
    </div>
  </div>
</div>

4.运行

在kibana 根目录下执行 npm start命令即可，效果如下：

参考

1. Writing Kibana Plugins – Custom applications