debian-mirror-gitlab/app/assets/javascripts/pipelines/components/time_ago.vue

<script>
  import iconTimerSvg from 'icons/_icon_timer.svg';
  import '../../lib/utils/datetime_utility';
  import tooltip from '../../vue_shared/directives/tooltip';
  import timeagoMixin from '../../vue_shared/mixins/timeago';

  export default {
    directives: {
      tooltip,
    },
    mixins: [
      timeagoMixin,
    ],
    props: {
      finishedTime: {
        type: String,
        required: true,
      },
      duration: {
        type: Number,
        required: true,
      },
    },
    data() {
      return {
        iconTimerSvg,
      };
    },
    computed: {
      hasDuration() {
        return this.duration > 0;
      },
      hasFinishedTime() {
        return this.finishedTime !== '';
      },
      durationFormated() {
        const date = new Date(this.duration * 1000);

        let hh = date.getUTCHours();
        let mm = date.getUTCMinutes();
        let ss = date.getSeconds();

        // left pad
        if (hh < 10) {
          hh = `0${hh}`;
        }
        if (mm < 10) {
          mm = `0${mm}`;
        }
        if (ss < 10) {
          ss = `0${ss}`;
        }

        return `${hh}:${mm}:${ss}`;
      },
    },
  };
</script>
<template>
  <div class="table-section section-15 pipelines-time-ago">
    <div
      class="table-mobile-header"
      role="rowheader"
    >
      Duration
    </div>
    <div class="table-mobile-content">
      <p
        class="duration"
        v-if="hasDuration"
      >
        <span v-html="iconTimerSvg">
        </span>
        {{ durationFormated }}
      </p>

      <p
        class="finished-at hidden-xs hidden-sm"
        v-if="hasFinishedTime"
      >

        <i
          class="fa fa-calendar"
          aria-hidden="true"
        >
        </i>

        <time
          v-tooltip
          data-placement="top"
          data-container="body"
          :title="tooltipTitle(finishedTime)">
          {{ timeFormated(finishedTime) }}
        </time>
      </p>
    </div>
  </div>
</template>