Skip to content

Commit

Permalink
addressing PR comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@cauemarcondes
cauemarcondes committed Feb 3, 2021
1 parent 14d8cd4 commit 7619127
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 20 deletions.
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 @@ -15,6 +15,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 @@ -29,6 +30,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 @@ -38,6 +43,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 @@ -55,6 +61,7 @@ describe('TimeComparison', () => {
end: '2021-01-28T15:00:00.000Z',
comparisonEnabled: true,
comparisonType: 'yesterday',
rangeTo: 'now',
});
const component = render(<TimeComparison />, {
wrapper: Wrapper,
Expand All @@ -65,13 +72,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 @@ -89,6 +147,7 @@ describe('TimeComparison', () => {
end: '2021-01-28T15:00:00.000Z',
comparisonEnabled: true,
comparisonType: 'week',
rangeTo: 'now',
});
const component = render(<TimeComparison />, {
wrapper: Wrapper,
Expand All @@ -100,6 +159,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 @@ -109,12 +186,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 @@ -127,12 +205,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
47 changes: 29 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 @@ -23,7 +23,7 @@ const PrependContainer = styled.div`
padding: 0 ${px(unit)};
`;

const weekDurationInHours = moment.duration(7, 'days').asHours();
const weekDurationInHours = 24 * 7;

function formatPreviousPeriodDates({
momentStart,
Expand All @@ -33,11 +33,19 @@ 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);

Expand All @@ -55,35 +63,38 @@ function getSelectOptions({ start, end }: { start?: string; end?: string }) {
}),
};

const dateDiffInHours = getDateDifference(momentStart, momentEnd, 'hours');
const isRangeToNow = rangeTo === 'now';

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

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

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

const dateDiffInHours = getDateDifference(momentStart, momentEnd, 'hours');

// Less than one day
if (dateDiffInHours <= 24) {
return [yesterdayOption, aWeekAgoOption];
}

// Less than one week
if (dateDiffInHours <= weekDurationInHours) {
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

0 comments on commit 7619127

Please sign in to comment.