87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
|
<script>
|
||
|
|
import { GlCollapse, GlButton } from '@gitlab/ui';
|
||
|
|
import { __, s__ } from '~/locale';
|
||
|
|
import setEnvironmentToChangeCanaryMutation from '../graphql/mutations/set_environment_to_change_canary.mutation.graphql';
|
||
|
|
import DeployBoard from './deploy_board.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
DeployBoard,
|
||
|
|
GlButton,
|
||
|
|
GlCollapse,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
rolloutStatus: {
|
||
|
|
required: true,
|
||
|
|
type: Object,
|
||
|
|
},
|
||
|
|
environment: {
|
||
|
|
required: true,
|
||
|
|
type: Object,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return { visible: false };
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
icon() {
|
||
|
|
return this.visible ? 'angle-down' : 'angle-right';
|
||
|
|
},
|
||
|
|
label() {
|
||
|
|
return this.visible ? this.$options.i18n.collapse : this.$options.i18n.expand;
|
||
|
|
},
|
||
|
|
isLoading() {
|
||
|
|
return this.rolloutStatus.status === 'loading';
|
||
|
|
},
|
||
|
|
isEmpty() {
|
||
|
|
return this.rolloutStatus.status === 'not_found';
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
toggleCollapse() {
|
||
|
|
this.visible = !this.visible;
|
||
|
|
},
|
||
|
|
changeCanaryWeight(weight) {
|
||
|
|
this.$apollo.mutate({
|
||
|
|
mutation: setEnvironmentToChangeCanaryMutation,
|
||
|
|
variables: {
|
||
|
|
environment: this.environment,
|
||
|
|
weight,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
i18n: {
|
||
|
|
collapse: __('Collapse'),
|
||
|
|
expand: __('Expand'),
|
||
|
|
pods: s__('DeployBoard|Kubernetes Pods'),
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<div>
|
||
|
|
<gl-button
|
||
|
|
class="gl-mr-4 gl-min-w-fit-content"
|
||
|
|
:icon="icon"
|
||
|
|
:aria-label="label"
|
||
|
|
size="small"
|
||
|
|
category="tertiary"
|
||
|
|
@click="toggleCollapse"
|
||
|
|
/>
|
||
|
|
<span>{{ $options.i18n.pods }}</span>
|
||
|
|
</div>
|
||
|
|
<gl-collapse :visible="visible">
|
||
|
|
<deploy-board
|
||
|
|
:deploy-board-data="rolloutStatus"
|
||
|
|
:is-loading="isLoading"
|
||
|
|
:is-empty="isEmpty"
|
||
|
|
:environment="environment"
|
||
|
|
graphql
|
||
|
|
class="gl-reset-bg!"
|
||
|
|
@changeCanaryWeight="changeCanaryWeight"
|
||
|
|
/>
|
||
|
|
</gl-collapse>
|
||
|
|
</div>
|
||
|
|
</template>
|