Timepicker and top navigation fixes

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

@@ -1,61 +1,11 @@
 <div dashboard-app class="app-container dashboard-container">
-  <navbar name="dashboard" class="kibana-nav-options">
+  <kbn-top-nav name="dashboard" config="topNavMenu">
     <div class="kibana-nav-info">
       <span ng-show="dash.id" class="kibana-nav-info-title">
         <span ng-bind="::dash.title"></span>
       </span>
     </div>
-
-    <div class="button-group kibana-nav-actions" role="toolbar">
-      <button ng-click="newDashboard()"
-        aria-label="New Dashboard">
-        <span>New</span>
-      </button>
-      <button
-        aria-label="Save Dashboard"
-        aria-haspopup="true"
-        aria-expanded="{{ configTemplate.is('save') }}"
-        ng-class="{active: configTemplate.is('save')}"
-        ng-click="configTemplate.toggle('save');">
-        <span>Save</span>
-      </button>
-      <button
-        aria-label="Load Saved Dashboard"
-        aria-haspopup="true"
-        aria-expanded="{{ configTemplate.is('load') }}"
-        ng-class="{active: configTemplate.is('load')}"
-        ng-click="configTemplate.toggle('load');">
-        <span>Open</span>
-      </button>
-      <button
-        aria-label="Share Dashboard"
-        aria-haspopup="true"
-        aria-expanded="{{ configTemplate.is('share') }}"
-        ng-class="{active: configTemplate.is('share')}"
-        ng-click="configTemplate.toggle('share');">
-        <span>Share</span>
-      </button>
-      <button
-        aria-label="Add Visualization"
-        aria-haspopup="true"
-        aria-expanded="{{ configTemplate.is('pickVis') }}"
-        ng-class="{active: configTemplate.is('pickVis')}"
-        ng-click="configTemplate.toggle('pickVis');">
-        <span>Add visualization</span>
-      </button>
-      <button
-        aria-label="Options"
-        aria-haspopup="true"
-        aria-expanded="{{ configTemplate.is('options') }}"
-        ng-class="{active: configTemplate.is('options')}"
-        ng-click="configTemplate.toggle('options');">
-        <span>Options</span>
-      </button>
-    </div>
-    <kbn-global-timepicker></kbn-global-timepicker>
-    <div class="chrome-actions" kbn-chrome-append-nav-controls></div>
-  </navbar>
-  <config config-template="configTemplate" config-object="opts"></config>
+  </kbn-top-nav>
 
   <navbar ng-show="chrome.getVisible()" name="dashboard-search">
     <form name="queryInput"
@@ -92,7 +42,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="kbnTopNav.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,23 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
       });
       $scope.$watch('state.options.darkTheme', setDarkTheme);
 
-      $scope.configTemplate = new ConfigTemplate({
-        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.topNavMenu = [{
+        key: 'new',
+        description: 'New Dashboard',
+        run: function () { kbnUrl.change('/dashboard', {}); },
+      }, {
+        key: 'save',
+        description: 'Save Dashboard',
+        template: require('plugins/kibana/dashboard/partials/save_dashboard.html')
+      }, {
+        key: 'open',
+        description: 'Load Saved Dashboard',
+        template: require('plugins/kibana/dashboard/partials/load_dashboard.html')
+      }, {
+        key: 'share',
+        description: 'Share Dashboard',
+        template: require('plugins/kibana/dashboard/partials/share.html')
+      }, 'timepicker'];
 
       $scope.refresh = _.bindKey(courier, 'fetch');
 
@@ -198,7 +205,7 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
 
         dash.save()
         .then(function (id) {
-          $scope.configTemplate.close('save');
+          $scope.kbnTopNav.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';
@@ -96,14 +95,23 @@ app.controller('discover', function ($scope, config, courier, $route, $window, N
   $scope.toggleInterval = function () {
     $scope.showInterval = !$scope.showInterval;
   };
-  // config panel templates
-  $scope.configTemplate = new ConfigTemplate({
-    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.topNavMenu = [{
+    key: 'new',
+    description: 'New Search',
+    run: function () { kbnUrl.change('/discover'); }
+  }, {
+    key: 'save',
+    description: 'Save Search',
+    template: require('plugins/kibana/discover/partials/save_search.html')
+  }, {
+    key: 'open',
+    description: 'Load Saved Search',
+    template: require('plugins/kibana/discover/partials/load_search.html')
+  }, {
+    key: 'share',
+    description: 'Share Search',
+    template: require('plugins/kibana/discover/partials/share_search.html')
+  }];
   $scope.timefilter = timefilter;
 
 
@@ -287,7 +295,7 @@ app.controller('discover', function ($scope, config, courier, $route, $window, N
 
       return savedSearch.save()
       .then(function (id) {
-        $scope.configTemplate.close('save');
+        $scope.kbnTopNav.close('save');
 
         if (id) {
           notify.info('Saved Data Source "' + savedSearch.title + '"');

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

@@ -1,5 +1,5 @@
 <div ng-controller="discover" class="app-container">
-  <navbar name="discover" class="kibana-nav-options">
+  <kbn-top-nav name="discover" config="topNavMenu">
     <div class="kibana-nav-info">
       <span ng-show="opts.savedSearch.id" class="kibana-nav-info-title">
         <span ng-bind="::opts.savedSearch.title"></span>
@@ -9,45 +9,7 @@
       <strong class="discover-info-hits">{{(hits || 0) | number:0}}</strong>
       <ng-pluralize count="hits" when="{'1':'hit', 'other':'hits'}"></ng-pluralize>
     </div>
-    <div class="kibana-nav-actions button-group" role="toolbar">
-      <button
-        ng-click="newQuery()"
-        aria-label="New Search">
-        <span>New</span>
-      </button>
-      <button
-        ng-click="configTemplate.toggle('save');"
-        ng-class="{active: configTemplate.is('save')}"
-        aria-haspopup="true"
-        aria-expanded="{{ configTemplate.is('save') }}"
-        aria-label="Save Search">
-        <span>Save</span>
-      </button>
-      <button
-        aria-haspopup="true"
-        aria-expanded="{{ configTemplate.is('load') }}"
-        ng-click="configTemplate.toggle('load');"
-        ng-class="{active: configTemplate.is('load')}"
-        aria-label="Load Saved Search">
-        <span>Open</span>
-      </button>
-      <button
-        aria-label="Share Search"
-        aria-haspopup="true"
-        aria-expanded="{{ configTemplate.is('share') }}"
-        ng-class="{active: configTemplate.is('share')}"
-        ng-click="configTemplate.toggle('share');">
-        <span>Share</span>
-      </button>
-    </div>
-    <kbn-global-timepicker></kbn-global-timepicker>
-    <div class="chrome-actions" kbn-chrome-append-nav-controls></div>
-  </navbar>
-  <config
-    config-template="configTemplate"
-    config-object="opts"
-    config-close="configClose"
-  ></config>
+  </kbn-top-nav>
   <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/discover/partials/save_search.html

@@ -7,7 +7,7 @@
           <input id="SaveSearch" ng-model="opts.savedSearch.title" input-focus="select" class="form-control" placeholder="Name this search...">
         </div>
         <div class="form-group">
-          <button ng-disabled="!opts.savedSearch.title" type="submit" class="btn btn-primary">
+          <button ng-disabled="!opts.savedSearch.title" data-test-subj="discover-save-search-btn" type="submit" class="btn btn-primary">
             Save
           </button>
         </div>

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

@@ -1,61 +1,12 @@
 <div ng-controller="VisEditor" class="app-container vis-editor vis-type-{{ vis.type.name }}">
-  <navbar name="visualize" class="kibana-nav-options" ng-if="chrome.getVisible()">
+
+  <kbn-top-nav name="visualize" config="topNavMenu">
     <div class="vis-editor-info">
       <span ng-show="savedVis.id" class="vis-editor-info-title">
         <span ng-bind="::savedVis.title"></span>
       </span>
     </div>
-
-    <div class="button-group kibana-nav-actions">
-      <button ng-click="startOver()" aria-label="New Visualization">
-        <span>New</span>
-      </button>
-      <!-- normal save -->
-      <button
-        ng-class="{active: configTemplate.is('save')}"
-        ng-click="configTemplate.toggle('save')"
-        ng-if="!editableVis.dirty"
-        aria-haspopup="true"
-        aria-expanded="{{ configTemplate.is('save') }}"
-        aria-label="Save Visualization">
-        <span>Save</span>
-      </button>
-
-      <!-- save stub with tooltip -->
-      <button disabled ng-if="editableVis.dirty" tooltip="Apply or Discard your changes before saving" aria-label="Apply or Discard your changes before saving">
-        <span>Save</span>
-      </button>
-      <button
-        ng-class="{active: configTemplate.is('load')}"
-        ng-click="configTemplate.toggle('load')"
-        aria-haspopup="true"
-        aria-expanded="{{ configTemplate.is('load') }}"
-        aria-label="Load Saved Visualization">
-        <span>Load</span>
-      </button>
-      <button
-        ng-class="{active: configTemplate.is('share')}"
-        ng-click="configTemplate.toggle('share')"
-        aria-haspopup="true"
-        aria-expanded="{{ configTemplate.is('share') }}"
-        aria-label="Share Visualization">
-        <span>Share</span>
-      </button>
-      <button
-        ng-click="fetch()"
-        aria-label="Refresh">
-        <span>Refresh</span>
-      </button>
-    </div>
-    <kbn-global-timepicker></kbn-global-timepicker>
-    <div class="chrome-actions" kbn-chrome-append-nav-controls></div>
-  </navbar>
-  <config
-    ng-if="chrome.getVisible()"
-    config-template="configTemplate"
-    config-object="opts">
-  </config>
-
+  </kbn-top-nav>
   <navbar ng-if="chrome.getVisible()" name="visualize-search">
     <div class="fill bitty-modal-container">
       <div ng-if="vis.type.requiresSearch && $state.linked && !unlinking"

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';
@@ -80,14 +79,27 @@ uiModules
 
   const searchSource = savedVis.searchSource;
 
-  // config panel templates
-  const configTemplate = new ConfigTemplate({
-    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')
-  });
+  $scope.topNavMenu = [{
+    key: 'new',
+    description: 'New Visualization',
+    run: function () { kbnUrl.change('/visualize', {}); }
+  }, {
+    key: 'save',
+    template: require('plugins/kibana/visualize/editor/panels/save.html'),
+    description: 'Save Visualization'
+  }, {
+    key: 'load',
+    template: require('plugins/kibana/visualize/editor/panels/load.html'),
+    description: 'Load Saved Visualization',
+  }, {
+    key: 'share',
+    template: require('plugins/kibana/visualize/editor/panels/share.html'),
+    description: 'Share Visualization'
+  }, {
+    key: 'refresh',
+    description: 'Refresh',
+    run: function () { $scope.fetch() }
+  }];
 
   if (savedVis.id) {
     docTitle.change(savedVis.title);
@@ -129,7 +141,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 +246,7 @@ uiModules
 
     savedVis.save()
     .then(function (id) {
-      configTemplate.close('save');
+      $scope.kbnTopNav.close('save');
 
       if (id) {
         notify.info('Saved Visualization "' + savedVis.title + '"');

src/ui/public/chrome/config/filter.html

@@ -1,7 +1,7 @@
 <kbn-timepicker
-  from="opts.timefilter.time.from"
-  to="opts.timefilter.time.to"
-  mode="opts.timefilter.time.mode"
+  from="timefilter.time.from"
+  to="timefilter.time.to"
+  mode="timefilter.time.mode"
   active-tab="'filter'"
-  interval="opts.timefilter.refreshInterval">
+  interval="timefilter.refreshInterval">
 </kbn-timepicker>

src/ui/public/chrome/config/interval.html

@@ -1,7 +1,7 @@
 <kbn-timepicker
-  from="opts.timefilter.time.from"
-  to="opts.timefilter.time.to"
-  mode="opts.timefilter.time.mode"
+  from="timefilter.time.from"
+  to="timefilter.time.to"
+  mode="timefilter.time.mode"
   active-tab="'interval'"
-  interval="opts.timefilter.refreshInterval">
+  interval="timefilter.refreshInterval">
 </kbn-timepicker>