From 0d4ee3608511ff9ab8a941ca6b248d1a5aaf24b4 Mon Sep 17 00:00:00 2001
From: Dan Wilson <daniel.wilson@harness.io>
Date: Wed, 11 Jan 2023 14:32:38 +0000
Subject: [PATCH] batch streaming log state updates to improve UI performance
 (#428)

---
 .../log-view/console-manager/console-manager.jsx      |  2 +-
 .../log-view/console-manager/console-manager.state.js | 11 +++++++++++
 src/hooks/swr/logs.js                                 | 11 ++++++++++-
 3 files changed, 22 insertions(+), 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
index 70ebbfff..3202feec 100644
--- 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
index 1dbb7c14..33071b73 100644
--- 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
index 51b2733c..d19e1ce3 100644
--- 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) => {