From 09114b09fa4251f058597ebfa35b70512f90d649 Mon Sep 17 00:00:00 2001
From: limbo <43649186+HUAHUAI23@users.noreply.github.com>
Date: Wed, 19 Jun 2024 14:57:29 +0800
Subject: [PATCH] chore(web): optimize log display logic (#7)

---
 .../app/mods/StatusBar/LogsModal/InitLog.tsx  | 22 +++++++++++--------
 .../app/mods/StatusBar/LogsModal/index.tsx    | 11 +++++-----
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/web/src/pages/app/mods/StatusBar/LogsModal/InitLog.tsx b/web/src/pages/app/mods/StatusBar/LogsModal/InitLog.tsx
index edc112e..61f2628 100644
--- a/web/src/pages/app/mods/StatusBar/LogsModal/InitLog.tsx
+++ b/web/src/pages/app/mods/StatusBar/LogsModal/InitLog.tsx
@@ -84,10 +84,10 @@ export default function InitLog() {
   }, [currentApp.appid]);
 
   useEffect(() => {
-    setRowCount(0);
+    setPaused(false);
     setLogs([]);
+    setRowCount(0);
     setIsLoading(true);
-    setPaused(false);
     const ctrl = fetchLogs();
 
     return () => {
@@ -96,11 +96,15 @@ export default function InitLog() {
   }, [fetchLogs]);
 
   useEffect(() => {
-    const sortedLogs = logs.sort((a, b) => parseInt(a.id) - parseInt(b.id));
-    const concatenatedLogs = sortedLogs.map((log) => log.data).join("");
-    setRenderLogs(concatenatedLogs);
-    const totalRows = concatenatedLogs.split("\n").length;
-    setRowCount(totalRows);
+    if (logs.length === 0) return;
+
+    const sortedLogs = [...logs].sort((a, b) => parseInt(a.id) - parseInt(b.id));
+    const logLines = sortedLogs.flatMap((log) => log.data.split("\n"));
+    const filteredLogLines = logLines.filter((line) => line.trim() !== "");
+    const uniqueLogLines = Array.from(new Set(filteredLogLines));
+
+    setRenderLogs(uniqueLogLines.join("\n"));
+    setRowCount(uniqueLogLines.length);
   }, [logs]);
 
   return (
@@ -123,10 +127,10 @@ export default function InitLog() {
             <LogViewer
               data={renderLogs}
               hasLineNumbers={false}
-              scrollToRow={paused ? undefined : rowCount + 300}
+              scrollToRow={paused ? undefined : rowCount + 1}
               height={"100%"}
               onScroll={(e) => {
-                if (e.scrollOffsetToBottom <= 0) {
+                if (e.scrollOffsetToBottom <= 5) {
                   setPaused(false);
                   return;
                 }
diff --git a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx
index 5f8d550..8b411bd 100644
--- a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx
+++ b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx
@@ -158,10 +158,10 @@ export default function LogsModal(props: { children: React.ReactElement }) {
 
   useEffect(() => {
     if (!isOpen) return;
-    setRowCount(0);
+    setPaused(false);
     setLogs([]);
+    setRowCount(0);
     setIsLoading(true);
-    setPaused(false);
     const ctrl = fetchLogs();
 
     return () => {
@@ -170,7 +170,8 @@ export default function LogsModal(props: { children: React.ReactElement }) {
   }, [podName, containerName, isOpen, refresh, fetchLogs]);
 
   useEffect(() => {
-    const sortedLogs = logs.sort((a, b) => parseInt(a.id) - parseInt(b.id));
+    if (logs.length === 0) return;
+    const sortedLogs = [...logs].sort((a, b) => parseInt(a.id) - parseInt(b.id));
     const concatenatedLogs = sortedLogs.map((log) => log.data).join("");
     setRenderLogs(concatenatedLogs);
     const totalRows = concatenatedLogs.split("\n").length;
@@ -262,10 +263,10 @@ export default function LogsModal(props: { children: React.ReactElement }) {
                 <LogViewer
                   data={renderLogs}
                   hasLineNumbers={true}
-                  scrollToRow={paused ? undefined : rowCount + 300}
+                  scrollToRow={paused ? undefined : rowCount + 1}
                   height={"98%"}
                   onScroll={(e) => {
-                    if (e.scrollOffsetToBottom <= 0) {
+                    if (e.scrollOffsetToBottom <= 5) {
                       setPaused(false);
                       return;
                     }