1 files changed, 32 insertions, 53 deletions

diff --git a/app/assets/javascripts/import_entities/import_groups/graphql/services/status_poller.js b/app/assets/javascripts/import_entities/import_groups/graphql/services/status_poller.js
index 41dd25b9150..63cd6b48fc4 100644
--- a/app/assets/javascripts/import_entities/import_groups/graphql/services/status_poller.js
+++ b/app/assets/javascripts/import_entities/import_groups/graphql/services/status_poller.js
@@ -1,68 +1,47 @@
-import gql from 'graphql-tag';
+import Visibility from 'visibilityjs';
 import createFlash from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+import Poll from '~/lib/utils/poll';
 import { s__ } from '~/locale';
-import bulkImportSourceGroupsQuery from '../queries/bulk_import_source_groups.query.graphql';
-import { STATUSES } from '../../../constants';
 import { SourceGroupsManager } from './source_groups_manager';
 
-const groupId = (i) => `group${i}`;
-
-function generateGroupsQuery(groups) {
-  return gql`{
-    ${groups
-      .map(
-        (g, idx) =>
-          `${groupId(idx)}: group(fullPath: "${g.import_target.target_namespace}/${
-            g.import_target.new_name
-          }") { id }`,
-      )
-      .join('\n')}
-  }`;
-}
-
 export class StatusPoller {
-  constructor({ client, interval }) {
+  constructor({ client, pollPath }) {
     this.client = client;
-    this.interval = interval;
-    this.timeoutId = null;
-    this.groupManager = new SourceGroupsManager({ client });
-  }
 
-  startPolling() {
-    if (this.timeoutId) {
-      return;
-    }
+    this.eTagPoll = new Poll({
+      resource: {
+        fetchJobs: () => axios.get(pollPath),
+      },
+      method: 'fetchJobs',
+      successCallback: ({ data }) => this.updateImportsStatuses(data),
+      errorCallback: () =>
+        createFlash({
+          message: s__('BulkImport|Update of import statuses with realtime changes failed'),
+        }),
+    });
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        this.eTagPoll.restart();
+      } else {
+        this.eTagPoll.stop();
+      }
+    });
 
-    this.checkPendingImports();
+    this.groupManager = new SourceGroupsManager({ client });
   }
 
-  stopPolling() {
-    clearTimeout(this.timeoutId);
-    this.timeoutId = null;
+  startPolling() {
+    this.eTagPoll.makeRequest();
   }
 
-  async checkPendingImports() {
-    try {
-      const { bulkImportSourceGroups } = this.client.readQuery({
-        query: bulkImportSourceGroupsQuery,
-      });
-      const groupsInProgress = bulkImportSourceGroups.filter((g) => g.status === STATUSES.STARTED);
-      if (groupsInProgress.length) {
-        const { data: results } = await this.client.query({
-          query: generateGroupsQuery(groupsInProgress),
-          fetchPolicy: 'no-cache',
-        });
-        const completedGroups = groupsInProgress.filter((_, idx) => Boolean(results[groupId(idx)]));
-        completedGroups.forEach((group) => {
-          this.groupManager.setImportStatus(group, STATUSES.FINISHED);
-        });
+  async updateImportsStatuses(importStatuses) {
+    importStatuses.forEach(({ id, status_name: statusName }) => {
+      const group = this.groupManager.findByImportId(id);
+      if (group.id) {
+        this.groupManager.setImportStatus(group, statusName);
       }
-    } catch (e) {
-      createFlash({
-        message: s__('BulkImport|Update of import statuses with realtime changes failed'),
-      });
-    } finally {
-      this.timeoutId = setTimeout(() => this.checkPendingImports(), this.interval);
-    }
+    });
   }
 }