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

runs: add loading spinner

This commit is contained in:
Simone Gotti 2019-07-10 17:10:22 +02:00
parent 1e3f9cd1d6
commit 3ff8a1350b
1 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/runs.vue
View File

@ -7,7 +7,11 @@
> >
<div>{{ fetchRunsError }}</div> <div>{{ fetchRunsError }}</div>
</div> </div>
<div v-if="runs.length > 0">
<div class="ml-6 flex w-48">
<div v-bind:class="{ 'spinner': fetchRunsLoading }"></div>
</div>
<div v-if="runs">
<ul> <ul>
<li <li
class="mb-2 border-l-5 rounded-l" class="mb-2 border-l-5 rounded-l"
@ -96,7 +100,7 @@
>Load more...</button> >Load more...</button>
</div> </div>
</div> </div>
<div v-else class>No runs</div> <div v-if="runs && runs.length == 0" class>No runs</div>
</div> </div>
</template> </template>
@ -121,8 +125,10 @@ export default {
data() { data() {
return { return {
now: moment(), now: moment(),
fetchRunsLoading: false,
fetchRunsLoadingTimeout: false,
fetchRunsError: null, fetchRunsError: null,
runs: [], runs: null,
wantedRunsNumber: 25, wantedRunsNumber: 25,
hasMoreRuns: false, hasMoreRuns: false,
polling: null, polling: null,
@ -132,6 +138,8 @@ export default {
}, },
watch: { watch: {
$route: function() { $route: function() {
this.runs = null;
this.hasMoreRuns = false;
this.update(); this.update();
} }
}, },
@ -139,6 +147,15 @@ export default {
projectRunLink: projectRunLink, projectRunLink: projectRunLink,
userDirectRunLink: userDirectRunLink, userDirectRunLink: userDirectRunLink,
runResultClass: runResultClass, runResultClass: runResultClass,
startFetchRunsLoading() {
this.fetchRunsLoadingTimeout = setTimeout(() => {
this.fetchRunsLoading = true;
}, 0);
},
stopFetchRunsLoading() {
clearTimeout(this.fetchRunsLoadingTimeout);
this.fetchRunsLoading = false;
},
stillRunning(run) { stillRunning(run) {
return run.result != "unknown" && run.phase == "running"; return run.result != "unknown" && run.phase == "running";
}, },
@ -168,7 +185,7 @@ export default {
} }
this.project = data; this.project = data;
this.fetchRuns(); this.fetchRuns(true);
}, },
async fetchUser() { async fetchUser() {
let { data, error } = await fetchUser(this.ownername); let { data, error } = await fetchUser(this.ownername);
@ -178,14 +195,14 @@ export default {
} }
this.user = data; this.user = data;
this.fetchRuns(); this.fetchRuns(true);
}, },
loadMoreRuns() { loadMoreRuns() {
this.wantedRunsNumber += 25; this.wantedRunsNumber += 25;
this.fetchRuns(); this.fetchRuns();
}, },
// TODO(sgotti) use run events instead of refetching all runs everytime // TODO(sgotti) use run events instead of refetching all runs everytime
async fetchRuns() { async fetchRuns(loading) {
let group; let group;
let lastrun = false; let lastrun = false;
if (this.project !== null) { if (this.project !== null) {
@ -207,9 +224,12 @@ export default {
let stopFetch = false; let stopFetch = false;
let runCount = 0; let runCount = 0;
let startRunID = null; let startRunID = null;
if (loading) this.startFetchRunsLoading();
while (!stopFetch) { while (!stopFetch) {
let { data, error } = await fetchRuns(group, startRunID, lastrun); let { data, error } = await fetchRuns(group, startRunID, lastrun);
if (error) { if (error) {
this.stopFetchRunsLoading();
this.fetchRunsError = error; this.fetchRunsError = error;
return; return;
} }
@ -224,6 +244,7 @@ export default {
startRunID = newRuns[newRuns.length - 1].id; startRunID = newRuns[newRuns.length - 1].id;
} }
} }
this.stopFetchRunsLoading();
this.runs = newRuns; this.runs = newRuns;
this.hasMoreRuns = hasMoreRuns; this.hasMoreRuns = hasMoreRuns;
}, },