Skip to content

Commit 41ef104

Browse files
cauemarcondescauemarcondes
committed
[APM] Enabling yesterday option when 24 hours is selected (#90017)
* enabling yesterday option when 24 hours is selected * addressing PR comments * addressing PR comments * enabling select box
1 parent f9b2ad1 commit 41ef104

4 files changed

Lines changed: 154 additions & 37 deletions

File tree

‎x-pack/plugins/apm/common/utils/formatters/datetime.test.ts‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -170,37 +170,52 @@ describe('date time formatters', () => {
170170
it('milliseconds', () => {
171171
const start = moment('2019-10-29 08:00:00.001');
172172
const end = moment('2019-10-29 08:00:00.005');
173-
expect(getDateDifference(start, end, 'milliseconds')).toEqual(4);
173+
expect(
174+
getDateDifference({ start, end, unitOfTime: 'milliseconds' })
175+
).toEqual(4);
174176
});
175177
it('seconds', () => {
176178
const start = moment('2019-10-29 08:00:00');
177179
const end = moment('2019-10-29 08:00:10');
178-
expect(getDateDifference(start, end, 'seconds')).toEqual(10);
180+
expect(getDateDifference({ start, end, unitOfTime: 'seconds' })).toEqual(
181+
10
182+
);
179183
});
180184
it('minutes', () => {
181185
const start = moment('2019-10-29 08:00:00');
182186
const end = moment('2019-10-29 08:15:00');
183-
expect(getDateDifference(start, end, 'minutes')).toEqual(15);
187+
expect(getDateDifference({ start, end, unitOfTime: 'minutes' })).toEqual(
188+
15
189+
);
184190
});
185191
it('hours', () => {
186192
const start = moment('2019-10-29 08:00:00');
187193
const end = moment('2019-10-29 10:00:00');
188-
expect(getDateDifference(start, end, 'hours')).toEqual(2);
194+
expect(getDateDifference({ start, end, unitOfTime: 'hours' })).toEqual(2);
189195
});
190196
it('days', () => {
191197
const start = moment('2019-10-29 08:00:00');
192198
const end = moment('2019-10-30 10:00:00');
193-
expect(getDateDifference(start, end, 'days')).toEqual(1);
199+
expect(getDateDifference({ start, end, unitOfTime: 'days' })).toEqual(1);
194200
});
195201
it('months', () => {
196202
const start = moment('2019-10-29 08:00:00');
197203
const end = moment('2019-12-29 08:00:00');
198-
expect(getDateDifference(start, end, 'months')).toEqual(2);
204+
expect(getDateDifference({ start, end, unitOfTime: 'months' })).toEqual(
205+
2
206+
);
199207
});
200208
it('years', () => {
201209
const start = moment('2019-10-29 08:00:00');
202210
const end = moment('2020-10-29 08:00:00');
203-
expect(getDateDifference(start, end, 'years')).toEqual(1);
211+
expect(getDateDifference({ start, end, unitOfTime: 'years' })).toEqual(1);
212+
});
213+
it('precise days', () => {
214+
const start = moment('2019-10-29 08:00:00');
215+
const end = moment('2019-10-30 10:00:00');
216+
expect(
217+
getDateDifference({ start, end, unitOfTime: 'days', precise: true })
218+
).toEqual(1.0833333333333333);
204219
});
205220
});
206221
});

‎x-pack/plugins/apm/common/utils/formatters/datetime.ts‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -58,37 +58,43 @@ function getDateFormat(dateUnit: DateUnit) {
5858
}
5959
}
6060

61-
export const getDateDifference = (
62-
start: moment.Moment,
63-
end: moment.Moment,
64-
unitOfTime: DateUnit | TimeUnit
65-
) => end.diff(start, unitOfTime);
61+
export const getDateDifference = ({
62+
start,
63+
end,
64+
unitOfTime,
65+
precise,
66+
}: {
67+
start: moment.Moment;
68+
end: moment.Moment;
69+
unitOfTime: DateUnit | TimeUnit;
70+
precise?: boolean;
71+
}) => end.diff(start, unitOfTime, precise);
6672

6773
function getFormatsAccordingToDateDifference(
6874
start: moment.Moment,
6975
end: moment.Moment
7076
) {
71-
if (getDateDifference(start, end, 'years') >= 5) {
77+
if (getDateDifference({ start, end, unitOfTime: 'years' }) >= 5) {
7278
return { dateFormat: getDateFormat('years') };
7379
}
7480

75-
if (getDateDifference(start, end, 'months') >= 5) {
81+
if (getDateDifference({ start, end, unitOfTime: 'months' }) >= 5) {
7682
return { dateFormat: getDateFormat('months') };
7783
}
7884

7985
const dateFormatWithDays = getDateFormat('days');
80-
if (getDateDifference(start, end, 'days') > 1) {
86+
if (getDateDifference({ start, end, unitOfTime: 'days' }) > 1) {
8187
return { dateFormat: dateFormatWithDays };
8288
}
8389

84-
if (getDateDifference(start, end, 'minutes') >= 1) {
90+
if (getDateDifference({ start, end, unitOfTime: 'minutes' }) >= 1) {
8591
return {
8692
dateFormat: dateFormatWithDays,
8793
timeFormat: getTimeFormat('minutes'),
8894
};
8995
}
9096

91-
if (getDateDifference(start, end, 'seconds') >= 10) {
97+
if (getDateDifference({ start, end, unitOfTime: 'seconds' }) >= 10) {
9298
return {
9399
dateFormat: dateFormatWithDays,
94100
timeFormat: getTimeFormat('seconds'),

‎x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx‎

Lines changed: 81 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
} from '../../../utils/testHelpers';
1818
import { TimeComparison } from './';
1919
import * as urlHelpers from '../../shared/Links/url_helpers';
20+
import moment from 'moment';
2021

2122
function getWrapper(params?: IUrlParams) {
2223
return ({ children }: { children?: ReactNode }) => {
@@ -31,6 +32,10 @@ function getWrapper(params?: IUrlParams) {
3132
}
3233

3334
describe('TimeComparison', () => {
35+
beforeAll(() => {
36+
moment.tz.setDefault('Europe/Amsterdam');
37+
});
38+
afterAll(() => moment.tz.setDefault(''));
3439
const spy = jest.spyOn(urlHelpers, 'replace');
3540
beforeEach(() => {
3641
jest.resetAllMocks();
@@ -40,6 +45,7 @@ describe('TimeComparison', () => {
4045
const Wrapper = getWrapper({
4146
start: '2021-01-28T14:45:00.000Z',
4247
end: '2021-01-28T15:00:00.000Z',
48+
rangeTo: 'now',
4349
});
4450
render(<TimeComparison />, {
4551
wrapper: Wrapper,
@@ -57,6 +63,7 @@ describe('TimeComparison', () => {
5763
end: '2021-01-28T15:00:00.000Z',
5864
comparisonEnabled: true,
5965
comparisonType: 'yesterday',
66+
rangeTo: 'now',
6067
});
6168
const component = render(<TimeComparison />, {
6269
wrapper: Wrapper,
@@ -67,13 +74,64 @@ describe('TimeComparison', () => {
6774
.selectedIndex
6875
).toEqual(0);
6976
});
77+
78+
it('enables yesterday option when date difference is equal to 24 hours', () => {
79+
const Wrapper = getWrapper({
80+
start: '2021-01-28T10:00:00.000Z',
81+
end: '2021-01-29T10:00:00.000Z',
82+
comparisonEnabled: true,
83+
comparisonType: 'yesterday',
84+
rangeTo: 'now',
85+
});
86+
const component = render(<TimeComparison />, {
87+
wrapper: Wrapper,
88+
});
89+
expectTextsInDocument(component, ['Yesterday', 'A week ago']);
90+
expect(
91+
(component.getByTestId('comparisonSelect') as HTMLSelectElement)
92+
.selectedIndex
93+
).toEqual(0);
94+
});
95+
96+
it('selects previous period when rangeTo is different than now', () => {
97+
const Wrapper = getWrapper({
98+
start: '2021-01-28T10:00:00.000Z',
99+
end: '2021-01-29T10:00:00.000Z',
100+
comparisonEnabled: true,
101+
comparisonType: 'previousPeriod',
102+
rangeTo: 'now-15m',
103+
});
104+
const component = render(<TimeComparison />, {
105+
wrapper: Wrapper,
106+
});
107+
expectTextsInDocument(component, ['28/01 11:00 - 29/01 11:00']);
108+
expect(
109+
(component.getByTestId('comparisonSelect') as HTMLSelectElement)
110+
.selectedIndex
111+
).toEqual(0);
112+
});
70113
});
71114

72115
describe('Time range is between 24 hours - 1 week', () => {
116+
it("doesn't show yesterday option when date difference is greater than 24 hours", () => {
117+
const Wrapper = getWrapper({
118+
start: '2021-01-28T10:00:00.000Z',
119+
end: '2021-01-29T11:00:00.000Z',
120+
comparisonEnabled: true,
121+
comparisonType: 'week',
122+
rangeTo: 'now',
123+
});
124+
const component = render(<TimeComparison />, {
125+
wrapper: Wrapper,
126+
});
127+
expectTextsNotInDocument(component, ['Yesterday']);
128+
expectTextsInDocument(component, ['A week ago']);
129+
});
73130
it('sets default values', () => {
74131
const Wrapper = getWrapper({
75132
start: '2021-01-26T15:00:00.000Z',
76133
end: '2021-01-28T15:00:00.000Z',
134+
rangeTo: 'now',
77135
});
78136
render(<TimeComparison />, {
79137
wrapper: Wrapper,
@@ -91,6 +149,7 @@ describe('TimeComparison', () => {
91149
end: '2021-01-28T15:00:00.000Z',
92150
comparisonEnabled: true,
93151
comparisonType: 'week',
152+
rangeTo: 'now',
94153
});
95154
const component = render(<TimeComparison />, {
96155
wrapper: Wrapper,
@@ -102,6 +161,24 @@ describe('TimeComparison', () => {
102161
.selectedIndex
103162
).toEqual(0);
104163
});
164+
165+
it('selects previous period when rangeTo is different than now', () => {
166+
const Wrapper = getWrapper({
167+
start: '2021-01-26T15:00:00.000Z',
168+
end: '2021-01-28T15:00:00.000Z',
169+
comparisonEnabled: true,
170+
comparisonType: 'previousPeriod',
171+
rangeTo: '2021-01-28T15:00:00.000Z',
172+
});
173+
const component = render(<TimeComparison />, {
174+
wrapper: Wrapper,
175+
});
176+
expectTextsInDocument(component, ['26/01 16:00 - 28/01 16:00']);
177+
expect(
178+
(component.getByTestId('comparisonSelect') as HTMLSelectElement)
179+
.selectedIndex
180+
).toEqual(0);
181+
});
105182
});
106183

107184
describe('Time range is greater than 7 days', () => {
@@ -111,12 +188,13 @@ describe('TimeComparison', () => {
111188
end: '2021-01-28T15:00:00.000Z',
112189
comparisonEnabled: true,
113190
comparisonType: 'previousPeriod',
191+
rangeTo: 'now',
114192
});
115193
const component = render(<TimeComparison />, {
116194
wrapper: Wrapper,
117195
});
118196
expect(spy).not.toHaveBeenCalled();
119-
expectTextsInDocument(component, ['20/01 - 28/01']);
197+
expectTextsInDocument(component, ['20/01 16:00 - 28/01 16:00']);
120198
expect(
121199
(component.getByTestId('comparisonSelect') as HTMLSelectElement)
122200
.selectedIndex
@@ -129,12 +207,13 @@ describe('TimeComparison', () => {
129207
end: '2021-01-28T15:00:00.000Z',
130208
comparisonEnabled: true,
131209
comparisonType: 'previousPeriod',
210+
rangeTo: 'now',
132211
});
133212
const component = render(<TimeComparison />, {
134213
wrapper: Wrapper,
135214
});
136215
expect(spy).not.toHaveBeenCalled();
137-
expectTextsInDocument(component, ['20/12/20 - 28/01/21']);
216+
expectTextsInDocument(component, ['20/12/20 16:00 - 28/01/21 16:00']);
138217
expect(
139218
(component.getByTestId('comparisonSelect') as HTMLSelectElement)
140219
.selectedIndex

‎x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx‎

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,21 @@ function formatPreviousPeriodDates({
3333
momentEnd: moment.Moment;
3434
}) {
3535
const isDifferentYears = momentStart.get('year') !== momentEnd.get('year');
36-
const dateFormat = isDifferentYears ? 'DD/MM/YY' : 'DD/MM';
36+
const dateFormat = isDifferentYears ? 'DD/MM/YY HH:mm' : 'DD/MM HH:mm';
3737
return `${momentStart.format(dateFormat)} - ${momentEnd.format(dateFormat)}`;
3838
}
3939

40-
function getSelectOptions({ start, end }: { start?: string; end?: string }) {
40+
function getSelectOptions({
41+
start,
42+
end,
43+
rangeTo,
44+
}: {
45+
start?: string;
46+
end?: string;
47+
rangeTo?: string;
48+
}) {
4149
const momentStart = moment(start);
4250
const momentEnd = moment(end);
43-
const dateDiff = getDateDifference(momentStart, momentEnd, 'days');
4451

4552
const yesterdayOption = {
4653
value: 'yesterday',
@@ -56,33 +63,43 @@ function getSelectOptions({ start, end }: { start?: string; end?: string }) {
5663
}),
5764
};
5865

66+
const dateDiff = getDateDifference({
67+
start: momentStart,
68+
end: momentEnd,
69+
unitOfTime: 'days',
70+
precise: true,
71+
});
72+
const isRangeToNow = rangeTo === 'now';
73+
74+
if (isRangeToNow) {
75+
// Less than or equals to one day
76+
if (dateDiff <= 1) {
77+
return [yesterdayOption, aWeekAgoOption];
78+
}
79+
80+
// Less than or equals to one week
81+
if (dateDiff <= 7) {
82+
return [aWeekAgoOption];
83+
}
84+
}
85+
5986
const prevPeriodOption = {
6087
value: 'previousPeriod',
6188
text: formatPreviousPeriodDates({ momentStart, momentEnd }),
6289
};
6390

64-
// Less than one day
65-
if (dateDiff < 1) {
66-
return [yesterdayOption, aWeekAgoOption];
67-
}
68-
69-
// Less than one week
70-
if (dateDiff <= 7) {
71-
return [aWeekAgoOption];
72-
}
73-
74-
// above one week
91+
// above one week or when rangeTo is not "now"
7592
return [prevPeriodOption];
7693
}
7794

7895
export function TimeComparison() {
7996
const history = useHistory();
8097
const { isMedium, isLarge } = useBreakPoints();
8198
const {
82-
urlParams: { start, end, comparisonEnabled, comparisonType },
99+
urlParams: { start, end, comparisonEnabled, comparisonType, rangeTo },
83100
} = useUrlParams();
84101

85-
const selectOptions = getSelectOptions({ start, end });
102+
const selectOptions = getSelectOptions({ start, end, rangeTo });
86103

87104
// Sets default values
88105
if (comparisonEnabled === undefined || comparisonType === undefined) {
@@ -113,7 +130,7 @@ export function TimeComparison() {
113130
<EuiSelect
114131
fullWidth={!isMedium && isLarge}
115132
data-test-subj="comparisonSelect"
116-
disabled={selectOptions.length <= 1}
133+
disabled={!comparisonEnabled}
117134
options={selectOptions}
118135
value={comparisonType}
119136
prepend={
@@ -123,7 +140,7 @@ export function TimeComparison() {
123140
label={i18n.translate('xpack.apm.timeComparison.label', {
124141
defaultMessage: 'Comparison',
125142
})}
126-
checked={comparisonEnabled && selectOptions.length > 0}
143+
checked={comparisonEnabled}
127144
onChange={() => {
128145
urlHelpers.push(history, {
129146
query: {

0 commit comments

Comments
 (0)