diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-05-12 11:28:26 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-05-12 11:28:26 +0000 |
commit | a1348a5d2932784b29b0b9fb18e519f18c085e62 (patch) | |
tree | 4dd778c78e4ac3ea1d1803de430ce29407cd7937 /app/assets/javascripts/vue_shared/components/ci_badge_link.vue | |
parent | aa6f44328ed22ebab51440a5a04f6b62d6471b78 (diff) | |
download | gitlab-ce-a1348a5d2932784b29b0b9fb18e519f18c085e62.tar.gz |
Uniform CI status components in vue
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/ci_badge_link.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/ci_badge_link.vue | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue new file mode 100644 index 00000000000..caa28bff6db --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue @@ -0,0 +1,52 @@ +<script> +import ciIcon from './ci_icon.vue'; +/** + * Renders CI Badge link with CI icon and status text based on + * API response shared between all places where it is used. + * + * Receives status object containing: + * status: { + * details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url + * group:"running" // used for CSS class + * icon: "icon_status_running" // used to render the icon + * label:"running" // used for potential tooltip + * text:"running" // text rendered + * } + * + * Used in: + * - Pipelines table - first column + * - Jobs table - first column + * - Pipeline show view - header + * - Job show view - header + * - MR widget + */ + +export default { + props: { + status: { + type: Object, + required: true, + }, + }, + + components: { + ciIcon, + }, + + computed: { + cssClass() { + const className = this.status.group; + + return className ? `ci-status ci-${this.status.group}` : 'ci-status'; + }, + }, +}; +</script> +<template> + <a + :href="status.details_path" + :class="cssClass"> + <ci-icon :status="status" /> + {{status.text}} + </a> +</template> |