feat(log): add app start log

labring · Jun 1, 2024 · 8984cb2 · 8984cb2
1 parent bb77230
commit 8984cb2
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 32 deletions.
diff --git a/server/src/log/log.controller.ts b/server/src/log/log.controller.ts
@@ -123,12 +123,9 @@ export class LogController {
       (pod) => pod.initContainerId,
     )
 
-    console.log(JSON.stringify(podStatus?.podStatus[0], null, 2))
-
     if (containerName === 'init') {
       for (const containerId of initContainerId) {
         if (!containerId) {
-          console.log('no containerId')
           return new Observable<MessageEvent>((subscriber) => {
             subscriber.error(new Error('init container not exist'))
           })
@@ -190,7 +187,6 @@ export class LogController {
       })
 
       combinedLogStream.on('close', () => {
-        console.log('443')
         subscriber.complete()
         destroyStream()
       })
@@ -226,22 +222,19 @@ export class LogController {
           })
 
           k8sResponse.on('close', () => {
-            console.log('k8s close 2222222223333')
             streamsEnded.delete(podName)
             if (streamsEnded.size === 0) {
               combinedLogStream.emit('close')
             }
           })
 
           podLogStream.on('close', () => {
-            console.log('pod stream close 3333333222222222')
             streamsEnded.delete(podName)
             if (streamsEnded.size === 0) {
               combinedLogStream.emit('close')
             }
           })
         } catch (error) {
-          console.log('get log error 11111111111111\n11111111111111')
           subscriber.error(error)
           this.logger.error(`Failed to get logs for pod ${podName}`, error)
           destroyStream()

diff --git a/web/src/pages/app/functions/mods/HeadPanel/index.tsx b/web/src/pages/app/functions/mods/HeadPanel/index.tsx
@@ -88,7 +88,7 @@ function HeadPanel() {
                       setCurrentFunction(item);
                     }}
                   >
-                    <div className="max-w-20 flex truncate">
+                    <div className="flex max-w-20 truncate">
                       <FunctionDetailPopOver
                         functionItem={item}
                         color={selected ? "#00A9A6" : ""}

diff --git a/web/src/pages/app/mods/StatusBar/LogsModal/index.scss b/web/src/pages/app/mods/StatusBar/LogsModal/index.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 #log-viewer-container {
   .pf-v5-c-text-input-group__icon {
     visibility: hidden;
@@ -29,3 +30,16 @@
     background: #2b7873 !important;
   }
 }
+
+.log-viewer-container-hide-scrollbar {
+  &,
+  & * {
+    &::-webkit-scrollbar {
+      width: 0 !important;
+      height: 0 !important;
+    }
+
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
diff --git a/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx b/web/src/pages/app/mods/StatusBar/LogsModal/index.tsx
@@ -159,6 +159,7 @@ export default function LogsModal(props: { children: React.ReactElement }) {
     setRowCount(0);
     setLogs([]);
     setIsLoading(true);
+    setPaused(false);
     const ctrl = fetchLogs();
 
     return () => {
@@ -251,21 +252,26 @@ export default function LogsModal(props: { children: React.ReactElement }) {
             ) : (
               <div
                 id="log-viewer-container"
-                className="text-sm flex h-full flex-col px-2 font-mono"
+                className={clsx("text-sm flex h-full flex-col px-2 font-mono", {
+                  "log-viewer-container-hide-scrollbar": !paused,
+                })}
                 style={{ fontSize: settingStore.commonSettings.fontSize - 1 }}
-                onWheel={(e) => {
-                  setPaused(true);
-                }}
               >
                 <LogViewer
                   data={renderLogs}
-                  hasLineNumbers={false}
-                  scrollToRow={paused ? undefined : rowCount + 1}
+                  hasLineNumbers={true}
+                  scrollToRow={paused ? undefined : rowCount + 300}
                   height={"98%"}
                   onScroll={(e) => {
                     if (e.scrollOffsetToBottom <= 0) {
                       setPaused(false);
+                      return;
                     }
+                    if (!e.scrollUpdateWasRequested) {
+                      setPaused(true);
+                      return;
+                    }
+                    setPaused(false);
                   }}
                   toolbar={
                     <div className="absolute right-24 top-4">

diff --git a/web/src/pages/app/mods/StatusBar/LogsModal/initLog.scss b/web/src/pages/app/mods/StatusBar/LogsModal/initLog.scss
@@ -0,0 +1,45 @@
+/* stylelint-disable selector-class-pattern */
+#log-viewer-cover-container {
+  .pf-v5-c-text-input-group__icon {
+    visibility: hidden;
+  }
+
+  .pf-v5-c-text-input-group__text-input:focus {
+    outline: none !important;
+    color: #000;
+  }
+
+  .pf-m-current {
+    background: #91ded9 !important;
+  }
+
+  .pf-m-match {
+    background: #daf4f2 !important;
+  }
+
+  [data-theme="dark"] & .pf-v5-c-text-input-group__text-input:focus {
+    outline: none !important;
+    color: #fff;
+  }
+
+  [data-theme="dark"] & .pf-m-current {
+    background: #47c8bf !important;
+  }
+
+  [data-theme="dark"] & .pf-m-match {
+    background: #2b7873 !important;
+  }
+}
+
+.log-viewer-cover-container-hide-scrollbar {
+  &,
+  & * {
+    &::-webkit-scrollbar {
+      width: 0 !important;
+      height: 0 !important;
+    }
+
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
diff --git a/web/src/pages/app/mods/StatusBar/LogsModal/initLog.tsx b/web/src/pages/app/mods/StatusBar/LogsModal/initLog.tsx
@@ -4,9 +4,8 @@ import { EventStreamContentType, fetchEventSource } from "@microsoft/fetch-event
 import { LogViewer } from "@patternfly/react-log-viewer";
 import clsx from "clsx";
 
-import "./index.scss";
+import "./initLog.scss";
 
-import useCustomSettingStore from "@/pages/customSetting";
 import useGlobalStore from "@/pages/globalStore";
 
 type Log = {
@@ -17,9 +16,6 @@ type Log = {
 };
 
 export default function InitLog() {
-  const settingStore = useCustomSettingStore();
-  const { showWarning } = useGlobalStore(({ showWarning }) => ({ showWarning }));
-
   const { currentApp } = useGlobalStore((state) => state);
   const [isLoading, setIsLoading] = useState(true);
   const [rowCount, setRowCount] = useState(0);
@@ -66,7 +62,6 @@ export default function InitLog() {
 
       onmessage(msg) {
         if (msg.event === "error") {
-          console.log(msg);
           throw new Error(msg.data);
         }
 
@@ -76,23 +71,21 @@ export default function InitLog() {
       },
 
       onclose() {
-        console.log("onclose");
         throw new Error("connect closed unexpectedly, retrying...");
       },
 
       onerror(err) {
-        showWarning(err.message);
         // auto retry fetch
       },
     });
     return ctrl;
-  }, [currentApp.appid, showWarning]);
+  }, [currentApp.appid]);
 
   useEffect(() => {
     setRowCount(0);
     setLogs([]);
-    setPaused(false);
     setIsLoading(true);
+    setPaused(false);
     const ctrl = fetchLogs();
 
     return () => {
@@ -117,26 +110,29 @@ export default function InitLog() {
       ) : (
         <>
           <div
-            id="log-viewer-container"
+            id="log-viewer-cover-container"
             className={clsx(
               "absolute inset-0 z-[999] h-full w-full px-2 pt-0 font-mono text-base font-bold opacity-65",
               darkMode ? "bg-lafDark-100" : "bg-lafWhite-600",
+              { "log-viewer-cover-container-hide-scrollbar": !paused },
             )}
-            style={{ fontSize: settingStore.commonSettings.fontSize - 1 }}
-            onWheel={(e) => {
-              setPaused(true);
-            }}
+            style={{ fontSize: 16 }}
           >
             <LogViewer
               data={renderLogs}
               hasLineNumbers={false}
-              hasToolbar={false}
-              scrollToRow={paused ? undefined : rowCount + 1}
+              scrollToRow={paused ? undefined : rowCount + 300}
               height={"100%"}
               onScroll={(e) => {
                 if (e.scrollOffsetToBottom <= 0) {
                   setPaused(false);
+                  return;
+                }
+                if (!e.scrollUpdateWasRequested) {
+                  setPaused(true);
+                  return;
                 }
+                setPaused(false);
               }}
             />
           </div>

diff --git a/web/src/pages/app/setting/SysSetting/AppInfoList/index.tsx b/web/src/pages/app/setting/SysSetting/AppInfoList/index.tsx
@@ -13,7 +13,13 @@ import InfoDetail from "./InfoDetail";
 import useGlobalStore from "@/pages/globalStore";
 import DeleteAppModal from "@/pages/home/mods/DeleteAppModal";
 import StatusBadge from "@/pages/home/mods/StatusBadge";
-const AppEnvList = () => {
+
+interface AppEnvListProps {
+  onClose?: () => void;
+}
+
+const AppEnvList: React.FC<AppEnvListProps> = (props = {}) => {
+  const { onClose } = props;
   const { t } = useTranslation();
   const navigate = useNavigate();
 
@@ -67,6 +73,10 @@ const AppEnvList = () => {
                     ? APP_STATUS.Running
                     : APP_STATUS.Restarting,
                 );
+                //  when start close modal window
+                if (currentApp?.phase === APP_PHASE_STATUS.Stopped && onClose) {
+                  onClose();
+                }
               }}
             >
               {currentApp?.phase === APP_PHASE_STATUS.Stopped ? (