diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-03-28 19:12:21 +0100 |
---|---|---|
committer | Kamil Trzcinski <ayufan@ayufan.eu> | 2017-04-06 23:50:35 +0200 |
commit | 788f3451f7736cdfec869e0f9d087db3a3815b71 (patch) | |
tree | ff4501db8293d7522726b7868066302a964252b1 /app | |
parent | 90fc9237c20cbb20a528de1a2f294d35b479bd44 (diff) | |
download | gitlab-ce-788f3451f7736cdfec869e0f9d087db3a3815b71.tar.gz |
Extend realtime for other pipelines tables
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/commit/pipelines/pipelines_table.js | 58 | ||||
-rw-r--r-- | app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js | 2 |
2 files changed, 47 insertions, 13 deletions
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js index 4d5a857d705..54f132746b3 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.js +++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import Visibility from 'visibilityjs'; import PipelinesTableComponent from '../../vue_shared/components/pipelines_table'; import PipelinesService from '../../vue_pipelines_index/services/pipelines_service'; import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store'; @@ -7,6 +8,7 @@ import EmptyState from '../../vue_pipelines_index/components/empty_state'; import ErrorState from '../../vue_pipelines_index/components/error_state'; import '../../lib/utils/common_utils'; import '../../vue_shared/vue_resource_interceptor'; +import Poll from '../../lib/utils/poll'; /** * @@ -42,6 +44,7 @@ export default Vue.component('pipelines-table', { state: store.state, isLoading: false, hasError: false, + setIsMakingRequest: false, }; }, @@ -70,11 +73,32 @@ export default Vue.component('pipelines-table', { this.fetchPipelines(); + const poll = new Poll({ + resource: this.service, + method: 'getPipelines', + successCallback: this.successCallback, + errorCallback: this.errorCallback, + notificationCallback: this.setIsMakingRequest, + }); + + if (!Visibility.hidden()) { + this.isLoading = true; + poll.makeRequest(); + } + + Visibility.change(() => { + if (!Visibility.hidden()) { + poll.restart(); + } else { + poll.stop(); + } + }); + eventHub.$on('refreshPipelines', this.fetchPipelines); }, beforeUpdate() { - if (this.state.pipelines.length && this.$children) { + if (this.state.pipelines.length && this.$children && !this.isMakingRequest) { this.store.startTimeAgoLoops.call(this, Vue); } }, @@ -86,18 +110,28 @@ export default Vue.component('pipelines-table', { methods: { fetchPipelines() { this.isLoading = true; + return this.service.getPipelines() - .then(response => response.json()) - .then((json) => { - // depending of the endpoint the response can either bring a `pipelines` key or not. - const pipelines = json.pipelines || json; - this.store.storePipelines(pipelines); - this.isLoading = false; - }) - .catch(() => { - this.hasError = true; - this.isLoading = false; - }); + .then(response => this.successCallback(response)) + .catch(() => this.errorCallback()); + }, + + successCallback(resp) { + const response = resp.json(); + + // depending of the endpoint the response can either bring a `pipelines` key or not. + const pipelines = response.pipelines || response; + this.store.storePipelines(pipelines); + this.isLoading = false; + }, + + errorCallback() { + this.hasError = true; + this.isLoading = false; + }, + + setIsMakingRequest(isMakingRequest) { + this.isMakingRequest = isMakingRequest; }, }, diff --git a/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js b/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js index 985c5d698a4..255cd513490 100644 --- a/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js +++ b/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js @@ -26,7 +26,7 @@ export default class PipelinesService { this.pipelines = Vue.resource(endpoint); } - getPipelines(data) { + getPipelines(data = {}) { const { scope, page } = data; return this.pipelines.get({ scope, page }); } |