diff options
author | Lin Jen-Shin <godfat@godfat.org> | 2017-05-23 02:10:29 +0800 |
---|---|---|
committer | Lin Jen-Shin <godfat@godfat.org> | 2017-05-23 02:10:29 +0800 |
commit | 1a4130d3a6cfb4956f8bb1186cc499ea549d8e18 (patch) | |
tree | 076adcb3e6f3800a1a7bbc6809839d5cb3b3f372 /app/assets/javascripts/commit/pipelines/pipelines_table.js | |
parent | 3c8a6fba67998eb17240b15db85f8d1c8aff338e (diff) | |
parent | 18a6d9c5326bc2b90a1f0cc8664d638a39885924 (diff) | |
download | gitlab-ce-1a4130d3a6cfb4956f8bb1186cc499ea549d8e18.tar.gz |
Merge remote-tracking branch 'upstream/master' into 27377-preload-pipeline-entity27377-preload-pipeline-entity
* upstream/master: (2534 commits)
Update VERSION to 9.3.0-pre
Update CHANGELOG.md for 9.2.0
removes unnecessary redundacy in usage ping doc
Respect the typo as rubocop said
Add a test to ensure this works on MySQL
Change pipelines schedules help page path
change domain to hostname in usage ping doc
Fixes broken MySQL migration for retried
Show password field mask while editing service settings
Add notes for supported schedulers and cloud providers
Move environment monitoring to environments doc
Add docs for change of Cache/Artifact restore order"
Avoid resource intensive login checks if password is not provided
Change translation for 'coding' by 'desarrollo' for Spanish
Add to docs: issues multiple assignees
rename "Add emoji" and "Award emoji" to "Add reaction" where appropriate
Add project and group notification settings info
32570 Fix border-bottom for project activity tab
Add users endpoint to frontend API class
Rename users on mysql
...
Diffstat (limited to 'app/assets/javascripts/commit/pipelines/pipelines_table.js')
-rw-r--r-- | app/assets/javascripts/commit/pipelines/pipelines_table.js | 143 |
1 files changed, 105 insertions, 38 deletions
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js index 4d5a857d705..98698143d22 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.js +++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js @@ -1,12 +1,15 @@ import Vue from 'vue'; -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'; -import eventHub from '../../vue_pipelines_index/event_hub'; -import EmptyState from '../../vue_pipelines_index/components/empty_state'; -import ErrorState from '../../vue_pipelines_index/components/error_state'; +import Visibility from 'visibilityjs'; +import pipelinesTableComponent from '../../vue_shared/components/pipelines_table'; +import PipelinesService from '../../pipelines/services/pipelines_service'; +import PipelineStore from '../../pipelines/stores/pipelines_store'; +import eventHub from '../../pipelines/event_hub'; +import emptyState from '../../pipelines/components/empty_state.vue'; +import errorState from '../../pipelines/components/error_state.vue'; +import loadingIcon from '../../vue_shared/components/loading_icon.vue'; import '../../lib/utils/common_utils'; import '../../vue_shared/vue_resource_interceptor'; +import Poll from '../../lib/utils/poll'; /** * @@ -15,15 +18,15 @@ import '../../vue_shared/vue_resource_interceptor'; * We need a store to store the received environemnts. * We need a service to communicate with the server. * - * Necessary SVG in the table are provided as props. This should be refactored - * as soon as we have Webpack and can load them directly into JS files. */ export default Vue.component('pipelines-table', { + components: { - 'pipelines-table-component': PipelinesTableComponent, - 'error-state': ErrorState, - 'empty-state': EmptyState, + pipelinesTableComponent, + errorState, + emptyState, + loadingIcon, }, /** @@ -42,6 +45,9 @@ export default Vue.component('pipelines-table', { state: store.state, isLoading: false, hasError: false, + isMakingRequest: false, + updateGraphDropdown: false, + hasMadeRequest: false, }; }, @@ -50,8 +56,22 @@ export default Vue.component('pipelines-table', { return this.hasError && !this.isLoading; }, + /** + * Empty state is only rendered if after the first request we receive no pipelines. + * + * @return {Boolean} + */ shouldRenderEmptyState() { - return !this.state.pipelines.length && !this.isLoading; + return !this.state.pipelines.length && + !this.isLoading && + this.hasMadeRequest && + !this.hasError; + }, + + shouldRenderTable() { + return !this.isLoading && + this.state.pipelines.length > 0 && + !this.hasError; }, }, @@ -64,48 +84,92 @@ export default Vue.component('pipelines-table', { * */ beforeMount() { - this.endpoint = this.$el.dataset.endpoint; - this.helpPagePath = this.$el.dataset.helpPagePath; - this.service = new PipelinesService(this.endpoint); + const element = document.querySelector('#commit-pipeline-table-view'); - this.fetchPipelines(); + this.endpoint = element.dataset.endpoint; + this.helpPagePath = element.dataset.helpPagePath; + this.service = new PipelinesService(this.endpoint); - eventHub.$on('refreshPipelines', this.fetchPipelines); - }, + this.poll = new Poll({ + resource: this.service, + method: 'getPipelines', + successCallback: this.successCallback, + errorCallback: this.errorCallback, + notificationCallback: this.setIsMakingRequest, + }); - beforeUpdate() { - if (this.state.pipelines.length && this.$children) { - this.store.startTimeAgoLoops.call(this, Vue); + if (!Visibility.hidden()) { + this.isLoading = true; + this.poll.makeRequest(); + } else { + // If tab is not visible we need to make the first request so we don't show the empty + // state without knowing if there are any pipelines + this.fetchPipelines(); } + + Visibility.change(() => { + if (!Visibility.hidden()) { + this.poll.restart(); + } else { + this.poll.stop(); + } + }); + + eventHub.$on('refreshPipelines', this.fetchPipelines); }, beforeDestroyed() { eventHub.$off('refreshPipelines'); }, + destroyed() { + this.poll.stop(); + }, + 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(); + + this.hasMadeRequest = true; + + // 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; + this.updateGraphDropdown = true; + }, + + errorCallback() { + this.hasError = true; + this.isLoading = false; + this.updateGraphDropdown = false; + }, + + setIsMakingRequest(isMakingRequest) { + this.isMakingRequest = isMakingRequest; + + if (isMakingRequest) { + this.updateGraphDropdown = false; + } }, }, template: ` <div class="content-list pipelines"> - <div class="realtime-loading" v-if="isLoading"> - <i class="fa fa-spinner fa-spin"></i> - </div> + + <loading-icon + label="Loading pipelines" + size="3" + v-if="isLoading" + /> <empty-state v-if="shouldRenderEmptyState" @@ -113,11 +177,14 @@ export default Vue.component('pipelines-table', { <error-state v-if="shouldRenderErrorState" /> - <div class="table-holder" - v-if="!isLoading && state.pipelines.length > 0"> + <div + class="table-holder" + v-if="shouldRenderTable"> <pipelines-table-component :pipelines="state.pipelines" - :service="service" /> + :service="service" + :update-graph-dropdown="updateGraphDropdown" + /> </div> </div> `, |