Add search capability to logviewer

jdrews · Feb 6, 2023 · 617039c · 617039c
1 parent ff45a28
commit 617039c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 16 deletions.
diff --git a/web/package.json b/web/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.0",
     "@mui/material": "^5.10.0",
+    "@patternfly/react-core": "^4.276.6",
     "@patternfly/react-log-viewer": "^4.87.100",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",

diff --git a/web/src/LogStationLogViewer.jsx b/web/src/LogStationLogViewer.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import {LogViewer, LogViewerSearch} from '@patternfly/react-log-viewer';
+import { Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';
+import "@patternfly/react-core/dist/styles/base.css";
+
+const LogStationLogViewer = (props) => {
+
+    return (
+        <LogViewer hasLineNumbers={false}
+                   height={'100%'}
+                   width={'100%'}
+                   data={props.data}
+                   theme={'dark'}
+                   isTextWrapped={true}
+                   toolbar={
+                       <Toolbar>
+                           <ToolbarContent>
+                               <ToolbarItem>
+                                   <LogViewerSearch minSearchChars={2} placeholder={"         search"}/>
+                               </ToolbarItem>
+                           </ToolbarContent>
+                       </Toolbar>
+                   }/>
+    );
+};
+
+export default LogStationLogViewer;
diff --git a/web/src/LogViewerComponent.js b/web/src/LogViewerComponent.js
diff --git a/web/src/MainLayout.jsx b/web/src/MainLayout.jsx
@@ -1,5 +1,5 @@
 import './LogViewer.css';
-import LogViewerComponent from "./LogViewerComponent";
+import LogStationLogViewer from "./LogStationLogViewer";
 
 import Container from '@mui/material/Container';
 import Tabs from '@mui/material/Tabs';
@@ -36,8 +36,8 @@ const MainLayout = (props) => {
                              sx={{color: '#ffffff', background: '#222', textTransform: 'unset'}}/>
                     </Tabs>
                 </Box>
-                <Box sx={{width: '100%', height: '92vh', m: 0, p: 0}} className="LogViewer">
-                       <LogViewerComponent data={props.lines}/>
+                <Box sx={{width: '100%', height: '92vh'}} className="LogViewer">
+                       <LogStationLogViewer data={props.lines}/>
                 </Box>
         </Container>
     );