Fix how the streaming log view works.
This commit is contained in:
parent
cc314f6f24
commit
eb519dffce
|
@ -24,9 +24,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {nextTick, onMounted, ref} from "vue";
|
import {nextTick, ref, toRef, watch} from "vue";
|
||||||
import {useAxios} from "~/vendor/axios";
|
import {useAxios} from "~/vendor/axios";
|
||||||
import {useTimeoutFn} from "@vueuse/core";
|
import {tryOnScopeDispose} from "@vueuse/core";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
logUrl: {
|
logUrl: {
|
||||||
|
@ -44,14 +44,16 @@ const {axios} = useAxios();
|
||||||
|
|
||||||
const $textarea = ref(); // Template Ref
|
const $textarea = ref(); // Template Ref
|
||||||
|
|
||||||
const scrollTextarea = () => {
|
let updateInterval = null;
|
||||||
if (scrollToBottom.value) {
|
|
||||||
nextTick(() => {
|
const stop = () => {
|
||||||
$textarea.value.scrollTop = $textarea.value.scrollHeight;
|
if (updateInterval) {
|
||||||
});
|
clearInterval(updateInterval);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
tryOnScopeDispose(stop);
|
||||||
|
|
||||||
const updateLogs = () => {
|
const updateLogs = () => {
|
||||||
axios({
|
axios({
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
|
@ -62,40 +64,36 @@ const updateLogs = () => {
|
||||||
}).then((resp) => {
|
}).then((resp) => {
|
||||||
if (resp.data.contents !== '') {
|
if (resp.data.contents !== '') {
|
||||||
logs.value = logs.value + resp.data.contents + "\n";
|
logs.value = logs.value + resp.data.contents + "\n";
|
||||||
scrollTextarea();
|
if (scrollToBottom.value) {
|
||||||
|
nextTick(() => {
|
||||||
|
$textarea.value.scrollTop = $textarea.value.scrollHeight;
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
currentLogPosition.value = resp.data.position;
|
currentLogPosition.value = resp.data.position;
|
||||||
|
|
||||||
if (!resp.data.eof) {
|
if (resp.data.eof) {
|
||||||
useTimeoutFn(updateLogs, 2500);
|
stop();
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
loading.value = true;
|
|
||||||
|
|
||||||
axios({
|
|
||||||
method: 'GET',
|
|
||||||
url: props.logUrl
|
|
||||||
}).then((resp) => {
|
|
||||||
if (resp.data.contents !== '') {
|
|
||||||
logs.value = resp.data.contents + "\n";
|
|
||||||
scrollTextarea();
|
|
||||||
} else {
|
|
||||||
logs.value = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
currentLogPosition.value = resp.data.position;
|
|
||||||
|
|
||||||
if (!resp.data.eof) {
|
|
||||||
useTimeoutFn(updateLogs, 2500);
|
|
||||||
}
|
}
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
});
|
});
|
||||||
});
|
};
|
||||||
|
|
||||||
|
watch(toRef(props, 'logUrl'), (newLogUrl) => {
|
||||||
|
loading.value = true;
|
||||||
|
logs.value = '';
|
||||||
|
currentLogPosition.value = 0;
|
||||||
|
|
||||||
|
if (null === newLogUrl) {
|
||||||
|
stop();
|
||||||
|
} else {
|
||||||
|
updateInterval = setInterval(updateLogs, 2500);
|
||||||
|
updateLogs();
|
||||||
|
}
|
||||||
|
|
||||||
|
}, {immediate: true});
|
||||||
|
|
||||||
const getContents = () => {
|
const getContents = () => {
|
||||||
return logs.value;
|
return logs.value;
|
||||||
|
|
Loading…
Reference in New Issue