feat: Update log viewer

src/components/NodeDetails/LogTerminal.tsx

@@ -1,33 +1,44 @@
-import { LogViewer } from "@patternfly/react-log-viewer";
-import { useAppSelector } from "../../store/hooks";
+import { LogViewer, LogViewerSearch } from "@patternfly/react-log-viewer";
+import { Toolbar, ToolbarContent, ToolbarItem } from "@patternfly/react-core";
 
 type LogTerminalProps = {
   text: string;
 };
 
 const LogTerminal = ({ text }: LogTerminalProps) => {
-  const isTerminalMaximized = useAppSelector(
-    (state) => state.drawers.node.maximized,
-  );
-
-  const containerStyle = {
-    height: isTerminalMaximized ? "100vh" : "100%",
+  // container style
+  const containerStyle: React.CSSProperties = {
+    // If "maximized", fill entire viewport
+    height: "100vh",
     width: "100%",
     display: "flex",
-    flexDirection: "column" as const,
-    flexGrow: 1,
-  };
-
-  const logViewerStyle = {
+    flexDirection: "column",
     flexGrow: 1,
-    overflow: "auto",
-    height: "100%",
-    width: "100%",
   };
 
   return (
     <div style={containerStyle}>
-      <LogViewer style={logViewerStyle} hasLineNumbers={false} data={text} />
+      <LogViewer
+        /* Provide the log text (could be text or data.data, etc.) */
+        data={text}
+        /* Let user toggle wrap text via the checkbox */
+
+        /* Hide line numbers if desired */
+        hasLineNumbers={true}
+        /* Optionally set a fixed or relative height */
+
+        /* Provide a custom toolbar with PatternFly controls */
+        toolbar={
+          <Toolbar>
+            <ToolbarContent>
+              {/* 2) Built-in LogViewerSearch for searching logs */}
+              <ToolbarItem>
+                <LogViewerSearch placeholder="Search" />
+              </ToolbarItem>
+            </ToolbarContent>
+          </Toolbar>
+        }
+      />
     </div>
   );
 };