Changes after review

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

@@ -62,14 +62,17 @@ module.exports = Vue.component('deploy_boards_components', {
   created() {
     this.isLoading = true;
 
+    const maxNumberOfRequests = 3;
+    const noContentStatus = 204;
+
     // If the response is 204, we make 3 more requests.
     gl.utils.backOff((next, stop) => {
       this.service.getDeployBoard(this.environmentID)
         .then((resp) => {
-          if (resp.status === 204) {
+          if (resp.status === noContentStatus) {
             this.backOffRequestCounter = this.backOffRequestCounter += 1;
 
-            if (this.backOffRequestCounter < 3) {
+            if (this.backOffRequestCounter < maxNumberOfRequests) {
               next();
             } else {
               stop(resp);
@@ -79,9 +82,9 @@ module.exports = Vue.component('deploy_boards_components', {
           }
         })
         .catch(stop);
-    }, Infinity)
+    })
     .then((resp) => {
-      if (resp.status === 204) {
+      if (resp.status === noContentStatus) {
         this.hasError = true;
         return resp;
       }
@@ -108,11 +111,10 @@ module.exports = Vue.component('deploy_boards_components', {
 
     instanceTitle() {
       let title;
+
       if (this.deployBoardData.instances.length === 1) {
         title = 'Instance';
-      }
-
-      if (this.deployBoardData.instances.length > 1) {
+      } else {
         title = 'Instances';
       }
 

app/assets/javascripts/environments/components/deploy_board_instance_component.js.es6

@@ -35,12 +35,13 @@ module.exports = Vue.component('deploy_board_instance_component', {
 
   computed: {
     cssClass() {
-      return `deploy-board-instance deploy-board-instance-${this.status} has-tooltip`;
+      return `deploy-board-instance-${this.status}`;
     },
   },
 
   template: `
     <div
+      class="deploy-board-instance has-tooltip"
       :class="cssClass"
       :data-title="tooltipText"
       data-toggle="tooltip"

app/assets/javascripts/environments/components/environment.js.es6

@@ -63,6 +63,16 @@ module.exports = Vue.component('environment-component', {
       return gl.utils.convertPermissionToBoolean(this.canCreateEnvironment);
     },
 
+    /**
+     * Pagination should only be rendered when we have information about it and when the
+     * number of total pages is bigger than 1.
+     *
+     * @return {Boolean}
+     */
+    shouldRenderPagination() {
+      return this.state.paginationInformation && this.state.paginationInformation.totalPages > 1;
+    },
+
   },
 
   /**
@@ -193,8 +203,7 @@ module.exports = Vue.component('environment-component', {
             :service="service">
           </environment-table>
 
-          <table-pagination
-            v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
+          <table-pagination v-if="shouldRenderPagination"
             :change="changePage"
             :pageInfo="state.paginationInformation">
           </table-pagination>

app/assets/javascripts/environments/components/environment_item.js.es6

@@ -441,7 +441,7 @@ module.exports = Vue.component('environment-item', {
       <td>
         <span class="deploy-board-icon"
           v-if="model.hasDeployBoard"
-          v-on:click="toggleDeployBoard(model)">
+          @click="toggleDeployBoard(model)">
 
           <i v-show="!model.isDeployBoardVisible"
             class="fa fa-caret-right"

app/assets/javascripts/environments/components/environments_table.js.es6

@@ -91,7 +91,7 @@ module.exports = Vue.component('environment-table-component', {
             :play-icon-svg="playIconSvg"
             :terminal-icon-svg="terminalIconSvg"
             :commit-icon-svg="commitIconSvg"
-            :toggleDeployBoard="toggleDeployBoard.bind(model)"></tr>
+            :toggleDeployBoard="toggleDeployBoard"></tr>
 
           <tr v-if="model.hasDeployBoard && model.isDeployBoardVisible" class="js-deploy-board-row">
             <td colspan="6" class="deploy-board-container">

app/assets/javascripts/environments/stores/environments_store.js.es6

@@ -54,10 +54,7 @@ class EnvironmentsStore {
 
       if (env.size > 1) {
         filtered = Object.assign(filtered, env, { isFolder: true, folderName: env.name });
-      }
-
-      // no folders items with `rollout_status` key can have a deploy board
-      if (env.size === 1 && env.rollout_status) {
+      } else if (env.size === 1 && env.rollout_status) {
         filtered = Object.assign(filtered, env, {
           hasDeployBoard: true,
           isDeployBoardVisible: false,