4 files changed, 73 insertions, 5 deletions
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 034f2923b3b..f0a9fab15e7 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';
 
-  gl.cycleAnalyticsApp = new Vue({
+  const cycleAnalyticsApp = new Vue({
     el: '#cycle-analytics',
     name: 'CycleAnalytics',
     components: {
diff --git a/app/assets/javascripts/pages/projects/pipelines/show/index.js b/app/assets/javascripts/pages/projects/pipelines/show/index.js
index fbe9824c34b..a49a71afd37 100644
--- a/app/assets/javascripts/pages/projects/pipelines/show/index.js
+++ b/app/assets/javascripts/pages/projects/pipelines/show/index.js
@@ -1,3 +1,73 @@
+
+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 initPipelines from '../init_pipelines';
 
-document.addEventListener('DOMContentLoaded', initPipelines);
+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,
+        },
+      });
+    },
+  });
+});
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index 2174154b207..ffb0ae95f9b 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -13,4 +13,3 @@
 
 - content_for :page_specific_javascripts do
   = webpack_bundle_tag('common_vue')
-  = webpack_bundle_tag('pipelines_details')
diff --git a/config/webpack.config.js b/config/webpack.config.js
index ac5ab6dd4c3..8cd36aa82ab 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -54,7 +54,6 @@ function generateEntries() {
     monitoring:           './monitoring/monitoring_bundle.js',
     notebook_viewer:      './blob/notebook_viewer.js',
     pdf_viewer:           './blob/pdf_viewer.js',
-    pipelines_details:    './pipelines/pipeline_details_bundle.js',
     project_import_gl:    './projects/project_import_gitlab_project.js',
     protected_branches:   './protected_branches',
     protected_tags:       './protected_tags',