rundetail: rework item presentation

* Add duration and finish time
* Move type (branch/tag/PR) to the left
This commit is contained in:
Simone Gotti 2019-07-09 11:22:45 +02:00
parent aad3358498
commit 42f7ce7eaa
1 changed files with 92 additions and 41 deletions

View File

@ -24,10 +24,10 @@
</div> </div>
<div class="mb-2 border-l-5 rounded shadow" :class="runResultClass(run)"> <div class="mb-2 border-l-5 rounded shadow" :class="runResultClass(run)">
<div class="p-4 border border-l-0 rounded-r"> <div class="p-4 border border-l-0 rounded-r flex">
<div class="flex items-start justify-between"> <div class="w-4/6 items-start justify-between">
<div class="flex items-center"> <div class="flex items-center mb-1">
<span class="text-2xl mr-3">{{run.name}}</span> <h2 class="text-2xl mr-3">{{run.name}}</h2>
<span <span
class="mr-3 rounded px-2 py-1 text-xs" class="mr-3 rounded px-2 py-1 text-xs"
:class="'is-' + runResultClass(run)" :class="'is-' + runResultClass(run)"
@ -37,7 +37,53 @@
class="rounded bg-gray-500 text-white px-2 py-1 text-xs" class="rounded bg-gray-500 text-white px-2 py-1 text-xs"
>Still running</span> >Still running</span>
</div> </div>
<div class="relative mr-3"> <div class="mb-6">{{run.annotations.message.split(/\r?\n/)[0]}}</div>
<div>
<a :href="run.annotations.commit_link" class="block" target="_blank">
<i class="mdi mdi-source-commit mdi-rotate-90"></i>
<span>{{run.annotations.commit_sha.substring(0,8)}}</span>
</a>
<a
v-if="run.annotations.ref_type == 'branch'"
:href="run.annotations.branch_link"
class="block"
target="_blank"
>
<i class="mdi mdi-source-branch"></i>
<span>{{run.annotations.branch}}</span>
</a>
<a
v-else-if="run.annotations.ref_type == 'tag'"
:href="run.annotations.tag_link"
class="block"
target="_blank"
>
<i class="mdi mdi-tag"></i>
<span>{{run.annotations.tag}}</span>
</a>
<a
v-else-if="run.annotations.ref_type == 'pull_request'"
:href="run.annotations.pull_request_link"
class="block"
target="_blank"
>
<i class="mdi mdi-source-pull"></i>
<span>PR #{{run.annotations.pull_request_id}}</span>
</a>
</div>
</div>
<div class="w-1/6">
<div>
<i class="mdi mdi-clock-fast mr-1"></i>
<span class="text-right">{{ duration(run) }}</span>
</div>
<div :title="endTime(run)">
<i class="mdi mdi-calendar-month-outline mr-1"></i>
<span class="text-right">{{ endTimeHuman(run) }}</span>
</div>
</div>
<div class="w-1/6 flex items-start justify-between">
<div class="relative ml-auto mr-3">
<div <div
v-if="run.can_restart_from_scratch || run.can_restart_from_failed_tasks" v-if="run.can_restart_from_scratch || run.can_restart_from_failed_tasks"
class="flex" class="flex"
@ -85,42 +131,6 @@
>Stop</button> >Stop</button>
</div> </div>
</div> </div>
<div class="flex">
<div class="w-1/2">{{run.annotations.message}}</div>
<div class="w-1/2">
<a :href="run.annotations.commit_link" class="block" target="_blank">
<i class="mdi mdi-source-commit mdi-rotate-90"></i>
<span>{{run.annotations.commit_sha.substring(0,8)}}</span>
</a>
<a
v-if="run.annotations.ref_type == 'branch'"
:href="run.annotations.branch_link"
class="block"
target="_blank"
>
<i class="mdi mdi-source-branch"></i>
<span>{{run.annotations.branch}}</span>
</a>
<a
v-else-if="run.annotations.ref_type == 'tag'"
:href="run.annotations.tag_link"
class="block"
target="_blank"
>
<i class="mdi mdi-tag"></i>
<span>{{run.annotations.tag}}</span>
</a>
<a
v-else-if="run.annotations.ref_type == 'pull_request'"
:href="run.annotations.pull_request_link"
class="block"
target="_blank"
>
<i class="mdi mdi-source-pull"></i>
<span>PR #{{run.annotations.pull_request_id}}</span>
</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -134,6 +144,11 @@ import { cancelRun, stopRun, restartRun } from "@/util/data.js";
import { userDirectRunLink, projectRunLink } from "@/util/link.js"; import { userDirectRunLink, projectRunLink } from "@/util/link.js";
import { runStatus, runResultClass } from "@/util/run.js"; import { runStatus, runResultClass } from "@/util/run.js";
import * as moment from "moment";
import momentDurationFormatSetup from "moment-duration-format";
momentDurationFormatSetup(moment);
export default { export default {
name: "rundetail", name: "rundetail",
directives: { directives: {
@ -147,6 +162,7 @@ export default {
}, },
data() { data() {
return { return {
now: moment(),
stopRunError: null, stopRunError: null,
cancelRunError: null, cancelRunError: null,
restartRunError: null, restartRunError: null,
@ -213,7 +229,42 @@ export default {
runLink = userDirectRunLink(this.ownername, data.id); runLink = userDirectRunLink(this.ownername, data.id);
} }
this.$router.push(runLink); this.$router.push(runLink);
},
duration(run) {
let formatString = "h:mm:ss[s]";
let start = moment(run.start_time);
let end = moment(run.end_time);
if (run.start_time === null) {
return moment.duration(0).format(formatString);
} }
if (run.end_time === null) {
return moment.duration(this.now.diff(start)).format(formatString);
}
return moment.duration(end.diff(start)).format(formatString);
},
endTime(run) {
let formatString = "lll";
let end = moment(run.end_time);
if (run.end_time === null) {
return "";
}
return "Finished " + end.format(formatString);
},
endTimeHuman(run) {
let end = moment(run.end_time);
if (run.end_time === null) {
return "";
}
return end.fromNow();
}
},
created: function() {
window.setInterval(() => {
this.now = moment();
}, 500);
} }
}; };
</script> </script>