Add latest changes from gitlab-org/gitlab@master

6 files changed, 52 insertions, 11 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 2f050302db5..67b2ed3b596 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -69,9 +69,6 @@ export default {
     },
   },
   methods: {
-    handleError(errorType) {
-      this.$emit('error', errorType);
-    },
     setJob(jobName) {
       this.hoveredJobName = jobName;
     },
@@ -97,7 +94,7 @@ export default {
             :linked-pipelines="upstreamPipelines"
             :column-title="__('Upstream')"
             :type="$options.pipelineTypeConstants.UPSTREAM"
-            @error="handleError"
+            @error="emit('error', errorType)"
           />
         </template>
         <template #main>
@@ -109,6 +106,7 @@ export default {
             :action="stage.status.action"
             :job-hovered="hoveredJobName"
             :pipeline-expanded="pipelineExpanded"
+            @refreshPipelineGraph="$emit('refreshPipelineGraph')"
           />
         </template>
         <template #downstream>
@@ -119,7 +117,7 @@ export default {
             :type="$options.pipelineTypeConstants.DOWNSTREAM"
             @downstreamHovered="setJob"
             @pipelineExpandToggle="togglePipelineExpanded"
-            @error="handleError"
+            @error="emit('error', errorType)"
           />
         </template>
       </linked-graph-wrapper>
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
index cb2f4d0d623..d98e3aad054 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
@@ -4,7 +4,7 @@ import { __ } from '~/locale';
 import { DEFAULT, LOAD_FAILURE } from '../../constants';
 import getPipelineDetails from '../../graphql/queries/get_pipeline_details.query.graphql';
 import PipelineGraph from './graph_component.vue';
-import { unwrapPipelineData } from './utils';
+import { unwrapPipelineData, toggleQueryPollingByVisibility } from './utils';
 
 export default {
   name: 'PipelineGraphWrapper',
@@ -35,6 +35,7 @@ export default {
   apollo: {
     pipeline: {
       query: getPipelineDetails,
+      pollInterval: 10000,
       variables() {
         return {
           projectPath: this.pipelineProjectPath,
@@ -64,11 +65,24 @@ export default {
           };
       }
     },
+    showLoadingIcon() {
+      /*
+        Shows the icon only when the graph is empty, not when it is is
+        being refetched, for instance, on action completion
+      */
+      return this.$apollo.queries.pipeline.loading && !this.pipeline;
+    },
+  },
+  mounted() {
+    toggleQueryPollingByVisibility(this.$apollo.queries.pipeline);
   },
   methods: {
     hideAlert() {
       this.showAlert = false;
     },
+    refreshPipelineGraph() {
+      this.$apollo.queries.pipeline.refetch();
+    },
     reportFailure(type) {
       this.showAlert = true;
       this.failureType = type;
@@ -81,7 +95,12 @@ export default {
     <gl-alert v-if="showAlert" :variant="alert.variant" @dismiss="hideAlert">
       {{ alert.text }}
     </gl-alert>
-    <gl-loading-icon v-if="$apollo.queries.pipeline.loading" class="gl-mx-auto gl-my-4" size="lg" />
-    <pipeline-graph v-if="pipeline" :pipeline="pipeline" @error="reportFailure" />
+    <gl-loading-icon v-if="showLoadingIcon" class="gl-mx-auto gl-my-4" size="lg" />
+    <pipeline-graph
+      v-if="pipeline"
+      :pipeline="pipeline"
+      @error="reportFailure"
+      @refreshPipelineGraph="refreshPipelineGraph"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
index 58757a88102..7d333087874 100644
--- a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
+++ b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
@@ -3,7 +3,7 @@ import getPipelineDetails from '../../graphql/queries/get_pipeline_details.query
 import LinkedPipeline from './linked_pipeline.vue';
 import { LOAD_FAILURE } from '../../constants';
 import { UPSTREAM } from './constants';
-import { unwrapPipelineData } from './utils';
+import { unwrapPipelineData, toggleQueryPollingByVisibility } from './utils';
 
 export default {
   components: {
@@ -67,6 +67,7 @@ export default {
 
       this.$apollo.addSmartQuery('currentPipeline', {
         query: getPipelineDetails,
+        pollInterval: 10000,
         variables() {
           return {
             projectPath,
@@ -83,6 +84,8 @@ export default {
           this.$emit('error', LOAD_FAILURE);
         },
       });
+
+      toggleQueryPollingByVisibility(this.$apollo.queries.currentPipeline);
     },
     isExpanded(id) {
       return Boolean(this.currentPipeline?.id && id === this.currentPipeline.id);
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
index 830ad219574..b9bddc94ce4 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -79,6 +79,7 @@ export default {
           :tooltip-text="action.title"
           :link="action.path"
           class="js-stage-action stage-action rounded"
+          @pipelineActionRequestComplete="$emit('refreshPipelineGraph')"
         />
       </div>
     </template>
@@ -96,6 +97,7 @@ export default {
           :job-hovered="jobHovered"
           :pipeline-expanded="pipelineExpanded"
           css-class-job-name="gl-build-content"
+          @pipelineActionRequestComplete="$emit('refreshPipelineGraph')"
         />
         <job-group-dropdown v-else :group="group" />
       </div>
diff --git a/app/assets/javascripts/pipelines/components/graph/utils.js b/app/assets/javascripts/pipelines/components/graph/utils.js
index 7bf44b160ef..32588feb426 100644
--- a/app/assets/javascripts/pipelines/components/graph/utils.js
+++ b/app/assets/javascripts/pipelines/components/graph/utils.js
@@ -1,3 +1,4 @@
+import Visibility from 'visibilityjs';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { unwrapStagesWithNeeds } from '../unwrapping_utils';
 
@@ -40,4 +41,17 @@ const unwrapPipelineData = (mainPipelineProjectPath, data) => {
   };
 };
 
-export { unwrapPipelineData };
+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 };
diff --git a/app/assets/javascripts/pipelines/pipeline_details_graph.js b/app/assets/javascripts/pipelines/pipeline_details_graph.js
index b6ebd271802..1b296c305cb 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_graph.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_graph.js
@@ -7,7 +7,12 @@ import { GRAPHQL } from './components/graph/constants';
 Vue.use(VueApollo);
 
 const apolloProvider = new VueApollo({
-  defaultClient: createDefaultClient(),
+  defaultClient: createDefaultClient(
+    {},
+    {
+      batchMax: 2,
+    },
+  ),
 });
 
 const createPipelinesDetailApp = (selector, pipelineProjectPath, pipelineIid) => {