Merge pull request #4 from spalger/pr/3800

Open the timepicker to a specific tab
rashidkpc · May 11, 2015 · b7ff112 · b7ff112
2 parents 77314c6 + 3b79150
commit b7ff112
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 17 deletions.
diff --git a/src/kibana/components/timepicker/timepicker.html b/src/kibana/components/timepicker/timepicker.html
@@ -19,30 +19,30 @@
     }
   </style>
 
-  <ul class="nav nav-tabs" role="tablist" ng-init="tab = 'filter'">
-    <li ng-class="{active:tab== 'filter'}">
-      <a href ng-click="tab = 'filter'">Time Filter</a>
+  <ul class="nav nav-tabs" role="tablist">
+    <li ng-class="{active: activeTab === 'filter'}">
+      <a href ng-click="activeTab = 'filter'">Time Filter</a>
     </li>
-    <li ng-class="{active:tab== 'interval'}">
-      <a href ng-click="tab = 'interval'">Refresh Interval</a>
+    <li ng-class="{active: activeTab === 'interval'}">
+      <a href ng-click="activeTab = 'interval'">Refresh Interval</a>
     </li>
   </ul>
 
   <div class="tab-content">
 
     <!-- Filters -->
-    <div ng-show="tab == 'filter'" role="tabpanel" class="tab-pane active">
+    <div ng-show="activeTab === 'filter'" role="tabpanel" class="tab-pane active">
       <br>
       <div class="row">
         <div class="col-md-2">
           <ul class="nav nav-pills nav-stacked kbn-timepicker-modes">
-            <li ng-class="{active: mode=='quick'}">
+            <li ng-class="{active: mode === 'quick' }">
               <a ng-click="setMode('quick')">quick</a>
             </li>
-            <li ng-class="{active: mode=='relative'}">
+            <li ng-class="{active: mode === 'relative' }">
               <a ng-click="setMode('relative')">relative</a>
             </li>
-            <li ng-class="{active: mode=='absolute'}">
+            <li ng-class="{active: mode === 'absolute' }">
               <a ng-click="setMode('absolute')">absolute</a>
             </li>
           </ul>
@@ -167,12 +167,12 @@
     </div>
 
     <!-- Refresh Intervals -->
-    <div ng-show="tab == 'interval'" role="tabpanel" class="tab-pane active">
+    <div ng-show="activeTab === 'interval'" role="tabpanel" class="tab-pane active">
       <br>
       <div ng-repeat="list in refreshLists" class="kbn-refresh-section">
         <ul class="list-unstyled">
           <li ng-repeat="inter in list">
-            <a class="refresh-interval" ng-class="{ 'refresh-interval-active': interval.value == inter.value }" ng-click="setRefreshInterval(inter)">
+            <a class="refresh-interval" ng-class="{ 'refresh-interval-active': interval.value === inter.value }" ng-click="setRefreshInterval(inter)">
               {{inter.display}}
             </a>
           </li>

diff --git a/src/kibana/components/timepicker/timepicker.js b/src/kibana/components/timepicker/timepicker.js
@@ -18,7 +18,8 @@ define(function (require) {
         from: '=',
         to: '=',
         mode: '=',
-        interval: '='
+        interval: '=',
+        activeTab: '='
       },
       template: html,
       controller: function ($scope) {
@@ -28,6 +29,8 @@ define(function (require) {
 
         $scope.format = 'MMMM Do YYYY, HH:mm:ss.SSS';
         $scope.modes = ['quick', 'relative', 'absolute'];
+        $scope.activeTab = $scope.activeTab || 'filter';
+
         if (_.isUndefined($scope.mode)) $scope.mode = 'quick';
 
         $scope.quickLists = _(quickRanges).groupBy('section').values().value();

diff --git a/src/kibana/plugins/kibana/_timepicker.html b/src/kibana/plugins/kibana/_timepicker.html
@@ -2,5 +2,6 @@
   from="timefilter.time.from"
   to="timefilter.time.to"
   mode="timefilter.time.mode"
+  active-tab="timefilter.timepickerActiveTab"
   interval="timefilter.refreshInterval">
-</kbn-timepicker>
+</kbn-timepicker>
diff --git a/src/kibana/plugins/kibana/_timepicker.js b/src/kibana/plugins/kibana/_timepicker.js
@@ -12,11 +12,14 @@ define(function (require) {
     });
 
     var timepickerHtml = require('text!plugins/kibana/_timepicker.html');
-    $scope.toggleTimepicker = function () {
+    $scope.toggleTimepicker = function (tab) {
+      tab = tab || 'filter';
+
       // Close if already open
-      if ($scope.globalConfigTemplate === timepickerHtml) {
+      if ($scope.globalConfigTemplate === timepickerHtml && timefilter.timepickerActiveTab === tab) {
         delete $scope.globalConfigTemplate;
       } else {
+        timefilter.timepickerActiveTab = tab;
         $scope.globalConfigTemplate = timepickerHtml;
       }
     };
@@ -25,4 +28,4 @@ define(function (require) {
       timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
     };
   };
-});
+});
diff --git a/src/kibana/plugins/kibana/kibana.html b/src/kibana/plugins/kibana/kibana.html
@@ -24,7 +24,7 @@
 
       <ul ng-if="setupComplete" ng-show="timefilter.enabled" class="nav navbar-nav navbar-right navbar-timepicker">
         <li>
-          <a  ng-click="toggleTimepicker()"
+          <a  ng-click="toggleTimepicker('interval')"
               ng-show="timefilter.refreshInterval.value > 0"
               class="navbar-timepicker-auto-refresh-desc">
             {{timefilter.refreshInterval.display}}