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