From 240b1efdc2b968a94bff64126673777634afb24a Mon Sep 17 00:00:00 2001 From: Kevin Duret Date: Wed, 8 May 2019 09:48:43 +0200 Subject: [PATCH] fix(graph): manage timezone to display graphs (#7503) * fix(graph): use user timezone when display graph * tmp * tmp * Update www/include/views/graphs/javascript/centreon-graph.js Co-Authored-By: kduret * Update centreon-graph.js --- www/include/views/graphs/graph-periods.html | 18 ++++-- www/include/views/graphs/graph-split.html | 31 ++++++++-- www/include/views/graphs/graphs.html | 23 ++++++-- .../views/graphs/javascript/centreon-graph.js | 57 +++++++++++++------ 4 files changed, 99 insertions(+), 30 deletions(-) diff --git a/www/include/views/graphs/graph-periods.html b/www/include/views/graphs/graph-periods.html index 4e6062135f7..349d809040e 100644 --- a/www/include/views/graphs/graph-periods.html +++ b/www/include/views/graphs/graph-periods.html @@ -59,10 +59,20 @@ var chartId = $a.parents('.graph').data('graphId'); var start; var end; + var timezone = localStorage.getItem('realTimezone') + ? localStorage.getItem('realTimezone') + : moment.tz.guess(); + /* Get the period */ if (jQuery('select[name="period"]').val() === '') { - start = moment(jQuery('#StartDate').val() + ' ' + jQuery('#StartTime').val()); - end = moment(jQuery('#EndDate').val() + ' ' + jQuery('#EndTime').val()); + start = moment.tz( + jQuery('#StartDate').val() + ' ' + jQuery('#StartTime').val(), + timezone + ); + end = moment.tz( + jQuery('#EndDate').val() + ' ' + jQuery('#EndTime').val(), + timezone + ); duration = moment.duration(end.diff(start)); } else { parseInterval = jQuery('select[name="period"]').val().match(/(\d+)([a-z]+)/i); @@ -70,8 +80,8 @@ parseInt(parseInterval[1], 10), parseInterval[2] ); - start = moment(); - end = moment(); + start = moment().tz(timezone); + end = moment().tz(timezone); start.subtract(parseInterval[1], parseInterval[2]); } diff --git a/www/include/views/graphs/graph-split.html b/www/include/views/graphs/graph-split.html index d799cbfb2fd..348ea504089 100644 --- a/www/include/views/graphs/graph-split.html +++ b/www/include/views/graphs/graph-split.html @@ -196,6 +196,12 @@ jQuery(function () { var datepickerFormat; //localized user chosen format + // get timezone from localstorage + // be careful, it seems that it's updated when user logout/login + var timezone = localStorage.getItem('realTimezone') + ? localStorage.getItem('realTimezone') + : moment.tz.guess(); + initRefresh(); if ("undefined" == typeof(datepickerFormat)) { @@ -208,8 +214,8 @@ urlPost = window.location.href; var postStart = /start=([^&]+)/.exec(urlPost)[1]; var postEnd = /end=([^&]+)/.exec(urlPost)[1]; - var startObj = moment.unix(postStart); - var endObj = moment.unix(postEnd); + var startObj = moment.unix(postStart).tz(timezone); + var endObj = moment.unix(postEnd).tz(timezone); /* setting the dates from the POST */ jQuery('input[name=alternativeDateStartDate]').val(startObj.format('YYYY-MM-DD')); //hidden field @@ -243,10 +249,23 @@ var metricId = info[2]; var start; var end; + + // get timezone from localstorage + // be careful, it seems that it's updated when user logout/login + var timezone = localStorage.getItem('realTimezone') + ? localStorage.getItem('realTimezone') + : moment.tz.guess(); + /* Get the period */ if (jQuery('select[name="period"]').val() === '') { - start = moment(jQuery('input[name="alternativeDateStartDate"]').val() + ' ' + jQuery('#StartTime').val()); - end = moment(jQuery('input[name="alternativeDateEndDate"]').val() + ' ' + jQuery('#EndTime').val()); + start = moment.tz( + jQuery('input[name="alternativeDateStartDate"]').val() + ' ' + jQuery('#StartTime').val(), + timezone + ); + end = moment.tz( + jQuery('input[name="alternativeDateEndDate"]').val() + ' ' + jQuery('#EndTime').val(), + timezone + ); duration = moment.duration(end.diff(start)); } else { parseInterval = jQuery('select[name="period"]').val().match(/(\d+)([a-z]+)/i); @@ -254,8 +273,8 @@ parseInt(parseInterval[1], 10), parseInterval[2] ); - start = moment(); - end = moment(); + start = moment().tz(timezone); + end = moment().tz(timezone); start.subtract(parseInterval[1], parseInterval[2]); } diff --git a/www/include/views/graphs/graphs.html b/www/include/views/graphs/graphs.html index 573def011ea..71928cbb2f6 100755 --- a/www/include/views/graphs/graphs.html +++ b/www/include/views/graphs/graphs.html @@ -396,6 +396,7 @@

{t}Grid system{/t}

function changePeriod() { var start; var end; + jQuery('select[name="period"]').val(''); start = jQuery('input[name="alternativeDateStartDate"]').val() + ' ' + jQuery('#StartTime').val(); end = jQuery('input[name="alternativeDateEndDate"]').val() + ' ' + jQuery('#EndTime').val(); @@ -474,10 +475,23 @@

{t}Grid system{/t}

var chartId = $a.parents('.graph').data('graphId'); var start; var end; + + // get timezone from localstorage + // be careful, it seems that it's updated when user logout/login + var timezone = localStorage.getItem('realTimezone') + ? localStorage.getItem('realTimezone') + : moment.tz.guess(); + /* Get the period */ if (jQuery('select[name="period"]').val() === '') { - start = moment(jQuery('input[name="alternativeDateStartDate"]').val() + ' ' + jQuery('#StartTime').val()); - end = moment(jQuery('input[name="alternativeDateEndDate"]').val() + ' ' + jQuery('#EndTime').val()); + start = moment.tz( + jQuery('input[name="alternativeDateStartDate"]').val() + ' ' + jQuery('#StartTime').val(), + timezone + ); + end = moment.tz( + jQuery('input[name="alternativeDateEndDate"]').val() + ' ' + jQuery('#EndTime').val(), + timezone + ); duration = moment.duration(end.diff(start)); } else { parseInterval = jQuery('select[name="period"]').val().match(/(\d+)([a-z]+)/i); @@ -485,8 +499,8 @@

{t}Grid system{/t}

parseInt(parseInterval[1], 10), parseInterval[2] ); - start = moment(); - end = moment(); + start = moment().tz(timezone); + end = moment().tz(timezone); start.subtract(parseInterval[1], parseInterval[2]); } @@ -496,6 +510,7 @@

{t}Grid system{/t}

} else { baseUrl += '?'; } + baseUrl += 'chartId=' + chartId + '&start=' + start.unix() + '&end=' + end.unix(); window.location = baseUrl; }); diff --git a/www/include/views/graphs/javascript/centreon-graph.js b/www/include/views/graphs/javascript/centreon-graph.js index cbbba9ffe06..3cd175a9fda 100644 --- a/www/include/views/graphs/javascript/centreon-graph.js +++ b/www/include/views/graphs/javascript/centreon-graph.js @@ -30,6 +30,12 @@ }); } + // get timezone from localstorage + // be careful, it seems that it's updated when user logout/login + this.timezone = localStorage.getItem('realTimezone') + ? localStorage.getItem('realTimezone') + : moment.tz.guess(); + this.timeFormat = this.getTimeFormat(); /* Color for status graph */ @@ -202,7 +208,7 @@ tooltip: { format: { title: function (x) { - return moment(x).format('YYYY-MM-DD HH:mm:ss'); + return moment(x).tz(self.timezone).format('YYYY-MM-DD HH:mm:ss'); }, value: function (value, ratio, id) { /* Test if the curve is inversed */ @@ -512,15 +518,15 @@ if (this.settings.period.startTime === null || this.settings.period.endTime === null) { - start = moment(); - end = moment(); + start = moment().tz(this.timezone); + end = moment().tz(this.timezone); start.subtract(this.interval.number, this.interval.unit); } else { - myStart = this.settings.period.startTime; myEnd = this.settings.period.endTime; + if (typeof(this.settings.period.startTime) === "number") { myStart = this.settings.period.startTime * 1000; } @@ -529,8 +535,8 @@ myEnd = this.settings.period.endTime * 1000; } - start = moment(myStart); - end = moment(myEnd); + start = moment.tz(myStart, this.timezone); + end = moment.tz(myEnd, this.timezone); } return { @@ -542,20 +548,39 @@ * Define tick for timeseries */ getTimeFormat: function() { + var self = this; var timeFormat; + if (this.settings.timeFormat !== null) { timeFormat = this.settings.timeFormat; } else { - timeFormat = d3.time.format.multi([ - [".%L", function(d) { return d.getMilliseconds(); }], - [":%S", function(d) { return d.getSeconds(); }], - ["%H:%M", function(d) { return d.getMinutes(); }], - ["%H:%M", function(d) { return d.getHours(); }], - ["%m-%d", function(d) { return d.getDay() && d.getDate() !== 1; }], - ["%m-%d", function(d) { return d.getDate() !== 1; }], - ["%Y-%m", function(d) { return d.getMonth(); }], - ["%Y", function() { return true; }] - ]); + timeFormat = function(date) { + // convert to moment object to manage timezone + date = moment(date).tz(self.timezone); + + if (date.millisecond()) { + return date.format(".SSS"); + } + if (date.second()) { + return date.format(":ss"); + } + if (date.minute()) { + return date.format("HH:mm"); + } + if (date.hour()) { + return date.format("HH:mm"); + } + if (date.day() && date.date() !== 1) { + return date.format("MM-DD"); + } + if (date.date() !== 1) { + return date.format("MM-DD"); + } + if (date.month()) { + return date.format("YYYY-MM"); + } + return date.format("YYYY"); + } } return timeFormat;