change to more component like structure for reusable components

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

@@ -2,6 +2,7 @@
 //= require vue-resource
 
 //= require ./store.js.es6
+//= require ./running_icon.vue.js.es6
+//= require ./running.vue.js.es6
 //= require ./status_data_icons.js.es6
-//= require ./vue_commit_link.vue.js.es6
 //= require ./pipelines.vue.js.es6

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

@@ -3,13 +3,19 @@
 
 ((gl) => {
   gl.VuePipeLines = Vue.extend({
+    components: {
+      'vue-running-pipeline': gl.VueRunningPipeline,
+    },
     data() {
       return {
         pipelines: [],
         runnerStats: new gl.RunnerStats(),
       };
     },
-    props: ['scope', 'store'],
+    props: [
+      'scope',
+      'store',
+    ],
     created() {
       this.store.fetchDataLoop.call(this, Vue);
     },
@@ -31,24 +37,15 @@
       </thead>
       <tbody v-for='pipeline in pipelines'>
         <tr class="commit">
-          <td class="commit-link">
-            <a href="pipelines/{{pipeline.id}}">
-              <div v-if="pipeline.status === 'running'">
-                <span class="ci-status ci-{{pipeline.status}}">
-                  running
-                </span>
-              </div>
-              <div v-if="pipeline.status === 'passed'">
-                <span class="ci-status ci-{{pipeline.status}}">
-                  passed
-                </span>
-              </div>
-            </a>
+          <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>
+            <a href="pipelines/{{pipeline.id}}">
+              <span class="pipeline-id">#{{pipeline.id}}</span>
+            </a>
+            <span>by</span>
+            <span class="api monospace">{{pipeline.user}}</span>
           </td>
           <td class="branch-commit">
             <div class="icon-container">

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

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueRunningPipeline = Vue.extend({
+    components: {
+      'vue-running-icon': gl.VueRunningIcon,
+    },
+    props: [
+      'pipe',
+    ],
+    template: `
+      <td class="commit-link">
+        <a href="pipelines/{{pipe.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>
+            </svg>
+            &nbsp;running
+          </span>
+        </a>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));

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

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueRunningIcon = Vue.extend({
+    template: `
+      <g fill="#2D9FD8" fill-rule="evenodd">
+        <path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"></path>
+        <path d="M7,3 C9.209139,3 11,4.790861 11,7 C11,9.209139 9.209139,11 7,11 C5.65802855,11 4.47040669,10.3391508 3.74481446,9.32513253 L7,7 L7,3 L7,3 Z"></path>
+      </g>
+    `,
+  });
+})(window.gl || (window.gl = {}));

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

@@ -13,7 +13,6 @@
           });
 
       goFetch(Vue);
-
       setInterval(() => {
         console.log('DID IT');
         goFetch(Vue);

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

-
-/* global Vue, gl */
-/* eslint-disable no-param-reassign */
-
-((gl) => {
-  gl.VueCommitLink = Vue.extend({
-    props: ['pipeline'],
-    template: `
-      <td class="commit-link">
-        <a href="pipelines/{{pipeline.id}}">
-          <div v-if="pipeline.status === 'running'">
-            <span class="ci-status ci-{{pipeline.status}}">
-              <vue-runner-running></vue-runner-running>
-            </span>
-          </div>
-          <div v-if="pipeline.status === 'passed'">
-            <span class="ci-status ci-{{pipeline.status}}">
-              <vue-runner-running></vue-runner-running>
-            </span>
-          </div>
-          <div v-if="pipeline.status === 'created'">
-            <span class="ci-status ci-{{pipeline.status}}">
-              <vue-runner-running></vue-runner-running>
-            </span>
-          </div>
-          <div v-if="pipeline.status === ''">
-            <span class="ci-status ci-{{pipeline.status}}">
-              <vue-runner-running></vue-runner-running>
-            </span>
-          </div>
-          <div v-if="pipeline.status === 'r'">
-            <span class="ci-status ci-{{pipeline.status}}">
-              <vue-runner-running></vue-runner-running>
-            </span>
-          </div>
-          <div v-if="pipeline.status === 'ru'">
-            <span class="ci-status ci-{{pipeline.status}}">
-              <vue-runner-running></vue-runner-running>
-            </span>
-          </div>
-          <div v-if="pipeline.status === 'run'">
-            <span class="ci-status ci-{{pipeline.status}}">
-              <vue-runner-running></vue-runner-running>
-            </span>
-          </div>
-        </a>
-      </td>
-    `,
-  });
-})(window.gl || (window.gl = {}));

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

@@ -56,7 +56,6 @@
       store: new gl.PipelineStore(),
     },
     components: {
-      'vue-commit-link': gl.VueCommitLink,
       'vue-pipelines': gl.VuePipeLines,
     },
     template: ""