feat: Use react-window for LogsViewer

pkg/webui/ui/package.json

@@ -33,6 +33,8 @@
     "react-scripts": "5.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-transition-group": "^4.4.5",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
     "remark-gfm": "^3.0.1",
     "sort-by": "^1.2.0",
     "typescript": "^4.9.5",
@@ -65,6 +67,7 @@
   "devDependencies": {
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.195",
-    "@types/react-syntax-highlighter": "^15.5.7"
+    "@types/react-syntax-highlighter": "^15.5.7",
+    "@types/react-window": "^1.8.5"
   }
 }

pkg/webui/ui/src/components/LogsViewer.tsx

@@ -1,23 +1,54 @@
 import React, { useContext, useEffect, useState } from "react";
 import { ApiContext } from "./App";
 import { Box } from "@mui/material";
+import { VariableSizeList as List } from 'react-window';
+import AutoSizer from "react-virtualized-auto-sizer";
 
-export function LogsViewer(props: {cluster?: string, name?: string, namespace?: string, reconcileId?: string}) {
+export function LogsViewer(props: { cluster?: string, name?: string, namespace?: string, reconcileId?: string }) {
     const api = useContext(ApiContext);
-    let [lines, setLines] = useState<React.ReactElement[]>([])
+    const [lines, setLines] = useState<any[]>([])
 
     useEffect(() => {
-        console.log(props)
+        let lines: any[] = []
+
+        const appendLines = (l: any[]) => {
+            lines = [...lines, ...l]
+            setLines(lines)
+        }
+
         const cancel = api.watchLogs(props.cluster, props.name, props.namespace, props.reconcileId, (jsonLines: any[]) => {
-            jsonLines.forEach(l => {
-                lines = [...lines, <div key={lines.length}>{l.msg}<br/></div>]
-                setLines(lines)
-            })
+            appendLines(jsonLines)
         })
         return cancel
-    }, [props.reconcileId])
+    }, [props.cluster, props.name, props.namespace, props.reconcileId, api])
+
+    const lineHeight = 25
+
+    const Row = (props: { index: number, style: any }) => {
+        const s = {
+            ...props.style,
+            whiteSpace: "nowrap"
+        }
+        return <div style={s}>{lines[props.index].msg}</div>
+    }
+
+    return <Box width={"100%"} flex={"1 1 auto"}>
+        <AutoSizer>
+            {(props: { height: number, width: number }) => {
+                const getItemSize = (index: number) => {
+                    const l: string = lines[index].msg.split("\n")
+                    return l.length * lineHeight
+                }
 
-    return <Box height={"100%"}>
-        {lines}
+                return <List
+                    itemCount={lines.length}
+                    itemSize={getItemSize}
+                    width={props.width}
+                    height={props.height}
+                >
+                    {Row}
+                </List>
+            }}
+        </AutoSizer>
     </Box>
 }