summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
blob: caa28bff6db6ef70b3d4948e8c618dfc386c0dc3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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>