diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue | 56 |
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" /> |