debian-mirror-gitlab/app/assets/javascripts/pipelines/mixins/pipelines.js

166 lines
4.6 KiB
JavaScript
Raw Normal View History

2017-09-10 17:25:29 +05:30
import Visibility from 'visibilityjs';
2019-01-03 12:48:30 +05:30
import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
2018-03-27 19:54:05 +05:30
import { __ } from '../../locale';
2018-03-17 18:26:18 +05:30
import Flash from '../../flash';
2017-09-10 17:25:29 +05:30
import Poll from '../../lib/utils/poll';
2018-03-27 19:54:05 +05:30
import EmptyState from '../components/empty_state.vue';
import SvgBlankState from '../components/blank_state.vue';
import PipelinesTableComponent from '../components/pipelines_table.vue';
2017-09-10 17:25:29 +05:30
import eventHub from '../event_hub';
2018-10-15 14:42:47 +05:30
import { CANCEL_REQUEST } from '../constants';
2017-09-10 17:25:29 +05:30
export default {
components: {
2018-03-27 19:54:05 +05:30
PipelinesTableComponent,
SvgBlankState,
EmptyState,
2018-12-13 13:39:08 +05:30
GlLoadingIcon,
2017-09-10 17:25:29 +05:30
},
data() {
return {
isLoading: false,
hasError: false,
isMakingRequest: false,
updateGraphDropdown: false,
hasMadeRequest: false,
};
},
2018-12-13 13:39:08 +05:30
computed: {
shouldRenderPagination() {
return (
!this.isLoading &&
this.state.pipelines.length &&
this.state.pageInfo.total > this.state.pageInfo.perPage
);
},
},
2017-09-10 17:25:29 +05:30
beforeMount() {
this.poll = new Poll({
resource: this.service,
method: 'getPipelines',
data: this.requestData ? this.requestData : undefined,
successCallback: this.successCallback,
errorCallback: this.errorCallback,
notificationCallback: this.setIsMakingRequest,
});
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('postAction', this.postAction);
2018-11-08 19:23:39 +05:30
eventHub.$on('retryPipeline', this.postAction);
2018-10-15 14:42:47 +05:30
eventHub.$on('clickedDropdown', this.updateTable);
eventHub.$on('refreshPipelinesTable', this.fetchPipelines);
2017-09-10 17:25:29 +05:30
},
beforeDestroy() {
2018-05-09 12:01:36 +05:30
eventHub.$off('postAction', this.postAction);
2018-11-08 19:23:39 +05:30
eventHub.$off('retryPipeline', this.postAction);
2018-10-15 14:42:47 +05:30
eventHub.$off('clickedDropdown', this.updateTable);
eventHub.$off('refreshPipelinesTable', this.fetchPipelines);
2017-09-10 17:25:29 +05:30
},
destroyed() {
this.poll.stop();
},
methods: {
2018-12-13 13:39:08 +05:30
/**
* Handles URL and query parameter changes.
* When the user uses the pagination or the tabs,
* - update URL
* - Make API request to the server with new parameters
* - Update the polling function
* - Update the internal state
*/
updateContent(parameters) {
this.updateInternalState(parameters);
// fetch new data
return this.service
.getPipelines(this.requestData)
.then(response => {
this.isLoading = false;
this.successCallback(response);
// restart polling
this.poll.restart({ data: this.requestData });
})
.catch(() => {
this.isLoading = false;
this.errorCallback();
// restart polling
this.poll.restart({ data: this.requestData });
});
},
2018-10-15 14:42:47 +05:30
updateTable() {
// Cancel ongoing request
if (this.isMakingRequest) {
this.service.cancelationSource.cancel(CANCEL_REQUEST);
}
// Stop polling
this.poll.stop();
// Update the table
2018-11-08 19:23:39 +05:30
return this.getPipelines().then(() => this.poll.restart());
2018-10-15 14:42:47 +05:30
},
2017-09-10 17:25:29 +05:30
fetchPipelines() {
if (!this.isMakingRequest) {
this.isLoading = true;
2018-10-15 14:42:47 +05:30
this.getPipelines();
2017-09-10 17:25:29 +05:30
}
},
2018-10-15 14:42:47 +05:30
getPipelines() {
2018-11-08 19:23:39 +05:30
return this.service
.getPipelines(this.requestData)
2018-10-15 14:42:47 +05:30
.then(response => this.successCallback(response))
2018-11-08 19:23:39 +05:30
.catch(error => this.errorCallback(error));
2018-10-15 14:42:47 +05:30
},
2017-09-10 17:25:29 +05:30
setCommonData(pipelines) {
this.store.storePipelines(pipelines);
this.isLoading = false;
this.updateGraphDropdown = true;
this.hasMadeRequest = true;
2018-10-15 14:42:47 +05:30
// In case the previous polling request returned an error, we need to reset it
if (this.hasError) {
this.hasError = false;
}
2017-09-10 17:25:29 +05:30
},
2018-10-15 14:42:47 +05:30
errorCallback(error) {
2018-03-27 19:54:05 +05:30
this.hasMadeRequest = true;
2018-10-15 14:42:47 +05:30
this.isLoading = false;
if (error && error.message && error.message !== CANCEL_REQUEST) {
this.hasError = true;
this.updateGraphDropdown = false;
}
2017-09-10 17:25:29 +05:30
},
setIsMakingRequest(isMakingRequest) {
this.isMakingRequest = isMakingRequest;
if (isMakingRequest) {
this.updateGraphDropdown = false;
}
},
postAction(endpoint) {
2018-11-08 19:23:39 +05:30
this.service
.postAction(endpoint)
2018-05-09 12:01:36 +05:30
.then(() => this.fetchPipelines())
2018-03-27 19:54:05 +05:30
.catch(() => Flash(__('An error occurred while making the request.')));
2017-09-10 17:25:29 +05:30
},
},
};