Uses new Polling technique on the Frontend - etag

app/assets/javascripts/environments/components/deploy_board_component.js

-/* eslint-disable no-new, no-undef */
 /* global Flash */
 /**
  * Renders a deploy board.
@@ -18,11 +17,11 @@
  * Please refer to this [comment](https://gitlab.com/gitlab-org/gitlab-ee/issues/1589#note_23630610)
  * for more information
  */
-import statusCodes from '~/lib/utils/http_status';
-import '~/flash';
-import '~/lib/utils/common_utils';
+import Visibility from 'visibilityjs';
 import deployBoardSvg from 'empty_states/icons/_deploy_board.svg';
 import instanceComponent from './deploy_board_instance_component';
+import Poll from '../../lib/utils/poll';
+import '../../flash';
 
 export default {
 
@@ -61,73 +60,45 @@ export default {
     return {
       isLoading: false,
       hasError: false,
-      backOffRequestCounter: 0,
       deployBoardSvg,
     };
   },
 
   created() {
-    this.getDeployBoard(true);
-  },
-
-  updated() {
-    // While board is not complete we need to request new data from the server.
-    // Let's make sure we are not making any request at the moment
-    // and that we only make this request if the latest response was not 204.
-    if (!this.isLoading &&
-      !this.hasError &&
-      this.deployBoardData.completion &&
-      this.deployBoardData.completion < 100) {
-      // let's wait 1s and make the request again
-      setTimeout(() => {
-        this.getDeployBoard(false);
-      }, 3000);
-    }
-  },
-
-  methods: {
-    getDeployBoard(showLoading) {
-      this.isLoading = showLoading;
-
-      const maxNumberOfRequests = 3;
-
-      // If the response is 204, we make 3 more requests.
-      gl.utils.backOff((next, stop) => {
-        this.service.getDeployBoard(this.endpoint)
-          .then((resp) => {
-            if (resp.status === statusCodes.NO_CONTENT) {
-              this.backOffRequestCounter = this.backOffRequestCounter += 1;
+    const poll = new Poll({
+      resource: this.service,
+      method: 'getDeployBoard',
+      data: this.endpoint,
+      successCallback: this.successCallback,
+      errorCallback: this.errorCallback,
+    });
 
-              if (this.backOffRequestCounter < maxNumberOfRequests) {
-                next();
-              } else {
-                stop(resp);
+    if (!Visibility.hidden()) {
+      this.isLoading = true;
+      poll.makeRequest();
     }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        poll.restart();
       } else {
-              stop(resp);
-            }
-          })
-          .catch(stop);
-      })
-      .then((resp) => {
-        if (resp.status === statusCodes.NO_CONTENT) {
-          this.hasError = true;
-          return resp;
+        poll.stop();
       }
+    });
+  },
+
+  methods: {
+    successCallback(response) {
+      const data = response.json();
 
-        return resp.json();
-      })
-      .then((response) => {
-        this.store.storeDeployBoard(this.environmentID, response);
-        return response;
-      })
-      .then(() => {
+      this.store.storeDeployBoard(this.environmentID, data);
       this.isLoading = false;
-      })
-      .catch(() => {
+    },
+
+    errorCallback() {
       this.isLoading = false;
-        new Flash('An error occurred while fetching the deploy board.', 'alert');
-      });
+      // eslint-disable-next-line no-new
+      new Flash('An error occurred while fetching the deploy board.');
     },
   },