1 files changed, 54 insertions, 2 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 962f2ca2a4c..0bc6d883245 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
@@ -2,11 +2,16 @@
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import { __ } from '~/locale';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { DEFAULT, DRAW_FAILURE, LOAD_FAILURE } from '../../constants';
+import { reportToSentry } from '../../utils';
+import { listByLayers } from '../parsing_utils';
+import { IID_FAILURE, LAYER_VIEW, STAGE_VIEW, VIEW_TYPE_KEY } from './constants';
 import PipelineGraph from './graph_component.vue';
+import GraphViewSelector from './graph_view_selector.vue';
 import {
   getQueryHeaders,
-  reportToSentry,
   serializeLoadErrors,
   toggleQueryPollingByVisibility,
   unwrapPipelineData,
@@ -17,8 +22,11 @@ export default {
   components: {
     GlAlert,
     GlLoadingIcon,
+    GraphViewSelector,
+    LocalStorageSync,
     PipelineGraph,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: {
     graphqlResourceEtag: {
       default: '',
@@ -35,13 +43,18 @@ export default {
   },
   data() {
     return {
-      pipeline: null,
       alertType: null,
+      currentViewType: STAGE_VIEW,
+      pipeline: null,
+      pipelineLayers: null,
       showAlert: false,
     };
   },
   errorTexts: {
     [DRAW_FAILURE]: __('An error occurred while drawing job relationship links.'),
+    [IID_FAILURE]: __(
+      'The data in this pipeline is too old to be rendered as a graph. Please check the Jobs tab to access historical data.',
+    ),
     [LOAD_FAILURE]: __('We are currently unable to fetch data for this pipeline.'),
     [DEFAULT]: __('An unknown error occurred while loading this graph.'),
   },
@@ -58,6 +71,9 @@ export default {
           iid: this.pipelineIid,
         };
       },
+      skip() {
+        return !(this.pipelineProjectPath && this.pipelineIid);
+      },
       update(data) {
         /*
           This check prevents the pipeline from being overwritten
@@ -98,6 +114,11 @@ export default {
             text: this.$options.errorTexts[DRAW_FAILURE],
             variant: 'danger',
           };
+        case IID_FAILURE:
+          return {
+            text: this.$options.errorTexts[IID_FAILURE],
+            variant: 'info',
+          };
         case LOAD_FAILURE:
           return {
             text: this.$options.errorTexts[LOAD_FAILURE],
@@ -123,14 +144,28 @@ export default {
       */
       return this.$apollo.queries.pipeline.loading && !this.pipeline;
     },
+    showGraphViewSelector() {
+      return Boolean(this.glFeatures.pipelineGraphLayersView && this.pipeline?.usesNeeds);
+    },
   },
   mounted() {
+    if (!this.pipelineIid) {
+      this.reportFailure({ type: IID_FAILURE, skipSentry: true });
+    }
+
     toggleQueryPollingByVisibility(this.$apollo.queries.pipeline);
   },
   errorCaptured(err, _vm, info) {
     reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
   },
   methods: {
+    getPipelineLayers() {
+      if (this.currentViewType === LAYER_VIEW && !this.pipelineLayers) {
+        this.pipelineLayers = listByLayers(this.pipeline);
+      }
+
+      return this.pipelineLayers;
+    },
     hideAlert() {
       this.showAlert = false;
       this.alertType = null;
@@ -147,7 +182,11 @@ export default {
       }
     },
     /* eslint-enable @gitlab/require-i18n-strings */
+    updateViewType(type) {
+      this.currentViewType = type;
+    },
   },
+  viewTypeKey: VIEW_TYPE_KEY,
 };
 </script>
 <template>
@@ -155,11 +194,24 @@ export default {
     <gl-alert v-if="showAlert" :variant="alert.variant" @dismiss="hideAlert">
       {{ alert.text }}
     </gl-alert>
+    <local-storage-sync
+      :storage-key="$options.viewTypeKey"
+      :value="currentViewType"
+      @input="updateViewType"
+    >
+      <graph-view-selector
+        v-if="showGraphViewSelector"
+        :type="currentViewType"
+        @updateViewType="updateViewType"
+      />
+    </local-storage-sync>
     <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"
+      :pipeline-layers="getPipelineLayers()"
+      :view-type="currentViewType"
       @error="reportFailure"
       @refreshPipelineGraph="refreshPipelineGraph"
     />