[ML] Using kibana's auto-refresh for jobs list (elastic#20496)

* [ML] Using kibana's auto-refresh for jobs list * better auto refresh management * fixing typo * increasing default interval * variable rename * kill interval on page change * updating comment * adding minimum refresh interval * correctly clearing the interval
jgowdyelastic · Jul 6, 2018 · aeab875 · aeab875
1 parent abbfb03
commit aeab875
Showing 1 changed file with 63 additions and 16 deletions.
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_list_view/jobs_list_view.js b/x-pack/plugins/ml/public/jobs/jobs_list_new/components/jobs_list_view/jobs_list_view.js
@@ -6,6 +6,7 @@
 
 
 import './styles/main.less';
+import { timefilter } from 'ui/timefilter';
 
 import { ml } from 'plugins/ml/services/ml_api_service';
 import { loadFullJob, filterJobs } from '../utils';
@@ -21,6 +22,9 @@ import React, {
   Component
 } from 'react';
 
+const DEFAULT_REFRESH_INTERVAL_MS = 30000;
+const MINIMUM_REFRESH_INTERVAL_MS = 5000;
+
 export class JobsListView extends Component {
   constructor(props) {
     super(props);
@@ -40,13 +44,62 @@ export class JobsListView extends Component {
     this.showDeleteJobModal = () => {};
     this.showStartDatafeedModal = () => {};
 
-    this.blockAutoRefresh = false;
+    this.blockRefresh = false;
+    this.refreshInterval = null;
+  }
+
+  componentDidMount() {
+    timefilter.enableAutoRefreshSelector();
 
-    this.refreshJobSummaryList();
+    this.initAutoRefresh();
+    this.initAutoRefreshUpdate();
   }
 
   componentWillUnmount() {
-    this.blockAutoRefresh = true;
+    this.clearRefreshInterval();
+  }
+
+  initAutoRefresh() {
+    const { value, pause } = timefilter.getRefreshInterval();
+    if (pause === false && value === 0) {
+      // if the auto refresher isn't set, set it to the default
+      timefilter.setRefreshInterval({
+        pause: false,
+        value: DEFAULT_REFRESH_INTERVAL_MS
+      });
+    }
+
+    this.setAutoRefresh();
+  }
+
+  initAutoRefreshUpdate() {
+    // update the interval if it changes
+    timefilter.on('refreshIntervalUpdate', () => {
+      this.setAutoRefresh();
+    });
+  }
+
+  setAutoRefresh() {
+    const { value, pause } = timefilter.getRefreshInterval();
+    if (pause) {
+      this.clearRefreshInterval();
+    } else {
+      this.setRefreshInterval(value);
+    }
+    this.refreshJobSummaryList(true);
+  }
+
+  setRefreshInterval(interval) {
+    this.clearRefreshInterval();
+    if (interval >= MINIMUM_REFRESH_INTERVAL_MS) {
+      this.blockRefresh = false;
+      this.refreshInterval = setInterval(() => (this.refreshJobSummaryList()), interval);
+    }
+  }
+
+  clearRefreshInterval() {
+    this.blockRefresh = true;
+    clearInterval(this.refreshInterval);
   }
 
   toggleRow = (jobId) => {
@@ -157,8 +210,8 @@ export class JobsListView extends Component {
     });
   }
 
-  refreshJobSummaryList(autoRefresh = true) {
-    if (this.blockAutoRefresh === false) {
+  refreshJobSummaryList(forceRefresh = false) {
+    if (forceRefresh === true || this.blockRefresh === false) {
       const expandedJobsIds = Object.keys(this.state.itemIdToExpandedRowMap);
       ml.jobs.jobsSummary(expandedJobsIds)
         .then((jobs) => {
@@ -179,12 +232,6 @@ export class JobsListView extends Component {
           Object.keys(this.updateFunctions).forEach((j) => {
             this.updateFunctions[j].setState({ job: fullJobsList[j] });
           });
-
-          if (autoRefresh === true) {
-            setTimeout(() => {
-              this.refreshJobSummaryList();
-            }, 10000);
-          }
         })
         .catch((error) => {
           console.error(error);
@@ -200,7 +247,7 @@ export class JobsListView extends Component {
             selectedJobs={this.state.selectedJobs}
             showStartDatafeedModal={this.showStartDatafeedModal}
             showDeleteJobModal={this.showDeleteJobModal}
-            refreshJobs={() => this.refreshJobSummaryList(false)}
+            refreshJobs={() => this.refreshJobSummaryList(true)}
           />
           <JobFilterBar setFilters={this.setFilters} />
         </div>
@@ -213,22 +260,22 @@ export class JobsListView extends Component {
           showEditJobFlyout={this.showEditJobFlyout}
           showDeleteJobModal={this.showDeleteJobModal}
           showStartDatafeedModal={this.showStartDatafeedModal}
-          refreshJobs={() => this.refreshJobSummaryList(false)}
+          refreshJobs={() => this.refreshJobSummaryList(true)}
         />
         <EditJobFlyout
           setShowFunction={this.setShowEditJobFlyoutFunction}
           unsetShowFunction={this.unsetShowEditJobFlyoutFunction}
-          refreshJobs={() => this.refreshJobSummaryList(false)}
+          refreshJobs={() => this.refreshJobSummaryList(true)}
         />
         <DeleteJobModal
           setShowFunction={this.setShowDeleteJobModalFunction}
           unsetShowFunction={this.unsetShowDeleteJobModalFunction}
-          refreshJobs={() => this.refreshJobSummaryList(false)}
+          refreshJobs={() => this.refreshJobSummaryList(true)}
         />
         <StartDatafeedModal
           setShowFunction={this.setShowStartDatafeedModalFunction}
           unsetShowFunction={this.unsetShowDeleteJobModalFunction}
-          refreshJobs={() => this.refreshJobSummaryList(false)}
+          refreshJobs={() => this.refreshJobSummaryList(true)}
         />
       </div>
     );