fix(timepicker): UTC now works in all scenarios I can think of, manual edit,…

fix(timepicker): UTC now works in all scenarios I can think of, manual edit, date picker edit, #2761

public/app/core/directives/dash_edit_link.js

@@ -35,7 +35,10 @@ function ($, coreModule) {
         var lastEditor;
 
         function hideEditorPane() {
-          if (editorScope) { editorScope.dismiss(); }
+          if (editorScope) {
+            scope.appEvent('dash-editor-hidden', lastEditor);
+            editorScope.dismiss();
+          }
         }
 
         function showEditorPane(evt, payload, editview) {

public/app/features/dashboard/timeSrv.js

@@ -30,10 +30,10 @@ define([
     this._parseTime = function() {
       // when absolute time is saved in json it is turned to a string
       if (_.isString(this.time.from) && this.time.from.indexOf('Z') >= 0) {
-        this.time.from = moment(this.time.from);
+        this.time.from = moment(this.time.from).utc();
       }
       if (_.isString(this.time.to) && this.time.to.indexOf('Z') >= 0) {
-        this.time.to = moment(this.time.to);
+        this.time.to = moment(this.time.to).utc();
       }
     };
 
@@ -120,19 +120,16 @@ define([
     };
 
     this.timeRange = function(parse) {
-      var _t = this.time;
+      // make copies if they are moment  (do not want to return out internal moment, because they are mutable!)
+      var from = moment.isMoment(this.time.from) ? moment(this.time.from) : this.time.from ;
+      var to = moment.isMoment(this.time.to) ? moment(this.time.to) : this.time.to ;
 
-      if(parse === false) {
-        return { from: _t.from, to: _t.to };
-      } else {
-        var _from = _t.from;
-        var _to = _t.to || moment();
-
-        return {
-          from: dateMath.parse(_from, false),
-          to: dateMath.parse(_to, true)
-        };
+      if (parse !== false) {
+        from = dateMath.parse(from, false);
+        to = dateMath.parse(to, true);
       }
+
+      return {from: from, to: to};
     };
 
   });

public/app/features/dashboard/timepicker/input_date.js

@@ -13,19 +13,21 @@ define([
       require: 'ngModel',
       link: function ($scope, $elem, attrs, ngModel) {
         var format = 'YYYY-MM-DD HH:mm:ss';
-        // $elem.after('<div class="input-datetime-format">' + format + '</div>');
 
-        // What should I make with the input from the user?
         var fromUser = function (text) {
-          console.log('fromUser: ' + text);
-          return text;
-          // if (_.isString(text)) {
-          // }
-          // var parsed = moment(text, format);
-          // return parsed.isValid() ? parsed : undefined;
+          if (text.indexOf('now') !== -1) {
+            return text;
+          }
+          var parsed;
+          if ($scope.ctrl.isUtc) {
+            parsed = moment.utc(text, format);
+          } else {
+            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 (currentValue) {
           if (moment.isMoment(currentValue)) {
             return currentValue.format(format);

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

@@ -6,10 +6,13 @@
 		</a>
 	</li>
 
-	<li>
-		<a bs-tooltip="tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()">
+	<li ng-class="{'gf-timepicker-open': ctrl.isOpen}">
+		<a bs-tooltip="ctrl.tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()">
 			<i class="fa fa-clock-o"></i>
 			<span ng-bind="ctrl.rangeString"></span>
+			<span ng-show="ctrl.isUtc" class="gf-timepicker-utc">
+				UTC
+			</span>
 
 			<span ng-show="ctrl.dashboard.refresh" class="text-warning">
 				&nbsp;

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

@@ -26,12 +26,18 @@ export class TimePickerCtrl {
   rangeString: string;
   timeOptions: any;
   refresh: any;
+  isOpen: boolean;
+  isUtc: boolean;
 
   constructor(private $scope, private $rootScope, private timeSrv) {
     $scope.ctrl = this;
 
     $rootScope.onAppEvent('refresh', () => this.init(), $scope);
     $rootScope.onAppEvent('zoom-out', () => this.zoom(2), $scope);
+    $rootScope.onAppEvent('dash-editor-hidden', () => {
+      this.isOpen = false;
+    }, $scope);
+
     this.init();
   }
 
@@ -40,8 +46,21 @@ export class TimePickerCtrl {
 
     _.defaults(this.panel, TimePickerCtrl.defaults);
 
-    var time = this.timeSrv.timeRange();
-    var timeRaw = this.timeSrv.timeRange(false);
+    var time = angular.copy(this.timeSrv.timeRange());
+    var timeRaw = angular.copy(this.timeSrv.timeRange(false));
+
+    if (this.dashboard.timezone === 'browser') {
+      time.from.local();
+      time.to.local();
+      if (moment.isMoment(timeRaw.from)) {
+        timeRaw.from.local();
+      }
+      if (moment.isMoment(timeRaw.to)) {
+        timeRaw.to.local();
+      }
+    } else {
+      this.isUtc = true;
+    }
 
     this.rangeString = rangeUtil.describeTimeRange(timeRaw);
     this.absolute = {fromJs: time.from.toDate(), toJs: time.to.toDate()};
@@ -69,6 +88,7 @@ export class TimePickerCtrl {
   }
 
   openDropdown() {
+    this.isOpen = true;
     this.timeOptions = rangeUtil.getRelativeTimesList(this.panel, this.rangeString);
     this.refresh = {
       value: this.dashboard.refresh,
@@ -91,16 +111,21 @@ export class TimePickerCtrl {
       this.timeSrv.setAutoRefresh(this.refresh.value);
     }
 
+    debugger;
     this.timeSrv.setTime(this.timeRaw);
     this.$rootScope.appEvent('hide-dash-editor');
   }
 
   absoluteFromChanged() {
-    this.timeRaw.from = moment(this.absolute.fromJs);
+    this.timeRaw.from = this.getAbsoluteMomentForTimezone(this.absolute.fromJs);
   }
 
   absoluteToChanged() {
-    this.timeRaw.to = moment(this.absolute.toJs);
+    this.timeRaw.to = this.getAbsoluteMomentForTimezone(this.absolute.toJs);
+  }
+
+  getAbsoluteMomentForTimezone(jsDate) {
+    return this.dashboard.timezone === 'browser' ? moment(jsDate) : moment(jsDate).utc();
   }
 
   setRelativeFilter(timespan) {

public/less/timepicker.less

@@ -14,6 +14,11 @@
   .box-shadow(@navbarDropdownShadow);
 }
 
+li.gf-timepicker-open a {
+  background-color: @grafanaPanelBackground;
+  .box-shadow(0px 10px 0px @grafanaPanelBackground);
+}
+
 .gf-timepicker-absolute-section {
   width: 300px;
   float: left;
@@ -29,16 +34,31 @@
   margin: 0 0 0 15px;
 }
 
+.gf-timepicker-utc {
+  background-color: @blueDark;
+  color: @white;
+  font-size: 75%;
+  padding: 3px;
+  border-radius: 2px;
+  font-weight: bold;
+  margin-left: 4px;
+}
+
 .gf-timepicker-relative-section {
-  padding: 0 20px 0 25px;
+  padding: 0 20px 0 30px;
   min-height: 258px;
   float: left;
   ul {
+    list-style: none;
     float: left;
-    margin: 0 20px 10px 25px;
+    margin: 0 30px 10px 0px;
+    li {
+      line-height: 22px;
+    }
     li.active {
       border-bottom: 1px solid @blue;
       margin: 3px 0;
+      font-weight: bold;
     }
   }
 }