Merge pull request #531 from Fewwy/RHINENG-20701

RHINENG-20701: fix utc timestamps in chart tooltips

Author: openshift-merge-bot[bot]

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

@@ -24,12 +24,9 @@ import {
 } from '@patternfly/react-tokens';
 import { useDispatch, useSelector } from 'react-redux';
 import { IncidentsTooltip } from '../IncidentsTooltip';
-import {
-  createAlertsChartBars,
-  formatDate,
-  generateDateArray,
-  generateAlertsDateArray,
-} from '../utils';
+import { createAlertsChartBars, generateDateArray, generateAlertsDateArray } from '../utils';
+import { dateTimeFormatter } from '../../console/utils/datetime';
+import { useTranslation } from 'react-i18next';
 import { AlertsChartBar } from '../model';
 import { setAlertsAreLoading } from '../../../store/actions';
 import { MonitoringState } from '../../../store/store';
@@ -50,6 +47,7 @@ const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
   const incidentGroupId = useSelector(
     (state: MonitoringState) => state.plugins.mcp.incidentsData.groupId,
   );
+  const { i18n } = useTranslation();
   // Use dynamic date range based on actual alerts data instead of fixed chartDays
   const dateValues = useMemo(() => {
     if (!Array.isArray(alertsData) || alertsData.length === 0) {
@@ -125,15 +123,18 @@ const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
                     if (datum.nodata) {
                       return '';
                     }
+                    const startDate = dateTimeFormatter(i18n.language).format(new Date(datum.y0));
+                    const endDate =
+                      datum.alertstate === 'firing'
+                        ? '---'
+                        : dateTimeFormatter(i18n.language).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};
                     Silenced: ${datum.silenced}`;
                   }}
                 />

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

@@ -27,12 +27,9 @@ import { useDispatch, useSelector } from 'react-redux';
 import '../incidents-styles.css';
 import { IncidentsTooltip } from '../IncidentsTooltip';
 import { Incident } from '../model';
-import {
-  createIncidentsChartBars,
-  formatDate,
-  generateDateArray,
-  updateBrowserUrl,
-} from '../utils';
+import { createIncidentsChartBars, generateDateArray, updateBrowserUrl } from '../utils';
+import { dateTimeFormatter } from '../../console/utils/datetime';
+import { useTranslation } from 'react-i18next';
 import { MonitoringState } from '../../../store/store';
 import { setAlertsAreLoading, setIncidentsActiveFilters } from '../../../store/actions';
 
@@ -55,6 +52,7 @@ const IncidentsChart = ({
     (state: MonitoringState) => state.plugins.mcp.incidentsData.incidentsActiveFilters,
   );
   const selectedGroupId = incidentsActiveFilters.groupId?.[0] ?? null;
+  const { i18n } = useTranslation();
 
   const chartData = useMemo(() => {
     if (!Array.isArray(incidentsData) || incidentsData.length === 0) return [];
@@ -139,12 +137,17 @@ const IncidentsChart = ({
                     if (datum.nodata) {
                       return '';
                     }
+                    const startDate = dateTimeFormatter(i18n.language).format(new Date(datum.y0));
+                    const endDate =
+                      datum.alertstate === 'firing'
+                        ? '---'
+                        : dateTimeFormatter(i18n.language).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

@@ -260,20 +260,6 @@ export const createAlertsChartBars = (alert: IncidentsDetailsAlert): AlertsChart
   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.
  *