1
0
mirror of https://github.com/sasjs/server.git synced 2025-12-12 03:54:34 +00:00

fix(log): fixed scrolling issue

This commit is contained in:
Yury Shkoda
2023-04-27 17:53:45 +03:00
parent 87e9172cfc
commit 56a522c07c
3 changed files with 21 additions and 9 deletions

View File

@@ -114,10 +114,7 @@ const SASjsEditor = ({
// INFO: variable indicating if selected run type is SAS if there are any errors or warnings in the log // INFO: variable indicating if selected run type is SAS if there are any errors or warnings in the log
const logWithErrorsOrWarnings = const logWithErrorsOrWarnings =
selectedRunTime === RunTimeType.SAS && selectedRunTime === RunTimeType.SAS && log && typeof log === 'object'
log &&
((log as LogObject).errors?.length !== 0 ||
(log as LogObject).warnings?.length !== 0)
return ( return (
<Box sx={{ width: '100%', typography: 'body1', marginTop: '50px' }}> <Box sx={{ width: '100%', typography: 'body1', marginTop: '50px' }}>

View File

@@ -23,6 +23,7 @@ interface LogChunkProps {
logLineCount: number logLineCount: number
onClick: (evt: any, id: number) => void onClick: (evt: any, id: number) => void
scrollToLogInstance?: LogInstance scrollToLogInstance?: LogInstance
updated: number
} }
const LogChunk = (props: LogChunkProps) => { const LogChunk = (props: LogChunkProps) => {
@@ -39,6 +40,19 @@ const LogChunk = (props: LogChunkProps) => {
setExpanded(props.expanded) setExpanded(props.expanded)
}, [props.expanded]) }, [props.expanded])
useEffect(() => {
if (props.expanded !== expanded) {
setExpanded(props.expanded)
}
if (
props.scrollToLogInstance &&
props.scrollToLogInstance !== scrollToLogInstance
) {
setScrollToLogInstance(props.scrollToLogInstance)
}
}, [props])
useEffect(() => { useEffect(() => {
if (expanded && scrollToLogInstance) { if (expanded && scrollToLogInstance) {
const { type, id } = scrollToLogInstance const { type, id } = scrollToLogInstance
@@ -49,18 +63,18 @@ const LogChunk = (props: LogChunkProps) => {
document.querySelector(`#log_container`) document.querySelector(`#log_container`)
if (line && logWrapper && logContainer) { if (line && logWrapper && logContainer) {
const initialColor = line.style.color line.className = classes.HighlightedLine
line.style.backgroundColor = '#f6e30599'
line.scrollIntoView({ behavior: 'smooth', block: 'start' }) line.scrollIntoView({ behavior: 'smooth', block: 'start' })
setTimeout(() => { setTimeout(() => {
line.setAttribute('style', `color: ${initialColor};`) line.classList.remove(classes.HighlightedLine)
setScrollToLogInstance(undefined)
}, 3000) }, 3000)
} }
} }
}, [expanded, scrollToLogInstance]) }, [expanded, scrollToLogInstance, props])
const { errors, warnings } = parseErrorsAndWarnings(text) const { errors, warnings } = parseErrorsAndWarnings(text)

View File

@@ -189,6 +189,7 @@ const LogComponent = (props: LogComponentProps) => {
key={`log-chunk-${id}`} key={`log-chunk-${id}`}
logLineCount={logObject.linesCount} logLineCount={logObject.linesCount}
scrollToLogInstance={scrollToLogInstance} scrollToLogInstance={scrollToLogInstance}
updated={Date.now()}
onClick={(_, chunkNumber) => { onClick={(_, chunkNumber) => {
setLogChunksState((prevState) => { setLogChunksState((prevState) => {
const newState = [...prevState] const newState = [...prevState]