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

Question

我尝试用kendo-ui集成kibana来查看kibana dashboard.Is的视觉效果，可以这样做吗？

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数据应采用kendo要求的格式，使用

$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));

     }
   });

注意: CSS文件直接以硬编码的方式注入到src/ui/ui_app.jade中，因为虽然插件意味着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')
      ];