batch streaming log state updates to improve UI performance (#428)

drone · Jan 11, 2023 · 0d4ee36 · 0d4ee36
1 parent 9df5f0c
commit 0d4ee36
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/src/components/pages/build/log-view/console-manager/console-manager.jsx b/src/components/pages/build/log-view/console-manager/console-manager.jsx
@@ -74,7 +74,7 @@ export default function LogViewConsoleManager(props) {
 
   // logs stream
   useStreamLogs(dispatch,
-    ACTION_LIST.UPDATE_LOGS,
+    ACTION_LIST.BATCH_UPDATE_LOGS,
     params,
     state.compState === STATES.STREAM_ON);
 

diff --git a/src/components/pages/build/log-view/console-manager/console-manager.state.js b/src/components/pages/build/log-view/console-manager/console-manager.state.js
@@ -21,6 +21,7 @@ export const ACTION_LIST = {
   UPDATE_ARE_LOGS_LOADING: 'update_are_logs_loading',
   UPDATE_HAS_BUILD_DEBUG_MODE: 'update_has_build_debug_mode',
   SET_LOGS: 'set_logs',
+  BATCH_UPDATE_LOGS: 'batch_update_logs',
 };
 
 // reducer init fn
@@ -122,6 +123,16 @@ export const logsReducer = (state, action) => {
           state.hasBuildDebugMode,
         ),
       };
+    case ACTION_LIST.BATCH_UPDATE_LOGS:
+      return {
+        ...state,
+        logs: state.logs.concat(...action.payload),
+        tmateLink: state.tmateLink || mayBeExtractTmateLink(
+          action.payload,
+          state.stepData.status,
+          state.hasBuildDebugMode,
+        ),
+      };
     case ACTION_LIST.SET_LOGS:
       return {
         ...state,

diff --git a/src/hooks/swr/logs.js b/src/hooks/swr/logs.js
@@ -59,6 +59,8 @@ const useStreamLogs = (dispatch,
   }, shouldStreamLogs) => {
   const [, forceRerender] = useState();
   const stream = useRef();
+  const timer = useRef(null);
+  const logCache = useRef([]);
   const path = useMemo(() => {
     const pathBody = `${namespace}/${name}/${build}/${stage}/${step}`;
     // make path for stream
@@ -71,7 +73,14 @@ const useStreamLogs = (dispatch,
 
   const messageHandler = useCallback((event) => {
     const receivedLogs = escapeLogs(JSON.parse(event.data));
-    dispatch({ type: actionOnUpdateLogs, payload: receivedLogs });
+    logCache.current.push(receivedLogs);
+    if (!timer.current) {
+      timer.current = setTimeout(() => {
+        dispatch({ type: actionOnUpdateLogs, payload: logCache.current });
+        logCache.current = [];
+        timer.current = null;
+      }, 250);
+    }
   }, [dispatch, actionOnUpdateLogs]);
 
   const errorHandler = useCallback((err, shouldStream) => {