Fix for timepicker dates and tooltip when UTC timzone is selected,

custom date modal is still local time, Closes #277

CHANGELOG.md

@@ -8,6 +8,7 @@
 **Fixes**
 - [Issue #696](https://github.com/grafana/grafana/issues/696). Graph: Fix for y-axis format 'none' when values are in scientific notation (ex 2.3e-13)
 - [Issue #697](https://github.com/grafana/grafana/issues/697). Graphite: Fix for Glob syntax in graphite queries ([1-9] and ?) that made the query editor / parser bail and fallback to a text box.
+- [Issue #277](https://github.com/grafana/grafana/issues/277). Dashboard: Fix for timepicker date & tooltip when UTC timezone selected. Closes #277
 
 **Tech**
 - Upgraded from angularjs 1.1.5 to 1.3 beta 17;

src/app/components/kbn.js

@@ -1,4 +1,8 @@
-define(['jquery','lodash','moment'],
+define([
+  'jquery',
+  'lodash',
+  'moment'
+],
 function($, _, moment) {
   'use strict';
 

src/app/directives/grafanaGraph.js

@@ -354,10 +354,7 @@ function (angular, $, kbn, moment, _) {
             }
 
             value = kbn.getFormatFunction(format, 2)(value);
-
-            timestamp = dashboard.timezone === 'browser' ?
-              moment(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss') :
-              moment.utc(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss');
+            timestamp = dashboard.formatDate(item.datapoint[0]);
 
             $tooltip.html(group + value + " @ " + timestamp).place_tt(pos.pageX, pos.pageY);
           } else {

src/app/panels/timepicker/module.js

@@ -80,9 +80,14 @@ function (angular, app, _, moment, kbn) {
       $scope.temptime = cloneTime($scope.time);
       $scope.tempnow = $scope.panel.now;
 
+      $scope.temptime.from.date.setHours(0,0,0,0);
+      $scope.temptime.to.date.setHours(0,0,0,0);
+
       // Date picker needs the date to be at the start of the day
-      $scope.temptime.from.date.setHours(1,0,0,0);
-      $scope.temptime.to.date.setHours(1,0,0,0);
+      if(new Date().getTimezoneOffset() < 0) {
+        $scope.temptime.from.date = moment($scope.temptime.from.date).add('days',1).toDate();
+        $scope.temptime.to.date = moment($scope.temptime.to.date).add('days',1).toDate();
+      }
 
       $q.when(customTimeModal).then(function(modalEl) {
         modalEl.modal('show');
@@ -175,8 +180,8 @@ function (angular, app, _, moment, kbn) {
       var model = { from: getTimeObj(from), to: getTimeObj(to), };
 
       if (model.from.date) {
-        model.tooltip = moment(model.from.date).format('YYYY-MM-DD HH:mm:ss') + ' <br>to<br>';
-        model.tooltip += moment(model.to.date).format('YYYY-MM-DD HH:mm:ss');
+        model.tooltip = $scope.dashboard.formatDate(model.from.date) + ' <br>to<br>';
+        model.tooltip += $scope.dashboard.formatDate(model.to.date);
       }
       else {
         model.tooltip = 'Click to set time filter';
@@ -188,8 +193,8 @@ function (angular, app, _, moment, kbn) {
             moment(model.to.date).fromNow();
         }
         else {
-          model.rangeString = moment(model.from.date).format('MMM D, YYYY hh:mm:ss') + ' to ' +
-            moment(model.to.date).format('MMM D, YYYY hh:mm:ss');
+          model.rangeString = $scope.dashboard.formatDate(model.from.date, 'MMM D, YYYY hh:mm:ss') + ' to ' +
+            $scope.dashboard.formatDate(model.to.date, 'MMM D, YYYY hh:mm:ss');
         }
       }
 

src/app/services/dashboard/dashboardSrv.js

@@ -3,9 +3,10 @@ define([
   'jquery',
   'kbn',
   'lodash',
+  'moment',
   '../timer',
 ],
-function (angular, $, kbn, _) {
+function (angular, $, kbn, _, moment) {
   'use strict';
 
   var module = angular.module('grafana.services');
@@ -108,6 +109,14 @@ function (angular, $, kbn, _) {
       this.rows.push(newRow);
     };
 
+    p.formatDate = function(date, format) {
+      format = format || 'YYYY-MM-DD HH:mm:ss';
+
+      return this.timezone === 'browser' ?
+              moment(date).format(format) :
+              moment.utc(date).format(format);
+    };
+
     p.emit_refresh = function() {
       $rootScope.$broadcast('refresh');
     };