Question

我尝试将kibana与kendo-ui集成在kibana仪表板上查看视觉效果。是否可以这样做？

Answer 1

是的..但是没有kibana @team提供的官方流程..我是通过创建自定义可视化插件来完成的。

插件index.js

'use strict';

module.exports = function (kibana) {

  return new kibana.Plugin({

    uiExports: {
      visTypes: ['plugins/kendo_vislib_vis_types/kendo_vislib_vis_types']
    }

  });
};

kendo_vislib_vis_types

define(function (require) {
  const visTypes = require('ui/registry/vis_types');
  visTypes.register(require('plugins/kendo_vislib_vis_types/line'));
  visTypes.register(require('plugins/kendo_vislib_vis_types/bar'));
  visTypes.register(require('plugins/kendo_vislib_vis_types/pie'));
  visTypes.register(require('plugins/kendo_vislib_vis_types/metric'));
});

剩余跟随http://logz.io/blog/kibana-visualizations/

esResponse数据应使用

格式化为剑道所需格式

$scope.$watch('esResponse', function (resp) {
     if (resp) {
       var currentState = $scope.vis.getState();
       $scope.vis.setState(ktInterval.changeInterval(currentState));

       $scope.kendoOptionGroup = [];
      //  console.log(tabifyAggResponse($scope.vis, resp));
      $scope.resp = +moment();
      $scope.processTableGroups(tabifyAggResponse($scope.vis, resp));

     }
   });

注意：用硬编码方式直接注入src / ui / ui_app.jade的CSS文件，因为虽然插件意味着css图像路径应该是kibana可理解的格式，需要在kendo手动修改。*。min.css。

kendo CSS文件注入kibana

var files = [
        bundleFile('commons.style.css'),
        bundleFile('kendo/styles/kendo.default.min.css'),
        bundleFile('kendo/styles/kendo.common.min.css'),
        bundleFile('#{app.id}.style.css'),
        bundleFile('custom.style.css'),
        bundleFile('commons.bundle.js'),
        bundleFile('#{app.id}.bundle.js')
      ];

我们可以将kibana与kendo-ui集成吗？

1 个答案: