Question

前面两节，我们分别看过了如何开发可视化部分和服务器端部分。现在，我们把这两头综合起来，做一个可以在 Kibana 菜单栏上切换使用的，完整的 app。就像 Kibana 5 默认分发的 timelion 和 console 那样。

当然我们这里不会真的特意搞一个很复杂的可视化应用。我们只做一个 Elasticsearch 状态展示页面就好了。这个方式正好可以串联从前到后的请求、展示部分。

app 模块的 index.js 结构

我们已经讲过了在 index.js 中如何使用 uiExports.visType 和 init。那么 app 的 index.js 是什么样子的呢？

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'
            }
        }
    });
}

这个示例中有两处特殊的代码：

1. require 指令加载了 elasticsearch 模块；这表示后续我们会用到这个模块，所以提前加载好。
2. uiExports 中使用了 app 键值对定义。其中这几对键值的含义如下：
   • title: app 的名称，用来显示在 Kibana 左侧边栏上的文字；
   • icon: app 的图表，用来显示在 Kibana 左侧边栏上的图标；
   • main: app 的主入口 js 文件。

服务器端部分

作为完整的 app，自然也还是有服务器端的部分。上节已经讲过，在 index.js 中的 init 部分定义这块：

return new kibana.Plugin({
      // ...
    init(server, options) {
        server.route({
            path: '/api/elasticsearch_status/index/{name}',
            method: 'GET',
            handler(req, reply) {
                server.plugins.elasticsearch.callWithRequest(req, 'cluster.state', {
                    metric: 'metadata',
                    index: req.params.name
                }).then(function (response) {
                    reply(response.metadata.indices[req.params.name]);
                });
            }
        });
    }
});

传入的 server 参数，我们在上节只是用来获取了一下 ESClient。这次，我们正式使用一些 Hapi.js 真正的功能。比如路由。

这里创建的是一个可以被 GET 方法访问的 URL 地址 /api/elasticsearch_status/index/<index name>。对访问的处理应答，使用 handler 方法。

handler 方法传入两个参数：

• req: 有关请求的信息都可以通过 req 对象获取，比如路由中捕获的 <index name> 就可以用 req.params.name 来引用。
• reply: 应答处理的内容通过 reply 返回。

然后采用 server.plugins.elasticsearch.callWithRequest 来发送 Elasticsearch 请求，通过 Promise.then 来异步返回最终的 reply。这部分和上节讲的类似，就不展开了。

前台界面的 app.js

index.js 和后台数据已经就绪，下面就是前台界面展示问题。我们已经在 index.js 里定义过了 main 文件，是 app.js。

The first two lines we will insert into the file are the following:

import 'ui/autoload/styles';
import './less/main.less';
import uiRoutes from 'ui/routes';
import uiModules from 'ui/modules';
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'
});

文件第一行永远要是加载 ui/autoload/styles。这一行的作用是保证你的 app 界面和 Kibana 总体保持统一风格。这也是 Kibana5 才有的新内容。

然后通过 uiRoutes 来完成 Angular 框架的路由定义。这方面在之前的 Kibana 源码介绍中已经反复出现过。这里我们定义好路由对应的控制器和模板文件。

控制器

作为一个简单示例，我们可以直接在 app.js 里继续实现控制器部分。如果是复杂应用，一般这里可以拆分成单独文件。

在 Kibana 中，实现控制器的方式如下：

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

这里采用的是 Kibana 框架已经封装好的 uiModules.get().controller()，比标准的 angular.module 省去了一些创建声明、依赖处理之类的工作。同样也是之前的源码讲解里很熟悉的部分了。

这里作为和后端的配合，我们使用 Angular 标准的 $http 来调用 ../api/elasticsearch_status/indices 地址。这正是之前我们声明好的服务器端 URL。

页面模板

Angular 模板语言也是已经见过很多面的老朋友了，这块我们用最简单的一个 ng-repeat 循环展示列表即可。

<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>

完毕。一个带有前后台乃至菜单栏的完整 app 就是这么简单：