欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

用Vue开发kibana6插件

程序员文章站 2022-04-18 23:16:28
...

kibana版本:6.1.1

注意本次教程为kibana6.1.1版本的插件开发,由于kibana6.3.0及以上版本用Kibana Plugin Generator生成插件模板,我试过,但是改了插件模板的代码之后,服务一直处于restarting server状态,故我把kibana版本退到6.1.1,而且生成插件的模板也变成sao,下文有说。

一、搭建环境

step1: 把kibana6.1.1的git项目下载下来,地址:https://github.com/elastic/kibana,解压到任意一个目录。
用Vue开发kibana6插件
用Vue开发kibana6插件
step2: 到官网下载6.1.1版本的elasticsearch,解压到任意一个目录。地址:https://www.elastic.co/downloads/past-releases
用Vue开发kibana6插件

step3:把es先跑起来,注,跑es需要先安装JDK
不用修改配置文件,直接进入elasticsearch-6.1.1\bin,双击elasticsearch.bat文件。
打开http://localhost:9200/地址,发现类似下面的就是成功了。红色圈起来的地方为版本号
用Vue开发kibana6插件

step4:把kibana跑起来,注:kibana运行要安装相应的node版本(版本要求在.node-version文件可见),kibana6.1.1要求的node版本是6.12.2
①:把kibana-6.1.1的文件夹名字改为kibana,因为在kibana6.3.0以上版本kibana安装插件时会根据kibana这个名字路径进行放置的,而不是kibana-6.1.1这个名字,当成习惯,改一下好了。我顺便把es和kibana放在同一个目录下:
用Vue开发kibana6插件
②:进入kibana/目录,运行npm install把相关依赖包安装了
用Vue开发kibana6插件
③:全局安装kibana插件模板生成器sao:npm install -g sao
④:进入kibana\plugins\目录,手动创建一个文件夹,取名任意,我这里取名为app,进入kibana\plugins\app目录运行sao kibana-plugin,然后一路点回车,sao就会帮你安装一个插件的模板文件了。
用Vue开发kibana6插件
⑤:回到kibana\目录,执行npm start即可,运行成功之后打开http://localhost:5601即可自动跳到类似页面:
用Vue开发kibana6插件
点击右侧的图标A,会跳到app的欢迎界面。
用Vue开发kibana6插件

二、文件结构及部分解读

①综述:插件开发主要是在kibana/plugin/app下面进行开发
用Vue开发kibana6插件

②server: server就是服务器,以及路由设置。默认生成的模板文件会带有一个路由的案例,可自行查看.
③public: 程序开发的主要文件夹。
④index.js: 相当于插件的入口文件,kibana以new kibana.Plugin方式注册新插件
用Vue开发kibana6插件
进入index文件就会执行,main: 'plugins/app/app'这个代码的意思就是打开plugins/app/public/app.js文件作为响应。而app.js里面就是一些angular语法,以及这个文件的响应。
用Vue开发kibana6插件
uiExports的各个设置意义大概如下,官方网址:https://www.elastic.co/guide/cn/kibana/current/development-uiexports.html
用Vue开发kibana6插件

三、用Vue开发kibana插件

①:在public下新建一个文件夹pages,里面新建一个文件App.vue,写上最简单的vue结构

<template>
  <div>{{message}}</div>
</template>
<script>
  export default {
    data() {
      return {
        message:'helloworld'
      }
    }
  }
</script>
<style>
</style>

用Vue开发kibana6插件
用Vue开发kibana6插件
②:修改templates/index.html文件代码改为

<div class="container" ng-controller="demoHelloWorld">
  <div id="app"></div>
</div>

用Vue开发kibana6插件
③:修改public/app.js文件,代码修改为:

import { uiModules } from 'ui/modules';
import uiRoutes from 'ui/routes';
import Vue from 'vue/dist/vue.js';
import App from './pages/App.vue';

import 'ui/autoload/styles';
import './less/main.less';
import template from './templates/index.html';

uiRoutes.enable();
uiRoutes
  .when('/', {
    template
  });

uiModules
  .get('app/demo', [])
  .controller('demoHelloWorld', function ($scope, $route, $interval) {
    new Vue({
      components: { App },
      render: h => h('app')
    }).$mount('#app');
  });

④:在kibana/目录下
1. 安装vue:npm install vue -d
2. 安装vue-loader:npm install aaa@qq.com -d注:15版本与14版本有差异,请注意,我这里安装vue-loader的14版本
3. 安装vue-template-compiler:npm install vue-template-compiler -d

⑤:修改文件kibana/src/optimize/base_optimizer.js
在这个rules下加上这部分:

{
  test: /\.vue$/,
  loader: 'vue-loader'
},

用Vue开发kibana6插件

⑥:在kibana/目录下执行代码npm start,打开http://localhost:5601页面下的app这个页面,即可看到输出了’helloworld’。
用Vue开发kibana6插件

至此,你可以用vue来开发kibana的插件了

附一:用在Vue中使用sass

①:npm install css-loader sass-loader node-sass vue-style-loader --save-dev
②:npm install aaa@qq.com --save-devvue-loader的14版本与15版本有差异,请注意
在这个rules下加上这部分:

{
 test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!sass-loader' // <-- this line
    }
  }
},

改一下App.vue文件

<template>
  <div class="header">
    <p class="p">{{message}}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message:'helloworld'
      }
    }
  }
</script>

<style lang="scss">
  .header {
    width: 500px;
    height: 200px;
    background: #ddd;
    .p {
      color: #777;
      font-size: 20px;
      line-height: 200px;
      text-align: center;
    }
  }
</style>

run start一下就可以在http://localhost:5601看到效果了
用Vue开发kibana6插件

附二:插件打包&安装

①打包:在kibana/plugins/app目录下执行npm run build,即可在kibana\plugins\app\build找到压缩包
用Vue开发kibana6插件

②安装:在kibana/bin目录下执行kibana-plugin installl file:///D:/k/kibana/plugins/app/build/app-0.0.0.zip,其中D:/k/kibana/plugins/app/build/app-0.0.0.zip为压缩包地址。

本人最近在开发kibana插件,包括但不限于:汉化kibana,二次开发kibana,有意一起研究的小伙伴可以加我QQ:820327571(备注kibana)

参考文献:

  1. Kibana 5.4.0 插件开发
  2. Kibana Plugin Development Tutorial
  3. kibana插件开发
  4. Vue Loader
  5. kibana集成echarts 与 angular混用Vue
相关标签: kibana