Merge branch '1589-deploy-boards-2nd-iteration' into 'master'

Deploy board - second iteration

See merge request !1327

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

-/* eslint-disable no-new */
+/* eslint-disable no-new, no-undef */
 /* global Flash */
 /**
  * Renders a deploy board.
@@ -67,47 +67,68 @@ export default {
   },
 
   created() {
-    this.isLoading = true;
+    this.getDeployBoard();
+  },
+
+  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();
+      }, 3000);
+    }
+  },
+
+  methods: {
+    getDeployBoard() {
+      this.isLoading = true;
 
-    const maxNumberOfRequests = 3;
+      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;
+      // 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;
 
-            if (this.backOffRequestCounter < maxNumberOfRequests) {
-              next();
+              if (this.backOffRequestCounter < maxNumberOfRequests) {
+                next();
+              } else {
+                stop(resp);
+              }
             } else {
               stop(resp);
             }
-          } else {
-            stop(resp);
-          }
-        })
-        .catch(stop);
-    })
-    .then((resp) => {
-      if (resp.status === statusCodes.NO_CONTENT) {
-        this.hasError = true;
-        return resp;
-      }
-
-      return resp.json();
-    })
-    .then((response) => {
-      this.store.storeDeployBoard(this.environmentID, response);
-      return response;
-    })
-    .then(() => {
-      this.isLoading = false;
-    })
-    .catch(() => {
-      this.isLoading = false;
-      new Flash('An error occurred while fetching the deploy board.', 'alert');
-    });
+          })
+          .catch(stop);
+      })
+      .then((resp) => {
+        if (resp.status === statusCodes.NO_CONTENT) {
+          this.hasError = true;
+          return resp;
+        }
+
+        return resp.json();
+      })
+      .then((response) => {
+        this.store.storeDeployBoard(this.environmentID, response);
+        return response;
+      })
+      .then(() => {
+        this.isLoading = false;
+      })
+      .catch(() => {
+        this.isLoading = false;
+        new Flash('An error occurred while fetching the deploy board.', 'alert');
+      });
+    },
   },
 
   computed: {

app/controllers/projects/environments_controller.rb

@@ -132,6 +132,8 @@ class Projects::EnvironmentsController < Projects::ApplicationController
 
     rollout_status = @environment.rollout_status
 
+    Gitlab::PollingInterval.set_header(response, interval: 3000) unless rollout_status.try(:complete?)
+
     if rollout_status.nil?
       render body: nil, status: 204 # no result yet
     else

spec/controllers/projects/environments_controller_spec.rb

@@ -266,6 +266,7 @@ describe Projects::EnvironmentsController do
         get :status, environment_params
 
         expect(response.status).to eq(204)
+        expect(response.headers['Poll-Interval']).to eq(3000)
       end
 
       it 'returns the rollout status when present' do