diff --git a/public/app/features/explore/LiveLogs.test.tsx b/public/app/features/explore/LiveLogs.test.tsx index 5417147ad5d..d082b42fe25 100644 --- a/public/app/features/explore/LiveLogs.test.tsx +++ b/public/app/features/explore/LiveLogs.test.tsx @@ -44,7 +44,7 @@ describe('LiveLogs', () => { expect(wrapper.contains('log message 2')).toBeTruthy(); expect(wrapper.contains('log message 3')).toBeTruthy(); - (wrapper.find('LiveLogs').instance() as any).liveEndDiv.scrollIntoView = () => {}; + (wrapper.find('LiveLogs').instance() as any).scrollContainerRef.current.scrollTo = () => {}; wrapper.setProps({ ...wrapper.props(), diff --git a/public/app/features/explore/LiveLogs.tsx b/public/app/features/explore/LiveLogs.tsx index 368b5c18ccd..cff88f85572 100644 --- a/public/app/features/explore/LiveLogs.tsx +++ b/public/app/features/explore/LiveLogs.tsx @@ -15,7 +15,7 @@ const getStyles = (theme: GrafanaTheme) => ({ display: flex; flex-flow: column nowrap; height: 60vh; - overflow-y: auto; + overflow-y: scroll; :first-child { margin-top: auto !important; } @@ -64,7 +64,6 @@ interface State { class LiveLogs extends PureComponent { private liveEndDiv: HTMLDivElement | null = null; private scrollContainerRef = React.createRef(); - private lastScrollPos: number | null = null; constructor(props: Props) { super(props); @@ -73,25 +72,6 @@ class LiveLogs extends PureComponent { }; } - componentDidUpdate(prevProps: Props) { - if (!prevProps.isPaused && this.props.isPaused) { - // So we paused the view and we changed the content size, but we want to keep the relative offset from the bottom. - if (this.lastScrollPos && this.scrollContainerRef.current) { - // There is last scroll pos from when user scrolled up a bit so go to that position. - const { clientHeight, scrollHeight } = this.scrollContainerRef.current; - const scrollTop = scrollHeight - (this.lastScrollPos + clientHeight); - this.scrollContainerRef.current.scrollTo(0, scrollTop); - this.lastScrollPos = null; - } else { - // We do not have any position to jump to su the assumption is user just clicked pause. We can just scroll - // to the bottom. - if (this.liveEndDiv) { - this.liveEndDiv.scrollIntoView(false); - } - } - } - } - static getDerivedStateFromProps(nextProps: Props, state: State) { if (!nextProps.isPaused) { return { @@ -116,7 +96,6 @@ class LiveLogs extends PureComponent { const distanceFromBottom = scrollHeight - (scrollTop + clientHeight); if (distanceFromBottom >= 5 && !isPaused) { onPause(); - this.lastScrollPos = distanceFromBottom; } }; @@ -157,7 +136,7 @@ class LiveLogs extends PureComponent { // This is triggered on every update so on every new row. It keeps the view scrolled at the bottom by // default. if (this.liveEndDiv && !isPaused) { - this.liveEndDiv.scrollIntoView(false); + this.scrollContainerRef.current?.scrollTo(0, this.scrollContainerRef.current.scrollHeight); } }} />