1 files changed, 43 insertions, 33 deletions

diff --git a/app/assets/javascripts/environments/components/environment.js b/app/assets/javascripts/environments/components/environment.js
index 2cb48dde628..0923ce6b550 100644
--- a/app/assets/javascripts/environments/components/environment.js
+++ b/app/assets/javascripts/environments/components/environment.js
@@ -1,16 +1,17 @@
 /* eslint-disable no-param-reassign, no-new */
 /* global Flash */
+import EnvironmentsService from '../services/environments_service';
+import EnvironmentTable from './environments_table';
+import EnvironmentsStore from '../stores/environments_store';
+import eventHub from '../event_hub';
 
 const Vue = window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
-const EnvironmentsService = require('../services/environments_service');
-const EnvironmentTable = require('./environments_table');
-const EnvironmentsStore = require('../stores/environments_store');
 require('../../vue_shared/components/table_pagination');
 require('../../lib/utils/common_utils');
 require('../../vue_shared/vue_resource_interceptor');
 
-module.exports = Vue.component('environment-component', {
+export default Vue.component('environment-component', {
 
   components: {
     'environment-table': EnvironmentTable,
@@ -66,33 +67,15 @@ module.exports = Vue.component('environment-component', {
    * Toggles loading property.
    */
   created() {
-    const scope = gl.utils.getParameterByName('scope') || this.visibility;
-    const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
-
-    const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`;
-
-    const service = new EnvironmentsService(endpoint);
-
-    this.isLoading = true;
-
-    return service.get()
-      .then(resp => ({
-        headers: resp.headers,
-        body: resp.json(),
-      }))
-      .then((response) => {
-        this.store.storeAvailableCount(response.body.available_count);
-        this.store.storeStoppedCount(response.body.stopped_count);
-        this.store.storeEnvironments(response.body.environments);
-        this.store.setPagination(response.headers);
-      })
-      .then(() => {
-        this.isLoading = false;
-      })
-      .catch(() => {
-        this.isLoading = false;
-        new Flash('An error occurred while fetching the environments.', 'alert');
-      });
+    this.service = new EnvironmentsService(this.endpoint);
+
+    this.fetchEnvironments();
+
+    eventHub.$on('refreshEnvironments', this.fetchEnvironments);
+  },
+
+  beforeDestroyed() {
+    eventHub.$off('refreshEnvironments');
   },
 
   methods: {
@@ -112,6 +95,32 @@ module.exports = Vue.component('environment-component', {
       gl.utils.visitUrl(param);
       return param;
     },
+
+    fetchEnvironments() {
+      const scope = gl.utils.getParameterByName('scope') || this.visibility;
+      const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
+
+      this.isLoading = true;
+
+      return this.service.get(scope, pageNumber)
+        .then(resp => ({
+          headers: resp.headers,
+          body: resp.json(),
+        }))
+        .then((response) => {
+          this.store.storeAvailableCount(response.body.available_count);
+          this.store.storeStoppedCount(response.body.stopped_count);
+          this.store.storeEnvironments(response.body.environments);
+          this.store.setPagination(response.headers);
+        })
+        .then(() => {
+          this.isLoading = false;
+        })
+        .catch(() => {
+          this.isLoading = false;
+          new Flash('An error occurred while fetching the environments.');
+        });
+    },
   },
 
   template: `
@@ -144,7 +153,7 @@ module.exports = Vue.component('environment-component', {
 
       <div class="content-list environments-container">
         <div class="environments-list-loading text-center" v-if="isLoading">
-          <i class="fa fa-spinner fa-spin"></i>
+          <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
         </div>
 
         <div class="blank-state blank-state-no-icon"
@@ -173,7 +182,8 @@ module.exports = Vue.component('environment-component', {
           <environment-table
             :environments="state.environments"
             :can-create-deployment="canCreateDeploymentParsed"
-            :can-read-environment="canReadEnvironmentParsed"/>
+            :can-read-environment="canReadEnvironmentParsed"
+            :service="service"/>
         </div>
 
         <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"