fa2af5e0f5
Reduced the technical debt around our JS flash function by making it a module that is imported rather than relying on the global function. The global function still exists mainly for technical debt with how some requests are being completed, but new JS should import the module directly. Also reduces some tech debt in the file by removing the need for jQuery. Instead Flash is now 100% vanilla JS.
102 lines
2.7 KiB
JavaScript
102 lines
2.7 KiB
JavaScript
import Visibility from 'visibilityjs';
|
|
import Flash from '../../flash';
|
|
import Poll from '../../lib/utils/poll';
|
|
import emptyState from '../components/empty_state.vue';
|
|
import errorState from '../components/error_state.vue';
|
|
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
|
|
import pipelinesTableComponent from '../components/pipelines_table.vue';
|
|
import eventHub from '../event_hub';
|
|
|
|
export default {
|
|
components: {
|
|
pipelinesTableComponent,
|
|
errorState,
|
|
emptyState,
|
|
loadingIcon,
|
|
},
|
|
computed: {
|
|
shouldRenderErrorState() {
|
|
return this.hasError && !this.isLoading;
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
isLoading: false,
|
|
hasError: false,
|
|
isMakingRequest: false,
|
|
updateGraphDropdown: false,
|
|
hasMadeRequest: false,
|
|
};
|
|
},
|
|
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('refreshPipelines', this.fetchPipelines);
|
|
eventHub.$on('postAction', this.postAction);
|
|
},
|
|
beforeDestroy() {
|
|
eventHub.$off('refreshPipelines');
|
|
eventHub.$on('postAction', this.postAction);
|
|
},
|
|
destroyed() {
|
|
this.poll.stop();
|
|
},
|
|
methods: {
|
|
fetchPipelines() {
|
|
if (!this.isMakingRequest) {
|
|
this.isLoading = true;
|
|
|
|
this.service.getPipelines(this.requestData)
|
|
.then(response => this.successCallback(response))
|
|
.catch(() => this.errorCallback());
|
|
}
|
|
},
|
|
setCommonData(pipelines) {
|
|
this.store.storePipelines(pipelines);
|
|
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;
|
|
}
|
|
},
|
|
postAction(endpoint) {
|
|
this.service.postAction(endpoint)
|
|
.then(() => eventHub.$emit('refreshPipelines'))
|
|
.catch(() => new Flash('An error occurred while making the request.'));
|
|
},
|
|
},
|
|
};
|