Makes request to correct endpoint and handles the response

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

@@ -8,7 +8,6 @@
  * [Mockup](https://gitlab.com/gitlab-org/gitlab-ce/uploads/2f655655c0eadf655d0ae7467b53002a/environments__deploy-graphic.png)
  *
  * The data of each deploy board needs to be fetched when we render the component.
- * Endpoint is /group/project/environments/{id}/status.json
  *
  * The endpoint response can sometimes be 204, in those cases we need to retry the request.
  * This should be done using backoff pooling and we should make no more than 3 request
@@ -28,8 +27,23 @@ module.exports = Vue.component('deploy_boards_components', {
   },
 
   props: {
-    endpoint: {
-      type: String,
+    store: {
+      type: Object,
+      required: true,
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+
+    data: {
+      type: Object,
+      required: true,
+    },
+
+    environmentID: {
+      type: Number,
       required: true,
     },
   },
@@ -42,9 +56,20 @@ module.exports = Vue.component('deploy_boards_components', {
     };
   },
 
-  created() {
-    // Fetch data
-    console.log('HERE!');
+  beforeMount() {
+    this.isLoading = true;
+
+    this.service.getDeployBoard(this.environmentID)
+    .then(resp => resp.json())
+    .then((response) => {
+      this.store.storeDeployBoard(this.environmentID, response);
+    })
+    .then(() => {
+      this.isLoading = false;
+    })
+    .catch(() => {
+      this.isLoading = false;
+    });
   },
 
   template: `

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

@@ -23,6 +23,7 @@ module.exports = Vue.component('environment-component', {
 
     return {
       store,
+      service: {},
       state: store.state,
       visibility: 'available',
       isLoading: false,
@@ -74,11 +75,11 @@ module.exports = Vue.component('environment-component', {
 
     const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`;
 
-    const service = new EnvironmentsService(endpoint);
+    this.service = new EnvironmentsService(endpoint);
 
     this.isLoading = true;
 
-    return service.all()
+    return this.service.all()
       .then(resp => ({
         headers: resp.headers,
         body: resp.json(),
@@ -187,7 +188,9 @@ module.exports = Vue.component('environment-component', {
             :play-icon-svg="playIconSvg"
             :terminal-icon-svg="terminalIconSvg"
             :commit-icon-svg="commitIconSvg"
-            :toggleDeployBoard="toggleDeployBoard">
+            :toggleDeployBoard="toggleDeployBoard"
+            :store="store"
+            :service="service">
           </environment-table>
 
           <table-pagination

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

@@ -11,8 +11,8 @@ const DeployBoard = require('./deploy_board_component');
 module.exports = Vue.component('environment-table-component', {
 
   components: {
-    'environment-item': EnvironmentItem,
-    'deploy-board': DeployBoard,
+    EnvironmentItem,
+    DeployBoard,
   },
 
   props: {
@@ -51,7 +51,17 @@ module.exports = Vue.component('environment-table-component', {
 
     toggleDeployBoard: {
       type: Function,
-      required: false,
+      required: true,
+    },
+
+    store: {
+      type: Object,
+      required: true,
+    },
+
+    service: {
+      type: Object,
+      required: true,
     },
   },
 
@@ -70,6 +80,7 @@ module.exports = Vue.component('environment-table-component', {
       <tbody>
         <template v-for="model in environments"
           v-bind:model="model">
+
           <tr is="environment-item"
             :model="model"
             :can-create-deployment="canCreateDeployment"
@@ -80,10 +91,18 @@ module.exports = Vue.component('environment-table-component', {
             :toggleDeployBoard="toggleDeployBoard.bind(model)"></tr>
 
           <tr v-if="model.isDeployBoardVisible">
+
             <td colspan="6" class="deploy-board-container">
-              <deploy-board></deploy-board>
+              <deploy-board
+                :store="store"
+                :service="service"
+                :environmentID="model.id"
+                :data="model.deployBoardData">
+              </deploy-board>
             </td>
+
           </tr>
+
         </template>
       </tbody>
     </table>

app/assets/javascripts/environments/services/environments_service.js.es6

@@ -3,11 +3,17 @@ const Vue = require('vue');
 class EnvironmentsService {
   constructor(endpoint) {
     this.environments = Vue.resource(endpoint);
+
+    this.deployBoard = Vue.resource('environments/{id}/status.json');
   }
 
   all() {
     return this.environments.get();
   }
+
+  getDeployBoard(environmentID) {
+    return this.deployBoard.get({ id: environmentID });
+  }
 }
 
 module.exports = EnvironmentsService;

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

@@ -31,9 +31,12 @@ class EnvironmentsStore {
    * In those cases we add `isFolder` key in order to render it properly.
    *
    * Top level environments - when the size is 1 - with `rollout_status`
-   * can render a deploy board. We add `isDeployBoardVisible` key to those envrionments.
-   * This key let's us know if we should or not render the deploy board. It will
-   * be toggled when the user clicks to seee the deploy board.
+   * can render a deploy board. We add `isDeployBoardVisible` and `deployBoardData`
+   * keys to those envrionments.
+   * The first key will let's us know if we should or not render the deploy board.
+   * It will be toggled when the user clicks to seee the deploy board.
+   *
+   * The second key will allow us to update the environment with the received deploy board data.
    *
    * @param  {Array} environments
    * @returns {Array}
@@ -44,10 +47,16 @@ class EnvironmentsStore {
 
       if (env.size > 1) {
         filtered = Object.assign({}, env, { isFolder: true, folderName: env.name });
-      } else {
-        // FIX ME
-        // no folders items with `x` key can have a deploy board
-        filtered = Object.assign({}, env, { isDeployBoardVisible: false });
+      }
+
+      // FIX ME
+      // no folders items with `x` key can have a deploy board
+      if (env.size === 1) {
+        filtered = Object.assign({}, env, {
+          isDeployBoardVisible: false,
+          deployBoardData: {},
+          deployBoardEndpoint: `environments/${env.id}/status.json`,
+        });
       }
 
       if (env.latest) {
@@ -65,27 +74,6 @@ class EnvironmentsStore {
     return filteredEnvironments;
   }
 
-  /**
-   * Toggles deploy board visibility for the provided environment.
-   *
-   * @param  {Object} environment
-   * @return {Array}
-   */
-  toggleDeployBoard(environment) {
-    const environments = Object.assign([], this.state.environments);
-
-    this.state.environments = environments.map((env) => {
-      let updated = Object.assign({}, env);
-
-      if (env.id === environment.id) {
-        updated = Object.assign({}, updated, { isDeployBoardVisible: !env.isDeployBoardVisible });
-      }
-      return updated;
-    });
-
-    return this.state.environments;
-  }
-
   /**
    * Stores the pagination information needed to render the pagination for the
    * table.
@@ -129,6 +117,31 @@ class EnvironmentsStore {
     this.state.stoppedCounter = count;
     return count;
   }
+
+  /**
+   * Toggles deploy board visibility for the provided environment.
+   *
+   * @param  {Object} environment
+   * @return {Array}
+   */
+  toggleDeployBoard(environment) {
+    const environments = Object.assign([], this.state.environments);
+
+    this.state.environments = environments.map((env) => {
+      let updated = Object.assign({}, env);
+
+      if (env.id === environment.id) {
+        updated = Object.assign({}, updated, { isDeployBoardVisible: !env.isDeployBoardVisible });
+      }
+      return updated;
+    });
+
+    return this.state.environments;
+  }
+
+  storeDeployBoard(environmentID, deployBoard) {
+    console.log(environmentID, deployBoard);
+  }
 }
 
 module.exports = EnvironmentsStore;