From 01d08fad4da66ec45e167491d966a23b70748469 Mon Sep 17 00:00:00 2001
From: fairy <zhaozhenfang@kylinos.cn>
Date: Fri, 8 Nov 2024 14:11:56 +0800
Subject: [PATCH] fix: change type of realtime  to search logs

---
 web/src/views/topoLogs/logStream_plugin.vue | 50 ++++++++++-----------
 1 file changed, 23 insertions(+), 27 deletions(-)

diff --git a/web/src/views/topoLogs/logStream_plugin.vue b/web/src/views/topoLogs/logStream_plugin.vue
index 4ba1570..e6ca2b1 100644
--- a/web/src/views/topoLogs/logStream_plugin.vue
+++ b/web/src/views/topoLogs/logStream_plugin.vue
@@ -5,7 +5,7 @@
         选择等级：<el-select
           v-model="level_key"
           placeholder="请选择日志等级"
-          style="width: 180px"
+          style="width: 130px"
           @change="searchLevel"
         >
           <el-option
@@ -21,6 +21,7 @@
         时间范围：
         <el-date-picker
           v-model="log_time"
+          :disabled="realTime"
           type="datetimerange"
           range-separator="To"
           start-placeholder="Start date"
@@ -34,10 +35,9 @@
         选择服务：<el-select
           v-model="service_key"
           placeholder="请选择主机服务"
-          style="width: 180px"
+          style="width: 130px"
           @change="searchService"
         >
-          <!-- <el-option v-for="item in service_options" :key="item.value" :label="item.label" :value="item.value" /> -->
           <el-option-group
             v-for="group in service_options"
             :key="group.label"
@@ -52,8 +52,19 @@
           </el-option-group>
         </el-select>
       </div>
-      &emsp; <el-button type="primary" @click="handleSearch()">查询</el-button>&emsp;
-      实时：<el-switch v-model="realTime" @change="openRealTimeLog" />
+      &emsp; 
+      <div class="level">
+        日志模式：<el-select
+          v-model="realTime"
+          placeholder="请选择日志模式"
+          style="width: 100px"
+          @change="isResetLog = true"
+        >
+          <el-option label="实时" :value="true"/>
+          <el-option label="非实时" :value="false"/>
+        </el-select>
+      </div>&emsp;
+      <el-button type="primary" @click="handleSearch()">查询</el-button>
     </div>
     <div class="log_list">
       <p class="head">
@@ -66,7 +77,7 @@
         :infinite-scroll-distance="1"
         :infinite-scroll-immediate="false"
         class="body"
-        style="overflow: auto; height: 350px"
+        style="overflow: auto; height: 470px"
       >
         <li
           v-for="(i, index) in log_stream"
@@ -94,7 +105,7 @@
           </el-icon>
           loading...
         </p>
-      </ul>
+      </ul> 
     </div>
   </div>
 </template>
@@ -108,7 +119,6 @@ const realTime = ref(false); // 是否实时监听日志变化
 const isResetLog = ref(false); // 是否清空日志重新查询
 const log_stream = ref([] as logItem[]);
 const total_logs = ref(0);
-const activeNames = ref([0]);
 const loading = ref(false);
 const isloading = ref(true);
 interface logItem {
@@ -139,7 +149,6 @@ watch(
   (new_list) => {
     if (new_list.length > 0) {
       service_options.value = props.service_list;
-      console.log(props.service_list);
       service_key.value = props.service_list[0].options[0].value;
       handleSearch();
     }
@@ -151,9 +160,6 @@ watchEffect(() => {
     total_logs.value = props.log_total;
     loading.value = false;
     isloading.value = false;
-    for (let i = 0; i < props.log_data.length; i++) {
-      activeNames.value.push(i);
-    }
   } else {
     log_stream.value = [];
     total_logs.value = 0;
@@ -213,28 +219,18 @@ const handleSearch = () => {
     severity: level_key.value,
     service: service_key.value,
     timeRange: log_time.value,
-    noTail: true,
+    noTail: !realTime.value,
     from: 0,
     size: 20,
     isResetLog: isResetLog.value,
   });
 };
 
-// 实时监听日志功能
-const openRealTimeLog = (state: boolean) => {
-  is_continue.value = !state;
-  emit("getWsLogs", {
-    severity: level_key.value,
-    service: service_key.value,
-    timeRange: state ? ["", ""] : log_time.value,
-    noTail: !state,
-  });
-};
 
 const log_size = ref(0);
 let is_continue = ref(true);
 const load = () => {
-  if (total_logs.value !== 0 || !is_continue.value) return;
+  if (total_logs.value == 0 || !is_continue.value || realTime.value) return;
   if (log_size.value >= total_logs.value) {
     log_size.value = total_logs.value;
     is_continue.value = false;
@@ -247,7 +243,7 @@ const load = () => {
     severity: level_key.value,
     service: service_key.value,
     timeRange: log_time.value,
-    noTail: true,
+    noTail: !realTime.value,
     from: log_size.value,
     size: 20,
     type: 5,
@@ -263,7 +259,7 @@ const load = () => {
 }
 
 .log_list {
-  height: 400px;
+  height: 500px;
   width: 100%;
   padding: 0;
 
@@ -284,7 +280,7 @@ const load = () => {
     margin: 0 1px;
     list-style: none;
     li {
-      height: 50px;
+      height: 40px;
     }
   }
 }
-- 
Gitee