Fix: timeline x axis respect user-defined timezone (Redmine issue: #7616)

lib/hawat/blueprints/design_bs3/templates/_macros_chart.html

@@ -187,7 +187,9 @@
                                 ),
                                 {
                                     'xlabel': '{{ _("Date") }}',
-                                    'ylabel': '{{ _("Count [#]") }}'
+                                    'ylabel': '{{ _("Count [#]") }}'{%- if 'timezone' in cfg_params %},
+                                    'timezone': '{{ cfg_params['timezone'] }}'
+                                                                    {%- endif %}
                                 }
                             );
                         });
@@ -1060,7 +1062,8 @@
                             _stats,
                             _stats_var_name,
                             '{}_per'.format(id_prefix.replace('-', '_')),
-                            chsection[0]
+                            chsection[0],
+                            cfg_params = cfg_params
                         )
                     }}
 

lib/hawat/blueprints/timeline/__init__.py

@@ -164,6 +164,8 @@ class AbstractSearchView(PsycopgMixin, CustomSearchView):  # pylint: disable=loc
         form_data['dt_to'] = timeline_cfg['dt_to']
         form_data['step'] = timeline_cfg['step']
 
+        form_data['timezone'] = flask.session.get('timezone', 'UTC')
+
     def _search_events_aggr(self, form_args, qtype, aggr_name, enable_toplist=True):
         self.mark_time(
             '{}_{}'.format(qtype, aggr_name),
@@ -282,7 +284,7 @@ class AbstractSearchView(PsycopgMixin, CustomSearchView):  # pylint: disable=loc
     def do_before_response(self, **kwargs):
         self.response_context.update(
             quicksearch_list=self.get_quicksearch_by_time(),
-            get_search_url=self._get_timeline_search_url
+            get_search_url=self._get_timeline_search_url,
         )
 
 

lib/hawat/blueprints/timeline/templates/timeline/search.html

@@ -107,7 +107,8 @@
                             'search_result_statistics' if count_data_available else None,
                             'totals',
                             data_series,
-                            dict_key = 'cnt_events'
+                            dict_key = 'cnt_events',
+                            cfg_params = {'timezone': form_data['timezone']}
                         )
                     }}
                 </div> <!-- /.tabpanel #tab-stats-totals -->
@@ -120,7 +121,8 @@
                         only_sections = all_aggregations,
                         render_empty = True,
                         active_first = not active_count,
-                        active_section = active_section
+                        active_section = active_section,
+                        cfg_params = {'timezone': form_data['timezone']}
                     )
                 }}
             </div>

lib/hawat/static/js/hawat-charts.js

@@ -157,7 +157,30 @@ function render_chart_timeline_multi(chid, chart_data, params) {
         // Customize the X axis.
         chart
             .xAxis.tickFormat(function(d) {
-                return customTickFormat(new Date(d))
+                return customTickFormat(
+                    // create a date object from provided utc timestamp in iso format,
+                    // format it into a string representation in the provided timezone
+                    // without explicitly showing its timezone, then parse the date using
+                    // the moment library (non-iso date parsing might not be supported on
+                    // all browsers), then extract the resulting date object, which the
+                    // browser believes is in local timezone, however it's the correct
+                    // representation in the defined timezone. Can easily break, if
+                    // experiencing problems with x axis, this is a good place to start.
+                    moment(new Date(d).toLocaleString(
+                        undefined,
+                        {
+                            timeZone: params.timezone,  // Can be undefined
+                            year: 'numeric',
+                            month: '2-digit',
+                            day: '2-digit',
+                            hour: '2-digit',
+                            minute: '2-digit',
+                            second: '2-digit',
+                            fractionalSecondDigits: 3,
+                            hour12: false
+                        }
+                    ), 'MM/DD/Y, HH:mm:ss.SSS', true).toDate()
+                )
             })
             .axisLabel(params.xlabel || 'Date')
         ;