change architecture - add store - make api call by default

app/assets/javascripts/status_svg.vue.js.es6

-//= require vue
-/* global Vue, gl */
-/* eslint-disable no-param-reassign */
-
-((gl) => {
-  gl.VueRunnerStatus = Vue.extend({
-    props: ['status'],
-    template: `
-      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
-        <g fill={{status.color}} fill-rule="evenodd">
-          <path d={{status.pathOne}}></path>
-          <path d={{status.pathTwo}}></path>
-        </g>
-      </svg>
-      &nbsp;{{status.text}}
-    `,
-  });
-})(window.gl || (window.gl = {}));

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

+//= require vue
+//= require vue-resource
+
+//= require ./store.js.es6
+//= require ./status_data_icons.js.es6
+//= require ./vue_commit_link.vue.js.es6
+//= require ./pipelines.vue.js.es6

app/assets/javascripts/runnerstats/index.js.es6 → app/assets/javascripts/vue_pipelines_index/status_data_icons.js.es6

@@ -5,7 +5,7 @@
     constructor() {
       return {
         running: {
-          text: 'pending',
+          text: 'running',
           color: '#E75E40',
           pathOne: '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',
           pathTwo: 'M4.69999981,5.30065012 C4.69999981,5.13460564 4.83842754,5 5.00354719,5 L5.89645243,5 C6.06409702,5 6.19999981,5.13308716 6.19999981,5.30065012 L6.19999981,8.69934988 C6.19999981,8.86539436 6.06157207,9 5.89645243,9 L5.00354719,9 C4.8359026,9 4.69999981,8.86691284 4.69999981,8.69934988 L4.69999981,5.30065012 Z M7.69999981,5.30065012 C7.69999981,5.13460564 7.83842754,5 8.00354719,5 L8.89645243,5 C9.06409702,5 9.19999981,5.13308716 9.19999981,5.30065012 L9.19999981,8.69934988 C9.19999981,8.86539436 9.06157207,9 8.89645243,9 L8.00354719,9 C7.8359026,9 7.69999981,8.86691284 7.69999981,8.69934988 L7.69999981,5.30065012 Z',

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

+/* global gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.PipelineStore = class {
+    fetchData(Vue) {
+      this.$http.get(`/api/v3/projects/${this.scope}/pipelines`)
+        .then((response) => {
+            Vue.set(this, 'pipelines', JSON.parse(response.body));
+          }, () => {
+            Vue.set(this, 'pipelines', []);
+          });
+    }
+  };
+})(window.gl || (window.gl = {}));

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/assets/javascripts/vue_pipelines_loader.js.es6

+//= require_tree ./vue_pipelines_index

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

@@ -47,17 +47,20 @@
           %tbody.app
 
 :javascript
-  Vue.component('vue-pipelines', gl.VuePipeLines);
-  Vue.component('vue-runner-status', gl.VueRunnerStatus);
+  Vue.use(VueResource);
 
-  new Vue({
+  var vm = new Vue({
     el: ".app",
     data:{
-      pipelines: JSON.parse('#{@pipelines.to_json}'),
-      count: JSON.parse('#{@pipeline_count.to_json}'),
+      scope: "#{@project.id}",
+      store: new gl.PipelineStore(),
+    },
+    components: {
+      'vue-commit-link': gl.VueCommitLink,
+      'vue-pipelines': gl.VuePipeLines,
     },
     template: ""
       + "<div>"
-      + "<vue-pipelines :pipelines='pipelines' :count='count'></vue-pipelines>"
+      + "<vue-pipelines :scope='scope' :store='store'></vue-pipelines>"
       + "</div>",
   })