99 lines
1.7 KiB
JavaScript
99 lines
1.7 KiB
JavaScript
|
import iconTimerSvg from 'icons/_icon_timer.svg';
|
||
|
|
import '../../lib/utils/datetime_utility';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
finishedTime: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
|
||
|
|
duration: {
|
||
|
|
type: Number,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
iconTimerSvg,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
updated() {
|
||
|
|
$(this.$refs.tooltip).tooltip('fixTitle');
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
hasDuration() {
|
||
|
|
return this.duration > 0;
|
||
|
|
},
|
||
|
|
|
||
|
|
hasFinishedTime() {
|
||
|
|
return this.finishedTime !== '';
|
||
|
|
},
|
||
|
|
|
||
|
|
localTimeFinished() {
|
||
|
|
return gl.utils.formatDate(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}`;
|
||
|
|
},
|
||
|
|
|
||
|
|
finishedTimeFormated() {
|
||
|
|
const timeAgo = gl.utils.getTimeago();
|
||
|
|
|
||
|
|
return timeAgo.format(this.finishedTime);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
template: `
|
||
|
|
<td class="pipelines-time-ago">
|
||
|
|
<p
|
||
|
|
class="duration"
|
||
|
|
v-if="hasDuration">
|
||
|
|
<span
|
||
|
|
v-html="iconTimerSvg">
|
||
|
|
</span>
|
||
|
|
{{durationFormated}}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p
|
||
|
|
class="finished-at"
|
||
|
|
v-if="hasFinishedTime">
|
||
|
|
|
||
|
|
<i
|
||
|
|
class="fa fa-calendar"
|
||
|
|
aria-hidden="true" />
|
||
|
|
|
||
|
|
<time
|
||
|
|
ref="tooltip"
|
||
|
|
data-toggle="tooltip"
|
||
|
|
data-placement="top"
|
||
|
|
data-container="body"
|
||
|
|
:title="localTimeFinished">
|
||
|
|
{{finishedTimeFormated}}
|
||
|
|
</time>
|
||
|
|
</p>
|
||
|
|
</td>
|
||
|
|
`,
|
||
|
|
};
|