Adds tab behavior to vue component

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

@@ -15,6 +15,15 @@ $(() => {
     gl.EnvironmentsListApp.$destroy(true);
   }
   
+  const filters = {
+    stopped (environments) {
+      return environments.filter((env) => env.state === 'stopped')
+    },
+    available (environments) {
+      return environments.filter((env) => env.state === 'available')
+    }
+  };
+  
   gl.EnvironmentsListApp = new Vue({
 
     el: '#environments-list-view',
@@ -26,13 +35,33 @@ $(() => {
     data: {
       state: Store.state,
       endpoint: environmentsListApp.dataset.endpoint,
-      loading: true
+      loading: true,
+      visibility: 'available'
+    },
+    
+    computed: {
+      filteredEnvironments () {
+        return filters[this.visibility](this.state.environments);
+      },
+      
+      countStopped () {
+        return filters['stopped'](this.state.environments).length;
+      },
+      
+      counAvailable () {
+        return filters['available'](this.state.environments).length;
+      }
     },
     
     init: Store.create.bind(Store),
     
     created() {
       gl.environmentsService = new EnvironmentsService(this.endpoint);
+      
+      const scope = this.$options.getQueryParameter('scope');
+      if (scope) {
+        this.visibility = scope;
+      }
     },
 
     /**
@@ -45,6 +74,21 @@ $(() => {
 
         this.loading = false;
       });
+    },
+    
+    /**
+     * Transforms the url parameter into an object and
+     * returns the one requested.
+     * 
+     * @param  {String} param
+     * @returns {String}       The value of the requested parameter.
+     */
+    getQueryParameter(param) {
+      return window.location.search.substring(1).split('&').reduce((acc, param) => {
+        acc[param.split('=')[0]] = param.split('=')[1];
+        return acc;
+      }, {})[param];
     }
+
   });
 });

app/controllers/projects/environments_controller.rb

@@ -8,13 +8,7 @@ class Projects::EnvironmentsController < Projects::ApplicationController
 
   def index
     @scope = params[:scope]
-    @all_environments = project.environments
-    @environments =
-      if @scope == 'stopped'
-        @all_environments.stopped
-      else
-        @all_environments.available
-      end
+    @environments = project.environments
   
     respond_to do |format|
       format.html

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

@@ -5,27 +5,27 @@
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag("environments/environments_bundle.js")
   
-%div{ class: container_class }
+#environments-list-view{ data: environments_list_data, class: container_class }
   .top-area
-    %ul.nav-links
+    %ul.nav-links{ "v-if" => "!loading" }
       %li{class: ('active' if @scope.nil?)}
         = link_to project_environments_path(@project) do
           Available
           %span.badge.js-available-environments-count
-            = number_with_delimiter(@all_environments.available.count)
+            {{counAvailable}}
 
       %li{class: ('active' if @scope == 'stopped')}
         = link_to project_environments_path(@project, scope: :stopped) do
           Stopped
           %span.badge.js-stopped-environments-count
-            = number_with_delimiter(@all_environments.stopped.count)
+            {{countStopped}}
 
     - if can?(current_user, :create_environment, @project) && !@all_environments.blank?
       .nav-controls
         = link_to new_namespace_project_environment_path(@project.namespace, @project), class: "btn btn-create" do
           New environment
 
-  #environments-list-view{ data: environments_list_data, class: "environments-container" }
+  .environments-container
     .environments-list-loading.text-center{ "v-if" => "loading" }
       = icon("spinner spin")
 
@@ -51,6 +51,6 @@
           %th
           %th.hidden-xs
         %tbody
-          %tr{"is" => "environment-item", "v-for" => "model in state.environments", ":model" => "model"}
+          %tr{"is" => "environment-item", "v-for" => "model in filteredEnvironments", ":model" => "model"}
 
 =render "projects/environments/components/environment"