Use webpack

app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6

 /* eslint-disable no-new, no-param-reassign */
 /* global Vue, CommitsPipelineStore, PipelinesService, Flash */
 
-//= require vue
-//= require_tree .
-
+window.Vue = require('vue');
+require('./pipelines_store');
+require('./pipelines_service');
+require('./pipelines_table');
 /**
  * Commits View > Pipelines Tab > Pipelines Table.
  * Merge Request View > Pipelines Tab > Pipelines Table.

app/assets/javascripts/commit/pipelines/pipelines_service.js.es6

@@ -8,18 +8,8 @@
  * Uses Vue.Resource
  */
 class PipelinesService {
-  constructor(root) {
-    Vue.http.options.root = root;
-
-    this.pipelines = Vue.resource(root);
-
-    Vue.http.interceptors.push((request, next) => {
-      // needed in order to not break the tests.
-      if ($.rails) {
-        request.headers['X-CSRF-Token'] = $.rails.csrfToken();
-      }
-      next();
-    });
+  constructor(endpoint) {
+    this.pipelines = Vue.resource(endpoint);
   }
 
   /**
@@ -28,7 +18,7 @@ class PipelinesService {
    *
    * @return {Promise}
    */
-  all() {
+  get() {
     return this.pipelines.get();
   }
 }

app/assets/javascripts/commit/pipelines/pipelines_store.js.es6

@@ -5,50 +5,43 @@
  * Used to store the Pipelines rendered in the commit view in the pipelines table.
  */
 
-(() => {
-  window.gl = window.gl || {};
-  gl.commits = gl.commits || {};
-  gl.commits.pipelines = gl.commits.pipelines || {};
-
-  gl.commits.pipelines.PipelinesStore = {
-    state: {},
-
-    create() {
-      this.state.pipelines = [];
-
-      return this;
-    },
-
-    store(pipelines = []) {
-      this.state.pipelines = pipelines;
-
-      return pipelines;
-    },
-
-    /**
-     * Once the data is received we will start the time ago loops.
-     *
-     * Everytime a request is made like retry or cancel a pipeline, every 10 seconds we
-     * update the time to show how long as passed.
-     *
-     */
-    startTimeAgoLoops() {
-      const startTimeLoops = () => {
-        this.timeLoopInterval = setInterval(() => {
-          this.$children[0].$children.reduce((acc, component) => {
-            const timeAgoComponent = component.$children.filter(el => el.$options._componentTag === 'time-ago')[0];
-            acc.push(timeAgoComponent);
-            return acc;
-          }, []).forEach(e => e.changeTime());
-        }, 10000);
-      };
-
-      startTimeLoops();
-
-      const removeIntervals = () => clearInterval(this.timeLoopInterval);
-      const startIntervals = () => startTimeLoops();
-
-      gl.VueRealtimeListener(removeIntervals, startIntervals);
-    },
-  };
-})();
+class PipelinesStore {
+  constructor() {
+    this.state = {};
+    this.state.pipelines = [];
+  }
+
+  storePipelines(pipelines = []) {
+    this.state.pipelines = pipelines;
+
+    return pipelines;
+  }
+
+  /**
+   * Once the data is received we will start the time ago loops.
+   *
+   * Everytime a request is made like retry or cancel a pipeline, every 10 seconds we
+   * update the time to show how long as passed.
+   *
+   */
+  startTimeAgoLoops() {
+    const startTimeLoops = () => {
+      this.timeLoopInterval = setInterval(() => {
+        this.$children[0].$children.reduce((acc, component) => {
+          const timeAgoComponent = component.$children.filter(el => el.$options._componentTag === 'time-ago')[0];
+          acc.push(timeAgoComponent);
+          return acc;
+        }, []).forEach(e => e.changeTime());
+      }, 10000);
+    };
+
+    startTimeLoops();
+
+    const removeIntervals = () => clearInterval(this.timeLoopInterval);
+    const startIntervals = () => startTimeLoops();
+
+    gl.VueRealtimeListener(removeIntervals, startIntervals);
+  }
+}
+
+return PipelinesStore;

app/assets/javascripts/commit/pipelines/pipelines_table.js.es6

 /* eslint-disable no-new, no-param-reassign */
 /* global Vue, CommitsPipelineStore, PipelinesService, Flash */
 
-//= require vue
-//= require vue-resource
-//= require vue_shared/vue_resource_interceptor
-//= require vue_shared/components/pipelines_table
-//= require vue_realtime_listener/index
+window.Vue = require('vue');
+window.Vue.use(require('vue-resource'));
+require('../../vue_shared/vue_resource_interceptor');
+require('../../vue_shared/components/pipelines_table');
+require('../vue_realtime_listener/index');
 
 /**
  *
@@ -38,13 +38,10 @@
     data() {
       const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
       const svgsData = document.querySelector('.pipeline-svgs').dataset;
-      const store = gl.commits.pipelines.PipelinesStore.create();
+      const store = new gl.commits.pipelines.PipelinesStore();
 
       // Transform svgs DOMStringMap to a plain Object.
-      const svgsObject = Object.keys(svgsData).reduce((acc, element) => {
-        acc[element] = svgsData[element];
-        return acc;
-      }, {});
+      const svgsObject = gl.utils.DOMStringMapToObject(svgsData);
 
       return {
         endpoint: pipelinesTableData.endpoint,
@@ -71,7 +68,7 @@
       return gl.pipelines.pipelinesService.all()
         .then(response => response.json())
         .then((json) => {
-          this.store.store(json);
+          this.store.storePipelines(json);
           this.store.startTimeAgoLoops.call(this, Vue);
           this.isLoading = false;
         })