get commit component to render needed info - work on SVG loading next

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

@@ -62,9 +62,17 @@
         this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope);
       },
       author(pipeline) {
-        const author = pipeline.commit.author;
+        const { commit } = pipeline;
+        const author = commit.author;
         if (author) return author;
-        return ({});
+
+        const nonUser = {
+          avatar_url: commit.author_gravatar_url,
+          web_url: `mailto:${commit.author_email}`,
+          username: commit.author_name,
+        };
+
+        return nonUser;
       },
       addTimeInterval(id, that) {
         this.allTimeIntervals.push({ id, component: that });
@@ -85,7 +93,7 @@
                 <td>
                   <commit
                     :tag="pipeline.ref['tag?']"
-                    :author='pipeline.commit.author'
+                    :author='author(pipeline)'
                     :title='pipeline.commit.title'
                     :ref='pipeline.ref'
                     :short_sha='pipeline.commit.short_id'
@@ -108,7 +116,7 @@
           <i class="fa fa-spinner fa-spin"></i>
         </div>
         <gl-pagination
-          v-if='count.all > 0'
+          v-if='count.all > 30'
           :pagenum='pagenum'
           :changepage='changepage'
           :count='count.all'

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

@@ -2,30 +2,6 @@
 /* eslint-disable no-param-reassign */
 
 ((gl) => {
-  const REALTIME = false;
-  const PAGINATION_LIMIT = 31;
-  const SLICE_LIMIT = 29;
-
-  class RealtimePaginationUpdater {
-    constructor(pageData) {
-      this.pageData = pageData;
-    }
-
-    updatePageDiff(apiResponse) {
-      const diffData = this.pageData.slice(0);
-      apiResponse.pipelines.forEach((newPipe, i) => {
-        if (newPipe.commit) {
-          diffData.unshift(newPipe);
-        } else {
-          const newMerge = Object.assign({}, diffData[i], newPipe);
-          diffData[i] = newMerge;
-        }
-      });
-      if (diffData.length < PAGINATION_LIMIT) return diffData;
-      return diffData.slice(0, SLICE_LIMIT);
-    }
-  }
-
   gl.PipelineStore = class {
     fetchDataLoop(Vue, pageNum, url) {
       const setVueResources = () => { Vue.activeResources = 1; };
@@ -61,46 +37,18 @@
             this.pageRequest = false;
             subtractFromVueResources();
           }, () => new Flash(
-            'Something went wrong on our end.'
-          ));
-
-      const goUpdate = () =>
-        this.$http.get(`${url}?page=${pageNum}&updated_at=${this.updatedAt}`)
-          .then((response) => {
-            const res = JSON.parse(response.body);
-            const p = new RealtimePaginationUpdater(this.pipelines);
-            Vue.set(this, 'updatedAt', res.updated_at);
-            Vue.set(this, 'pipelines', p.updatePageDiff(res));
-            Vue.set(this, 'count', res.count);
-            updatePipelineNums(this.count);
-            subtractFromVueResources();
-          }, () => new Flash(
-            'Something went wrong on our end.'
+            'Something went wrong on our end.',
           ));
 
       resourceChecker();
       goFetch();
 
-      const poller = () => {
-        this.intervalId = setInterval(() => {
-          if (this.updatedAt) {
-            resourceChecker();
-            if (Vue.activeResources > 1) return;
-            goUpdate();
-          }
-        }, 3000);
-      };
-
-      if (REALTIME) poller();
-
       const removePipelineInterval = () => {
         this.allTimeIntervals.forEach(e => clearInterval(e.id));
-        if (REALTIME) clearInterval(this.intervalId);
       };
 
       const startIntervalLoops = () => {
         this.allTimeIntervals.forEach(e => e.component.startInterval());
-        if (REALTIME) poller();
       };
 
       window.onbeforeunload = function onClose() {