Merge branch 'relative' of https://github.com/utkarshcmu/grafana into utkarshcmu-relative

public/app/features/dashboard/dashboardSrv.js

@@ -214,9 +214,8 @@ function (angular, $, _, moment) {
     };
     };
 
 
     p.formatDate = function(date, format) {
     p.formatDate = function(date, format) {
-      if (!moment.isMoment(date)) {
-        date = moment(date);
-      }
+
+      date = this.checkDate(date);
 
 
       format = format || 'YYYY-MM-DD HH:mm:ss';
       format = format || 'YYYY-MM-DD HH:mm:ss';
 
 
@@ -225,6 +224,22 @@ function (angular, $, _, moment) {
         moment.utc(date).format(format);
         moment.utc(date).format(format);
     };
     };
 
 
+    p.getRelativeTime = function(date) {
+
+      date = this.checkDate(date);
+
+      return this.timezone === 'browser' ?
+        moment(date).fromNow() :
+        moment.utc(date).fromNow();
+    };
+
+    p.checkDate = function(date) {
+      if (!moment.isMoment(date)) {
+        date = moment(date);
+      }
+      return date;
+    };
+
     p._updateSchema = function(old) {
     p._updateSchema = function(old) {
       var i, j, k;
       var i, j, k;
       var oldVersion = this.schemaVersion;
       var oldVersion = this.schemaVersion;

public/app/plugins/panels/graph/graph.tooltip.js

@@ -31,8 +31,8 @@ function ($) {
       return j - 1;
       return j - 1;
     };
     };
 
 
-    this.showTooltip = function(title, innerHtml, pos) {
-      var body = '<div class="graph-tooltip small"><div class="graph-tooltip-time">'+ title + '</div> ' ;
+    this.showTooltip = function(absoluteTime, relativeTime, innerHtml, pos) {
+      var body = '<div class="graph-tooltip small"><div class="graph-tooltip-time">'+ absoluteTime + '<br>(' + relativeTime + ')</div> ' ;
       body += innerHtml + '</div>';
       body += innerHtml + '</div>';
       $tooltip.html(body).place_tt(pos.pageX + 20, pos.pageY);
       $tooltip.html(body).place_tt(pos.pageX + 20, pos.pageY);
     };
     };
@@ -106,7 +106,7 @@ function ($) {
       var plot = elem.data().plot;
       var plot = elem.data().plot;
       var plotData = plot.getData();
       var plotData = plot.getData();
       var seriesList = getSeriesFn();
       var seriesList = getSeriesFn();
-      var group, value, timestamp, hoverInfo, i, series, seriesHtml;
+      var group, value, absoluteTime, relativeTime, hoverInfo, i, series, seriesHtml;
 
 
       if(dashboard.sharedCrosshair){
       if(dashboard.sharedCrosshair){
         scope.appEvent('setCrosshair', { pos: pos, scope: scope });
         scope.appEvent('setCrosshair', { pos: pos, scope: scope });
@@ -122,7 +122,9 @@ function ($) {
         var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos);
         var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos);
 
 
         seriesHtml = '';
         seriesHtml = '';
-        timestamp = dashboard.formatDate(seriesHoverInfo.time);
+
+        relativeTime = dashboard.getRelativeTime(seriesHoverInfo.time);
+        absoluteTime = dashboard.formatDate(seriesHoverInfo.time);
 
 
         for (i = 0; i < seriesHoverInfo.length; i++) {
         for (i = 0; i < seriesHoverInfo.length; i++) {
           hoverInfo = seriesHoverInfo[i];
           hoverInfo = seriesHoverInfo[i];
@@ -132,6 +134,7 @@ function ($) {
           }
           }
 
 
           series = seriesList[i];
           series = seriesList[i];
+
           value = series.formatValue(hoverInfo.value);
           value = series.formatValue(hoverInfo.value);
 
 
           seriesHtml += '<div class="graph-tooltip-list-item"><div class="graph-tooltip-series-name">';
           seriesHtml += '<div class="graph-tooltip-list-item"><div class="graph-tooltip-series-name">';
@@ -140,7 +143,7 @@ function ($) {
           plot.highlight(i, hoverInfo.hoverIndex);
           plot.highlight(i, hoverInfo.hoverIndex);
         }
         }
 
 
-        self.showTooltip(timestamp, seriesHtml, pos);
+        self.showTooltip(absoluteTime, relativeTime, seriesHtml, pos);
       }
       }
       // single series tooltip
       // single series tooltip
       else if (item) {
       else if (item) {
@@ -156,10 +159,13 @@ function ($) {
         }
         }
 
 
         value = series.formatValue(value);
         value = series.formatValue(value);
-        timestamp = dashboard.formatDate(item.datapoint[0]);
+
+        relativeTime = dashboard.getRelativeTime(item.datapoint[0]);
+        absoluteTime = dashboard.formatDate(item.datapoint[0]);
+
         group += '<div class="graph-tooltip-value">' + value + '</div>';
         group += '<div class="graph-tooltip-value">' + value + '</div>';
 
 
-        self.showTooltip(timestamp, group, pos);
+        self.showTooltip(absoluteTime, relativeTime, group, pos);
       }
       }
       // no hit
       // no hit
       else {
       else {