diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph/graph_component.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/graph_component.vue | 68 |
1 files changed, 16 insertions, 52 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue index 14c98847d93..77cbaeb43ef 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -1,68 +1,32 @@ <script> - /* global Flash */ - import Visibility from 'visibilityjs'; - import Poll from '../../../lib/utils/poll'; - import PipelineService from '../../services/pipeline_service'; - import PipelineStore from '../../stores/pipeline_store'; import stageColumnComponent from './stage_column_component.vue'; import loadingIcon from '../../../vue_shared/components/loading_icon.vue'; import '../../../flash'; export default { + props: { + isLoading: { + type: Boolean, + required: true, + }, + pipeline: { + type: Object, + required: true, + }, + }, + components: { stageColumnComponent, loadingIcon, }, - data() { - const DOMdata = document.getElementById('js-pipeline-graph-vue').dataset; - const store = new PipelineStore(); - - return { - isLoading: false, - endpoint: DOMdata.endpoint, - store, - state: store.state, - }; - }, - - created() { - this.service = new PipelineService(this.endpoint); - - const poll = new Poll({ - resource: this.service, - method: 'getPipeline', - successCallback: this.successCallback, - errorCallback: this.errorCallback, - }); - - if (!Visibility.hidden()) { - this.isLoading = true; - poll.makeRequest(); - } - - Visibility.change(() => { - if (!Visibility.hidden()) { - poll.restart(); - } else { - poll.stop(); - } - }); + computed: { + graph() { + return this.pipeline.details && this.pipeline.details.stages; + }, }, methods: { - successCallback(response) { - const data = response.json(); - - this.isLoading = false; - this.store.storeGraph(data.details.stages); - }, - - errorCallback() { - this.isLoading = false; - return new Flash('An error occurred while fetching the pipeline.'); - }, - capitalizeStageName(name) { return name.charAt(0).toUpperCase() + name.slice(1); }, @@ -101,7 +65,7 @@ v-if="!isLoading" class="stage-column-list"> <stage-column-component - v-for="(stage, index) in state.graph" + v-for="(stage, index) in graph" :title="capitalizeStageName(stage.name)" :jobs="stage.groups" :key="stage.name" |