fix(dashboards-v2): keep the page size picked in a table panel

The measured page size was passed straight into antd's controlled
`pagination.pageSize` and `onChange` dropped the new size, so picking a
size from the size changer snapped back to the fitted value (10 on a
short panel). Track the picked size and prefer it over the measured one;
panels never touched still auto-fit on resize.

frontend/src/container/TopNav/AutoRefreshV2/AutoRefreshTicker.tsx

@@ -0,0 +1,13 @@
+import { useAutoRefreshSelection } from './useAutoRefreshSelection';
+import { useAutoRefreshTick } from './useAutoRefreshTick';
+
+/** Auto-refresh timer for views that hide the time selector that normally owns it. */
+function AutoRefreshTicker(): null {
+	const { isEnabled, intervalMs } = useAutoRefreshSelection();
+
+	useAutoRefreshTick(isEnabled, intervalMs);
+
+	return null;
+}
+
+export default AutoRefreshTicker;

frontend/src/container/TopNav/AutoRefreshV2/__tests__/AutoRefresh.test.tsx

@@ -0,0 +1,116 @@
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { act, render, screen } from '@testing-library/react';
+import set from 'api/browser/localstorage/set';
+import { DASHBOARD_TIME_IN_DURATION } from 'constants/app';
+import configureStore, { MockStoreEnhanced } from 'redux-mock-store';
+import { AppState } from 'store/reducers';
+import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import AutoRefresh from '../index';
+
+const mockStore = configureStore<Partial<AppState>>([]);
+
+const PATHNAME = '/dashboard/test-id';
+const randomTime = 1700000000000000000;
+
+function createGlobalTimeState(
+	overrides: Partial<GlobalReducer> = {},
+): GlobalReducer {
+	return {
+		minTime: randomTime,
+		maxTime: randomTime,
+		loading: false,
+		selectedTime: '15m',
+		isAutoRefreshDisabled: false,
+		selectedAutoRefreshInterval: '5s',
+		...overrides,
+	};
+}
+
+function renderAutoRefresh(
+	globalTime: GlobalReducer,
+	props: { disabled?: boolean } = {},
+): MockStoreEnhanced<Partial<AppState>> {
+	const store = mockStore({ globalTime });
+
+	render(
+		<MemoryRouter initialEntries={[PATHNAME]}>
+			<Provider store={store}>
+				<AutoRefresh {...props} />
+			</Provider>
+		</MemoryRouter>,
+	);
+
+	return store;
+}
+
+function tickCount(store: MockStoreEnhanced<Partial<AppState>>): number {
+	return store.getActions().filter((a) => a.type === UPDATE_TIME_INTERVAL)
+		.length;
+}
+
+describe('AutoRefresh', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+		localStorage.clear();
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('renders the trigger and ticks on the persisted interval', () => {
+		set(DASHBOARD_TIME_IN_DURATION, JSON.stringify({ [PATHNAME]: '5s' }));
+
+		const store = renderAutoRefresh(createGlobalTimeState());
+
+		expect(screen.getByTitle('Set auto refresh')).toBeInTheDocument();
+
+		act(() => {
+			jest.advanceTimersByTime(15_000);
+		});
+
+		expect(tickCount(store)).toBe(3);
+	});
+
+	it('does not tick when auto refresh was never enabled for the route', () => {
+		const store = renderAutoRefresh(createGlobalTimeState());
+
+		act(() => {
+			jest.advanceTimersByTime(60_000);
+		});
+
+		expect(tickCount(store)).toBe(0);
+	});
+
+	it('does not tick while the disabled prop is set', () => {
+		set(DASHBOARD_TIME_IN_DURATION, JSON.stringify({ [PATHNAME]: '5s' }));
+
+		const store = renderAutoRefresh(createGlobalTimeState(), { disabled: true });
+
+		act(() => {
+			jest.advanceTimersByTime(60_000);
+		});
+
+		expect(tickCount(store)).toBe(0);
+	});
+
+	it('renders nothing on a custom time range', () => {
+		set(DASHBOARD_TIME_IN_DURATION, JSON.stringify({ [PATHNAME]: '5s' }));
+
+		const store = renderAutoRefresh(
+			createGlobalTimeState({ selectedTime: 'custom' }),
+		);
+
+		expect(screen.queryByTitle('Set auto refresh')).not.toBeInTheDocument();
+
+		act(() => {
+			jest.advanceTimersByTime(60_000);
+		});
+
+		expect(tickCount(store)).toBe(0);
+	});
+});

frontend/src/container/TopNav/AutoRefreshV2/__tests__/AutoRefreshTicker.test.tsx

@@ -0,0 +1,162 @@
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { act, render } from '@testing-library/react';
+import set from 'api/browser/localstorage/set';
+import { DASHBOARD_TIME_IN_DURATION } from 'constants/app';
+import configureStore, { MockStoreEnhanced } from 'redux-mock-store';
+import { AppState } from 'store/reducers';
+import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import AutoRefresh from '../index';
+import AutoRefreshTicker from '../AutoRefreshTicker';
+
+const mockStore = configureStore<Partial<AppState>>([]);
+
+const PATHNAME = '/dashboard/test-id';
+const randomTime = 1700000000000000000;
+
+function createGlobalTimeState(
+	overrides: Partial<GlobalReducer> = {},
+): GlobalReducer {
+	return {
+		minTime: randomTime,
+		maxTime: randomTime,
+		loading: false,
+		selectedTime: '15m',
+		isAutoRefreshDisabled: false,
+		selectedAutoRefreshInterval: '5s',
+		...overrides,
+	};
+}
+
+function renderTicker(
+	globalTime: GlobalReducer,
+): MockStoreEnhanced<Partial<AppState>> {
+	const store = mockStore({ globalTime });
+
+	render(
+		<MemoryRouter initialEntries={[PATHNAME]}>
+			<Provider store={store}>
+				<AutoRefreshTicker />
+			</Provider>
+		</MemoryRouter>,
+	);
+
+	return store;
+}
+
+function timeIntervalActions(
+	store: MockStoreEnhanced<Partial<AppState>>,
+): unknown[] {
+	return store.getActions().filter((a) => a.type === UPDATE_TIME_INTERVAL);
+}
+
+describe('AutoRefreshTicker', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+		localStorage.clear();
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('advances the global time window on the interval persisted for the route', () => {
+		set(DASHBOARD_TIME_IN_DURATION, JSON.stringify({ [PATHNAME]: '5s' }));
+
+		const store = renderTicker(createGlobalTimeState());
+
+		act(() => {
+			jest.advanceTimersByTime(10_000);
+		});
+
+		expect(timeIntervalActions(store)).toHaveLength(2);
+	});
+
+	it('does not tick when the route has no persisted interval', () => {
+		const store = renderTicker(createGlobalTimeState());
+
+		act(() => {
+			jest.advanceTimersByTime(60_000);
+		});
+
+		expect(timeIntervalActions(store)).toHaveLength(0);
+	});
+
+	it('does not tick while auto refresh is globally disabled', () => {
+		set(DASHBOARD_TIME_IN_DURATION, JSON.stringify({ [PATHNAME]: '5s' }));
+
+		const store = renderTicker(
+			createGlobalTimeState({ isAutoRefreshDisabled: true }),
+		);
+
+		act(() => {
+			jest.advanceTimersByTime(60_000);
+		});
+
+		expect(timeIntervalActions(store)).toHaveLength(0);
+	});
+
+	it('does not tick on a custom time range', () => {
+		set(DASHBOARD_TIME_IN_DURATION, JSON.stringify({ [PATHNAME]: '5s' }));
+
+		const store = renderTicker(createGlobalTimeState({ selectedTime: 'custom' }));
+
+		act(() => {
+			jest.advanceTimersByTime(60_000);
+		});
+
+		expect(timeIntervalActions(store)).toHaveLength(0);
+	});
+});
+
+// Mirrors DashboardContainer's swap: exactly one of the two must be ticking.
+describe('AutoRefresh full screen handover', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+		localStorage.clear();
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('keeps a single timer running across entering and leaving full screen', () => {
+		set(DASHBOARD_TIME_IN_DURATION, JSON.stringify({ [PATHNAME]: '5s' }));
+
+		const store = mockStore({ globalTime: createGlobalTimeState() });
+
+		function Harness({ active }: { active: boolean }): JSX.Element {
+			return active ? <AutoRefreshTicker /> : <AutoRefresh />;
+		}
+
+		const renderHarness = (active: boolean): JSX.Element => (
+			<MemoryRouter initialEntries={[PATHNAME]}>
+				<Provider store={store}>
+					<Harness active={active} />
+				</Provider>
+			</MemoryRouter>
+		);
+
+		const { rerender } = render(renderHarness(false));
+
+		act(() => {
+			jest.advanceTimersByTime(10_000);
+		});
+		expect(timeIntervalActions(store)).toHaveLength(2);
+
+		rerender(renderHarness(true));
+		act(() => {
+			jest.advanceTimersByTime(10_000);
+		});
+		expect(timeIntervalActions(store)).toHaveLength(4);
+
+		rerender(renderHarness(false));
+		act(() => {
+			jest.advanceTimersByTime(10_000);
+		});
+		expect(timeIntervalActions(store)).toHaveLength(6);
+	});
+});

frontend/src/container/TopNav/AutoRefreshV2/index.tsx

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-import { useInterval } from 'react-use';
 import { Check, ChevronDown } from '@signozhq/icons';
 import { Button, Popover } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
@@ -11,21 +10,18 @@ import get from 'api/browser/localstorage/get';
 import set from 'api/browser/localstorage/set';
 import { DASHBOARD_TIME_IN_DURATION } from 'constants/app';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { getMinMaxForSelectedTime } from 'lib/getMinMax';
 import _omit from 'lodash-es/omit';
 // eslint-disable-next-line no-restricted-imports
 import { Dispatch } from 'redux';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
-import {
-	UPDATE_AUTO_REFRESH_INTERVAL,
-	UPDATE_TIME_INTERVAL,
-} from 'types/actions/globalTime';
+import { UPDATE_AUTO_REFRESH_INTERVAL } from 'types/actions/globalTime';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { refreshIntervalOptions } from './constants';
 import { ButtonContainer } from './styles';
+import { useAutoRefreshTick } from './useAutoRefreshTick';
 
 import './AutoRefreshV2.styles.scss';
 
@@ -93,30 +89,10 @@ function AutoRefresh({
 		[selectedOption],
 	);
 
-	useInterval(() => {
-		const selectedValue = getOption?.value;
-
-		if (isDisabled || !isAutoRefreshEnabled) {
-			return;
-		}
-
-		if (selectedOption !== 'off' && selectedValue) {
-			const { maxTime, minTime } = getMinMaxForSelectedTime(
-				globalTime.selectedTime,
-				globalTime.minTime,
-				globalTime.maxTime,
-			);
-
-			dispatch({
-				type: UPDATE_TIME_INTERVAL,
-				payload: {
-					maxTime,
-					minTime,
-					selectedTime: globalTime.selectedTime,
-				},
-			});
-		}
-	}, getOption?.value || 0);
+	useAutoRefreshTick(
+		!isDisabled && isAutoRefreshEnabled && selectedOption !== 'off',
+		getOption?.value || 0,
+	);
 
 	const onChangeHandler = useCallback(
 		(selectedValue: string) => {

frontend/src/container/TopNav/AutoRefreshV2/useAutoRefreshSelection.ts

@@ -0,0 +1,29 @@
+import { useLocation } from 'react-router-dom';
+import get from 'api/browser/localstorage/get';
+import { DASHBOARD_TIME_IN_DURATION } from 'constants/app';
+
+import { refreshIntervalOptions } from './constants';
+
+export interface AutoRefreshSelection {
+	isEnabled: boolean;
+	intervalMs: number;
+}
+
+/**
+ * An entry for the current route means auto-refresh is on, its absence means off.
+ * Read on every render because localStorage isn't reactive.
+ */
+export function useAutoRefreshSelection(): AutoRefreshSelection {
+	const { pathname } = useLocation();
+
+	const selectedOption = JSON.parse(get(DASHBOARD_TIME_IN_DURATION) || '{}')[
+		pathname
+	];
+
+	return {
+		isEnabled: Boolean(selectedOption),
+		intervalMs:
+			refreshIntervalOptions.find((option) => option.key === selectedOption)
+				?.value || 0,
+	};
+}

frontend/src/container/TopNav/AutoRefreshV2/useAutoRefreshTick.ts

@@ -0,0 +1,47 @@
+// eslint-disable-next-line no-restricted-imports
+import { useDispatch, useSelector } from 'react-redux';
+import { useInterval } from 'react-use';
+import { getMinMaxForSelectedTime } from 'lib/getMinMax';
+// eslint-disable-next-line no-restricted-imports
+import { Dispatch } from 'redux';
+import { AppState } from 'store/reducers';
+import AppActions from 'types/actions';
+import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+/**
+ * Advances the global time window on the auto-refresh interval. The global
+ * "auto refresh disabled" flag and a custom range override the caller's `enabled`.
+ */
+export function useAutoRefreshTick(enabled: boolean, intervalMs: number): void {
+	const globalTime = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+	const dispatch = useDispatch<Dispatch<AppActions>>();
+
+	const isTicking =
+		enabled &&
+		intervalMs > 0 &&
+		!globalTime.isAutoRefreshDisabled &&
+		globalTime.selectedTime !== 'custom';
+
+	useInterval(
+		() => {
+			const { maxTime, minTime } = getMinMaxForSelectedTime(
+				globalTime.selectedTime,
+				globalTime.minTime,
+				globalTime.maxTime,
+			);
+
+			dispatch({
+				type: UPDATE_TIME_INTERVAL,
+				payload: {
+					maxTime,
+					minTime,
+					selectedTime: globalTime.selectedTime,
+				},
+			});
+		},
+		isTicking ? intervalMs : null,
+	);
+}

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TablePanel/Renderer.tsx

@@ -153,6 +153,21 @@ function TablePanelRenderer({
 	const [page, setPage] = useState(1);
 	useEffect(() => setPage(1), [searchTerm]);
 
+	// The measured size is only a default; without this the controlled `pageSize`
+	// snaps a size-changer pick straight back to the fitted value.
+	const [selectedPageSize, setSelectedPageSize] = useState<number>();
+	const effectivePageSize = selectedPageSize ?? pageSize;
+
+	const handlePaginationChange = useCallback(
+		(nextPage: number, nextPageSize: number): void => {
+			setPage(nextPage);
+			if (nextPageSize !== effectivePageSize) {
+				setSelectedPageSize(nextPageSize);
+			}
+		},
+		[effectivePageSize],
+	);
+
 	return (
 		<div
 			ref={containerRef}
@@ -170,10 +185,10 @@ function TablePanelRenderer({
 						dataSource={filteredDataSource}
 						pagination={{
 							current: page,
-							pageSize,
+							pageSize: effectivePageSize,
 							hideOnSinglePage: true,
 							size: 'small',
-							onChange: setPage,
+							onChange: handlePaginationChange,
 						}}
 						scroll={{ x: 'max-content', y: scrollY }}
 					/>

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TablePanel/__tests__/Renderer.test.tsx

@@ -1,3 +1,4 @@
+import userEvent from '@testing-library/user-event';
 import {
 	type DashboardtypesTablePanelSpecDTO,
 	type QueryRangeV5200,
@@ -10,6 +11,7 @@ import type {
 	PanelOfKind,
 	PanelRendererProps,
 } from '../../../types/rendererProps';
+import { MIN_PAGE_SIZE } from '../../../utils/recordTable';
 import TablePanelRenderer from '../Renderer';
 
 function panelWith(
@@ -129,6 +131,27 @@ describe('TablePanelRenderer', () => {
 		expect(queryByText('frontend')).not.toBeInTheDocument();
 	});
 
+	it('keeps a page size picked from the size changer', async () => {
+		const rows = Array.from({ length: 60 }, (_, index): [string, number] => [
+			`service-${index}`,
+			index,
+		]);
+		const { container, getByText } = renderPanel({ data: dataWith(rows) });
+
+		const countRows = (): number =>
+			container.querySelectorAll('.ant-table-tbody tr.ant-table-row').length;
+
+		expect(countRows()).toBe(MIN_PAGE_SIZE);
+
+		const sizeChanger = container.querySelector(
+			'.ant-pagination-options .ant-select-selector',
+		) as Element;
+		await userEvent.click(sizeChanger);
+		await userEvent.click(getByText('20 / page'));
+
+		expect(countRows()).toBe(20);
+	});
+
 	it('keeps the table mounted (not No Data) when the search matches no rows', () => {
 		const { getByTestId, queryByText } = renderPanel({
 			data: dataWith([['frontend', 1234]]),

frontend/src/pages/DashboardPage/DashboardContainer/index.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+import AutoRefreshTicker from 'container/TopNav/AutoRefreshV2/AutoRefreshTicker';
 
 import DashboardPageToolbar from './DashboardPageToolbar';
 import PanelsAndSectionsLayout from './PanelsAndSectionsLayout';
@@ -77,7 +78,10 @@ function DashboardContainer({
 	return (
 		<FullScreen handle={fullScreenHandle}>
 			<div className={styles.container}>
-				{!fullScreenHandle.active && (
+				{fullScreenHandle.active ? (
+					// The hidden toolbar owns the auto-refresh timer.
+					<AutoRefreshTicker />
+				) : (
 					<>
 						<DashboardPageHeader title={name} image={image} />
 						<DashboardPageToolbar dashboard={dashboard} handle={fullScreenHandle} />