Skip to content

Commit

Permalink
[APM] Enabling yesterday option when 24 hours is selected (#90017)
Browse files Browse the repository at this point in the history 
* enabling yesterday option when 24 hours is selected

* addressing PR comments

* addressing PR comments

* enabling select box
  • Loading branch information
@cauemarcondes
cauemarcondes authored Feb 4, 2021
1 parent e676617 commit 7a42a6f
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 37 deletions.
29 changes: 22 additions & 7 deletions x-pack/plugins/apm/common/utils/formatters/datetime.test.ts
View file
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
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
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
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

0 comments on commit 7a42a6f

Please sign in to comment.