diff --git a/public/app/features/dashboard/dashboardSrv.js b/public/app/features/dashboard/dashboardSrv.js index 73919ce0e01..559adff5c54 100644 --- a/public/app/features/dashboard/dashboardSrv.js +++ b/public/app/features/dashboard/dashboardSrv.js @@ -214,10 +214,7 @@ function (angular, $, _, moment) { }; p.formatDate = function(date, format) { - if (!moment.isMoment(date)) { - date = moment(date); - } - + date = moment.isMoment(date) ? date : moment(date); format = format || 'YYYY-MM-DD HH:mm:ss'; return this.timezone === 'browser' ? @@ -225,6 +222,14 @@ function (angular, $, _, moment) { moment.utc(date).format(format); }; + p.getRelativeTime = function(date) { + date = moment.isMoment(date) ? date : moment(date); + + return this.timezone === 'browser' ? + moment(date).fromNow() : + moment.utc(date).fromNow(); + }; + p._updateSchema = function(old) { var i, j, k; var oldVersion = this.schemaVersion; diff --git a/public/app/plugins/panels/graph/graph.tooltip.js b/public/app/plugins/panels/graph/graph.tooltip.js index c56d7ce8c30..af523376bf3 100644 --- a/public/app/plugins/panels/graph/graph.tooltip.js +++ b/public/app/plugins/panels/graph/graph.tooltip.js @@ -31,8 +31,8 @@ function ($) { return j - 1; }; - this.showTooltip = function(title, innerHtml, pos) { - var body = '
'+ title + '
' ; + this.showTooltip = function(absoluteTime, relativeTime, innerHtml, pos) { + var body = '
'+ absoluteTime + '
(' + relativeTime + ')
' ; body += innerHtml + '
'; $tooltip.html(body).place_tt(pos.pageX + 20, pos.pageY); }; @@ -106,7 +106,7 @@ function ($) { var plot = elem.data().plot; var plotData = plot.getData(); var seriesList = getSeriesFn(); - var group, value, timestamp, hoverInfo, i, series, seriesHtml; + var group, value, absoluteTime, relativeTime, hoverInfo, i, series, seriesHtml; if(dashboard.sharedCrosshair){ scope.appEvent('setCrosshair', { pos: pos, scope: scope }); @@ -122,7 +122,9 @@ function ($) { var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos); seriesHtml = ''; - timestamp = dashboard.formatDate(seriesHoverInfo.time); + + relativeTime = dashboard.getRelativeTime(seriesHoverInfo.time); + absoluteTime = dashboard.formatDate(seriesHoverInfo.time); for (i = 0; i < seriesHoverInfo.length; i++) { hoverInfo = seriesHoverInfo[i]; @@ -132,6 +134,7 @@ function ($) { } series = seriesList[i]; + value = series.formatValue(hoverInfo.value); seriesHtml += '
'; @@ -140,7 +143,7 @@ function ($) { plot.highlight(i, hoverInfo.hoverIndex); } - self.showTooltip(timestamp, seriesHtml, pos); + self.showTooltip(absoluteTime, relativeTime, seriesHtml, pos); } // single series tooltip else if (item) { @@ -156,10 +159,13 @@ function ($) { } value = series.formatValue(value); - timestamp = dashboard.formatDate(item.datapoint[0]); + + relativeTime = dashboard.getRelativeTime(item.datapoint[0]); + absoluteTime = dashboard.formatDate(item.datapoint[0]); + group += '
' + value + '
'; - self.showTooltip(timestamp, group, pos); + self.showTooltip(absoluteTime, relativeTime, group, pos); } // no hit else {