javascript - Kibana 使用 ES 和 Angular 定制可视化不起作用

Question

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

然后，我希望我的自定义可视化能够像时钟一样显示我的elasticsearch索引动态有多少次点击。

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

Chrome Devtools 告诉说错误:elasticsearch npm 模块不是为在浏览器中使用而设计的。请使用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>

感谢您的阅读。

Answer 1

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

为了避免这个问题，一种选择是在index.js中构建服务器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

在 Controller 中，您需要为上面的示例调用 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举个例子。