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: Fix LogContext scrolling behavior (#66654)

Browse Source 
fix logrowcontext scrolling behavior
This commit is contained in:
Sven Grossmann 2023-04-17 13:05:56 +02:00 committed by GitHub
parent 50c5bbc367
commit 9a4c7ef758
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -120,6 +120,10 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
}) => { }) => {
const scrollElement = React.createRef<HTMLDivElement>(); const scrollElement = React.createRef<HTMLDivElement>();
const entryElement = React.createRef<HTMLTableRowElement>(); const entryElement = React.createRef<HTMLTableRowElement>();
// We can not use `entryElement` to scroll to the right element because it's
// sticky. That's why we add another row and use this ref to scroll to that
// first.
const preEntryElement = React.createRef<HTMLTableRowElement>();
const theme = useTheme2(); const theme = useTheme2();
const styles = getStyles(theme); const styles = getStyles(theme);
@ -198,10 +202,11 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
}; };
useLayoutEffect(() => { useLayoutEffect(() => {
if (entryElement.current) { if (!loading && entryElement.current && preEntryElement.current) {
preEntryElement.current.scrollIntoView({ block: 'center' });
entryElement.current.scrollIntoView({ block: 'center' }); entryElement.current.scrollIntoView({ block: 'center' });
} }
}, [entryElement, context]); }, [entryElement, preEntryElement, context, loading]);
useLayoutEffect(() => { useLayoutEffect(() => {
const width = scrollElement?.current?.parentElement?.clientWidth; const width = scrollElement?.current?.parentElement?.clientWidth;
@ -252,6 +257,7 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
/> />
</td> </td>
</tr> </tr>
<tr ref={preEntryElement}></tr>
<tr ref={entryElement} className={styles.entry}> <tr ref={entryElement} className={styles.entry}>
<td className={styles.noMarginBottom}> <td className={styles.noMarginBottom}>
<LogRows <LogRows