diff options
Diffstat (limited to 'app/assets/javascripts/environments/components/deploy_board_wrapper.vue')
-rw-r--r-- | app/assets/javascripts/environments/components/deploy_board_wrapper.vue | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/app/assets/javascripts/environments/components/deploy_board_wrapper.vue b/app/assets/javascripts/environments/components/deploy_board_wrapper.vue new file mode 100644 index 00000000000..d9d77088ad3 --- /dev/null +++ b/app/assets/javascripts/environments/components/deploy_board_wrapper.vue @@ -0,0 +1,86 @@ +<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> |