Adds polling function to environments table

Adds polling function to folder table
Adds missing eventhub to folder table

app/assets/javascripts/environments/components/environment.vue

 <script>
 /* global Flash */
+import Visibility from 'visibilityjs';
 import EnvironmentsService from '../services/environments_service';
 import environmentTable from './environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
@@ -7,6 +8,7 @@ import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import tablePagination from '../../vue_shared/components/table_pagination.vue';
 import '../../lib/utils/common_utils';
 import eventHub from '../event_hub';
+import Poll from '../../lib/utils/poll';
 
 export default {
 
@@ -35,6 +37,7 @@ export default {
       projectStoppedEnvironmentsPath: environmentsData.projectStoppedEnvironmentsPath,
       newEnvironmentPath: environmentsData.newEnvironmentPath,
       helpPagePath: environmentsData.helpPagePath,
+      isMakingRequest: false,
 
       // Pagination Properties,
       paginationInformation: {},
@@ -65,17 +68,43 @@ export default {
    * Toggles loading property.
    */
   created() {
+    const scope = gl.utils.getParameterByName('scope') || this.visibility;
+    const page = gl.utils.getParameterByName('page') || this.pageNumber;
+
     this.service = new EnvironmentsService(this.endpoint);
 
-    this.fetchEnvironments();
+    const poll = new Poll({
+      resource: this.service,
+      method: 'get',
+      data: { scope, page },
+      successCallback: this.successCallback,
+      errorCallback: this.errorCallback,
+      notificationCallback: (isMakingRequest) => {
+        this.isMakingRequest = isMakingRequest;
+
+        // We need to verify if any folder is open to also fecth it
+        this.openFolders = this.store.getOpenFolders();
+      },
+    });
+
+    if (!Visibility.hidden()) {
+      this.isLoading = true;
+      poll.makeRequest();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        poll.restart();
+      } else {
+        poll.stop();
+      }
+    });
 
-    eventHub.$on('refreshEnvironments', this.fetchEnvironments);
     eventHub.$on('toggleFolder', this.toggleFolder);
     eventHub.$on('postAction', this.postAction);
   },
 
   beforeDestroyed() {
-    eventHub.$off('refreshEnvironments');
     eventHub.$off('toggleFolder');
     eventHub.$off('postAction');
   },
@@ -104,29 +133,13 @@ export default {
 
     fetchEnvironments() {
       const scope = gl.utils.getParameterByName('scope') || this.visibility;
-      const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
+      const page = 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;
-          // eslint-disable-next-line no-new
-          new Flash('An error occurred while fetching the environments.');
-        });
+      return this.service.get({ scope, page })
+        .then(this.successCallback)
+        .catch(this.errorCallback);
     },
 
     fetchChildEnvironments(folder, folderUrl) {
@@ -146,9 +159,44 @@ export default {
     },
 
     postAction(endpoint) {
-      this.service.postAction(endpoint)
-        .then(() => this.fetchEnvironments())
-        .catch(() => new Flash('An error occured while making the request.'));
+      if (!this.isMakingRequest) {
+        this.isLoading = true;
+
+        this.service.postAction(endpoint)
+          .then(() => this.fetchEnvironments())
+          .catch(() => new Flash('An error occured while making the request.'));
+      }
+    },
+
+    successCallback(resp) {
+      const response = {
+        headers: resp.headers,
+        body: resp.json(),
+      };
+
+      this.isLoading = false;
+
+      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);
+
+      // If it were any open folders while polling we need to set them open again
+      if (this.openFolders.length) {
+        this.openFolders.map((folder) => {
+          // TODO - Move this to the backend
+          const folderUrl = `${window.location.pathname}/folders/${folder.folderName}`;
+
+          this.store.updateFolder(folder, 'isOpen', true);
+          return this.fetchChildEnvironments(folder, folderUrl);
+        });
+      }
+    },
+
+    errorCallback() {
+      this.isLoading = false;
+      // eslint-disable-next-line no-new
+      new Flash('An error occurred while fetching the environments.');
     },
   },
 };

app/assets/javascripts/environments/folder/environments_folder_view.vue

 <script>
 /* global Flash */
+import Visibility from 'visibilityjs';
 import EnvironmentsService from '../services/environments_service';
 import environmentTable from '../components/environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
 import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import tablePagination from '../../vue_shared/components/table_pagination.vue';
+import Poll from '../../lib/utils/poll';
+import eventHub from '../event_hub';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
 
@@ -76,33 +79,39 @@ export default {
    */
   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}`;
-
-    this.service = new EnvironmentsService(endpoint);
-
-    this.isLoading = true;
+    const page = gl.utils.getParameterByName('page') || this.pageNumber;
+
+    this.service = new EnvironmentsService(this.endpoint);
+
+    const poll = new Poll({
+      resource: this.service,
+      method: 'get',
+      data: { scope, page },
+      successCallback: this.successCallback,
+      errorCallback: this.errorCallback,
+      notificationCallback: (isMakingRequest) => {
+        this.isMakingRequest = isMakingRequest;
+      },
+    });
+
+    if (!Visibility.hidden()) {
+      this.isLoading = true;
+      poll.makeRequest();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        poll.restart();
+      } else {
+        poll.stop();
+      }
+    });
+
+    eventHub.$on('postAction', this.postAction);
+  },
 
-    return this.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;
-        // eslint-disable-next-line no-new
-        new Flash('An error occurred while fetching the environments.', 'alert');
-      });
+  beforeDestroyed() {
+    eventHub.$off('postAction');
   },
 
   methods: {
@@ -117,6 +126,47 @@ export default {
       gl.utils.visitUrl(param);
       return param;
     },
+
+    fetchEnvironments() {
+      const scope = gl.utils.getParameterByName('scope') || this.visibility;
+      const page = gl.utils.getParameterByName('page') || this.pageNumber;
+
+      this.isLoading = true;
+
+      return this.service.get({ scope, page })
+        .then(this.successCallback)
+        .catch(this.errorCallback);
+    },
+
+    successCallback(resp) {
+      const response = {
+        headers: resp.headers,
+        body: resp.json(),
+      };
+
+      this.isLoading = false;
+
+      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);
+    },
+
+    errorCallback() {
+      this.isLoading = false;
+      // eslint-disable-next-line no-new
+      new Flash('An error occurred while fetching the environments.');
+    },
+
+    postAction(endpoint) {
+      if (!this.isMakingRequest) {
+        this.isLoading = true;
+
+        this.service.postAction(endpoint)
+          .then(() => this.fetchEnvironments())
+          .catch(() => new Flash('An error occured while making the request.'));
+      }
+    },
   },
 };
 </script>

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

@@ -10,7 +10,8 @@ export default class EnvironmentsService {
     this.folderResults = 3;
   }
 
-  get(scope, page) {
+  get(options = {}) {
+    const { scope, page } = options;
     return this.environments.get({ scope, page });
   }
 

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

@@ -153,4 +153,10 @@ export default class EnvironmentsStore {
     return updatedEnvironments;
   }
 
+  getOpenFolders() {
+    const environments = this.state.environments;
+
+    return environments.filter(env => env.isFolder && env.isOpen);
+  }
+
 }

changelogs/unreleased/zj-realtime-env-list.yml

+---
+title: Makes environment table realtime
+merge_request:
+author:

spec/javascripts/environments/environment_spec.js

@@ -76,6 +76,8 @@ describe('Environment', () => {
         component = new EnvironmentsComponent({
           el: document.querySelector('#environments-list-view'),
         });
+
+        // component.fetchEnvironments();
       });
 
       afterEach(() => {

spec/javascripts/environments/environments_store_spec.js

@@ -123,4 +123,13 @@ describe('Store', () => {
       expect(store.state.paginationInformation).toEqual(expectedResult);
     });
   });
+
+  describe('getOpenFolders', () => {
+    it('should return open folder', () => {
+      store.storeEnvironments(serverData);
+
+      store.toggleFolder(store.state.environments[1]);
+      expect(store.getOpenFolders()[0]).toEqual(store.state.environments[1]);
+    });
+  });
 });

spec/javascripts/environments/folder/environments_folder_view_spec.js

@@ -39,6 +39,7 @@ describe('Environments Folder View', () => {
       component = new EnvironmentsFolderViewComponent({
         el: document.querySelector('#environments-folder-list-view'),
       });
+      // component.fetchEnvironments();
     });
 
     afterEach(() => {