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

[7.x] [APM] Enabling yesterday option when 24 hours is selected (#90017) #90295

Merged
merged 1 commit into from
Feb 5, 2021
Merged

[7.x] [APM] Enabling yesterday option when 24 hours is selected (#90017) #90295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
29 changes: 22 additions & 7 deletions x-pack/plugins/apm/common/utils/formatters/datetime.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,37 +170,52 @@ describe('date time formatters', () => {
it('milliseconds', () => {
const start = moment('2019-10-29 08:00:00.001');
const end = moment('2019-10-29 08:00:00.005');
expect(getDateDifference(start, end, 'milliseconds')).toEqual(4);
expect(
getDateDifference({ start, end, unitOfTime: 'milliseconds' })
).toEqual(4);
});
it('seconds', () => {
const start = moment('2019-10-29 08:00:00');
const end = moment('2019-10-29 08:00:10');
expect(getDateDifference(start, end, 'seconds')).toEqual(10);
expect(getDateDifference({ start, end, unitOfTime: 'seconds' })).toEqual(
10
);
});
it('minutes', () => {
const start = moment('2019-10-29 08:00:00');
const end = moment('2019-10-29 08:15:00');
expect(getDateDifference(start, end, 'minutes')).toEqual(15);
expect(getDateDifference({ start, end, unitOfTime: 'minutes' })).toEqual(
15
);
});
it('hours', () => {
const start = moment('2019-10-29 08:00:00');
const end = moment('2019-10-29 10:00:00');
expect(getDateDifference(start, end, 'hours')).toEqual(2);
expect(getDateDifference({ start, end, unitOfTime: 'hours' })).toEqual(2);
});
it('days', () => {
const start = moment('2019-10-29 08:00:00');
const end = moment('2019-10-30 10:00:00');
expect(getDateDifference(start, end, 'days')).toEqual(1);
expect(getDateDifference({ start, end, unitOfTime: 'days' })).toEqual(1);
});
it('months', () => {
const start = moment('2019-10-29 08:00:00');
const end = moment('2019-12-29 08:00:00');
expect(getDateDifference(start, end, 'months')).toEqual(2);
expect(getDateDifference({ start, end, unitOfTime: 'months' })).toEqual(
2
);
});
it('years', () => {
const start = moment('2019-10-29 08:00:00');
const end = moment('2020-10-29 08:00:00');
expect(getDateDifference(start, end, 'years')).toEqual(1);
expect(getDateDifference({ start, end, unitOfTime: 'years' })).toEqual(1);
});
it('precise days', () => {
const start = moment('2019-10-29 08:00:00');
const end = moment('2019-10-30 10:00:00');
expect(
getDateDifference({ start, end, unitOfTime: 'days', precise: true })
).toEqual(1.0833333333333333);
});
});
});
26 changes: 16 additions & 10 deletions x-pack/plugins/apm/common/utils/formatters/datetime.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,37 +58,43 @@ function getDateFormat(dateUnit: DateUnit) {
}
}

export const getDateDifference = (
start: moment.Moment,
end: moment.Moment,
unitOfTime: DateUnit | TimeUnit
) => end.diff(start, unitOfTime);
export const getDateDifference = ({
start,
end,
unitOfTime,
precise,
}: {
start: moment.Moment;
end: moment.Moment;
unitOfTime: DateUnit | TimeUnit;
precise?: boolean;
}) => end.diff(start, unitOfTime, precise);

function getFormatsAccordingToDateDifference(
start: moment.Moment,
end: moment.Moment
) {
if (getDateDifference(start, end, 'years') >= 5) {
if (getDateDifference({ start, end, unitOfTime: 'years' }) >= 5) {
return { dateFormat: getDateFormat('years') };
}

if (getDateDifference(start, end, 'months') >= 5) {
if (getDateDifference({ start, end, unitOfTime: 'months' }) >= 5) {
return { dateFormat: getDateFormat('months') };
}

const dateFormatWithDays = getDateFormat('days');
if (getDateDifference(start, end, 'days') > 1) {
if (getDateDifference({ start, end, unitOfTime: 'days' }) > 1) {
return { dateFormat: dateFormatWithDays };
}

if (getDateDifference(start, end, 'minutes') >= 1) {
if (getDateDifference({ start, end, unitOfTime: 'minutes' }) >= 1) {
return {
dateFormat: dateFormatWithDays,
timeFormat: getTimeFormat('minutes'),
};
}

if (getDateDifference(start, end, 'seconds') >= 10) {
if (getDateDifference({ start, end, unitOfTime: 'seconds' }) >= 10) {
return {
dateFormat: dateFormatWithDays,
timeFormat: getTimeFormat('seconds'),
Expand Down
83 changes: 81 additions & 2 deletions x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
} from '../../../utils/testHelpers';
import { TimeComparison } from './';
import * as urlHelpers from '../../shared/Links/url_helpers';
import moment from 'moment';

function getWrapper(params?: IUrlParams) {
return ({ children }: { children?: ReactNode }) => {
Expand All @@ -31,6 +32,10 @@ function getWrapper(params?: IUrlParams) {
}

describe('TimeComparison', () => {
beforeAll(() => {
moment.tz.setDefault('Europe/Amsterdam');
});
afterAll(() => moment.tz.setDefault(''));
const spy = jest.spyOn(urlHelpers, 'replace');
beforeEach(() => {
jest.resetAllMocks();
Expand All @@ -40,6 +45,7 @@ describe('TimeComparison', () => {
const Wrapper = getWrapper({
start: '2021-01-28T14:45:00.000Z',
end: '2021-01-28T15:00:00.000Z',
rangeTo: 'now',
});
render(<TimeComparison />, {
wrapper: Wrapper,
Expand All @@ -57,6 +63,7 @@ describe('TimeComparison', () => {
end: '2021-01-28T15:00:00.000Z',
comparisonEnabled: true,
comparisonType: 'yesterday',
rangeTo: 'now',
});
const component = render(<TimeComparison />, {
wrapper: Wrapper,
Expand All @@ -67,13 +74,64 @@ describe('TimeComparison', () => {
.selectedIndex
).toEqual(0);
});

it('enables yesterday option when date difference is equal to 24 hours', () => {
const Wrapper = getWrapper({
start: '2021-01-28T10:00:00.000Z',
end: '2021-01-29T10:00:00.000Z',
comparisonEnabled: true,
comparisonType: 'yesterday',
rangeTo: 'now',
});
const component = render(<TimeComparison />, {
wrapper: Wrapper,
});
expectTextsInDocument(component, ['Yesterday', 'A week ago']);
expect(
(component.getByTestId('comparisonSelect') as HTMLSelectElement)
.selectedIndex
).toEqual(0);
});

it('selects previous period when rangeTo is different than now', () => {
const Wrapper = getWrapper({
start: '2021-01-28T10:00:00.000Z',
end: '2021-01-29T10:00:00.000Z',
comparisonEnabled: true,
comparisonType: 'previousPeriod',
rangeTo: 'now-15m',
});
const component = render(<TimeComparison />, {
wrapper: Wrapper,
});
expectTextsInDocument(component, ['28/01 11:00 - 29/01 11:00']);
expect(
(component.getByTestId('comparisonSelect') as HTMLSelectElement)
.selectedIndex
).toEqual(0);
});
});

describe('Time range is between 24 hours - 1 week', () => {
it("doesn't show yesterday option when date difference is greater than 24 hours", () => {
const Wrapper = getWrapper({
start: '2021-01-28T10:00:00.000Z',
end: '2021-01-29T11:00:00.000Z',
comparisonEnabled: true,
comparisonType: 'week',
rangeTo: 'now',
});
const component = render(<TimeComparison />, {
wrapper: Wrapper,
});
expectTextsNotInDocument(component, ['Yesterday']);
expectTextsInDocument(component, ['A week ago']);
});
it('sets default values', () => {
const Wrapper = getWrapper({
start: '2021-01-26T15:00:00.000Z',
end: '2021-01-28T15:00:00.000Z',
rangeTo: 'now',
});
render(<TimeComparison />, {
wrapper: Wrapper,
Expand All @@ -91,6 +149,7 @@ describe('TimeComparison', () => {
end: '2021-01-28T15:00:00.000Z',
comparisonEnabled: true,
comparisonType: 'week',
rangeTo: 'now',
});
const component = render(<TimeComparison />, {
wrapper: Wrapper,
Expand All @@ -102,6 +161,24 @@ describe('TimeComparison', () => {
.selectedIndex
).toEqual(0);
});

it('selects previous period when rangeTo is different than now', () => {
const Wrapper = getWrapper({
start: '2021-01-26T15:00:00.000Z',
end: '2021-01-28T15:00:00.000Z',
comparisonEnabled: true,
comparisonType: 'previousPeriod',
rangeTo: '2021-01-28T15:00:00.000Z',
});
const component = render(<TimeComparison />, {
wrapper: Wrapper,
});
expectTextsInDocument(component, ['26/01 16:00 - 28/01 16:00']);
expect(
(component.getByTestId('comparisonSelect') as HTMLSelectElement)
.selectedIndex
).toEqual(0);
});
});

describe('Time range is greater than 7 days', () => {
Expand All @@ -111,12 +188,13 @@ describe('TimeComparison', () => {
end: '2021-01-28T15:00:00.000Z',
comparisonEnabled: true,
comparisonType: 'previousPeriod',
rangeTo: 'now',
});
const component = render(<TimeComparison />, {
wrapper: Wrapper,
});
expect(spy).not.toHaveBeenCalled();
expectTextsInDocument(component, ['20/01 - 28/01']);
expectTextsInDocument(component, ['20/01 16:00 - 28/01 16:00']);
expect(
(component.getByTestId('comparisonSelect') as HTMLSelectElement)
.selectedIndex
Expand All @@ -129,12 +207,13 @@ describe('TimeComparison', () => {
end: '2021-01-28T15:00:00.000Z',
comparisonEnabled: true,
comparisonType: 'previousPeriod',
rangeTo: 'now',
});
const component = render(<TimeComparison />, {
wrapper: Wrapper,
});
expect(spy).not.toHaveBeenCalled();
expectTextsInDocument(component, ['20/12/20 - 28/01/21']);
expectTextsInDocument(component, ['20/12/20 16:00 - 28/01/21 16:00']);
expect(
(component.getByTestId('comparisonSelect') as HTMLSelectElement)
.selectedIndex
Expand Down
53 changes: 35 additions & 18 deletions x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,21 @@ function formatPreviousPeriodDates({
momentEnd: moment.Moment;
}) {
const isDifferentYears = momentStart.get('year') !== momentEnd.get('year');
const dateFormat = isDifferentYears ? 'DD/MM/YY' : 'DD/MM';
const dateFormat = isDifferentYears ? 'DD/MM/YY HH:mm' : 'DD/MM HH:mm';
return `${momentStart.format(dateFormat)} - ${momentEnd.format(dateFormat)}`;
}

function getSelectOptions({ start, end }: { start?: string; end?: string }) {
function getSelectOptions({
start,
end,
rangeTo,
}: {
start?: string;
end?: string;
rangeTo?: string;
}) {
const momentStart = moment(start);
const momentEnd = moment(end);
const dateDiff = getDateDifference(momentStart, momentEnd, 'days');

const yesterdayOption = {
value: 'yesterday',
Expand All @@ -56,33 +63,43 @@ function getSelectOptions({ start, end }: { start?: string; end?: string }) {
}),
};

const dateDiff = getDateDifference({
start: momentStart,
end: momentEnd,
unitOfTime: 'days',
precise: true,
});
const isRangeToNow = rangeTo === 'now';

if (isRangeToNow) {
// Less than or equals to one day
if (dateDiff <= 1) {
return [yesterdayOption, aWeekAgoOption];
}

// Less than or equals to one week
if (dateDiff <= 7) {
return [aWeekAgoOption];
}
}

const prevPeriodOption = {
value: 'previousPeriod',
text: formatPreviousPeriodDates({ momentStart, momentEnd }),
};

// Less than one day
if (dateDiff < 1) {
return [yesterdayOption, aWeekAgoOption];
}

// Less than one week
if (dateDiff <= 7) {
return [aWeekAgoOption];
}

// above one week
// above one week or when rangeTo is not "now"
return [prevPeriodOption];
}

export function TimeComparison() {
const history = useHistory();
const { isMedium, isLarge } = useBreakPoints();
const {
urlParams: { start, end, comparisonEnabled, comparisonType },
urlParams: { start, end, comparisonEnabled, comparisonType, rangeTo },
} = useUrlParams();

const selectOptions = getSelectOptions({ start, end });
const selectOptions = getSelectOptions({ start, end, rangeTo });

// Sets default values
if (comparisonEnabled === undefined || comparisonType === undefined) {
Expand Down Expand Up @@ -113,7 +130,7 @@ export function TimeComparison() {
<EuiSelect
fullWidth={!isMedium && isLarge}
data-test-subj="comparisonSelect"
disabled={selectOptions.length <= 1}
disabled={!comparisonEnabled}
options={selectOptions}
value={comparisonType}
prepend={
Expand All @@ -123,7 +140,7 @@ export function TimeComparison() {
label={i18n.translate('xpack.apm.timeComparison.label', {
defaultMessage: 'Comparison',
})}
checked={comparisonEnabled && selectOptions.length > 0}
checked={comparisonEnabled}
onChange={() => {
urlHelpers.push(history, {
query: {
Expand Down