You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampark.apache.org by be...@apache.org on 2022/11/29 14:16:57 UTC

[incubator-streampark] branch dev updated: [improve]: app start log dynamic line limit (#2107)

This is an automated email from the ASF dual-hosted git repository.

benjobs pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git


The following commit(s) were added to refs/heads/dev by this push:
     new 3cee5f7e5 [improve]: app start log dynamic line limit (#2107)
3cee5f7e5 is described below

commit 3cee5f7e57d175afdda35ce649e1286a29c430d1
Author: WSZ <12...@qq.com>
AuthorDate: Tue Nov 29 22:16:50 2022 +0800

    [improve]: app start log dynamic line limit (#2107)
---
 .../flink/app/components/AppView/LogModal.vue      | 25 ++++++++++---
 .../src/views/flink/app/hooks/useLog.ts            | 42 ++++++++++++++--------
 2 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppView/LogModal.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppView/LogModal.vue
index f2e3c387e..20ab2d608 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppView/LogModal.vue
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppView/LogModal.vue
@@ -34,14 +34,18 @@
   const logTime = ref<string>('');
   const getLogLoading = ref<boolean>(false);
   const app = reactive<Recordable>({});
+  let skipLineNum = 0;
+  let logContent = '';
 
   const [registerModal, { changeLoading, closeModal }] = useModalInner((data) => {
     data && onReceiveModalData(data);
   });
 
-  const { setContent, logRef, handleRevealLine } = useLog();
+  const { setContent, logRef, handleRevealLine, getLineCount } = useLog();
 
   function onReceiveModalData(data) {
+    skipLineNum = 0;
+    logContent = '';
     Object.assign(app, unref(data.app));
     changeLoading(true);
     refreshLog();
@@ -63,13 +67,24 @@
         namespace: app.k8sNamespace,
         jobName: app.jobName,
         jobId: app.jobId,
-        limit: 100000000,
-        skipLineNum: 0,
+        limit: 100,
+        skipLineNum,
       });
       const status = data.status || 'error';
       if (status === 'success') {
-        setContent(data.data);
-        handleRevealLine();
+        if (data.data) {
+          logContent += data.data;
+          setContent(logContent);
+          handleRevealLine();
+          setTimeout(() => {
+            const currentLineCount = getLineCount() - 1;
+            if (currentLineCount < skipLineNum + 100) {
+              skipLineNum = currentLineCount;
+            } else {
+              skipLineNum += 100;
+            }
+          }, 500);
+        }
         logTime.value = formatToDateTime(new Date());
       }
     } catch (error) {
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useLog.ts b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useLog.ts
index f8b2c8d32..00e2d0f4d 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useLog.ts
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useLog.ts
@@ -16,7 +16,6 @@
  */
 import { ref, watch, computed } from 'vue';
 import { useMonaco, isDark } from '/@/hooks/web/useMonaco';
-import { useThrottleFn } from '@vueuse/core';
 
 export const useLog = () => {
   const logRef = ref<HTMLElement>();
@@ -64,18 +63,16 @@ export const useLog = () => {
       if (!logRef.value) return;
       const editorHeight = logRef.value.clientHeight;
       editor = await getInstance();
-      editor?.onDidScrollChange(
-        useThrottleFn((e: any) => {
-          if (e.scrollTop > 0) {
-            if (editorHeight + e.scrollTop + 15 >= e.scrollHeight) {
-              autoScroll.value = true;
-            } else {
-              autoScroll.value = false;
-              console.log('close');
-            }
+      editor?.onDidScrollChange((e: any) => {
+        if (e.scrollTop > 0) {
+          if (editorHeight + e.scrollTop + 15 >= e.scrollHeight) {
+            autoScroll.value = true;
+          } else {
+            autoScroll.value = false;
+            console.log('close');
           }
-        }, 500),
-      );
+        }
+      });
     },
   );
   function setAutoScroll(scroll: boolean) {
@@ -130,8 +127,25 @@ export const useLog = () => {
   function handleRevealLine() {
     if (!autoScroll.value) return;
     if (editor) {
-      editor.revealLine(editor.getModel()?.getLineCount() || 0);
+      setTimeout(() => {
+        editor.revealLine(editor.getModel()?.getLineCount() + 1 || 0);
+      }, 500);
     }
   }
-  return { setAutoScroll, getInstance, getAutoScroll, setContent, logRef, handleRevealLine };
+  function getLineCount() {
+    if (editor) {
+      return editor.getModel()?.getLineCount() || 0;
+    } else {
+      return 0;
+    }
+  }
+  return {
+    setAutoScroll,
+    getInstance,
+    getAutoScroll,
+    setContent,
+    logRef,
+    handleRevealLine,
+    getLineCount,
+  };
 };