React架构插件开发
在本篇实现一个app 插件demo,在demo页面可以显示服务器端时间。

插件入口

在该文件中定义插件名,描述,以及插件前端和后端入口,配置。
1
export default function (kibana) {
2
return new kibana.Plugin({
3
require: ['elasticsearch'],
4
name: 'demo',
5
uiExports: {
6
app: {
7
title: 'Demo',
8
description: 'An awesome Kibana plugin',
9
main: 'plugins/demo/app',
10
styleSheetPath: require('path').resolve(__dirname, 'public/app.scss'),
11
},
12
},
13
14
config(Joi) {
15
return Joi.object({
16
enabled: Joi.boolean().default(true),
17
}).default();
18
},
19
20
init(server, options) { // eslint-disable-line no-unused-vars
21
// Add server routes and initialize the plugin here
22
exampleRoute(server);
23
}
24
});
25
}
Copied!

插件前端

首先编写react 组件,展示页面
1
import React from 'react';
2
import {
3
EuiPage,
4
EuiPageHeader,
5
EuiTitle,
6
EuiPageBody,
7
EuiPageContent,
8
EuiPageContentHeader,
9
EuiPageContentBody,
10
EuiText
11
} from '@elastic/eui';
12
13
export class Main extends React.Component {
14
constructor(props) {
15
super(props);
16
this.state = {};
17
}
18
19
componentDidMount() {
20
/*
21
FOR EXAMPLE PURPOSES ONLY. There are much better ways to
22
manage state and update your UI than this.
23
*/
24
const { httpClient } = this.props;
25
httpClient.get('../api/Demo/example').then((resp) => {
26
this.setState({ time: resp.data.time });
27
});
28
}
29
render() {
30
const { title } = this.props;
31
return (
32
<EuiPage>
33
<EuiPageBody>
34
<EuiPageHeader>
35
<EuiTitle size="l">
36
<h1>{title} Hello World!</h1>
37
</EuiTitle>
38
</EuiPageHeader>
39
<EuiPageContent>
40
<EuiPageContentHeader>
41
<EuiTitle>
42
<h2>Congratulations</h2>
43
</EuiTitle>
44
</EuiPageContentHeader>
45
<EuiPageContentBody>
46
<EuiText>
47
<h3>You have successfully created your first Kibana Plugin!</h3>
48
<p>The server time (via API call) is {this.state.time || 'NO API CALL YET'}</p>
49
</EuiText>
50
</EuiPageContentBody>
51
</EuiPageContent>
52
</EuiPageBody>
53
</EuiPage>
54
);
55
}
56
}
Copied!
将组件挂载到页面上
1
import React from 'react';
2
import { uiModules } from 'ui/modules';
3
import chrome from 'ui/chrome';
4
import { render, unmountComponentAtNode } from 'react-dom';
5
6
import 'ui/autoload/styles';
7
import './less/main.less';
8
import { Main } from './components/main';
9
10
const app = uiModules.get('apps/demo');
11
12
app.config($locationProvider => {
13
$locationProvider.html5Mode({
14
enabled: false,
15
requireBase: false,
16
rewriteLinks: false,
17
});
18
});
19
app.config(stateManagementConfigProvider =>
20
stateManagementConfigProvider.disable()
21
);
22
23
function RootController($scope, $element, $http) {
24
const domNode = $element[0];
25
26
// render react to DOM
27
render(<Main title="Demo" httpClient={$http} />, domNode);
28
29
// unmount react on controller destroy
30
$scope.$on('$destroy', () => {
31
unmountComponentAtNode(domNode);
32
});
33
}
34
35
chrome.setRootController('demo', RootController);
Copied!

服务端

1
export default function (server) {
2
3
server.route({
4
path: '/api/Demo/example',
5
method: 'GET',
6
handler(req, reply) {
7
reply({ time: (new Date()).toISOString() });
8
}
9
});
10
11
}
Copied!

效果