Merge pull request #25 from sgotti/log_show_fetching_status
log: show log fetching status
This commit is contained in:
commit
2878905257
|
@ -1,11 +1,44 @@
|
||||||
<template>
|
<template>
|
||||||
|
<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 class="overflow-x-auto">
|
||||||
<div v-for="(item, index) in items" :key="index">
|
<div v-for="(item, index) in items" :key="index">
|
||||||
<div class="font-mono leading-normal text-xs whitespace-no-wrap" v-html="item" />
|
<div
|
||||||
|
class="font-mono leading-normal text-xs whitespace-no-wrap"
|
||||||
|
v-html="item"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="lastitem" class="font-mono leading-snug text-xs">
|
<div v-if="lastitem" class="font-mono leading-snug text-xs">
|
||||||
<div v-html="lastitem" />
|
<div v-html="lastitem" />
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -36,7 +69,11 @@ export default {
|
||||||
lines: [],
|
lines: [],
|
||||||
formatter: formatter,
|
formatter: formatter,
|
||||||
es: null,
|
es: null,
|
||||||
fetching: false
|
fetching: false,
|
||||||
|
streaming: false,
|
||||||
|
done: false,
|
||||||
|
logExists: null,
|
||||||
|
error: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -54,6 +91,9 @@ export default {
|
||||||
},
|
},
|
||||||
async getLogs(follow) {
|
async getLogs(follow) {
|
||||||
this.items = [];
|
this.items = [];
|
||||||
|
this.logExists = null;
|
||||||
|
this.error = null;
|
||||||
|
|
||||||
let path = "/logs?runID=" + this.runid + "&taskID=" + this.taskid;
|
let path = "/logs?runID=" + this.runid + "&taskID=" + this.taskid;
|
||||||
if (this.setup) {
|
if (this.setup) {
|
||||||
path += "&setup";
|
path += "&setup";
|
||||||
|
@ -68,6 +108,7 @@ export default {
|
||||||
this.fetching = true;
|
this.fetching = true;
|
||||||
let res = await fetch(apiurl(path), { signal: this.fetchAbort.signal });
|
let res = await fetch(apiurl(path), { signal: this.fetchAbort.signal });
|
||||||
if (res.status == 200) {
|
if (res.status == 200) {
|
||||||
|
this.streaming = true;
|
||||||
const reader = res.body.getReader();
|
const reader = res.body.getReader();
|
||||||
|
|
||||||
let lastline = "";
|
let lastline = "";
|
||||||
|
@ -76,6 +117,8 @@ export default {
|
||||||
let { done, value } = await reader.read();
|
let { done, value } = await reader.read();
|
||||||
if (done) {
|
if (done) {
|
||||||
this.fetching = false;
|
this.fetching = false;
|
||||||
|
this.streaming = false;
|
||||||
|
this.done = true;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -113,11 +156,18 @@ export default {
|
||||||
j += part.length;
|
j += part.length;
|
||||||
this.lastitem = this.formatter.ansi_to_html(lastline);
|
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) {
|
} catch (e) {
|
||||||
|
this.error = true;
|
||||||
// TODO(sgotti) show that log fetching has failed
|
// TODO(sgotti) show that log fetching has failed
|
||||||
}
|
}
|
||||||
this.fetching = false;
|
this.fetching = false;
|
||||||
|
this.streaming = false;
|
||||||
|
this.done = false;
|
||||||
},
|
},
|
||||||
abortFetch() {
|
abortFetch() {
|
||||||
if (this.fetchAbort) {
|
if (this.fetchAbort) {
|
||||||
|
@ -170,6 +220,3 @@ export default {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
</style>
|
|
Loading…
Reference in New Issue