conditional render to have running - branches - tags be HAML

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

@@ -15,6 +15,7 @@
 //= require ./pipelines.vue.js.es6
 
 (() => {
+  if (~window.location.href.indexOf('scope')) return null;
   const project = document.querySelector('.pipelines');
 
   Vue.use(VueResource);

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

@@ -80,7 +80,6 @@
         <vue-gl-pagination
           :pagenum='pagenum'
           :changepage='changepage'
-          :pages='pipelines.length'
           :count='count'
         >
         </vue-gl-pagination>

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

@@ -21,7 +21,7 @@
       // eventually clearInterval(this.intervalId)
       this.intervalId = setInterval(() => {
         goFetch();
-      }, 30000);
+      }, 60000);
     }
   };
 })(window.gl || (window.gl = {}));

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

@@ -17,7 +17,7 @@
     },
     computed: {
       last() {
-        return Math.ceil(+this.count / 5)
+        return Math.ceil(+this.count / 5);
       },
       lastpage() {
         return `pipelines?p=${this.last}`;
@@ -43,6 +43,11 @@
           <li :class='pagenumberstatus(n)' v-else>
             <a @click='changepage($event)'>{{(n - 1)}}</a>
           </li>
+          <!--
+            take a slice of current array (up to 5)
+            if at end make dots dissapear
+            if in second slice or more make dots appear in the front
+          -->
           <li v-if='n === upcount'>
             <span class="gap">…</span>
           </li>

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

@@ -0,0 +1,27 @@
+/* global gl, Flash */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  const api = '/api/v3/projects';
+  const paginate = '?per_page=5&page=';
+
+  gl.PipelineStore = class {
+    fetchDataLoop(Vue, pageNum) {
+      const goFetch = () =>
+        this.$http.get(`${api}/${this.scope}/pipelines${paginate}${pageNum}`)
+          .then((response) => {
+            Vue.set(this, 'pipelines', JSON.parse(response.body));
+          }, () => new Flash(
+            'Something went wrong on our end.'
+          ));
+
+      // inital fetch and then start timeout loop
+      goFetch();
+
+      // eventually clearInterval(this.intervalId)
+      this.intervalId = setInterval(() => {
+        goFetch();
+      }, 30000);
+    }
+  };
+})(window.gl || (window.gl = {}));

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

@@ -41,6 +41,19 @@
     - if @pipelines.blank?
       %div
         .nothing-here-block No pipelines to show
+    - elsif @scope == 'branches' || @scope == 'tags' || @scope == 'running'
+      .table-holder
+        %table.table.ci-table
+          %thead
+            %th Status
+            %th Pipeline
+            %th Commit
+            %th Stages
+            %th
+            %th.hidden-xs
+
+          = render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages
+      = paginate @pipelines, theme: 'gitlab'
     - else
       .vue-pipelines-index