Adds documentation

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

 /**
- * Renders the deploy boads.
+ * Renders a deploy board.
  *
- * A deploy board is composed by several components:
+ * A deploy board is composed by:
  * - Information area with percentage of completition.
  * - Instances with status.
  * - Button Actions.
- * Mockup: https://gitlab.com/gitlab-org/gitlab-ce/uploads/2f655655c0eadf655d0ae7467b53002a/environments__deploy-graphic.png
+ * [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
+ * for each deploy board.
+ * After the third request we need to show a message saying we can't fetch the data.
+ * Please refer to this [comment](https://gitlab.com/gitlab-org/gitlab-ee/issues/1589#note_23630610)
+ * for more information
  */
 
 const Vue = require('vue');
@@ -20,6 +27,21 @@ module.exports = Vue.component('deploy_boards_components', {
     instanceComponent,
   },
 
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+      hasContent: false,
+      hasError: false,
+    };
+  },
+
   created() {
     // Fetch data
     console.log('HERE!');
@@ -27,18 +49,30 @@ module.exports = Vue.component('deploy_boards_components', {
 
   template: `
     <div class="js-deploy-board deploy-board">
-      <section class="deploy-board-information"></section>
 
-      <section class="deploy-board-instances">
-        <p>Instances</p>
+      <div v-if="isLoading">
+        <i class="fa fa-spinner fa-spin"></i>
+      </div>
+
+      <div v-if="!isLoading && hasContent">
+        <section class="deploy-board-information">
+
+        </section>
+
+        <section class="deploy-board-instances">
+          <p>Instances</p>
+
+          <div class="deploy-board-instances-container">
 
-        <div class="deploy-board-instances-container">
-          
+          </div>
+        </section>
 
-        </div>
-      </section>
+        <section class="deploy-board-actions"></section>
+      </div>
 
-      <section class="deploy-board-actions"></section>
+      <div v-if="!isLoading && hasError">
+        We can't fetch the data right now. Please try again later.
+      </div>
     </div>
   `,
 });

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

 /**
- * An instance in deploy boards is represented by a square in this mockup:
+ * An instance in deploy board is represented by a square in this mockup:
  * https://gitlab.com/gitlab-org/gitlab-ce/uploads/2f655655c0eadf655d0ae7467b53002a/environments__deploy-graphic.png
  *
- * Each instance has a state an a tooltip.
+ * Each instance has a state and a tooltip.
  * The state needs to be represented in different colors,
  * see more information about this in https://gitlab.com/gitlab-org/gitlab-ee/uploads/5fff049fd88336d9ee0c6ef77b1ba7e3/monitoring__deployboard--key.png
  *
@@ -32,15 +32,9 @@ module.exports = Vue.component('deploy_board_instance_component', {
       default: '',
     },
 
-    computed: {
-      cssClass() {
-        return `js-deploy-board-instance deploy-board-instance deploy-board-instance-${this.state} has-tooltip`;
-      },
-    },
-
     template: `
       <div
-        class="cssClass"
+        class="js-deploy-board-instance deploy-board-instance deploy-board-instance-${this.state} has-tooltip"
         data-title="tooltipText"
         data-toggle="tooltip"
         data-placement="top">

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

@@ -99,8 +99,14 @@ module.exports = Vue.component('environment-component', {
   },
 
   methods: {
+
+    /**
+     * Toggles the visibility of the deploy boards to the clicked environment.
+     *
+     * @param  {Object} model
+     * @return {Object}
+     */
     toggleDeployBoard(model) {
-      debugger;
       return this.store.toggleDeployBoard(model);
     },
 
@@ -184,7 +190,8 @@ module.exports = Vue.component('environment-component', {
             :toggleDeployBoard="toggleDeployBoard">
           </environment-table>
 
-          <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
+          <table-pagination
+            v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
             :change="changePage"
             :pageInfo="state.paginationInformation">
           </table-pagination>

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

+/**
+ * Envrionment Item Component
+ *
+ * Renders a table row for each environment.
+ */
+
 const Vue = require('vue');
 const Timeago = require('timeago.js');
 
@@ -9,12 +15,6 @@ const StopComponent = require('./environment_stop');
 const RollbackComponent = require('./environment_rollback');
 const TerminalButtonComponent = require('./environment_terminal_button');
 
-/**
- * Envrionment Item Component
- *
- * Renders a table row for each environment.
- */
-
 const timeagoInstance = new Timeago();
 
 module.exports = Vue.component('environment-item', {
@@ -62,12 +62,6 @@ module.exports = Vue.component('environment-item', {
       required: false,
     },
 
-    /**
-     * Top level environments with `rollout_status`
-     * can render a deploy board. In order to render it we need to update
-     * the parent compoenent data.
-     *
-     */
     toggleDeployBoard: {
       type: Function,
       required: false,
@@ -432,7 +426,7 @@ module.exports = Vue.component('environment-item', {
     },
 
     /**
-     * If the environment has a deploy board we need to render an arrow icon
+     * If the environment can have a deploy board we need to render an arrow icon
      * next to it's name.
      *
      * @return {Boolean}
@@ -461,12 +455,19 @@ module.exports = Vue.component('environment-item', {
   template: `
     <tr>
       <td>
-
         <span class="deploy-board-icon"
           v-if="!model.isFolder"
           v-on:click="toggleDeployBoard(model)">
-          <i class="fa fa-caret-right" aria-hidden="true" v-if="!model.isDeployBoardVisible"></i>
-          <i class="fa fa-caret-down" aria-hidden="true" v-if="model.isDeployBoardVisible"></i>
+
+          <i v-show="!model.isDeployBoardVisible"
+            class="fa fa-caret-right"
+            aria-hidden="true">
+          </i>
+
+          <i v-show="model.isDeployBoardVisible"
+            class="fa fa-caret-down"
+            aria-hidden="true">
+          </i>
         </span>
 
         <a v-if="!model.isFolder"

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

 /**
  * Render environments table.
+ *
+ * Dumb component used to render top level environments and
+ * the folder view.
  */
 const Vue = require('vue');
 const EnvironmentItem = require('./environment_item');
 const DeployBoard = require('./deploy_board_component');
+
 module.exports = Vue.component('environment-table-component', {
 
   components: {

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

@@ -30,6 +30,11 @@ class EnvironmentsStore {
    * If the `size` is bigger than 1, it means it should be rendered as a folder.
    * 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.
+   *
    * @param  {Array} environments
    * @returns {Array}
    */
@@ -81,6 +86,20 @@ class EnvironmentsStore {
     return this.state.environments;
   }
 
+  /**
+   * Stores the pagination information needed to render the pagination for the
+   * table.
+   *
+   * Normalizes the headers to uppercase since they can be provided either
+   * in uppercase or lowercase.
+   *
+   * Parses to an integer the normalized ones needed for the pagination component.
+   *
+   * Stores the normalized and parsed information.
+   *
+   * @param  {Object} pagination = {}
+   * @return {Object}
+   */
   setPagination(pagination = {}) {
     const normalizedHeaders = gl.utils.normalizeHeaders(pagination);
     const paginationInformation = gl.utils.parseIntPagination(normalizedHeaders);