Fixing kbn append nav controls

src/plugins/kibana/public/dashboard/index.html

@@ -14,47 +14,47 @@
       <button
         aria-label="Save Dashboard"
         aria-haspopup="false"
-        aria-expanded="{{ configTemplate.is('save') }}"
-        ng-class="{active: configTemplate.is('save')}"
-        ng-click="configTemplate.toggle('save');">
+        aria-expanded="{{ kbnTopNavbar.is('save') }}"
+        ng-class="{active: kbnTopNavbar.is('save')}"
+        ng-click="kbnTopNavbar.toggle('save');">
         <span>Save</span>
       </button>
       <button
         aria-label="Load Saved Dashboard"
         aria-haspopup="false"
-        aria-expanded="{{ configTemplate.is('load') }}"
-        ng-class="{active: configTemplate.is('load')}"
-        ng-click="configTemplate.toggle('load');">
+        aria-expanded="{{ kbnTopNavbar.is('load') }}"
+        ng-class="{active: kbnTopNavbar.is('load')}"
+        ng-click="kbnTopNavbar.toggle('load');">
         <span>Open</span>
       </button>
       <button
         aria-label="Share Dashboard"
         aria-haspopup="false"
-        aria-expanded="{{ configTemplate.is('share') }}"
-        ng-class="{active: configTemplate.is('share')}"
-        ng-click="configTemplate.toggle('share');">
+        aria-expanded="{{ kbnTopNavbar.is('share') }}"
+        ng-class="{active: kbnTopNavbar.is('share')}"
+        ng-click="kbnTopNavbar.toggle('share');">
         <span>Share</span>
       </button>
       <button
         aria-label="Add Visualization"
         aria-haspopup="false"
-        aria-expanded="{{ configTemplate.is('pickVis') }}"
-        ng-class="{active: configTemplate.is('pickVis')}"
-        ng-click="configTemplate.toggle('pickVis');">
+        aria-expanded="{{ kbnTopNavbar.is('pickVis') }}"
+        ng-class="{active: kbnTopNavbar.is('pickVis')}"
+        ng-click="kbnTopNavbar.toggle('pickVis');">
         <span>Add visualization</span>
       </button>
       <button
         aria-label="Options"
         aria-haspopup="false"
-        aria-expanded="{{ configTemplate.is('options') }}"
-        ng-class="{active: configTemplate.is('options')}"
-        ng-click="configTemplate.toggle('options');">
+        aria-expanded="{{ kbnTopNavbar.is('options') }}"
+        ng-class="{active: kbnTopNavbar.is('options')}"
+        ng-click="kbnTopNavbar.toggle('options');">
         <span>Options</span>
       </button>
-      <div class="chrome-actions"kbn-chrome-append-nav-controls></div>
+      <kbn-global-timepicker></kbn-global-timepicker>
     </div>
   </navbar>
-  <config config-template="configTemplate" config-object="opts"></config>
+  <kbn-top-navbar templates="configTemplates"></kbn-top-navbar>
 
   <navbar ng-show="chrome.getVisible()" name="dashboard-search">
     <form name="queryInput"
@@ -91,7 +91,7 @@
 
   <div ng-show="!state.panels.length" class="text-center start-screen">
     <h2>Ready to get started?</h2>
-    <p>Click the <a class="btn btn-xs navbtn-inverse" ng-click="configTemplate.open('pickVis'); toggleAddVisualization = !toggleAddVisualization" aria-label="Add visualization"><i aria-hidden="true" class="fa fa-plus-circle"></i></a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't setup a visualization yet visit the <a href="#/visualize" title="Visualize">"Visualize"</a> tab to create your first visualization.</p>
+    <p>Click the <a class="btn btn-xs navbtn-inverse" ng-click="kbnTopNavbar.open('pickVis'); toggleAddVisualization = !toggleAddVisualization" aria-label="Add visualization"><i aria-hidden="true" class="fa fa-plus-circle"></i></a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't setup a visualization yet visit the <a href="#/visualize" title="Visualize">"Visualize"</a> tab to create your first visualization.</p>
   </div>
 
   <dashboard-grid></dashboard-grid>

src/plugins/kibana/public/dashboard/index.js

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import $ from 'jquery';
 import angular from 'angular';
-import ConfigTemplate from 'ui/config_template';
 import chrome from 'ui/chrome';
 import 'ui/directives/config';
 import 'ui/courier';
@@ -100,15 +99,15 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
       });
       $scope.$watch('state.options.darkTheme', setDarkTheme);
 
-      $scope.configTemplate = new ConfigTemplate({
+      $scope.configTemplates = {
         save: require('plugins/kibana/dashboard/partials/save_dashboard.html'),
         load: require('plugins/kibana/dashboard/partials/load_dashboard.html'),
         share: require('plugins/kibana/dashboard/partials/share.html'),
         pickVis: require('plugins/kibana/dashboard/partials/pick_visualization.html'),
         options: require('plugins/kibana/dashboard/partials/options.html'),
         filter: require('ui/chrome/config/filter.html'),
         interval: require('ui/chrome/config/interval.html')
-      });
+      };
 
       $scope.refresh = _.bindKey(courier, 'fetch');
 
@@ -198,7 +197,7 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
 
         dash.save()
         .then(function (id) {
-          $scope.configTemplate.close('save');
+          $scope.kbnTopNavbar.close('save');
           if (id) {
             notify.info('Saved Dashboard as "' + dash.title + '"');
             if (dash.id !== $routeParams.id) {

src/plugins/kibana/public/discover/controllers/discover.js

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import angular from 'angular';
 import moment from 'moment';
-import ConfigTemplate from 'ui/config_template';
 import getSort from 'ui/doc_table/lib/get_sort';
 import rison from 'ui/utils/rison';
 import dateMath from 'ui/utils/date_math';
@@ -97,13 +96,13 @@ app.controller('discover', function ($scope, config, courier, $route, $window, N
     $scope.showInterval = !$scope.showInterval;
   };
   // config panel templates
-  $scope.configTemplate = new ConfigTemplate({
+  $scope.configTemplates = {
     load: require('plugins/kibana/discover/partials/load_search.html'),
     save: require('plugins/kibana/discover/partials/save_search.html'),
     share: require('plugins/kibana/discover/partials/share_search.html'),
     filter: require('ui/chrome/config/filter.html'),
     interval: require('ui/chrome/config/interval.html')
-  });
+  };
   $scope.timefilter = timefilter;
 
 
@@ -287,7 +286,7 @@ app.controller('discover', function ($scope, config, courier, $route, $window, N
 
       return savedSearch.save()
       .then(function (id) {
-        $scope.configTemplate.close('save');
+        $scope.kbnTopNavbar.close('save');
 
         if (id) {
           notify.info('Saved Data Source "' + savedSearch.title + '"');

src/plugins/kibana/public/discover/index.html

@@ -16,37 +16,33 @@
         <span>New</span>
       </button>
       <button
-        ng-click="configTemplate.toggle('save');"
-        ng-class="{active: configTemplate.is('save')}"
+        ng-click="kbnTopNavbar.toggle('save');"
+        ng-class="{active: kbnTopNavbar.is('save')}"
         aria-haspopup="false"
-        aria-expanded="{{ configTemplate.is('save') }}"
+        aria-expanded="{{ kbnTopNavbar.is('save') }}"
         aria-label="Save Search">
         <span>Save</span>
       </button>
       <button
         aria-haspopup="false"
-        aria-expanded="{{ configTemplate.is('load') }}"
-        ng-click="configTemplate.toggle('load');"
-        ng-class="{active: configTemplate.is('load')}"
+        aria-expanded="{{ kbnTopNavbar.is('load') }}"
+        ng-click="kbnTopNavbar.toggle('load');"
+        ng-class="{active: kbnTopNavbar.is('load')}"
         aria-label="Load Saved Search">
         <span>Open</span>
       </button>
       <button
         aria-label="Share Search"
         aria-haspopup="false"
-        aria-expanded="{{ configTemplate.is('share') }}"
-        ng-class="{active: configTemplate.is('share')}"
-        ng-click="configTemplate.toggle('share');">
+        aria-expanded="{{ kbnTopNavbar.is('share') }}"
+        ng-class="{active: kbnTopNavbar.is('share')}"
+        ng-click="kbnTopNavbar.toggle('share');">
         <span>Share</span>
       </button>
-    <div class="chrome-actions" kbn-chrome-append-nav-controls></div>
+      <kbn-global-timepicker></kbn-global-timepicker>
     </div>
   </navbar>
-  <config
-    config-template="configTemplate"
-    config-object="opts"
-    config-close="configClose"
-  ></config>
+  <kbn-top-navbar templates="configTemplates"></kbn-top-navbar>
   <navbar name="discover-search">
     <form role="form" class="fill inline-form" ng-submit="fetch()" name="discoverSearch">
       <div class="typeahead" kbn-typeahead="discover">

src/plugins/kibana/public/visualize/editor/editor.html

@@ -12,10 +12,10 @@
       </button>
       <!-- normal save -->
       <button
-        ng-class="{active: configTemplate.is('save')}"
-        ng-click="configTemplate.toggle('save')"
+        ng-class="{active: kbnTopNavbar.is('save')}"
+        ng-click="kbnTopNavbar.toggle('save')"
         ng-if="!editableVis.dirty"
-        aria-expanded="{{ configTemplate.is('save') }}"
+        aria-expanded="{{ kbnTopNavbar.is('save') }}"
         aria-label="Save Visualization">
         <span>Save</span>
       </button>
@@ -25,18 +25,18 @@
         <span>Save</span>
       </button>
       <button
-        ng-class="{active: configTemplate.is('load')}"
-        ng-click="configTemplate.toggle('load')"
+        ng-class="{active: kbnTopNavbar.is('load')}"
+        ng-click="kbnTopNavbar.toggle('load')"
         aria-haspopup="true"
-        aria-expanded="{{ configTemplate.is('load') }}"
+        aria-expanded="{{ kbnTopNavbar.is('load') }}"
         aria-label="Load Saved Visualization">
         <span>Load</span>
       </button>
       <button
-        ng-class="{active: configTemplate.is('share')}"
-        ng-click="configTemplate.toggle('share')"
+        ng-class="{active: kbnTopNavbar.is('share')}"
+        ng-click="kbnTopNavbar.toggle('share')"
         aria-haspopup="true"
-        aria-expanded="{{ configTemplate.is('share') }}"
+        aria-expanded="{{ kbnTopNavbar.is('share') }}"
         aria-label="Share Visualization">
         <span>Share</span>
       </button>
@@ -45,14 +45,13 @@
         aria-label="Refresh">
         <span>Refresh</span>
       </button>
-      <div class="chrome-actions"kbn-chrome-append-nav-controls></div>
+      <kbn-global-timepicker></kbn-global-timepicker>
     </div>
   </navbar>
-  <config
+  <kbn-top-navbar
     ng-if="chrome.getVisible()"
-    config-template="configTemplate"
-    config-object="opts">
-  </config>
+    templates="configTemplates">
+  </kbn-top-navbar>
 
   <navbar ng-if="chrome.getVisible()" name="visualize-search">
     <div class="fill bitty-modal-container">

src/plugins/kibana/public/visualize/editor/editor.js

@@ -7,7 +7,6 @@ import 'ui/visualize';
 import 'ui/collapsible_sidebar';
 import 'ui/share';
 import angular from 'angular';
-import ConfigTemplate from 'ui/config_template';
 import Notifier from 'ui/notify/notifier';
 import RegistryVisTypesProvider from 'ui/registry/vis_types';
 import DocTitleProvider from 'ui/doc_title';
@@ -81,13 +80,13 @@ uiModules
   const searchSource = savedVis.searchSource;
 
   // config panel templates
-  const configTemplate = new ConfigTemplate({
+  $scope.configTemplates = {
     save: require('plugins/kibana/visualize/editor/panels/save.html'),
     load: require('plugins/kibana/visualize/editor/panels/load.html'),
     share: require('plugins/kibana/visualize/editor/panels/share.html'),
     filter: require('ui/chrome/config/filter.html'),
     interval: require('ui/chrome/config/interval.html')
-  });
+  };
 
   if (savedVis.id) {
     docTitle.change(savedVis.title);
@@ -129,7 +128,6 @@ uiModules
     $scope.uiState = $state.makeStateful('uiState');
     $scope.timefilter = timefilter;
     $scope.opts = _.pick($scope, 'doSave', 'savedVis', 'shareData', 'timefilter');
-    $scope.configTemplate = configTemplate;
 
     editableVis.listeners.click = vis.listeners.click = filterBarClickHandler($state);
     editableVis.listeners.brush = vis.listeners.brush = brushEvent;
@@ -235,7 +233,7 @@ uiModules
 
     savedVis.save()
     .then(function (id) {
-      configTemplate.close('save');
+      $scope.kbnTopNavbar.close('save');
 
       if (id) {
         notify.info('Saved Visualization "' + savedVis.title + '"');

src/ui/public/autoload/modules.js

@@ -1,6 +1,5 @@
 import 'angular';
 import 'ui/chrome';
-import 'ui/chrome/context';
 import 'ui/bind';
 import 'ui/bound_to_config_obj';
 import 'ui/config';

src/ui/public/chrome/__tests__/kbn_loading_indicator.js

@@ -0,0 +1,47 @@
+import ngMock from 'ng_mock';
+import expect from 'expect.js';
+import uiModules from 'ui/modules';
+import $ from 'jquery';
+
+import '../directives/kbn_loading_indicator';
+
+
+describe('kbnLoadingIndicator', function () {
+  let compile;
+
+  beforeEach(() => {
+    ngMock.module('kibana');
+    ngMock.inject(function ($compile, $rootScope) {
+      compile = function (hasActiveConnections) {
+        $rootScope.chrome = {
+          httpActive: (hasActiveConnections ? [1] : [])
+        };
+        const $el = $('<div kbn-loading-indicator><div id="other-content"></div></div>');
+        $rootScope.$apply();
+        $compile($el)($rootScope);
+        return $el;
+      };
+    });
+
+  });
+
+  it('injects a loading .spinner into the element', function () {
+    const $el = compile();
+    expect($el.find('.spinner')).to.have.length(1);
+  });
+  // Doesn't work...
+  xit('applies the ng-hide class when there are no connections', function () {
+    const $el  = compile(false);
+    expect($el.find('.spinner.ng-hide')).to.have.length(1);
+  });
+  it('applies removes ng-hide class when there are connections', function () {
+    const $el  = compile(true);
+    expect($el.find('.spinner.ng-hide')).to.have.length(0);
+  });
+
+  it('doesn\'t modify the contents of what the elment already has', function () {
+    const $el = compile();
+    expect($el.find('#other-content')).to.have.length(1);
+  });
+
+});

src/ui/public/chrome/chrome.html

@@ -1,6 +1,6 @@
 <div class="content" chrome-context >
   <!-- TODO: These config dropdowns shouldn't be hard coded -->
-  <nav class="app-links-wrapper">
+  <nav class="app-links-wrapper" ng-show="chrome.getVisible()">
     <li
       ng-if="!chrome.getBrand('logo')  && !chrome.getBrand('smallLogo')"
       aria-label="{{ chrome.getAppTitle() }} Logo"
@@ -21,28 +21,12 @@
 
     <app-switcher>
     </app-switcher>
-    <div class="bottom-apps hide app-links">
-      <div class="app-link">
-        <a href="http://elastic.co">
-          <div class="app-icon">
-            <i class="fa fa-gear"></i>
-          </div>
-          <div class="app-title">settings</div>
-        </a>
-      </div>
-      <div class="app-link">
-        <a href="http://elastic.co">
-          <div class="app-icon">
-            <i class="fa fa-user"></i>
-          </div>
-          <div class="app-title">Jon Doe</div>
-          <div class="app-title">Logout</div>
-        </a>
-      </div>
+    <div class="bottom-apps">
+      <div class="chrome-actions app-links" kbn-chrome-append-nav-controls></div>
     </div>
   </nav>
 
-  <div class="app-wrapper">
+  <div class="app-wrapper" ng-class="{ 'hidden-chrome': !chrome.getVisible() }">
     <div class="app-wrapper-panel">
       <kbn-notifications list="notifList"></kbn-notifications>
       <nav
@@ -80,7 +64,7 @@
         </div>
         <!-- /Full navbar -->
       </nav>
-      <div class="application" ng-class="'tab-' + chrome.getFirstPathSegment() + ' ' + chrome.getApplicationClasses()" ng-view></div>
+      <div class="application" ng-class="'tab-' + chrome.getFirstPathSegment() + ' ' + chrome.getApplicationClasses()" ng-view kbn-loading-indicator></div>
     </div>
   </div>
 </div>