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

Merge pull request #25 from sgotti/log_show_fetching_status 

log: show log fetching status
This commit is contained in:
Simone Gotti 2019-11-15 10:20:32 +01:00 committed by GitHub
parent 8aae84b354 84e413181f
commit 2878905257
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 58 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/log.vue
View File

@ -1,11 +1,44 @@
<template>
<div class="overflow-x-auto">
<div v-for="(item, index) in items" :key="index">
<div class="font-mono leading-normal text-xs whitespace-no-wrap" v-html="item" />
</div>
<div v-if="lastitem" class="font-mono leading-snug text-xs">
<div v-html="lastitem" />
</div>
<div>
<span
v-if="logExists == false"
class="bg-gray-700 border border-yellow-600 rounded px-3 py-1 text-center font-semibold"
>
Log doesn't exist
</span>
<template v-else>
<div
v-if="(streaming || done) && items.length == 0 && lastitem.length == 0"
class="bg-gray-700 border border-yellow-600 rounded mb-1 px-3 py-1 text-center font-semibold"
>
No lines
</div>
<div class="overflow-x-auto">
<div v-for="(item, index) in items" :key="index">
<div
class="font-mono leading-normal text-xs whitespace-no-wrap"
v-html="item"
/>
</div>
<div v-if="lastitem" class="font-mono leading-snug text-xs">
<div v-html="lastitem" />
</div>
<div v-if="fetching" class="w-3 h-5 spinner"></div>
</div>
</template>
<template v-if="error">
<span
class="bg-gray-700 border border-red-600 rounded px-3 py-1 text-center font-semibold"
>
Error fetching log
</span>
<button
class="ml-3 font-bold py-1 px-4 rounded bg-gray-700 text-white hover:bg-gray-600 focus:bg-gray-600 focus:outline-none"
@click="fetch()"
>
Retry
</button>
</template>
</div>
</template>
@ -36,7 +69,11 @@ export default {
lines: [],
formatter: formatter,
es: null,
fetching: false
fetching: false,
streaming: false,
done: false,
logExists: null,
error: null
};
},
methods: {
@ -54,6 +91,9 @@ export default {
},
async getLogs(follow) {
this.items = [];
this.logExists = null;
this.error = null;
let path = "/logs?runID=" + this.runid + "&taskID=" + this.taskid;
if (this.setup) {
path += "&setup";
@ -68,6 +108,7 @@ export default {
this.fetching = true;
let res = await fetch(apiurl(path), { signal: this.fetchAbort.signal });
if (res.status == 200) {
this.streaming = true;
const reader = res.body.getReader();
let lastline = "";
@ -76,6 +117,8 @@ export default {
let { done, value } = await reader.read();
if (done) {
this.fetching = false;
this.streaming = false;
this.done = true;
return;
}
@ -113,11 +156,18 @@ export default {
j += part.length;
this.lastitem = this.formatter.ansi_to_html(lastline);
}
} else if (res.status == 404) {
this.logExists = false;
} else if (res.status == 500) {
this.error = true;
}
} catch (e) {
this.error = true;
// TODO(sgotti) show that log fetching has failed
}
this.fetching = false;
this.streaming = false;
this.done = false;
},
abortFetch() {
if (this.fetchAbort) {
@ -170,6 +220,3 @@ export default {
}
};
</script>
<style scoped lang="scss">
</style>