一次嘗試：用戶自定義不一樣類型報表

1.建立插件
npm包管理：
npm install -g yo

npm install -g generator-kibana-plugin

mkdir echartdashboard-plugin

cd echartdashboard-plugin

yo kibana-plugin

 

2.測試插件步驟：
在插件目錄下執行 npm install 安裝相關的插件
建立一個名叫 kibana 的文件夾，將這個 echartdashboard-plugin 整個目錄都拷貝到 kibana 目錄下。（kibana/echartdashboard-plugin)
將這個kibana目錄保存或壓縮爲一個zip文件
使用 kibana-plugins 的local方法安裝這個zip文件

3.開發插件
index.jskibana的控制器在啓動的時候，會逐個加載安裝了的插件。插件是以對象（kibana.Plugin）的方式存在。這個對象是在index.js文件中定義的。其中：

app -> main 屬性定義的是啓動的js
app -> icon 屬性定義的是側邊欄的圖標
config屬性，定義的是從 kinbana.yml 裏面的屬性和默認值（注意：在kibana.yml，參數必須放在plugins名字下面，好比這裏是echart_dashboard）
init(server, options) ，是初始化函數，裏面傳入了server對象，這是kibana啓動的http server (HAPI) 對象，在函數中，我設置了路由，即一開始就加載作好的vue + echart的dashboard。

import { resolve } from 'path';
import apiRoute from './server/routes/redirect';
import cacheData from './server/cache/cachedata'
export default function (kibana) {
return new kibana.Plugin({
require: ['elasticsearch'],

uiExports: {

app: {
title: '',
description: 'a independent dashboard based on echarts',
main: 'plugins/echart_dashboard/app.js',
icon: 'plugins/echart_dashboard/echarts.svg'
}
},

config(Joi) {
return Joi.object({
enabled: Joi.boolean().default(true),
interval: Joi.string().default( "now/w"),
index: Joi.string().default("app*")
}).default();
},

init(server, options) {
// Add server routes and initalize the plugin here
cacheData.setCacheData(server);
apiRoute(server);
}

});
};

4.redirect.js
/app/echart_dashboard， 這個path是plugin的訪問目錄，返回../plugins/echart_dashboard,，這裏返回目錄，實際上是默認會返回該目錄下的index.html文件，全部，public目錄下必須有index.html文件
其餘定義的路由，實際上就是經過rest接口提供dashboard的數據
import cacheData from "../cache/cachedata"
export default function (server) {
server.route({
path: '/app/echart_dashboard',
method: 'GET',
handler(req, reply) {
reply.redirect('../plugins/echart_dashboard')
}
});

server.route({
path: '/api/echart_dashboard/ModuleInstance',
method: ['POST', 'GET'],config: {cors : true},
handler: function (req, reply) {
reply(cacheData.getCacheData('ModuleInstance'));
}
});

server.route({
path: '/api/echart_dashboard/jsondata',
method: ['POST', 'GET'],config: {cors : true},
handler: function (req, reply) {
reply(cacheData.getCacheData('jsondata'));
}
});

server.route({
path: '/api/echart_dashboard/arraydata',
method: ['POST', 'GET'],config: {cors : true},
handler: function (req, reply) {
reply(cacheData.getCacheData('arraydata'));
}
});

server.route({
path: '/api/echart_dashboard/errjdata',
method: ['POST', 'GET'],config: {cors : true},
handler: function (req, reply) {
reply(cacheData.getCacheData('errjdata'));
}
});

server.route({
path: '/api/echart_dashboard/timestampData',
method: ['POST', 'GET'],config: {cors : true},
handler: function (req, reply) {
reply(cacheData.getCacheData('timestampData'));
}
});
}

 

5.public 目錄
這裏public目錄就是咱們的echart dashboard插件了。用vue開發一個dashboard.參考：https://github.com/zce/dashboard。

開發完以後，用vue腳手架提供的build命令 (npm run build)。會生成一個dist目錄

 

6.要修改build.js assetsPath

require('./check-versions')()
require('shelljs/global')
env.NODE_ENV = 'production'

var path = require('path')
var config = require('../config')
var ora = require('ora')
var webpack = require('webpack')
var webpackConfig = require('./webpack.prod.conf')

console.log(
' Tip:\n' +
' Built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
)

var spinner = ora('building for production...')
spinner.start()

var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath)
mkdir('-p', assetsPath)
cp('-R', 'plugins/echart_dashboard/*', assetsPath)

webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n')
})

6.修改index.js 修改 assetsSubDirectory
var path = require('path')

module.exports = {build: {env: require('./prod.env'),index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'plugins/echart_dashboard',assetsPublicPath: '/',productionSourceMap: false,// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: false,productionGzipExtensions: ['js', 'css']},dev: {env: require('./dev.env'),port: 8081,assetsSubDirectory: 'plugins/echart_dashboard',assetsPublicPath: '/',proxyTable: {},// CSS Sourcemaps off by default because relative paths are "buggy"// with this option, according to the CSS-Loader README// (https://github.com/webpack/css-loader#sourcemaps)// In our experience, they generally work as expected,// just be aware of this issue when enabling this option.cssSourceMap: false}}