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 Panel: fix automatic scrolling for ascending order (#98579)

Browse Source
This commit is contained in:
Matias Chomicki 2025-01-07 13:10:54 +00:00 committed by GitHub
parent 7e5cb7d8d6
commit ea5b9fdc97
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/app/plugins/panel/logs/LogsPanel.tsx
View File

@ -130,7 +130,6 @@ export const LogsPanel = ({
}: LogsPanelProps) => { }: LogsPanelProps) => {
const isAscending = sortOrder === LogsSortOrder.Ascending; const isAscending = sortOrder === LogsSortOrder.Ascending;
const style = useStyles2(getStyles); const style = useStyles2(getStyles);
const [scrollTop, setScrollTop] = useState(0);
const logsContainerRef = useRef<HTMLDivElement>(null); const logsContainerRef = useRef<HTMLDivElement>(null);
const [contextRow, setContextRow] = useState<LogRowModel | null>(null); const [contextRow, setContextRow] = useState<LogRowModel | null>(null);
const dataSourcesMap = useDatasourcesFromTargets(data.request?.targets); const dataSourcesMap = useDatasourcesFromTargets(data.request?.targets);
@ -141,12 +140,10 @@ export const LogsPanel = ({
// Loading ref to prevent firing multiple requests // Loading ref to prevent firing multiple requests
const loadingRef = useRef(false); const loadingRef = useRef(false);
const [panelData, setPanelData] = useState(data); const [panelData, setPanelData] = useState(data);
// Prevents the scroll position to change when new data from infinite scrolling is received
const keepScrollPositionRef = useRef(false);
let closeCallback = useRef<() => void>(); let closeCallback = useRef<() => void>();
useEffect(() => {
scrollElement?.scrollTo(0, scrollTop);
}, [scrollElement, scrollTop]);
const { eventBus, onAddAdHocFilter } = usePanelContext(); const { eventBus, onAddAdHocFilter } = usePanelContext();
const onLogRowHover = useCallback( const onLogRowHover = useCallback(
(row?: LogRowModel) => { (row?: LogRowModel) => {
@ -278,12 +275,18 @@ export const LogsPanel = ({
}, [data]); }, [data]);
useLayoutEffect(() => { useLayoutEffect(() => {
if (isAscending && logsContainerRef.current) { if (!logsContainerRef.current || !scrollElement || keepScrollPositionRef.current) {
setScrollTop(logsContainerRef.current.offsetHeight); keepScrollPositionRef.current = false;
} else { return;
setScrollTop(0);
} }
}, [isAscending, logRows]); /**
* In dashboards, users with newest logs at the bottom have the expectation of keeping the scroll at the bottom
* when new data is received. See https://github.com/grafana/grafana/pull/37634
*/
if (isAscending && data.request?.app === CoreApp.Dashboard) {
scrollElement.scrollTo(0, logsContainerRef.current.offsetHeight);
}
}, [data.request?.app, isAscending, scrollElement, logRows]);
const getFieldLinks = useCallback( const getFieldLinks = useCallback(
(field: Field, rowIndex: number) => { (field: Field, rowIndex: number) => {
@ -374,6 +377,7 @@ export const LogsPanel = ({
loadingRef.current = false; loadingRef.current = false;
} }
keepScrollPositionRef.current = true;
setPanelData({ setPanelData({
...panelData, ...panelData,
series: newSeries, series: newSeries,
@ -566,7 +570,7 @@ async function requestMoreLogs(
for (const uid in targetGroups) { for (const uid in targetGroups) {
const dataSource = dataSourcesMap.get(panelData.request.targets[0].refId); const dataSource = dataSourcesMap.get(panelData.request.targets[0].refId);
if (!dataSource) { if (!dataSource) {
console.log('no ds'); console.warn(`Could not resolve data source for target ${panelData.request.targets[0].refId}`);
continue; continue;
} }
dataRequests.push( dataRequests.push(