Add time ago auto-update to the 2 newest tables

app/assets/javascripts/commit/pipelines/pipelines_store.js.es6

+/* eslint-disable no-underscore-dangle*/
 /**
  * Pipelines' Store for commits view.
  *
@@ -20,7 +21,34 @@
 
     store(pipelines = []) {
       this.state.pipelines = pipelines;
+
       return pipelines;
     },
+
+    /**
+     * Once the data is received we will start the time ago loops.
+     *
+     * Everytime a request is made like retry or cancel a pipeline, every 10 seconds we
+     * update the time to show how long as passed.
+     *
+     */
+    startTimeAgoLoops() {
+      const startTimeLoops = () => {
+        this.timeLoopInterval = setInterval(() => {
+          this.$children[0].$children.reduce((acc, component) => {
+            const timeAgoComponent = component.$children.filter(el => el.$options._componentTag === 'time-ago')[0];
+            acc.push(timeAgoComponent);
+            return acc;
+          }, []).forEach(e => e.changeTime());
+        }, 10000);
+      };
+
+      startTimeLoops();
+
+      const removeIntervals = () => clearInterval(this.timeLoopInterval);
+      const startIntervals = () => startTimeLoops();
+
+      gl.VueRealtimeListener(removeIntervals, startIntervals);
+    },
   };
 })();

app/assets/javascripts/commit/pipelines/pipelines_table.js.es6

@@ -5,6 +5,7 @@
 //= require vue-resource
 //= require vue_shared/vue_resource_interceptor
 //= require vue_shared/components/pipelines_table
+//= require vue_realtime_listener/index
 
 /**
  *
@@ -71,10 +72,12 @@
         .then(response => response.json())
         .then((json) => {
           this.store.store(json);
+          this.store.startTimeAgoLoops.call(this, Vue);
           this.isLoading = false;
-        }).catch(() => {
+        })
+        .catch(() => {
           this.isLoading = false;
-          new Flash('An error occurred while fetching the pipelines.', 'alert');
+          new Flash('An error occurred while fetching the pipelines, please reload the page again.', 'alert');
         });
     },
 

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

@@ -70,7 +70,7 @@
             </div>
           </div>
           <div class="cancel-retry-btns inline">
-            <button
+            <a
               v-if='pipeline.flags.retryable'
               class="btn has-tooltip"
               title="Retry"
@@ -82,7 +82,7 @@
               aria-label="Retry">
               <i class="fa fa-repeat" aria-hidden="true"></i>
             </a>
-            <button
+            <a
               v-if='pipeline.flags.cancelable'
               class="btn btn-remove has-tooltip"
               title="Cancel"

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

@@ -48,9 +48,11 @@
 
       const startTimeLoops = () => {
         this.timeLoopInterval = setInterval(() => {
-          this.$children
-            .filter(e => e.$options._componentTag === 'time-ago')
-            .forEach(e => e.changeTime());
+          this.$children[0].$children.reduce((acc, component) => {
+            const timeAgoComponent = component.$children.filter(el => el.$options._componentTag === 'time-ago')[0];
+            acc.push(timeAgoComponent);
+            return acc;
+          }, []).forEach(e => e.changeTime());
         }, 10000);
       };
 

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

@@ -64,4 +64,5 @@
 
       .vue-pipelines-index
 
-= page_specific_javascript_tag('vue_pipelines_index/index.js')
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('vue_pipelines_index/index.js')

spec/controllers/projects/merge_requests_controller_spec.rb

@@ -701,15 +701,8 @@ describe Projects::MergeRequestsController do
             format: :json
       end
 
-      it 'responds with a rendered HTML partial' do
-        expect(response)
-          .to render_template('projects/merge_requests/show/_pipelines')
-        expect(json_response).to have_key 'html'
-      end
-
       it 'responds with serialized pipelines' do
-        expect(json_response).to have_key 'pipelines'
-        expect(json_response['pipelines']).not_to be_empty
+        expect(json_response).not_to be_empty
       end
     end
   end