diff options
Diffstat (limited to 'app/assets/javascripts/releases/components/evidence_block.vue')
-rw-r--r-- | app/assets/javascripts/releases/components/evidence_block.vue | 102 |
1 files changed, 65 insertions, 37 deletions
diff --git a/app/assets/javascripts/releases/components/evidence_block.vue b/app/assets/javascripts/releases/components/evidence_block.vue index 0c51fffc96c..59c1b3eb48e 100644 --- a/app/assets/javascripts/releases/components/evidence_block.vue +++ b/app/assets/javascripts/releases/components/evidence_block.vue @@ -1,8 +1,9 @@ <script> -import { GlLink, GlTooltipDirective } from '@gitlab/ui'; +import dateFormat from 'dateformat'; +import { GlLink, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import { truncateSha } from '~/lib/utils/text_utility'; -import Icon from '~/vue_shared/components/icon.vue'; +import { getTimeago } from '~/lib/utils/datetime_utility'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ExpandButton from '~/vue_shared/components/expand_button.vue'; @@ -12,7 +13,7 @@ export default { ClipboardButton, ExpandButton, GlLink, - Icon, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -24,17 +25,33 @@ export default { }, }, computed: { - evidenceTitle() { - return sprintf(__('%{tag}-evidence.json'), { tag: this.release.tagName }); + evidences() { + return this.release.evidences; }, - evidenceUrl() { - return this.release.assets && this.release.assets.evidenceFilePath; + }, + methods: { + evidenceTitle(index) { + const [tag, evidence, filename] = this.release.evidences[index].filepath.split('/').slice(-3); + return sprintf(__('%{tag}-%{evidence}-%{filename}'), { tag, evidence, filename }); + }, + evidenceUrl(index) { + return this.release.evidences[index].filepath; + }, + sha(index) { + return this.release.evidences[index].sha; }, - shortSha() { - return truncateSha(this.sha); + shortSha(index) { + return truncateSha(this.release.evidences[index].sha); }, - sha() { - return this.release.evidenceSha; + collectedAt(index) { + return dateFormat(this.release.evidences[index].collectedAt, 'mmmm dS, yyyy, h:MM TT'); + }, + timeSummary(index) { + const { format } = getTimeago(); + const summary = sprintf(__(' Collected %{time}'), { + time: format(this.release.evidences[index].collectedAt), + }); + return summary; }, }, }; @@ -43,34 +60,45 @@ export default { <template> <div> <div class="card-text prepend-top-default"> - <b> - {{ __('Evidence collection') }} - </b> + <b>{{ __('Evidence collection') }}</b> </div> - <div class="d-flex align-items-baseline"> - <gl-link - v-gl-tooltip - class="monospace" - :title="__('Download evidence JSON')" - :download="evidenceTitle" - :href="evidenceUrl" - > - <icon name="review-list" class="align-top append-right-4" /><span>{{ evidenceTitle }}</span> - </gl-link> + <div v-for="(evidence, index) in evidences" :key="evidenceTitle(index)" class="mb-2"> + <div class="d-flex align-items-center"> + <gl-link + v-gl-tooltip + class="d-flex align-items-center monospace" + :title="__('Download evidence JSON')" + :download="evidenceTitle(index)" + :href="evidenceUrl(index)" + > + <gl-icon name="review-list" class="align-middle append-right-8" /> + <span>{{ evidenceTitle(index) }}</span> + </gl-link> + + <expand-button> + <template slot="short"> + <span class="js-short monospace">{{ shortSha(index) }}</span> + </template> + <template slot="expanded"> + <span class="js-expanded monospace gl-pl-1">{{ sha(index) }}</span> + </template> + </expand-button> + <clipboard-button + :title="__('Copy evidence SHA')" + :text="sha(index)" + css-class="btn-default btn-transparent btn-clipboard" + /> + </div> - <expand-button> - <template slot="short"> - <span class="js-short monospace">{{ shortSha }}</span> - </template> - <template slot="expanded"> - <span class="js-expanded monospace gl-pl-1">{{ sha }}</span> - </template> - </expand-button> - <clipboard-button - :title="__('Copy evidence SHA')" - :text="sha" - css-class="btn-default btn-transparent btn-clipboard" - /> + <div class="d-flex align-items-center text-muted"> + <gl-icon + v-gl-tooltip + name="clock" + class="align-middle append-right-8" + :title="collectedAt(index)" + /> + <span>{{ timeSummary(index) }}</span> + </div> </div> </div> </template> |