Stop polling and fetch the table

2 files changed, 13 insertions, 5 deletions

diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index 05143c43173..a70b777d726 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines.js
@@ -65,13 +65,13 @@ export default {
     updateTable() {
       // Cancel ongoing request
       if (this.isMakingRequest) {
-
+        this.service.cancelationSource.cancel();
       }
 
       // Stop polling
       this.poll.stop();
       // make new request
-      this.fetchPipelines();
+      this.getPipelines();
       // restart polling
       this.poll.restart();
     },
@@ -79,11 +79,14 @@ export default {
       if (!this.isMakingRequest) {
         this.isLoading = true;
 
-        this.service.getPipelines(this.requestData)
-          .then(response => this.successCallback(response))
-          .catch(() => this.errorCallback());
+        this.getPipelines();
       }
     },
+    getPipelines() {
+      this.service.getPipelines(this.requestData)
+        .then(response => this.successCallback(response))
+        .catch(() => this.errorCallback());
+    },
     setCommonData(pipelines) {
       this.store.storePipelines(pipelines);
       this.isLoading = false;
diff --git a/app/assets/javascripts/pipelines/services/pipelines_service.js b/app/assets/javascripts/pipelines/services/pipelines_service.js
index 001286f5d52..59c8b9c58e5 100644
--- a/app/assets/javascripts/pipelines/services/pipelines_service.js
+++ b/app/assets/javascripts/pipelines/services/pipelines_service.js
@@ -19,8 +19,13 @@ export default class PipelinesService {
 
   getPipelines(data = {}) {
     const { scope, page } = data;
+    const CancelToken = axios.CancelToken;
+
+    this.cancelationSource = CancelToken.source();
+
     return axios.get(this.endpoint, {
       params: { scope, page },
+      cancelToken: this.cancelationSource.token,
     });
   }