IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Fix jumpy live tailing (#30650)

Browse Source 
* Fix jumpy live tailing

* Fix test
This commit is contained in:
Ivana Huckova 2021-01-27 15:28:32 +01:00 committed by GitHub
parent 54b1ce2cdb
commit e34d9e1c32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/explore/LiveLogs.test.tsx
View File

@ -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(),

25
public/app/features/explore/LiveLogs.tsx
View File

@ -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<Props, State> {
private liveEndDiv: HTMLDivElement | null = null;
private scrollContainerRef = React.createRef<HTMLTableSectionElement>();
private lastScrollPos: number | null = null;
constructor(props: Props) {
super(props);
@ -73,25 +72,6 @@ class LiveLogs extends PureComponent<Props, State> {
};
}
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<Props, State> {
const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
if (distanceFromBottom >= 5 && !isPaused) {
onPause();
this.lastScrollPos = distanceFromBottom;
}
};
@ -157,7 +136,7 @@ class LiveLogs extends PureComponent<Props, State> {
// 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);
}
}}
/>