1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
<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';
const EnvironmentApprovalComponent = import(
'ee_component/environments/components/environment_approval.vue'
);
export default {
components: {
GlButton,
ActionsComponent,
EnvironmentApproval: () => EnvironmentApprovalComponent,
},
directives: {
GlModal: GlModalDirective,
GlTooltip: GlTooltipDirective,
},
props: {
actions: {
// actions shape:
/* Array<{
playable: boolean,
playPath: url,
name: string
scheduledAt: ISO_timestamp | null
}>
*/
type: Array,
required: true,
},
rollback: {
// rollback shape:
/*
{
id: string,
name: string,
lastDeployment: {
commit: Commit,
isLast: boolean,
},
retryUrl: url,
};
*/
type: Object,
required: false,
default: null,
},
// approvalEnvironment shape:
/* {
isApprovalActionAvailable: boolean,
deploymentIid: string,
environment: {
name: string,
tier: string,
requiredApprovalCount: number,
},
*/
approvalEnvironment: {
type: Object,
required: false,
default: () => ({
isApprovalActionAvailable: false,
}),
},
},
computed: {
isRollbackAvailable() {
return Boolean(this.rollback?.lastDeployment);
},
rollbackIcon() {
return this.rollback.lastDeployment.isLast ? 'repeat' : 'redo';
},
isActionsShown() {
return this.actions.length > 0;
},
deploymentIid() {
return this.approvalEnvironment.deploymentIid;
},
environment() {
return this.approvalEnvironment.environment;
},
rollbackButtonTitle() {
return this.rollback.lastDeployment?.isLast
? translations.redeployButtonTitle
: translations.rollbackButtonTitle;
},
},
methods: {
onRollbackClick() {
this.$apollo.mutate({
mutation: setEnvironmentToRollback,
variables: {
environment: this.rollback,
},
});
},
},
};
</script>
<template>
<div>
<actions-component v-if="isActionsShown" :actions="actions" graphql />
<gl-button
v-if="isRollbackAvailable"
v-gl-modal.confirm-rollback-modal
v-gl-tooltip
:title="rollbackButtonTitle"
:icon="rollbackIcon"
:aria-label="rollbackButtonTitle"
@click="onRollbackClick"
/>
<environment-approval
v-if="approvalEnvironment.isApprovalActionAvailable"
:environment="environment"
:deployment-iid="deploymentIid"
:show-text="false"
/>
</div>
</template>
|
