fix(RHINENG-20701): fir utc timestamps in chart tooltips

Author: Fewwy

web/src/components/Incidents/AlertsChart/AlertsChart.tsx

@@ -28,10 +28,11 @@ import { MonitoringState } from '../../../reducers/observe';
 import { IncidentsTooltip } from '../IncidentsTooltip';
 import {
   createAlertsChartBars,
-  formatDate,
   generateDateArray,
   generateAlertsDateArray,
+  useLanguageFromStorage,
 } from '../utils';
+import { dateTimeFormatter } from '../../console/utils/datetime';
 
 const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
   const dispatch = useDispatch();
@@ -49,6 +50,7 @@ const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
   const incidentGroupId = useSelector((state: MonitoringState) =>
     state.plugins.mcp.getIn(['incidentsData', 'groupId']),
   );
+  const lang = useLanguageFromStorage();
 
   // Use dynamic date range based on actual alerts data instead of fixed chartDays
   const dateValues = useMemo(() => {
@@ -118,15 +120,18 @@ const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
                     if (datum.nodata) {
                       return null;
                     }
+                    const startDate = dateTimeFormatter(lang).format(new Date(datum.y0));
+                    const endDate =
+                      datum.alertstate === 'firing'
+                        ? '---'
+                        : dateTimeFormatter(lang).format(new Date(datum.y));
                     return `Alert Severity: ${datum.severity}
                     Alert Name: ${datum.name ? datum.name : '---'}
                     Namespace: ${datum.namespace ? datum.namespace : '---'}
                     Layer: ${datum.layer ? datum.layer : '---'}
                     Component: ${datum.component}
-                    Start: ${formatDate(new Date(datum.y0), true)}
-                    End: ${
-                      datum.alertstate === 'firing' ? '---' : formatDate(new Date(datum.y), true)
-                    }`;
+                    Start: ${startDate}
+                    End: ${endDate}`;
                   }}
                 />
               }

web/src/components/Incidents/IncidentsChart/IncidentsChart.tsx

@@ -31,10 +31,11 @@ import { IncidentsTooltip } from '../IncidentsTooltip';
 import { Incident } from '../model';
 import {
   createIncidentsChartBars,
-  formatDate,
   generateDateArray,
   updateBrowserUrl,
+  useLanguageFromStorage,
 } from '../utils';
+import { dateTimeFormatter } from '../../console/utils/datetime';
 
 const IncidentsChart = ({
   incidentsData,
@@ -55,6 +56,7 @@ const IncidentsChart = ({
     state.plugins.mcp.getIn(['incidentsData', 'incidentsActiveFilters']),
   );
   const selectedGroupId = incidentsActiveFilters.groupId?.[0] ?? null;
+  const lang = useLanguageFromStorage();
 
   const chartData = useMemo(() => {
     if (!Array.isArray(incidentsData) || incidentsData.length === 0) return [];
@@ -137,12 +139,17 @@ const IncidentsChart = ({
                     if (datum.nodata) {
                       return null;
                     }
+                    const startDate = dateTimeFormatter(lang).format(new Date(datum.y0));
+                    const endDate =
+                      datum.alertstate === 'firing'
+                        ? '---'
+                        : dateTimeFormatter(lang).format(new Date(datum.y));
                     return `Severity: ${datum.name}
                     Component: ${datum.componentList?.join(', ')}
                     Incident ID:
                     ${datum.group_id}
-                    Start: ${formatDate(new Date(datum.y0), true)}
-                    End: ${datum.firing ? '---' : formatDate(new Date(datum.y), true)}`;
+                    Start: ${startDate}
+                    End: ${endDate}`;
                   }}
                 />
               }

web/src/components/Incidents/utils.ts

@@ -16,6 +16,7 @@ import {
   SpanDates,
   Timestamps,
 } from './model';
+import { useState, useEffect } from 'react';
 
 function consolidateAndMergeIntervals(data: Incident, dateArray: SpanDates) {
   const severityRank = { 2: 2, 1: 1, 0: 0 };
@@ -236,20 +237,6 @@ export const createAlertsChartBars = (alert: Alert) => {
   return data;
 };
 
-export const formatDate = (date: Date, isTime: boolean) => {
-  const userLocale = navigator.language || 'en-US';
-  const dateString = date?.toLocaleDateString(userLocale, {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  });
-  const timeString = date?.toLocaleTimeString(userLocale, {
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-  return isTime ? `${dateString}, ${timeString}` : dateString;
-};
-
 /**
  * Generates an array of dates, each representing midnight (00:00:00) of the past `days` number of days, starting from today.
  *
@@ -702,3 +689,26 @@ export const getFilterKey = (categoryName: string): string => {
   }
   return categoryName.toLowerCase();
 };
+
+const LAST_LANGUAGE_LOCAL_STORAGE_KEY = 'bridge/last-language';
+
+export const getLastLanguage = (): string =>
+  localStorage.getItem(LAST_LANGUAGE_LOCAL_STORAGE_KEY) || navigator.language || 'en-US';
+
+export const useLanguageFromStorage = () => {
+  const [lang, setLang] = useState(getLastLanguage());
+
+  useEffect(() => {
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === LAST_LANGUAGE_LOCAL_STORAGE_KEY) {
+        setLang(e.newValue || getLastLanguage());
+      }
+    };
+    window.addEventListener('storage', handleStorageChange);
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []);
+
+  return lang;
+};