Create "chromeConfigControls" for plugins to add chrome config sections

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__/config_controls.js

@@ -0,0 +1,54 @@
+import ngMock from 'ngMock';
+import $ from 'jquery';
+import expect from 'expect.js';
+
+import uiModules from 'ui/modules';
+import chromeConfigControlsRegistry from 'ui/registry/chrome_config_controls';
+import Registry from 'ui/registry/_registry';
+import 'ui/chrome/directives/config_controls';
+import 'ui/directives/config';
+
+describe('chrome config controls', function () {
+  let compile;
+  let stubRegistry;
+
+  beforeEach(ngMock.module('kibana', function (PrivateProvider) {
+    stubRegistry = new Registry({
+      order: ['order']
+    });
+
+    PrivateProvider.swap(chromeConfigControlsRegistry, stubRegistry);
+  }));
+
+  beforeEach(ngMock.inject(function ($compile, $rootScope) {
+    compile = function () {
+      const $el = $('<kbn-chrome-config-controls></kbn-chrome-config-controls>');
+      let $scope = $rootScope.$new();
+      $compile($el)($scope);
+      $scope.$digest();
+      return $el;
+    };
+  }));
+
+  it('injects configs from the ui/registry/chrome_config_controls registry', function () {
+    stubRegistry.register(function () {
+      return {
+        name: 'control1',
+        order: 1,
+        config: {
+        }
+      };
+    });
+    stubRegistry.register(function () {
+      return {
+        name: 'control2',
+        order: 2,
+        config: {
+        }
+      };
+    });
+
+    var $el = compile();
+    expect($el.find('config')).to.have.length(2);
+  });
+});

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

@@ -4,18 +4,26 @@ import expect from 'expect.js';
 
 import uiModules from 'ui/modules';
 import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
+import chromeConfigControlsRegistry from 'ui/registry/chrome_config_controls';
 import Registry from 'ui/registry/_registry';
 
 describe('chrome nav controls', function () {
   let compile;
-  let stubRegistry;
+  let stubNavRegistry;
+  let stubConfigRegistry;
 
   beforeEach(ngMock.module('kibana', function (PrivateProvider) {
-    stubRegistry = new Registry({
+    stubNavRegistry = new Registry({
       order: ['order']
     });
 
-    PrivateProvider.swap(chromeNavControlsRegistry, stubRegistry);
+    PrivateProvider.swap(chromeNavControlsRegistry, stubNavRegistry);
+
+    stubConfigRegistry = new Registry({
+      order: ['order']
+    });
+
+    PrivateProvider.swap(chromeConfigControlsRegistry, stubConfigRegistry);
   }));
 
   beforeEach(ngMock.inject(function ($compile, $rootScope) {
@@ -28,7 +36,7 @@ describe('chrome nav controls', function () {
   }));
 
   it('injects templates from the ui/registry/chrome_nav_controls registry', function () {
-    stubRegistry.register(function () {
+    stubNavRegistry.register(function () {
       return {
         name: 'control',
         order: 100,
@@ -40,22 +48,39 @@ describe('chrome nav controls', function () {
     expect($el.find('#testTemplateEl')).to.have.length(1);
   });
 
+  it('injects templates from the ui/registry/chrome_config_controls registry', function () {
+    stubConfigRegistry.register(function () {
+      return {
+        name: 'control',
+        order: 100,
+        navbar: {
+          template: `<span id="testTemplateEl"></span>`
+        }
+      };
+    });
+
+    var $el = compile();
+    expect($el.find('#testTemplateEl')).to.have.length(1);
+  });
+
   it('renders controls in reverse order, assuming that each control will float:right', function () {
-    stubRegistry.register(function () {
+    stubConfigRegistry.register(function () {
       return {
         name: 'control2',
         order: 2,
-        template: `<span id="2", class="testControl"></span>`
+        navbar: {
+          template: `<span id="2", class="testControl"></span>`
+        }
       };
     });
-    stubRegistry.register(function () {
+    stubNavRegistry.register(function () {
       return {
         name: 'control1',
         order: 1,
         template: `<span id="1", class="testControl"></span>`
       };
     });
-    stubRegistry.register(function () {
+    stubNavRegistry.register(function () {
       return {
         name: 'control3',
         order: 3,

src/ui/public/chrome/chrome.html

@@ -1,5 +1,5 @@
 <kbn-notifications list="notifList"></kbn-notifications>
-<div class="content" chrome-context >
+<div class="content">
   <nav
     ng-style="::{ background: chrome.getNavBackground() }"
     ng-class="{ show: chrome.getVisible() }"
@@ -56,19 +56,13 @@
     <!-- /Full navbar -->
   </nav>
 
+  <kbn-chrome-config-controls></kbn-chrome-config-controls>
   <!-- TODO: These config dropdowns shouldn't be hard coded -->
   <config
     config-template="appSwitcherTemplate"
     config-object="chrome"
     config-close="appSwitcherTemplate.close">
   </config>
 
-  <config
-    ng-show="timefilter.enabled"
-    config-template="pickerTemplate"
-    config-object="timefilter"
-    config-close="pickerTemplate.close">
-  </config>
-
   <div class="application" ng-class="'tab-' + chrome.getActiveTabId('-none-') + ' ' + chrome.getApplicationClasses()" ng-view></div>
 </div>

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

@@ -1,14 +1,11 @@
+import _ from 'lodash';
 import $ from 'jquery';
 
 import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
+import chromeConfigControlsRegistry from 'ui/registry/chrome_config_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) {
 
   UiModules
@@ -17,16 +14,43 @@ export default function (chrome, internals) {
     return {
       template: function ($element) {
         const parts = [$element.html()];
-        const controls = Private(chromeNavControlsRegistry);
+        const navs = Private(chromeNavControlsRegistry);
+        const configs = Private(chromeConfigControlsRegistry);
+
+        const controls = [
+          {
+            name: 'active http requests',
+            order: -100,
+            template: spinnerHtml
+          },
+
+          ...navs.map(function (nav) {
+            return {
+              template: `<!-- nav control ${nav.name} -->${nav.template}`,
+              order: nav.order
+            };
+          }),
+
+          ...configs.map(function (config) {
+            let $wrapper = $('<div></div>');
+            let $directive = $(`<render-directive definition="configs['${config.name}'].navbar"></render-directive>`);
+            $directive.html(config.navbar.template);
+            $wrapper.append($directive);
+            return {
+              template: `<!-- nav control ${config.name} -->${$wrapper.html()}`,
+              order: config.order
+            };
+          }),
+        ];
 
-        for (const control of [spinner, ...controls.inOrder]) {
-          parts.unshift(
-            `<!-- nav control ${control.name} -->`,
-            control.template
-          );
-        }
+        _.sortBy(controls, 'order').forEach(function (control) {
+          parts.unshift(control.template);
+        });
 
         return parts.join('\n');
+      },
+      controller: function ($scope) {
+        $scope.configs = Private(chromeConfigControlsRegistry).byName;
       }
     };
   });

src/ui/public/chrome/directives/config_controls.html

@@ -0,0 +1,8 @@
+<div ng-repeat="control in controls">
+  <config
+    config-template="control.config.template"
+    config-object="control.config.object"
+    config-submit="::control.config.submit"
+    config-close="::control.config.close">
+  </config>
+</div>

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

@@ -0,0 +1,22 @@
+import $ from 'jquery';
+
+import chromeConfigControlsRegistry from 'ui/registry/chrome_config_controls';
+import UiModules from 'ui/modules';
+import configControlsHtml from './config_controls.html';
+
+export default function (chrome, internals) {
+
+  UiModules
+  .get('kibana')
+  .directive('kbnChromeConfigControls', function (Private) {
+    const controls = Private(chromeConfigControlsRegistry);
+    return {
+      restrict: 'E',
+      template: configControlsHtml,
+      controller: function ($scope) {
+        $scope.controls = controls.inOrder;
+      }
+    };
+  });
+
+}

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

@@ -3,8 +3,10 @@ import 'ui/directives/config';
 import './app_switcher';
 import kbnChromeProv from './kbn_chrome';
 import kbnChromeNavControlsProv from './append_nav_controls';
+import kbnChromeConfigControlsProv from './config_controls';
 
 export default function (chrome, internals) {
   kbnChromeProv(chrome, internals);
   kbnChromeNavControlsProv(chrome, internals);
+  kbnChromeConfigControlsProv(chrome, internals);
 }

src/ui/public/courier/courier.js

@@ -22,7 +22,7 @@ import RedirectWhenMissingProvider from './_redirect_when_missing';
 
 
 uiModules.get('kibana/courier')
-.service('courier', function ($rootScope, Private, Promise, indexPatterns) {
+.service('courier', function ($rootScope, Private, Promise, indexPatterns, timefilter) {
   function Courier() {
     var self = this;
 
@@ -134,9 +134,11 @@ uiModules.get('kibana/courier')
     };
 
     // Listen for refreshInterval changes
-    $rootScope.$watchCollection('timefilter.refreshInterval', function () {
-      var refreshValue = _.get($rootScope, 'timefilter.refreshInterval.value');
-      var refreshPause = _.get($rootScope, 'timefilter.refreshInterval.pause');
+    $rootScope.$watchCollection(function () {
+      return timefilter.refreshInterval;
+    }, function (interval) {
+      var refreshValue = _.get(interval, 'value');
+      var refreshPause = _.get(interval, 'pause');
       if (_.isNumber(refreshValue) && !refreshPause) {
         self.fetchInterval(refreshValue);
       } else {

src/ui/public/directives/__tests__/timepicker.js

@@ -28,23 +28,18 @@ var init = function () {
   clock = sinon.useFakeTimers(moment(anchor).valueOf());
 
   // Create the scope
-  ngMock.inject(function ($rootScope, $compile) {
+  ngMock.inject(function ($rootScope, $compile, timefilter) {
 
     // Give us a scope
     $parentScope = $rootScope;
 
     // Add some parameters to it
-    var timefilter = {
-      time : {
-        from: moment().subtract(15, 'minutes'),
-        to: moment(),
-        mode: undefined
-      },
-      refreshInterval : {
-        value : 0,
-        display : 'Off'
-      }
-    };
+    timefilter.time.from = moment().subtract(15, 'minutes');
+    timefilter.time.to = moment();
+    timefilter.time.mode = undefined;
+    timefilter.refreshInterval.value = 0;
+    timefilter.refreshInterval.display = 'Off';
+
     $parentScope.timefilter = timefilter;
 
     // Create the element