a
/
agola-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

runs: rework runs list item presentation 

* Add duration and finish time
* Move type (branch/tag/PR) to the left
* Move commit message below run name
* Add run number
This commit is contained in:
Simone Gotti 2019-07-05 16:37:26 +02:00
parent 4c1e416a87
commit 5f86a7a776
1 changed files with 91 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/runs.vue
View File

@ -16,59 +16,74 @@
:class="runResultClass(run)"
>
<div class="pl-4 flex items-center border border-l-0 rounded-r">
<!-- TODO(sgotti) add gradient overflow -->
<div v-if="projectref" class="w-2/12">
<div
v-if="run.annotations.ref_type == 'branch'"
class="whitespace-no-wrap overflow-x-hidden"
>
<i class="mdi mdi-source-branch mr-1"></i>
<span>{{run.annotations.branch}}</span>
</div>
<div
v-else-if="run.annotations.ref_type == 'tag'"
class="whitespace-no-wrap overflow-x-hidden"
>
<i class="mdi mdi-tag mr-1"></i>
<span>{{run.annotations.tag}}</span>
</div>
<div
v-else-if="run.annotations.ref_type == 'pull_request'"
class="whitespace-no-wrap overflow-x-hidden"
>
<i class="mdi mdi-source-pull mr-1"></i>
<span>PR #{{run.annotations.pull_request_id}}</span>
</div>
</div>
<div v-else class="w-2/12">
<i class="mdi mdi-run-fast mr-1"></i>
<span>direct run</span>
</div>
<router-link
v-if="projectref"
class="w-1/3 font-bold"
class="w-5/12 pl-3 mr-auto whitespace-no-wrap overflow-hidden"
:to="projectRunLink(ownertype, ownername, projectref, run.id)"
>
<span class>{{run.name}}</span>
<span class="font-bold">{{run.name}}</span>
<div>{{run.annotations.message.split(/\r?\n/)[0]}}</div>
</router-link>
<router-link v-else class="w-1/3 font-bold" :to="userDirectRunLink(ownername, run.id)">
<span>{{run.name}}</span>
<router-link
v-else
class="w-5/12 pl-3 mr-auto whitespace-no-wrap overflow-hidden"
:to="userDirectRunLink(ownername, run.id)"
>
<span class="font-bold">{{run.name}}</span>
<div>{{run.annotations.message.split(/\r?\n/)[0]}}</div>
</router-link>
<div class="w-1/3">{{run.annotations.message}}</div>
<span
v-if="waitingApproval(run)"
class="w-1/5 inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold mr-2"
class="w-2/12 bg-gray-200 rounded-full px-3 py-1 text-sm text-center font-semibold mr-2"
>Waiting Approval</span>
<span v-if="!waitingApproval(run)" class="w-1/5"></span>
<span
v-if="stillRunning(run)"
class="w-1/5 inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold mr-2"
class="w-2/12 bg-gray-200 rounded-full px-3 py-1 text-sm text-center font-semibold mr-2"
>Still running</span>
<span v-if="!stillRunning(run)" class="w-1/5"></span>
<div class="w-32">
<span>#{{run.counter}}</span>
<a :href="run.annotations.commit_link" class="block" target="_blank">
<i class="mdi mdi-source-commit mdi-rotate-90"></i>
<i class="mdi mdi-source-commit mdi-rotate-90 mr-1"></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 whitespace-no-wrap overflow-x-hidden"
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 class="w-32">
<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>
</li>
@ -89,6 +104,10 @@
import { fetchUser, fetchProject, fetchRuns } from "@/util/data.js";
import { userDirectRunLink, projectRunLink } from "@/util/link.js";
import { runResultClass } from "@/util/run.js";
import * as moment from "moment";
import momentDurationFormatSetup from "moment-duration-format";
momentDurationFormatSetup(moment);
export default {
components: {},
@ -101,6 +120,7 @@ export default {
},
data() {
return {
now: moment(),
fetchRunsError: null,
runs: [],
wantedRunsNumber: 25,
@ -212,9 +232,43 @@ export default {
this.polling = setInterval(() => {
this.fetchRuns();
}, 2000);
},
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);
this.update();
},
beforeDestroy() {