feat(task): fix Issue Where Task Logs Continue Periodic Requests After Being Opened (#7567)

core/constant/common.go

@@ -45,7 +45,7 @@ var WebUrlMap = map[string]struct{}{
 	"/apps/all":       {},
 	"/apps/installed": {},
 	"/apps/upgrade":   {},
-	"apps/setting":    {},
+	"/apps/setting":   {},
 
 	"/containers":           {},
 	"/containers/container": {},
@@ -56,7 +56,7 @@ var WebUrlMap = map[string]struct{}{
 	"/containers/compose":   {},
 	"/containers/template":  {},
 	"/containers/setting":   {},
-	"containers/dashboard":  {},
+	"/containers/dashboard": {},
 
 	"/cronjobs": {},
 
@@ -88,6 +88,7 @@ var WebUrlMap = map[string]struct{}{
 	"/logs/website":   {},
 	"/logs/system":    {},
 	"/logs/ssh":       {},
+	"/logs/task":      {},
 
 	"/settings":               {},
 	"/settings/panel":         {},
@@ -134,8 +135,8 @@ var WebUrlMap = map[string]struct{}{
 	"/xpack/alert/log":         {},
 	"/xpack/alert/setting":     {},
 	"/xpack/setting":           {},
-	"xpack/node":               {},
+	"/xpack/node":              {},
-	"xpack/waf/stat":           {},
+	"/xpack/waf/stat":          {},
 }
 
 var DynamicRoutes = []string{

frontend/src/api/modules/log.ts

@@ -26,5 +26,5 @@ export const searchTasks = (req: Log.SearchTaskReq) => {
 };
 
 export const countExecutingTask = () => {
-    return http.get<number>(`/tasks/executing/count`);
+    return http.get<number>(`/logs/tasks/executing/count`);
 };

frontend/src/components/log-file/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-loading="isLoading">
+    <div v-loading="initLog && isLoading">
         <div v-if="defaultButton">
             <el-checkbox border v-model="tailLog" class="float-left" @change="changeTail(false)">
                 {{ $t('commons.button.watch') }}
@@ -94,6 +94,7 @@ const maxPage = ref(0);
 const minPage = ref(0);
 let timer: NodeJS.Timer | null = null;
 const logPath = ref('');
+const initLog = ref(false);
 
 const firstLoading = ref(false);
 const logs = ref<string[]>([]);
@@ -213,6 +214,7 @@ const getContent = async (pre: boolean) => {
         }
 
         nextTick(() => {
+            console.log('pre', pre);
             if (pre) {
                 logContainer.value.scrollTop = 2000;
             } else {
@@ -249,10 +251,14 @@ const getContent = async (pre: boolean) => {
 
 const onCloseLog = async () => {
     tailLog.value = false;
-    clearInterval(Number(timer));
+    if (timer) {
+        clearInterval(Number(timer));
+        timer = null;
+    }
     timer = null;
     isLoading.value = false;
     emit('update:isReading', false);
+    initLog.value = false;
 };
 
 watch(
@@ -263,6 +269,7 @@ watch(
 );
 
 const init = async () => {
+    initLog.value = true;
     if (props.config.tail) {
         tailLog.value = props.config.tail;
     } else {
@@ -287,20 +294,10 @@ onMounted(async () => {
 });
 
 onUnmounted(() => {
+    console.log('onUnmounted');
     onCloseLog();
 });
 
-onMounted(async () => {
-    firstLoading.value = true;
-    await init();
-    nextTick(() => {
-        if (logContainer.value) {
-            logContainer.value.scrollTop = totalHeight.value;
-            containerHeight.value = logContainer.value.getBoundingClientRect().height;
-        }
-    });
-});
-
 defineExpose({ changeTail, onDownload, clearLog });
 </script>
 <style lang="scss" scoped>

frontend/src/components/task-log/index.vue

@@ -25,6 +25,10 @@ defineProps({
         type: String,
         default: '30%',
     },
+    tail: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const config = reactive({
@@ -33,6 +37,7 @@ const config = reactive({
     taskOperate: '',
     resourceID: 0,
     taskType: '',
+    tail: true,
 });
 const open = ref(false);