1 files changed, 64 insertions, 7 deletions

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 f596333237d..962f2ca2a4c 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
@@ -2,9 +2,15 @@
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import { __ } from '~/locale';
-import { DEFAULT, LOAD_FAILURE } from '../../constants';
+import { DEFAULT, DRAW_FAILURE, LOAD_FAILURE } from '../../constants';
 import PipelineGraph from './graph_component.vue';
-import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils';
+import {
+  getQueryHeaders,
+  reportToSentry,
+  serializeLoadErrors,
+  toggleQueryPollingByVisibility,
+  unwrapPipelineData,
+} from './utils';
 
 export default {
   name: 'PipelineGraphWrapper',
@@ -14,6 +20,12 @@ export default {
     PipelineGraph,
   },
   inject: {
+    graphqlResourceEtag: {
+      default: '',
+    },
+    metricsPath: {
+      default: '',
+    },
     pipelineIid: {
       default: '',
     },
@@ -29,11 +41,15 @@ export default {
     };
   },
   errorTexts: {
+    [DRAW_FAILURE]: __('An error occurred while drawing job relationship links.'),
     [LOAD_FAILURE]: __('We are currently unable to fetch data for this pipeline.'),
     [DEFAULT]: __('An unknown error occurred while loading this graph.'),
   },
   apollo: {
     pipeline: {
+      context() {
+        return getQueryHeaders(this.graphqlResourceEtag);
+      },
       query: getPipelineDetails,
       pollInterval: 10000,
       variables() {
@@ -43,16 +59,45 @@ export default {
         };
       },
       update(data) {
+        /*
+          This check prevents the pipeline from being overwritten
+          when a poll times out and the data returned is empty.
+          This can be removed once the timeout behavior is updated.
+          See: https://gitlab.com/gitlab-org/gitlab/-/issues/323213.
+        */
+
+        if (!data?.project?.pipeline) {
+          return this.pipeline;
+        }
+
         return unwrapPipelineData(this.pipelineProjectPath, data);
       },
-      error() {
-        this.reportFailure(LOAD_FAILURE);
+      error(err) {
+        this.reportFailure({ type: LOAD_FAILURE, skipSentry: true });
+        reportToSentry(
+          this.$options.name,
+          `type: ${LOAD_FAILURE}, info: ${serializeLoadErrors(err)}`,
+        );
+      },
+      result({ error }) {
+        /*
+          If there is a successful load after a failure, clear
+          the failure notification to avoid confusion.
+        */
+        if (!error && this.alertType === LOAD_FAILURE) {
+          this.hideAlert();
+        }
       },
     },
   },
   computed: {
     alert() {
       switch (this.alertType) {
+        case DRAW_FAILURE:
+          return {
+            text: this.$options.errorTexts[DRAW_FAILURE],
+            variant: 'danger',
+          };
         case LOAD_FAILURE:
           return {
             text: this.$options.errorTexts[LOAD_FAILURE],
@@ -65,6 +110,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
@@ -82,15 +133,20 @@ export default {
   methods: {
     hideAlert() {
       this.showAlert = false;
+      this.alertType = null;
     },
     refreshPipelineGraph() {
       this.$apollo.queries.pipeline.refetch();
     },
-    reportFailure(type) {
+    /* eslint-disable @gitlab/require-i18n-strings */
+    reportFailure({ type, err = 'No error string passed.', skipSentry = false }) {
       this.showAlert = true;
-      this.failureType = type;
-      reportToSentry(this.$options.name, this.failureType);
+      this.alertType = type;
+      if (!skipSentry) {
+        reportToSentry(this.$options.name, `type: ${type}, info: ${err}`);
+      }
     },
+    /* eslint-enable @gitlab/require-i18n-strings */
   },
 };
 </script>
@@ -102,6 +158,7 @@ export default {
     <gl-loading-icon v-if="showLoadingIcon" class="gl-mx-auto gl-my-4" size="lg" />
     <pipeline-graph
       v-if="pipeline"
+      :config-paths="configPaths"
       :pipeline="pipeline"
       @error="reportFailure"
       @refreshPipelineGraph="refreshPipelineGraph"