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-plugin
productionGzip: 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
}
}