Renders deploy boards with reveived data.

Adds CSS

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

@@ -2,7 +2,7 @@
  * Renders a deploy board.
  *
  * A deploy board is composed by:
- * - Information area with percentage of completition.
+ * - Information area with percentage of completion.
  * - Instances with status.
  * - Button Actions.
  * [Mockup](https://gitlab.com/gitlab-org/gitlab-ce/uploads/2f655655c0eadf655d0ae7467b53002a/environments__deploy-graphic.png)
@@ -37,7 +37,7 @@ module.exports = Vue.component('deploy_boards_components', {
       required: true,
     },
 
-    data: {
+    deployBoardData: {
       type: Object,
       required: true,
     },
@@ -49,6 +49,7 @@ module.exports = Vue.component('deploy_boards_components', {
   },
 
   data() {
+
     return {
       isLoading: false,
       hasContent: false,
@@ -56,9 +57,8 @@ module.exports = Vue.component('deploy_boards_components', {
     };
   },
 
-  beforeMount() {
+  created() {
     this.isLoading = true;
-
     this.service.getDeployBoard(this.environmentID)
     .then(resp => resp.json())
     .then((response) => {
@@ -79,20 +79,34 @@ module.exports = Vue.component('deploy_boards_components', {
         <i class="fa fa-spinner fa-spin"></i>
       </div>
 
-      <div v-if="!isLoading && hasContent">
+      <div v-if="!isLoading">
         <section class="deploy-board-information">
-
+          <span class="percentage">{{deployBoardData.completion}}%</span>
+          <span class="text">Complete</span>
         </section>
 
         <section class="deploy-board-instances">
-          <p>Instances</p>
+          <p class="text">Instances</p>
 
           <div class="deploy-board-instances-container">
-
+            <template v-for="instance in deployBoardData.instances">
+              <instance-component
+                :status="instance.status"
+                :tooltipText="instance.tooltipText">
+              </instance-component>
+            </template>
           </div>
         </section>
 
-        <section class="deploy-board-actions"></section>
+        <section class="deploy-board-actions">
+          <a class="btn" data-method="post" rel="nofollow">
+            Rollback
+          </a>
+
+          <a class="btn btn-red btn-inverted">
+            Abort
+          </a>
+        </section>
       </div>
 
       <div v-if="!isLoading && hasError">

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

@@ -15,12 +15,12 @@ module.exports = Vue.component('deploy_board_instance_component', {
   props: {
 
     /**
-     * Represents the state of the pod. Each state is represented with a different
+     * Represents the status of the pod. Each state is represented with a different
      * color.
      * It should be one of the following:
      * finished || deploying || failed || ready || preparing || waiting
      */
-    state: {
+    status: {
       type: String,
       required: true,
       default: 'finished',
@@ -31,14 +31,20 @@ module.exports = Vue.component('deploy_board_instance_component', {
       required: false,
       default: '',
     },
+  },
 
-    template: `
-      <div
-        class="js-deploy-board-instance deploy-board-instance deploy-board-instance-${this.state} has-tooltip"
-        data-title="tooltipText"
-        data-toggle="tooltip"
-        data-placement="top">
-      </div>
-    `,
+  computed: {
+    cssClass() {
+      return `js-deploy-board-instance deploy-board-instance deploy-board-instance-${this.status} has-tooltip`;
+    },
   },
+
+  template: `
+    <div
+      :class="cssClass"
+      :data-title="tooltipText"
+      data-toggle="tooltip"
+      data-placement="top">
+    </div>
+  `,
 });

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

@@ -253,11 +253,6 @@ module.exports = Vue.component('environment-item', {
       return undefined;
     },
 
-    terminalIconSvg: {
-      type: String,
-      required: false,
-    },
-
     /**
      * If provided, returns the commit tag.
      *

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

@@ -97,7 +97,7 @@ module.exports = Vue.component('environment-table-component', {
                 :store="store"
                 :service="service"
                 :environmentID="model.id"
-                :data="model.deployBoardData">
+                :deployBoardData="model.deployBoardData">
               </deploy-board>
             </td>
 

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

@@ -54,8 +54,7 @@ class EnvironmentsStore {
       if (env.size === 1) {
         filtered = Object.assign({}, env, {
           isDeployBoardVisible: false,
-          deployBoardData: {},
-          deployBoardEndpoint: `environments/${env.id}/status.json`,
+          deployBoardData: {}
         });
       }
 
@@ -139,8 +138,25 @@ class EnvironmentsStore {
     return this.state.environments;
   }
 
+  /**
+   * Store deploy board data for given environment.
+   *
+   * @param  {Number} environmentID
+   * @param  {Object} deployBoard
+   * @return {Array}
+   */
   storeDeployBoard(environmentID, deployBoard) {
-    console.log(environmentID, deployBoard);
+    const environments = Object.assign([], this.state.environments);
+
+    this.state.environments = environments.map((env) => {
+      let updated = Object.assign({}, env);
+
+      if (env.id === environmentID) {
+        updated = Object.assign({}, updated, { deployBoardData: deployBoard });
+      }
+      return updated;
+    });
+    return this.state.environments;
   }
 }
 

app/assets/javascripts/vue_shared/vue_resource_interceptor.js.es6

@@ -21,3 +21,84 @@ Vue.http.interceptors.push((request, next) => {
   }
   next();
 });
+
+// TODO - REMOVE THIS WHEN WE HAVE BACKEND API
+Vue.http.interceptors.push((request, next) => {
+  const deployBoardData = {
+    instances: [
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2334 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2335 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2336 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2337 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2338 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2339 Finished' },
+      { status: 'finished', tooltip: 'tanuki-2340 Finished' },
+      { status: 'deploying', tooltip: 'tanuki-2341 Deploying' },
+      { status: 'deploying', tooltip: 'tanuki-2342 Deploying' },
+      { status: 'deploying', tooltip: 'tanuki-2343 Deploying' },
+      { status: 'failed', tooltip: 'tanuki-2344 Failed' },
+      { status: 'ready', tooltip: 'tanuki-2345 Ready' },
+      { status: 'ready', tooltip: 'tanuki-2346 Ready' },
+      { status: 'ready', tooltip: 'tanuki-2347 Ready' },
+      { status: 'preparing', tooltip: 'tanuki-2348 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2349 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2350 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2351 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2352 Preparing' },
+      { status: 'preparing', tooltip: 'tanuki-2353 Preparing' },
+      { status: 'waiting', tooltip: 'tanuki-2354 Waiting' },
+      { status: 'waiting', tooltip: 'tanuki-2355 Waiting' },
+      { status: 'waiting', tooltip: 'tanuki-2356 Waiting' },
+      { status: 'waiting', tooltip: 'tanuki-2357 Waiting' },
+      { status: 'waiting', tooltip: 'tanuki-2358 Waiting' },
+      { status: 'waiting', tooltip: 'tanuki-2359 Waiting' },
+    ],
+    abort_url: '',
+    rollback_url: '',
+    completion: 87,
+    is_completed: true,
+  };
+
+  if (request.url === 'environments/{id}/status.json') {
+    next(request.respondWith(JSON.stringify(deployBoardData), {
+      status: 200,
+    }));
+  }
+
+  next();
+});

app/assets/stylesheets/pages/environments.scss

@@ -148,12 +148,57 @@
 /**
  * Deploy boards
  */
+
+.deploy-board > div {
+  display: flex;
+  justify-content: space-between;
+
+  .deploy-board-information {
+    order: 1;
+    display: flex;
+    width: 80px;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: auto 10px;
+
+    .percentage {
+      color: $gl-text-color;
+    }
+
+    .text {
+      color: $gl-text-color-secondary;
+    }
+  }
+
+  .deploy-board-instances {
+    order: 2;
+    max-width: 75%;
+
+    .text {
+      color: $gl-text-color-secondary;
+      font-size: 12px;
+    }
+
+    .deploy-board-instances-container {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+    }
+  }
+
+  .deploy-board-actions {
+    order: 3;
+    align-self: center;
+  }
+}
+
 .deploy-board-instance {
   width: 15px;
   height: 15px;
   border-radius: 3px;
   border-width: 1px;
   border-style: solid;
+  margin: 1px;
 
   &-finished {
     background-color: lighten($green-light, 25%);
@@ -198,6 +243,13 @@
   padding: 10px;
   background-color: #fbfbfb;
   min-height: 20px;
+
+  .fa-spinner {
+    margin: 0 auto;
+    width: 20px;
+    display: block;
+    font-size: 20px;
+  }
 }
 
 td.deploy-board-container {