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>