Add paths, utils for polling

Involves all files invoking the graph

app/assets/javascripts/pipelines/components/graph/graph_component.vue

@@ -15,6 +15,13 @@ export default {
     StageColumnComponent,
   },
   props: {
+    configPaths: {
+      type: Object,
+      required: true,
+      validator: function(value) {
+        return Object.keys(value).includes('graphqlResourceEtag');
+      }
+    },
     pipeline: {
       type: Object,
       required: true,
@@ -24,11 +31,6 @@ export default {
       required: false,
       default: false,
     },
-    metricsPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
     type: {
       type: String,
       required: false,
@@ -73,7 +75,7 @@ export default {
     },
     metricsConfig() {
       return {
-        path: this.metricsPath,
+        path: this.configPaths.metricsPath,
         collectMetrics: true,
       };
     },
@@ -142,6 +144,7 @@ export default {
         <template #upstream>
           <linked-pipelines-column
             v-if="showUpstreamPipelines"
+            :config-paths="configPaths"
             :linked-pipelines="upstreamPipelines"
             :column-title="__('Upstream')"
             :type="$options.pipelineTypeConstants.UPSTREAM"
@@ -182,6 +185,7 @@ export default {
           <linked-pipelines-column
             v-if="showDownstreamPipelines"
             class="gl-mr-6"
+            :config-paths="configPaths"
             :linked-pipelines="downstreamPipelines"
             :column-title="__('Downstream')"
             :type="$options.pipelineTypeConstants.DOWNSTREAM"

app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue

@@ -4,7 +4,12 @@ import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.qu
 import { __ } from '~/locale';
 import { DEFAULT, DRAW_FAILURE, LOAD_FAILURE } from '../../constants';
 import PipelineGraph from './graph_component.vue';
-import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils';
+import {
+  getQueryHeaders,
+  reportToSentry,
+  toggleQueryPollingByVisibility,
+  unwrapPipelineData
+} from './utils';
 
 export default {
   name: 'PipelineGraphWrapper',
@@ -14,6 +19,9 @@ export default {
     PipelineGraph,
   },
   inject: {
+    graphqlResourceEtag: {
+      default: '',
+    },
     metricsPath: {
       default: '',
     },
@@ -23,9 +31,6 @@ export default {
     pipelineProjectPath: {
       default: '',
     },
-    graphqlResourceEtag: {
-      default: '',
-    },
   },
   data() {
     return {
@@ -42,16 +47,7 @@ export default {
   apollo: {
     pipeline: {
       context() {
-        return {
-          fetchOptions: {
-            method: 'GET',
-          },
-          headers: {
-            'X-GITLAB-GRAPHQL-FEATURE-CORRELATION': 'verify/ci/pipeline-graph',
-            'X-GITLAB-GRAPHQL-RESOURCE-ETAG': this.graphqlResourceEtag,
-            'X-REQUESTED_WITH': 'XMLHttpRequest',
-          },
-        };
+        return getQueryHeaders(this.graphqlResourceEtag);
       },
       query: getPipelineDetails,
       pollInterval: 10000,
@@ -89,6 +85,12 @@ export default {
           };
       }
     },
+    configPaths(){
+      return {
+        graphqlResourceEtag: this.graphqlResourceEtag,
+        metricsPath: this.metricsPath,
+      };
+    },
     showLoadingIcon() {
       /*
         Shows the icon only when the graph is empty, not when it is is
@@ -126,7 +128,7 @@ export default {
     <gl-loading-icon v-if="showLoadingIcon" class="gl-mx-auto gl-my-4" size="lg" />
     <pipeline-graph
       v-if="pipeline"
-      :metrics-path="metricsPath"
+      :config-paths="configPaths"
       :pipeline="pipeline"
       @error="reportFailure"
       @refreshPipelineGraph="refreshPipelineGraph"

app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue

@@ -3,7 +3,12 @@ import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.qu
 import { LOAD_FAILURE } from '../../constants';
 import { ONE_COL_WIDTH, UPSTREAM } from './constants';
 import LinkedPipeline from './linked_pipeline.vue';
-import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils';
+import {
+  getQueryHeaders,
+  reportToSentry,
+  toggleQueryPollingByVisibility,
+  unwrapPipelineData
+} from './utils';
 
 export default {
   components: {
@@ -15,6 +20,13 @@ export default {
       type: String,
       required: true,
     },
+    configPaths: {
+      type: Object,
+      required: true,
+      validator: function(value) {
+        return Object.keys(value).includes('graphqlResourceEtag');
+      }
+    },
     linkedPipelines: {
       type: Array,
       required: true,
@@ -73,16 +85,7 @@ export default {
         query: getPipelineDetails,
         pollInterval: 10000,
         context() {
-          return {
-            fetchOptions: {
-              method: 'GET',
-            },
-            headers: {
-              'X-GITLAB-GRAPHQL-FEATURE-CORRELATION': 'verify/ci/pipeline-graph',
-              'X-GITLAB-GRAPHQL-RESOURCE-ETAG': this.graphqlResourceEtag,
-              'X-REQUESTED_WITH': 'XMLHttpRequest',
-            },
-          }
+          return getQueryHeaders(this.configPaths.graphqlResourceEtag);
         },
         variables() {
           return {
@@ -187,6 +190,7 @@ export default {
               v-if="isExpanded(pipeline.id)"
               :type="type"
               class="d-inline-block gl-mt-n2"
+              :config-paths="configPaths"
               :pipeline="currentPipeline"
               :is-linked-pipeline="true"
             />

app/assets/javascripts/pipelines/components/graph/utils.js

@@ -10,6 +10,39 @@ const addMulti = (mainPipelineProjectPath, linkedPipeline) => {
   };
 };
 
+const getQueryHeaders = (etagResource) => {
+  return {
+    fetchOptions: {
+      method: 'GET',
+    },
+    headers: {
+      'X-GITLAB-GRAPHQL-FEATURE-CORRELATION': 'verify/ci/pipeline-graph',
+      'X-GITLAB-GRAPHQL-RESOURCE-ETAG': etagResource,
+      'X-REQUESTED_WITH': 'XMLHttpRequest',
+    },
+  };
+};
+
+const reportToSentry = (component, failureType) => {
+  Sentry.withScope((scope) => {
+    scope.setTag('component', component);
+    Sentry.captureException(failureType);
+  });
+};
+
+const toggleQueryPollingByVisibility = (queryRef, interval = 10000) => {
+  const stopStartQuery = (query) => {
+    if (!Visibility.hidden()) {
+      query.startPolling(interval);
+    } else {
+      query.stopPolling();
+    }
+  };
+
+  stopStartQuery(queryRef);
+  Visibility.change(stopStartQuery.bind(null, queryRef));
+};
+
 const transformId = (linkedPipeline) => {
   return { ...linkedPipeline, id: getIdFromGraphQLId(linkedPipeline.id) };
 };
@@ -42,24 +75,4 @@ const unwrapPipelineData = (mainPipelineProjectPath, data) => {
   };
 };
 
-const toggleQueryPollingByVisibility = (queryRef, interval = 10000) => {
-  const stopStartQuery = (query) => {
-    if (!Visibility.hidden()) {
-      query.startPolling(interval);
-    } else {
-      query.stopPolling();
-    }
-  };
-
-  stopStartQuery(queryRef);
-  Visibility.change(stopStartQuery.bind(null, queryRef));
-};
-
-export { unwrapPipelineData, toggleQueryPollingByVisibility };
-
-export const reportToSentry = (component, failureType) => {
-  Sentry.withScope((scope) => {
-    scope.setTag('component', component);
-    Sentry.captureException(failureType);
-  });
-};
+export { getQueryHeaders, reportToSentry, toggleQueryPollingByVisibility, unwrapPipelineData };