Skip to content
This repository has been archived by the owner on Dec 13, 2022. It is now read-only.

Commit

Permalink
fix(graph): manage timezone to display graphs (#7503)
Browse files Browse the repository at this point in the history 
* fix(graph): use user timezone when display graph

* tmp

* tmp

* Update www/include/views/graphs/javascript/centreon-graph.js

Co-Authored-By: kduret <duret.kevin@gmail.com>

* Update centreon-graph.js
  • Loading branch information
@kduret @loiclau
kduret authored and loiclau committed May 10, 2019
1 parent 114e39c commit 240b1ef
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 30 deletions.
18 changes: 14 additions & 4 deletions www/include/views/graphs/graph-periods.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,19 +59,29 @@
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);
duration = moment.duration(
parseInt(parseInterval[1], 10),
parseInterval[2]
);
start = moment();
end = moment();
start = moment().tz(timezone);
end = moment().tz(timezone);
start.subtract(parseInterval[1], parseInterval[2]);
}

Expand Down
31 changes: 25 additions & 6 deletions www/include/views/graphs/graph-split.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand All @@ -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
Expand Down Expand Up @@ -243,19 +249,32 @@
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);
duration = moment.duration(
parseInt(parseInterval[1], 10),
parseInterval[2]
);
start = moment();
end = moment();
start = moment().tz(timezone);
end = moment().tz(timezone);
start.subtract(parseInterval[1], parseInterval[2]);
}

Expand Down
23 changes: 19 additions & 4 deletions www/include/views/graphs/graphs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,6 +396,7 @@ <h2>{t}Grid system{/t}</h2>
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();
Expand Down Expand Up @@ -474,19 +475,32 @@ <h2>{t}Grid system{/t}</h2>
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);
duration = moment.duration(
parseInt(parseInterval[1], 10),
parseInterval[2]
);
start = moment();
end = moment();
start = moment().tz(timezone);
end = moment().tz(timezone);
start.subtract(parseInterval[1], parseInterval[2]);
}

Expand All @@ -496,6 +510,7 @@ <h2>{t}Grid system{/t}</h2>
} else {
baseUrl += '?';
}

baseUrl += 'chartId=' + chartId + '&start=' + start.unix() + '&end=' + end.unix();
window.location = baseUrl;
});
Expand Down
57 changes: 41 additions & 16 deletions www/include/views/graphs/javascript/centreon-graph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -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;
}
Expand All @@ -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 {
Expand All @@ -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;
Expand Down

0 comments on commit 240b1ef

Please sign in to comment.