基于 Kibana6.x eUI的React 页面开发

React和JS的混合对于server side JS 开发真的是个创意, 模块化清晰, 构造简单。 


Ref: 

1. React : https://reactjs.org/

2. Kibana Plugin: https://elastic.github.io/eui/


下面是尝试开发出这样的一个页面的步骤, 供喜欢的人参考:

基于 Kibana6.x eUI的React 页面开发_第1张图片


a. 配置好kibana6.x branch 的开发环境

    https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md


b. 使用plugin generator 先产生基础开发project

   https://github.com/elastic/template-kibana-plugin

    The plugin generator became a part of the Kibana project as of Kibana 6.3. If you are targeting versions before Kibana 6.3 then use the Kibana plugin sao template.

c.  使用EuiTabs产生页面的Tab 部分


基于 Kibana6.x eUI的React 页面开发_第2张图片
基于 Kibana6.x eUI的React 页面开发_第3张图片

d. 使用EuiInMemoryTable 读取kibana dashboards list 并显示在页面上


基于 Kibana6.x eUI的React 页面开发_第4张图片

e. 这样的的两个控件就完成了页面的开发, 还是相当高效的。

你可能感兴趣的:(基于 Kibana6.x eUI的React 页面开发)