diff --git a/x-pack/plugins/synthetics/common/constants/ui.ts b/x-pack/plugins/synthetics/common/constants/ui.ts index d014b8b8ea6ff..189dd40660ae7 100644 --- 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/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/last_refreshed.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/last_refreshed.tsx index 28a4ef1c5b101..bc086f67c822b 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/last_refreshed.tsx +++ b/x-pack/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 ( { - 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 deleted file mode 100644 index c9c4d022b869d..0000000000000 --- a/x-pack/plugins/synthetics/public/apps/synthetics/utils/monitor_test_result/timestamp.ts +++ /dev/null @@ -1,45 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import moment from 'moment'; -import { SHORT_TIMESPAN_LOCALE, SHORT_TS_LOCALE } from '../../../../../common/constants'; - -export const parseTimestamp = (tsValue: string): moment.Moment => { - let parsed = Date.parse(tsValue); - if (isNaN(parsed)) { - parsed = parseInt(tsValue, 10); - } - return moment(parsed); -}; - -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 as unknown) === 'string') { - shortTimestamp = parseTimestamp(timeStamp as unknown as string).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'); - } -}; 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 index 3ddfe441d3895..42cee2817e8f2 100644 --- 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 index 2fc143af4a87f..4b402cc2367cd 100644 --- 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 '';