From 035cb734d27cb6df56803d10be408c6e0cf764f0 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 2 Feb 2017 19:43:22 +0000
Subject: [PATCH] Add time ago auto-update to the 2 newest tables

---
 .../commit/pipelines/pipelines_store.js.es6   | 28 +++++++++++++++++++
 .../commit/pipelines/pipelines_table.js.es6   |  7 +++--
 .../pipeline_actions.js.es6                   |  4 +--
 .../vue_pipelines_index/store.js.es6          |  8 ++++--
 app/views/projects/pipelines/index.html.haml  |  3 +-
 .../merge_requests_controller_spec.rb         |  9 +-----
 6 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6
index b7d8e97fed3..fe90e7bac0a 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6
+++ b/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6
@@ -1,3 +1,4 @@
+/* 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);
+    },
   };
 })();
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6
index df7a6455eed..18d57333f61 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6
+++ b/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');
         });
     },
 
diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
index 9b4897b1a9e..e8f91227345 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
+++ b/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"
diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6
index 9e19b1564dc..0c4a3b77153 100644
--- a/app/assets/javascripts/vue_pipelines_index/store.js.es6
+++ b/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);
       };
 
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index df36279ed75..96f625bc924 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/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')
diff --git a/spec/controllers/projects/merge_requests_controller_spec.rb b/spec/controllers/projects/merge_requests_controller_spec.rb
index e100047579d..d18e8c37901 100644
--- a/spec/controllers/projects/merge_requests_controller_spec.rb
+++ b/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