使用ES和Angular的Kibana自定义可视化不起作用

Kibana Customized Visualization with ES and Angular Doesn't Work

本文关键字：自定义 可视化 不起作用 Kibana ES Angular 使用      更新时间：2023-09-26

首先，我尝试在Kibana中使用这里的学习制作自定义可视化。

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

所以，我改变了一些代码在上面的教程，但他们不工作。

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>

感谢您的阅读。

看起来angularjs中的控制器将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

在控制器中，您需要调用上面示例中的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

我以这篇参考文献为例

相关文章：