fix vue2 warns - more extraction - good refactor

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

@@ -4,7 +4,13 @@
 ((gl) => {
   gl.VueBranchCommit = Vue.extend({
     props: ['pipeline', 'shortsha'],
+    methods: {
+      commiturl(sha) {
+        return `./commit/${sha}`;
+      },
+    },
     template: `
+      <td class="branch-commit">
         <div class="icon-container">
           <i class="fa fa-code-fork"></i>
           </div>
@@ -19,7 +25,9 @@
         </div>
         <a
           class="commit-id monospace"
-        href="./commit/{{pipeline.sha}}">{{shortsha(pipeline)}}
+          :href='commiturl(pipeline.sha)'
+        >
+          {{shortsha(pipeline)}}
         </a>
         <p class="commit-title">
           <a
@@ -41,7 +49,7 @@
           </a>
           <a
             class="commit-row-message"
-          href="./commit/{{pipeline.sha}}"
+            :href='commiturl(pipeline.sha)'
           >
             <!--
               need commit message/title for SHA
@@ -49,6 +57,7 @@
             fix broken repo 500 errors in UI and added relevant specs
           </a>
         </p>
+      </td>
     `,
   });
 })(window.gl || (window.gl = {}));

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

@@ -4,6 +4,8 @@
 //= require vue-resource
 
 //= require ./store.js.es6
+//= require ./pipeline_url.vue.js.es6
+//= require ./pipeline_head.vue.js.es6
 //= require ./running_icon.vue.js.es6
 //= require ./running.vue.js.es6
 //= require ./stages.vue.js.es6

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

@@ -5,6 +5,7 @@
   gl.VuePipelineActions = Vue.extend({
     // props: ['builds'],
     template: `
+      <td class="pipeline-actions hidden-xs">
         <div class="controls pull-right">
           <div class="btn-group inline">
             <div class="btn-group">
@@ -71,6 +72,7 @@
             </a>
           </div>
         </div>
+      </td>
     `,
   });
 })(window.gl || (window.gl = {}));

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

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VuePipelineHead = Vue.extend({
+    components: {
+      'vue-running-icon': gl.VueRunningIcon,
+    },
+    props: [
+      'pipeline',
+      'pipelineurl',
+    ],
+    template: `
+      <thead>
+        <tr>
+          <th>Status</th>
+          <th>Pipeline</th>
+          <th>Commit</th>
+          <th>Stages</th>
+          <th></th>
+          <th class="hidden-xs"></th>
+        </tr>
+      </thead>
+    `,
+  });
+})(window.gl || (window.gl = {}));

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

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VuePipelineUrl = Vue.extend({
+    components: {
+      'vue-running-icon': gl.VueRunningIcon,
+    },
+    props: [
+      'pipeline',
+      'pipelineurl',
+    ],
+    template: `
+      <td>
+        <a :href='pipelineurl(pipeline.id)'>
+          <span class="pipeline-id">#{{pipeline.id}}</span>
+        </a>
+        <span>by</span>
+        <span class="api monospace">{{pipeline.user}}</span>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));

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

 /* global Vue, gl */
-/* eslint-disable no-param-reassign */
+/* eslint-disable no-param-reassign, no-bitwise*/
 
 ((gl) => {
   gl.VuePipeLines = Vue.extend({
@@ -8,6 +8,8 @@
       'vue-stages': gl.VueStages,
       'vue-pipeline-actions': gl.VuePipelineActions,
       'vue-branch-commit': gl.VueBranchCommit,
+      'vue-pipeline-url': gl.VuePipelineUrl,
+      'vue-pipeline-head': gl.VuePipelineHead,
     },
     data() {
       return {
@@ -22,11 +24,8 @@
       'store',
     ],
     created() {
-      // ** `.includes` does not work in PhantomJS **
-
-      // const url = window.location.toString();
-      // if (url.includes('?')) this.pageNum = url.split('?')[1];
-      // now fetch page appropriate data
+      const url = window.location.toString();
+      if (~url.indexOf('?')) this.pageNum = url.split('?')[1];
       this.store.fetchDataLoop.call(this, Vue, this.pageNum);
     },
     methods: {
@@ -37,66 +36,36 @@
         // clearInterval(this.intervalId);
         // this.store.fetchDataLoop.call(this, Vue, this.pageNum);
       },
+      pipelineurl(id) {
+        return `pipelines/${id}`;
+      },
     },
     template: `
       <div class="table-holder">
         <table class="table ci-table">
-          <thead>
-            <tr>
-              <th>Status</th>
-              <th>Pipeline</th>
-              <th>Commit</th>
-              <th>Stages</th>
-              <th></th>
-              <th class="hidden-xs"></th>
-            </tr>
-          </thead>
-          <tbody v-for='pipeline in pipelines'>
-            <tr class="commit">
-              <td class="commit-link" v-if="pipeline.status === 'running'">
-                <vue-running-pipeline :pipe='pipeline'></vue-running-pipeline>
-              </td>
-              <td>
-                <a href="pipelines/{{pipeline.id}}">
-                  <span class="pipeline-id">#{{pipeline.id}}</span>
-                </a>
-                <span>by</span>
-                <span class="api monospace">{{pipeline.user}}</span>
+          <vue-pipeline-head></vue-pipeline-head>
+          <tbody>
+            <tr class="commit" v-for='pipeline in pipelines'>
+              <td class="commit-link" v-if="pipeline.status">
+                <vue-running-pipeline
+                  :pipeline='pipeline'
+                  :pipelineurl='pipelineurl'
+                >
+                </vue-running-pipeline>
               </td>
-              <td class="branch-commit">
+              <vue-pipeline-url
+                :pipeline='pipeline'
+                :pipelineurl='pipelineurl'
+              >
+              </vue-pipeline-url>
               <vue-branch-commit
                 :pipeline='pipeline'
                 :shortsha='shortsha'
               >
               </vue-branch-commit>
-              </td>
-              <td class="stage-cell">
-                <!--
-                  Need Stages Array:
-                    ex: stage status per element as well as build name
-
-                    Why I need it:
-                      title="Prepare: failed" href="pipelines#prepare"
-                      title="Notify Build: success" href="pipelines#notify_build"
-                      title="Post Test: failed" href="pipelines#post-test"
-
-                    How I would solve it once I have the data:
-                      title="Prepare: {{stage.status}}"
-                      href="pipelines#{{stage.title}}"
-
-                  this way I can pass it as a prop to
-                    ex:
-                      <td class="stage-cell" v-for='stage in pipelines.stages'>
-                        <vue-stage :stage='stage'>
-                      </td>
-                -->
               <vue-stages></vue-stages>
-              </td>
               <td></td>
-              <td class="pipeline-actions hidden-xs">
-                <!-- will need to pass builds info and have v-if's for icons -->
               <vue-pipeline-actions></vue-pipeline-actions>
-              </td>
             </tr>
           </tbody>
         </table>

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

@@ -7,11 +7,12 @@
       'vue-running-icon': gl.VueRunningIcon,
     },
     props: [
-      'pipe',
+      'pipeline',
+      'pipelineurl',
     ],
     template: `
       <td class="commit-link">
-        <a href="pipelines/{{pipe.id}}">
+        <a :href='pipelineurl(pipeline.id)'>
           <span class="ci-status ci-running">
             <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
               <vue-running-icon></vue-running-icon>

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

@@ -4,6 +4,26 @@
 ((gl) => {
   gl.VueStages = Vue.extend({
     template: `
+      <td class="stage-cell">
+        <!--
+          Need Stages Array:
+            ex: stage status per element as well as build name
+
+            Why I need it:
+              title="Prepare: failed" href="pipelines#prepare"
+              title="Notify Build: success" href="pipelines#notify_build"
+              title="Post Test: failed" href="pipelines#post-test"
+
+            How I would solve it once I have the data:
+              title="Prepare: {{stage.status}}"
+              href="pipelines#{{stage.title}}"
+
+          this way I can pass it as a prop to
+            ex:
+              <td class="stage-cell" v-for='stage in pipelines.stages'>
+                <vue-stage :stage='stage'>
+              </td>
+        -->
         <div class="stage-container">
           <a class="has-tooltip ci-status-icon-failed" title="Build: failed" href="pipelines#build">
             <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
@@ -84,6 +104,7 @@
             </svg>
           </a>
         </div>
+      </td>
     `,
   });
 })(window.gl || (window.gl = {}));