-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
66 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,85 +1,80 @@ | ||
| import React from 'react'; | ||
| import {LogViewer, LogViewerSearch} from '@patternfly/react-log-viewer'; | ||
| import {Button, Toolbar, ToolbarContent, ToolbarItem} from '@patternfly/react-core'; | ||
| import React from "react"; | ||
| import { LogViewer } from "@patternfly/react-log-viewer"; | ||
| import { Button } from "@patternfly/react-core"; | ||
| import "@patternfly/react-core/dist/styles/base.css"; | ||
| import OutlinedPlayCircleIcon from "@patternfly/react-icons/dist/esm/icons/outlined-play-circle-icon"; | ||
|
|
||
| const LogStationLogViewer = (props) => { | ||
| // isPaused: control for whether a user has scrolled up (paused) | ||
| // this isPaused effectively stops the webapp from pinning to the bottom of the log | ||
| const [isPaused, setIsPaused] = React.useState(false); | ||
|
|
||
| // isPaused: control for whether a user has scrolled up (paused) | ||
| // this isPaused effectively stops the webapp from pinning to the bottom of the log | ||
| const [isPaused, setIsPaused] = React.useState(false); | ||
| // selectedScrollToRow: the row in the log that the LogViewer should scroll to (via prop scrollToRow) | ||
| // when set to undefined, the scrollToRow prop will do nothing | ||
| const [selectedScrollToRow, setSelectedScrollToRow] = | ||
| React.useState(undefined); | ||
|
|
||
| // selectedScrollToRow: the row in the log that the LogViewer should scroll to (via prop scrollToRow) | ||
| // when set to undefined, the scrollToRow prop will do nothing | ||
| const [selectedScrollToRow, setSelectedScrollToRow] = React.useState(undefined) | ||
| // reference for the LogViewer component | ||
| const logViewerRef = React.useRef(); | ||
|
|
||
| // reference for the LogViewer component | ||
| const logViewerRef = React.useRef(); | ||
| // when the log file we're viewing changes, reset a few things | ||
| React.useEffect(() => { | ||
| setIsPaused(false); | ||
| }, [props.logFileName]); | ||
|
|
||
| // when the log file we're viewing changes, reset a few things | ||
| React.useEffect(() => { | ||
| setIsPaused(false) | ||
| }, [props.logFileName]); | ||
| React.useEffect(() => { | ||
| if (!isPaused) { | ||
| if (logViewerRef && logViewerRef.current) { | ||
| setSelectedScrollToRow(props.data.length); // scroll down to the end of the log file | ||
| } | ||
| } | ||
| }, [isPaused, props.data.length]); | ||
|
|
||
| React.useEffect(() => { | ||
| if (!isPaused) { | ||
| if (logViewerRef && logViewerRef.current) { | ||
| setSelectedScrollToRow(props.data.length) // scroll down to the end of the log file | ||
| } | ||
| } | ||
| }, [isPaused, props.data.length]); | ||
| const onScroll = ({ | ||
| scrollOffsetToBottom, | ||
| _scrollDirection, | ||
| scrollUpdateWasRequested, | ||
| }) => { | ||
| if (!scrollUpdateWasRequested) { | ||
| if (scrollOffsetToBottom > 0) { | ||
| // if we're not at the bottom | ||
| setIsPaused(true); // pause log | ||
| setSelectedScrollToRow(undefined); // stop the pinning/tailing to the bottom via prop scrollToRow | ||
| } else { | ||
| setIsPaused(false); // tail the log (pin to the bottom of log) | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| const onScroll = ({ scrollOffsetToBottom, _scrollDirection, scrollUpdateWasRequested }) => { | ||
| if (!scrollUpdateWasRequested) { | ||
| if (scrollOffsetToBottom > 0) { // if we're not at the bottom | ||
| setIsPaused(true); // pause log | ||
| setSelectedScrollToRow(undefined) // stop the pinning/tailing to the bottom via prop scrollToRow | ||
| } else { | ||
| setIsPaused(false); // tail the log (pin to the bottom of log) | ||
| } | ||
| } | ||
| // shows a button on the bottom that lets you resume tailing the log if you scrolled up / paused | ||
| const FooterButton = () => { | ||
| const handleClick = (_e) => { | ||
| setIsPaused(false); | ||
| }; | ||
|
|
||
| // shows a button on the bottom that lets you resume tailing the log if you scrolled up / paused | ||
| const FooterButton = () => { | ||
| const handleClick = _e => { | ||
| setIsPaused(false); | ||
| }; | ||
| return ( | ||
| <Button onClick={handleClick} isBlock> | ||
| <OutlinedPlayCircleIcon /> | ||
| {" "} | ||
| resume | ||
| {/*resume {linesBehind === 0 ? null : `and show ${linesBehind} lines`}*/} | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| return ( //TODO: Tracking line wrap overflow bug in https://github.com/patternfly/react-log-viewer/issues/3 | ||
| <LogViewer hasLineNumbers={false} | ||
| height={'100%'} | ||
| width={'100%'} | ||
| data={props.data} | ||
| theme={'dark'} | ||
| isTextWrapped={true} | ||
| innerRef={logViewerRef} | ||
| scrollToRow={selectedScrollToRow} | ||
| onScroll={onScroll} | ||
| footer={isPaused && <FooterButton />} | ||
| //TODO: disabled search for now. Will come back to it. | ||
| //TODO: put the search in the top bar on the right. Good place for it. | ||
| // toolbar={ | ||
| // <Toolbar> | ||
| // <ToolbarContent> | ||
| // <ToolbarItem> | ||
| // <LogViewerSearch minSearchChars={2} placeholder={" search"}/> | ||
| // </ToolbarItem> | ||
| // </ToolbarContent> | ||
| // </Toolbar> | ||
| // } | ||
| /> | ||
| return ( | ||
| <Button onClick={handleClick} isBlock> | ||
| <OutlinedPlayCircleIcon /> resume | ||
| {/*resume {linesBehind === 0 ? null : `and show ${linesBehind} lines`}*/} | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| //TODO: Tracking line wrap overflow bug in https://github.com/patternfly/react-log-viewer/issues/3 | ||
| <LogViewer | ||
| hasLineNumbers={false} | ||
| height={"100%"} | ||
| width={"100%"} | ||
| data={props.data} | ||
| theme={"dark"} | ||
| isTextWrapped={true} | ||
| innerRef={logViewerRef} | ||
| scrollToRow={selectedScrollToRow} | ||
| onScroll={onScroll} | ||
| overScanCount={500} | ||
| footer={isPaused && <FooterButton />} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default LogStationLogViewer; | ||
| export default LogStationLogViewer; |