diff options
author | Clement Ho <clemmakesapps@gmail.com> | 2017-02-16 17:10:47 +0000 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2017-02-16 17:10:47 +0000 |
commit | 0135935c80a5b984dc80659baf4ed57c61eccf9e (patch) | |
tree | 7a832b55c7c73c19fbfa809f5aa923c0bb83c73c | |
parent | d5eaa62c472793058be392ac46bc485f2fc258a7 (diff) | |
parent | 78082831c1b3fa724badc6bab4fd54d9fbd0366c (diff) | |
download | gitlab-ce-0135935c80a5b984dc80659baf4ed57c61eccf9e.tar.gz |
Merge branch '28247-timeloops-bug' into 'master'
Only run timeago loops after rendering timeago components
Closes #28247
See merge request !9267
6 files changed, 39 insertions, 52 deletions
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 index f1b41911b73..f1b80e45444 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 +++ b/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; diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 index 5c1a7eb1052..e7c6c063413 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 +++ b/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"> diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 39935b08dc0..02ad029119d 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/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: { /** diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6 index 572f0493c9f..ffed5f53097 100644 --- a/app/assets/javascripts/vue_pipelines_index/store.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6 @@ -1,6 +1,5 @@ /* 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 = {})); diff --git a/changelogs/unreleased/28247-timeloops-bug.yml b/changelogs/unreleased/28247-timeloops-bug.yml new file mode 100644 index 00000000000..12ab523b7c7 --- /dev/null +++ b/changelogs/unreleased/28247-timeloops-bug.yml @@ -0,0 +1,4 @@ +--- +title: Only run timeago loops after rendering timeago components +merge_request: +author: diff --git a/spec/javascripts/commit/pipelines/pipelines_store_spec.js.es6 b/spec/javascripts/commit/pipelines/pipelines_store_spec.js.es6 index 789f5dc9f49..94973419979 100644 --- a/spec/javascripts/commit/pipelines/pipelines_store_spec.js.es6 +++ b/spec/javascripts/commit/pipelines/pipelines_store_spec.js.es6 @@ -1,10 +1,10 @@ -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 |