Adjustments for the new response with counters

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

@@ -7,6 +7,7 @@ window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
 require('../services/environments_service');
 require('./environment_item');
+require('../../vue_pagination/index');
 
 (() => {
   window.gl = window.gl || {};
@@ -79,7 +80,9 @@ require('./environment_item');
       return gl.environmentsService.all()
         .then(resp => resp.json())
         .then((json) => {
-          this.store.storeEnvironments(json);
+          this.store.storeAvailableCount(json.available_count);
+          this.store.storeStoppedCount(json.stopped_count);
+          this.store.storeEnvironments(json.environments);
         })
         .then(() => {
           this.isLoading = false;
@@ -131,7 +134,8 @@ require('./environment_item');
                   {{state.availableCounter}}
                 </span>
               </a>
-            </li><li v-bind:class="{ 'active' : scope === 'stopped' }">
+            </li>
+            <li v-bind:class="{ 'active' : scope === 'stopped' }">
               <a :href="projectStoppedEnvironmentsPath">
                 Stopped
                 <span class="badge js-stopped-environments-count">

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

@@ -42,8 +42,26 @@
       return filteredEnvironments;
     },
 
-    storeCounts() {
-      //TODO
+    /**
+     * Stores the number of available environments.
+     *
+     * @param  {Number} count = 0
+     * @return {Number}
+     */
+    storeAvailableCount(count = 0) {
+      this.state.availableCounter = count;
+      return count;
+    },
+
+    /**
+     * Stores the number of closed environments.
+     *
+     * @param  {Number} count = 0
+     * @return {Number}
+     */
+    storeStoppedCount(count = 0) {
+      this.state.stoppedCounter = count;
+      return count;
     },
 
   };

spec/javascripts/environments/environments_store_spec.js.es6

@@ -22,7 +22,7 @@ require('./mock_data');
 
       it('should store environments', () => {
         expect(
-          gl.environmentsList.EnvironmentsStore.state.environments.length
+          gl.environmentsList.EnvironmentsStore.state.environments.length,
         ).toBe(environmentsList.length);
       });
     });