1<script> 2import { GlLink, GlTooltipDirective, GlIcon } from '@gitlab/ui'; 3import dateFormat from 'dateformat'; 4import { getTimeago } from '~/lib/utils/datetime_utility'; 5import { truncateSha } from '~/lib/utils/text_utility'; 6import { __, sprintf } from '~/locale'; 7import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; 8import ExpandButton from '~/vue_shared/components/expand_button.vue'; 9 10export default { 11 name: 'EvidenceBlock', 12 components: { 13 ClipboardButton, 14 ExpandButton, 15 GlLink, 16 GlIcon, 17 }, 18 directives: { 19 GlTooltip: GlTooltipDirective, 20 }, 21 props: { 22 release: { 23 type: Object, 24 required: true, 25 }, 26 }, 27 computed: { 28 evidences() { 29 return this.release.evidences; 30 }, 31 }, 32 methods: { 33 evidenceTitle(index) { 34 const [tag, evidence, filename] = this.release.evidences[index].filepath.split('/').slice(-3); 35 return sprintf(__('%{tag}-%{evidence}-%{filename}'), { tag, evidence, filename }); 36 }, 37 evidenceUrl(index) { 38 return this.release.evidences[index].filepath; 39 }, 40 sha(index) { 41 return this.release.evidences[index].sha; 42 }, 43 shortSha(index) { 44 return truncateSha(this.release.evidences[index].sha); 45 }, 46 collectedAt(index) { 47 return dateFormat(this.release.evidences[index].collectedAt, 'mmmm dS, yyyy, h:MM TT'); 48 }, 49 timeSummary(index) { 50 const { format } = getTimeago(); 51 const summary = sprintf(__(' Collected %{time}'), { 52 time: format(this.release.evidences[index].collectedAt), 53 }); 54 return summary; 55 }, 56 }, 57}; 58</script> 59 60<template> 61 <div> 62 <div class="card-text gl-mt-3"> 63 <b>{{ __('Evidence collection') }}</b> 64 </div> 65 <div v-for="(evidence, index) in evidences" :key="evidenceTitle(index)" class="mb-2"> 66 <div class="d-flex align-items-center"> 67 <gl-link 68 v-gl-tooltip 69 class="d-flex align-items-center monospace" 70 :title="__('Download evidence JSON')" 71 :download="evidenceTitle(index)" 72 :href="evidenceUrl(index)" 73 > 74 <gl-icon name="review-list" class="align-middle gl-mr-3" /> 75 <span>{{ evidenceTitle(index) }}</span> 76 </gl-link> 77 78 <expand-button> 79 <template #short> 80 <span class="js-short monospace">{{ shortSha(index) }}</span> 81 </template> 82 <template #expanded> 83 <span class="js-expanded monospace gl-pl-2">{{ sha(index) }}</span> 84 </template> 85 </expand-button> 86 <clipboard-button :title="__('Copy evidence SHA')" :text="sha(index)" category="tertiary" /> 87 </div> 88 89 <div class="d-flex align-items-center text-muted"> 90 <gl-icon 91 v-gl-tooltip 92 name="clock" 93 class="align-middle gl-mr-3" 94 :title="collectedAt(index)" 95 /> 96 <span>{{ timeSummary(index) }}</span> 97 </div> 98 </div> 99 </div> 100</template> 101