feat(timepickerv2): more work on new timepicker, now absolute time mixed with…

feat(timepickerv2): more work on new timepicker, now absolute time mixed with relative time works, yesterday, this day last week, etc now work

public/app/core/utils/rangeutil.ts

@@ -2,6 +2,7 @@
 
 
 import moment = require('moment');
 import moment = require('moment');
 import _ = require('lodash');
 import _ = require('lodash');
+import dateMath = require('./datemath');
 import angular = require('angular');
 import angular = require('angular');
 
 
 var spans = {
 var spans = {
@@ -47,6 +48,8 @@ var rangeOptions = [
   { from: 'now-5y',   to: 'now',      display: 'Last 5 years',          section: 0 },
   { from: 'now-5y',   to: 'now',      display: 'Last 5 years',          section: 0 },
 ];
 ];
 
 
+var absoluteFormat = 'MMM D, YYYY HH:mm:ss';
+
 var rangeIndex = {};
 var rangeIndex = {};
 _.each(rangeOptions, function (frame) {
 _.each(rangeOptions, function (frame) {
   rangeIndex[frame.from + ' to ' + frame.to] = frame;
   rangeIndex[frame.from + ' to ' + frame.to] = frame;
@@ -62,13 +65,17 @@ _.each(rangeOptions, function (frame) {
     // });
     // });
   }
   }
 
 
+  function formatDate(date) {
+    return date.format(absoluteFormat);
+  }
+
   // handles expressions like
   // handles expressions like
   // 5m
   // 5m
   // 5m to now/d
   // 5m to now/d
   // now/d to now
   // now/d to now
   // now/d
   // now/d
   // if no to <expr> then to now is assumed
   // if no to <expr> then to now is assumed
-  function describeTextRange(expr: string) {
+  function describeTextRange(expr: any) {
     if (expr.indexOf('now') === -1) {
     if (expr.indexOf('now') === -1) {
       expr = 'now-' + expr;
       expr = 'now-' + expr;
     }
     }
@@ -104,11 +111,19 @@ _.each(rangeOptions, function (frame) {
     if (option) {
     if (option) {
       return option.display;
       return option.display;
     }
     }
-    if (range.to === 'now') {
-      return describeTextRange(range.from).display;
+
+    if (moment.isMoment(range.from)) {
+      var toMoment = dateMath.parse(range.to, true);
+      return formatDate(range.from) + ' to ' + toMoment.fromNow();
+    }
+
+    if (moment.isMoment(range.to)) {
+      var from = dateMath.parse(range.from, false);
+      return from.fromNow() + ' to ' + formatDate(range.to);
     }
     }
 
 
-    return "NA";
+    var res = describeTextRange(range.from);
+    return res.display;
   }
   }
 
 
 export = {
 export = {

public/app/features/dashboard/timepicker/timepicker.html

@@ -11,17 +11,17 @@
 			<i class="fa fa-clock-o"></i>
 			<i class="fa fa-clock-o"></i>
 			<span ng-bind="ctrl.rangeString"></span>
 			<span ng-bind="ctrl.rangeString"></span>
 
 
-			<span ng-show="dashboard.refresh" class="text-warning">
+			<span ng-show="ctrl.dashboard.refresh" class="text-warning">
 				&nbsp;
 				&nbsp;
 				&nbsp;
 				&nbsp;
 				<i class="fa fa-refresh"></i>
 				<i class="fa fa-refresh"></i>
-				refreshed every {{dashboard.refresh}}
+				Refreshed every {{ctrl.dashboard.refresh}}
 			</span>
 			</span>
 		</a>
 		</a>
 	</li>
 	</li>
 
 
-	<li class="grafana-menu-refresh" ng-show="!dashboard.refresh">
-		<a ng-click="timeSrv.refreshDashboard()">
+	<li class="grafana-menu-refresh" ng-show="!ctrl.dashboard.refresh">
+		<a ng-click="ctrl.timeSrv.refreshDashboard()">
 			<i class="fa fa-refresh"></i>
 			<i class="fa fa-refresh"></i>
 		</a>
 		</a>
 	</li>
 	</li>

public/app/features/dashboard/timepicker/timepicker.ts

@@ -37,21 +37,13 @@ export class TimePickerCtrl {
 
 
   init() {
   init() {
     this.panel = this.dashboard.timepicker;
     this.panel = this.dashboard.timepicker;
-    this.panel.now = false;
 
 
     _.defaults(this.panel, TimePickerCtrl.defaults);
     _.defaults(this.panel, TimePickerCtrl.defaults);
 
 
     var time = this.timeSrv.timeRange();
     var time = this.timeSrv.timeRange();
     var timeRaw = this.timeSrv.timeRange(false);
     var timeRaw = this.timeSrv.timeRange(false);
 
 
-    if (_.isString(timeRaw.to) && timeRaw.to.indexOf('now') === 0) {
-      this.panel.now = true;
-      this.rangeString = rangeUtil.describeTimeRange(timeRaw);
-    } else {
-      this.rangeString = this.dashboard.formatDate(time.from, TimePickerCtrl.tooltipFormat) + ' to ' +
-        this.dashboard.formatDate(time.to, TimePickerCtrl.tooltipFormat);
-    }
-
+    this.rangeString = rangeUtil.describeTimeRange(timeRaw);
     this.absolute = {fromJs: time.from.toDate(), toJs: time.to.toDate()};
     this.absolute = {fromJs: time.from.toDate(), toJs: time.to.toDate()};
     this.timeRaw = timeRaw;
     this.timeRaw = timeRaw;
     this.tooltip = this.dashboard.formatDate(time.from) + ' <br>to<br>';
     this.tooltip = this.dashboard.formatDate(time.from) + ' <br>to<br>';

public/app/plugins/datasource/graphite/datasource.js

@@ -145,7 +145,7 @@ function (angular, _, $, config, dateMath, moment) {
     };
     };
 
 
     GraphiteDatasource.prototype.translateTime = function(date, roundUp) {
     GraphiteDatasource.prototype.translateTime = function(date, roundUp) {
-      if (_.isString(date)) {
+      if (_.isString(date) && date.indexOf('/') === 0) {
         if (date === 'now') {
         if (date === 'now') {
           return 'now';
           return 'now';
         }
         }

public/test/specs/core/utils/rangeutil_specs.ts

@@ -4,7 +4,7 @@ import rangeUtil = require('app/core/utils/rangeutil')
 import _  = require('lodash')
 import _  = require('lodash')
 import moment  = require('moment')
 import moment  = require('moment')
 
 
-describe("rangeUtil", () => {
+describe.only("rangeUtil", () => {
 
 
   describe("Can get range text described", () => {
   describe("Can get range text described", () => {
     it('should handle simple old expression with only amount and unit', () => {
     it('should handle simple old expression with only amount and unit', () => {
@@ -35,17 +35,30 @@ describe("rangeUtil", () => {
   });
   });
 
 
   describe("Can get date range described", () => {
   describe("Can get date range described", () => {
-
     it('Date range with simple ranges', () => {
     it('Date range with simple ranges', () => {
       var text = rangeUtil.describeTimeRange({from: 'now-1h', to: 'now'});
       var text = rangeUtil.describeTimeRange({from: 'now-1h', to: 'now'});
       expect(text).to.be('Last 1 hour')
       expect(text).to.be('Last 1 hour')
     });
     });
 
 
+    it('Date range with absolute to now', () => {
+      var text = rangeUtil.describeTimeRange({from: moment([2014,10,10,2,3,4]), to: 'now'});
+      expect(text).to.be('Nov 10, 2014 02:03:04 to a few seconds ago')
+    });
+
+    it('Date range with absolute to relative', () => {
+      var text = rangeUtil.describeTimeRange({from: moment([2014,10,10,2,3,4]), to: 'now-1d'});
+      expect(text).to.be('Nov 10, 2014 02:03:04 to a day ago')
+    });
+
+    it('Date range with relative to absolute', () => {
+      var text = rangeUtil.describeTimeRange({from: 'now-7d', to: moment([2014,10,10,2,3,4])});
+      expect(text).to.be('7 days ago to Nov 10, 2014 02:03:04')
+    });
+
     it('Date range with non matching default ranges', () => {
     it('Date range with non matching default ranges', () => {
       var text = rangeUtil.describeTimeRange({from: 'now-13h', to: 'now'});
       var text = rangeUtil.describeTimeRange({from: 'now-13h', to: 'now'});
       expect(text).to.be('Last 13 hours')
       expect(text).to.be('Last 13 hours')
     });
     });
-
   });
   });
 
 
 });
 });