removed custom hook and use usetranslation instead

Author: Fewwy

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

@@ -26,13 +26,9 @@ import { useDispatch, useSelector } from 'react-redux';
 import { setAlertsAreLoading } from '../../../actions/observe';
 import { MonitoringState } from '../../../reducers/observe';
 import { IncidentsTooltip } from '../IncidentsTooltip';
-import {
-  createAlertsChartBars,
-  generateDateArray,
-  generateAlertsDateArray,
-  useLanguageFromStorage,
-} from '../utils';
+import { createAlertsChartBars, generateDateArray, generateAlertsDateArray } from '../utils';
 import { dateTimeFormatter } from '../../console/utils/datetime';
+import { useTranslation } from 'react-i18next';
 
 const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
   const dispatch = useDispatch();
@@ -50,8 +46,7 @@ const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
   const incidentGroupId = useSelector((state: MonitoringState) =>
     state.plugins.mcp.getIn(['incidentsData', 'groupId']),
   );
-  const lang = useLanguageFromStorage();
-
+  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) {
@@ -120,11 +115,11 @@ const AlertsChart = ({ theme }: { theme: 'light' | 'dark' }) => {
                     if (datum.nodata) {
                       return null;
                     }
-                    const startDate = dateTimeFormatter(lang).format(new Date(datum.y0));
+                    const startDate = dateTimeFormatter(i18n.language).format(new Date(datum.y0));
                     const endDate =
                       datum.alertstate === 'firing'
                         ? '---'
-                        : dateTimeFormatter(lang).format(new Date(datum.y));
+                        : dateTimeFormatter(i18n.language).format(new Date(datum.y));
                     return `Alert Severity: ${datum.severity}
                     Alert Name: ${datum.name ? datum.name : '---'}
                     Namespace: ${datum.namespace ? datum.namespace : '---'}

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

@@ -29,13 +29,9 @@ import { MonitoringState } from '../../../reducers/observe';
 import '../incidents-styles.css';
 import { IncidentsTooltip } from '../IncidentsTooltip';
 import { Incident } from '../model';
-import {
-  createIncidentsChartBars,
-  generateDateArray,
-  updateBrowserUrl,
-  useLanguageFromStorage,
-} from '../utils';
+import { createIncidentsChartBars, generateDateArray, updateBrowserUrl } from '../utils';
 import { dateTimeFormatter } from '../../console/utils/datetime';
+import { useTranslation } from 'react-i18next';
 
 const IncidentsChart = ({
   incidentsData,
@@ -56,7 +52,7 @@ const IncidentsChart = ({
     state.plugins.mcp.getIn(['incidentsData', 'incidentsActiveFilters']),
   );
   const selectedGroupId = incidentsActiveFilters.groupId?.[0] ?? null;
-  const lang = useLanguageFromStorage();
+  const { i18n } = useTranslation();
 
   const chartData = useMemo(() => {
     if (!Array.isArray(incidentsData) || incidentsData.length === 0) return [];
@@ -139,11 +135,11 @@ const IncidentsChart = ({
                     if (datum.nodata) {
                       return null;
                     }
-                    const startDate = dateTimeFormatter(lang).format(new Date(datum.y0));
+                    const startDate = dateTimeFormatter(i18n.language).format(new Date(datum.y0));
                     const endDate =
                       datum.alertstate === 'firing'
                         ? '---'
-                        : dateTimeFormatter(lang).format(new Date(datum.y));
+                        : dateTimeFormatter(i18n.language).format(new Date(datum.y));
                     return `Severity: ${datum.name}
                     Component: ${datum.componentList?.join(', ')}
                     Incident ID:

web/src/components/Incidents/utils.ts

@@ -16,7 +16,6 @@ import {
   SpanDates,
   Timestamps,
 } from './model';
-import { useState, useEffect } from 'react';
 
 function consolidateAndMergeIntervals(data: Incident, dateArray: SpanDates) {
   const severityRank = { 2: 2, 1: 1, 0: 0 };
@@ -689,26 +688,3 @@ 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;
-};