Add error for old pipelines

Includes changes and specs

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

@@ -13,3 +13,5 @@ export const GRAPHQL = 'graphql';
 
 export const STAGE_VIEW = 'stage';
 export const LAYER_VIEW = 'layer';
+
+export const IID_FAILURE = 'missing_iid';

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

@@ -4,7 +4,7 @@ import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.qu
 import { __ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { DEFAULT, DRAW_FAILURE, LOAD_FAILURE } from '../../constants';
-import { STAGE_VIEW } from './constants';
+import { IID_FAILURE, STAGE_VIEW } from './constants';
 import PipelineGraph from './graph_component.vue';
 import GraphViewSelector from './graph_view_selector.vue';
 import {
@@ -48,6 +48,9 @@ export default {
   },
   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.'),
   },
@@ -64,6 +67,9 @@ export default {
           iid: this.pipelineIid,
         };
       },
+      skip() {
+        return !(this.pipelineProjectPath && this.pipelineIid);
+      },
       update(data) {
         /*
           This check prevents the pipeline from being overwritten
@@ -104,6 +110,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],
@@ -129,8 +140,15 @@ export default {
       */
       return this.$apollo.queries.pipeline.loading && !this.pipeline;
     },
+    showGraphViewSelector() {
+      return Boolean(this.glFeatures.pipelineGraphLayersView && this.pipeline);
+    },
   },
   mounted() {
+    if (!this.pipelineIid) {
+      this.reportFailure({ type: IID_FAILURE, skipSentry: true });
+    }
+
     toggleQueryPollingByVisibility(this.$apollo.queries.pipeline);
   },
   errorCaptured(err, _vm, info) {
@@ -165,7 +183,7 @@ export default {
       {{ alert.text }}
     </gl-alert>
     <graph-view-selector
-      v-if="glFeatures.pipelineGraphLayersView"
+      v-if="showGraphViewSelector"
       :type="currentViewType"
       @updateViewType="updateViewType"
     />

locale/gitlab.pot

@@ -30066,6 +30066,9 @@ msgstr ""
 msgid "The current user is not authorized to access the job log."
 msgstr ""
 
+msgid "The data in this pipeline is too old to be rendered as a graph. Please check the Jobs tab to access historical data."
+msgstr ""
+
 msgid "The data source is connected, but there is no data to display. %{documentationLink}"
 msgstr ""
 

spec/frontend/pipelines/graph/graph_component_wrapper_spec.js

@@ -4,6 +4,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
+import { IID_FAILURE } from '~/pipelines/components/graph/constants';
 import PipelineGraph from '~/pipelines/components/graph/graph_component.vue';
 import PipelineGraphWrapper from '~/pipelines/components/graph/graph_component_wrapper.vue';
 import GraphViewSelector from '~/pipelines/components/graph/graph_view_selector.vue';
@@ -126,6 +127,31 @@ describe('Pipeline graph wrapper', () => {
     });
   });
 
+  describe('when there is no pipeline iid available', () => {
+    beforeEach(async () => {
+      createComponentWithApollo({
+        provide: {
+          pipelineIid: '',
+        },
+      });
+      jest.runOnlyPendingTimers();
+      await wrapper.vm.$nextTick();
+    });
+
+    it('does not display the loading icon', () => {
+      expect(getLoadingIcon().exists()).toBe(false);
+    });
+
+    it('displays the no iid alert', () => {
+      expect(getAlert().exists()).toBe(true);
+      expect(getAlert().text()).toBe(wrapper.vm.$options.errorTexts[IID_FAILURE]);
+    });
+
+    it('does not display the graph', () => {
+      expect(getGraph().exists()).toBe(false);
+    });
+  });
+
   describe('when refresh action is emitted', () => {
     beforeEach(async () => {
       createComponentWithApollo();