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>
labring · Jun 19, 2024 · 022c5b5 · 022c5b5
1 parent 766cb9e
commit 022c5b5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 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
@@ -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
@@ -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
@@ -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;
                 }