diff options
Diffstat (limited to 'app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue')
-rw-r--r-- | app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue | 17 |
1 files changed, 15 insertions, 2 deletions
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue index 372f04075ab..bb79a4d74da 100644 --- a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue +++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue @@ -9,7 +9,9 @@ import { getQueryHeaders, toggleQueryPollingByVisibility, } from '~/pipelines/components/graph/utils'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; +import GraphqlPipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/graphql_pipeline_mini_graph.vue'; import PipelineEditorMiniGraph from './pipeline_editor_mini_graph.vue'; const POLL_INTERVAL = 10000; @@ -32,11 +34,13 @@ export default { GlLink, GlLoadingIcon, GlSprintf, + GraphqlPipelineMiniGraph, PipelineEditorMiniGraph, }, directives: { GlTooltip: GlTooltipDirective, }, + mixins: [glFeatureFlagsMixin()], inject: ['projectFullPath'], props: { commitSha: { @@ -106,6 +110,9 @@ export default { hasPipelineData() { return Boolean(this.pipeline?.id); }, + isUsingPipelineMiniGraphQueries() { + return this.glFeatures.ciGraphqlPipelineMiniGraph; + }, pipelineId() { return getIdFromGraphQLId(this.pipeline.id); }, @@ -171,8 +178,14 @@ export default { </gl-sprintf> </span> </div> - <div class="gl-display-flex gl-flex-wrap"> - <pipeline-editor-mini-graph :pipeline="pipeline" v-on="$listeners" /> + <div class="gl-display-flex gl-flex-wrap-wrap"> + <graphql-pipeline-mini-graph + v-if="isUsingPipelineMiniGraphQueries" + :full-path="projectFullPath" + :iid="pipeline.iid" + :pipeline-etag="pipelineEtag" + /> + <pipeline-editor-mini-graph v-else :pipeline="pipeline" v-on="$listeners" /> <gl-button class="gl-ml-3" category="secondary" |