2 files changed, 6 insertions, 44 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 14c98847d93..f04eeae71ea 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -1,11 +1,10 @@
 <script>
   /* global Flash */
-  import Visibility from 'visibilityjs';
-  import Poll from '../../../lib/utils/poll';
   import PipelineService from '../../services/pipeline_service';
   import PipelineStore from '../../stores/pipeline_store';
   import stageColumnComponent from './stage_column_component.vue';
   import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
+  import VisibilitySocketManager from '../../../lib/utils/socket/visibility_socket_manager';
   import '../../../flash';
 
   export default {
@@ -29,25 +28,10 @@
     created() {
       this.service = new PipelineService(this.endpoint);
 
-      const poll = new Poll({
-        resource: this.service,
-        method: 'getPipeline',
-        successCallback: this.successCallback,
+      VisibilitySocketManager.subscribe(this.endpoint, null, {
+        updateCallback: this.successCallback,
         errorCallback: this.errorCallback,
       });
-
-      if (!Visibility.hidden()) {
-        this.isLoading = true;
-        poll.makeRequest();
-      }
-
-      Visibility.change(() => {
-        if (!Visibility.hidden()) {
-          poll.restart();
-        } else {
-          poll.stop();
-        }
-      });
     },
 
     methods: {
diff --git a/app/assets/javascripts/pipelines/pipelines.js b/app/assets/javascripts/pipelines/pipelines.js
index d6952d1ee5f..18b91556e83 100644
--- a/app/assets/javascripts/pipelines/pipelines.js
+++ b/app/assets/javascripts/pipelines/pipelines.js
@@ -1,4 +1,3 @@
-import Visibility from 'visibilityjs';
 import PipelinesService from './services/pipelines_service';
 import eventHub from './event_hub';
 import pipelinesTableComponent from '../vue_shared/components/pipelines_table';
@@ -8,7 +7,7 @@ import errorState from './components/error_state.vue';
 import navigationTabs from './components/navigation_tabs';
 import navigationControls from './components/nav_controls';
 import loadingIcon from '../vue_shared/components/loading_icon.vue';
-import Poll from '../lib/utils/poll';
+import VisibilitySocketManager from '../lib/utils/socket/visibility_socket_manager';
 
 export default {
   props: {
@@ -140,30 +139,9 @@ export default {
   created() {
     this.service = new PipelinesService(this.endpoint);
 
-    const poll = new Poll({
-      resource: this.service,
-      method: 'getPipelines',
-      data: { page: this.pageParameter, scope: this.scopeParameter },
-      successCallback: this.successCallback,
+    VisibilitySocketManager.subscribe(this.endpoint, null, {
+      updateCallback: this.successCallback,
       errorCallback: this.errorCallback,
-      notificationCallback: this.setIsMakingRequest,
-    });
-
-    if (!Visibility.hidden()) {
-      this.isLoading = true;
-      poll.makeRequest();
-    } else {
-      // If tab is not visible we need to make the first request so we don't show the empty
-      // state without knowing if there are any pipelines
-      this.fetchPipelines();
-    }
-
-    Visibility.change(() => {
-      if (!Visibility.hidden()) {
-        poll.restart();
-      } else {
-        poll.stop();
-      }
     });
 
     eventHub.$on('refreshPipelines', this.fetchPipelines);