debian-mirror-gitlab/app/assets/javascripts/environments/mixins/environments_mixin.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

293 lines
8.8 KiB
JavaScript
Raw Normal View History

2018-03-17 18:26:18 +05:30
/**
* Common code between environmets app and folder view
*/
2020-04-22 19:07:51 +05:30
import { isEqual, isFunction, omitBy } from 'lodash';
2018-03-17 18:26:18 +05:30
import Visibility from 'visibilityjs';
2021-09-30 23:02:18 +05:30
import createFlash from '~/flash';
2022-06-21 17:19:12 +05:30
import Poll from '~/lib/utils/poll';
import { getParameterByName } from '~/lib/utils/url_utility';
import { s__, __ } from '~/locale';
import tabs from '~/vue_shared/components/navigation_tabs.vue';
import tablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
2021-03-11 19:13:27 +05:30
import container from '../components/container.vue';
import environmentTable from '../components/environments_table.vue';
2018-03-17 18:26:18 +05:30
import eventHub from '../event_hub';
import EnvironmentsService from '../services/environments_service';
2021-03-11 19:13:27 +05:30
import EnvironmentsStore from '../stores/environments_store';
2018-03-17 18:26:18 +05:30
2017-09-10 17:25:29 +05:30
export default {
2018-03-17 18:26:18 +05:30
components: {
environmentTable,
container,
tabs,
tablePagination,
},
data() {
const store = new EnvironmentsStore();
2020-04-22 19:07:51 +05:30
const isDetailView = document.body.contains(
document.getElementById('environments-detail-view'),
);
2018-03-17 18:26:18 +05:30
return {
store,
state: store.state,
isLoading: false,
isMakingRequest: false,
scope: getParameterByName('scope') || 'available',
page: getParameterByName('page') || '1',
requestData: {},
2018-11-18 11:00:15 +05:30
environmentInStopModal: {},
2020-04-22 19:07:51 +05:30
environmentInDeleteModal: {},
2019-07-07 11:18:12 +05:30
environmentInRollbackModal: {},
2020-04-22 19:07:51 +05:30
isDetailView,
2018-03-17 18:26:18 +05:30
};
},
2017-09-10 17:25:29 +05:30
methods: {
saveData(resp) {
2018-11-08 19:23:39 +05:30
this.isLoading = false;
2019-07-07 11:18:12 +05:30
// Prevent the absence of the nested flag from causing mismatches
const response = this.filterNilValues(resp.config.params);
const request = this.filterNilValues(this.requestData);
2020-04-22 19:07:51 +05:30
if (isEqual(response, request)) {
2018-11-08 19:23:39 +05:30
this.store.storeAvailableCount(resp.data.available_count);
this.store.storeStoppedCount(resp.data.stopped_count);
this.store.storeEnvironments(resp.data.environments);
2020-03-13 15:44:24 +05:30
this.store.setReviewAppDetails(resp.data.review_app);
2018-11-08 19:23:39 +05:30
this.store.setPagination(resp.headers);
}
2017-09-10 17:25:29 +05:30
},
2018-03-17 18:26:18 +05:30
2019-07-07 11:18:12 +05:30
filterNilValues(obj) {
2021-03-08 18:12:59 +05:30
return omitBy(obj, (value) => value === undefined || value === null);
2019-07-07 11:18:12 +05:30
},
2018-03-17 18:26:18 +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
2018-12-13 13:39:08 +05:30
return this.service
.fetchEnvironments(this.requestData)
2021-03-08 18:12:59 +05:30
.then((response) => {
2019-07-07 11:18:12 +05:30
this.successCallback(response);
this.poll.enable({ data: this.requestData, response });
2018-03-17 18:26:18 +05:30
})
.catch(() => {
this.errorCallback();
// restart polling
this.poll.restart();
});
},
errorCallback() {
this.isLoading = false;
2021-09-30 23:02:18 +05:30
createFlash({
message: s__('Environments|An error occurred while fetching the environments.'),
});
2018-03-17 18:26:18 +05:30
},
2020-03-13 15:44:24 +05:30
postAction({
endpoint,
errorMessage = s__('Environments|An error occurred while making the request.'),
}) {
2018-03-17 18:26:18 +05:30
if (!this.isMakingRequest) {
this.isLoading = true;
2018-12-13 13:39:08 +05:30
this.service
.postAction(endpoint)
2021-10-27 15:23:28 +05:30
.then(() => {
// Originally, the detail page buttons were implemented as <form>s that POSTed
// to the server, which would naturally result in a page refresh.
// When environment details page was converted to Vue, the buttons were updated to trigger
// HTTP requests using `axios`, which did not cause a refresh on completion.
// To preserve the original behavior, we manually reload the page when
// network requests complete successfully.
if (!this.isDetailView) {
this.fetchEnvironments();
} else {
window.location.reload();
}
})
2021-03-08 18:12:59 +05:30
.catch((err) => {
2018-03-17 18:26:18 +05:30
this.isLoading = false;
2021-09-30 23:02:18 +05:30
createFlash({
message: isFunction(errorMessage) ? errorMessage(err.response.data) : errorMessage,
});
2018-03-17 18:26:18 +05:30
});
}
},
fetchEnvironments() {
this.isLoading = true;
2018-12-13 13:39:08 +05:30
return this.service
.fetchEnvironments(this.requestData)
2018-03-17 18:26:18 +05:30
.then(this.successCallback)
.catch(this.errorCallback);
},
2018-11-18 11:00:15 +05:30
updateStopModal(environment) {
this.environmentInStopModal = environment;
},
2020-04-22 19:07:51 +05:30
updateDeleteModal(environment) {
this.environmentInDeleteModal = environment;
},
2019-07-07 11:18:12 +05:30
updateRollbackModal(environment) {
this.environmentInRollbackModal = environment;
},
2018-11-18 11:00:15 +05:30
stopEnvironment(environment) {
const endpoint = environment.stop_path;
2018-12-13 13:39:08 +05:30
const errorMessage = s__(
'Environments|An error occurred while stopping the environment, please try again',
);
2018-11-18 11:00:15 +05:30
this.postAction({ endpoint, errorMessage });
},
2019-07-07 11:18:12 +05:30
2020-04-22 19:07:51 +05:30
deleteEnvironment(environment) {
const endpoint = environment.delete_path;
2020-07-28 23:09:34 +05:30
const { onSingleEnvironmentPage } = environment;
2020-04-22 19:07:51 +05:30
const errorMessage = s__(
'Environments|An error occurred while deleting the environment. Check if the environment stopped; if not, stop it and try again.',
);
this.service
.deleteAction(endpoint)
.then(() => {
2020-07-28 23:09:34 +05:30
if (!onSingleEnvironmentPage) {
2020-04-22 19:07:51 +05:30
// Reload as a first solution to bust the ETag cache
window.location.reload();
return;
}
const url = window.location.href.split('/');
url.pop();
window.location.href = url.join('/');
})
.catch(() => {
2021-09-30 23:02:18 +05:30
createFlash({
message: errorMessage,
});
2020-04-22 19:07:51 +05:30
});
},
2019-07-07 11:18:12 +05:30
rollbackEnvironment(environment) {
const { retryUrl, isLastDeployment } = environment;
const errorMessage = isLastDeployment
? s__('Environments|An error occurred while re-deploying the environment, please try again')
: s__(
'Environments|An error occurred while rolling back the environment, please try again',
);
this.postAction({ endpoint: retryUrl, errorMessage });
},
2020-03-13 15:44:24 +05:30
cancelAutoStop(autoStopPath) {
const errorMessage = ({ message }) =>
message ||
s__('Environments|An error occurred while canceling the auto stop, please try again');
this.postAction({ endpoint: autoStopPath, errorMessage });
},
2018-03-17 18:26:18 +05:30
},
computed: {
tabs() {
return [
{
2021-12-11 22:18:48 +05:30
name: __('Available'),
2018-03-17 18:26:18 +05:30
scope: 'available',
count: this.state.availableCounter,
isActive: this.scope === 'available',
},
{
2021-12-11 22:18:48 +05:30
name: __('Stopped'),
2018-03-17 18:26:18 +05:30
scope: 'stopped',
count: this.state.stoppedCounter,
isActive: this.scope === 'stopped',
},
];
},
2021-09-30 23:02:18 +05:30
activeTab() {
return this.tabs.findIndex(({ isActive }) => isActive) ?? 0;
},
2018-03-17 18:26:18 +05:30
},
/**
* Fetches all the environments and stores them.
* Toggles loading property.
*/
created() {
this.service = new EnvironmentsService(this.endpoint);
2019-03-02 22:35:43 +05:30
this.requestData = { page: this.page, scope: this.scope, nested: true };
2018-03-17 18:26:18 +05:30
2020-04-22 19:07:51 +05:30
if (!this.isDetailView) {
this.poll = new Poll({
resource: this.service,
method: 'fetchEnvironments',
data: this.requestData,
successCallback: this.successCallback,
errorCallback: this.errorCallback,
2021-03-08 18:12:59 +05:30
notificationCallback: (isMakingRequest) => {
2020-04-22 19:07:51 +05:30
this.isMakingRequest = isMakingRequest;
},
});
2018-03-17 18:26:18 +05:30
if (!Visibility.hidden()) {
2020-04-22 19:07:51 +05:30
this.isLoading = true;
this.poll.makeRequest();
2018-03-17 18:26:18 +05:30
} else {
2020-04-22 19:07:51 +05:30
this.fetchEnvironments();
2018-03-17 18:26:18 +05:30
}
2020-04-22 19:07:51 +05:30
Visibility.change(() => {
if (!Visibility.hidden()) {
this.poll.restart();
} else {
this.poll.stop();
}
});
}
2018-03-17 18:26:18 +05:30
eventHub.$on('postAction', this.postAction);
2020-04-22 19:07:51 +05:30
2018-11-18 11:00:15 +05:30
eventHub.$on('requestStopEnvironment', this.updateStopModal);
eventHub.$on('stopEnvironment', this.stopEnvironment);
2019-07-07 11:18:12 +05:30
2020-04-22 19:07:51 +05:30
eventHub.$on('requestDeleteEnvironment', this.updateDeleteModal);
eventHub.$on('deleteEnvironment', this.deleteEnvironment);
2019-07-07 11:18:12 +05:30
eventHub.$on('requestRollbackEnvironment', this.updateRollbackModal);
eventHub.$on('rollbackEnvironment', this.rollbackEnvironment);
2020-03-13 15:44:24 +05:30
eventHub.$on('cancelAutoStop', this.cancelAutoStop);
2018-03-17 18:26:18 +05:30
},
2018-11-18 11:00:15 +05:30
beforeDestroy() {
eventHub.$off('postAction', this.postAction);
2020-04-22 19:07:51 +05:30
2018-11-18 11:00:15 +05:30
eventHub.$off('requestStopEnvironment', this.updateStopModal);
eventHub.$off('stopEnvironment', this.stopEnvironment);
2019-07-07 11:18:12 +05:30
2020-04-22 19:07:51 +05:30
eventHub.$off('requestDeleteEnvironment', this.updateDeleteModal);
eventHub.$off('deleteEnvironment', this.deleteEnvironment);
2019-07-07 11:18:12 +05:30
eventHub.$off('requestRollbackEnvironment', this.updateRollbackModal);
eventHub.$off('rollbackEnvironment', this.rollbackEnvironment);
2020-03-13 15:44:24 +05:30
eventHub.$off('cancelAutoStop', this.cancelAutoStop);
2017-09-10 17:25:29 +05:30
},
};