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>