diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-27 18:08:31 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-27 18:08:31 +0300 |
commit | e77cb2465fa34b8883987206a42648603d5bf073 (patch) | |
tree | f2bbff57b35c6a0c97309056a795e446a3e5b139 /app/assets/javascripts/environments | |
parent | e9de373448d0ae4dd330c131db2366a30e0c025d (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/environments')
6 files changed, 96 insertions, 5 deletions
diff --git a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue index 53a93bbce30..9db3011ba5d 100644 --- a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue +++ b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue @@ -75,7 +75,12 @@ export default { if (this.hasMultipleCommits) { if (this.graphql) { const { lastDeployment } = this.environment; - return this.commitData(lastDeployment, 'commitPath'); + return ( + // data shape comming from REST and GraphQL is unfortunately different + // once we fully migrate to GraphQL it could be streamlined + this.commitData(lastDeployment, 'commitPath') || + this.commitData(lastDeployment, 'webUrl') + ); } const { last_deployment } = this.environment; @@ -135,7 +140,6 @@ export default { csrf, cancelProps: { text: __('Cancel'), - attributes: { variant: 'danger' }, }, docsPath: helpPagePath('ci/environments/index.md', { anchor: 'retry-or-roll-back-a-deployment' }), }; @@ -157,7 +161,7 @@ export default { }}</gl-link> </template> <template #docs="{ content }"> - <gl-link :href="$options.docsLink" target="_blank">{{ content }}</gl-link> + <gl-link :href="$options.docsPath" target="_blank">{{ content }}</gl-link> </template> </gl-sprintf> </gl-modal> diff --git a/app/assets/javascripts/environments/environment_details/components/deployment_actions.vue b/app/assets/javascripts/environments/environment_details/components/deployment_actions.vue index 77d9311743c..94804f3eb6e 100644 --- a/app/assets/javascripts/environments/environment_details/components/deployment_actions.vue +++ b/app/assets/javascripts/environments/environment_details/components/deployment_actions.vue @@ -1,10 +1,18 @@ <script> +import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui'; +import { translations } from '~/environments/environment_details/constants'; import ActionsComponent from '~/environments/components/environment_actions.vue'; +import setEnvironmentToRollback from '~/environments/graphql/mutations/set_environment_to_rollback.mutation.graphql'; export default { components: { + GlButton, ActionsComponent, }, + directives: { + GlModal: GlModalDirective, + GlTooltip: GlTooltipDirective, + }, props: { actions: { // actions shape: @@ -18,14 +26,63 @@ export default { type: Array, required: true, }, + rollback: { + // rollback shape: + /* + { + id: string, + name: string, + lastDeployment: { + commit: Commit, + isLast: boolean, + }, + retryUrl: url, + }; + */ + type: Object, + required: false, + default: null, + }, }, computed: { + isRollbackAvailable() { + return Boolean(this.rollback?.lastDeployment); + }, + rollbackIcon() { + return this.rollback.lastDeployment.isLast ? 'repeat' : 'redo'; + }, isActionsShown() { return this.actions.length > 0; }, + rollbackButtonTitle() { + return this.rollback.lastDeployment?.isLast + ? translations.redeployButtonTitle + : translations.rollbackButtonTitle; + }, + }, + methods: { + onRollbackClick() { + this.$apollo.mutate({ + mutation: setEnvironmentToRollback, + variables: { + environment: this.rollback, + }, + }); + }, }, }; </script> <template> - <actions-component v-if="isActionsShown" :actions="actions" graphql /> + <div> + <actions-component v-if="isActionsShown" :actions="actions" graphql /> + <gl-button + v-if="isRollbackAvailable" + v-gl-modal.confirm-rollback-modal + v-gl-tooltip + data-testid="rollback-button" + :title="rollbackButtonTitle" + :icon="rollbackIcon" + @click="onRollbackClick" + /> + </div> </template> diff --git a/app/assets/javascripts/environments/environment_details/constants.js b/app/assets/javascripts/environments/environment_details/constants.js index 3b33d6a676e..d3683613d8c 100644 --- a/app/assets/javascripts/environments/environment_details/constants.js +++ b/app/assets/javascripts/environments/environment_details/constants.js @@ -61,6 +61,8 @@ export const translations = { ), nextPageButtonLabel: __('Next'), previousPageButtonLabel: __('Prev'), + redeployButtonTitle: s__('Environments|Re-deploy to environment'), + rollbackButtonTitle: s__('Environments|Rollback environment'), }; export const codeBlockPlaceholders = { code: ['code_open', 'code_close'] }; diff --git a/app/assets/javascripts/environments/environment_details/deployments_table.vue b/app/assets/javascripts/environments/environment_details/deployments_table.vue index 10f8c06e581..430fe8d9ece 100644 --- a/app/assets/javascripts/environments/environment_details/deployments_table.vue +++ b/app/assets/javascripts/environments/environment_details/deployments_table.vue @@ -54,7 +54,7 @@ export default { <time-ago-tooltip :time="item.deployed" /> </template> <template #cell(actions)="{ item }"> - <deployment-actions :actions="item.actions" /> + <deployment-actions :actions="item.actions" :rollback="item.rollback" /> </template> </gl-table-lite> </template> diff --git a/app/assets/javascripts/environments/environment_details/index.vue b/app/assets/javascripts/environments/environment_details/index.vue index f4657c5100a..f91e68e793f 100644 --- a/app/assets/javascripts/environments/environment_details/index.vue +++ b/app/assets/javascripts/environments/environment_details/index.vue @@ -1,7 +1,9 @@ <script> import { GlLoadingIcon } from '@gitlab/ui'; import { logError } from '~/lib/logger'; +import ConfirmRollbackModal from '~/environments/components/confirm_rollback_modal.vue'; import environmentDetailsQuery from '../graphql/queries/environment_details.query.graphql'; +import environmentToRollbackQuery from '../graphql/queries/environment_to_rollback.query.graphql'; import { convertToDeploymentTableRow } from '../helpers/deployment_data_transformation_helper'; import EmptyState from './empty_state.vue'; import DeploymentsTable from './deployments_table.vue'; @@ -10,6 +12,7 @@ import { ENVIRONMENT_DETAILS_PAGE_SIZE } from './constants'; export default { components: { + ConfirmRollbackModal, Pagination, DeploymentsTable, EmptyState, @@ -49,10 +52,14 @@ export default { }; }, }, + environmentToRollback: { + query: environmentToRollbackQuery, + }, }, data() { return { project: {}, + environmentToRollback: {}, isInitialPageDataReceived: false, isPrefetchingPages: false, }; @@ -143,5 +150,6 @@ export default { <pagination :page-info="pageInfo" :disabled="isPaginationDisabled" /> </div> <empty-state v-if="!isDeploymentTableShown && !isLoading" /> + <confirm-rollback-modal :environment="environmentToRollback" graphql /> </div> </template> diff --git a/app/assets/javascripts/environments/helpers/deployment_data_transformation_helper.js b/app/assets/javascripts/environments/helpers/deployment_data_transformation_helper.js index 9802dcbcf78..63ccb568794 100644 --- a/app/assets/javascripts/environments/helpers/deployment_data_transformation_helper.js +++ b/app/assets/javascripts/environments/helpers/deployment_data_transformation_helper.js @@ -62,6 +62,25 @@ export const getActionsFromDeploymentNode = (deploymentNode, lastDeploymentName) ); }; +export const getRollbackActionFromDeploymentNode = (deploymentNode, environment) => { + const { job, id } = deploymentNode; + + if (!job) { + return null; + } + const isLastDeployment = id === environment.lastDeployment?.id; + const { webPath } = job; + return { + id, + name: environment.name, + lastDeployment: { + commit: deploymentNode.commit, + isLast: isLastDeployment, + }, + retryUrl: `${webPath}/retry`, + }; +}; + /** * This function transforms deploymentNode object coming from GraphQL to object compatible with app/assets/javascripts/environments/environment_details/page.vue table * @param {Object} deploymentNode @@ -82,5 +101,6 @@ export const convertToDeploymentTableRow = (deploymentNode, environment) => { created: deploymentNode.createdAt || '', deployed: deploymentNode.finishedAt || '', actions: getActionsFromDeploymentNode(deploymentNode, lastDeployment?.job?.name), + rollback: getRollbackActionFromDeploymentNode(deploymentNode, environment), }; }; |