[Synthetics] Overview page fix last refresh value display (#161086)

Co-authored-by: Abdul Zahid <[email protected]>
elastic · Jul 5, 2023 · 54dc40f · 54dc40f
1 parent 6a84ea1
commit 54dc40f
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 118 deletions.
diff --git a/x-pack/plugins/synthetics/common/constants/ui.ts b/x-pack/plugins/synthetics/common/constants/ui.ts
@@ -67,27 +67,6 @@ export const ML_MODULE_ID = 'uptime_heartbeat';
 
 export const UNNAMED_LOCATION = 'Unnamed-location';
 
-export const SHORT_TS_LOCALE = 'en-short-locale';
-
-export const SHORT_TIMESPAN_LOCALE = {
-  relativeTime: {
-    future: 'in %s',
-    past: '%s ago',
-    s: '%ds',
-    ss: '%ss',
-    m: '%dm',
-    mm: '%dm',
-    h: '%dh',
-    hh: '%dh',
-    d: '%dd',
-    dd: '%dd',
-    M: '%d Mon',
-    MM: '%d Mon',
-    y: '%d Yr',
-    yy: '%d Yr',
-  },
-};
-
 export enum CERT_STATUS {
   OK = 'OK',
   EXPIRING_SOON = 'EXPIRING_SOON',

diff --git a/...plugins/synthetics/public/apps/synthetics/components/common/components/last_refreshed.tsx b/...plugins/synthetics/public/apps/synthetics/components/common/components/last_refreshed.tsx
@@ -10,7 +10,6 @@ import moment from 'moment';
 import { EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useSelector } from 'react-redux';
-import { SHORT_TIMESPAN_LOCALE, SHORT_TS_LOCALE } from '../../../../../../common/constants';
 import { useSyntheticsRefreshContext } from '../../../contexts';
 import { selectRefreshPaused } from '../../../state';
 
@@ -41,18 +40,8 @@ export function LastRefreshed() {
   const isWarning = moment().diff(moment(lastRefreshed), 'minutes') > 1;
   const isDanger = moment().diff(moment(lastRefreshed), 'minutes') > 5;
 
-  const prevLocal: string = moment.locale() ?? 'en';
-
-  const shortLocale = moment.locale(SHORT_TS_LOCALE) === SHORT_TS_LOCALE;
-  if (!shortLocale) {
-    moment.defineLocale(SHORT_TS_LOCALE, SHORT_TIMESPAN_LOCALE);
-  }
-
   const updatedDate = moment(lastRefreshed).from(refresh);
 
-  // Need to reset locale so it doesn't effect other parts of the app
-  moment.locale(prevLocal);
-
   return (
     <EuiText
       color={isDanger ? 'danger' : isWarning ? 'warning' : 'subdued'}

diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/utils/formatting/format.ts b/x-pack/plugins/synthetics/public/apps/synthetics/utils/formatting/format.ts
@@ -5,8 +5,6 @@
  * 2.0.
  */
 import { i18n } from '@kbn/i18n';
-import moment, { Moment } from 'moment';
-import { SHORT_TIMESPAN_LOCALE, SHORT_TS_LOCALE } from '../../../../../common/constants';
 
 // one second = 1 million micros
 const ONE_SECOND_AS_MICROS = 1000000;
@@ -52,39 +50,3 @@ export const formatDuration = (durationMicros: number, { noSpace }: { noSpace?:
     defaultMessage: '{seconds} s',
   });
 };
-
-export const getShortTimeStamp = (timeStamp: moment.Moment, relative = false) => {
-  if (relative) {
-    const prevLocale: string = moment.locale() ?? 'en';
-
-    const shortLocale = moment.locale(SHORT_TS_LOCALE) === SHORT_TS_LOCALE;
-
-    if (!shortLocale) {
-      moment.defineLocale(SHORT_TS_LOCALE, SHORT_TIMESPAN_LOCALE);
-    }
-
-    let shortTimestamp;
-    if (typeof timeStamp === 'string') {
-      shortTimestamp = parseTimestamp(timeStamp).fromNow();
-    } else {
-      shortTimestamp = timeStamp.fromNow();
-    }
-
-    // Reset it so, it doesn't impact other part of the app
-    moment.locale(prevLocale);
-    return shortTimestamp;
-  } else {
-    if (moment().diff(timeStamp, 'd') >= 1) {
-      return timeStamp.format('ll LTS');
-    }
-    return timeStamp.format('LTS');
-  }
-};
-
-export const parseTimestamp = (tsValue: string): Moment => {
-  let parsed = Date.parse(tsValue);
-  if (isNaN(parsed)) {
-    parsed = parseInt(tsValue, 10);
-  }
-  return moment(parsed);
-};
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/utils/monitor_test_result/timestamp.ts b/x-pack/plugins/synthetics/public/apps/synthetics/utils/monitor_test_result/timestamp.ts
diff --git a/x-pack/plugins/synthetics/public/hooks/use_date_format.test.tsx b/x-pack/plugins/synthetics/public/hooks/use_date_format.test.tsx
@@ -6,10 +6,25 @@
  */
 
 import { renderHook } from '@testing-library/react-hooks';
+import { i18n } from '@kbn/i18n';
+
+jest.mock('@kbn/i18n', () => ({
+  i18n: {
+    getLocale: jest.fn().mockReturnValue(undefined),
+  },
+}));
 
 import { useDateFormat } from './use_date_format';
 
 describe('useDateFormat', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
   Object.defineProperty(global.navigator, 'language', {
     value: 'en-US',
     writable: true,
@@ -26,4 +41,14 @@ describe('useDateFormat', () => {
     const response = renderHook(() => useDateFormat());
     expect(response.result.current('2023-02-01 13:00:00')).toEqual('1 Feb 2023 @ 13:00');
   });
+  it('prefers Kibana locale if set', () => {
+    jest.spyOn(i18n, 'getLocale').mockReturnValue('fr-FR');
+
+    Object.defineProperty(global.navigator, 'language', {
+      value: 'en-GB',
+      writable: true,
+    });
+    const response = renderHook(() => useDateFormat());
+    expect(response.result.current('2023-02-01 13:00:00')).toEqual('1 févr. 2023 @ 13:00');
+  });
 });
diff --git a/x-pack/plugins/synthetics/public/hooks/use_date_format.ts b/x-pack/plugins/synthetics/public/hooks/use_date_format.ts
@@ -7,13 +7,18 @@
 
 import moment from 'moment';
 import { useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
 
 export function useDateFormat(): (timestamp?: string) => string {
-  const locale = navigator.language;
+  const kibanaLocale = i18n.getLocale();
+  const clientLocale = navigator.language;
 
   useEffect(() => {
-    moment.locale(locale);
-  }, [locale]);
+    const preferredLocale = kibanaLocale ?? clientLocale;
+    if (moment.locale() !== preferredLocale) {
+      moment.locale(preferredLocale);
+    }
+  }, [kibanaLocale, clientLocale]);
 
   return (timestamp?: string) => {
     if (!timestamp) return '';