Skip to content

Commit 42d21bc

Browse files
stratoulaelasticmachinecchaos
authored
[Discover] Deangularize timechart header (#66532)
* Deangularize timechart header * Add label attr to options * Watch the interval prop change * Tweaking the UI Mainly moved interval notice to an `append` and copy updates * Remove outdated i18n tokens * fix functional test * Change functional test due to dom changes * fix functional test * remove unecessary translation * remove watcher as it is not necessary anymore * change interval options copies Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: cchaos <caroline.horn@elastic.co>
1 parent 3ce0b57 commit 42d21bc

File tree

14 files changed

+342
-97
lines changed

14 files changed

+342
-97
lines changed

‎src/plugins/data/public/search/aggs/buckets/_interval_options.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,31 +52,31 @@ export const intervalOptions = [
5252
},
5353
{
5454
display: i18n.translate('data.search.aggs.buckets.intervalOptions.hourlyDisplayName', {
55-
defaultMessage: 'Hourly',
55+
defaultMessage: 'Hour',
5656
}),
5757
val: 'h',
5858
},
5959
{
6060
display: i18n.translate('data.search.aggs.buckets.intervalOptions.dailyDisplayName', {
61-
defaultMessage: 'Daily',
61+
defaultMessage: 'Day',
6262
}),
6363
val: 'd',
6464
},
6565
{
6666
display: i18n.translate('data.search.aggs.buckets.intervalOptions.weeklyDisplayName', {
67-
defaultMessage: 'Weekly',
67+
defaultMessage: 'Week',
6868
}),
6969
val: 'w',
7070
},
7171
{
7272
display: i18n.translate('data.search.aggs.buckets.intervalOptions.monthlyDisplayName', {
73-
defaultMessage: 'Monthly',
73+
defaultMessage: 'Month',
7474
}),
7575
val: 'M',
7676
},
7777
{
7878
display: i18n.translate('data.search.aggs.buckets.intervalOptions.yearlyDisplayName', {
79-
defaultMessage: 'Yearly',
79+
defaultMessage: 'Year',
8080
}),
8181
val: 'y',
8282
},

‎src/plugins/discover/public/application/angular/discover.html‎

Lines changed: 11 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -101,45 +101,17 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
101101
class="dscTimechart"
102102
ng-if="opts.timefield"
103103
>
104-
<header class="dscTimechart__header">
105-
<div class="small">
106-
<label
107-
for="dscResultsIntervalSelector"
108-
tooltip="{{::'discover.howToChangeTheTimeTooltip' | i18n: {defaultMessage: 'To change the time, click the calendar icon in the navigation bar'} }}"
109-
>
110-
{{toMoment(timeRange.from)}} - {{toMoment(timeRange.to)}}
111-
</label>
112-
113-
&mdash;
114-
115-
<span class="form-inline">
116-
<select
117-
id="dscResultsIntervalSelector"
118-
class="dscResults__interval form-control"
119-
ng-model="state.interval"
120-
ng-options="interval.val as interval.display for interval in intervalOptions | filter: intervalEnabled"
121-
ng-blur="toggleInterval()"
122-
data-test-subj="discoverIntervalSelect"
123-
>
124-
</select>
125-
<span ng-if="bucketInterval.scaled">
126-
<icon-tip
127-
content="getBucketIntervalToolTipText()"
128-
position="'top'"
129-
></icon-tip>
130-
<span
131-
data-test-subj="discoverIntervalSelectScaledToDesc"
132-
i18n-id="discover.scaledToDescription"
133-
i18n-default-message="Scaled to {bucketIntervalDescription}"
134-
i18n-values="{
135-
bucketIntervalDescription: bucketInterval.description
136-
}"
137-
></span>
138-
</span>
139-
</span>
140-
</div>
141-
142-
</header>
104+
<timechart-header
105+
from="toMoment(timeRange.from)"
106+
to="toMoment(timeRange.to)"
107+
options="intervalOptions"
108+
on-change-interval="changeInterval"
109+
state-interval="state.interval"
110+
show-scaled-info="bucketInterval.scaled"
111+
bucket-interval-description="bucketInterval.description"
112+
bucket-interval-scale="bucketInterval.scale"
113+
>
114+
</timechart-header>
143115

144116
<discover-histogram
145117
class="dscHistogram"

‎src/plugins/discover/public/application/angular/discover.js‎

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -321,10 +321,6 @@ function discoverController(
321321
}
322322
);
323323

324-
$scope.intervalEnabled = function(interval) {
325-
return interval.val !== 'custom';
326-
};
327-
328324
let abortController;
329325
$scope.$on('$destroy', () => {
330326
if (abortController) abortController.abort();
@@ -614,24 +610,6 @@ function discoverController(
614610
$scope.state.index = $scope.indexPattern.id;
615611
$scope.state.sort = getSortArray($scope.state.sort, $scope.indexPattern);
616612

617-
$scope.getBucketIntervalToolTipText = () => {
618-
return i18n.translate('discover.bucketIntervalTooltip', {
619-
defaultMessage:
620-
'This interval creates {bucketsDescription} to show in the selected time range, so it has been scaled to {bucketIntervalDescription}',
621-
values: {
622-
bucketsDescription:
623-
$scope.bucketInterval.scale > 1
624-
? i18n.translate('discover.bucketIntervalTooltip.tooLargeBucketsText', {
625-
defaultMessage: 'buckets that are too large',
626-
})
627-
: i18n.translate('discover.bucketIntervalTooltip.tooManyBucketsText', {
628-
defaultMessage: 'too many buckets',
629-
}),
630-
bucketIntervalDescription: $scope.bucketInterval.description,
631-
},
632-
});
633-
};
634-
635613
$scope.opts = {
636614
// number of records to fetch, then paginate through
637615
sampleSize: config.get(SAMPLE_SIZE_SETTING),
@@ -681,12 +659,12 @@ function discoverController(
681659
error => addFatalError(core.fatalErrors, error)
682660
)
683661
);
684-
//Handling change oft the histogram interval
685-
$scope.$watch('state.interval', function(newInterval, oldInterval) {
686-
if (newInterval !== oldInterval) {
687-
setAppState({ interval: newInterval });
662+
663+
$scope.changeInterval = interval => {
664+
if (interval) {
665+
setAppState({ interval });
688666
}
689-
});
667+
};
690668

691669
$scope.$watchMulti(
692670
['rows', 'fetchStatus'],

‎src/plugins/discover/public/application/components/timechart_header/index.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
export { TimechartHeader } from './timechart_header';
21+
export { createTimechartHeaderDirective } from './timechart_header_directive';

‎src/plugins/discover/public/application/components/timechart_header/timechart_header.test.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
import React from 'react';
20+
import { mountWithIntl } from 'test_utils/enzyme_helpers';
21+
import { ReactWrapper } from 'enzyme';
22+
import { TimechartHeader, TimechartHeaderProps } from './timechart_header';
23+
import { EuiIconTip } from '@elastic/eui';
24+
// @ts-ignore
25+
import { findTestSubject } from '@elastic/eui/lib/test';
26+
27+
describe('timechart header', function() {
28+
let props: TimechartHeaderProps;
29+
let component: ReactWrapper<TimechartHeaderProps>;
30+
31+
beforeAll(() => {
32+
props = {
33+
from: 'May 14, 2020 @ 11:05:13.590',
34+
to: 'May 14, 2020 @ 11:20:13.590',
35+
stateInterval: 's',
36+
options: [
37+
{
38+
display: 'Auto',
39+
val: 'auto',
40+
},
41+
{
42+
display: 'Millisecond',
43+
val: 'ms',
44+
},
45+
{
46+
display: 'Second',
47+
val: 's',
48+
},
49+
],
50+
onChangeInterval: jest.fn(),
51+
showScaledInfo: undefined,
52+
bucketIntervalDescription: 'second',
53+
bucketIntervalScale: undefined,
54+
};
55+
});
56+
57+
it('TimechartHeader not renders an info text when the showScaledInfo property is not provided', () => {
58+
component = mountWithIntl(<TimechartHeader {...props} />);
59+
expect(component.find(EuiIconTip).length).toBe(0);
60+
});
61+
62+
it('TimechartHeader renders an info text by providing the showScaledInfo property', () => {
63+
props.showScaledInfo = true;
64+
component = mountWithIntl(<TimechartHeader {...props} />);
65+
expect(component.find(EuiIconTip).length).toBe(1);
66+
});
67+
68+
it('expect to render the date range', function() {
69+
component = mountWithIntl(<TimechartHeader {...props} />);
70+
const datetimeRangeText = findTestSubject(component, 'discoverIntervalDateRange');
71+
expect(datetimeRangeText.text()).toBe(
72+
'May 14, 2020 @ 11:05:13.590 - May 14, 2020 @ 11:20:13.590 per'
73+
);
74+
});
75+
76+
it('expects to render a dropdown with the interval options', () => {
77+
component = mountWithIntl(<TimechartHeader {...props} />);
78+
const dropdown = findTestSubject(component, 'discoverIntervalSelect');
79+
expect(dropdown.length).toBe(1);
80+
// @ts-ignore
81+
const values = dropdown.find('option').map(option => option.prop('value'));
82+
expect(values).toEqual(['auto', 'ms', 's']);
83+
// @ts-ignore
84+
const labels = dropdown.find('option').map(option => option.text());
85+
expect(labels).toEqual(['Auto', 'Millisecond', 'Second']);
86+
});
87+
88+
it('should change the interval', function() {
89+
component = mountWithIntl(<TimechartHeader {...props} />);
90+
findTestSubject(component, 'discoverIntervalSelect').simulate('change', {
91+
target: { value: 'ms' },
92+
});
93+
expect(props.onChangeInterval).toHaveBeenCalled();
94+
});
95+
});

0 commit comments

Comments
 (0)