Merge pull request #6657 from panda01/fix/configObject

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('add'); toggleAddVisualization = !toggleAddVisualization" aria-label="Add visualization">Add</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,14 +1,13 @@
 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/directives/kbn_top_nav';
 import 'ui/courier';
 import 'ui/config';
 import 'ui/notify';
 import 'ui/typeahead';
-import 'ui/navbar';
+import 'ui/navbar_extensions';
 import 'ui/share';
 import 'plugins/kibana/dashboard/directives/grid';
 import 'plugins/kibana/dashboard/components/panel/panel';
@@ -100,15 +99,27 @@ 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: 'add',
+        description: 'Add a panel to the dashboard',
+        template: require('plugins/kibana/dashboard/partials/pick_visualization.html')
+      }, {
+        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')
+      }];
 
       $scope.refresh = _.bindKey(courier, 'fetch');
 
@@ -198,7 +209,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">
@@ -117,7 +79,7 @@ <h3>Shard Failures</h3>
                 <div ng-show="opts.timefield">
                   <p>
                     <h3>Expand your time range</h3>
-                    <p>I see you are looking at an index with a date field. It is possible your query does not match anything in the current time range, or that there is no data at all in the currently selected time range. Click the button below to open the time picker. For future reference you can open the time picker by clicking the <a class="btn btn-xs navbtn" ng-click="toggleTimepicker(); toggledTimepicker = !toggledTimepicker" aria-expanded="{{toggledTimepicker}}" aria-label="time picker">time picker <i aria-hidden="true" class="fa fa-clock-o"></i></a> in the top right corner of your screen.
+                    <p>I see you are looking at an index with a date field. It is possible your query does not match anything in the current time range, or that there is no data at all in the currently selected time range. Try selecting a wider time range by opening the time picker <i aria-hidden="true" class="fa fa-clock-o"></i> in the top right corner of your screen.
                   </p>
                 </div>
 

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

@@ -1,6 +1,6 @@
 import 'plugins/kibana/discover/saved_searches/saved_searches';
 import 'plugins/kibana/discover/directives/timechart';
-import 'ui/navbar';
+import 'ui/navbar_extensions';
 import 'ui/collapsible_sidebar';
 import 'plugins/kibana/discover/components/field_chooser/field_chooser';
 import 'plugins/kibana/discover/controllers/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

@@ -2,12 +2,11 @@ import _ from 'lodash';
 import 'plugins/kibana/visualize/saved_visualizations/saved_visualizations';
 import 'plugins/kibana/visualize/editor/sidebar';
 import 'plugins/kibana/visualize/editor/agg_filter';
-import 'ui/navbar';
+import 'ui/navbar_extensions';
 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 + '"');