Creates component

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

+(() => {
+  const Store = gl.environmentsList.EnvironmentsStore;
+
+  window.gl = window.gl || {};
+  window.gl.environmentsList = window.gl.environmentsList || {};
+  
+  gl.environmentsList.EnvironmentItem = Vue.extend({
+
+    props: {
+      model: Object
+    },
+
+    data: function () {
+      return {
+        open: false
+      };
+    },
+    
+    computed: {
+      isFolder: function() {
+        debugger;
+        return this.model.children && this.model.children.length
+      }
+    },
+
+    methods: {
+      toggle: function () {
+        if (this.isFolder) {
+          this.open = !this.open;
+        }
+      }
+    }
+  })
+})();
\ No newline at end of file

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

@@ -2,7 +2,7 @@
 //= require vue-resource
 //= require_tree ./stores
 //= require_tree ./services
-
+//= require ./components/environment_item
 
 $(() => {
   
@@ -20,10 +20,11 @@ $(() => {
     el: $environmentsListApp,
     
     components: {
-      'tree-view': gl.environmentsList.TreeView
+      'environment-item': gl.environmentsList.EnvironmentItem
     },
 
     data: {
+      state: Store.state,
       endpoint: $environmentsListApp.dataset.endpoint,
       loading: true
     },

app/assets/javascripts/environments/services/environments_service.js.es6

@@ -3,8 +3,6 @@ class EnvironmentsService {
   constructor (root) {
     Vue.http.options.root = root;
     
-    debugger;
-    
     this.environments = Vue.resource(root);
     
     Vue.http.interceptors.push((request, next) => {

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

@@ -31,10 +31,13 @@
      *   },
      *  {name: "environment_1", environment_type: null}
      * ]
-     * @param  {Array} environments List of environments
+     * 
+     * 
+     * @param  {Array} environments List of environments.
+     * @returns {Array} Tree structured array with the received environments.
      */
     storeEnvironments(environments) {
-      this.state.environments = environments.reduce((acc, environment) => {
+      const environmentsTree = environments.reduce((acc, environment) => {
         if (environment.environment_type !== null) {
           const occurs = acc.find((element, index, array) => {
             return element.name === environment.environment_type;
@@ -55,6 +58,10 @@
 
         return acc;
       }, []).sort();
+    
+      this.state.environments = environmentsTree;
+      
+      return environmentsTree;
     }
   }
 })();
\ No newline at end of file

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

+%environment-item{"inline-template" => true, 
+  "v-for" => "environment in state.environments", 
+  ":model" => "environment"}
+  %i{"v-if" => "isFolder"}
+    = icon("plus")
+  %i{"v-if" => ""}
+    = icon("less")
+  {{model.name}}

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

@@ -26,26 +26,29 @@
           New environment
 
   .environments-container#environments-list-view{ "v-cloak" => true, data: environments_list_data }
-    - if @all_environments.blank?
-      .blank-state.blank-state-no-icon
-        %h2.blank-state-title
-          You don't have any environments right now.
-        %p.blank-state-text
-          Environments are places where code gets deployed, such as staging or production.
-          %br
-          = succeed "." do
-            = link_to "Read more about environments", help_page_path("ci/environments")
-        - if can?(current_user, :create_environment, @project)
-          = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
-            New environment
-    - else
-      .table-holder
-        %table.table.ci-table.environments
-          %tbody
-            %th Environment
-            %th Last Deployment
-            %th Build
-            %th Commit
-            %th
-            %th.hidden-xs
-        /  = render @environments
+    .environments-list-viewtext-center{ "v-if" => "loading" }
+      = icon("spinner spin")
+
+    .blank-state.blank-state-no-icon{ "v-if" => "state.environments.length === 0" }
+      %h2.blank-state-title
+        You don't have any environments right now.
+      %p.blank-state-text
+        Environments are places where code gets deployed, such as staging or production.
+        %br
+        = succeed "." do
+          = link_to "Read more about environments", help_page_path("ci/environments")
+      - if can?(current_user, :create_environment, @project)
+        = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
+          New environment
+          
+    .table-holder{ "v-if" => "state.environments.length" }
+      %table.table.ci-table.environments
+        %thead
+          %th Environment
+          %th Last Deployment
+          %th Build
+          %th Commit
+          %th
+          %th.hidden-xs
+        %tbody
+          =render "projects/environments/components/environment"