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

Co-authored-by: Abdul Zahid <awahab07@yahoo.com>
This commit is contained in:
Shahzad 2023-07-05 12:10:32 +02:00 committed by GitHub
parent 6a84ea186b
commit 54dc40ff69
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 33 additions and 118 deletions

View file

@ -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',

View file

@ -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'}

View file

@ -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);
};

View file

@ -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');
}
};

View file

@ -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');
});
});

View file

@ -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 '';