Destroys pipeline table component when we change tabs in order to stop polling

2 files changed, 16 insertions, 10 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
index a92e068ca5a..cb20c2b54cf 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
@@ -8,10 +8,8 @@ Vue.use(VueResource);
 
 /**
  * Commits View > Pipelines Tab > Pipelines Table.
- * Merge Request View > Pipelines Tab > Pipelines Table.
  *
  * Renders Pipelines table in pipelines tab in the commits show view.
- * Renders Pipelines table in pipelines tab in the merge request show view.
  */
 
 $(() => {
@@ -20,13 +18,14 @@ $(() => {
   gl.commits.pipelines = gl.commits.pipelines || {};
 
   if (gl.commits.PipelinesTableBundle) {
+    document.querySelector('#commit-pipeline-table-view').removeChild(this.pipelinesTableBundle.$el);
     gl.commits.PipelinesTableBundle.$destroy(true);
   }
 
   const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
-  gl.commits.pipelines.PipelinesTableBundle = new CommitPipelinesTable();
 
   if (pipelineTableViewEl && pipelineTableViewEl.dataset.disableInitialization === undefined) {
-    gl.commits.pipelines.PipelinesTableBundle.$mount(pipelineTableViewEl);
+    gl.commits.pipelines.PipelinesTableBundle = new CommitPipelinesTable().$mount();
+    document.querySelector('#commit-pipeline-table-view').appendChild(this.pipelinesTableBundle.$el);
   }
 });
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index 2d6df95ffbb..da9707549f9 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -22,6 +22,7 @@ import Poll from '../../lib/utils/poll';
  */
 
 export default Vue.component('pipelines-table', {
+
   components: {
     'pipelines-table-component': PipelinesTableComponent,
     'error-state': ErrorState,
@@ -67,11 +68,13 @@ export default Vue.component('pipelines-table', {
    *
    */
   beforeMount() {
-    this.endpoint = this.$el.dataset.endpoint;
-    this.helpPagePath = this.$el.dataset.helpPagePath;
+    const element = document.querySelector('#commit-pipeline-table-view');
+
+    this.endpoint = element.dataset.endpoint;
+    this.helpPagePath = element.dataset.helpPagePath;
     this.service = new PipelinesService(this.endpoint);
 
-    const poll = new Poll({
+    this.poll = new Poll({
       resource: this.service,
       method: 'getPipelines',
       successCallback: this.successCallback,
@@ -81,14 +84,14 @@ export default Vue.component('pipelines-table', {
 
     if (!Visibility.hidden()) {
       this.isLoading = true;
-      poll.makeRequest();
+      this.poll.makeRequest();
     }
 
     Visibility.change(() => {
       if (!Visibility.hidden()) {
-        poll.restart();
+        this.poll.restart();
       } else {
-        poll.stop();
+        this.poll.stop();
       }
     });
 
@@ -108,6 +111,10 @@ export default Vue.component('pipelines-table', {
     eventHub.$off('refreshPipelines');
   },
 
+  destroyed() {
+    this.poll.stop();
+  },
+
   methods: {
     fetchPipelines() {
       this.isLoading = true;