[Chrome] Append nav controls changes

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

@@ -52,7 +52,8 @@
         ng-click="configTemplate.toggle('options');">
         <span>Options</span>
       </button>
-      <div class="chrome-actions"kbn-chrome-append-nav-controls></div>
+      <kbn-loading-indicator></kbn-loading-indicator>
+      <kbn-global-timepicker></kbn-global-timepicker>
     </div>
   </navbar>
   <config config-template="configTemplate" config-object="opts"></config>

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

@@ -39,7 +39,8 @@
         ng-click="configTemplate.toggle('share');">
         <span>Share</span>
       </button>
-    <div class="chrome-actions" kbn-chrome-append-nav-controls></div>
+      <kbn-loading-indicator></kbn-loading-indicator>
+      <kbn-global-timepicker></kbn-global-timepicker>
     </div>
   </navbar>
   <config

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

@@ -45,7 +45,8 @@
         aria-label="Refresh">
         <span>Refresh</span>
       </button>
-      <div class="chrome-actions"kbn-chrome-append-nav-controls></div>
+      <kbn-loading-indicator></kbn-loading-indicator>
+      <kbn-global-timepicker></kbn-global-timepicker>
     </div>
   </navbar>
   <config

src/ui/public/chrome/chrome.html

@@ -22,6 +22,7 @@
     <app-switcher>
     </app-switcher>
     <div class="bottom-apps hide app-links">
+      <div class="chrome-actions" kbn-chrome-append-nav-controls></div>
       <div class="app-link">
         <a href="http://elastic.co">
           <div class="app-icon">

src/ui/public/chrome/directives/append_nav_controls.js

@@ -2,12 +2,6 @@ import $ from 'jquery';
 
 import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
 import UiModules from 'ui/modules';
-import spinnerHtml from './active_http_spinner.html';
-
-const spinner = {
-  name: 'active http requests',
-  template: spinnerHtml
-};
 
 export default function (chrome, internals) {
 
@@ -19,7 +13,7 @@ export default function (chrome, internals) {
         const parts = [$element.html()];
         const controls = Private(chromeNavControlsRegistry);
 
-        for (const control of [spinner, ...controls.inOrder]) {
+        for (const control of [...controls.inOrder]) {
           parts.unshift(
             `<!-- nav control ${control.name} -->`,
             control.template

src/ui/public/chrome/directives/index.js

@@ -3,6 +3,7 @@ import 'ui/directives/config';
 import './app_switcher';
 import kbnChromeProv from './kbn_chrome';
 import kbnChromeNavControlsProv from './append_nav_controls';
+import courierLoadingIndicator from './kbn_loading_indicator';
 
 export default function (chrome, internals) {
   kbnChromeProv(chrome, internals);

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

@@ -0,0 +1,12 @@
+import UiModules from 'ui/modules';
+
+const spinnerTemplate = '<div class="spinner" ng-show="chrome.httpActive.length"></div>';
+
+UiModules
+.get('ui/kibana')
+.directive('kbnLoadingIndicator', function() {
+  return {
+    restrict: 'E',
+    template: spinnerTemplate
+  }
+});

src/ui/public/styles/base.less

@@ -144,6 +144,7 @@ a {
     padding-bottom: 0;
     .kibana-nav-actions {
       margin-left: auto;
+      line-height: 20px;
     }
     .kibana-nav-info {
       line-height: 30px;

src/ui/public/timepicker/toggle.js

@@ -1,16 +1,29 @@
 import UiModules from 'ui/modules';
 import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
+import { once, clone } from 'lodash';
 
 import toggleHtml from './toggle.html';
 
-// TODO: the chrome-context directive is currently responsible for several variables
-// on scope used by this template. We need to get rid of that directive and move that
-// logic here
+UiModules
+.get('kibana')
+.directive('kbnGlobalTimepicker', function(timefilter, globalState) {
+  const listenForUpdates = once($scope => {
+    $scope.$listen(timefilter, 'update', (newVal, oldVal) => {
+      globalState.time = clone(timefilter.time);
+      globalState.refreshInterval = clone(timefilter.refreshInterval);
+      globalState.save();
+    });
+  });
 
-chromeNavControlsRegistry.register(function () {
   return {
-    name: 'timepicker toggle',
-    order: 100,
-    template: toggleHtml
+    template: toggleHtml,
+    link: function($scope, $el, attrs) {
+      listenForUpdates($scope);
+
+      $scope.timefilter = timefilter;
+      $scope.toggleRefresh = () => {
+        timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
+      };
+    },
   };
 });