Refactor date/time formatting to use centralized timezone handling and update timeline label formatting

Author: K0lin

web/static/js/core/charts.js

@@ -401,8 +401,8 @@ const LogLynxCharts = {
     /**
      * Format timeline labels based on time range
      */
-    formatTimelineLabels(dataPoints, hours) {
-        const timeZone = (window.LOGLYNX_CONFIG && window.LOGLYNX_CONFIG.timeZone) ? window.LOGLYNX_CONFIG.timeZone : undefined;
+    formatTimelineLabels(dataPoints, hours) {
+        const timeZone = LogLynxUtils.getTimeZone();
 
         if (hours > 0 && hours <= 24) {
             // Hourly labels (HH:MM format)

web/static/js/core/utils.js

@@ -188,64 +188,72 @@ const LogLynxUtils = {
     /**
      * Format date/time
      */
-    formatDateTime: function(dateStr, options = {}) {
-        if (!dateStr) return '-';
-        try {
-            const date = new Date(dateStr);
-            const defaultOptions = {
-                year: 'numeric',
-                month: 'short',
-                day: '2-digit',
-                hour: '2-digit',
-                minute: '2-digit',
-                second: '2-digit',
-                hour12: false,
-                timeZone: window.LOGLYNX_CONFIG?.timeZone || 'UTC'
-            };
-            return new Intl.DateTimeFormat(undefined, { ...defaultOptions, ...options }).format(date);
-        } catch (e) {
-            return dateStr;
-        }
-    },
-
-    /**
-     * Format date only
-     */
-    formatDate: function(dateStr, options = {}) {
-        if (!dateStr) return '-';
-        try {
-            const date = new Date(dateStr);
-            const defaultOptions = {
-                year: 'numeric',
-                month: 'short',
-                day: '2-digit',
-                timeZone: window.LOGLYNX_CONFIG?.timeZone || 'UTC'
-            };
-            return new Intl.DateTimeFormat(undefined, { ...defaultOptions, ...options }).format(date);
-        } catch (e) {
-            return dateStr;
-        }
-    },
-
-    /**
-     * Format time only
-     */
-    formatTime: function(dateStr, options = {}) {
-        if (!dateStr) return '-';
-        try {
-            const date = new Date(dateStr);
-            const defaultOptions = {
-                hour: '2-digit',
-                minute: '2-digit',
-                second: '2-digit',
-                hour12: false,
-                timeZone: window.LOGLYNX_CONFIG?.timeZone || 'UTC'
-            };
-            return new Intl.DateTimeFormat(undefined, { ...defaultOptions, ...options }).format(date);
-        } catch (e) {
-            return dateStr;
-        }
-    },
+    getTimeZone: function() {
+        const configuredTz = window.LOGLYNX_CONFIG?.timeZone;
+        if (!configuredTz || configuredTz === '') {
+            return 'UTC';
+        }
+        try {
+            new Intl.DateTimeFormat(undefined, { timeZone: configuredTz });
+            return configuredTz;
+        } catch (e) {
+            console.warn('Invalid timezone configured:', configuredTz, '- falling back to UTC');
+            return 'UTC';
+        }
+    },
+
+    formatDateTime: function(dateStr, options = {}) {
+        if (!dateStr) return '-';
+        try {
+            const date = new Date(dateStr);
+            const defaultOptions = {
+                year: 'numeric',
+                month: 'short',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                hour12: false,
+                timeZone: this.getTimeZone()
+            };
+            return new Intl.DateTimeFormat(undefined, { ...defaultOptions, ...options }).format(date);
+        } catch (e) {
+            return dateStr;
+        }
+    },
+
+    formatDate: function(dateStr, options = {}) {
+        if (!dateStr) return '-';
+        try {
+            const date = new Date(dateStr);
+            const defaultOptions = {
+                year: 'numeric',
+                month: 'short',
+                day: '2-digit',
+                timeZone: this.getTimeZone()
+            };
+            return new Intl.DateTimeFormat(undefined, { ...defaultOptions, ...options }).format(date);
+        } catch (e) {
+            return dateStr;
+        }
+    },
+
+    formatTime: function(dateStr, options = {}) {
+        if (!dateStr) return '-';
+        try {
+            const date = new Date(dateStr);
+            const defaultOptions = {
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                hour12: false,
+                timeZone: this.getTimeZone()
+            };
+            return new Intl.DateTimeFormat(undefined, { ...defaultOptions, ...options }).format(date);
+        } catch (e) {
+            return dateStr;
+        }
+    },
 
     /**
      * Format relative time (e.g., "2 minutes ago")

web/static/js/pages/ip-detail.js

@@ -341,7 +341,8 @@ function updateTimelineChart(data) {
         timelineChart.destroy();
     }
 
-    const labels = data.map(d => d.hour);
+    const hours = parseInt($('#timelineRange').val()) || 168;
+    const labels = LogLynxCharts.formatTimelineLabels(data, hours);
     const requests = data.map(d => d.requests);
     const bandwidth = data.map(d => d.bandwidth);
 

web/templates/pages/security.html

@@ -260,8 +260,9 @@ <h5 class="table-title">
                 .then(data => {
                     if (errorTimelineChartInstance) LogLynxCharts.destroyChart(errorTimelineChartInstance);
 
+                    const timelineLabels = LogLynxCharts.formatTimelineLabels(data, currentTimeRange);
                     errorTimelineChartInstance = LogLynxCharts.createStackedAreaChart('errorTimelineChart', {
-                        labels: data.map(item => item.hour),
+                        labels: timelineLabels,
                         datasets: [
                             {
                                 label: '4xx Errors',