diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-19 21:14:01 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-19 21:14:01 +0300 |
commit | d738ba980c5ce598811b700e215ab957132f3a67 (patch) | |
tree | 5f866d1448f5b670f834fb19a8c4082e839bfac0 /app/assets/javascripts/environments | |
parent | b22f3af733282394aa18261c073adbec117a1d47 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/environments')
-rw-r--r-- | app/assets/javascripts/environments/components/deployment.vue | 14 | ||||
-rw-r--r-- | app/assets/javascripts/environments/components/deployment_status_badge.vue | 60 |
2 files changed, 73 insertions, 1 deletions
diff --git a/app/assets/javascripts/environments/components/deployment.vue b/app/assets/javascripts/environments/components/deployment.vue index 292f9a366c3..ef43ca6bc33 100644 --- a/app/assets/javascripts/environments/components/deployment.vue +++ b/app/assets/javascripts/environments/components/deployment.vue @@ -1,13 +1,25 @@ <script> +import DeploymentStatusBadge from './deployment_status_badge.vue'; + export default { + components: { + DeploymentStatusBadge, + }, props: { deployment: { type: Object, required: true, }, }, + computed: { + status() { + return this.deployment?.status; + }, + }, }; </script> <template> - <div></div> + <div> + <deployment-status-badge v-if="status" :status="status" /> + </div> </template> diff --git a/app/assets/javascripts/environments/components/deployment_status_badge.vue b/app/assets/javascripts/environments/components/deployment_status_badge.vue new file mode 100644 index 00000000000..5a026911766 --- /dev/null +++ b/app/assets/javascripts/environments/components/deployment_status_badge.vue @@ -0,0 +1,60 @@ +<script> +import { GlBadge } from '@gitlab/ui'; +import { s__ } from '~/locale'; + +const STATUS_TEXT = { + created: s__('Deployment|Created'), + running: s__('Deployment|Running'), + success: s__('Deployment|Success'), + failed: s__('Deployment|Failed'), + canceled: s__('Deployment|Cancelled'), + skipped: s__('Deployment|Skipped'), + blocked: s__('Deployment|Waiting'), +}; + +const STATUS_VARIANT = { + success: 'success', + running: 'info', + failed: 'danger', + created: 'neutral', + canceled: 'neutral', + skipped: 'neutral', + blocked: 'neutral', +}; + +const STATUS_ICON = { + success: 'status_success', + running: 'status_running', + failed: 'status_failed', + created: 'status_created', + canceled: 'status_canceled', + skipped: 'status_skipped', + blocked: 'status_manual', +}; + +export default { + components: { + GlBadge, + }, + props: { + status: { + type: String, + required: true, + }, + }, + computed: { + icon() { + return STATUS_ICON[this.status]; + }, + text() { + return STATUS_TEXT[this.status]; + }, + variant() { + return STATUS_VARIANT[this.status]; + }, + }, +}; +</script> +<template> + <gl-badge v-if="status" :icon="icon" :variant="variant">{{ text }}</gl-badge> +</template> |