Day8:隐藏仪表盘的菜单栏

Advent | 作者 三斗室 | 发布于2015年12月09日 | | 阅读数:2147

Kibana4 上线后,又有同事找过来。还好这次是小问题:『新版的这个仪表盘顶部菜单栏太宽了啊。头顶上监控屏幕空间有限,能不能省省?』

跟 Kibana3 相比,确实宽了点。这时候好几个方案瞬间进入我脑子里:
  1. 浏览器往下拖动一点,不过要确保定期刷新的时候还能回到拖动位置;
  2. 进 ui/public/chrome/chrome.html 里把 navbar 干掉;
  3. 添加一个 bootstrap 效果,navbar 默认隐藏,鼠标挪上去自动浮现。


不过等打开 chrome.html 看了一下,发现 navbar 本身是有相关的隐藏判断的:
<nav
ng-style="::{ background: chrome.getNavBackground() }"
ng-class="{ show: chrome.getVisible() }"
class="hide navbar navbar-inverse navbar-static-top">
这个设置在 ui/public/chrome/api/angular.js 里的 internals.setVisibleDefault(!$location.search().embed);。我们知道 $locatio.search() 是 AngularJS 的标准用法,这里也就是代表 URL 请求参数里是否有 ?embed 选项。

好了,我们试一下,把 http://localhost:5601/app/kiba ... ydash 改成http://localhost:5601/app/kiba ... embed,回车,果然,整个菜单栏都消失了!同步消失的还有每个 panel 的编辑按钮。

其实呢,embed 在页面上是有说明的,在 dashboard 的 share 连接里,提供了一个 iframe 分享方式,iframe 里使用的,就是 embed 链接!

注意:Kibana4 部分版本的 share 说明中的 embed 位置生成的有问题,请小心。

想了解更全面的 ELK Stack 知识和细节,欢迎购买我的《ELK Stack权威指南》,也欢迎加 QQ 群:315428175 哟。

[尊重社区原创,转载请保留或注明出处]
本文地址:http://elasticsearch.cn/article/18


3 个评论

赞!
你也来写啊……不然我写到一半就没货了……
没问题,开始接力游戏吧

要回复文章请先登录注册