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 () => { const updateResults = async () => {
await updateContextQuery(); await updateContextQuery();
setContext(makeEmptyContext()); setContext(makeEmptyContext());
loadCountRef.current = { above: 0, below: 0 };
generationRef.current += 1; // results from currently running loadMore calls will be ignored 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; const newBelow = logsSortOrder === LogsSortOrder.Ascending ? older : newer;
if (currentGen === generationRef.current) { if (currentGen === generationRef.current) {
setContext((c) => ({ setContext((c) => {
above: { // we should only modify the row-arrays if necessary
rows: sortLogRows([...newAbove, ...c.above.rows], logsSortOrder), const sortedNewAbove =
loadingState: newRows.length === 0 ? LoadingState.Done : LoadingState.NotStarted, newAbove.length > 0 ? sortLogRows([...newAbove, ...c.above.rows], logsSortOrder) : c.above.rows;
}, const sortedNewBelow =
below: { newBelow.length > 0 ? sortLogRows([...c.below.rows, ...newBelow], logsSortOrder) : c.below.rows;
rows: sortLogRows([...c.below.rows, ...newBelow], logsSortOrder), return {
loadingState: newRows.length === 0 ? LoadingState.Done : LoadingState.NotStarted, 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 { } catch {
setSection(place, (section) => ({ setSection(place, (section) => ({
@ -444,6 +462,13 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
return; 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 prevScrollHeight = prevScrollHeightRef.current;
const currentHeight = scrollE.scrollHeight; const currentHeight = scrollE.scrollHeight;
prevScrollHeightRef.current = currentHeight; prevScrollHeightRef.current = currentHeight;