diff options
author | Pawel Chojnacki <pawel@chojnacki.ws> | 2017-06-22 15:05:52 +0200 |
---|---|---|
committer | Pawel Chojnacki <pawel@chojnacki.ws> | 2017-06-22 15:05:52 +0200 |
commit | 97c42df3b804a37e659c3cda6bd8a52570f31366 (patch) | |
tree | 97c38db7f71a93a7b0db5ca2c682d6d17479cbdb /app/assets/javascripts/pipelines/components/pipelines.vue | |
parent | 3833f1dd84dfec844443a5b1d9ba2bd2b911c0bc (diff) | |
parent | 11716f310dcc495600f5a17e08456a1abb296482 (diff) | |
download | gitlab-ce-28717-additional-metrics-review-branch.tar.gz |
Merge remote-tracking branch 'upstream/master' into 28717-additional-metrics-review-branch28717-additional-metrics-review-branch
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipelines.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines.vue | 87 |
1 files changed, 6 insertions, 81 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue index fed42d23112..01ae07aad65 100644 --- a/app/assets/javascripts/pipelines/components/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines.vue @@ -1,15 +1,9 @@ <script> - import Visibility from 'visibilityjs'; import PipelinesService from '../services/pipelines_service'; - import eventHub from '../event_hub'; - import pipelinesTableComponent from '../../vue_shared/components/pipelines_table.vue'; + import pipelinesMixin from '../mixins/pipelines'; import tablePagination from '../../vue_shared/components/table_pagination.vue'; - import emptyState from './empty_state.vue'; - import errorState from './error_state.vue'; import navigationTabs from './navigation_tabs.vue'; import navigationControls from './nav_controls.vue'; - import loadingIcon from '../../vue_shared/components/loading_icon.vue'; - import Poll from '../../lib/utils/poll'; export default { props: { @@ -20,13 +14,12 @@ }, components: { tablePagination, - pipelinesTableComponent, - emptyState, - errorState, navigationTabs, navigationControls, - loadingIcon, }, + mixins: [ + pipelinesMixin, + ], data() { const pipelinesData = document.querySelector('#pipelines-list-vue').dataset; @@ -47,11 +40,6 @@ state: this.store.state, apiScope: 'all', pagenum: 1, - isLoading: false, - hasError: false, - isMakingRequest: false, - updateGraphDropdown: false, - hasMadeRequest: false, }; }, computed: { @@ -62,9 +50,6 @@ const scope = gl.utils.getParameterByName('scope'); return scope === null ? 'all' : scope; }, - shouldRenderErrorState() { - return this.hasError && !this.isLoading; - }, /** * The empty state should only be rendered when the request is made to fetch all pipelines @@ -106,7 +91,6 @@ this.state.pipelines.length && this.state.pageInfo.total > this.state.pageInfo.perPage; }, - hasCiEnabled() { return this.hasCi !== undefined; }, @@ -129,37 +113,7 @@ }, created() { this.service = new PipelinesService(this.endpoint); - - const poll = new Poll({ - resource: this.service, - method: 'getPipelines', - data: { page: this.pageParameter, scope: this.scopeParameter }, - successCallback: this.successCallback, - errorCallback: this.errorCallback, - notificationCallback: this.setIsMakingRequest, - }); - - if (!Visibility.hidden()) { - this.isLoading = true; - 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()) { - poll.restart(); - } else { - poll.stop(); - } - }); - - eventHub.$on('refreshPipelines', this.fetchPipelines); - }, - beforeDestroy() { - eventHub.$off('refreshPipelines'); + this.requestData = { page: this.pageParameter, scope: this.scopeParameter }; }, methods: { /** @@ -174,15 +128,6 @@ return param; }, - fetchPipelines() { - if (!this.isMakingRequest) { - this.isLoading = true; - - this.service.getPipelines({ scope: this.scopeParameter, page: this.pageParameter }) - .then(response => this.successCallback(response)) - .catch(() => this.errorCallback()); - } - }, successCallback(resp) { const response = { headers: resp.headers, @@ -190,33 +135,14 @@ }; this.store.storeCount(response.body.count); - this.store.storePipelines(response.body.pipelines); this.store.storePagination(response.headers); - - this.isLoading = false; - this.updateGraphDropdown = true; - this.hasMadeRequest = true; - }, - - errorCallback() { - this.hasError = true; - this.isLoading = false; - this.updateGraphDropdown = false; - }, - - setIsMakingRequest(isMakingRequest) { - this.isMakingRequest = isMakingRequest; - - if (isMakingRequest) { - this.updateGraphDropdown = false; - } + this.setCommonData(response.body.pipelines); }, }, }; </script> <template> <div :class="cssClass"> - <div class="top-area scrolling-tabs-container inner-page-scroll-tabs" v-if="!isLoading && !shouldRenderEmptyState"> @@ -274,7 +200,6 @@ <pipelines-table-component :pipelines="state.pipelines" - :service="service" :update-graph-dropdown="updateGraphDropdown" /> </div> |