use wrapper's setRefreshInterval subscriber method

elastic · Jun 20, 2019 · fb462ee · fb462ee
1 parent 0c385e9
commit fb462ee
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/...ins/ml/public/data_frame/pages/job_management/components/job_list/use_refresh_interval.ts b/...ins/ml/public/data_frame/pages/job_management/components/job_list/use_refresh_interval.ts
@@ -6,7 +6,7 @@
 
 import React, { useEffect } from 'react';
 
-import { timefilter } from 'ui/timefilter';
+import { timefilter } from '../../../../../../common/timefilter';
 
 import {
   DEFAULT_REFRESH_INTERVAL_MS,
@@ -21,6 +21,7 @@ export const useRefreshInterval = (
 ) => {
   useEffect(() => {
     let jobsRefreshInterval: null | number = null;
+    let timefilterSubscriber: { unsubscribe: () => void };
 
     timefilter.disableTimeRangeSelector();
     timefilter.enableAutoRefreshSelector();
@@ -44,7 +45,7 @@ export const useRefreshInterval = (
 
     function initAutoRefreshUpdate() {
       // update the interval if it changes
-      timefilter.on('refreshIntervalUpdate', () => {
+      timefilterSubscriber = timefilter.subscribeToRefreshIntervalUpdate(function triggerUpdate() {
         setAutoRefresh();
       });
     }
@@ -80,6 +81,8 @@ export const useRefreshInterval = (
     // useEffect cleanup
     return () => {
       clearRefreshInterval();
+      timefilterSubscriber.unsubscribe();
+      timefilter.off('refreshIntervalUpdate');
     };
   }, []); // [] as comparator makes sure this only runs once
 };
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js
@@ -5,7 +5,7 @@
  */
 
 
-import { timefilter } from 'ui/timefilter';
+import { timefilter } from '../../../../../common/timefilter';
 
 import { ml } from 'plugins/ml/services/ml_api_service';
 import { loadFullJob, filterJobs, checkForAutoStartDatafeed } from '../utils';
@@ -68,6 +68,7 @@ export class JobsListView extends Component {
     this.showCreateWatchFlyout = () => {};
 
     this.blockRefresh = false;
+    this.timefilterSubscriber = null;
   }
 
   componentDidMount() {
@@ -95,6 +96,9 @@ export class JobsListView extends Component {
 
   componentWillUnmount() {
     timefilter.off('refreshIntervalUpdate');
+    if (this.timefilterSubscriber !== null) {
+      this.timefilterSubscriber.unsubscribe();
+    }
     deletingJobsRefreshTimeout = null;
     this.clearRefreshInterval();
   }
@@ -115,8 +119,9 @@ export class JobsListView extends Component {
 
   initAutoRefreshUpdate() {
     // update the interval if it changes
-    timefilter.on('refreshIntervalUpdate', () => {
-      this.setAutoRefresh();
+    const self = this;
+    this.timefilterSubscriber = timefilter.subscribeToRefreshIntervalUpdate(function triggerUpdate() {
+      self.setAutoRefresh();
     });
   }
 

diff --git a/x-pack/plugins/ml/public/util/refresh_interval_watcher.js b/x-pack/plugins/ml/public/util/refresh_interval_watcher.js
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { timefilter } from 'ui/timefilter';
+import { timefilter } from '../../common/timefilter';
 
 /*
  * Watches for changes to the refresh interval of the page time filter,
@@ -15,6 +15,7 @@ export function refreshIntervalWatcher($timeout) {
 
   let refresher;
   let listener;
+  let timefilterSubscriber;
 
   const onRefreshIntervalChange = () => {
     if (refresher) {
@@ -34,11 +35,14 @@ export function refreshIntervalWatcher($timeout) {
 
   function init(listenerCallback) {
     listener = listenerCallback;
-    timefilter.on('refreshIntervalUpdate', onRefreshIntervalChange);
+    timefilterSubscriber = timefilter.subscribeToRefreshIntervalUpdate(function triggerUpdate() {
+      onRefreshIntervalChange();
+    });
   }
 
   function cancel() {
     $timeout.cancel(refresher);
+    timefilterSubscriber.unsubscribe();
     timefilter.off('refreshIntervalUpdate', onRefreshIntervalChange);
   }