From 022c5b5169ac60fba228d61b63588f9ab99f931f Mon Sep 17 00:00:00 2001
From: limbo <43649186+HUAHUAI23@users.noreply.github.com>
Date: Wed, 19 Jun 2024 18:11:49 +0800
Subject: [PATCH] chore(web): optimize log display logic (#2013)

* fix(web): adjust transparency of the overlay for application startup logs

* chore(web): Optimize log display logic

---------

Co-authored-by: HUAHUAI23 <lim@outlook.com>
Co-authored-by: GH Action - Upstream Sync <action@github.com>
---
 .../AddDependenceModal/index.tsx              |  1 -
 .../app/mods/StatusBar/LogsModal/index.tsx    | 13 +++++++----
 .../app/mods/StatusBar/LogsModal/initLog.tsx  | 23 +++++++++++--------
 3 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx
index 47efa8161f..3ea6ddb40e 100644
--- a/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx
+++ b/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx
@@ -385,7 +385,6 @@ const AddDependenceModal = () => {
                   >
                     {t("FunctionPanel.Select")}:
                   </span>
-                  {/* {t("FunctionPanel.Select")}: */}
                   <span className="mx-2 text-blue-500 ">
                     {isEdit ? (
                       packageList.length
diff --git a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx
index 0b6f0a232d..61f425e0ee 100644
--- a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx
+++ b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx
@@ -156,10 +156,11 @@ 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 () => {
@@ -168,7 +169,9 @@ 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;
@@ -260,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;
                     }
diff --git a/web/src/pages/app/mods/StatusBar/LogsModal/initLog.tsx b/web/src/pages/app/mods/StatusBar/LogsModal/initLog.tsx
index 176b11fa46..3abee21fd2 100644
--- a/web/src/pages/app/mods/StatusBar/LogsModal/initLog.tsx
+++ b/web/src/pages/app/mods/StatusBar/LogsModal/initLog.tsx
@@ -82,10 +82,11 @@ export default function InitLog() {
   }, [currentApp.appid]);
 
   useEffect(() => {
-    setRowCount(0);
+    setPaused(false);
     setLogs([]);
+    setRowCount(0);
     setIsLoading(true);
-    setPaused(false);
+
     const ctrl = fetchLogs();
 
     return () => {
@@ -94,11 +95,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 (
@@ -121,10 +126,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;
                 }