Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Jul 5, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
974f359
fix last refresh
shahzad31 Jul 3, 2023
93ee3a1
Prefer Kibana locale over browser locale.
awahab07 Jul 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 0 additions & 21 deletions x-pack/plugins/synthetics/common/constants/ui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
11 changes: 0 additions & 11 deletions ...plugins/synthetics/public/apps/synthetics/components/common/components/last_refreshed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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'}
Expand Down
38 changes: 0 additions & 38 deletions x-pack/plugins/synthetics/public/apps/synthetics/utils/formatting/format.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
};
45 changes: 0 additions & 45 deletions x-pack/plugins/synthetics/public/apps/synthetics/utils/monitor_test_result/timestamp.ts
View file
Open in desktop

This file was deleted.

25 changes: 25 additions & 0 deletions x-pack/plugins/synthetics/public/hooks/use_date_format.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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');
});
});
11 changes: 8 additions & 3 deletions x-pack/plugins/synthetics/public/hooks/use_date_format.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Comment on lines +17 to +20
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since Kibana has it's own config level locale, it might not be a good idea to consider browser locale within a plugin.

I pushed this commit to prefer first the Kibana locale, and then the browser locale. Without this, there could be discrepancies between what locale is fed into Kibana vs. what locale the plugin is using. e.g. see below:

Screenshot 2023-07-04 at 18 34 42

}, [kibanaLocale, clientLocale]);

return (timestamp?: string) => {
if (!timestamp) return '';
Expand Down