Replace angular timepicker with EuiSuperDatePicker (#29204)

* replace kbnTimepicker directive with EuiSuperDatePicker * remove kbnTimepicker directive * remove bootstrap datepicker * Embed timepicker in query bar (#29130) * replace kbnTimepicker directive with EuiSuperDatePicker * remove kbnTimepicker directive * remove bootstrap datepicker * embed timepicker in query bar * flesh out date picker in query bar for maps app * wire up refresh config * fix bug with way update function called by watcher * get maps application functional tests working with new timepicker * update setAbsoluteRange for EuiSuperDatePicker * replace setQuickTime with calls to setAbsoluteTime * remove open time picker button in discover empty results view * pass config values to super-date-picker directive * remove getPrettyDuration * clean up typescript lint problems * some functional test fixes * try something else to fix I18n problems * fix some more functional tests * update query_bar jest test * remove unused method in kbn_global_timepicker * do not import removed timepicker styles * remove mode from time state * remove mode from time_history interface * fix problem with ui_settings_defaults * fix failing TSVB functional test * another round to test fixes * more functional test changes * fixes for failing tests * add retry block to flaky tsvb test * styles/bootstrap_dark.less * fix functional tests * call fetch event even when times are the same * add retry around flaky tsvb test * fix timefilter jest test, attempt to fix another flaky functional test * revert emitting fetch outside of areTimePickerValsDifferent check * clean up time mode code that is no longer needed in dashboard * fix timefilter tests changed by timefilter emit revert
elastic · Feb 6, 2019 · 6ad036b · 6ad036b
1 parent ebe69ee
commit 6ad036b
Show file tree

Hide file tree

Showing 116 changed files with 403 additions and 4,020 deletions.
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.js b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.js
@@ -125,7 +125,7 @@ app.directive('dashboardApp', function ($injector) {
       // The 'previouslyStored' check is so we only update the time filter on dashboard open, not during
       // normal cross app navigation.
       if (dashboardStateManager.getIsTimeSavedWithDashboard() && !getAppState.previouslyStored()) {
-        dashboardStateManager.syncTimefilterWithDashboard(timefilter, config.get('timepicker:quickRanges'));
+        dashboardStateManager.syncTimefilterWithDashboard(timefilter);
       }
 
       const updateState = () => {
@@ -307,7 +307,7 @@ app.directive('dashboardApp', function ($injector) {
           // it does on 'open' because it's been saved to the url and the getAppState.previouslyStored() check on
           // reload will cause it not to sync.
           if (dashboardStateManager.getIsTimeSavedWithDashboard()) {
-            dashboardStateManager.syncTimefilterWithDashboard(timefilter, config.get('timepicker:quickRanges'));
+            dashboardStateManager.syncTimefilterWithDashboard(timefilter);
           }
         }
 

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_state.test.js b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_state.test.js
@@ -33,7 +33,6 @@ describe('DashboardState', function () {
     time: {},
     setTime: function (time) { this.time = time; },
   };
-  const mockQuickTimeRanges = [{ from: 'now/w', to: 'now/w', display: 'This week', section: 0 }];
   const mockIndexPattern = { id: 'index1' };
 
   function initDashboardState() {
@@ -52,12 +51,10 @@ describe('DashboardState', function () {
 
       mockTimefilter.time.from = '2015-09-19 06:31:44.000';
       mockTimefilter.time.to = '2015-09-29 06:31:44.000';
-      mockTimefilter.time.mode = 'absolute';
 
       initDashboardState();
-      dashboardState.syncTimefilterWithDashboard(mockTimefilter, mockQuickTimeRanges);
+      dashboardState.syncTimefilterWithDashboard(mockTimefilter);
 
-      expect(mockTimefilter.time.mode).toBe('quick');
       expect(mockTimefilter.time.to).toBe('now/w');
       expect(mockTimefilter.time.from).toBe('now/w');
     });
@@ -69,12 +66,10 @@ describe('DashboardState', function () {
 
       mockTimefilter.time.from = '2015-09-19 06:31:44.000';
       mockTimefilter.time.to = '2015-09-29 06:31:44.000';
-      mockTimefilter.time.mode = 'absolute';
 
       initDashboardState();
-      dashboardState.syncTimefilterWithDashboard(mockTimefilter, mockQuickTimeRanges);
+      dashboardState.syncTimefilterWithDashboard(mockTimefilter);
 
-      expect(mockTimefilter.time.mode).toBe('relative');
       expect(mockTimefilter.time.to).toBe('now');
       expect(mockTimefilter.time.from).toBe('now-13d');
     });
@@ -86,12 +81,10 @@ describe('DashboardState', function () {
 
       mockTimefilter.time.from = 'now/w';
       mockTimefilter.time.to = 'now/w';
-      mockTimefilter.time.mode = 'quick';
 
       initDashboardState();
-      dashboardState.syncTimefilterWithDashboard(mockTimefilter, mockQuickTimeRanges);
+      dashboardState.syncTimefilterWithDashboard(mockTimefilter);
 
-      expect(mockTimefilter.time.mode).toBe('absolute');
       expect(mockTimefilter.time.to).toBe(savedDashboard.timeTo);
       expect(mockTimefilter.time.from).toBe(savedDashboard.timeFrom);
     });

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_state_manager.js b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_state_manager.js
@@ -19,7 +19,6 @@
 
 import { i18n } from '@kbn/i18n';
 import _ from 'lodash';
-import moment from 'moment';
 
 import { DashboardViewMode } from './dashboard_view_mode';
 import { FilterUtils } from './lib/filter_utils';
@@ -144,13 +143,11 @@ export class DashboardStateManager {
    * or a relative time (now-15m), or a moment object
    * @param {String|Object} newTimeFilter.from - either a string representing an absolute or a relative time, or a
    * moment object
-   * @param {String} newTimeFilter.mode
    */
   handleTimeChange(newTimeFilter) {
     store.dispatch(updateTimeRange({
       from: FilterUtils.convertTimeToUTCString(newTimeFilter.from),
       to: FilterUtils.convertTimeToUTCString(newTimeFilter.to),
-      mode: newTimeFilter.mode,
     }));
   }
 
@@ -543,30 +540,17 @@ export class DashboardStateManager {
    * @param {Object} timeFilter
    * @param {func} timeFilter.setTime
    * @param {func} timeFilter.setRefreshInterval
-   * @param quickTimeRanges
    */
-  syncTimefilterWithDashboard(timeFilter, quickTimeRanges) {
+  syncTimefilterWithDashboard(timeFilter) {
     if (!this.getIsTimeSavedWithDashboard()) {
       throw new Error(i18n.translate('kbn.dashboard.stateManager.timeNotSavedWithDashboardErrorMessage', {
         defaultMessage: 'The time is not saved with this dashboard so should not be synced.',
       }));
     }
 
-    let mode;
-    const isMoment = moment(this.savedDashboard.timeTo).isValid();
-    if (isMoment) {
-      mode = 'absolute';
-    } else {
-      const quickTime = _.find(
-        quickTimeRanges,
-        (timeRange) => timeRange.from === this.savedDashboard.timeFrom && timeRange.to === this.savedDashboard.timeTo);
-
-      mode = quickTime ? 'quick' : 'relative';
-    }
     timeFilter.setTime({
       from: this.savedDashboard.timeFrom,
       to: this.savedDashboard.timeTo,
-      mode
     });
 
     if (this.savedDashboard.refreshInterval) {

diff --git a/...gacy/core_plugins/kibana/public/discover/directives/__snapshots__/no_results.test.js.snap b/...gacy/core_plugins/kibana/public/discover/directives/__snapshots__/no_results.test.js.snap
@@ -425,20 +425,13 @@ Array [
       <div
         class="euiText euiText--medium"
       >
-        <h3>
+        <h3
+          data-test-subj="discoverNoResultsTimefilter"
+        >
           Expand your time range
         </h3>
         <p>
-          One or more of the indices you’re looking at contains a date field. Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. You can try 
-          <button
-            aria-expanded="false"
-            class="euiLink euiLink--primary"
-            data-test-subj="discoverNoResultsTimefilter"
-            type="button"
-          >
-            opening the time picker
-          </button>
-           and changing the time range to one which contains data.
+          One or more of the indices you’re looking at contains a date field. Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. You can try changing the time range to one which contains data.
         </p>
       </div>
     </div>

diff --git a/src/legacy/core_plugins/kibana/public/discover/directives/no_results.js b/src/legacy/core_plugins/kibana/public/discover/directives/no_results.js
@@ -33,18 +33,13 @@ import {
   EuiText,
 } from '@elastic/eui';
 
+// eslint-disable-next-line react/prefer-stateless-function
 export class DiscoverNoResults extends Component {
   static propTypes = {
     shardFailures: PropTypes.array,
     timeFieldName: PropTypes.string,
     queryLanguage: PropTypes.string,
-    isTimePickerOpen: PropTypes.bool.isRequired,
     getDocLink: PropTypes.func.isRequired,
-    topNavToggle: PropTypes.func.isRequired,
-  };
-
-  onClickTimePickerButton = () => {
-    this.props.topNavToggle('filter');
   };
 
   render() {
@@ -53,7 +48,6 @@ export class DiscoverNoResults extends Component {
       timeFieldName,
       queryLanguage,
       getDocLink,
-      isTimePickerOpen,
     } = this.props;
 
     let shardFailuresMessage;
@@ -125,7 +119,7 @@ export class DiscoverNoResults extends Component {
           <EuiSpacer size="xl" />
 
           <EuiText>
-            <h3>
+            <h3 data-test-subj="discoverNoResultsTimefilter">
               <FormattedMessage
                 id="kbn.discover.noResults.expandYourTimeRangeTitle"
                 defaultMessage="Expand your time range"
@@ -137,21 +131,7 @@ export class DiscoverNoResults extends Component {
                 id="kbn.discover.noResults.queryMayNotMatchTitle"
                 defaultMessage="One or more of the indices you&rsquo;re looking at contains a date field. Your query may
                   not match anything in the current time range, or there may not be any data at all in
-                  the currently selected time range. You can try {timepickerLink} and changing the time range to one which contains data."
-                values={{
-                  timepickerLink: (
-                    <EuiLink
-                      data-test-subj="discoverNoResultsTimefilter"
-                      onClick={this.onClickTimePickerButton}
-                      aria-expanded={isTimePickerOpen}
-                    >
-                      <FormattedMessage
-                        id="kbn.discover.noResults.openingTimepickerLinkText"
-                        defaultMessage="opening the time picker"
-                      />
-                    </EuiLink>
-                  )
-                }}
+                  the currently selected time range. You can try changing the time range to one which contains data."
               />
             </p>
 

diff --git a/src/legacy/core_plugins/kibana/public/discover/directives/no_results.test.js b/src/legacy/core_plugins/kibana/public/discover/directives/no_results.test.js
@@ -18,9 +18,7 @@
  */
 
 import React from 'react';
-import { renderWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
-import sinon from 'sinon';
-import { findTestSubject } from '@elastic/eui/lib/test';
+import { renderWithIntl } from 'test_utils/enzyme_helpers';
 
 import {
   DiscoverNoResults,
@@ -43,8 +41,6 @@ describe('DiscoverNoResults', () => {
         const component = renderWithIntl(
           <DiscoverNoResults
             shardFailures={shardFailures}
-            isTimePickerOpen={false}
-            topNavToggle={() => {}}
             getDocLink={() => ''}
           />
         );
@@ -58,8 +54,6 @@ describe('DiscoverNoResults', () => {
         const component = renderWithIntl(
           <DiscoverNoResults
             shardFailures={shardFailures}
-            isTimePickerOpen={false}
-            topNavToggle={() => {}}
             getDocLink={() => ''}
           />
         );
@@ -68,45 +62,11 @@ describe('DiscoverNoResults', () => {
       });
     });
 
-    describe('isTimePickerOpen', () => {
-      test('false is reflected in the aria-expanded state of the button', () => {
-        const component = renderWithIntl(
-          <DiscoverNoResults
-            timeFieldName="awesome_time_field"
-            isTimePickerOpen={false}
-            topNavToggle={() => {}}
-            getDocLink={() => ''}
-          />
-        );
-
-        expect(
-          component.find('[data-test-subj="discoverNoResultsTimefilter"]')[0].attribs['aria-expanded']
-        ).toBe('false');
-      });
-
-      test('true is reflected in the aria-expanded state of the button', () => {
-        const component = renderWithIntl(
-          <DiscoverNoResults
-            timeFieldName="awesome_time_field"
-            isTimePickerOpen={true}
-            topNavToggle={() => {}}
-            getDocLink={() => ''}
-          />
-        );
-
-        expect(
-          component.find('[data-test-subj="discoverNoResultsTimefilter"]')[0].attribs['aria-expanded']
-        ).toBe('true');
-      });
-    });
-
     describe('timeFieldName', () => {
       test('renders time range feedback', () => {
         const component = renderWithIntl(
           <DiscoverNoResults
             timeFieldName="awesome_time_field"
-            isTimePickerOpen={false}
-            topNavToggle={() => {}}
             getDocLink={() => ''}
           />
         );
@@ -120,31 +80,12 @@ describe('DiscoverNoResults', () => {
         const component = renderWithIntl(
           <DiscoverNoResults
             queryLanguage="lucene"
-            isTimePickerOpen={false}
-            topNavToggle={() => {}}
             getDocLink={() => 'documentation-link'}
           />
         );
 
         expect(component).toMatchSnapshot();
       });
     });
-
-    describe('topNavToggle', () => {
-      test('is called whe time picker button is clicked', () => {
-        const topNavToggleSpy = sinon.stub();
-        const component = mountWithIntl(
-          <DiscoverNoResults
-            timeFieldName="awesome_time_field"
-            isTimePickerOpen={false}
-            topNavToggle={topNavToggleSpy}
-            getDocLink={() => ''}
-          />
-        );
-
-        findTestSubject(component, 'discoverNoResultsTimefilter').simulate('click');
-        sinon.assert.calledOnce(topNavToggleSpy);
-      });
-    });
   });
 });
diff --git a/src/legacy/core_plugins/kibana/public/discover/index.html b/src/legacy/core_plugins/kibana/public/discover/index.html
@@ -71,8 +71,6 @@ <h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb" ng-if="opt
 
           <discover-no-results
             ng-show="resultState === 'none'"
-            top-nav-toggle="kbnTopNav.toggle"
-            is-time-picker-open="kbnTopNav.isCurrent('filter')"
             shard-failures="failures"
             time-field-name="opts.timefield"
             query-language="state.query.language"