一次尝试：用户自定义不一样类型报表

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}}