on focus - blur - and page closed -- intervals are taken care of for time ago and realtime

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

@@ -24,6 +24,7 @@
     data() {
       return {
         pipelines: [],
+        allTimeIntervals: [],
         intervalId: '',
         updatedAt: '',
         pagenum: 1,
@@ -65,6 +66,9 @@
         if (author) return author;
         return ({});
       },
+      addTimeInterval(id, that) {
+        this.allTimeIntervals.push({ id: id, component: that });
+      },
     },
     template: `
       <div>
@@ -90,7 +94,11 @@
                   </commit>
                 </td>
                 <stages :pipeline='pipeline'></stages>
-                <time-ago :pipeline='pipeline'></time-ago>
+                <time-ago
+                  :pipeline='pipeline'
+                  :addTimeInterval='addTimeInterval'
+                >
+                </time-ago>
                 <pipeline-actions :pipeline='pipeline'></pipeline-actions>
               </tr>
             </tbody>

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

@@ -2,7 +2,7 @@
 /* eslint-disable no-param-reassign */
 
 ((gl) => {
-  const REALTIME = false;
+  const REALTIME = true;
   const PAGINATION_LIMIT = 31;
   const SLICE_LIMIT = 29;
 
@@ -33,11 +33,10 @@
       const addToVueResources = () => { Vue.activeResources += 1; };
       const subtractFromVueResources = () => { Vue.activeResources -= 1; };
 
-      resetVueResources(); // set Vue.resources to 0
+      resetVueResources();
 
       const updatePipelineNums = (count) => {
         const { all } = count;
-        // cannot define non camel case, so not using destructuring for running
         const running = count.running_or_pending;
         document.querySelector('.js-totalbuilds-count').innerHTML = all;
         document.querySelector('.js-running-count').innerHTML = running;
@@ -82,7 +81,7 @@
       resourceChecker();
       goFetch();
 
-      if (REALTIME) {
+      const poller = () => {
         this.intervalId = setInterval(() => {
           if (this.updatedAt) {
             resourceChecker();
@@ -90,11 +89,31 @@
             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 removePipelineInterval() {
-          clearInterval(this.intervalId);
-        };
-      }
+      window.onbeforeunload = function onClose() {
+        removePipelineInterval();
+      };
+
+      window.onblur = function remove() {
+        removePipelineInterval();
+      };
+
+      window.onfocus = function start() {
+        startIntervalLoops();
+      };
     }
   };
 })(window.gl || (window.gl = {}));

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

 /* global Vue, gl */
 /* eslint-disable no-param-reassign */
 ((gl) => {
+  const REALTIME = false;
+
   gl.VueTimeAgo = Vue.extend({
+    data() {
+      return {
+        timeInterval: '',
+        currentTime: new Date(),
+      };
+    },
     props: [
       'pipeline',
+      'addTimeInterval',
     ],
+    created() {
+      if (!REALTIME) {
+        this.timeInterval = setInterval(() => {
+          this.currentTime = new Date();
+        }, 1000);
+
+        this.addTimeInterval(this.timeInterval, this);
+      }
+    },
     computed: {
       localTimeFinished() {
         return gl.utils.formatDate(this.pipeline.details.finished_at);
       },
-    },
-    methods: {
       timeStopped() {
+        const changeTime = this.currentTime;
+
         const options = {
           weekday: 'long',
           year: 'numeric',
@@ -23,18 +41,22 @@
 
         const finished = this.pipeline.details.finished_at;
 
-        if (!finished) return false;
-
-        return {
-          words: gl.utils.getTimeago().format(finished),
-        };
+        if (!finished && changeTime) return false;
+        return ({ words: gl.utils.getTimeago().format(finished) });
       },
+    },
+    methods: {
       duration() {
         const { duration } = this.pipeline.details;
         if (duration === 0) return '00:00:00';
         if (duration !== null) return duration;
         return false;
       },
+      startInterval() {
+        this.timeInterval = setInterval(() => {
+          this.currentTime = new Date();
+        }, 1000);
+      },
     },
     template: `
       <td>
@@ -51,7 +73,7 @@
           </svg>
           {{duration()}}
         </p>
-        <p class="finished-at" v-if='timeStopped()'>
+        <p class="finished-at" v-if='timeStopped'>
           <i class="fa fa-calendar"></i>
           <time
             data-toggle="tooltip"
@@ -59,7 +81,7 @@
             data-container="body"
             :data-original-title='localTimeFinished'
           >
-            {{timeStopped().words}}
+            {{timeStopped.words}}
           </time>
         </p>
       </td>