【问题标题】：Kibana Customized Visualization with ES and Angular Doesn't Work使用 ES 和 Angular 进行 Kibana 自定义可视化不起作用
【发布时间】：2016-08-20 13:24:12
【问题描述】：

首先，我尝试通过学习here在 Kibana 中进行自定义可视化。

然后，我希望我的自定义可视化显示像时钟一样动态显示我的弹性搜索索引有多少命中。

所以，我在上面的教程中更改了一些代码，但它们不起作用。

Chrome Devtools 告诉说Error: The elasticsearch npm module is not designed for use in the browser. Please use elasticsearch-browser

我知道我最好使用 elasticsearch-browser。

但是，我想了解问题所在或原因。

public/myclock.js

define(function(require) {
    require('plugins/<my-plugin>/mycss.css');
    var module = require('ui/modules').get('<my-plugin>');
    module.controller('MyController', function($scope, $timeout) {
        var setTime = function() {
            $scope.time = Date.now();
            $timeout(setTime, 1000);
        };
        setTime();
        var es = function(){
            var elasticsearch = require('elasticsearch');
            var client = new elasticsearch.Client({
              host: 'localhost:9200',
              log: 'trace'
            });
            client.search({
              index: 'myindex',

            }).then(function (resp) {
                $scope.tot = resp.hits.total;
            }, function (err) {
                console.trace(err.message);
            });
        };
        es();

    });

    function MyProvider(Private) {
        ...
    }

    require('ui/registry/vis_types').register(MyProvider);

    return MyProvider;
});

public/clock.html

<div class="clockVis" ng-controller="MyController">
     {{ time | date:vis.params.format }}
     {{tot}}
</div>

感谢您的阅读。

【问题讨论】：

标签： javascript angularjs elasticsearch kibana

【解决方案1】：

看起来 angularjs 中的控制器将 elasticsearch javascript 客户端视为从浏览器访问。

为了避免这种情况，一种选择是在 index.js 中构建 Server API，然后通过执行 http 请求使 kibana 访问 elasticsearch。

示例

index.js

// Server API (init func) will call search api of javascript
export default function (kibana) {
  return new kibana.Plugin({
    require: ['elasticsearch'],

    uiExports: {
      visTypes: ['plugins/sample/plugin']
    },

    init( server, options ) {
      // API for executing search query to elasticsearch
      server.route({
        path: '/api/es/search/{index}/{body}',
        method: 'GET',
        handler(req, reply) {
          // Below is the handler which talks to elasticsearch
          server.plugins.elasticsearch.callWithRequest(req, 'search', {
            index: req.params.index,
            body:  req.params.body
          }).then(function (error, response) {
            reply(response);
          });
        }
      });
    }
  });
}

controller.js

在控制器中，您需要调用上述示例的 GET 请求。

$http.get( url ).then(function(response) {
  $scope.data = response.data;
}, function (response){
  $scope.err  = "request failed";
});

在我的例子中，我使用 url 而不是绝对或相对路径，因为仪表板应用程序的路径很深。

http://[serverip]:5601/iza/app/kibana#/dashboard/[Dashboard Name]

                                                   *

                                             Your here

http://[serverip]:5601/iza/[api path]

                           *
                       api path will start here

我以reference 为例。

【讨论】：