1 files changed, 91 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/deployment_instance.vue b/app/assets/javascripts/vue_shared/components/deployment_instance.vue
new file mode 100644
index 00000000000..41b783aa011
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/deployment_instance.vue
@@ -0,0 +1,91 @@
+<script>
+/**
+ * An instance in deploy board is represented by a square in this mockup:
+ * https://gitlab.com/gitlab-org/gitlab-foss/uploads/2f655655c0eadf655d0ae7467b53002a/environments__deploy-graphic.png
+ *
+ * Each instance has a state and a tooltip.
+ * The state needs to be represented in different colors,
+ * see more information about this in
+ * https://gitlab.com/gitlab-org/gitlab/uploads/f1f00df6293d30f241dbeaa876a1e939/Screen_Shot_2019-11-26_at_3.35.43_PM.png
+ *
+ * An instance can represent a normal deploy or a canary deploy. In the latter we need to provide
+ * this information in the tooltip and the colors.
+ * Mockup is https://gitlab.com/gitlab-org/gitlab/issues/35570
+ */
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
+
+export default {
+  components: {
+    GlLink,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+
+  props: {
+    /**
+     * Represents the status of the pod. Each state is represented with a different
+     * color.
+     * It should be one of the following:
+     * succeeded || running || failed || pending || unknown
+     */
+    status: {
+      type: String,
+      required: true,
+      default: 'succeeded',
+    },
+
+    tooltipText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+
+    stable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+
+    podName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+
+    logsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  computed: {
+    isLink() {
+      return this.logsPath !== '' && this.podName !== '';
+    },
+
+    cssClass() {
+      return {
+        [`deployment-instance-${this.status}`]: true,
+        'deployment-instance-canary': !this.stable,
+        link: this.isLink,
+      };
+    },
+
+    computedLogPath() {
+      return this.isLink ? mergeUrlParams({ pod_name: this.podName }, this.logsPath) : null;
+    },
+  },
+};
+</script>
+<template>
+  <gl-link
+    v-gl-tooltip
+    :class="cssClass"
+    :title="tooltipText"
+    :href="computedLogPath"
+    class="deployment-instance d-flex justify-content-center align-items-center"
+  />
+</template>