[kibana源码]增加菜单项

问题描述：
由于kibana与另外一个系统需要添加超链关系，因此需要在kibana系统设置菜单前面增加一个菜单项。

源码讲解：
kibana的系统菜单都是在kibana.js（src\plugins\kibana\public\kibana.js）中进行可配置的。

.setTabs([
  {
    id: 'discover',
    title: '检索'
  },
  {
    id: 'visualize',
    title: '可视化自助分析',
    activeIndicatorColor: function () {
      return (String(this.lastUrl).indexOf('/visualize/step/') === 0) ? 'white' : '#656a76';
    }
  },
  {
    id: 'dashboard',
    title: '监控仪表盘'
  },
  {
    id:'index.html',
    title:'xxxx',
    baseUrl:'http://www.thinkgreed.com/fsz-admin/'
  },
  {
    id: 'settings',
    title: '系统设置'
  }
])

因此只需要按照同样的格式增加项目即可。在我添加的title为xxxx的菜单中，指定了baseUrl，因为要进行跨域访问，如果不指定则会添加系统默认的baseUrl

到此处还没有结束，因为系统会通过baseUrl和id来组装url，同时也会增加一长串的参数，如：

http://www.thinkgreed.com/app/kibana#/visualize?_g=(refreshInterval%3A(display%3AOff%2Cpause%3A!f%2Cvalue%3A0)%2Ctime%3A(from%3Anow-15m%2Cmode%3Aquick%2Cto%3Anow))

因为添加的菜单只是要完成跳转到另外一个页面的目的，因为不想增加过多的参数。

如果需要完成这样的目的，就需要阅读Tab.js(src/ui/public/chrome/Tab.js)

href() {
    if (this.active) {
      return this.resetWhenActive ? this.rootUrl : null;
    }
    if ('index.html' == this.id){
      return this.rootUrl
    }
    return this.lastUrl || this.rootUrl;
  }

在chrom.html中可以看到，超链的获取主要是tab.href()来得到，因此需要看href()的逻辑。通过上下人可以看到this.lastUrl就是增加了很多参数的url而this.rootUrl则是简单的url，因此只需要增加简单的判断逻辑：

if ('index.html' == this.id){
      return this.rootUrl
    }

就可以达到增加个id为index.html的菜单，点击后跳转到其他页面（url:http://www.thinkgreed.com/fsz-admin/index.html）

ps:同时可以参照chrome.html 和 kbn_chrome.js 两个文件进行理解

[kibana源码]增加菜单项

猜你喜欢