much simpler time logic - clean up - [ci skip]

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

@@ -2,7 +2,6 @@
 /* eslint-disable no-param-reassign, no-bitwise*/
 
 ((gl) => {
-  const REALTIME = false;
   const SPREAD = '...';
   const PREV = 'Prev';
   const NEXT = 'Next';
@@ -24,7 +23,7 @@
     data() {
       return {
         pipelines: [],
-        allTimeIntervals: [],
+        timeLoopInterval: '',
         intervalId: '',
         updatedAt: '',
         pagenum: 1,
@@ -57,7 +56,7 @@
         if (text === FIRST) this.pagenum = 1;
 
         window.history.pushState({}, null, `?p=${this.pagenum}`);
-        if (REALTIME) clearInterval(this.intervalId);
+        clearInterval(this.timeLoopInterval);
         this.pageRequest = true;
         this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope);
       },
@@ -113,7 +112,6 @@
                 <stages :pipeline='pipeline'></stages>
                 <time-ago
                   :pipeline='pipeline'
-                  :addTimeInterval='addTimeInterval'
                 >
                 </time-ago>
                 <pipeline-actions :pipeline='pipeline'></pipeline-actions>

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

 /* global gl, Flash */
-/* eslint-disable no-param-reassign */
+/* eslint-disable no-param-reassign, no-underscore-dangle */
 
 ((gl) => {
   gl.PipelineStore = class {
@@ -43,25 +43,36 @@
       resourceChecker();
       goFetch();
 
-      const removePipelineIntervals = () => {
-        this.allTimeIntervals.forEach(e => clearInterval(e.id));
+      const startTimeLoops = () => {
+        this.timeLoopInterval = setInterval(() => {
+          console.log('TIME LOOP');
+          this.$children
+            .filter(e => e.$options._componentTag === 'time-ago')
+            .forEach(e => e.changeTime());
+        }, 1000);
+      };
+
+      startTimeLoops();
+
+      const removeTimeIntervals = () => {
+        clearInterval(this.timeLoopInterval);
       };
 
       const startIntervalLoops = () => {
-        this.allTimeIntervals.forEach(e => e.start());
+        startTimeLoops();
       };
 
       const removeAll = () => {
-        removePipelineIntervals();
-        window.removeEventListener('beforeunload', () => {});
-        window.removeEventListener('focus', () => {});
-        window.removeEventListener('blur', () => {});
-        document.removeEventListener('page:fetch', () => {});
+        removeTimeIntervals();
+        window.removeEventListener('beforeunload', removeTimeIntervals);
+        window.removeEventListener('focus', startIntervalLoops);
+        window.removeEventListener('blur', removeTimeIntervals);
+        document.removeEventListener('page:fetch', removeTimeIntervals);
       };
 
-      window.addEventListener('beforeunload', removePipelineIntervals);
+      window.addEventListener('beforeunload', removeTimeIntervals);
       window.addEventListener('focus', startIntervalLoops);
-      window.addEventListener('blur', removePipelineIntervals);
+      window.addEventListener('blur', removeTimeIntervals);
       document.addEventListener('page:fetch', removeAll);
     }
   };

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

@@ -4,21 +4,12 @@
   gl.VueTimeAgo = Vue.extend({
     data() {
       return {
-        timeInterval: '',
         currentTime: new Date(),
       };
     },
     props: [
       'pipeline',
-      'addTimeInterval',
     ],
-    created() {
-      this.timeInterval = setInterval(() => {
-        this.currentTime = new Date();
-      }, 1000);
-
-      this.addTimeInterval(this.timeInterval, this.startInterval);
-    },
     computed: {
       localTimeFinished() {
         return gl.utils.formatDate(this.pipeline.details.finished_at);
@@ -44,10 +35,8 @@
         if (duration !== null) return duration;
         return false;
       },
-      startInterval() {
-        this.timeInterval = setInterval(() => {
-          this.currentTime = new Date();
-        }, 1000);
+      changeTime() {
+        this.currentTime = new Date();
       },
     },
     template: `