diff options
Diffstat (limited to 'app/assets/javascripts/releases/components/issuable_stats.vue')
-rw-r--r-- | app/assets/javascripts/releases/components/issuable_stats.vue | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/app/assets/javascripts/releases/components/issuable_stats.vue b/app/assets/javascripts/releases/components/issuable_stats.vue new file mode 100644 index 00000000000..d005d8e10dd --- /dev/null +++ b/app/assets/javascripts/releases/components/issuable_stats.vue @@ -0,0 +1,97 @@ +<script> +import { GlLink, GlBadge, GlSprintf } from '@gitlab/ui'; + +export default { + name: 'IssuableStats', + components: { + GlLink, + GlBadge, + GlSprintf, + }, + props: { + label: { + type: String, + required: true, + }, + total: { + type: Number, + required: true, + }, + closed: { + type: Number, + required: true, + }, + merged: { + type: Number, + required: false, + default: null, + }, + openedPath: { + type: String, + required: false, + default: '', + }, + closedPath: { + type: String, + required: false, + default: '', + }, + mergedPath: { + type: String, + required: false, + default: '', + }, + }, + computed: { + opened() { + return this.total - (this.closed + (this.merged || 0)); + }, + showMerged() { + return this.merged != null; + }, + }, +}; +</script> + +<template> + <div class="gl-display-flex gl-flex-direction-column gl-flex-shrink-0 gl-mr-6 gl-mb-5"> + <span class="gl-mb-2"> + {{ label }} + <gl-badge variant="muted" size="sm">{{ total }}</gl-badge> + </span> + <div class="gl-display-flex"> + <span class="gl-white-space-pre-wrap" data-testid="open-stat"> + <gl-sprintf :message="__('Open: %{open}')"> + <template #open> + <gl-link v-if="openedPath" :href="openedPath">{{ opened }}</gl-link> + <template v-else>{{ opened }}</template> + </template> + </gl-sprintf> + </span> + + <template v-if="showMerged"> + <span class="gl-mx-2">•</span> + + <span class="gl-white-space-pre-wrap" data-testid="merged-stat"> + <gl-sprintf :message="__('Merged: %{merged}')"> + <template #merged> + <gl-link v-if="mergedPath" :href="mergedPath">{{ merged }}</gl-link> + <template v-else>{{ merged }}</template> + </template> + </gl-sprintf> + </span> + </template> + + <span class="gl-mx-2">•</span> + + <span class="gl-white-space-pre-wrap" data-testid="closed-stat"> + <gl-sprintf :message="__('Closed: %{closed}')"> + <template #closed> + <gl-link v-if="closedPath" :href="closedPath">{{ closed }}</gl-link> + <template v-else>{{ closed }}</template> + </template> + </gl-sprintf> + </span> + </div> + </div> +</template> |