diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2019-01-11 13:12:48 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2019-01-11 17:28:16 +0000 |
commit | 62707971d585d011f28a47e5e32f19f5c903a665 (patch) | |
tree | dd1703780c766230a7b2275a03457c4942fd06da /app/assets/javascripts/pipelines/components/graph | |
parent | 0f71b4bcb3870710ae821ea111894fc7d95f2a1c (diff) | |
download | gitlab-ce-62707971d585d011f28a47e5e32f19f5c903a665.tar.gz |
Moves shared code into a mixin
To reduce code duplication between CE and EE components,
creates a mixin with the common methods for the
graph component
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph')
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/graph_component.vue | 45 |
1 files changed, 3 insertions, 42 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue index 59cebaba717..a49dc311bd0 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -1,59 +1,20 @@ <script> -import _ from 'underscore'; import { GlLoadingIcon } from '@gitlab/ui'; import StageColumnComponent from './stage_column_component.vue'; +import GraphMixin from '../../mixins/graph_component_mixin'; export default { components: { StageColumnComponent, GlLoadingIcon, }, - props: { - isLoading: { - type: Boolean, - required: true, - }, - pipeline: { - type: Object, - required: true, - }, - }, - computed: { - graph() { - return this.pipeline.details && this.pipeline.details.stages; - }, - }, - methods: { - capitalizeStageName(name) { - const escapedName = _.escape(name); - return escapedName.charAt(0).toUpperCase() + escapedName.slice(1); - }, - isFirstColumn(index) { - return index === 0; - }, - stageConnectorClass(index, stage) { - let className; - - // If it's the first stage column and only has one job - if (index === 0 && stage.groups.length === 1) { - className = 'no-margin'; - } else if (index > 0) { - // If it is not the first column - className = 'left-margin'; - } - - return className; - }, - refreshPipelineGraph() { - this.$emit('refreshPipelineGraph'); - }, - }, + mixins: [GraphMixin], }; </script> <template> <div class="build-content middle-block js-pipeline-graph"> <div class="pipeline-visualization pipeline-graph pipeline-tab-content"> - <div class="text-center"><gl-loading-icon v-if="isLoading" :size="3" /></div> + <div v-if="isLoading" class="m-auto"><gl-loading-icon :size="3" /></div> <ul v-if="!isLoading" class="stage-column-list"> <stage-column-component |