Uses vue computed data

Fixes some eslint errors
Adds some documentation
Improves data manipulation

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

+/* globals Vue */
+/* eslint-disable no-param-reassign, no-return-assign */
 (() => {
-
   /**
    * Envrionment Item Component
    *
@@ -19,12 +20,12 @@
     template: '#environment-item-template',
 
     props: {
-      model: Object
+      model: Object,
     },
 
-    data () {
+    data() {
       return {
-        open: false
+        open: false,
       };
     },
 
@@ -37,8 +38,8 @@
        *
        * @returns {Boolean}
        */
-      isFolder () {
-        return this.model.children && this.model.children.length ? true : false;
+      isFolder() {
+        return this.$options.hasKey(this.model, 'children') && this.model.children.length > 0;
       },
 
       /**
@@ -47,7 +48,7 @@
        *
        * @returns {Boolean|undefined}
        */
-      isChildren () {
+      isChildren() {
         return this.model['vue-isChildren'];
       },
 
@@ -57,9 +58,79 @@
        *
        * @returns {Boolean}  The number of environments for the current folder
        */
-      childrenCounter () {
-        return this.model.children && this.model.children.length;
-      }
+      childrenCounter() {
+        return this.$options.hasKey(this.model, 'children') && this.model.children.length;
+      },
+
+      /**
+       * Returns the value of the `last?` key sent in the API.
+       * Used to know wich title to render when the environment can be re-deployed
+       *
+       * @returns {Boolean}
+       */
+      isLast() {
+        return this.$options.hasKey(this.model, 'last_deployment') && this.model.last_deployment['last?'];
+      },
+
+      /**
+       * Verifies if `last_deployment` key exists in the current Envrionment.
+       * This key is required to render most of the html - this method works has
+       * an helper.
+       *
+       * @returns {Boolean}
+       */
+      hasLastDeploymentKey() {
+        return this.$options.hasKey(this.model, 'last_deployment');
+      },
+
+      /**
+       * Verifies is the given environment has manual actions.
+       * Used to verify if we should render them or nor.
+       *
+       * @returns {Boolean}  description
+       */
+      hasManualActions() {
+        return this.$options.hasKey(this.model, 'manual_actions') && this.model.manual_actions.length;
+      },
+
+      /**
+       * Returns the value of the `stoppable?` key provided in the response.
+       *
+       * @returns {Boolean}
+       */
+      isStoppable() {
+        return this.model['stoppable?'];
+      },
+
+      /**
+       * Verifies if the `deployable` key is present in `last_deployment` key.
+       * Used to verify whether we should or not render the rollback partial.
+       *
+       * @returns {Boolean}
+       */
+      canRetry() {
+        return this.hasLastDeploymentKey && this.model.last_deployment && this.$options.hasKey(this.model.last_deployment, 'deployable');
+      },
+
+      createdDate() {
+        return $.timeago(this.model.created_at);
+      },
+
+      manualActions() {
+        this.model.manual_actions.map(action => action.name = gl.text.humanize(action.name));
+      },
+    },
+
+    /**
+     * Helper to verify if key is present in an object.
+     * Can be removed once we start using lodash.
+     *
+     * @param  {Object} obj
+     * @param  {String} key
+     * @returns {Boolean}
+     */
+    hasKey(obj, key) {
+      return {}.hasOwnProperty.call(obj, key);
     },
 
     methods: {
@@ -67,11 +138,11 @@
       /**
        * Toggles the visibility of a folders' children.
        */
-      toggle () {
+      toggle() {
         if (this.isFolder) {
           this.open = !this.open;
         }
-      }
-    }
-  })
+      },
+    },
+  });
 })();

app/assets/javascripts/environments/environments_bundle.js.es6

@@ -5,8 +5,9 @@
 //= require ./components/environment_item
 //= require ../boards/vue_resource_interceptor
 
-$(() => {
 
+/* eslint-disable */
+$(() => {
   const environmentsListApp = document.getElementById('environments-list-view');
   const Store = gl.environmentsList.EnvironmentsStore;
 
@@ -16,10 +17,11 @@ $(() => {
     gl.EnvironmentsListApp.$destroy(true);
   }
 
-  const filterState = (state) => (environment) => environment.state === state && environment;
+  const filterState = state => environment => environment.state === state && environment;
 
   // recursiveMap :: (Function, Array) -> Array
   const recursiveMap = (fn, arr) => {
+
     return arr.map((item) => {
       if (!item.children) { return fn(item); }
 
@@ -37,20 +39,20 @@ $(() => {
     el: '#environments-list-view',
 
     components: {
-      'item': gl.environmentsList.EnvironmentItem
+      item: gl.environmentsList.EnvironmentItem
     },
 
     data: {
       state: Store.state,
       endpoint: environmentsListApp.dataset.endpoint,
       loading: true,
-      visibility: 'available'
+      visibility: 'available',
     },
 
     computed: {
-      filteredEnvironments () {
+      filteredEnvironments (){
         return recursiveMap(filterState(this.visibility), this.state.environments);
-      }
+      },
     },
 
     init: Store.create.bind(Store),

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

@@ -5,7 +5,7 @@
   gl.environmentsList.EnvironmentsStore = {
     state: {},
 
-    create () {
+    create() {
       this.state.environments = [];
       this.state.stoppedCounter = 0;
       this.state.availableCounter = 0;
@@ -44,39 +44,23 @@
      * @returns {Array} Tree structured array with the received environments.
      */
     storeEnvironments(environments = []) {
-
       this.state.stoppedCounter = this.countByState(environments, 'stopped');
       this.state.availableCounter = this.countByState(environments, 'available');
 
       const environmentsTree = environments.reduce((acc, environment) => {
-
-        if (environment.last_deployment) {
-
-          //humanizes actions names if there are any actions
-          if (environment.last_deployment.manual_actions) {
-            environment.last_deployment.manual_actions = environment.last_deployment.manual_actions.map((action) => action.name = gl.text.humanize(action.name));
-          }
-
-          //transforms created date for deployment in a human readable format
-          if (environment.last_deployment.created_at) {
-            // TODO - how to do this without jquery
-          }
-        }
-
         if (environment.environment_type !== null) {
-          const occurs = acc.filter((element, index, array) => {
-            return element.children && element.name === environment.environment_type;
-          });
+          const occurs = acc.filter(element => element.children &&
+             element.name === environment.environment_type);
 
-          environment["vue-isChildren"] = true;
+          environment['vue-isChildren'] = true;
 
           if (occurs.length) {
             acc[acc.indexOf(occurs[0])].children.push(environment);
-            acc[acc.indexOf(occurs[0])].children.sort(this.sortByName)
+            acc[acc.indexOf(occurs[0])].children.sort(this.sortByName);
           } else {
             acc.push({
               name: environment.environment_type,
-              children: [environment]
+              children: [environment],
             });
           }
         } else {
@@ -100,7 +84,7 @@
      * @returns {Number}
      */
     countByState(environments, state) {
-      return environments.filter((env) => env.state === state).length;
+      return environments.filter(env => env.state === state).length;
     },
 
     /**
@@ -110,7 +94,7 @@
      * @param  {Object} b
      * @returns {Number}
      */
-    sortByName (a, b) {
+    sortByName(a, b) {
       const nameA = a.name.toUpperCase();
       const nameB = b.name.toUpperCase();
 
@@ -123,6 +107,6 @@
       }
 
       return 0;
-    }
-  }
+    },
+  };
 })();

app/views/projects/environments/components/_actions.html.haml

 - if can?(current_user, :create_deployment, @project)
-  .inline{ "v-if" => "model.last_deployment && model.last_deployment.manual_actions && model.last_deployment.manual_actions.present"}
+  .inline{ "v-if" => "hasManualActions"}
     .dropdown
       %a.dropdown-new.btn.btn-default{type: "button", "data-toggle" => "dropdown"}
         = custom_icon('icon_play')
         = icon('caret-down')
         
         %ul.dropdown-menu.dropdown-menu-align-right
-          %li{ "v-for" => "action in model.last_deployment.manual_actions" }
-            %a{ ":ref" => "'#{namespace_project_path(@project.namespace, @project)}/' + action.id + '/play'",
+          %li{ "v-for" => "action in manualActions" }
+            %a{ ":ref" => "action.play_url",
             "data-method" => "post",
             "rel" => "nofollow" }
 

app/views/projects/environments/components/_environment.html.haml

@@ -44,8 +44,8 @@
         No deployments yet
 
     %td
-      %span{ "v-if" => "!isFolder && model.last_deployment" }
-        {{model.last_deployment.created_at}}
+      %span.environment-created-date-timeago{ "v-if" => "!isFolder && model.last_deployment" }
+        {{createdDate}}
 
     %td.hidden-xs
       .pull-right{ "v-if" => "!isFolder" }

app/views/projects/environments/components/_rollback.html.haml

 - if can?(current_user, :create_deployment, @project) 
-  %a.btn.btn-build{ "v-if" => "model.last_deployment && model.last_deployment.deployable",
-    ":href" => "'#{namespace_project_builds_path(@project.namespace, @project)}/' + model.last_deployment.deployable.id + '/retry'",
+  %a.btn.btn-build{ "v-if" => "canRetry",
+    ":href" => "model.last_deployment.deployable.retry_url",
     "data-method" => "post",
     "rel" => "nofollow" }
 
-    %span{ "v-if" => "model.last_deployment.last" }
+    %span{ "v-if" => "isLastDeployment" }
       Re-deploy
-    %span{ "v-if" => "!model.last_deployment.last" }
+    %span{ "v-if" => "!isLastDeployment" }
       Rollback

app/views/projects/environments/components/_stop.html.haml

 - if can?(current_user, :create_deployment, @project)
-  .inline{ "v-if" => "model.stop_action" }
-    %a.btn.stop-env-link{":href" => "'#{namespace_project_environments_path(@project.namespace, @project)}/' + model.id", 
+  .inline{ "v-if" => "isStoppable" }
+    %a.btn.stop-env-link{":href" => "model.environment_url", 
       "method" => ":post", 
       "rel" => "nofollow", 
       "confirm" => "Are you sure you want to stop this environment?"}