Adjustments to receive new data schema

7 files changed, 219 insertions, 576 deletions

diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6
index 91553bda4dc..93f65ba0ea8 100644
--- a/app/assets/javascripts/environments/components/environment.js.es6
+++ b/app/assets/javascripts/environments/components/environment.js.es6
@@ -69,12 +69,10 @@ require('./environment_item');
      * Toggles loading property.
      */
     created() {
-      gl.environmentsService = new EnvironmentsService(this.endpoint);
+      const scope = this.$options.getQueryParameter('scope') || this.visibility;
+      const endpoint = `${this.endpoint}?scope=${scope}`;
 
-      const scope = this.$options.getQueryParameter('scope');
-      if (scope) {
-        this.store.storeVisibility(scope);
-      }
+      gl.environmentsService = new EnvironmentsService(endpoint);
 
       this.isLoading = true;
 
@@ -82,6 +80,8 @@ require('./environment_item');
         .then(resp => resp.json())
         .then((json) => {
           this.store.storeEnvironments(json);
+        })
+        .then(() => {
           this.isLoading = false;
         })
         .catch(() => {
@@ -165,8 +165,7 @@ require('./environment_item');
               </a>
             </p>
 
-            <a
-              v-if="canCreateEnvironmentParsed"
+            <a v-if="canCreateEnvironmentParsed"
               :href="newEnvironmentPath"
               class="btn btn-create js-new-environment-button">
               New Environment
@@ -174,7 +173,7 @@ require('./environment_item');
           </div>
 
           <div class="table-holder"
-            v-if="!isLoading && state.filteredEnvironments.length > 0">
+            v-if="!isLoading && state.environments.length > 0">
             <table class="table ci-table environments">
               <thead>
                 <tr>
@@ -187,31 +186,15 @@ require('./environment_item');
                 </tr>
               </thead>
               <tbody>
-                <template v-for="model in state.filteredEnvironments"
+                <template v-for="model in state.environments"
                   v-bind:model="model">
-
-                  <tr
-                    is="environment-item"
+                  <tr is="environment-item"
                     :model="model"
-                    :toggleRow="toggleRow.bind(model)"
                     :can-create-deployment="canCreateDeploymentParsed"
                     :can-read-environment="canReadEnvironmentParsed"
                     :play-icon-svg="playIconSvg"
                     :terminal-icon-svg="terminalIconSvg"
                     :commit-icon-svg="commitIconSvg"></tr>
-
-                  <tr v-if="model.isOpen && model.children && model.children.length > 0"
-                    is="environment-item"
-                    v-for="children in model.children"
-                    :model="children"
-                    :toggleRow="toggleRow.bind(children)"
-                    :can-create-deployment="canCreateDeploymentParsed"
-                    :can-read-environment="canReadEnvironmentParsed"
-                    :play-icon-svg="playIconSvg"
-                    :terminal-icon-svg="terminalIconSvg"
-                    :commit-icon-svg="commitIconSvg">
-                    </tr>
-
                 </template>
               </tbody>
             </table>
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index 33a99231315..ae37bc24396 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -15,12 +15,7 @@ require('./environment_terminal_button');
   /**
    * Envrionment Item Component
    *
-   * Used in a hierarchical structure to show folders with children
-   * in a table.
-   * Recursive component based on [Tree View](https://vuejs.org/examples/tree-view.html)
-   *
-   * See this [issue](https://gitlab.com/gitlab-org/gitlab-ce/issues/22539)
-   * for more information.15
+   * Renders a table row for each environment.
    */
 
   window.gl = window.gl || {};
@@ -45,11 +40,6 @@ require('./environment_terminal_button');
         default: () => ({}),
       },
 
-      toggleRow: {
-        type: Function,
-        required: false,
-      },
-
       canCreateDeployment: {
         type: Boolean,
         required: false,
@@ -76,50 +66,9 @@ require('./environment_terminal_button');
         type: String,
         required: false,
       },
-
-    },
-
-    data() {
-      return {
-        rowClass: {
-          'children-row': this.model['vue-isChildren'],
-        },
-      };
     },
 
     computed: {
-
-      /**
-       * If an item has a `children` entry it means it is a folder.
-       * Folder items have different behaviours - it is possible to toggle
-       * them and show their children.
-       *
-       * @returns {Boolean|Undefined}
-       */
-      isFolder() {
-        return this.model.children && this.model.children.length > 0;
-      },
-
-      /**
-       * If an item is inside a folder structure will return true.
-       * Used for css purposes.
-       *
-       * @returns {Boolean|undefined}
-       */
-      isChildren() {
-        return this.model['vue-isChildren'];
-      },
-
-      /**
-       * Counts the number of environments in each folder.
-       * Used to show a badge with the counter.
-       *
-       * @returns {Number|Undefined}  The number of environments for the current folder.
-       */
-      childrenCounter() {
-        return this.model.children && this.model.children.length;
-      },
-
       /**
        * Verifies if `last_deployment` key exists in the current Envrionment.
        * This key is required to render most of the html - this method works has
@@ -128,8 +77,8 @@ require('./environment_terminal_button');
        * @returns {Boolean}
        */
       hasLastDeploymentKey() {
-        if (this.model.last_deployment &&
-          !this.$options.isObjectEmpty(this.model.last_deployment)) {
+        if (this.model.latest.last_deployment &&
+          !this.$options.isObjectEmpty(this.model.latest.last_deployment)) {
           return true;
         }
         return false;
@@ -142,8 +91,9 @@ require('./environment_terminal_button');
        * @returns {Boolean|Undefined}
        */
       hasManualActions() {
-        return this.model.last_deployment && this.model.last_deployment.manual_actions &&
-          this.model.last_deployment.manual_actions.length > 0;
+        return this.model.latest.last_deployment &&
+          this.model.latest.last_deployment.manual_actions &&
+          this.model.latest.last_deployment.manual_actions.length > 0;
       },
 
       /**
@@ -163,8 +113,8 @@ require('./environment_terminal_button');
        */
       canRetry() {
         return this.hasLastDeploymentKey &&
-          this.model.last_deployment &&
-          this.model.last_deployment.deployable;
+          this.model.latest.last_deployment &&
+          this.model.latest.last_deployment.deployable;
       },
 
       /**
@@ -173,9 +123,9 @@ require('./environment_terminal_button');
        * @returns {Boolean|Undefined}
        */
       canShowDate() {
-        return this.model.last_deployment &&
-          this.model.last_deployment.deployable &&
-          this.model.last_deployment.deployable !== undefined;
+        return this.model.latest.last_deployment &&
+          this.model.latest.last_deployment.deployable &&
+          this.model.latest.last_deployment.deployable !== undefined;
       },
 
       /**
@@ -185,7 +135,7 @@ require('./environment_terminal_button');
        */
       createdDate() {
         return gl.environmentsList.timeagoInstance.format(
-          this.model.last_deployment.deployable.created_at,
+          this.model.latest.last_deployment.deployable.created_at,
         );
       },
 
@@ -196,7 +146,7 @@ require('./environment_terminal_button');
        */
       manualActions() {
         if (this.hasManualActions) {
-          return this.model.last_deployment.manual_actions.map((action) => {
+          return this.model.latest.last_deployment.manual_actions.map((action) => {
             const parsedAction = {
               name: gl.text.humanize(action.name),
               play_path: action.play_path,
@@ -213,10 +163,10 @@ require('./environment_terminal_button');
        * @returns {String}
        */
       userImageAltDescription() {
-        if (this.model.last_deployment &&
-          this.model.last_deployment.user &&
-          this.model.last_deployment.user.username) {
-          return `${this.model.last_deployment.user.username}'s avatar'`;
+        if (this.model.latest.last_deployment &&
+          this.model.latest.last_deployment.user &&
+          this.model.latest.last_deployment.user.username) {
+          return `${this.model.latest.last_deployment.user.username}'s avatar'`;
         }
         return '';
       },
@@ -227,9 +177,9 @@ require('./environment_terminal_button');
        * @returns {String|Undefined}
        */
       commitTag() {
-        if (this.model.last_deployment &&
-          this.model.last_deployment.tag) {
-          return this.model.last_deployment.tag;
+        if (this.model.latest.last_deployment &&
+          this.model.latest.last_deployment.tag) {
+          return this.model.latest.last_deployment.tag;
         }
         return undefined;
       },
@@ -240,8 +190,9 @@ require('./environment_terminal_button');
        * @returns {Object|Undefined}
        */
       commitRef() {
-        if (this.model.last_deployment && this.model.last_deployment.ref) {
-          return this.model.last_deployment.ref;
+        if (this.model.latest.last_deployment &&
+          this.model.latest.last_deployment.ref) {
+          return this.model.latest.last_deployment.ref;
         }
         return undefined;
       },
@@ -252,10 +203,10 @@ require('./environment_terminal_button');
        * @returns {String|Undefined}
        */
       commitUrl() {
-        if (this.model.last_deployment &&
-          this.model.last_deployment.commit &&
-          this.model.last_deployment.commit.commit_path) {
-          return this.model.last_deployment.commit.commit_path;
+        if (this.model.latest.last_deployment &&
+          this.model.latest.last_deployment.commit &&
+          this.model.latest.last_deployment.commit.commit_path) {
+          return this.model.latest.last_deployment.commit.commit_path;
         }
         return undefined;
       },
@@ -266,10 +217,10 @@ require('./environment_terminal_button');
        * @returns {String|Undefined}
        */
       commitShortSha() {
-        if (this.model.last_deployment &&
-          this.model.last_deployment.commit &&
-          this.model.last_deployment.commit.short_id) {
-          return this.model.last_deployment.commit.short_id;
+        if (this.model.latest.last_deployment &&
+          this.model.latest.last_deployment.commit &&
+          this.model.latest.last_deployment.commit.short_id) {
+          return this.model.latest.last_deployment.commit.short_id;
         }
         return undefined;
       },
@@ -280,10 +231,10 @@ require('./environment_terminal_button');
        * @returns {String|Undefined}
        */
       commitTitle() {
-        if (this.model.last_deployment &&
-          this.model.last_deployment.commit &&
-          this.model.last_deployment.commit.title) {
-          return this.model.last_deployment.commit.title;
+        if (this.model.latest.last_deployment &&
+          this.model.latest.last_deployment.commit &&
+          this.model.latest.last_deployment.commit.title) {
+          return this.model.latest.last_deployment.commit.title;
         }
         return undefined;
       },
@@ -294,10 +245,10 @@ require('./environment_terminal_button');
        * @returns {Object|Undefined}
        */
       commitAuthor() {
-        if (this.model.last_deployment &&
-          this.model.last_deployment.commit &&
-          this.model.last_deployment.commit.author) {
-          return this.model.last_deployment.commit.author;
+        if (this.model.latest.last_deployment &&
+          this.model.latest.last_deployment.commit &&
+          this.model.latest.last_deployment.commit.author) {
+          return this.model.latest.last_deployment.commit.author;
         }
 
         return undefined;
@@ -309,10 +260,10 @@ require('./environment_terminal_button');
        * @returns {String|Undefined}
        */
       retryUrl() {
-        if (this.model.last_deployment &&
-          this.model.last_deployment.deployable &&
-          this.model.last_deployment.deployable.retry_path) {
-          return this.model.last_deployment.deployable.retry_path;
+        if (this.model.latest.last_deployment &&
+          this.model.latest.last_deployment.deployable &&
+          this.model.latest.last_deployment.deployable.retry_path) {
+          return this.model.latest.last_deployment.deployable.retry_path;
         }
         return undefined;
       },
@@ -323,7 +274,8 @@ require('./environment_terminal_button');
        * @returns {Boolean|Undefined}
        */
       isLastDeployment() {
-        return this.model.last_deployment && this.model.last_deployment['last?'];
+        return this.model.latest.last_deployment &&
+          this.model.latest.last_deployment['last?'];
       },
 
       /**
@@ -332,9 +284,9 @@ require('./environment_terminal_button');
        * @returns {String}
        */
       buildName() {
-        if (this.model.last_deployment &&
-          this.model.last_deployment.deployable) {
-          return `${this.model.last_deployment.deployable.name} #${this.model.last_deployment.deployable.id}`;
+        if (this.model.latest.last_deployment &&
+          this.model.latest.last_deployment.deployable) {
+          return `${this.model.latest.last_deployment.deployable.name} #${this.model.latest.last_deployment.deployable.id}`;
         }
         return '';
       },
@@ -345,9 +297,9 @@ require('./environment_terminal_button');
        * @returns {String}
        */
       deploymentInternalId() {
-        if (this.model.last_deployment &&
-          this.model.last_deployment.iid) {
-          return `#${this.model.last_deployment.iid}`;
+        if (this.model.latest.last_deployment &&
+          this.model.latest.last_deployment.iid) {
+          return `#${this.model.latest.last_deployment.iid}`;
         }
         return '';
       },
@@ -358,8 +310,8 @@ require('./environment_terminal_button');
        * @returns {Boolean}
        */
       deploymentHasUser() {
-        return !this.$options.isObjectEmpty(this.model.last_deployment) &&
-          !this.$options.isObjectEmpty(this.model.last_deployment.user);
+        return !this.$options.isObjectEmpty(this.model.latest.last_deployment) &&
+          !this.$options.isObjectEmpty(this.model.latest.last_deployment.user);
       },
 
       /**
@@ -369,9 +321,9 @@ require('./environment_terminal_button');
        * @returns {Object}
        */
       deploymentUser() {
-        if (!this.$options.isObjectEmpty(this.model.last_deployment) &&
-          !this.$options.isObjectEmpty(this.model.last_deployment.user)) {
-          return this.model.last_deployment.user;
+        if (!this.$options.isObjectEmpty(this.model.latest.last_deployment) &&
+          !this.$options.isObjectEmpty(this.model.latest.last_deployment.user)) {
+          return this.model.latest.last_deployment.user;
         }
         return {};
       },
@@ -384,9 +336,9 @@ require('./environment_terminal_button');
        * @returns {Boolean}
        */
       shouldRenderBuildName() {
-        return !this.isFolder &&
-          !this.$options.isObjectEmpty(this.model.last_deployment) &&
-          !this.$options.isObjectEmpty(this.model.last_deployment.deployable);
+        return !this.model.isFolder &&
+          !this.$options.isObjectEmpty(this.model.latest.last_deployment) &&
+          !this.$options.isObjectEmpty(this.model.latest.last_deployment.deployable);
       },
 
       /**
@@ -397,9 +349,9 @@ require('./environment_terminal_button');
        * @returns {Boolean}
        */
       shouldRenderDeploymentID() {
-        return !this.isFolder &&
-          !this.$options.isObjectEmpty(this.model.last_deployment) &&
-          this.model.last_deployment.iid !== undefined;
+        return !this.model.isFolder &&
+          !this.$options.isObjectEmpty(this.model.latest.last_deployment) &&
+          this.model.latest.last_deployment.iid !== undefined;
       },
     },
 
@@ -420,16 +372,16 @@ require('./environment_terminal_button');
 
     template: `
       <tr>
-        <td v-bind:class="{ 'children-row': isChildren}">
-          <a v-if="!isFolder"
+        <td>
+          <a v-if="!model.isFolder"
             class="environment-name"
-            :href="model.environment_path">
+            :href="model.latest.environment_path">
             {{model.name}}
           </a>
-          <span v-else v-on:click="toggleRow(model)" class="folder-name">
+          <a v-else class="folder-name">
             <span class="folder-icon">
-              <i v-show="model.isOpen" class="fa fa-caret-down"></i>
-              <i v-show="!model.isOpen" class="fa fa-caret-right"></i>
+              <i class="fa fa-caret-right" aria-hidden="true"></i>
+              <i class="fa fa-folder" aria-hidden="true"></i>
             </span>
 
             <span>
@@ -437,9 +389,9 @@ require('./environment_terminal_button');
             </span>
 
             <span class="badge">
-              {{childrenCounter}}
+              {{model.size}}
             </span>
-          </span>
+          </a>
         </td>
 
         <td class="deployment-column">
@@ -447,7 +399,7 @@ require('./environment_terminal_button');
             {{deploymentInternalId}}
           </span>
 
-          <span v-if="!isFolder && deploymentHasUser">
+          <span v-if="!model.isFolder && deploymentHasUser">
             by
             <a :href="deploymentUser.web_url" class="js-deploy-user-container">
               <img class="avatar has-tooltip s20"
@@ -461,13 +413,13 @@ require('./environment_terminal_button');
         <td class="environments-build-cell">
           <a v-if="shouldRenderBuildName"
             class="build-link"
-            :href="model.last_deployment.deployable.build_path">
+            :href="model.latest.last_deployment.deployable.build_path">
             {{buildName}}
           </a>
         </td>
 
         <td>
-          <div v-if="!isFolder && hasLastDeploymentKey" class="js-commit-component">
+          <div v-if="!model.isFolder && hasLastDeploymentKey" class="js-commit-component">
             <commit-component
               :tag="commitTag"
               :commit-ref="commitRef"
@@ -478,21 +430,20 @@ require('./environment_terminal_button');
               :commit-icon-svg="commitIconSvg">
             </commit-component>
           </div>
-          <p v-if="!isFolder && !hasLastDeploymentKey" class="commit-title">
+          <p v-if="!model.isFolder && !hasLastDeploymentKey" class="commit-title">
             No deployments yet
           </p>
         </td>
 
         <td>
-          <span
-            v-if="!isFolder && canShowDate"
+          <span v-if="!model.isFolder && canShowDate"
             class="environment-created-date-timeago">
             {{createdDate}}
           </span>
         </td>
 
         <td class="hidden-xs">
-          <div v-if="!isFolder">
+          <div v-if="!model.isFolder">
             <div v-if="hasManualActions && canCreateDeployment"
               class="inline js-manual-actions-container">
               <actions-component
@@ -501,25 +452,25 @@ require('./environment_terminal_button');
               </actions-component>
             </div>
 
-            <div v-if="model.external_url && canReadEnvironment"
+            <div v-if="model.latest.external_url && canReadEnvironment"
               class="inline js-external-url-container">
               <external-url-component
-                :external-url="model.external_url">
+                :external-url="model.latest.external_url">
               </external-url-component>
             </div>
 
             <div v-if="hasStopAction && canCreateDeployment"
               class="inline js-stop-component-container">
               <stop-component
-                :stop-url="model.stop_path">
+                :stop-url="model.latest.stop_path">
               </stop-component>
             </div>
 
-            <div v-if="model.terminal_path"
+            <div v-if="model.latest.terminal_path"
               class="inline js-terminal-button-container">
               <terminal-button-component
                 :terminal-icon-svg="terminalIconSvg"
-                :terminal-path="model.terminal_path">
+                :terminal-path="model.latest.terminal_path">
               </terminal-button-component>
             </div>
 
diff --git a/app/assets/javascripts/environments/stores/environments_store.js.es6 b/app/assets/javascripts/environments/stores/environments_store.js.es6
index 9b4090100da..a533b8b61d6 100644
--- a/app/assets/javascripts/environments/stores/environments_store.js.es6
+++ b/app/assets/javascripts/environments/stores/environments_store.js.es6
@@ -10,181 +10,41 @@
       this.state.environments = [];
       this.state.stoppedCounter = 0;
       this.state.availableCounter = 0;
-      this.state.visibility = 'available';
       this.state.filteredEnvironments = [];
 
       return this;
     },
 
     /**
-     * In order to display a tree view we need to modify the received
-     * data in to a tree structure based on `environment_type`
-     * sorted alphabetically.
-     * In each children a `vue-` property will be added. This property will be
-     * used to know if an item is a children mostly for css purposes. This is
-     * needed because the children row is a fragment instance and therfore does
-     * not accept non-prop attributes.
      *
+     * Stores the received environments.
      *
-     * @example
-     * it will transform this:
-     * [
-     *   { name: "environment", environment_type: "review" },
-     *   { name: "environment_1", environment_type: null }
-     *   { name: "environment_2, environment_type: "review" }
-     * ]
-     * into this:
-     * [
-     *   { name: "review", children:
-     *      [
-     *        { name: "environment", environment_type: "review", vue-isChildren: true},
-     *        { name: "environment_2", environment_type: "review", vue-isChildren: true}
-     *      ]
-     *   },
-     *  {name: "environment_1", environment_type: null}
-     * ]
+     * Each environment has the following schema
+     * { name: String, size: Number, latest: Object }
      *
+     * 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.
      *
-     * @param  {Array} environments List of environments.
-     * @returns {Array} Tree structured array with the received environments.
+     * @param  {Array} environments
+     * @returns {Array}
      */
     storeEnvironments(environments = []) {
-      this.state.stoppedCounter = this.countByState(environments, 'stopped');
-      this.state.availableCounter = this.countByState(environments, 'available');
-
-      const environmentsTree = environments.reduce((acc, environment) => {
-        if (environment.environment_type !== null) {
-          const occurs = acc.filter(element => element.children &&
-             element.name === environment.environment_type);
-
-          environment['vue-isChildren'] = true;
-
-          if (occurs.length) {
-            acc[acc.indexOf(occurs[0])].children.push(environment);
-            acc[acc.indexOf(occurs[0])].children.slice().sort(this.sortByName);
-          } else {
-            acc.push({
-              name: environment.environment_type,
-              children: [environment],
-              isOpen: false,
-              'vue-isChildren': environment['vue-isChildren'],
-            });
-          }
-        } else {
-          acc.push(environment);
-        }
-
-        return acc;
-      }, []).slice().sort(this.sortByName);
-
-      this.state.environments = environmentsTree;
-
-      this.filterEnvironmentsByVisibility(this.state.environments);
-
-      return environmentsTree;
-    },
-
-    storeVisibility(visibility) {
-      this.state.visibility = visibility;
-    },
-    /**
-     * Given the visibility prop provided by the url query parameter and which
-     * changes according to the active tab we need to filter which environments
-     * should be visible.
-     *
-     * The environments array is a recursive tree structure and we need to filter
-     * both root level environments and children environments.
-     *
-     * In order to acomplish that, both `filterState` and `filterEnvironmentsByVisibility`
-     * functions work together.
-     * The first one works as the filter that verifies if the given environment matches
-     * the given state.
-     * The second guarantees both root level and children elements are filtered as well.
-     *
-     * Given array of environments will return only
-     * the environments that match the state stored.
-     *
-     * @param {Array} array
-     * @return {Array}
-     */
-    filterEnvironmentsByVisibility(arr) {
-      const filteredEnvironments = arr.map((item) => {
-        if (item.children) {
-          const filteredChildren = this.filterEnvironmentsByVisibility(
-            item.children,
-          ).filter(Boolean);
-
-          if (filteredChildren.length) {
-            item.children = filteredChildren;
-            return item;
-          }
-        }
-
-        return this.filterState(this.state.visibility, item);
-      }).filter(Boolean);
-
-      this.state.filteredEnvironments = filteredEnvironments;
-      return filteredEnvironments;
-    },
-
-    /**
-     * Given the state and the environment,
-     * returns only if the environment state matches the one provided.
-     *
-     * @param  {String} state
-     * @param  {Object} environment
-     * @return {Object}
-     */
-    filterState(state, environment) {
-      return environment.state === state && environment;
-    },
-
-    /**
-     * Toggles folder open property given the environment type.
-     *
-     * @param  {String} envType
-     * @return {Array}
-     */
-    toggleFolder(envType) {
-      const environments = this.state.environments;
-
-      const environmentsCopy = environments.map((env) => {
-        if (env['vue-isChildren'] && env.name === envType) {
-          env.isOpen = !env.isOpen;
+      const filteredEnvironments = environments.map((env) => {
+        if (env.size > 1) {
+          return Object.assign({}, env, { isFolder: true });
         }
 
         return env;
       });
 
-      this.state.environments = environmentsCopy;
+      this.state.environments = filteredEnvironments;
 
-      return environmentsCopy;
+      return filteredEnvironments;
     },
 
-    /**
-     * 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;
+    storeCounts() {
+      //TODO
     },
 
-    /**
-     * Sorts the two objects provided by their name.
-     *
-     * @param  {Object} a
-     * @param  {Object} b
-     * @returns {Number}
-     */
-    sortByName(a, b) {
-      const nameA = a.name.toUpperCase();
-      const nameB = b.name.toUpperCase();
-
-      return nameA < nameB ? -1 : nameA > nameB ? 1 : 0; // eslint-disable-line
-    },
   };
 })();
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 778ef01430e..1d4d85ba6de 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -110,17 +110,19 @@
     }
   }
 
-  .children-row .environment-name {
-    margin-left: 17px;
-    margin-right: -17px;
-  }
-
   .folder-icon {
-    padding: 0 5px 0 0;
+    margin-right: 3px;
+    color: $gl-text-color-secondary;
+
+    .fa:nth-child(1) {
+      margin-right: 3px;
+    }
   }
 
   .folder-name {
     cursor: pointer;
+    text-decoration: none;
+    color: $gl-text-color-secondary;
   }
 }
 
@@ -135,4 +137,4 @@
       margin-right: 0;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/spec/javascripts/environments/environment_item_spec.js.es6 b/spec/javascripts/environments/environment_item_spec.js.es6
index d87cc0996c9..14478f1401d 100644
--- a/spec/javascripts/environments/environment_item_spec.js.es6
+++ b/spec/javascripts/environments/environment_item_spec.js.es6
@@ -14,33 +14,13 @@ describe('Environment item', () => {
     beforeEach(() => {
       mockItem = {
         name: 'review',
-        children: [
-          {
-            name: 'review-app',
-            id: 1,
-            state: 'available',
-            external_url: '',
-            last_deployment: {},
-            created_at: '2016-11-07T11:11:16.525Z',
-            updated_at: '2016-11-10T15:55:58.778Z',
-          },
-          {
-            name: 'production',
-            id: 2,
-            state: 'available',
-            external_url: '',
-            last_deployment: {},
-            created_at: '2016-11-07T11:11:16.525Z',
-            updated_at: '2016-11-10T15:55:58.778Z',
-          },
-        ],
+        size: 3
       };
 
       component = new window.gl.environmentsList.EnvironmentItem({
         el: document.querySelector('tr#environment-row'),
         propsData: {
           model: mockItem,
-          toggleRow: () => {},
           canCreateDeployment: false,
           canReadEnvironment: true,
         },
@@ -53,7 +33,7 @@ describe('Environment item', () => {
     });
 
     it('Should render the number of children in a badge', () => {
-      expect(component.$el.querySelector('.folder-name .badge').textContent).toContain(mockItem.children.length);
+      expect(component.$el.querySelector('.folder-name .badge').textContent).toContain(mockItem.size);
     });
   });
 
@@ -63,38 +43,23 @@ describe('Environment item', () => {
 
     beforeEach(() => {
       environment = {
-        id: 31,
         name: 'production',
-        state: 'stopped',
-        external_url: 'http://external.com',
-        environment_type: null,
-        last_deployment: {
-          id: 66,
-          iid: 6,
-          sha: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
-          ref: {
-            name: 'master',
-            ref_path: 'root/ci-folders/tree/master',
-          },
-          tag: true,
-          'last?': true,
-          user: {
-            name: 'Administrator',
-            username: 'root',
-            id: 1,
-            state: 'active',
-            avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
-            web_url: 'http://localhost:3000/root',
-          },
-          commit: {
-            id: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
-            short_id: '500aabcb',
-            title: 'Update .gitlab-ci.yml',
-            author_name: 'Administrator',
-            author_email: 'admin@example.com',
-            created_at: '2016-11-07T18:28:13.000+00:00',
-            message: 'Update .gitlab-ci.yml',
-            author: {
+        size: 1,
+        latest: {
+          state: 'stopped',
+          external_url: 'http://external.com',
+          environment_type: null,
+          last_deployment: {
+            id: 66,
+            iid: 6,
+            sha: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+            ref: {
+              name: 'master',
+              ref_path: 'root/ci-folders/tree/master',
+            },
+            tag: true,
+            'last?': true,
+            user: {
               name: 'Administrator',
               username: 'root',
               id: 1,
@@ -102,34 +67,50 @@ describe('Environment item', () => {
               avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
               web_url: 'http://localhost:3000/root',
             },
-            commit_path: '/root/ci-folders/tree/500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
-          },
-          deployable: {
-            id: 1279,
-            name: 'deploy',
-            build_path: '/root/ci-folders/builds/1279',
-            retry_path: '/root/ci-folders/builds/1279/retry',
-            created_at: '2016-11-29T18:11:58.430Z',
-            updated_at: '2016-11-29T18:11:58.430Z',
-          },
-          manual_actions: [
-            {
-              name: 'action',
-              play_path: '/play',
+            commit: {
+              id: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+              short_id: '500aabcb',
+              title: 'Update .gitlab-ci.yml',
+              author_name: 'Administrator',
+              author_email: 'admin@example.com',
+              created_at: '2016-11-07T18:28:13.000+00:00',
+              message: 'Update .gitlab-ci.yml',
+              author: {
+                name: 'Administrator',
+                username: 'root',
+                id: 1,
+                state: 'active',
+                avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+                web_url: 'http://localhost:3000/root',
+              },
+              commit_path: '/root/ci-folders/tree/500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
             },
-          ],
+            deployable: {
+              id: 1279,
+              name: 'deploy',
+              build_path: '/root/ci-folders/builds/1279',
+              retry_path: '/root/ci-folders/builds/1279/retry',
+              created_at: '2016-11-29T18:11:58.430Z',
+              updated_at: '2016-11-29T18:11:58.430Z',
+            },
+            manual_actions: [
+              {
+                name: 'action',
+                play_path: '/play',
+              },
+            ],
+          },
+          'stop_action?': true,
+          environment_path: 'root/ci-folders/environments/31',
+          created_at: '2016-11-07T11:11:16.525Z',
+          updated_at: '2016-11-10T15:55:58.778Z',
         },
-        'stop_action?': true,
-        environment_path: 'root/ci-folders/environments/31',
-        created_at: '2016-11-07T11:11:16.525Z',
-        updated_at: '2016-11-10T15:55:58.778Z',
       };
 
       component = new window.gl.environmentsList.EnvironmentItem({
         el: document.querySelector('tr#environment-row'),
         propsData: {
           model: environment,
-          toggleRow: () => {},
           canCreateDeployment: true,
           canReadEnvironment: true,
         },
@@ -144,7 +125,7 @@ describe('Environment item', () => {
       it('should render deployment internal id', () => {
         expect(
           component.$el.querySelector('.deployment-column span').textContent,
-        ).toContain(environment.last_deployment.iid);
+        ).toContain(environment.latest.last_deployment.iid);
 
         expect(
           component.$el.querySelector('.deployment-column span').textContent,
@@ -154,7 +135,7 @@ describe('Environment item', () => {
       it('should render last deployment date', () => {
         const timeagoInstance = new timeago(); // eslint-disable-line
         const formatedDate = timeagoInstance.format(
-          environment.last_deployment.deployable.created_at,
+          environment.latest.last_deployment.deployable.created_at,
         );
 
         expect(
@@ -166,7 +147,7 @@ describe('Environment item', () => {
         it('should render user avatar with link to profile', () => {
           expect(
             component.$el.querySelector('.js-deploy-user-container').getAttribute('href'),
-          ).toEqual(environment.last_deployment.user.web_url);
+          ).toEqual(environment.latest.last_deployment.user.web_url);
         });
       });
 
@@ -174,13 +155,13 @@ describe('Environment item', () => {
         it('Should link to build url provided', () => {
           expect(
             component.$el.querySelector('.build-link').getAttribute('href'),
-          ).toEqual(environment.last_deployment.deployable.build_path);
+          ).toEqual(environment.latest.last_deployment.deployable.build_path);
         });
 
         it('Should render deployable name and id', () => {
           expect(
             component.$el.querySelector('.build-link').getAttribute('href'),
-          ).toEqual(environment.last_deployment.deployable.build_path);
+          ).toEqual(environment.latest.last_deployment.deployable.build_path);
         });
       });
 
diff --git a/spec/javascripts/environments/environments_store_spec.js.es6 b/spec/javascripts/environments/environments_store_spec.js.es6
index 9a8300d3832..d073e120290 100644
--- a/spec/javascripts/environments/environments_store_spec.js.es6
+++ b/spec/javascripts/environments/environments_store_spec.js.es6
@@ -20,50 +20,10 @@ require('./mock_data');
         gl.environmentsList.EnvironmentsStore.storeEnvironments(environmentsList);
       });
 
-      it('should count stopped environments and save the count in the state', () => {
-        expect(gl.environmentsList.EnvironmentsStore.state.stoppedCounter).toBe(1);
-      });
-
-      it('should count available environments and save the count in the state', () => {
-        expect(gl.environmentsList.EnvironmentsStore.state.availableCounter).toBe(3);
-      });
-
-      it('should store environments with same environment_type as sibilings', () => {
-        expect(gl.environmentsList.EnvironmentsStore.state.environments.length).toBe(3);
-
-        const parentFolder = gl.environmentsList.EnvironmentsStore.state.environments
-        .filter(env => env.children && env.children.length > 0);
-
-        expect(parentFolder[0].children.length).toBe(2);
-        expect(parentFolder[0].children[0].environment_type).toBe('review');
-        expect(parentFolder[0].children[1].environment_type).toBe('review');
-        expect(parentFolder[0].children[0].name).toBe('test-environment');
-        expect(parentFolder[0].children[1].name).toBe('test-environment-1');
-      });
-
-      it('should sort the environments alphabetically', () => {
-        const { environments } = gl.environmentsList.EnvironmentsStore.state;
-
-        expect(environments[0].name).toBe('production');
-        expect(environments[1].name).toBe('review');
-        expect(environments[1].children[0].name).toBe('test-environment');
-        expect(environments[1].children[1].name).toBe('test-environment-1');
-        expect(environments[2].name).toBe('review_app');
-      });
-    });
-
-    describe('toggleFolder', () => {
-      beforeEach(() => {
-        gl.environmentsList.EnvironmentsStore.storeEnvironments(environmentsList);
-      });
-
-      it('should toggle the open property for the given environment', () => {
-        gl.environmentsList.EnvironmentsStore.toggleFolder('review');
-
-        const { environments } = gl.environmentsList.EnvironmentsStore.state;
-        const environment = environments.filter(env => env['vue-isChildren'] === true && env.name === 'review');
-
-        expect(environment[0].isOpen).toBe(true);
+      it('should store environments', () => {
+        expect(
+          gl.environmentsList.EnvironmentsStore.state.environments.length
+        ).toBe(environmentsList.length);
       });
     });
   });
diff --git a/spec/javascripts/environments/mock_data.js.es6 b/spec/javascripts/environments/mock_data.js.es6
index 80e1cbc6f4d..91595c049b0 100644
--- a/spec/javascripts/environments/mock_data.js.es6
+++ b/spec/javascripts/environments/mock_data.js.es6
@@ -1,153 +1,59 @@
 
 const environmentsList = [
   {
-    id: 31,
-    name: 'production',
-    state: 'available',
-    external_url: 'https://www.gitlab.com',
-    environment_type: null,
-    last_deployment: {
-      id: 64,
-      iid: 5,
-      sha: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
-      ref: {
-        name: 'master',
-        ref_url: 'http://localhost:3000/root/ci-folders/tree/master',
-      },
-      tag: false,
-      'last?': true,
-      user: {
-        name: 'Administrator',
-        username: 'root',
-        id: 1,
-        state: 'active',
-        avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
-        web_url: 'http://localhost:3000/root',
-      },
-      commit: {
-        id: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
-        short_id: '500aabcb',
-        title: 'Update .gitlab-ci.yml',
-        author_name: 'Administrator',
-        author_email: 'admin@example.com',
-        created_at: '2016-11-07T18:28:13.000+00:00',
-        message: 'Update .gitlab-ci.yml',
-        author: {
-          name: 'Administrator',
-          username: 'root',
-          id: 1,
-          state: 'active',
-          avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
-          web_url: 'http://localhost:3000/root',
-        },
-        commit_path: '/root/ci-folders/tree/500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
-      },
-      deployable: {
-        id: 1278,
-        name: 'build',
-        build_path: '/root/ci-folders/builds/1278',
-        retry_path: '/root/ci-folders/builds/1278/retry',
-      },
-      manual_actions: [],
+    name: 'DEV',
+    size: 1,
+    latest: {
+      id: 7,
+      name: 'DEV',
+      state: 'available',
+      external_url: null,
+      environment_type: null,
+      last_deployment: null,
+      'stop_action?': false,
+      environment_path: '/root/review-app/environments/7',
+      stop_path: '/root/review-app/environments/7/stop',
+      created_at: '2017-01-31T10:53:46.894Z',
+      updated_at: '2017-01-31T10:53:46.894Z',
     },
-    'stop_action?': true,
-    environment_path: '/root/ci-folders/environments/31',
-    created_at: '2016-11-07T11:11:16.525Z',
-    updated_at: '2016-11-07T11:11:16.525Z',
   },
   {
-    id: 32,
-    name: 'review_app',
-    state: 'stopped',
-    external_url: 'https://www.gitlab.com',
-    environment_type: null,
-    last_deployment: {
-      id: 64,
-      iid: 5,
-      sha: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
-      ref: {
-        name: 'master',
-        ref_url: 'http://localhost:3000/root/ci-folders/tree/master',
-      },
-      tag: false,
-      'last?': true,
-      user: {
-        name: 'Administrator',
-        username: 'root',
-        id: 1,
-        state: 'active',
-        avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
-        web_url: 'http://localhost:3000/root',
-      },
-      commit: {
-        id: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
-        short_id: '500aabcb',
-        title: 'Update .gitlab-ci.yml',
-        author_name: 'Administrator',
-        author_email: 'admin@example.com',
-        created_at: '2016-11-07T18:28:13.000+00:00',
-        message: 'Update .gitlab-ci.yml',
-        author: {
-          name: 'Administrator',
-          username: 'root',
-          id: 1,
-          state: 'active',
-          avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
-          web_url: 'http://localhost:3000/root',
-        },
-        commit_path: '/root/ci-folders/tree/500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
-      },
-      deployable: {
-        id: 1278,
-        name: 'build',
-        build_path: '/root/ci-folders/builds/1278',
-        retry_path: '/root/ci-folders/builds/1278/retry',
-      },
-      manual_actions: [],
+    name: 'build',
+    size: 5,
+    latest: {
+      id: 12,
+      name: 'build/update-README',
+      state: 'available',
+      external_url: null,
+      environment_type: 'build',
+      last_deployment: null,
+      'stop_action?': false,
+      environment_path: '/root/review-app/environments/12',
+      stop_path: '/root/review-app/environments/12/stop',
+      created_at: '2017-02-01T19:42:18.400Z',
+      updated_at: '2017-02-01T19:42:18.400Z',
     },
-    'stop_action?': false,
-    environment_path: '/root/ci-folders/environments/31',
-    created_at: '2016-11-07T11:11:16.525Z',
-    updated_at: '2016-11-07T11:11:16.525Z',
-  },
-  {
-    id: 33,
-    name: 'test-environment',
-    state: 'available',
-    environment_type: 'review',
-    last_deployment: null,
-    'stop_action?': true,
-    environment_path: '/root/ci-folders/environments/31',
-    created_at: '2016-11-07T11:11:16.525Z',
-    updated_at: '2016-11-07T11:11:16.525Z',
-  },
-  {
-    id: 34,
-    name: 'test-environment-1',
-    state: 'available',
-    environment_type: 'review',
-    last_deployment: null,
-    'stop_action?': true,
-    environment_path: '/root/ci-folders/environments/31',
-    created_at: '2016-11-07T11:11:16.525Z',
-    updated_at: '2016-11-07T11:11:16.525Z',
   },
 ];
 
 window.environmentsList = environmentsList;
 
 const environment = {
-  id: 4,
-  name: 'production',
-  state: 'available',
-  external_url: 'http://production.',
-  environment_type: null,
-  last_deployment: {},
-  'stop_action?': false,
-  environment_path: '/root/review-app/environments/4',
-  stop_path: '/root/review-app/environments/4/stop',
-  created_at: '2016-12-16T11:51:04.690Z',
-  updated_at: '2016-12-16T12:04:51.133Z',
+  name: 'DEV',
+  size: 1,
+  latest: {
+    id: 7,
+    name: 'DEV',
+    state: 'available',
+    external_url: null,
+    environment_type: null,
+    last_deployment: null,
+    'stop_action?': false,
+    environment_path: '/root/review-app/environments/7',
+    stop_path: '/root/review-app/environments/7/stop',
+    created_at: '2017-01-31T10:53:46.894Z',
+    updated_at: '2017-01-31T10:53:46.894Z',
+  },
 };
 
 window.environment = environment;