app插件案例

简介

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

实践

准备

首先新建项目 elasticsearch_status(源码详见)
然后利用模板工具生成项目

1.修改index.js

这个文件主要是根据kibana api 定义该插件类型,本次demo 定义插件类型为app.修改内容如下:
1
const api =require('./server/routes');
2
export default function (kibana) {
3
return new kibana.Plugin({
4
require: ['elasticsearch'],
5
6
uiExports: {
7
// Register the app component of our plugin to uiExports
8
app: {
9
// The title of the app (will be shown to the user)
10
title: 'Indices',
11
// An description of the application.
12
description: 'An awesome Kibana plugin',
13
// The require reference to the JavaScript file for this app
14
main: 'plugins/elasticsearch_status/app',
15
// The require reference to the icon of the app
16
icon: 'plugins/elasticsearch_status/icon.svg'
17
}
18
},
19
20
// The init method will be executed when the Kibana server starts and loads
21
// this plugin. It is used to set up everything that you need.
22
init(server, options) {
23
// Just call the api module that we imported above (the server/routes.js file)
24
// and pass the server to it, so it can register several API interfaces at the server.
25
api(server);
26
}
27
28
});
29
};
Copied!
在上面代码中app{}按照kibana插件接口编写,没有什么好解释的。在init(){}方法可以在kibana启动的时候调用,在这里面可以做任意化的操作,这块是用作server端,提供路由查询elasticsearch功能。该方法中传入参数server,也很有用途,比较获取配置信息,创建路由等。

2.新增routes.js

在server目录新建routes.js文件,主要是用作提供server端查询elasticsearch数据。
1
export default function (server) {
2
3
const call = server.plugins.elasticsearch.getCluster('admin').callWithRequest;
4
server.route({
5
path: '/api/elasticsearch_status/indices',
6
method: 'GET',
7
handler(req, reply) {
8
call(req, 'cluster.state').then(function (response) {
9
// Return just the names of all indices to the client.
10
reply(
11
Object.keys(response.metadata.indices)
12
);
13
});
14
}
15
});
16
17
// Add a route to retrieve the status of an index by its name
18
server.route({
19
path: '/api/elasticsearch_status/index/{name}',
20
method: 'GET',
21
handler(req, reply) {
22
call(req, 'cluster.state', {
23
metric: 'metadata',
24
index: req.params.name
25
}).then(function (response) {
26
reply(response.metadata.indices[req.params.name]);
27
});
28
}
29
});
30
31
};
Copied!

3.新增app.js

1
const uiModules =require ('ui/modules');
2
const uiRoutes =require ('ui/routes');
3
4
require ('ui/autoload/styles');
5
require ('./less/main.less');
6
const overviewTemplate =require('./templates/index.html');
7
const detailTemplate =require('./templates/detail.html');
8
9
uiRoutes.enable();
10
uiRoutes
11
.when('/', {
12
template: overviewTemplate,
13
controller: 'elasticsearchStatusController',
14
controllerAs: 'ctrl'
15
})
16
.when('/index/:name', {
17
template: detailTemplate,
18
controller: 'elasticsearchDetailController',
19
controllerAs: 'ctrl'
20
});
21
22
uiModules
23
.get('app/elasticsearch_status')
24
.controller('elasticsearchStatusController', function ($http) {
25
$http.get('../api/elasticsearch_status/indices').then((response) => {
26
this.indices = response.data;
27
});
28
})
29
.controller('elasticsearchDetailController', function($routeParams, $http) {
30
this.index = $routeParams.name;
31
32
$http.get(`../api/elasticsearch_status/index/${this.index}`).then((response) => {
33
this.status = response.data;
34
});
35
});
Copied!
该文件主要是提供controller,调用后台API,在页面展示数据
index.html
1
<div class="container">
2
<div class="row">
3
<div class="col-12-sm">
4
<h1>Elasticsearch Status</h1>
5
<ul class="indexList">
6
<li ng-repeat="index in ctrl.indices">
7
<a href="#/index/{{index}}">{{ index }}</a>
8
</li>
9
</ul>
10
</div>
11
</div>
12
</div>
Copied!
显示所有index 列表 detail.html
1
<div class="container">
2
<div class="row">
3
<div class="col-12-sm">
4
<a href="#/">Index list</a>
5
<h1>Index: {{ ctrl.index }}</h1>
6
<pre>{{ ctrl.status | json }}</pre>
7
</div>
8
</div>
9
</div>
Copied!

4.运行

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

参考