Fix tab filtering and counting

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

@@ -16,14 +16,21 @@ $(() => {
     gl.EnvironmentsListApp.$destroy(true);
   }
   
-  const filterEnvironments = (environments = [], filter = "") => {
-    return environments.filter((env) => {
-      if (env.children) {
-        return env.children.filter((child) =>  child.state === filter).length;
-      } else {
-        return env.state === filter;
-      };
-    });
+  
+  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); }
+      
+      const filteredChildren = recursiveMap(fn, item.children).filter(Boolean);
+      if (filteredChildren.length) {
+        item.children = filteredChildren;
+        return item;
+      }
+      
+    }).filter(Boolean);
   };
 
   gl.EnvironmentsListApp = new Vue({
@@ -43,15 +50,15 @@ $(() => {
     
     computed: {
       filteredEnvironments () {
-        return filterEnvironments(this.state.environments, this.visibility);
+        return recursiveMap(filterState(this.visibility), this.state.environments);
       },
 
       countStopped () {
-        return filterEnvironments(this.state.environments, 'stopped').length;
+      
       },
 
       countAvailable () {
-        return filterEnvironments(this.state.environments, 'available').length;
+      //  return recursiveMap(filterState('available'), this.state.environments).length;
       }
     },
     

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

@@ -7,6 +7,8 @@
 
     create () {
       this.state.environments = [];
+      this.state.stoppedCounter = 0;
+      this.state.availableCounter = 0;
     },
 
     /**
@@ -42,6 +44,10 @@
      * @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) {
@@ -59,15 +65,14 @@
         
         if (environment.environment_type !== null) {
           const occurs = acc.find((element, index, array) => {
-            return element.environment_type === environment.environment_type;
+            return element.children && element.name === environment.environment_type;
           });
-          
-          
+
           environment["vue-isChildren"] = true;
 
           if (occurs !== undefined) {
             acc[acc.indexOf(occurs)].children.push(environment);
-            acc[acc.indexOf(occurs)].children.push(environment).sort(this.sortByName)
+            acc[acc.indexOf(occurs)].children.sort(this.sortByName)
           } else {
             acc.push({
               name: environment.environment_type,
@@ -88,6 +93,18 @@
       return environmentsTree;
     },
 
+    /**
+     * Given an array of environments, returns the number of environments 
+     * that have the given state.
+     *
+     * @param  {Array} environments 
+     * @param  {String} state
+     * @returns {Number}
+     */
+    countByState(environments, state) {
+      return environments.filter((env) => env.state === state).length;
+    },
+
     /**
      * Sorts the two objects provided by their name.
      *

app/views/projects/environments/index.html.haml

@@ -12,13 +12,13 @@
         = link_to project_environments_path(@project) do
           Available
           %span.badge.js-available-environments-count
-            {{countAvailable}}
+            {{state.availableCounter}}
 
       %li{class: ('active' if @scope == 'stopped')}
         = link_to project_environments_path(@project, scope: :stopped) do
           Stopped
           %span.badge.js-stopped-environments-count
-            {{countStopped}}
+            {{state.stoppedCounter}}
 
     - if can?(current_user, :create_environment, @project) && !@all_environments.blank?
       .nav-controls