Merge pull request #63 from rashidkpc/master

Time picker. Closes #57
elastic · Apr 17, 2014 · 797df09 · 797df09
2 parents c14821c + 5c24190
commit 797df09
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 20 deletions.
diff --git a/src/kibana/apps/discover/index.html b/src/kibana/apps/discover/index.html
@@ -31,7 +31,7 @@
         </disc-field-chooser>
       </div>
       <div class="col-md-10">
-        <center ng-show="opts.time.from && opts.time.to"><small>{{opts.time.from|moment}} through {{opts.time.to|moment}}</small></center>
+        <center ng-show="opts.time.from && opts.time.to"><small>{{opts.time.from}} through {{opts.time.to}}</small></center>
 
         <discover-timechart data="chart" height="150" ng-if="opts.timefield"></discover-timechart>
         <div class="discover-table"

diff --git a/src/kibana/directives/input_datetime.js b/src/kibana/directives/input_datetime.js
@@ -0,0 +1,34 @@
+define(function (require) {
+  var module = require('modules').get('kibana/directives');
+  var $ = require('jquery');
+  var _ = require('lodash');
+  var moment = require('moment');
+
+  module.directive('inputDatetime', function () {
+    return {
+      restrict: 'A',
+      require: 'ngModel',
+      link: function ($scope, $elem, attrs, ngModel) {
+
+        var format = 'YYYY-MM-DD HH:mm:ss.SSS';
+
+        $elem.after('<div class="input-datetime-format">' + format + '</div>');
+
+        // What should I make with the input from the user?
+        var fromUser = function (text) {
+          var parsed = moment(text, format);
+          return parsed.isValid() ? parsed : undefined;
+        };
+
+        // How should I present the data back to the user in the input field?
+        var toUser = function (datetime) {
+          return moment(datetime).format(format);
+        };
+
+        ngModel.$parsers.push(fromUser);
+        ngModel.$formatters.push(toUser);
+
+      }
+    };
+  });
+});
diff --git a/src/kibana/directives/timepicker.js b/src/kibana/directives/timepicker.js
@@ -5,6 +5,9 @@ define(function (require) {
   var datemath = require('utils/datemath');
   var moment = require('moment');
 
+  require('directives/input_datetime');
+
+
   module.directive('kbnTimepicker', function () {
     return {
       restrict: 'E',
@@ -30,6 +33,11 @@ define(function (require) {
           round: false
         };
 
+        $scope.absolute = {
+          from: moment(),
+          to: moment()
+        };
+
         $scope.units = {
           s: 'second',
           m: 'minute',
@@ -50,14 +58,22 @@ define(function (require) {
           {text: 'Years ago', value: 'y'},
         ];
 
-        if (_.isUndefined($scope.mode)) $scope.mode = 'quick';
+        if (_.isUndefined($scope.mode)) $scope.mode = 'absolute';
+
+        $scope.$watch('absolute.from', function (date) {
+          if (_.isDate(date)) $scope.absolute.from = moment(date);
+        });
+
+        $scope.$watch('absolute.to', function (date) {
+          if (_.isDate(date)) $scope.absolute.to = moment(date);
+        });
 
         $scope.setMode = function (thisMode) {
           switch (thisMode) {
           case 'quick':
             break;
           case 'relative':
-            var duration = moment.duration(moment().diff($scope.from));
+            var duration = moment.duration(moment().diff(datemath.parse($scope.from)));
             var units = _.pluck(_.clone($scope.relativeOptions).reverse(), 'value');
             for (var i = 0; i < units.length; i++) {
               var as = duration.as(units[i]);
@@ -69,15 +85,17 @@ define(function (require) {
             }
             break;
           case 'absolute':
+            $scope.absolute.from = datemath.parse($scope.from);
+            $scope.absolute.to = datemath.parse($scope.to, true);
             break;
           }
 
           $scope.mode = thisMode;
         };
 
         $scope.setQuick = function (from, to) {
-          $scope.from = datemath.parse(from);
-          $scope.to = datemath.parse(to, true);
+          $scope.from = from;
+          $scope.to = to;
         };
 
         $scope.formatRelative = function () {
@@ -88,8 +106,14 @@ define(function (require) {
         };
 
         $scope.applyRelative = function () {
-          $scope.from = $scope.formatRelative();
-          $scope.to = datemath.parse('now', $scope.relative.round);
+          $scope.from = 'now-' + $scope.relative.count + $scope.relative.unit +
+            ($scope.relative.round ? '/' + $scope.relative.unit : '');
+          $scope.to = 'now';
+        };
+
+        $scope.applyAbsolute = function () {
+          $scope.from = moment($scope.absolute.from);
+          $scope.to = moment($scope.absolute.to);
         };
 
         init();

diff --git a/src/kibana/filters/moment.js b/src/kibana/filters/moment.js
@@ -1,12 +1,16 @@
 define(function (require) {
 	var moment = require('moment');
+  var _ = require('lodash');
+  var datemath = require('utils/datemath');
 
   require('modules')
     .get('kibana/filters')
     .filter('moment', function () {
-    return function (datetime) {
+    return function (datetime, roundUp) {
       var format = 'MMMM Do YYYY, HH:mm:ss.SSS';
-      return moment.isMoment(datetime) ? datetime.format(format) : undefined;
+      var parsed = datemath.parse(datetime, roundUp);
+      if (parsed) return parsed.format(format);
+      return undefined;
     };
   });
 });
diff --git a/src/kibana/partials/timepicker.html b/src/kibana/partials/timepicker.html
@@ -12,6 +12,10 @@
       float: left;
       padding: 0px 15px;
     }
+
+    .kbn-timepicket-alert {
+      width: 100px;
+    }
   </style>
 
   <div class="row">
@@ -64,9 +68,12 @@
         <div ng-switch-when="relative">
 
           <div class="kbn-timepicker-section">
-            From: 
-            <span ng-show="relative.preview">{{relative.preview}}</span><span ng-hide="relative.preview"><i>Invalid Expression</i></span>
+
             <form class="form-inline" role="form">
+              <label>
+                From: 
+                <span ng-show="relative.preview">{{relative.preview}}</span><span ng-hide="relative.preview"><i>Invalid Expression</i></span>
+              </label><br>
               <div class="form-group">
                 <input type="number" class="form-control" 
                   ng-model="relative.count" 
@@ -91,11 +98,19 @@
           </div>
 
           <div class="kbn-timepicker-section">
-            To: 
             <form class="form-inline" role="form">
+              <label>
+                To: Now
+              </label><br>
               <div class="form-group">
                 <input type="text" disabled class="form-control" value="Now">
               </div> 
+            </form>
+          </div>
+
+          <div class="kbn-timepicker-section">
+            <form role="form">
+              <label>&nbsp</label>
               <div class="form-group">
                 <button class="btn btn-primary" ng-disabled="!relative.preview" ng-click="applyRelative()">Go</button>
               </div>
@@ -106,15 +121,35 @@
 
         <div ng-switch-when="absolute">
           <div class="kbn-timepicker-section">
-            From: 
-            <form class="form-inline" role="form">
-              <div class="form-group">
-                <input type="text" class="form-control" 
-                  ng-model="absolute.from.date">
+            <form role="form">
+              <div>
+                <label class="small">From: <span ng-show="!absolute.from"><i>Invalid Date</i></span></label>
+                <input type="text" class="form-control" input-datetime="{{format}}" ng-model="absolute.from">
+              </div>
+              <div ng-model="absolute.from">
+                <datepicker max="absolute.to" show-weeks="false"></datepicker>
               </div>
+            </form>
+          </div>
+
+          <div class="kbn-timepicker-section">
+            <form role="form">
+              <div>
+                <label class="small">To: <span ng-show="!absolute.to"><i>Invalid Date</i></span></label>
+                <input type="text" class="form-control" input-datetime="{{format}}" ng-model="absolute.to">
+              </div>
+              <div ng-model="absolute.to">
+                <datepicker min="absolute.from" show-weeks="false"></datepicker>
+              </div>
+            </form>
+          </div>
+
+          <div class="kbn-timepicker-section kbn-timepicker-alert">
+            <form role="form">
+              <label>&nbsp</label>
               <div class="form-group">
-                <input type="text" class="form-control" 
-                  ng-model="absolute.from.time">
+                <button class="btn btn-primary" ng-disabled="absolute.from > absolute.to || !absolute.from || !absolute.to" ng-click="applyAbsolute()">Go</button>
+                <span class="small" ng-show="absolute.from > absolute.to"><strong>From</strong> must occur before <strong>To</strong></span>
               </div>
             </form>
           </div>

diff --git a/src/kibana/styles/main.css b/src/kibana/styles/main.css
@@ -6851,3 +6851,8 @@ saved-object-finder .finder-options > li.active a {
   width: 65px;
   height: 65px;
 }
+.input-datetime-format {
+  font-size: 12px;
+  color: #999999;
+  padding: 6px 12px;
+}
diff --git a/src/kibana/styles/main.less b/src/kibana/styles/main.less
@@ -235,4 +235,12 @@ saved-object-finder {
   // image in result list
   width: 65px;
   height: 65px;
-}
+}
+
+
+//== inputDatetime
+.input-datetime-format {
+  font-size: @font-size-small;
+  color: @text-muted;
+  padding: @padding-base-vertical @padding-base-horizontal;
+}
diff --git a/src/kibana/utils/datemath.js b/src/kibana/utils/datemath.js
@@ -4,6 +4,7 @@ define(function (require) {
 
 /* This is a simplified version of elasticsearch's date parser */
   var parse = function (text, roundUp) {
+    if (!text) return undefined;
     if (moment.isMoment(text)) return text;
     if (_.isDate(text)) return moment(text);
 

diff --git a/test/unit/specs/utils/datemath.js b/test/unit/specs/utils/datemath.js
@@ -13,6 +13,10 @@ define(function (require) {
       clock;
 
     describe('errors', function () {
+      it('should return undefined if passed something falsy', function () {
+        expect(datemath.parse()).to.be(undefined);
+      });
+
       it('should return undefined if I pass an operator besides [+-/]', function () {
         expect(datemath.parse('now&1d')).to.be(undefined);
       });