enhance tab settings

src/plugins/appSwitcher/public/appSwitcher.js

@@ -2,13 +2,13 @@ require('plugins/appSwitcher/appSwitcher.less');
 
 require('chrome')
 .setLogo('url(/images/kibana.png) left no-repeat', true)
+.setShowAppsLink(false)
 .setTabs([
   {
     id: '',
     title: 'Apps'
   }
 ])
-.linkToAppSwitcher(false)
 .setRootTemplate(require('plugins/appSwitcher/appSwitcher.html'))
 .setRootController('switcher', function SwitcherController($http) {
   var switcher = {

src/plugins/kibana/public/kibana.js

@@ -13,6 +13,11 @@ define(function (require) {
   require('chrome')
   .setLogo('url(/images/kibana.png) left no-repeat', true)
   .setNavBackground('#222222')
+  .setTabDefaults({
+    resetWhenActive: true,
+    trackLastPath: true,
+    activeIndicatorColor: '#656a76'
+  })
   .setTabs([
     {
       id: 'discover',

src/plugins/kibana/public/visualize/editor/styles/.editor.less

@@ -9,8 +9,8 @@
   // For the vis-editor sidebar nav
   .navbar-default .navbar-nav {
     &> .active > a:before {
-      border: 7px solid @gray-lighter;
-      border-color: transparent transparent @gray-lighter transparent;
+      border: 7px solid transparent;
+      border-bottom-color: @gray-lighter;
     }
 
     .danger {

src/plugins/serverStatus/index.js

@@ -20,7 +20,10 @@ module.exports = function (kibana) {
         nvd3$: {
           path: 'nvd3/build/nv.d3.js',
           exports: 'window.nv',
-          imports: 'd3'
+          imports: 'd3,nvd3Styles'
+        },
+        nvd3Styles: {
+          path: 'nvd3/build/nv.d3.css'
         }
       },
 

src/plugins/serverStatus/public/KibanaStatusApp.js

@@ -76,7 +76,8 @@ require('modules')
   // the object representing all of the elements the ui touches
   $scope.ui = {
     overallStatus: null,
-    statuses: [],
+    statuses: null,
+    loading: true,
     charts: {}
   };
 

src/ui/chrome/Tab.js

@@ -6,15 +6,26 @@ define(function (require) {
     this.id = spec.id;
     this.title = spec.title;
     this.active = false;
-
+    this.resetWhenActive = !!spec.resetWhenActive;
+    this.storeKey = spec.trackLastPath ? 'lastPath:' + this.id : null;
     this.rootPath = '/' + this.id;
-    this.lastPathStorageKey = 'lastPath:' + this.id;
-    this.lastPath = sessionStorage.getItem(this.lastPathStorageKey) || this.rootPath;
+    this.lastPath = this.storeKey && sessionStorage.getItem(this.storeKey);
+    this.activeIndicatorColor = spec.activeIndicatorColor || null;
   }
 
   Tab.prototype.pathUpdate = function (path) {
+    if (!this.storeKey) return;
     this.lastPath = path;
-    sessionStorage.setItem(this.lastPathStorageKey, this.lastPath);
+    sessionStorage.setItem(this.storeKey, this.lastPath);
+  };
+
+  Tab.prototype.href = function () {
+    if (this.active) {
+      if (this.resetWhenActive) return '#' + this.rootPath;
+      return null;
+    }
+
+    return '#' + (this.lastPath || this.rootPath);
   };
 
   return Tab;

src/ui/chrome/TabCollection.js

@@ -4,36 +4,43 @@ define(function (require) {
   function TabCollection() {
     var _ = require('lodash');
 
-    var all = [];
+    var tabs = null;
+    var specs = null;
+    var defaults = null;
     var activeTab = null;
 
-    this.set = function (tabSpecs) {
-      _.invoke(all.splice(0), 'destroy');
+    this.set = function (_specs) {
+      specs = _.cloneDeep([].concat(_specs || []));
+      this._rebuildTabs();
+    };
 
-      _.each(tabSpecs, function (tabSpec) {
-        all.push(new Tab(tabSpec));
-      });
+    this.setDefaults = function () {
+      defaults = _.clone(arguments[0]);
+      this._rebuildTabs();
     };
 
     this.get = function () {
-      return all;
+      return [].concat(tabs || []);
+    };
+
+    this._rebuildTabs = function () {
+      _.invoke(this.get(), 'destroy');
+      tabs = _.map(specs, function (spec) {
+        return new Tab(_.defaults({}, spec, defaults));
+      });
     };
 
     this.getActive = function () {
       return activeTab;
     };
 
-    this.trackPathUpdate = function (path, temporaryChange) {
+    this.trackPathUpdate = function (path, temp) {
       var id = path.split('/')[1] || '';
 
-      all.forEach(function (tab) {
-        tab.active = (tab.id === id);
-        if (tab.active) {
-          activeTab = tab;
-          if (!temporaryChange) {
-            tab.pathUpdate(path);
-          }
-        }
+      this.get().forEach(function (tab) {
+        var active = tab.active = (tab.id === id);
+        if (active) activeTab = tab;
+        if (active && !temp) tab.pathUpdate(path);
       });
     };
   }

src/ui/chrome/chrome.html

@@ -13,13 +13,14 @@
         <span class="icon-bar"></span>
       </button>
       <span class="visible-xs">
-        <span ng-if="chrome.getActiveTab()" bo-bind="chrome.getActiveTab().title" class="navbar-brand"></span>
+        <span ng-if="chrome.getActiveTab()" class="navbar-brand">{{ chrome.getActiveTab().title }}</span>
+        <span ng-if="chrome.getBrand()" class="navbar-brand">{{ chrome.getBrand() }}</span>
         <span ng-show="chrome.httpActive.length" class="spinner"></span>
       </span>
     </div>
 
     <!-- Full navbar -->
-    <div collapse="!showCollapsed" class="navbar-collapse" id="kibana-primary-navbar">
+    <div collapse="!showCollapsed" class="navbar-collapse">
       <ul class="nav navbar-nav" role="navigation">
         <li
           ng-if="chrome.logo"
@@ -27,6 +28,7 @@
           aria-label="{{ chrome.getAppTitle() }} Logo"
           class="logo hidden-sm"
           ></li>
+
         <li
           ng-if="chrome.smallLogo"
           ng-style="{ 'background': chrome.smallLogo }"
@@ -34,12 +36,14 @@
           class="logo-small visible-sm hidden-xs"
           ></li>
 
-        <li ng-if="chrome.linkToAppSwitcher()">
+        <li ng-if="chrome.getBrand()" class="navbar-brand">{{ chrome.getBrand() }}</li>
+
+        <li ng-if="chrome.getShowAppsLink()">
           <a href="/apps"><i class="fa fa-th" alt="Go to app switcher"></i></a>
         </li>
 
         <li ng-repeat="tab in chrome.getTabs()" ng-class="{ active: tab.active }">
-          <a ng-href="#{{ tab.active ? tab.id : tab.lastPath }}">
+          <a ng-href="{{ tab.href() }}" ng-style="{ 'border-bottom-color': tab.activeIndicatorColor }">
             {{ tab.title }}
           </a>
         </li>

src/ui/chrome/chrome.js

@@ -7,13 +7,15 @@ define(function (require) {
   require('components/timefilter/timefilter');
   require('components/private');
   require('components/promises');
+  require('components/style_compile');
 
   var TabCollection = require('chrome/TabCollection');
 
   var tabs = new TabCollection();
   var rootController = null;
   var rootTemplate = null;
-  var linkToSwitcher = true;
+  var showAppsLink = true;
+  var brand = null;
   var payload = window.__KBN__;
   window.__KBN__ = null;
 
@@ -23,6 +25,16 @@ define(function (require) {
     smallLogo: null
   };
 
+  /**
+   * Set the default configuration for tabs.
+   *
+   * @param {object} defaults - an object that will be applied to all existing and new tabs defined
+   */
+  chrome.setTabDefaults = function (defaults) {
+    tabs.setDefaults(defaults);
+    return chrome;
+  };
+
   /**
    * Set what tabs should be shown in the header.
    *
@@ -92,7 +104,7 @@ define(function (require) {
       controllerName = 'chrome.$$rootControllerConstruct';
     }
 
-    rootController = controllerName + (as ? ' as ' + as : '' );
+    rootController = controllerName + ( as ? ' as ' + as : '' );
     return chrome;
   };
 
@@ -119,6 +131,22 @@ define(function (require) {
   };
 
 
+  /**
+   * Should the link to the app switcher appear in the header?
+   *
+   * @param  {Bool} val
+   * @return {chrome}
+   */
+  chrome.setShowAppsLink = function (val) {
+    showAppsLink = !!val;
+    return chrome;
+  };
+
+  chrome.setBrand = function (val) {
+    brand = val;
+    return chrome;
+  };
+
   /**
    * Get the tab list
    * @return {Tab[]} - array of chrome/Tab objects
@@ -163,16 +191,12 @@ define(function (require) {
     return payload.app.id;
   };
 
-  /**
-   * Should the link to the app switcher appear in the header?
-   *
-   * @param  {Bool} val
-   * @return {chrome}
-   */
-  chrome.linkToAppSwitcher = function (val) {
-    if (!arguments.length) return linkToSwitcher;
-    linkToSwitcher = val;
-    return chrome;
+  chrome.getShowAppsLink = function () {
+    return showAppsLink;
+  };
+
+  chrome.getBrand = function () {
+    return brand;
   };
 
   /**
@@ -186,6 +210,12 @@ define(function (require) {
     return tab ? tab.id : def;
   };
 
+  /**
+   * Get the id of the active tab
+   *
+   * @param {*} def - the default value if there isn't any active tab
+   * @return {*}
+   */
   chrome.bootstrap = function (angularModules) {
     var kibana = modules.get('kibana', angularModules);
 

src/ui/components/modules.js

@@ -59,4 +59,4 @@ define(function (require) {
     get: get,
     close: close
   };
-});
+});

src/ui/ui-styles/base.less

@@ -116,11 +116,6 @@ notifications {
 //== Subnav
 //
 // Use for adding a subnav to your app
-
-.navbar-nav li a {
-  cursor: pointer;
-}
-
 .navbar {
   margin-bottom: 0px!important;
 }
@@ -129,6 +124,11 @@ notifications {
   margin-right: 15px;
 }
 
+a {
+  // overriden by next rule for a tags that actually have an href
+  cursor: default;
+}
+
 [ng-click], [clip-copy], [href], [confirm-click] {
   cursor: pointer;
 }

src/ui/ui-styles/mixins.less

@@ -16,25 +16,3 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
-
-.nav-active-arrow (@color: @body-bg) {
-  @media (max-width: @screen-sm-min) {
-    &:before {
-      display: none !important;
-    }
-  }
-
-  &:before {
-    content:"";
-    display:inline-block;
-    position:absolute;
-    border:@navbar-arrow-size solid @color;
-    border-color:transparent transparent @color transparent;
-    top:(@navbar-height - @navbar-arrow-size*2);
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    width: 0;
-    height: 0;
-  }
-}

src/ui/ui-styles/theme.less

@@ -32,16 +32,10 @@
   }
 
   &-default {
-
     .badge {
       background-color: #fff;
       color: @navbar-default-bg;
     }
-
-    .navbar-nav > .active > a {
-      .nav-active-arrow(@body-bg);
-    }
-
   }
 
   &-inverse {
@@ -61,18 +55,31 @@
       background-color: #fff;
       color: lighten(@navbar-inverse-bg, 10%);
     }
+  }
 
+  .navbar-nav > .active > a {
+    border-bottom-color: @body-bg; // active-arrow-color
 
-    .navbar-nav {
-      > .active > a {
-        .nav-active-arrow(@navbar-default-bg);
-      }
-
-      > .active.to-body > a {
-        .nav-active-arrow(@body-bg);
-      }
+    // navbar active arrow base styles
+    &:before {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      border: @navbar-arrow-size solid transparent;
+      border-bottom-color: inherit;
+      top: (@navbar-height - @navbar-arrow-size*2);
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      width: 0;
+      height: 0;
     }
 
+    @media (max-width: @screen-sm-min) {
+      &:before {
+        display: none !important;
+      }
+    }
   }
 
   &-brand {