Kibana插件开发(详解)

Kibana插件第一视角

补发2017.. 这篇是真的不水了

Kibana插件大概类型有

• visTypes 视图组件，Visualize
• app 应用组件，如timeline
• hacks, Any module that should be included in every application
• chromeNavControls,
• 更多…

首要目标是visTypes

---

全军出击

• git clone kibana，切换到与es对应的版本

• npm install,

  • git切换 http

  git config --global url."https://".insteadOf "git://"

  • chromedriver失败

  npm ERR! chromedriver@2.32.3 install: `node install.js`

  解决方法

  npm install chromedriver --chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver

  • 默认dev 启动方式会使用ssl,所以是https,如果需要修改的话，可以修改\kibana\src\cli\serve\serve.js文件。

    if (opts.dev) {
      set('env', 'development');
      set('optimize.lazy', true);
  
      // if (opts.ssl) {
      //   set('server.ssl.enabled', true);
      // }
  
      // if (opts.ssl && !has('server.ssl.certificate') && !has('server.ssl.key')) {
      //   set('server.ssl.certificate', DEV_SSL_CERT_PATH);
      //   set('server.ssl.key', DEV_SSL_KEY_PATH);
      // }
    }
  

• npm start

First Blood

自定义visTypes的话，在kibana/plugins下新建文件夹，在新建的文件夹下执行

sao kibana-plugin

可生成对应文件夹格式，如果是visTypes的话，app component，translation files，an hack component， a server API都选no就好了

• new TemplateVisType参数解析

return new TemplateVisType({
    name: 'extended_metric',
    title: 'Extended Metric',
    description: 'Based on the core Metric-Plugin but gives you the ability' +
      'to output custom aggregates on metric-results.',
    icon: 'fa-calculator',
    template: extendedMetricVisTemplate, //视图模板
    params: { //Options选项
      defaults: {
        handleNoResults: true,
        fontSize: 60,
        outputs: [
          {
            formula: 'metrics[0].value * metrics[0].value',
            label: 'Count squared',
            enabled: true
          }
        ]
      },
      editor: metricVisParamsTemplate //Options视图模板
    },
    schemas: new Schemas([ //Data相关
      {
        group: 'metrics',
        name: 'metric',
        title: 'Metric',
        min: 1,
        defaults: [
          { type: 'count', schema: 'metric' }
        ]
      }
    ])
  });

上面的例子来源于地址，一个vis插件。

看着AngularJS的语法，我想静静。

目前看起来，vis包括主要的内容包括

• schema, 为左边栏Data部分，选择已有的组件即可。一般来说，metric 数值聚合肯定是 Y 轴；bucket 聚合肯定是 X 轴；而在此基础上，Kibana4 还可以让 bucket 有不同效果，也就是 Schema 里的 segment(默认), group 和 split。根据效果不同，这里是各有增减的，比如饼图就不会有 group。

• Options(params),为左边栏Options部分，包括渲染html

• 显示可视化视图html

• controller, 为html的逻辑部分, V <-> C是双向绑定的。

先梳理一下需求，最好是在es聚合数据拿到之后，到view的那层中间将数据做修改。然后我需要找到数据处理的代码。既然这样，去看看原始vis组件吧。参考

• src/core_plugins/kbn_vislib_vis_types下方是各组件的定义部分
• src/ui/public/vislib是vis具体渲染，vis组件的controller和html渲染主要就是在这个文件下，然而我没找到比较明显的controller,渲染主要是d3进行渲染

感觉很茫然..

走不下去的时候，又倒回来重新走。解析一下上面粘的代码，首先是TemplateVisType。

export default function TemplateVisTypeFactory(Private) {
   
  const VisType = Private(VisVisTypeProvider);
  const TemplateRenderbot = Private(TemplateVisTypeTemplateRenderbotProvider);

    // ·。第一，继承VisType，增加了template检测
  _.class(TemplateVisType).inherits(VisType);
  function TemplateVisType(opts = {}) {
   
    TemplateVisType.Super.call(this, opts);

    this.template = opts.template;
    if (!this.template) {
      throw new Error('Missing template for TemplateVisType');
    }
  }
    // ·。第二，增加了createRenderbot，下面会对比看看，重写的意义
  TemplateVisType.prototype.createRenderbot = function (vis, $el, uiState) {
   
    return new TemplateRenderbot(vis, $el, uiState);
  };

  return TemplateVisType;
}

然后是看看VislibVisType，基本vis继承的是这个，跟TemplateVisType应该是差不多的