Merge branch '28247-timeloops-bug' into 'master'

Only run timeago loops after rendering timeago components

Closes #28247

See merge request !9267

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

@@ -4,6 +4,7 @@
  *
  * Used to store the Pipelines rendered in the commit view in the pipelines table.
  */
+require('../../vue_realtime_listener');
 
 class PipelinesStore {
   constructor() {
@@ -24,7 +25,7 @@ class PipelinesStore {
    * update the time to show how long as passed.
    *
    */
-  startTimeAgoLoops() {
+  static startTimeAgoLoops() {
     const startTimeLoops = () => {
       this.timeLoopInterval = setInterval(() => {
         this.$children[0].$children.reduce((acc, component) => {
@@ -44,7 +45,4 @@ class PipelinesStore {
   }
 }
 
-window.gl = window.gl || {};
-gl.commits = gl.commits || {};
-gl.commits.pipelines = gl.commits.pipelines || {};
-gl.commits.pipelines.PipelinesStore = PipelinesStore;
+module.exports = PipelinesStore;

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

@@ -6,9 +6,8 @@ window.Vue.use(require('vue-resource'));
 require('../../lib/utils/common_utils');
 require('../../vue_shared/vue_resource_interceptor');
 require('../../vue_shared/components/pipelines_table');
-require('../../vue_realtime_listener/index');
 require('./pipelines_service');
-require('./pipelines_store');
+const PipelineStore = require('./pipelines_store');
 
 /**
  *
@@ -41,7 +40,7 @@ require('./pipelines_store');
     data() {
       const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
       const svgsData = document.querySelector('.pipeline-svgs').dataset;
-      const store = new gl.commits.pipelines.PipelinesStore();
+      const store = new PipelineStore();
 
       // Transform svgs DOMStringMap to a plain Object.
       const svgsObject = gl.utils.DOMStringMapToObject(svgsData);
@@ -71,7 +70,6 @@ require('./pipelines_store');
         .then(response => response.json())
         .then((json) => {
           this.store.storePipelines(json);
-          this.store.startTimeAgoLoops.call(this, Vue);
           this.isLoading = false;
         })
         .catch(() => {
@@ -80,6 +78,12 @@ require('./pipelines_store');
         });
     },
 
+    beforeUpdate() {
+      if (this.state.pipelines.length && this.$children) {
+        PipelineStore.startTimeAgoLoops.call(this, Vue);
+      }
+    },
+
     template: `
       <div class="pipelines">
         <div class="realtime-loading" v-if="isLoading">

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

@@ -5,6 +5,7 @@ window.Vue = require('vue');
 require('../vue_shared/components/table_pagination');
 require('./store');
 require('../vue_shared/components/pipelines_table');
+const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_store');
 
 ((gl) => {
   gl.VuePipelines = Vue.extend({
@@ -32,8 +33,16 @@ require('../vue_shared/components/pipelines_table');
       const scope = gl.utils.getParameterByName('scope');
       if (pagenum) this.pagenum = pagenum;
       if (scope) this.apiScope = scope;
+
       this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
     },
+
+    beforeUpdate() {
+      if (this.pipelines.length && this.$children) {
+        CommitPipelinesStoreWithTimeAgo.startTimeAgoLoops.call(this, Vue);
+      }
+    },
+
     methods: {
 
       /**

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

 /* global gl, Flash */
-/* eslint-disable no-param-reassign, no-underscore-dangle */
-require('../vue_realtime_listener');
+/* eslint-disable no-param-reassign */
 
 ((gl) => {
   const pageValues = (headers) => {
@@ -12,48 +11,21 @@ require('../vue_realtime_listener');
   gl.PipelineStore = class {
     fetchDataLoop(Vue, pageNum, url, apiScope) {
       this.pageRequest = true;
-      const updatePipelineNums = (count) => {
-        const { all } = count;
-        const running = count.running_or_pending;
-        document.querySelector('.js-totalbuilds-count').innerHTML = all;
-        document.querySelector('.js-running-count').innerHTML = running;
-      };
 
-      const goFetch = () =>
-        this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`)
-          .then((response) => {
-            const pageInfo = pageValues(response.headers);
-            this.pageInfo = Object.assign({}, this.pageInfo, pageInfo);
+      return this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`)
+      .then((response) => {
+        const pageInfo = pageValues(response.headers);
+        this.pageInfo = Object.assign({}, this.pageInfo, pageInfo);
 
-            const res = JSON.parse(response.body);
-            this.count = Object.assign({}, this.count, res.count);
-            this.pipelines = Object.assign([], this.pipelines, res.pipelines);
+        const res = JSON.parse(response.body);
+        this.count = Object.assign({}, this.count, res.count);
+        this.pipelines = Object.assign([], this.pipelines, res.pipelines);
 
-            updatePipelineNums(this.count);
-            this.pageRequest = false;
-          }, () => {
-            this.pageRequest = false;
-            return new Flash('An error occurred while fetching the pipelines, please reload the page again.');
-          });
-
-      goFetch();
-
-      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);
+        this.pageRequest = false;
+      }, () => {
+        this.pageRequest = false;
+        return new Flash('An error occurred while fetching the pipelines, please reload the page again.');
+      });
     }
   };
 })(window.gl || (window.gl = {}));

changelogs/unreleased/28247-timeloops-bug.yml

+---
+title: Only run timeago loops after rendering timeago components
+merge_request:
+author:

spec/javascripts/commit/pipelines/pipelines_store_spec.js.es6

-require('~/commit/pipelines/pipelines_store');
+const PipelinesStore = require('~/commit/pipelines/pipelines_store');
 
 describe('Store', () => {
   let store;
 
   beforeEach(() => {
-    store = new gl.commits.pipelines.PipelinesStore();
+    store = new PipelinesStore();
   });
 
   // unregister intervals and event handlers