-
-
+
-
diff --git a/src/ui/public/chrome/config/filter.html b/src/ui/public/chrome/config/filter.html
index 1930ee75d01ab..71a3dd32645ef 100644
--- a/src/ui/public/chrome/config/filter.html
+++ b/src/ui/public/chrome/config/filter.html
@@ -1,7 +1,7 @@
+ interval="timefilter.refreshInterval">
diff --git a/src/ui/public/chrome/config/interval.html b/src/ui/public/chrome/config/interval.html
index 44d86b4140925..d41a601709709 100644
--- a/src/ui/public/chrome/config/interval.html
+++ b/src/ui/public/chrome/config/interval.html
@@ -1,7 +1,7 @@
+ interval="timefilter.refreshInterval">
diff --git a/src/ui/public/chrome/context.js b/src/ui/public/chrome/context.js
deleted file mode 100644
index 4328d85243ce6..0000000000000
--- a/src/ui/public/chrome/context.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import _ from 'lodash';
-import ConfigTemplate from 'ui/config_template';
-import uiModules from 'ui/modules';
-
-uiModules
-.get('kibana')
-// TODO: all of this really belongs in the timepicker
-.directive('chromeContext', function (timefilter, globalState) {
-
- var listenForUpdates = _.once(function ($scope) {
- $scope.$listen(timefilter, 'update', function (newVal, oldVal) {
- globalState.time = _.clone(timefilter.time);
- globalState.refreshInterval = _.clone(timefilter.refreshInterval);
- globalState.save();
- });
- });
-
- return {
- link: function ($scope) {
- listenForUpdates($scope);
-
- // chrome is responsible for timepicker ui and state transfer...
- $scope.timefilter = timefilter;
- $scope.toggleRefresh = function () {
- timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
- };
- }
- };
-});
-
diff --git a/src/ui/public/chrome/directives/active_http_spinner.html b/src/ui/public/chrome/directives/active_http_spinner.html
deleted file mode 100644
index eac432ce1ee6a..0000000000000
--- a/src/ui/public/chrome/directives/active_http_spinner.html
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.less b/src/ui/public/chrome/directives/app_switcher/app_switcher.less
index d085c25e0e6eb..6965353d0085b 100644
--- a/src/ui/public/chrome/directives/app_switcher/app_switcher.less
+++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.less
@@ -54,6 +54,7 @@ body { overflow-x: hidden; }
margin: 0 auto;
background-color: #fff;
+ &.hidden-chrome { left: 0; }
&-panel {
.flex-parent(@shrink: 0);
box-shadow: -4px 0px 3px rgba(0,0,0,0.2);
@@ -84,7 +85,6 @@ body { overflow-x: hidden; }
.app-icon {
float: left;
- filter: invert(100%);
font-weight: bold;
text-align: center;
font-size: 1.7em;
@@ -95,6 +95,11 @@ body { overflow-x: hidden; }
> img {
height: 18px;
margin-top: 8px;
+ filter: invert(100%);
+ }
+ > i {
+ color: #fff;
+ line-height: @app-icon-height
}
}
@@ -128,7 +133,7 @@ body { overflow-x: hidden; }
text-decoration: none;
}
img {
- filter: invert(100%);
+ filter: none;
}
}
diff --git a/src/ui/public/chrome/directives/append_nav_controls.js b/src/ui/public/chrome/directives/append_nav_controls.js
index d37b9c6fe0a74..1433ec0654428 100644
--- a/src/ui/public/chrome/directives/append_nav_controls.js
+++ b/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(
``,
control.template
diff --git a/src/ui/public/chrome/directives/index.js b/src/ui/public/chrome/directives/index.js
index 530646292d388..d8264fd106054 100644
--- a/src/ui/public/chrome/directives/index.js
+++ b/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);
diff --git a/src/ui/public/chrome/directives/kbn_chrome.js b/src/ui/public/chrome/directives/kbn_chrome.js
index e40c57059f477..6f788b0ee61ee 100644
--- a/src/ui/public/chrome/directives/kbn_chrome.js
+++ b/src/ui/public/chrome/directives/kbn_chrome.js
@@ -1,7 +1,6 @@
import $ from 'jquery';
import UiModules from 'ui/modules';
-import ConfigTemplate from 'ui/config_template';
export default function (chrome, internals) {
@@ -46,10 +45,6 @@ export default function (chrome, internals) {
// and some local values
chrome.httpActive = $http.pendingRequests;
$scope.notifList = require('ui/notify')._notifs;
- $scope.appSwitcherTemplate = new ConfigTemplate({
- switcher: '
'
- });
-
return chrome;
}
};
diff --git a/src/ui/public/chrome/directives/kbn_loading_indicator.js b/src/ui/public/chrome/directives/kbn_loading_indicator.js
new file mode 100644
index 0000000000000..63b32dfb788bf
--- /dev/null
+++ b/src/ui/public/chrome/directives/kbn_loading_indicator.js
@@ -0,0 +1,17 @@
+import UiModules from 'ui/modules';
+import angular from 'angular';
+
+const spinnerTemplate = '
';
+
+UiModules
+.get('ui/kibana')
+.directive('kbnLoadingIndicator', function ($compile) {
+ return {
+ restrict: 'AC',
+ link: function (scope, $el) {
+ const $loadingEl = angular.element(spinnerTemplate);
+ $el.append($loadingEl);
+ $compile($loadingEl)(scope);
+ }
+ };
+});
diff --git a/src/ui/public/config_template.js b/src/ui/public/config_template.js
deleted file mode 100644
index 2430d033c7b76..0000000000000
--- a/src/ui/public/config_template.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import _ from 'lodash';
-
-function ConfigTemplate(templates) {
- var template = this;
- template.current = null;
- template.toggle = _.partial(update, null);
- template.open = _.partial(update, true);
- template.close = _.partial(update, false);
-
- function update(newState, name) {
- var toUpdate = templates[name];
- var curState = template.is(name);
- if (newState == null) newState = !curState;
-
- if (newState) {
- template.current = toUpdate;
- } else {
- template.current = null;
- }
-
- return newState;
- }
-
- template.is = function (name) {
- return template.current === templates[name];
- };
-
- template.toString = function () {
- return template.current;
- };
-}
-
-export default ConfigTemplate;
-
diff --git a/src/ui/public/directives/__tests__/config.js b/src/ui/public/directives/__tests__/config.js
index 25396bec64025..04e79d671f16d 100644
--- a/src/ui/public/directives/__tests__/config.js
+++ b/src/ui/public/directives/__tests__/config.js
@@ -6,6 +6,7 @@ import $ from 'jquery';
describe('Config Directive', function () {
var build = function () {};
+ let $testScope = null;
beforeEach(ngMock.module('kibana', function ($compileProvider) {
var renderCount = 0;
@@ -20,40 +21,22 @@ describe('Config Directive', function () {
beforeEach(ngMock.inject(function ($compile, $rootScope) {
- build = function (attrs, scopeVars) {
- var $el = $('
').attr(attrs);
- var $scope = $rootScope.$new();
- assign($scope, scopeVars || {});
- $compile($el)($scope);
- $scope.$digest();
+ build = function (scopeVars) {
+ var $el = $('');
+ $testScope = $rootScope.$new();
+ assign($testScope, scopeVars || {});
+ $compile($el)($testScope);
+ $testScope.$digest();
return $el;
};
}));
- it('renders it\'s config template', function () {
- var $config = build({ 'config-template': '""' });
- expect($config.find('uniqel').size()).to.be(1);
- });
-
- it('exposes an object a config object using it\'s name', function () {
- var $config = build(
- {
- 'config-template': '"{{ controller.name }}"',
- 'config-object': 'controller',
- },
- {
- controller: {
- name: 'foobar'
- }
- }
- );
-
- expect($config.find('uniqel').text()).to.be('foobar');
- });
-
- it('only renders the config-template once', function () {
- var $config = build({ 'config-template': '""' });
- expect($config.find('[render-counter]').text()).to.be('1');
+ it('sets the proper functions on the kbnTopNavbar prop on scope', function () {
+ var $config = build();
+ expect($testScope.kbnTopNavbar.open).to.be.a(Function);
+ expect($testScope.kbnTopNavbar.close).to.be.a(Function);
+ expect($testScope.kbnTopNavbar.is).to.be.a(Function);
+ expect($testScope.kbnTopNavbar.toggle).to.be.a(Function);
});
});
diff --git a/src/ui/public/directives/config.js b/src/ui/public/directives/config.js
index 8a9690fbe181d..1778c65a39f35 100644
--- a/src/ui/public/directives/config.js
+++ b/src/ui/public/directives/config.js
@@ -1,6 +1,5 @@
import _ from 'lodash';
import 'ui/watch_multi';
-import ConfigTemplate from 'ui/config_template';
import angular from 'angular';
import 'ui/directives/input_focus';
import uiModules from 'ui/modules';
@@ -8,75 +7,55 @@ var module = uiModules.get('kibana');
/**
- * config directive
+ * kbnTopNavbar directive
*
- * Creates a full width horizonal config section, usually under a nav/subnav.
+ * The top section that shows the timepicker, load, share and save dialogues.
* ```
- *
+ *
* ```
*/
-module.directive('config', function ($compile) {
+module.directive('kbnTopNavbar', function ($compile) {
return {
restrict: 'E',
- scope: {
- configTemplate: '=',
- configClose: '=',
- configSubmit: '=',
- configObject: '='
- },
- link: function ($scope, element, attr) {
- var tmpScope = $scope.$new();
-
- $scope.$watch('configObject', function (newVal) {
- $scope[attr.configObject] = $scope.configObject;
- });
-
- var wrapTmpl = function (tmpl) {
- if ($scope.configSubmit) {
- return '';
+ transclude: true,
+ template: `
+ `,
+ controller: ['$scope', '$compile', function ($scope, $compile) {
+ const ctrlObj = this;
+ // toggleCurrTemplate(false) to turn it off
+ ctrlObj.toggleCurrTemplate = function (which) {
+ if (ctrlObj.curr === which || !which) {
+ ctrlObj.curr = null;
} else {
- return '' + tmpl + '
';
+ ctrlObj.curr = which;
}
+ const templateToCompile = ctrlObj.templates[ctrlObj.curr] || false;
+ $scope.kbnTopNavbar.currTemplate = templateToCompile ? $compile(templateToCompile)($scope) : false;
};
- $scope.$watchMulti([
- 'configSubmit',
- 'configTemplate.current || configTemplate'
- ], function () {
- var tmpl = $scope.configTemplate;
- if (tmpl instanceof ConfigTemplate) {
- tmpl = tmpl.toString();
- }
-
- tmpScope.$destroy();
- tmpScope = $scope.$new();
-
- var html = '';
- if (tmpl) {
- html = $compile('' +
- '' +
- wrapTmpl(tmpl) +
- '
' +
- ' ' +
- '
' +
- '
+ -
+
+
+
+ -
+
+
+
+
+
+ -
+
+
+
diff --git a/src/ui/public/timepicker/toggle.js b/src/ui/public/timepicker/toggle.js
index 2b9bf03fdc6be..c2a10da89712b 100644
--- a/src/ui/public/timepicker/toggle.js
+++ b/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', (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: ($scope, $el, attrs) => {
+ listenForUpdates($scope);
+
+ $scope.timefilter = timefilter;
+ $scope.toggleRefresh = () => {
+ timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
+ };
+ },
};
});