Merge branch '40487-stop-polling' into 'master'

Resolve "Pipeline view stages showing incorrectly"

Closes #40487

See merge request gitlab-org/gitlab-ce!18254

app/assets/javascripts/pipelines/components/stage.vue

 <script>
-  import $ from 'jquery';
 
   /**
    * Renders each stage of the pipeline mini graph.
@@ -13,8 +12,11 @@
    * 3. Merge request widget
    * 4. Commit widget
    */
-  import axios from '../../lib/utils/axios_utils';
+
+  import $ from 'jquery';
   import Flash from '../../flash';
+  import axios from '../../lib/utils/axios_utils';
+  import eventHub from '../event_hub';
   import Icon from '../../vue_shared/components/icon.vue';
   import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
@@ -82,6 +84,7 @@
     methods: {
       onClickStage() {
         if (!this.isDropdownOpen()) {
+          eventHub.$emit('clickedDropdown');
           this.isLoading = true;
           this.fetchJobs();
         }

app/assets/javascripts/pipelines/constants.js

+// eslint-disable-next-line import/prefer-default-export
+export const CANCEL_REQUEST = 'CANCEL_REQUEST';

app/assets/javascripts/pipelines/mixins/pipelines.js

@@ -7,6 +7,7 @@ import SvgBlankState from '../components/blank_state.vue';
 import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
 import PipelinesTableComponent from '../components/pipelines_table.vue';
 import eventHub from '../event_hub';
+import { CANCEL_REQUEST } from '../constants';
 
 export default {
   components: {
@@ -52,34 +53,58 @@ export default {
     });
 
     eventHub.$on('postAction', this.postAction);
+    eventHub.$on('clickedDropdown', this.updateTable);
   },
   beforeDestroy() {
     eventHub.$off('postAction', this.postAction);
+    eventHub.$off('clickedDropdown', this.updateTable);
   },
   destroyed() {
     this.poll.stop();
   },
   methods: {
+    updateTable() {
+      // Cancel ongoing request
+      if (this.isMakingRequest) {
+        this.service.cancelationSource.cancel(CANCEL_REQUEST);
+      }
+      // Stop polling
+      this.poll.stop();
+      // Update the table
+      return this.getPipelines()
+        .then(() => this.poll.restart());
+    },
     fetchPipelines() {
       if (!this.isMakingRequest) {
         this.isLoading = true;
 
-        this.service.getPipelines(this.requestData)
-          .then(response => this.successCallback(response))
-          .catch(() => this.errorCallback());
+        this.getPipelines();
       }
     },
+    getPipelines() {
+      return this.service.getPipelines(this.requestData)
+        .then(response => this.successCallback(response))
+        .catch((error) => this.errorCallback(error));
+    },
     setCommonData(pipelines) {
       this.store.storePipelines(pipelines);
       this.isLoading = false;
       this.updateGraphDropdown = true;
       this.hasMadeRequest = true;
+
+      // In case the previous polling request returned an error, we need to reset it
+      if (this.hasError) {
+        this.hasError = false;
+      }
     },
-    errorCallback() {
-      this.hasError = true;
+    errorCallback(error) {
+      this.hasMadeRequest = true;
       this.isLoading = false;
+
+      if (error && error.message && error.message !== CANCEL_REQUEST) {
+        this.hasError = true;
         this.updateGraphDropdown = false;
-      this.hasMadeRequest = true;
+      }
     },
     setIsMakingRequest(isMakingRequest) {
       this.isMakingRequest = isMakingRequest;

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,
     });
   }
 

spec/javascripts/pipelines/pipelines_spec.js

@@ -4,6 +4,7 @@ import axios from '~/lib/utils/axios_utils';
 import pipelinesComp from '~/pipelines/components/pipelines.vue';
 import Store from '~/pipelines/stores/pipelines_store';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { pipelineWithStages, stageReply } from './mock_data';
 
 describe('Pipelines', () => {
   const jsonFixtureName = 'pipelines/pipelines.json';
@@ -668,4 +669,79 @@ describe('Pipelines', () => {
       });
     });
   });
+
+  describe('updates results when a staged is clicked', () => {
+    beforeEach(() => {
+      const copyPipeline = Object.assign({}, pipelineWithStages);
+      copyPipeline.id += 1;
+      mock
+        .onGet('twitter/flight/pipelines.json').reply(200, {
+          pipelines: [pipelineWithStages],
+          count: {
+            all: 1,
+            finished: 1,
+            pending: 0,
+            running: 0,
+          },
+        }, {
+          'POLL-INTERVAL': 100,
+        })
+        .onGet(pipelineWithStages.details.stages[0].dropdown_path)
+          .reply(200, stageReply);
+
+      vm = mountComponent(PipelinesComponent, {
+        store: new Store(),
+        hasGitlabCi: true,
+        canCreatePipeline: true,
+        ...paths,
+      });
+    });
+
+    describe('when a request is being made', () => {
+      it('stops polling, cancels the request, fetches pipelines & restarts polling', (done) => {
+        spyOn(vm.poll, 'stop');
+        spyOn(vm.poll, 'restart');
+        spyOn(vm, 'getPipelines').and.returnValue(Promise.resolve());
+        spyOn(vm.service.cancelationSource, 'cancel').and.callThrough();
+
+        setTimeout(() => {
+          vm.isMakingRequest = true;
+          return vm.$nextTick()
+            .then(() => {
+              vm.$el.querySelector('.js-builds-dropdown-button').click();
+            })
+            .then(() => {
+              expect(vm.service.cancelationSource.cancel).toHaveBeenCalled();
+              expect(vm.poll.stop).toHaveBeenCalled();
+
+              setTimeout(() => {
+                expect(vm.getPipelines).toHaveBeenCalled();
+                expect(vm.poll.restart).toHaveBeenCalled();
+                done();
+              }, 0);
+            });
+        }, 0);
+      });
+    });
+
+    describe('when no request is being made', () => {
+      it('stops polling, fetches pipelines & restarts polling', (done) => {
+        spyOn(vm.poll, 'stop');
+        spyOn(vm.poll, 'restart');
+        spyOn(vm, 'getPipelines').and.returnValue(Promise.resolve());
+
+        setTimeout(() => {
+          vm.$el.querySelector('.js-builds-dropdown-button').click();
+
+          expect(vm.poll.stop).toHaveBeenCalled();
+
+          setTimeout(() => {
+            expect(vm.getPipelines).toHaveBeenCalled();
+            expect(vm.poll.restart).toHaveBeenCalled();
+            done();
+          }, 0);
+        }, 0);
+      });
+    });
+  });
 });

spec/javascripts/pipelines/stage_spec.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import stage from '~/pipelines/components/stage.vue';
+import eventHub from '~/pipelines/event_hub';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('Pipelines stage component', () => {
@@ -43,13 +44,15 @@ describe('Pipelines stage component', () => {
       mock.onGet('path.json').reply(200, { html: 'foo' });
     });
 
-    it('should render the received data', done => {
+    it('should render the received data and emit `clickedDropdown` event', done => {
+      spyOn(eventHub, '$emit');
       component.$el.querySelector('button').click();
 
       setTimeout(() => {
         expect(
           component.$el.querySelector('.js-builds-dropdown-container ul').textContent.trim(),
         ).toEqual('foo');
+        expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown');
         done();
       }, 0);
     });