kibana黑科技

作者： 马努

---

需要用kibana展示dashboard的时候想要个性定制化怎么办？我们知道kibana分享的iframe左上角带有add a filter图标，加载的时候有kibana logo，这样界面不统一，于是搜索GitHub和elasticsearch 社区，找到了解决方法。当然这些对于前端工程师这些都是小儿科，可是对于一个不了解前端的数据工程师来说，这些简单粗暴的应急方法还是很好的。我的kibana版本6.3.0，亲测有效。

1. 修改kibana右上角图标

替换kibana/optimize/bundles/ebdca7741674eca4e1fadeca157f3ae6.svg 文件

2. 隐藏kibana “add a filter”图标

编辑 kibana/optimize/bundles/commons.style.css

filter-bar {
  z-index: 4 !important;
  display: none;
}

3. 修改加载logo

编辑 kibana/src/ui/ui_render/views/ui_app.jade
替换图片url，图片是svg格式base64加密。
修改之后需要重启kibana。

.kibanaWelcomeLogo {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OSIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDQ5IDY0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHBhdGggZmlsbD0iIzNFQkVCMCIgZD0iTTEuNDE2MzE1NzMsNjQgTDQ4LjY0MDA4MTEsNjQgQzQ4LjY0MDA4MTEsNTEuMTI2NCA0MS4yMzYyNjI0LDM5LjY4NDggMjkuNzQ3NDk0NCwzMi4zNzA0IEwxLjQxNjMxNTczLDY0IFoiLz4KICAgIDxwYXRoIGZpbGw9IiMzN0E1OTUiIGQ9Ik0wLDQxLjYgTDAsNjQgTDMuMDM3NTY4LDY0IEwyOS43NTA2NTYsMzIuMzY1NiBDMjcuOTI1ODQ1MywzMS4yMDMyIDI1Ljk5MjQwNTMsMzAuMTUyIDIzLjk3NTQ2NjcsMjkuMjA4IEwwLDQxLjYgWiIvPgogICAgPHBhdGggZmlsbD0iIzM1MzUzNCIgZD0iTTAsMjAuOCBMMCw1Ny42IEwyMy45Nzk1MiwyOS4yMDMyIEMxNi45MDA3Nzg3LDI1Ljg5NzYgMjQuOTM1Mjk2LDIyLjQgMTYuMjEzMzMzMywyMi40IEwwLDIwLjggWiIvPgogICAgPHBhdGggZmlsbD0iI0U5NDc4QiIgZD0iTTQ4LjY0LDAgTDAsMCBMMCwyNCBDOC43MjE5NjI2NywyNCAxNi45MDA3Nzg3LDI1Ljg5NzYgMjMuOTc5NTIsMjkuMjAzMiBMNDguNjQsMCBaIi8+CiAgPC9nPgo8L3N2Zz4K");
background-repeat: no-repeat;
background-size: contain;
width: 60px;
height: 60px;
margin: 10px 0px 10px 20px;
 }

最终结果

---

暂时查到这几个，对于kibana分享的地图放大缩小报错的问题，似乎是kibana用的第三方插件的bug，暂时还没解决，后续有发现会持续更新。