page specific js - remove inline js - refactor

app/assets/javascripts/vue_pipelines_index/index.js.es6

+/* global Vue, VueResource, gl */
+
 //= require vue
 //= require vue-resource
 
@@ -5,3 +7,24 @@
 //= require ./running_icon.vue.js.es6
 //= require ./running.vue.js.es6
 //= require ./pipelines.vue.js.es6
+
+(() => {
+  const project = document.querySelector('.table-holder');
+
+  Vue.use(VueResource);
+
+  new Vue({
+    el: '.vue-pipelines-index',
+    data: {
+      scope: project.dataset.projectId,
+      store: new gl.PipelineStore(),
+    },
+    components: {
+      'vue-pipelines': gl.VuePipeLines,
+    },
+    template: ''
+      + '<div>'
+      + "<vue-pipelines :scope='scope' :store='store'></vue-pipelines>"
+      + '</div>',
+  });
+})();

app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6

@@ -10,6 +10,8 @@
       return {
         pipelines: [],
         commits: [],
+        currentPage: '',
+        intervalId: '',
       };
     },
     props: [
@@ -24,6 +26,11 @@
       shortSha(pipeline) {
         return pipeline.sha.slice(0, 8);
       },
+      changePage() {
+        // clearInterval(this.intervalId);
+        // this.store.fetchCommits.call(this, Vue);
+        // this.store.fetchDataLoop.call(this, Vue);
+      },
     },
     template: `
       <thead>
@@ -52,6 +59,7 @@
             <div class="icon-container">
               <i class="fa fa-code-fork"></i>
               </div>
+              <!-- I need to know which branch things are comming from -->
               <a class="monospace branch-name" href="/gitlab-org/gitlab-ce/commits/master">master</a>
               <div class="icon-container commit-icon">
               <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">

app/assets/javascripts/vue_pipelines_index/store.js.es6

@@ -2,8 +2,12 @@
 /* eslint-disable no-param-reassign */
 
 ((gl) => {
+  const api = '/api/v3/projects';
+
   const goFetch = (that, vue) =>
-    that.$http.get(`/api/v3/projects/${that.scope}/pipelines?per_page=5&page=1`)
+    that.$http.get(
+      `${api}/${that.scope}/pipelines?per_page=5&page=1`
+    )
       .then((response) => {
         vue.set(that, 'pipelines', JSON.parse(response.body));
       }, () => {
@@ -12,14 +16,17 @@
 
   gl.PipelineStore = class {
     fetchDataLoop(Vue) {
-      setInterval(() => {
+      // eventually clearInterval(this.intervalId)
+      this.intervalId = setInterval(() => {
         console.log('DID IT');
         goFetch(this, Vue);
       }, 30000);
     }
 
     fetchCommits(vue) {
-      this.$http.get(`/api/v3/projects/${this.scope}/repository/commits?per_page=5&page=1`)
+      this.$http.get(
+        `${api}/${this.scope}/repository/commits?per_page=5&page=1`
+      )
         .then((response) => {
           vue.set(this, 'commits', JSON.parse(response.body));
         }, () => {

app/assets/javascripts/vue_pipelines_loader.js.es6

-//= require_tree ./vue_pipelines_index

app/views/projects/pipelines/index.html.haml

@@ -42,24 +42,8 @@
       %div
         .nothing-here-block No pipelines to show
     - else
-      .table-holder
+      .table-holder{"data-project-id": "#{@project.id}"}
         %table.table.ci-table
-          %tbody.app
+          %tbody.vue-pipelines-index
 
-:javascript
-  Vue.use(VueResource);
+= page_specific_javascript_tag('vue_pipelines_index/index.js')
\ No newline at end of file
-
-  var vm = new Vue({
-    el: ".app",
-    data:{
-      scope: "#{@project.id}",
-      store: new gl.PipelineStore(),
-    },
-    components: {
-      'vue-pipelines': gl.VuePipeLines,
-    },
-    template: ""
-      + "<div>"
-      + "<vue-pipelines :scope='scope' :store='store'></vue-pipelines>"
-      + "</div>",
-  })

config/application.rb

@@ -99,6 +99,7 @@ module Gitlab
     config.assets.precompile << "lib/utils/*.js"
     config.assets.precompile << "lib/*.js"
     config.assets.precompile << "u2f.js"
+    config.assets.precompile << "vue_pipelines_index/index.js"
 
     # Version of your assets, change this if you want to expire all your assets
     config.assets.version = '1.0'