All files / app/assets/javascripts/releases/components evidence_block.vue

100% Statements 11/11
100% Branches 0/0
100% Functions 7/7
100% Lines 11/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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