gitlab-org--gitlab-foss/app/assets/javascripts/environments/components/canary_update_modal.vue

134 lines
3.7 KiB
Vue
Raw Normal View History

<script>
import { GlAlert, GlModal, GlSprintf } from '@gitlab/ui';
import { __, s__ } from '~/locale';
import { CANARY_UPDATE_MODAL } from '../constants';
import updateCanaryIngress from '../graphql/mutations/update_canary_ingress.mutation.graphql';
export default {
components: {
GlAlert,
GlModal,
GlSprintf,
},
props: {
environment: {
type: Object,
required: false,
default: () => ({}),
},
weight: {
type: Number,
required: false,
default: 0,
},
visible: {
type: Boolean,
required: false,
default: false,
},
},
translations: {
title: s__('CanaryIngress|Change the ratio of canary deployments?'),
ratioChange: s__(
'CanaryIngress|You are changing the ratio of the canary rollout for %{environment} compared to the stable deployment to:',
),
stableWeight: s__('CanaryIngress|%{boldStart}Stable:%{boldEnd} %{stable}'),
canaryWeight: s__('CanaryIngress|%{boldStart}Canary:%{boldEnd} %{canary}'),
deploymentWarning: s__(
'CanaryIngress|Doing so will set a deployment change in progress. This temporarily blocks any further configuration until the deployment is finished.',
),
},
modal: {
modalId: CANARY_UPDATE_MODAL,
actionPrimary: {
text: s__('CanaryIngress|Change ratio'),
attributes: [{ variant: 'info' }],
},
actionCancel: { text: __('Cancel') },
static: true,
},
data() {
return { error: '', dismissed: true };
},
computed: {
stableWeight() {
return (100 - this.weight).toString();
},
canaryWeight() {
return this.weight.toString();
},
hasError() {
return Boolean(this.error);
},
environmentName() {
return this.environment?.name ?? '';
},
},
methods: {
submitCanaryChange() {
return this.$apollo
.mutate({
mutation: updateCanaryIngress,
variables: {
input: {
id: this.environment.global_id,
weight: this.weight,
},
},
})
.then(
({
data: {
environmentsCanaryIngressUpdate: {
errors: [error],
},
},
}) => {
this.error = error;
},
)
.catch(() => {
this.error = __('Something went wrong. Please try again later');
});
},
dismiss() {
this.error = '';
},
},
};
</script>
<template>
<div>
<gl-alert v-if="hasError" variant="danger" @dismiss="dismiss">{{ error }}</gl-alert>
<gl-modal v-bind="$options.modal" :visible="visible" @primary="submitCanaryChange">
<template #modal-title>{{ $options.translations.title }}</template>
<template #default>
<p>
<gl-sprintf :message="$options.translations.ratioChange">
<template #environment>{{ environmentName }}</template>
</gl-sprintf>
</p>
<ul class="gl-list-style-none gl-p-0">
<li>
<gl-sprintf :message="$options.translations.stableWeight">
<template #bold="{ content }">
<span class="gl-font-weight-bold">{{ content }}</span>
</template>
<template #stable>{{ stableWeight }}</template>
</gl-sprintf>
</li>
<li>
<gl-sprintf :message="$options.translations.canaryWeight">
<template #bold="{ content }">
<span class="gl-font-weight-bold">{{ content }}</span>
</template>
<template #canary>{{ canaryWeight }}</template>
</gl-sprintf>
</li>
</ul>
<p>{{ $options.translations.deploymentWarning }}</p>
</template>
</gl-modal>
</div>
</template>