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

logs: context: various scrolling-fixes (#72271)

Browse Source 
* logs: context: correctly append to the above&below arrays

* logs: context: on initial load always scroll to center

* logs: context: reset counts when context-query-ui changes
This commit is contained in:
Gábor Farkas 2023-07-25 14:34:02 +02:00 committed by GitHub
parent 2a5a4ded53
commit 63e0b927bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
public/app/features/logs/components/log-context/LogRowContextModal.tsx
View File

@ -279,6 +279,7 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
const updateResults = async () => {
await updateContextQuery();
setContext(makeEmptyContext());
loadCountRef.current = { above: 0, below: 0 };
generationRef.current += 1; // results from currently running loadMore calls will be ignored
};
@ -363,16 +364,33 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
const newBelow = logsSortOrder === LogsSortOrder.Ascending ? older : newer;
if (currentGen === generationRef.current) {
setContext((c) => ({
above: {
rows: sortLogRows([...newAbove, ...c.above.rows], logsSortOrder),
loadingState: newRows.length === 0 ? LoadingState.Done : LoadingState.NotStarted,
},
below: {
rows: sortLogRows([...c.below.rows, ...newBelow], logsSortOrder),
loadingState: newRows.length === 0 ? LoadingState.Done : LoadingState.NotStarted,
},
}));
setContext((c) => {
// we should only modify the row-arrays if necessary
const sortedNewAbove =
newAbove.length > 0 ? sortLogRows([...newAbove, ...c.above.rows], logsSortOrder) : c.above.rows;
const sortedNewBelow =
newBelow.length > 0 ? sortLogRows([...c.below.rows, ...newBelow], logsSortOrder) : c.below.rows;
return {
above: {
rows: sortedNewAbove,
loadingState:
place === 'above'
? newRows.length === 0
? LoadingState.Done
: LoadingState.NotStarted
: c.above.loadingState,
},
below: {
rows: sortedNewBelow,
loadingState:
place === 'below'
? newRows.length === 0
? LoadingState.Done
: LoadingState.NotStarted
: c.below.loadingState,
},
};
});
}
} catch {
setSection(place, (section) => ({
@ -444,6 +462,13 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
return;
}
// if the newly loaded content is part of the initial load of `above` and `below`,
// we scroll to center, to keep the chosen log-row centered
if (loadCountRef.current.above <= 1 && loadCountRef.current.below <= 1) {
scrollToCenter();
return;
}
const prevScrollHeight = prevScrollHeightRef.current;
const currentHeight = scrollE.scrollHeight;
prevScrollHeightRef.current = currentHeight;