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，暫時還沒解決，後續有發現會持續更新。