We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Kibana是一个针对Elasticsearch的开源分析及可视化平台,用来搜索、查看交互存储在Elasticsearch索引中的数据。它操作简单,基于浏览器的用户界面可以快速创建仪表板(dashboard)实时显示Elasticsearch查询动态。
kibana需要64位操作系统,并且需要先安装Elasticsearch,运行Elasticsearch又需要先安装java。
参考资料:
Elasticsearch guide Kibana guide
下面以mac上安装部署kibana为例:
1.安装java。到java里面下载对应的最新java版本,并安装。
2.安装并运行elasticsearch。到download elasticsearch里面下载对应的最新elasticsearch版本,解压之后进入elasticsearch文件夹运行命令:./bin/elasticsearch。
3.查看elasticsearch是否运行成功。浏览器打开elasticsearch默认地址:http://localhost:9200/,如果显示如下信息则表示运行成功:
http://localhost:9200/
{ "name" : "Cv0Qzv6", "cluster_name" : "elasticsearch", "cluster_uuid" : "LFNZ-yjkRRW4dcVyuWlbug", "version" : { "number" : "6.5.3", "build_flavor" : "default", "build_type" : "tar", "build_hash" : "159a78a", "build_date" : "2018-12-06T20:11:28.826501Z", "build_snapshot" : false, "lucene_version" : "7.5.0", "minimum_wire_compatibility_version" : "5.6.0", "minimum_index_compatibility_version" : "5.0.0" }, "tagline" : "You Know, for Search" }
4.安装并运行kibana。到download kibana里面下载对应的最新kibana版本,解压之后进入kibana文件夹运行命令:./bin/kibana。
5.查看kibana是否运行成功。在浏览器打开kibana默认地址:http://localhost:5601,如果能够打开kibana则表示kibana运行成功。
http://localhost:5601
6.添加数据。首次打开kibana会提示导入数据,直接倒入demo data即可。然后就可以愉快的调教kibana了。
kibana是开源的,但是只能用于elastic公司的项目。从这里可以看到kibana的源码:elastic/kibana。
kibana的大致结构如下:
整体框架:React 和 Angular 结合使用(利用ngReact库在Angular里面内嵌React)。
ui框架:EUI。Elastic公司自己开发的一套UI,开源,但是不是MIT协议,只能用于Elastic公司开发的产品。https://github.com/elastic/eui。
可视化框架:D3和Vega。D3官网 和 vega官网。
使用的拖拽库:react-grid-layout。
word cloud用的d3-cloud。优点是能够自动把文本直接转化为word cloud。
实现angular里面使用react的库:ngreact。
主要研究kibana的visualize和dashboard两个板块。
visualize板块的功能:
dashboard板块的功能:
*说明:*visualization指的是visualize板块里面那样的展示图表,saved searches指的是储存的数据,它在dashboard里面以表格的形式展示出来。
为了实现上面的主要功能,kibana有如下的数据结构:
通过一个index储存这三类数据:saved searches, visualizations and dashboards。
kibana把所有能放在dashboard上的数据都叫做embeddable,按我的理解就是visualization 和 saved searches的数据。
每个embeddable数据包含2类数据:
注意:embeddable state里面有没有具体查询出来的数据?我觉得应该有,还应该有相应的查询条件。
通过embeddable state,kibana实现了2个功能:
每个dashboard都有2类数据:
dashboard板块有这么一个功能:可以通过右飘窗实时查看panel里面的数据。
而从panel到右飘窗之间,kibana封装了一层inspecter,用来处理panel数据并显示到右飘窗上面。这之间的东西又叫做adapter。
目前kibana有2个adapter,一个用来处理visualization里面的数据,一个用来发送http请求(saved searches需要这种处理)。
由于从dashboard到es之间的数据获取是异步的,并且有等待时间。所以kibana封装了一层courier来处理requests,比如说设置ß时间间距啊,中断requests,分发fetch事件来更新panels等。
其中把requests queued up的必要性没有看懂~
kibana同时使用D3和Vega图表库,其中:
kibana的主要目录如下(其他目录有的没有看懂,有的是服务目录,有的是处理特定业务逻辑的目录,就不研究了):
├── src │ ├── core_plugins #核心插件 │ │ ├── kibana #kibana插件 │ │ ├── elasticsearch #处理elasticsearch的插件 │ │ ├── table_vis #处理table图表的插件 │ │ └── ... #其他插件 │ ├── ui #ui │ │ ├── public #主要ui模块 │ │ │ ├── chrome #chrome浏览器模块 │ │ │ ├── draggable #拖拽模块 │ │ │ ├── embeddable #embeddable模块 │ │ │ ├── i18n #国际化模块 │ │ │ ├── inspector #inspector模块 │ │ │ ├── private #ag模块 │ │ │ ├── register #ag注册模块 │ │ │ ├── vis #可视化模块 │ │ │ └── ... #其他模块 │ │ ├── ui_render #ui的render │ │ ├── ui_setting #ui的setting │ │ └── ... #其它ui模块 │ └── test #测试 │ ├── functional #功能测试 │ ├── scripts #封装的js │ ├── dev_certs #封装的授权js │ └── ... #其他
从上面可以看到:
下面对于core_plugins,ui和test三个模块分别进行深入研究。
core_plugins中的每一个插件都至少有public文件夹,index.js和package.json。其中public文件夹进行业务处理,index.js进行导出,package.json标注这个插件的名字和版本等信息。
其中index.js的结构是这样的:
// 以类似npm module的形式挂载模块 Object.defineProperty(exports, "__esModule", { value: true }); exports.default = function (kibana) { return new kibana.Plugin({ id: require: config() {} init(){} uiExports: {} }) }
ui主要包括渲染相关的模块。其中最重要的是modules.js,它里面导出一个uiModules来进行ag模块加载,提取和删除等。
其它一些模块会根据provider和factory来进行封装,其中利用provider来导出,利用factory以工厂模式的形式来创建模块。部分代码示例如下:
// 提供导出内容 const noneRequestHandlerProvider = function () { return { name: 'none', handler: function () { return new Promise((resolve) => { resolve(); }); } }; }; // 注册这个模块 VisRequestHandlersRegistryProvider.register(noneRequestHandlerProvider); // 导出 export { noneRequestHandlerProvider };
// 获取kibana模块 const module = uiModules.get('kibana'); // 以工厂模式的形式封装PersistedState module.factory('PersistedState', ($injector) => { const Private = $injector.get('Private'); const Events = Private(EventsProvider); // Extend PersistedState to override the EmitterClass class with // our Angular friendly version. return class AngularPersistedState extends PersistedState { constructor(value, path) { super(value, path, Events); } }; });
像这种大项目又是怎么进行测试的呢?由于测试的每个模块都与很多模块关联,所以kibana做了如下工作:
import expect from 'expect.js'; // 接受测试环境的getService和getPageObjects作为参数导入 export default function ({ getService, getPageObjects }) { const log = getService('log'); const PageObjects = getPageObjects(['common', 'visualize']); describe('chart types', function () { before(function () { log.debug('navigateToApp visualize'); return PageObjects.common.navigateToUrl('visualize', 'new'); }); it('should show the correct chart types', async function () { const expectedChartTypes = [ 'Area', 'Controls', 'Coordinate Map', 'Data Table', 'Gauge', 'Goal', 'Heat Map', 'Horizontal Bar', 'Line', 'Markdown', 'Metric', 'Pie', 'Region Map', 'Tag Cloud', 'Timelion', 'Vega', 'Vertical Bar', 'Visual Builder', ]; // find all the chart types and make sure there all there const chartTypes = await PageObjects.visualize.getChartTypes(); log.debug('returned chart types = ' + chartTypes); log.debug('expected chart types = ' + expectedChartTypes); expect(chartTypes).to.eql(expectedChartTypes); }); }); }
一般vue项目的目录结构是这样的:
├── src │ ├── api #api │ ├── assets #图片等资源 │ ├── components #组件 │ ├── i18n #国际化 │ ├── plugins #插件 │ ├── router #路由 │ ├── store #store │ ├── styles #样式 │ ├── utils #工具 │ ├── views #视图 │ │ ├── admin #管理界面 │ │ ├── auth #权限界面 │ │ ├── layouts #视图布局 │ │ └── ... #其他
对于小项目来说,上面的目录结构已经足够了,并且比kibana的结构更加清晰(个人认为,kibana的目录结构有点混乱,可能是因为kibana迭代过很多次的原因)。但是随着项目的增大,可以考虑参考kibana的目录结构。
另外,对于vue项目,组件一般都是.vue后缀的单文件组件,所以如果想要在这之上对组件进行封装的话,怎么办?mixin和vue.extend了解一下。
以上纯属个人理解,由于我自己水平和时间有限,一些理解错误在所难免,欢迎提出并一起讨论。
感受:
Dashboard State Walkthrough
Discover Context App Implementation Notes
Inspector
unify the way global context is passed down to visualize
[Meta] Improve support for custom embeddable configurations at the dashboard panel level
Embeddables API
vega-vs-vegalite
Vislib general overview
The text was updated successfully, but these errors were encountered:
No branches or pull requests
概述
Kibana是一个针对Elasticsearch的开源分析及可视化平台,用来搜索、查看交互存储在Elasticsearch索引中的数据。它操作简单,基于浏览器的用户界面可以快速创建仪表板(dashboard)实时显示Elasticsearch查询动态。
安装部署kibana
kibana需要64位操作系统,并且需要先安装Elasticsearch,运行Elasticsearch又需要先安装java。
参考资料:
Elasticsearch guide
Kibana guide
下面以mac上安装部署kibana为例:
1.安装java。到java里面下载对应的最新java版本,并安装。
2.安装并运行elasticsearch。到download elasticsearch里面下载对应的最新elasticsearch版本,解压之后进入elasticsearch文件夹运行命令:./bin/elasticsearch。
3.查看elasticsearch是否运行成功。浏览器打开elasticsearch默认地址:
http://localhost:9200/
,如果显示如下信息则表示运行成功:4.安装并运行kibana。到download kibana里面下载对应的最新kibana版本,解压之后进入kibana文件夹运行命令:./bin/kibana。
5.查看kibana是否运行成功。在浏览器打开kibana默认地址:
http://localhost:5601
,如果能够打开kibana则表示kibana运行成功。6.添加数据。首次打开kibana会提示导入数据,直接倒入demo data即可。然后就可以愉快的调教kibana了。
kibana的大致结构
kibana是开源的,但是只能用于elastic公司的项目。从这里可以看到kibana的源码:elastic/kibana。
kibana的大致结构如下:
整体框架:React 和 Angular 结合使用(利用ngReact库在Angular里面内嵌React)。
ui框架:EUI。Elastic公司自己开发的一套UI,开源,但是不是MIT协议,只能用于Elastic公司开发的产品。https://github.com/elastic/eui。
可视化框架:D3和Vega。D3官网 和 vega官网。
使用的拖拽库:react-grid-layout。
word cloud用的d3-cloud。优点是能够自动把文本直接转化为word cloud。
实现angular里面使用react的库:ngreact。
kibana的主要功能
主要研究kibana的visualize和dashboard两个板块。
visualize板块的功能:
dashboard板块的功能:
*说明:*visualization指的是visualize板块里面那样的展示图表,saved searches指的是储存的数据,它在dashboard里面以表格的形式展示出来。
kibana的数据结构
为了实现上面的主要功能,kibana有如下的数据结构:
ES
通过一个index储存这三类数据:saved searches, visualizations and dashboards。
embeddables
kibana把所有能放在dashboard上的数据都叫做embeddable,按我的理解就是visualization 和 saved searches的数据。
每个embeddable数据包含2类数据:
注意:embeddable state里面有没有具体查询出来的数据?我觉得应该有,还应该有相应的查询条件。
通过embeddable state,kibana实现了2个功能:
dashboards
每个dashboard都有2类数据:
dashboards和panel的数据交互
kibana的其它功能
inspector
dashboard板块有这么一个功能:可以通过右飘窗实时查看panel里面的数据。
而从panel到右飘窗之间,kibana封装了一层inspecter,用来处理panel数据并显示到右飘窗上面。这之间的东西又叫做adapter。
目前kibana有2个adapter,一个用来处理visualization里面的数据,一个用来发送http请求(saved searches需要这种处理)。
courier
由于从dashboard到es之间的数据获取是异步的,并且有等待时间。所以kibana封装了一层courier来处理requests,比如说设置ß时间间距啊,中断requests,分发fetch事件来更新panels等。
其中把requests queued up的必要性没有看懂~
D3和Vega
kibana同时使用D3和Vega图表库,其中:
kibana的基本架构
目录说明
kibana的主要目录如下(其他目录有的没有看懂,有的是服务目录,有的是处理特定业务逻辑的目录,就不研究了):
从上面可以看到:
下面对于core_plugins,ui和test三个模块分别进行深入研究。
core_plugins
core_plugins中的每一个插件都至少有public文件夹,index.js和package.json。其中public文件夹进行业务处理,index.js进行导出,package.json标注这个插件的名字和版本等信息。
其中index.js的结构是这样的:
ui
ui主要包括渲染相关的模块。其中最重要的是modules.js,它里面导出一个uiModules来进行ag模块加载,提取和删除等。
其它一些模块会根据provider和factory来进行封装,其中利用provider来导出,利用factory以工厂模式的形式来创建模块。部分代码示例如下:
test
像这种大项目又是怎么进行测试的呢?由于测试的每个模块都与很多模块关联,所以kibana做了如下工作:
和vue项目对比
一般vue项目的目录结构是这样的:
对于小项目来说,上面的目录结构已经足够了,并且比kibana的结构更加清晰(个人认为,kibana的目录结构有点混乱,可能是因为kibana迭代过很多次的原因)。但是随着项目的增大,可以考虑参考kibana的目录结构。
另外,对于vue项目,组件一般都是.vue后缀的单文件组件,所以如果想要在这之上对组件进行封装的话,怎么办?mixin和vue.extend了解一下。
声明
以上纯属个人理解,由于我自己水平和时间有限,一些理解错误在所难免,欢迎提出并一起讨论。
感受:
参考资料
Dashboard State Walkthrough
Discover Context App Implementation Notes
Discover Context App Implementation Notes
Inspector
unify the way global context is passed down to visualize
[Meta] Improve support for custom embeddable configurations at the dashboard panel level
Embeddables API
vega-vs-vegalite
Vislib general overview
The text was updated successfully, but these errors were encountered: