From e658ca9665e70c07772fc927a88938895a7fb453 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Tue, 27 Feb 2018 16:17:19 -0600 Subject: [PATCH] Add initPipelineDetails to pipelines build path --- .../cycle_analytics/cycle_analytics_bundle.js | 4 +- .../pages/projects/pipelines/builds/index.js | 6 +- .../pages/projects/pipelines/show/index.js | 70 +---------- .../pipelines/pipeline_details_bundle.js | 114 +++++++++--------- 4 files changed, 69 insertions(+), 125 deletions(-) diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js index f0a9fab15e7..034f2923b3b 100644 --- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js +++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js @@ -14,10 +14,10 @@ import CycleAnalyticsStore from './cycle_analytics_store'; Vue.use(Translate); -document.addEventListener('DOMContentLoaded', () => { +$(() => { const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed'; - const cycleAnalyticsApp = new Vue({ + gl.cycleAnalyticsApp = new Vue({ el: '#cycle-analytics', name: 'CycleAnalytics', components: { diff --git a/app/assets/javascripts/pages/projects/pipelines/builds/index.js b/app/assets/javascripts/pages/projects/pipelines/builds/index.js index fbe9824c34b..7a57e417b41 100644 --- a/app/assets/javascripts/pages/projects/pipelines/builds/index.js +++ b/app/assets/javascripts/pages/projects/pipelines/builds/index.js @@ -1,3 +1,7 @@ +import initPipelineDetails from '~/pipelines/pipeline_details_bundle'; import initPipelines from '../init_pipelines'; -document.addEventListener('DOMContentLoaded', initPipelines); +document.addEventListener('DOMContentLoaded', () => { + initPipelines(); + initPipelineDetails(); +}); diff --git a/app/assets/javascripts/pages/projects/pipelines/show/index.js b/app/assets/javascripts/pages/projects/pipelines/show/index.js index a49a71afd37..7a57e417b41 100644 --- a/app/assets/javascripts/pages/projects/pipelines/show/index.js +++ b/app/assets/javascripts/pages/projects/pipelines/show/index.js @@ -1,73 +1,7 @@ - -import Vue from 'vue'; -import { __ } from '~/locale'; -import Flash from '~/flash'; -import PipelinesMediator from '~/pipelines/pipeline_details_mediator'; -import pipelineGraph from '~/pipelines/components/graph/graph_component.vue'; -import pipelineHeader from '~/pipelines/components/header_component.vue'; -import eventHub from '~/pipelines/event_hub'; +import initPipelineDetails from '~/pipelines/pipeline_details_bundle'; import initPipelines from '../init_pipelines'; document.addEventListener('DOMContentLoaded', () => { - const dataset = document.querySelector('.js-pipeline-details-vue').dataset; - - const mediator = new PipelinesMediator({ endpoint: dataset.endpoint }); - - mediator.fetchPipeline(); initPipelines(); - - // eslint-disable-next-line - new Vue({ - el: '#js-pipeline-graph-vue', - components: { - pipelineGraph, - }, - data() { - return { - mediator, - }; - }, - render(createElement) { - return createElement('pipeline-graph', { - props: { - isLoading: this.mediator.state.isLoading, - pipeline: this.mediator.store.state.pipeline, - }, - }); - }, - }); - - // eslint-disable-next-line - new Vue({ - el: '#js-pipeline-header-vue', - components: { - pipelineHeader, - }, - data() { - return { - mediator, - }; - }, - created() { - eventHub.$on('headerPostAction', this.postAction); - }, - beforeDestroy() { - eventHub.$off('headerPostAction', this.postAction); - }, - methods: { - postAction(action) { - this.mediator.service.postAction(action.path) - .then(() => this.mediator.refreshPipeline()) - .catch(() => new Flash(__('An error occurred while making the request.'))); - }, - }, - render(createElement) { - return createElement('pipeline-header', { - props: { - isLoading: this.mediator.state.isLoading, - pipeline: this.mediator.store.state.pipeline, - }, - }); - }, - }); + initPipelineDetails(); }); diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js index 705a60b3ba2..1119a65e5be 100644 --- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js +++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js @@ -9,65 +9,71 @@ import eventHub from './event_hub'; Vue.use(Translate); -document.addEventListener('DOMContentLoaded', () => { +export default () => { const dataset = document.querySelector('.js-pipeline-details-vue').dataset; const mediator = new PipelinesMediator({ endpoint: dataset.endpoint }); mediator.fetchPipeline(); - // eslint-disable-next-line - new Vue({ - el: '#js-pipeline-graph-vue', - components: { - pipelineGraph, - }, - data() { - return { - mediator, - }; - }, - render(createElement) { - return createElement('pipeline-graph', { - props: { - isLoading: this.mediator.state.isLoading, - pipeline: this.mediator.store.state.pipeline, - }, - }); - }, - }); - - // eslint-disable-next-line - new Vue({ - el: '#js-pipeline-header-vue', - components: { - pipelineHeader, - }, - data() { - return { - mediator, - }; - }, - created() { - eventHub.$on('headerPostAction', this.postAction); - }, - beforeDestroy() { - eventHub.$off('headerPostAction', this.postAction); - }, - methods: { - postAction(action) { - this.mediator.service.postAction(action.path) - .then(() => this.mediator.refreshPipeline()) - .catch(() => Flash(__('An error occurred while making the request.'))); + const pipelineGraphEl = document.querySelector('#js-pipeline-graph-vue'); + if (pipelineGraphEl) { + // eslint-disable-next-line + new Vue({ + el: pipelineGraphEl, + components: { + pipelineGraph, }, - }, - render(createElement) { - return createElement('pipeline-header', { - props: { - isLoading: this.mediator.state.isLoading, - pipeline: this.mediator.store.state.pipeline, + data() { + return { + mediator, + }; + }, + render(createElement) { + return createElement('pipeline-graph', { + props: { + isLoading: this.mediator.state.isLoading, + pipeline: this.mediator.store.state.pipeline, + }, + }); + }, + }); + } + + const pipelineHeaderEl = document.querySelector('#js-pipeline-header-vue'); + if (pipelineHeaderEl) { + // eslint-disable-next-line + new Vue({ + el: pipelineHeaderEl, + components: { + pipelineHeader, + }, + data() { + return { + mediator, + }; + }, + created() { + eventHub.$on('headerPostAction', this.postAction); + }, + beforeDestroy() { + eventHub.$off('headerPostAction', this.postAction); + }, + methods: { + postAction(action) { + this.mediator.service.postAction(action.path) + .then(() => this.mediator.refreshPipeline()) + .catch(() => Flash(__('An error occurred while making the request.'))); }, - }); - }, - }); -}); + }, + render(createElement) { + return createElement('pipeline-header', { + props: { + isLoading: this.mediator.state.isLoading, + pipeline: this.mediator.store.state.pipeline, + }, + }); + }, + }); + } +};