visTypes插件案例

简介

在这个案例中,项目目标是实现一个clock插件,在插件中可以设置时间格式。在这个案例能讲解如何定义一个visType 插件,在visType 插件有哪些特性可以使用。

实践

在 开始写项目之前,先说一下kibana插件对于kibana版本绑定,官方给的已知kibana plugin ,可能大家下载下来在自己 的版本中无法运行,这个时候需要修改一下package.json中的version,该成自己需要使用的版本即可。
在开发之前,先说一下,由于本人不是专业的前端开发人员,对于es6,angular.js经验为零,只能边看教程,边学习,难免存在一些旧思想,欢迎大家指正交流。

准备

首先新建项目 clock(源码详见)
然后利用模板工具生成项目
1
PS E:\github\kibana\kibana\plugins\clock> sao kibana-plugin
2
? Name of your plugin? clock
3
? Provide a short description An awesome Kibana plugin for clock !
4
? What Kibana version are you targeting? master
5
? Should an app component be generated? No
6
? Should translation files be generated? No
7
? Should an hack component be generated? No
8
? Should a server API be generated? No
9
Initialized empty Git repository in E:/github/kibana/kibana/plugins/clock/.git/
10
11
> [email protected] postinstall E:\github\kibana\kibana\plugins\clock\node_modules\spawn-sync
12
> node postinstall
13
14
15
> [email protected] postinstall E:\github\kibana\kibana\plugins\clock
16
> plugin-helpers postinstall
17
18
npm notice created a lockfile as package-lock.json. You should commit this file.
19
npm WARN [email protected] No repository field.
20
npm WARN [email protected] No license field.
21
22
added 361 packages in 32.334s
23
success Your plugin has been created, use `npm start` to run it
Copied!

1. 修改index.js

这个文件主要是根据kibana api 定义该插件类型,本次demo 定义插件类型为visTypes.修改内容如下:
1
export default function (kibana) {
2
return new kibana.Plugin({
3
name: 'clock',
4
uiExports: {
5
visTypes:['plugins/clock/clock']
6
}
7
});
8
}
Copied!

2.新增clock.js

该文件根据TemplateVisType定义VisType类型,然后将该类型通过VisVisTypeProvider注册到kibana 中,同时新建一个ClockController,实现时间定时刷新。
1
const ClockProvider = Private=>{
2
const VisFactory = Private(VisFactoryProvider);
3
4
return VisFactory.createAngularVisualization({
5
name: 'clock',
6
title: 'My Clock',
7
icon: 'fa-clock-o',
8
category: CATEGORY.OTHER, //指定图标所在分类
9
description: 'An awesome Kibana plugin for clock',
10
visConfig: {
11
defaults: {
12
format: 'HH:mm:ss'
13
},
14
template: ClockTemplate,
15
},
16
editorConfig: {
17
optionsTemplate: EditorTemplate,
18
},
19
requestHandler: 'none',
20
responseHandler: 'none',
21
options: {
22
showIndexSelection: false,
23
showQueryBar: false,
24
showFilterBar: false,
25
},
26
});
27
};
28
VisTypesRegistryProvider.register(ClockProvider);
Copied!
在使用kibana系统中组件时,需要将该资源导入一下,才能够使用,例如:
1
import {
2
uiModules
3
} from 'ui/modules';
4
import { VisFactoryProvider } from 'ui/vis/vis_factory';
5
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
6
import { CATEGORY } from 'ui/vis/vis_category';
7
8
import ClockTemplate from './clock.html';
9
import EditorTemplate from './edit.html';
10
import './clock.css';
Copied!
通过以下方式新增一个angular.js 的controller.
1
const module = uiModules.get('kibana/clock', ['kibana']);
2
3
// Add a controller to this module
4
module.controller('ClockController', function ($scope, $timeout) {
5
6
const setTime = function () {
7
$scope.time = Date.now();
8
$timeout(setTime, 1000);
9
};
10
setTime();
11
12
});
Copied!

3.新增页面文件

clock.html
该页面显示controller中定义的时钟函数
1
<div class="clockVis" ng-controller="ClockController">
2
{{ time | date:vis.params.format }}
3
</div>
Copied!
clock.css
定义页面时钟展示样式
1
.clockVis {
2
width: 100%;
3
display: flex;
4
align-items: center;
5
justify-content: center;
6
color: #555;
7
font-weight: bold;
8
font-size: 2.5em;
9
}
Copied!
edit.html
这个页面主要是 作为visTypes组件中Edit,可视化修改中的参数配置。
1
<div class="form-group">
2
<label>Time Format</label>
3
<input type="text" ng-model="vis.params.format" class="form-control">
4
</div>
Copied!

4.运行

在kibana 根目录下执行 npm start命令即可,效果如下:

参考