Fix: live tail memory (#2033)

* feat: react is updated to v18

* feat: logs card is updated

frontend/package.json

@@ -80,6 +80,7 @@
 		"react-redux": "^7.2.2",
 		"react-router-dom": "^5.2.0",
 		"react-use": "^17.3.2",
+		"react-virtuoso": "4.0.3",
 		"react-vis": "^1.11.7",
 		"redux": "^4.0.5",
 		"redux-thunk": "^2.3.0",

frontend/src/container/LogLiveTail/index.tsx

@@ -55,22 +55,25 @@ function LogLiveTail(): JSX.Element {
 
 	const batchedEventsRef = useRef<Record<string, unknown>[]>([]);
 
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	const pushLiveLog = useCallback(
-		throttle(() => {
+	const pushLiveLog = useCallback(() => {
 		dispatch({
 			type: PUSH_LIVE_TAIL_EVENT,
 			payload: batchedEventsRef.current.reverse(),
 		});
 		batchedEventsRef.current = [];
-		}, 1500),
-		[],
-	);
+	}, [dispatch]);
 
-	const batchLiveLog = (e: { data: string }): void => {
+	const pushLiveLogThrottled = useMemo(() => throttle(pushLiveLog, 1000), [
+		pushLiveLog,
+	]);
+
+	const batchLiveLog = useCallback(
+		(e: { data: string }): void => {
 			batchedEventsRef.current.push(JSON.parse(e.data as string) as never);
-		pushLiveLog();
-	};
+			pushLiveLogThrottled();
+		},
+		[pushLiveLogThrottled],
+	);
 
 	// This ref depicts thats whether the live tail is played from paused state or not.
 	const liveTailSourceRef = useRef<EventSource | null>(null);

frontend/src/container/LogsTable/index.tsx

@@ -1,10 +1,9 @@
-/* eslint-disable no-nested-ternary */
 import { Typography } from 'antd';
 import LogItem from 'components/Logs/LogItem';
 import Spinner from 'components/Spinner';
-import map from 'lodash-es/map';
-import React, { memo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import { Virtuoso } from 'react-virtuoso';
 import { AppState } from 'store/reducers';
 import { ILogsReducer } from 'types/reducer/logs';
 
@@ -15,6 +14,24 @@ function LogsTable(): JSX.Element {
 		(state) => state.logs,
 	);
 
+	const isLiveTail = useMemo(() => logs.length === 0 && liveTail === 'PLAYING', [
+		logs?.length,
+		liveTail,
+	]);
+
+	const isNoLogs = useMemo(() => logs.length === 0 && liveTail === 'STOPPED', [
+		logs?.length,
+		liveTail,
+	]);
+
+	const getItemContent = useCallback(
+		(index: number): JSX.Element => {
+			const log = logs[index];
+			return <LogItem key={log.id} logData={log} />;
+		},
+		[logs],
+	);
+
 	if (isLoading) {
 		return <Spinner height={20} tip="Getting Logs" />;
 	}
@@ -24,13 +41,15 @@ function LogsTable(): JSX.Element {
 			<Heading>
 				<Typography.Text>Event</Typography.Text>
 			</Heading>
-			{Array.isArray(logs) && logs.length > 0 ? (
-				map(logs, (log) => <LogItem key={log.id} logData={log} />)
-			) : liveTail === 'PLAYING' ? (
-				<span>Getting live logs...</span>
-			) : (
-				<span>No log lines found</span>
-			)}
+			{isLiveTail && <Typography>Getting live logs...</Typography>}
+
+			{isNoLogs && <Typography>No log lines found</Typography>}
+
+			<Virtuoso
+				useWindowScroll
+				totalCount={logs.length}
+				itemContent={getItemContent}
+			/>
 		</Container>
 	);
 }

frontend/yarn.lock

@@ -11223,6 +11223,11 @@ react-use@^17.3.2:
     ts-easing "^0.2.0"
     tslib "^2.1.0"
 
+react-virtuoso@4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.0.3.tgz#0dc8b10978095852d985b064157639b9fb9d9b1e"
+  integrity sha512-tyqt8FBWxO+smve/kUgJbhCI2MEOvH2hHgFYPKWBMA2cJmV+cHIDDh1BL/6w4pg/dcCdlHCNVwi6aiztPxWttw==
+
 react-vis@^1.11.7:
   version "1.11.7"
   resolved "https://registry.yarnpkg.com/react-vis/-/react-vis-1.11.7.tgz#909902af00158895d14da1adfe1d0dc0045228ff"