test: add tests for null/missing error body in ErrorResponseHandlerV2

* fix(querier): return proper HTTP status for PromQL timeout errors

PromQL queries hitting the context deadline were incorrectly returning
400 Bad Request with "invalid_input" because enhancePromQLError
unconditionally wrapped all errors as TypeInvalidInput. Extract
tryEnhancePromQLExecError to properly classify timeout, cancellation,
and storage errors before falling through to parse error handling.

Also make the PromQL engine timeout configurable via prometheus.timeout
config (default 2m) instead of hardcoding it.

* chore: refactor files

* fix(prometheus): validate timeout config and fix test setups

Add validation in prometheus.Config to reject zero timeout. Update all
test files to explicitly set Timeout: 2 * time.Minute in prometheus.Config
literals to avoid immediate query timeouts.

conf/example.yaml

@@ -144,6 +144,8 @@ telemetrystore:
 
 ##################### Prometheus #####################
 prometheus:
+  # The maximum time a PromQL query is allowed to run before being aborted.
+  timeout: 2m
   active_query_tracker:
     # Whether to enable the active query tracker.
     enabled: true

ee/query-service/rules/manager_test.go

@@ -257,7 +257,7 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 						WillReturnRows(samplesRows)
 
 					// Create Prometheus provider for this test
-					promProvider = prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, store)
+					promProvider = prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, store)
 				},
 				ManagerOptionsHook: func(opts *rules.ManagerOptions) {
 					// Set Prometheus provider for PromQL queries

frontend/package.json

@@ -68,8 +68,8 @@
     "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
     "@signozhq/ui": "0.0.5",
-    "@tanstack/react-table": "8.21.3",
-    "@tanstack/react-virtual": "3.13.22",
+    "@tanstack/react-table": "8.20.6",
+    "@tanstack/react-virtual": "3.11.2",
     "@uiw/codemirror-theme-copilot": "4.23.11",
     "@uiw/codemirror-theme-github": "4.24.1",
     "@uiw/react-codemirror": "4.23.10",

frontend/src/api/ErrorResponseHandlerV2.test.ts

@@ -0,0 +1,143 @@
+import { AxiosError } from 'axios';
+import { ErrorV2Resp } from 'types/api';
+import APIError from 'types/api/error';
+
+import { ErrorResponseHandlerV2 } from './ErrorResponseHandlerV2';
+
+function makeAxiosError(
+	overrides: Partial<AxiosError<ErrorV2Resp>>,
+): AxiosError<ErrorV2Resp> {
+	return {
+		isAxiosError: true,
+		name: 'AxiosError',
+		message: 'Request failed',
+		config: {} as any,
+		toJSON: () => ({}),
+		...overrides,
+	} as AxiosError<ErrorV2Resp>;
+}
+
+describe('ErrorResponseHandlerV2', () => {
+	describe('when the server responds with a well-formed error body', () => {
+		it('throws an APIError with fields from response.data.error', () => {
+			const error = makeAxiosError({
+				response: {
+					status: 403,
+					data: {
+						error: {
+							code: 'FORBIDDEN',
+							message: 'only editors/admins can access this resource',
+							url: '/api/v1/dashboards/123',
+							errors: [],
+						},
+					},
+					headers: {} as any,
+					config: {} as any,
+					statusText: 'Forbidden',
+				},
+			});
+
+			expect(() => ErrorResponseHandlerV2(error)).toThrow(APIError);
+			try {
+				ErrorResponseHandlerV2(error);
+			} catch (e) {
+				expect(e).toBeInstanceOf(APIError);
+				const apiError = e as APIError;
+				expect(apiError.getHttpStatusCode()).toBe(403);
+				expect(apiError.getErrorMessage()).toBe(
+					'only editors/admins can access this resource',
+				);
+				expect(apiError.getErrorCode()).toBe('FORBIDDEN');
+			}
+		});
+	});
+
+	describe('when the server responds with a null error body', () => {
+		it('throws an APIError without crashing, using fallback values', () => {
+			const error = makeAxiosError({
+				name: 'AxiosError',
+				message: 'timeout exceeded',
+				response: {
+					status: 504,
+					data: (null as unknown) as ErrorV2Resp,
+					headers: {} as any,
+					config: {} as any,
+					statusText: 'Gateway Timeout',
+				},
+			});
+
+			expect(() => ErrorResponseHandlerV2(error)).toThrow(APIError);
+			try {
+				ErrorResponseHandlerV2(error);
+			} catch (e) {
+				expect(e).toBeInstanceOf(APIError);
+				const apiError = e as APIError;
+				expect(apiError.getHttpStatusCode()).toBe(504);
+				expect(apiError.getErrorMessage()).toBe('timeout exceeded');
+			}
+		});
+
+		it('throws an APIError when response.data.error is missing', () => {
+			const error = makeAxiosError({
+				name: 'AxiosError',
+				message: 'Bad Gateway',
+				response: {
+					status: 502,
+					data: {} as ErrorV2Resp,
+					headers: {} as any,
+					config: {} as any,
+					statusText: 'Bad Gateway',
+				},
+			});
+
+			expect(() => ErrorResponseHandlerV2(error)).toThrow(APIError);
+			try {
+				ErrorResponseHandlerV2(error);
+			} catch (e) {
+				expect(e).toBeInstanceOf(APIError);
+				const apiError = e as APIError;
+				expect(apiError.getHttpStatusCode()).toBe(502);
+			}
+		});
+	});
+
+	describe('when no response is received (network/timeout)', () => {
+		it('throws an APIError using error.message', () => {
+			const error = makeAxiosError({
+				request: {},
+				name: 'ECONNABORTED',
+				message: 'timeout exceeded',
+				status: undefined,
+			});
+
+			expect(() => ErrorResponseHandlerV2(error)).toThrow(APIError);
+			try {
+				ErrorResponseHandlerV2(error);
+			} catch (e) {
+				expect(e).toBeInstanceOf(APIError);
+				const apiError = e as APIError;
+				expect(apiError.getErrorMessage()).toBe('timeout exceeded');
+			}
+		});
+	});
+
+	describe('when the error is a setup error (no request or response)', () => {
+		it('throws an APIError using error.name and error.message', () => {
+			const error = makeAxiosError({
+				name: 'Error',
+				message: 'Something went wrong setting up the request',
+			});
+
+			expect(() => ErrorResponseHandlerV2(error)).toThrow(APIError);
+			try {
+				ErrorResponseHandlerV2(error);
+			} catch (e) {
+				expect(e).toBeInstanceOf(APIError);
+				const apiError = e as APIError;
+				expect(apiError.getErrorMessage()).toBe(
+					'Something went wrong setting up the request',
+				);
+			}
+		});
+	});
+});

frontend/src/api/ErrorResponseHandlerV2.ts

@@ -8,13 +8,14 @@ export function ErrorResponseHandlerV2(error: AxiosError<ErrorV2Resp>): never {
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
+		const errorData = response.data?.error;
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: response.data.error.code,
-				message: response.data.error.message,
-				url: response.data.error.url,
-				errors: response.data.error.errors,
+				code: errorData?.code ?? error.name,
+				message: errorData?.message ?? error.message,
+				url: errorData?.url ?? '',
+				errors: errorData?.errors ?? [],
 			},
 		});
 	}

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss

@@ -28,22 +28,14 @@
 	}
 }
 
-// In table/column view, keep action buttons visible at the viewport's right edge
-.log-line-action-buttons.table-view-log-actions {
-	position: absolute;
-	top: 50%;
-	right: 8px;
-	left: auto;
-	transform: translateY(-50%);
-	margin: 0;
-	z-index: 5;
-}
-
 .lightMode {
 	.log-line-action-buttons {
 		border: 1px solid var(--bg-vanilla-400);
 		background: var(--bg-vanilla-400);
 
+		.ant-btn-default {
+		}
+
 		.copy-log-btn {
 			border-left: 1px solid var(--bg-vanilla-400);
 			border-color: var(--bg-vanilla-400) !important;

frontend/src/components/Logs/TableView/config.ts

@@ -15,12 +15,13 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
 		letterSpacing: '-0.07px',
 		marginBottom: '0px',
 		minWidth: '10rem',
-		width: 'auto',
+		width: '10rem',
 	};
 }
 
 export const defaultTableStyle: CSSProperties = {
 	minWidth: '40rem',
+	maxWidth: '90rem',
 };
 
 export const defaultListViewPanelStyle: CSSProperties = {

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -43,7 +43,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 	const bodyColumnStyle = useMemo(
 		() => ({
 			...defaultTableStyle,
-			...(fields.length > 2 ? { width: 'auto' } : {}),
+			...(fields.length > 2 ? { width: '50rem' } : {}),
 		}),
 		[fields.length],
 	);

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -1,35 +1,21 @@
 .quick-filters-container {
 	display: flex;
-	flex-direction: row;
 	height: 100%;
-	min-height: 0;
 	position: relative;
 
 	.quick-filters-settings-container {
-		flex: 0 0 0;
-		width: 0;
-		min-width: 0;
-		overflow: visible;
 		position: relative;
-		align-self: stretch;
 	}
 }
 
 .quick-filters {
 	display: flex;
 	flex-direction: column;
-	flex: 1 1 auto;
-	min-width: 0;
 	height: 100%;
-	min-height: 0;
+	width: 100%;
 	border-right: 1px solid var(--bg-slate-400);
 	color: var(--bg-vanilla-100);
 
-	.overlay-scrollbar {
-		flex: 1;
-		min-height: 0;
-	}
-
 	.header {
 		display: flex;
 		align-items: center;

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss

@@ -2,8 +2,6 @@
 	display: flex;
 	flex-direction: column;
 	position: absolute;
-	top: 0;
-	left: 0;
 	z-index: 999;
 	width: 342px;
 	background: var(--bg-slate-500);

frontend/src/constants/localStorage.ts

@@ -12,7 +12,6 @@ export enum LOCALSTORAGE {
 	GRAPH_VISIBILITY_STATES = 'GRAPH_VISIBILITY_STATES',
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
 	LOGS_LIST_COLUMNS = 'LOGS_LIST_COLUMNS',
-	LOGS_LIST_COLUMN_SIZING = 'LOGS_LIST_COLUMN_SIZING',
 	LOGGED_IN_USER_NAME = 'LOGGED_IN_USER_NAME',
 	LOGGED_IN_USER_EMAIL = 'LOGGED_IN_USER_EMAIL',
 	CHAT_SUPPORT = 'CHAT_SUPPORT',

frontend/src/container/LiveLogs/LiveLogsContainer/LiveLogsContainer.styles.scss

@@ -1,16 +1,3 @@
-.live-logs-container {
-	display: flex;
-	flex: 1;
-	min-height: 0;
-}
-
-.live-logs-content {
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	min-height: 0;
-}
-
 .live-logs-chart-container {
 	height: 200px;
 	min-height: 200px;
@@ -18,12 +5,6 @@
 	border-right: none;
 }
 
-.live-logs-list-container {
-	display: flex;
-	flex: 1;
-	min-height: 0;
-}
-
 .live-logs-settings-panel {
 	display: flex;
 	align-items: center;

frontend/src/container/LiveLogs/LiveLogsList/LiveLogsList.styles.scss

@@ -18,19 +18,6 @@
 }
 
 .live-logs-list {
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	min-height: 0;
-
-	.ant-card,
-	.ant-card-body {
-		display: flex;
-		flex: 1;
-		min-height: 0;
-		flex-direction: column;
-	}
-
 	.live-logs-list-loading {
 		padding: 16px;
 		text-align: center;

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -8,8 +8,8 @@ import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { OptionFormatTypes } from 'constants/optionsFormatTypes';
+import InfinityTableView from 'container/LogsExplorerList/InfinityTableView';
 import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
-import TanStackTableView from 'container/LogsExplorerList/TanStackTableView';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
@@ -50,15 +50,11 @@ function LiveLogsList({
 		[logs],
 	);
 
-	const { options, config } = useOptionsMenu({
+	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator: StringOperators.NOOP,
 	});
-	const removableColumnKeys = useMemo(
-		() => options.selectColumns.map((column) => String(column.name)),
-		[options.selectColumns],
-	);
 
 	const activeLogIndex = useMemo(
 		() => formattedLogs.findIndex(({ id }) => id === activeLogId),
@@ -162,7 +158,7 @@ function LiveLogsList({
 			{formattedLogs.length !== 0 && (
 				<InfinityWrapperStyled>
 					{options.format === OptionFormatTypes.TABLE ? (
-						<TanStackTableView
+						<InfinityTableView
 							ref={ref}
 							isLoading={false}
 							tableViewProps={{
@@ -178,8 +174,6 @@ function LiveLogsList({
 							onSetActiveLog={handleSetActiveLog}
 							onClearActiveLog={handleCloseLogDetail}
 							activeLog={activeLog}
-							onRemoveColumn={config.addColumn?.onRemove}
-							removableColumnKeys={removableColumnKeys}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>

frontend/src/container/LogsExplorerList/InfinityTableView/config.ts

@@ -4,11 +4,18 @@ import { FontSize } from 'container/OptionsMenu/types';
 export const infinityDefaultStyles: CSSProperties = {
 	width: '100%',
 	overflowX: 'scroll',
+	marginTop: '15px',
 };
 
-export function getInfinityDefaultStyles(_fontSize: FontSize): CSSProperties {
+export function getInfinityDefaultStyles(fontSize: FontSize): CSSProperties {
 	return {
 		width: '100%',
 		overflowX: 'scroll',
+		marginTop:
+			fontSize === FontSize.SMALL
+				? '10px'
+				: fontSize === FontSize.MEDIUM
+				? '12px'
+				: '15px',
 	};
 }

frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts

@@ -14,78 +14,6 @@ interface TableHeaderCellStyledProps {
 
 export const TableStyled = styled.table`
 	width: 100%;
-	border-collapse: separate;
-	border-spacing: 0;
-`;
-
-/**
- * TanStack column sizing uses table-layout:fixed + colgroup widths; without clipping,
- * cell content overflows visually on top of neighbouring columns (overlap / "ghost" text).
- */
-export const TanStackTableStyled = styled(TableStyled)`
-	table-layout: fixed;
-	width: 100%;
-	min-width: 100%;
-	max-width: 100%;
-
-	& td,
-	& th {
-		overflow: hidden;
-		min-width: 0;
-		box-sizing: border-box;
-		vertical-align: top;
-	}
-
-	& td.table-actions-cell {
-		overflow: visible;
-	}
-
-	& td.body {
-		word-break: break-word;
-		overflow-wrap: anywhere;
-	}
-
-	/* Let nested body HTML / line-clamp shrink inside fixed columns */
-	& td.body > * {
-		min-width: 0;
-		max-width: 100%;
-	}
-
-	/* Long column titles: ellipsis when wider than the column (TanStackHeaderRow) */
-	& thead th .tanstack-header-title {
-		min-width: 0;
-		flex: 1 1 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	& thead th .tanstack-header-title > * {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		max-width: 100%;
-	}
-
-	& td.logs-table-filler-cell,
-	& th.logs-table-filler-header {
-		padding: 0 !important;
-		min-width: 0;
-		border-left: none;
-	}
-
-	& th.logs-table-actions-header {
-		position: sticky;
-		right: 0;
-		z-index: 2;
-		width: 0 !important;
-		min-width: 0 !important;
-		max-width: 0 !important;
-		padding: 0 !important;
-		overflow: visible;
-		white-space: nowrap;
-		border-left: none;
-	}
 `;
 
 const getTimestampColumnWidth = (
@@ -118,19 +46,6 @@ export const TableCellStyled = styled.td<TableHeaderCellStyledProps>`
 
 	${({ columnKey, $hasSingleColumn }): string =>
 		getTimestampColumnWidth(columnKey, $hasSingleColumn)}
-
-	&.table-actions-cell {
-		position: sticky;
-		right: 0;
-		z-index: 2;
-		width: 0;
-		min-width: 0;
-		max-width: 0;
-		padding: 0 !important;
-		white-space: nowrap;
-		overflow: visible;
-		background-color: inherit;
-	}
 `;
 
 export const TableRowStyled = styled.tr<{
@@ -149,10 +64,7 @@ export const TableRowStyled = styled.tr<{
 	position: relative;
 
 	.log-line-action-buttons {
-		display: flex;
-		opacity: 0;
-		pointer-events: none;
-		transition: opacity 80ms linear;
+		display: none;
 	}
 
 	&:hover {
@@ -161,25 +73,13 @@ export const TableRowStyled = styled.tr<{
 				getActiveLogBackground(true, $isDarkMode, $logType)}
 		}
 		.log-line-action-buttons {
-			opacity: 1;
-			pointer-events: auto;
+			display: flex;
 		}
 	}
-	${({ $isActiveLog }): string =>
-		$isActiveLog
-			? `
-		.log-line-action-buttons {
-			opacity: 1;
-			pointer-events: auto;
-		}
-	`
-			: ''}
 `;
 
 export const TableHeaderCellStyled = styled.th<TableHeaderCellStyledProps>`
 	padding: 0.5rem;
-	height: 36px;
-	text-align: left;
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -198,12 +98,6 @@ export const TableHeaderCellStyled = styled.th<TableHeaderCellStyledProps>`
 			: ``};
 	${({ $isLogIndicator }): string =>
 		$isLogIndicator ? 'padding: 0px; width: 1%;' : ''}
-	border-top: 1px solid var(--l2-border);
-	border-bottom: 1px solid var(--l2-border);
-	box-shadow: inset 0 -1px 0 var(--l2-border);
-	&:first-child {
-		border-left: 1px solid var(--l2-border);
-	}
 	color: ${(props): string =>
 		props.$isDarkMode ? 'var(--bg-vanilla-100, #fff)' : themeColors.bckgGrey};
 

frontend/src/container/LogsExplorerList/InfinityTableView/types.ts

@@ -5,9 +5,6 @@ import { ILog } from 'types/api/logs/log';
 
 export type InfinityTableProps = {
 	isLoading?: boolean;
-	isFetching?: boolean;
-	onRemoveColumn?: (columnKey: string) => void;
-	removableColumnKeys?: string[];
 	tableViewProps: Omit<UseTableViewProps, 'onOpenLogsContext' | 'onClickExpand'>;
 	infitiyTableProps?: {
 		onEndReached: (index: number) => void;

frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss

@@ -8,7 +8,7 @@
 	line-height: 18px;
 	letter-spacing: -0.005em;
 	text-align: left;
-	min-height: 0;
+	min-height: 500px;
 
 	.logs-list-table-view-container {
 		.data-table-container {
@@ -24,11 +24,11 @@
 						color: white !important;
 
 						.cursor-col-resize {
-							width: 24px !important;
+							width: 3px !important;
 							cursor: col-resize !important;
-							opacity: 1 !important;
-							background-color: transparent !important;
-							border: none !important;
+							opacity: 0.5 !important;
+							background-color: var(--bg-ink-500) !important;
+							border: 1px solid var(--bg-ink-500) !important;
 
 							&:hover {
 								opacity: 1 !important;
@@ -85,7 +85,7 @@
 			}
 
 			thead {
-				z-index: 2 !important;
+				z-index: 0 !important;
 			}
 
 			.log-state-indicator {

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackCustomTableRow.tsx

@@ -1,56 +0,0 @@
-import { ComponentProps } from 'react';
-import { TableComponents } from 'react-virtuoso';
-import {
-	getLogIndicatorType,
-	getLogIndicatorTypeForTable,
-} from 'components/Logs/LogStateIndicator/utils';
-import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { ILog } from 'types/api/logs/log';
-
-import { TableRowStyled } from '../InfinityTableView/styles';
-import { TanStackTableRowData } from './types';
-
-type VirtuosoTableRowProps = ComponentProps<
-	NonNullable<TableComponents<TanStackTableRowData>['TableRow']>
->;
-
-export type TanStackCustomTableRowProps = VirtuosoTableRowProps & {
-	activeLog?: ILog | null;
-	activeContextLog?: ILog | null;
-	logsById: Map<string, ILog>;
-};
-
-function TanStackCustomTableRow({
-	children,
-	item,
-	activeLog,
-	activeContextLog,
-	logsById,
-	...props
-}: TanStackCustomTableRowProps): JSX.Element {
-	const { isHighlighted } = useCopyLogLink(item.currentLog.id);
-	const isDarkMode = useIsDarkMode();
-	const rowId = String(item.currentLog.id ?? '');
-	const rowLog = logsById.get(rowId) || item.currentLog;
-	const logType = rowLog
-		? getLogIndicatorType(rowLog)
-		: getLogIndicatorTypeForTable(item.log);
-
-	return (
-		<TableRowStyled
-			{...props}
-			$isDarkMode={isDarkMode}
-			$isActiveLog={
-				isHighlighted ||
-				rowId === String(activeLog?.id ?? '') ||
-				rowId === String(activeContextLog?.id ?? '')
-			}
-			$logType={logType}
-		>
-			{children}
-		</TableRowStyled>
-	);
-}
-
-export default TanStackCustomTableRow;

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackHeaderRow.styles.scss

@@ -1,185 +0,0 @@
-.tanstack-header-cell {
-	position: sticky;
-	top: 0;
-	z-index: 2;
-	padding: 0;
-	transform: translate3d(
-		var(--tanstack-header-translate-x, 0px),
-		var(--tanstack-header-translate-y, 0px),
-		0
-	);
-	transition: var(--tanstack-header-transition, none);
-
-	&.is-dragging {
-		opacity: 0.85;
-	}
-
-	&.is-resizing {
-		background: var(--bg-slate-500);
-	}
-}
-
-.lightMode .tanstack-header-cell.is-resizing {
-	background: var(--bg-vanilla-300);
-}
-
-.tanstack-header-content {
-	display: flex;
-	align-items: center;
-	height: 100%;
-	min-width: 0;
-	width: 100%;
-	cursor: default;
-	max-width: 100%;
-
-	&.has-resize-control {
-		max-width: calc(100% - 5px);
-	}
-
-	&.has-action-control {
-		max-width: calc(100% - 5px);
-	}
-
-	&.has-resize-control.has-action-control {
-		max-width: calc(100% - 10px);
-	}
-}
-
-.tanstack-grip-slot {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 18px;
-	height: 18px;
-	margin-right: 4px;
-	flex-shrink: 0;
-}
-
-.tanstack-grip-activator {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 12px;
-	height: 12px;
-	cursor: grab;
-	color: var(--text-vanilla-400);
-	opacity: 1;
-	touch-action: none;
-}
-
-.tanstack-header-action-trigger {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 20px;
-	height: 20px;
-	cursor: pointer;
-	flex-shrink: 0;
-	color: var(--text-vanilla-400);
-}
-
-.lightMode .tanstack-grip-activator,
-.lightMode .tanstack-header-action-trigger {
-	color: var(--text-ink-500);
-}
-
-.tanstack-column-actions-content {
-	width: 140px;
-	padding: 6px;
-	background: var(--bg-ink-400);
-	border-color: var(--l2-border);
-	border-radius: 8px;
-	box-shadow: 0 8px 20px var(--bg-ink-500);
-}
-
-.tanstack-remove-column-action {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	width: 100%;
-	min-height: 25px;
-	padding: 0 6px;
-	border: none;
-	border-radius: 6px;
-	background: transparent;
-	justify-content: flex-start;
-	cursor: pointer;
-	color: var(--text-vanilla-200);
-	font-size: 12px;
-	line-height: 16px;
-	font-weight: 500;
-	transition: background-color 120ms ease, color 120ms ease;
-
-	&:hover {
-		background: var(--bg-slate-400);
-		color: var(--text-vanilla-100);
-
-		.tanstack-remove-column-action-icon {
-			color: var(--text-vanilla-200);
-		}
-	}
-}
-
-.tanstack-remove-column-action-icon {
-	font-size: 11px;
-	color: var(--text-vanilla-400);
-	opacity: 0.95;
-}
-
-.lightMode .tanstack-column-actions-content {
-	background: var(--bg-vanilla-100);
-	border: 1px solid var(--l2-border);
-	box-shadow: 0 6px 16px var(--bg-slate-300);
-}
-
-.lightMode .tanstack-remove-column-action {
-	color: var(--text-ink-500);
-
-	&:hover {
-		background: var(--bg-vanilla-300);
-		color: var(--text-ink-600);
-
-		.tanstack-remove-column-action-icon {
-			color: var(--text-ink-600);
-		}
-	}
-}
-
-.lightMode .tanstack-remove-column-action-icon {
-	color: var(--text-ink-400);
-}
-
-.tanstack-header-cell .cursor-col-resize {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	width: 5px;
-	cursor: col-resize;
-	z-index: 10;
-	touch-action: none;
-	background: transparent;
-}
-
-.tanstack-header-cell.is-resizing .cursor-col-resize {
-	background: var(--bg-robin-300);
-}
-
-.tanstack-resize-handle-line {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 50%;
-	width: 4px;
-	transform: translateX(-50%);
-	background: var(--l2-border);
-	opacity: 1;
-	pointer-events: none;
-	transition: background 120ms ease, width 120ms ease;
-}
-
-.tanstack-header-cell.is-resizing .tanstack-resize-handle-line {
-	width: 2px;
-	background: var(--bg-robin-500);
-	transition: none;
-}

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackHeaderRow.tsx

@@ -1,193 +0,0 @@
-import type {
-	CSSProperties,
-	MouseEvent as ReactMouseEvent,
-	TouchEvent as ReactTouchEvent,
-} from 'react';
-import { useMemo } from 'react';
-import { CloseOutlined, MoreOutlined } from '@ant-design/icons';
-import { useSortable } from '@dnd-kit/sortable';
-import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/popover';
-import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
-import { GripVertical } from 'lucide-react';
-
-import { TableHeaderCellStyled } from '../InfinityTableView/styles';
-import { InfinityTableProps } from '../InfinityTableView/types';
-import { OrderedColumn, TanStackTableRowData } from './types';
-import { getColumnId } from './utils';
-
-import './TanStackHeaderRow.styles.scss';
-
-type TanStackHeaderRowProps = {
-	column: OrderedColumn;
-	header?: TanStackHeader<TanStackTableRowData, unknown>;
-	isDarkMode: boolean;
-	fontSize: InfinityTableProps['tableViewProps']['fontSize'];
-	hasSingleColumn: boolean;
-	canRemoveColumn?: boolean;
-	onRemoveColumn?: (columnKey: string) => void;
-};
-
-const GRIP_ICON_SIZE = 12;
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function TanStackHeaderRow({
-	column,
-	header,
-	isDarkMode,
-	fontSize,
-	hasSingleColumn,
-	canRemoveColumn = false,
-	onRemoveColumn,
-}: TanStackHeaderRowProps): JSX.Element {
-	const columnId = getColumnId(column);
-	const isDragColumn =
-		column.key !== 'expand' && column.key !== 'state-indicator';
-	const isResizableColumn = Boolean(header?.column.getCanResize());
-	const isColumnRemovable = Boolean(
-		canRemoveColumn &&
-			onRemoveColumn &&
-			column.key !== 'expand' &&
-			column.key !== 'state-indicator',
-	);
-	const isResizing = Boolean(header?.column.getIsResizing());
-	const resizeHandler = header?.getResizeHandler();
-	const headerText =
-		typeof column.title === 'string' && column.title
-			? column.title
-			: String(header?.id ?? columnId);
-	const headerTitleAttr = headerText.replace(/^\w/, (c) => c.toUpperCase());
-	const handleResizeStart = (
-		event: ReactMouseEvent<HTMLElement> | ReactTouchEvent<HTMLElement>,
-	): void => {
-		event.preventDefault();
-		event.stopPropagation();
-		resizeHandler?.(event);
-	};
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		setActivatorNodeRef,
-		transform,
-		transition,
-		isDragging,
-	} = useSortable({
-		id: columnId,
-		disabled: !isDragColumn,
-	});
-	const headerCellStyle = useMemo(
-		() =>
-			({
-				'--tanstack-header-translate-x': `${Math.round(transform?.x ?? 0)}px`,
-				'--tanstack-header-translate-y': `${Math.round(transform?.y ?? 0)}px`,
-				'--tanstack-header-transition': isResizing ? 'none' : transition || 'none',
-			} as CSSProperties),
-		[isResizing, transform?.x, transform?.y, transition],
-	);
-	const headerCellClassName = [
-		'tanstack-header-cell',
-		isDragging ? 'is-dragging' : '',
-		isResizing ? 'is-resizing' : '',
-	]
-		.filter(Boolean)
-		.join(' ');
-	const headerContentClassName = [
-		'tanstack-header-content',
-		isResizableColumn ? 'has-resize-control' : '',
-		isColumnRemovable ? 'has-action-control' : '',
-	]
-		.filter(Boolean)
-		.join(' ');
-
-	return (
-		<TableHeaderCellStyled
-			ref={setNodeRef}
-			$isLogIndicator={column.key === 'state-indicator'}
-			$isDarkMode={isDarkMode}
-			$isDragColumn={false}
-			className={headerCellClassName}
-			key={columnId}
-			fontSize={fontSize}
-			$hasSingleColumn={hasSingleColumn}
-			style={headerCellStyle}
-		>
-			<span className={headerContentClassName}>
-				{isDragColumn ? (
-					<span className="tanstack-grip-slot">
-						<span
-							ref={setActivatorNodeRef}
-							{...attributes}
-							{...listeners}
-							role="button"
-							aria-label={`Drag ${String(
-								column.title || header?.id || columnId,
-							)} column`}
-							className="tanstack-grip-activator"
-						>
-							<GripVertical size={GRIP_ICON_SIZE} />
-						</span>
-					</span>
-				) : null}
-				<span className="tanstack-header-title" title={headerTitleAttr}>
-					{header
-						? flexRender(header.column.columnDef.header, header.getContext())
-						: String(column.title || '').replace(/^\w/, (c) => c.toUpperCase())}
-				</span>
-				{isColumnRemovable && (
-					<Popover>
-						<PopoverTrigger asChild>
-							<span
-								role="button"
-								aria-label={`Column actions for ${headerTitleAttr}`}
-								className="tanstack-header-action-trigger"
-								onMouseDown={(event): void => {
-									event.stopPropagation();
-								}}
-							>
-								<MoreOutlined />
-							</span>
-						</PopoverTrigger>
-						<PopoverContent
-							align="end"
-							sideOffset={6}
-							className="tanstack-column-actions-content"
-						>
-							<button
-								type="button"
-								className="tanstack-remove-column-action"
-								onClick={(event): void => {
-									event.preventDefault();
-									event.stopPropagation();
-									onRemoveColumn?.(String(column.key));
-								}}
-							>
-								<CloseOutlined className="tanstack-remove-column-action-icon" />
-								Remove column
-							</button>
-						</PopoverContent>
-					</Popover>
-				)}
-			</span>
-			{isResizableColumn && (
-				<span
-					role="presentation"
-					className="cursor-col-resize"
-					title="Drag to resize column"
-					onClick={(event): void => {
-						event.preventDefault();
-						event.stopPropagation();
-					}}
-					onMouseDown={(event): void => {
-						handleResizeStart(event);
-					}}
-					onTouchStart={(event): void => {
-						handleResizeStart(event);
-					}}
-				>
-					<span className="tanstack-resize-handle-line" />
-				</span>
-			)}
-		</TableHeaderCellStyled>
-	);
-}
-
-export default TanStackHeaderRow;

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackRow.tsx

@@ -1,107 +0,0 @@
-import {
-	MouseEvent as ReactMouseEvent,
-	MouseEventHandler,
-	useCallback,
-} from 'react';
-import { flexRender, Row as TanStackRowModel } from '@tanstack/react-table';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
-import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
-
-import { TableCellStyled } from '../InfinityTableView/styles';
-import { InfinityTableProps } from '../InfinityTableView/types';
-import { TanStackTableRowData } from './types';
-
-type TanStackRowProps = {
-	row: TanStackRowModel<TanStackTableRowData>;
-	fontSize: InfinityTableProps['tableViewProps']['fontSize'];
-	onSetActiveLog?: InfinityTableProps['onSetActiveLog'];
-	onClearActiveLog?: InfinityTableProps['onClearActiveLog'];
-	isActiveLog?: boolean;
-	isDarkMode: boolean;
-	onLogCopy: (logId: string, event: ReactMouseEvent<HTMLElement>) => void;
-	isLogsExplorerPage: boolean;
-};
-
-function TanStackRow({
-	row,
-	fontSize,
-	onSetActiveLog,
-	onClearActiveLog,
-	isActiveLog = false,
-	isDarkMode,
-	onLogCopy,
-	isLogsExplorerPage,
-}: TanStackRowProps): JSX.Element {
-	const { currentLog } = row.original;
-
-	const handleShowContext: MouseEventHandler<HTMLElement> = useCallback(
-		(event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			onSetActiveLog?.(currentLog, VIEW_TYPES.CONTEXT);
-		},
-		[currentLog, onSetActiveLog],
-	);
-
-	const handleShowLogDetails = useCallback(() => {
-		if (!currentLog) {
-			return;
-		}
-
-		if (isActiveLog && onClearActiveLog) {
-			onClearActiveLog();
-			return;
-		}
-
-		onSetActiveLog?.(currentLog);
-	}, [currentLog, isActiveLog, onClearActiveLog, onSetActiveLog]);
-
-	return (
-		<>
-			{row.getVisibleCells().map((cell) => {
-				const columnKey = cell.column.id;
-				return (
-					<TableCellStyled
-						$isDragColumn={false}
-						$isLogIndicator={columnKey === 'state-indicator'}
-						$hasSingleColumn={row.getVisibleCells().length <= 2}
-						$isDarkMode={isDarkMode}
-						key={cell.id}
-						fontSize={fontSize}
-						className={columnKey}
-						onClick={handleShowLogDetails}
-					>
-						{flexRender(cell.column.columnDef.cell, cell.getContext())}
-					</TableCellStyled>
-				);
-			})}
-			<TableCellStyled
-				$isDragColumn={false}
-				$isLogIndicator={false}
-				$hasSingleColumn={false}
-				$isDarkMode={isDarkMode}
-				fontSize={fontSize}
-				className="logs-table-filler-cell"
-				onClick={handleShowLogDetails}
-			/>
-			{isLogsExplorerPage && (
-				<TableCellStyled
-					$isDragColumn={false}
-					$isLogIndicator={false}
-					$hasSingleColumn={false}
-					$isDarkMode={isDarkMode}
-					fontSize={fontSize}
-					className="table-actions-cell"
-				>
-					<LogLinesActionButtons
-						handleShowContext={handleShowContext}
-						onLogCopy={(event): void => onLogCopy(currentLog.id, event)}
-						customClassName="table-view-log-actions"
-					/>
-				</TableCellStyled>
-			)}
-		</>
-	);
-}
-
-export default TanStackRow;

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackTableView.styles.scss

@@ -1,54 +0,0 @@
-.tanstack-table-view-wrapper {
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	min-height: 0;
-}
-
-.tanstack-fixed-col {
-	width: 32px;
-	min-width: 32px;
-	max-width: 32px;
-}
-
-.tanstack-filler-col {
-	width: 100%;
-	min-width: 0;
-}
-
-.tanstack-actions-col {
-	width: 0;
-	min-width: 0;
-	max-width: 0;
-}
-
-.tanstack-load-more-container {
-	width: 100%;
-	min-height: 56px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 8px 0 12px;
-	flex-shrink: 0;
-}
-.tanstack-table-virtuoso {
-	width: 100%;
-	overflow-x: scroll;
-}
-
-.tanstack-fontSize-small {
-	font-size: 11px;
-}
-
-.tanstack-fontSize-medium {
-	font-size: 13px;
-}
-
-.tanstack-fontSize-large {
-	font-size: 14px;
-}
-
-.tanstack-table-foot-loader-cell {
-	text-align: center;
-	padding: 8px 0;
-}

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackCustomTableRow.test.tsx

@@ -1,98 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import TanStackCustomTableRow from '../TanStackCustomTableRow';
-import type { TanStackTableRowData } from '../types';
-
-jest.mock('../../InfinityTableView/styles', () => ({
-	TableRowStyled: 'tr',
-}));
-
-jest.mock('hooks/logs/useCopyLogLink', () => ({
-	useCopyLogLink: (): { isHighlighted: boolean } => ({ isHighlighted: false }),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('components/Logs/LogStateIndicator/utils', () => ({
-	getLogIndicatorType: (): string => 'info',
-	getLogIndicatorTypeForTable: (): string => 'info',
-}));
-
-const item: TanStackTableRowData = {
-	log: {},
-	currentLog: { id: 'row-1' } as TanStackTableRowData['currentLog'],
-	rowIndex: 0,
-};
-
-/** Required by react-virtuoso `TableRow` / `TableComponents` typing */
-const virtuosoTableRowAttrs = {
-	'data-index': 0,
-	'data-item-index': 0,
-	'data-known-size': 40,
-} as const;
-
-describe('TanStackCustomTableRow', () => {
-	it('renders children inside TableRowStyled', () => {
-		render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoTableRowAttrs}
-						item={item}
-						logsById={new Map()}
-						activeLog={null}
-						activeContextLog={null}
-					>
-						<td>cell</td>
-					</TanStackCustomTableRow>
-				</tbody>
-			</table>,
-		);
-
-		expect(screen.getByText('cell')).toBeInTheDocument();
-	});
-
-	it('marks row active when activeLog matches item id', () => {
-		const { container } = render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoTableRowAttrs}
-						item={item}
-						logsById={new Map()}
-						activeLog={{ id: 'row-1' } as never}
-						activeContextLog={null}
-					>
-						<td>x</td>
-					</TanStackCustomTableRow>
-				</tbody>
-			</table>,
-		);
-
-		const row = container.querySelector('tr');
-		expect(row).toBeTruthy();
-	});
-
-	it('uses logsById entry when present for indicator type', () => {
-		const logFromMap = { id: 'row-1', severity_text: 'error' } as never;
-		render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoTableRowAttrs}
-						item={item}
-						logsById={new Map([['row-1', logFromMap]])}
-						activeLog={null}
-						activeContextLog={null}
-					>
-						<td>x</td>
-					</TanStackCustomTableRow>
-				</tbody>
-			</table>,
-		);
-
-		expect(screen.getByText('x')).toBeInTheDocument();
-	});
-});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackHeaderRow.test.tsx

@@ -1,152 +0,0 @@
-import type { Header } from '@tanstack/react-table';
-import { render, screen } from '@testing-library/react';
-import { FontSize } from 'container/OptionsMenu/types';
-
-import TanStackHeaderRow from '../TanStackHeaderRow';
-import type { OrderedColumn, TanStackTableRowData } from '../types';
-
-jest.mock('../../InfinityTableView/styles', () => ({
-	TableHeaderCellStyled: 'th',
-}));
-
-const mockUseSortable = jest.fn((_args?: unknown) => ({
-	attributes: {},
-	listeners: {},
-	setNodeRef: jest.fn(),
-	setActivatorNodeRef: jest.fn(),
-	transform: null,
-	transition: undefined,
-	isDragging: false,
-}));
-
-jest.mock('@dnd-kit/sortable', () => ({
-	useSortable: (args: unknown): ReturnType<typeof mockUseSortable> =>
-		mockUseSortable(args),
-}));
-
-jest.mock('@tanstack/react-table', () => ({
-	flexRender: (def: unknown, ctx: unknown): unknown => {
-		if (typeof def === 'string') {
-			return def;
-		}
-		if (typeof def === 'function') {
-			return (def as (c: unknown) => unknown)(ctx);
-		}
-		return def;
-	},
-}));
-
-const column = (key: string): OrderedColumn =>
-	({ key, title: key } as OrderedColumn);
-
-const mockHeader = (
-	id: string,
-	canResize = true,
-): Header<TanStackTableRowData, unknown> =>
-	(({
-		id,
-		column: {
-			getCanResize: (): boolean => canResize,
-			getIsResizing: (): boolean => false,
-			columnDef: { header: id },
-		},
-		getContext: (): unknown => ({}),
-		getResizeHandler: (): (() => void) => jest.fn(),
-		flexRender: undefined,
-	} as unknown) as Header<TanStackTableRowData, unknown>);
-
-describe('TanStackHeaderRow', () => {
-	beforeEach(() => {
-		mockUseSortable.mockClear();
-	});
-
-	it('renders column title when header is undefined', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={column('timestamp')}
-							isDarkMode={false}
-							fontSize={FontSize.SMALL}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-
-		expect(screen.getByText('Timestamp')).toBeInTheDocument();
-	});
-
-	it('enables useSortable for draggable columns', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={column('body')}
-							header={mockHeader('body')}
-							isDarkMode={false}
-							fontSize={FontSize.SMALL}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-
-		expect(mockUseSortable).toHaveBeenCalledWith(
-			expect.objectContaining({
-				id: 'body',
-				disabled: false,
-			}),
-		);
-	});
-
-	it('disables sortable for expand column', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={column('expand')}
-							header={mockHeader('expand', false)}
-							isDarkMode={false}
-							fontSize={FontSize.SMALL}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-
-		expect(mockUseSortable).toHaveBeenCalledWith(
-			expect.objectContaining({
-				disabled: true,
-			}),
-		);
-	});
-
-	it('shows drag grip for draggable columns', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={column('body')}
-							header={mockHeader('body')}
-							isDarkMode={false}
-							fontSize={FontSize.SMALL}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-
-		expect(
-			screen.getByRole('button', { name: /Drag body column/i }),
-		).toBeInTheDocument();
-	});
-});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackRow.test.tsx

@@ -1,220 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { FontSize } from 'container/OptionsMenu/types';
-
-import TanStackRow from '../TanStackRow';
-import type { TanStackTableRowData } from '../types';
-
-jest.mock('../../InfinityTableView/styles', () => ({
-	TableCellStyled: 'td',
-}));
-
-jest.mock(
-	'components/Logs/LogLinesActionButtons/LogLinesActionButtons',
-	() => ({
-		__esModule: true,
-		default: ({
-			onLogCopy,
-		}: {
-			onLogCopy: (e: React.MouseEvent) => void;
-		}): JSX.Element => (
-			<button type="button" data-testid="copy-btn" onClick={onLogCopy}>
-				copy
-			</button>
-		),
-	}),
-);
-
-const flexRenderMock = jest.fn((def: unknown, _ctx?: unknown) =>
-	typeof def === 'function' ? def({}) : def,
-);
-
-jest.mock('@tanstack/react-table', () => ({
-	flexRender: (def: unknown, ctx: unknown): unknown => flexRenderMock(def, ctx),
-}));
-
-function buildMockRow(
-	visibleCells: Array<{ columnId: string }>,
-): Parameters<typeof TanStackRow>[0]['row'] {
-	return {
-		original: {
-			currentLog: { id: 'log-1' } as TanStackTableRowData['currentLog'],
-			log: {},
-			rowIndex: 0,
-		},
-		getVisibleCells: () =>
-			visibleCells.map((cell, index) => ({
-				id: `cell-${index}`,
-				column: {
-					id: cell.columnId,
-					columnDef: {
-						cell: (): string => `content-${cell.columnId}`,
-					},
-				},
-				getContext: (): Record<string, unknown> => ({}),
-			})),
-	} as never;
-}
-
-describe('TanStackRow', () => {
-	beforeEach(() => {
-		flexRenderMock.mockClear();
-	});
-
-	it('renders a cell per visible column and calls flexRender', () => {
-		const row = buildMockRow([
-			{ columnId: 'state-indicator' },
-			{ columnId: 'body' },
-		]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRow
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		expect(screen.getAllByRole('cell')).toHaveLength(3);
-		expect(flexRenderMock).toHaveBeenCalled();
-	});
-
-	it('applies state-indicator styling class on the indicator cell', () => {
-		const row = buildMockRow([{ columnId: 'state-indicator' }]);
-
-		const { container } = render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRow
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		expect(container.querySelector('td.state-indicator')).toBeInTheDocument();
-	});
-
-	it('renders row actions on logs explorer page', () => {
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRow
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		expect(screen.getByTestId('copy-btn')).toBeInTheDocument();
-	});
-
-	it('click on a data cell calls onSetActiveLog with current log', () => {
-		const onSetActiveLog = jest.fn();
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRow
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onSetActiveLog={onSetActiveLog}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		fireEvent.click(screen.getAllByRole('cell')[0]);
-
-		expect(onSetActiveLog).toHaveBeenCalledWith(
-			expect.objectContaining({ id: 'log-1' }),
-		);
-	});
-
-	it('click on filler cell calls onSetActiveLog', () => {
-		const onSetActiveLog = jest.fn();
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		const { container } = render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRow
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onSetActiveLog={onSetActiveLog}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		const filler = container.querySelector('td.logs-table-filler-cell');
-		expect(filler).toBeTruthy();
-		fireEvent.click(filler!);
-
-		expect(onSetActiveLog).toHaveBeenCalledWith(
-			expect.objectContaining({ id: 'log-1' }),
-		);
-	});
-
-	it('when row is active log, click on cell clears active log', () => {
-		const onSetActiveLog = jest.fn();
-		const onClearActiveLog = jest.fn();
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRow
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							isActiveLog
-							onSetActiveLog={onSetActiveLog}
-							onClearActiveLog={onClearActiveLog}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		fireEvent.click(screen.getAllByRole('cell')[0]);
-
-		expect(onClearActiveLog).toHaveBeenCalled();
-		expect(onSetActiveLog).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackTableView.test.tsx

@@ -1,104 +0,0 @@
-import { forwardRef } from 'react';
-import { render, screen } from '@testing-library/react';
-import { FontSize } from 'container/OptionsMenu/types';
-
-import type { InfinityTableProps } from '../../InfinityTableView/types';
-import TanStackTableView from '../index';
-
-jest.mock('react-virtuoso', () => ({
-	TableVirtuoso: forwardRef<
-		unknown,
-		{
-			fixedHeaderContent?: () => JSX.Element;
-			itemContent: (i: number) => JSX.Element;
-		}
-	>(function MockVirtuoso({ fixedHeaderContent, itemContent }, _ref) {
-		return (
-			<div data-testid="virtuoso">
-				{fixedHeaderContent?.()}
-				{itemContent(0)}
-			</div>
-		);
-	}),
-}));
-
-jest.mock('components/Logs/TableView/useTableView', () => ({
-	useTableView: (): {
-		dataSource: Record<string, string>[];
-		columns: unknown[];
-	} => ({
-		dataSource: [{ id: '1' }],
-		columns: [
-			{ key: 'body', title: 'body', render: (): string => 'x' },
-			{ key: 'state-indicator', title: 's', render: (): string => 'y' },
-		],
-	}),
-}));
-
-jest.mock('hooks/useDragColumns', () => ({
-	__esModule: true,
-	default: (): {
-		draggedColumns: unknown[];
-		onColumnOrderChange: () => void;
-	} => ({
-		draggedColumns: [],
-		onColumnOrderChange: jest.fn(),
-	}),
-}));
-
-jest.mock('hooks/logs/useActiveLog', () => ({
-	useActiveLog: (): { activeLog: null } => ({ activeLog: null }),
-}));
-
-jest.mock('hooks/logs/useCopyLogLink', () => ({
-	useCopyLogLink: (): { activeLogId: null } => ({ activeLogId: null }),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('react-router-dom', () => ({
-	useLocation: (): { pathname: string } => ({ pathname: '/logs' }),
-}));
-
-jest.mock('react-use', () => ({
-	useCopyToClipboard: (): [unknown, () => void] => [null, jest.fn()],
-}));
-
-jest.mock('@signozhq/sonner', () => ({
-	toast: { success: jest.fn() },
-}));
-
-jest.mock('components/Spinner', () => ({
-	__esModule: true,
-	default: ({ tip }: { tip: string }): JSX.Element => (
-		<div data-testid="spinner">{tip}</div>
-	),
-}));
-
-const baseProps: InfinityTableProps = {
-	isLoading: false,
-	tableViewProps: {
-		logs: [{ id: '1' } as never],
-		fields: [],
-		linesPerRow: 3,
-		fontSize: FontSize.SMALL,
-		appendTo: 'end',
-		activeLogIndex: 0,
-	},
-};
-
-describe('TanStackTableView', () => {
-	it('shows spinner while loading', () => {
-		render(<TanStackTableView {...baseProps} isLoading />);
-
-		expect(screen.getByTestId('spinner')).toHaveTextContent('Getting Logs');
-	});
-
-	it('renders virtuoso when not loading', () => {
-		render(<TanStackTableView {...baseProps} />);
-
-		expect(screen.getByTestId('virtuoso')).toBeInTheDocument();
-	});
-});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/useColumnSizingPersistence.test.tsx

@@ -1,173 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-import type { OrderedColumn } from '../types';
-import { useColumnSizingPersistence } from '../useColumnSizingPersistence';
-
-const mockGet = jest.fn();
-const mockSet = jest.fn();
-
-jest.mock('api/browser/localstorage/get', () => ({
-	__esModule: true,
-	default: (key: string): string | null => mockGet(key),
-}));
-
-jest.mock('api/browser/localstorage/set', () => ({
-	__esModule: true,
-	default: (key: string, value: string): void => {
-		mockSet(key, value);
-	},
-}));
-
-const col = (key: string): OrderedColumn =>
-	({ key, title: key } as OrderedColumn);
-
-describe('useColumnSizingPersistence', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockGet.mockReturnValue(null);
-		jest.useFakeTimers();
-	});
-
-	afterEach(() => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	});
-
-	it('initializes with empty sizing when localStorage is empty', () => {
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body'), col('timestamp')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({});
-	});
-
-	it('parses flat ColumnSizingState from localStorage', () => {
-		mockGet.mockReturnValue(JSON.stringify({ body: 400, timestamp: 180 }));
-
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body'), col('timestamp')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({ body: 400, timestamp: 180 });
-	});
-
-	it('parses PersistedColumnSizing wrapper with sizing + columnIdsSignature', () => {
-		mockGet.mockReturnValue(
-			JSON.stringify({
-				version: 1,
-				columnIdsSignature: 'body|timestamp',
-				sizing: { body: 300 },
-			}),
-		);
-
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body'), col('timestamp')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({ body: 300 });
-	});
-
-	it('drops invalid numeric entries when reading from localStorage', () => {
-		mockGet.mockReturnValue(
-			JSON.stringify({
-				body: 200,
-				bad: NaN,
-				zero: 0,
-				neg: -1,
-				str: 'wide',
-			}),
-		);
-
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body'), col('bad'), col('zero')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({ body: 200 });
-	});
-
-	it('returns empty sizing when JSON is invalid', () => {
-		const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-		mockGet.mockReturnValue('not-json');
-
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({});
-		spy.mockRestore();
-	});
-
-	it('prunes sizing for columns not in orderedColumns and strips fixed columns', () => {
-		mockGet.mockReturnValue(JSON.stringify({ body: 400, expand: 32, gone: 100 }));
-
-		const { result, rerender } = renderHook(
-			({ columns }: { columns: OrderedColumn[] }) =>
-				useColumnSizingPersistence(columns),
-			{
-				initialProps: {
-					columns: [
-						col('body'),
-						col('expand'),
-						col('state-indicator'),
-					] as OrderedColumn[],
-				},
-			},
-		);
-
-		expect(result.current.columnSizing).toEqual({ body: 400 });
-
-		act(() => {
-			rerender({
-				columns: [col('body'), col('expand'), col('state-indicator')],
-			});
-		});
-
-		expect(result.current.columnSizing).toEqual({ body: 400 });
-	});
-
-	it('updates setColumnSizing manually', () => {
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body')]),
-		);
-
-		act(() => {
-			result.current.setColumnSizing({ body: 500 });
-		});
-
-		expect(result.current.columnSizing).toEqual({ body: 500 });
-	});
-
-	it('debounces writes to localStorage', () => {
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body')]),
-		);
-
-		act(() => {
-			result.current.setColumnSizing({ body: 600 });
-		});
-
-		expect(mockSet).not.toHaveBeenCalled();
-
-		act(() => {
-			jest.advanceTimersByTime(250);
-		});
-
-		expect(mockSet).toHaveBeenCalledWith(
-			LOCALSTORAGE.LOGS_LIST_COLUMN_SIZING,
-			expect.stringContaining('"body":600'),
-		);
-	});
-
-	it('does not persist when ordered columns signature effect runs with empty ids early — still debounces empty sizing', () => {
-		const { result } = renderHook(() => useColumnSizingPersistence([]));
-
-		expect(result.current.columnSizing).toEqual({});
-
-		act(() => {
-			jest.advanceTimersByTime(250);
-		});
-
-		expect(mockSet).toHaveBeenCalled();
-	});
-});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/useOrderedColumns.test.tsx

@@ -1,222 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-
-import type { OrderedColumn } from '../types';
-import { useOrderedColumns } from '../useOrderedColumns';
-
-const mockGetDraggedColumns = jest.fn();
-
-jest.mock('hooks/useDragColumns/utils', () => ({
-	getDraggedColumns: <T,>(current: unknown[], dragged: unknown[]): T[] =>
-		mockGetDraggedColumns(current, dragged) as T[],
-}));
-
-const col = (key: string, title?: string): OrderedColumn =>
-	({ key, title: title ?? key } as OrderedColumn);
-
-describe('useOrderedColumns', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('returns columns from getDraggedColumns filtered to keys with string or number', () => {
-		mockGetDraggedColumns.mockReturnValue([
-			col('body'),
-			col('timestamp'),
-			{ title: 'no-key' },
-		]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange: jest.fn(),
-			}),
-		);
-
-		expect(result.current.orderedColumns).toEqual([
-			col('body'),
-			col('timestamp'),
-		]);
-		expect(result.current.orderedColumnIds).toEqual(['body', 'timestamp']);
-	});
-
-	it('hasSingleColumn is true when exactly one column is not state-indicator', () => {
-		mockGetDraggedColumns.mockReturnValue([col('state-indicator'), col('body')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange: jest.fn(),
-			}),
-		);
-
-		expect(result.current.hasSingleColumn).toBe(true);
-	});
-
-	it('hasSingleColumn is false when more than one non-state-indicator column exists', () => {
-		mockGetDraggedColumns.mockReturnValue([
-			col('state-indicator'),
-			col('body'),
-			col('timestamp'),
-		]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange: jest.fn(),
-			}),
-		);
-
-		expect(result.current.hasSingleColumn).toBe(false);
-	});
-
-	it('handleDragEnd reorders columns and calls onColumnOrderChange', () => {
-		const onColumnOrderChange = jest.fn();
-		mockGetDraggedColumns.mockReturnValue([col('a'), col('b'), col('c')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange,
-			}),
-		);
-
-		act(() => {
-			result.current.handleDragEnd({
-				active: { id: 'a' },
-				over: { id: 'c' },
-			} as never);
-		});
-
-		expect(result.current.orderedColumns.map((c) => c.key)).toEqual([
-			'b',
-			'c',
-			'a',
-		]);
-		expect(onColumnOrderChange).toHaveBeenCalledWith(
-			expect.arrayContaining([
-				expect.objectContaining({ key: 'b' }),
-				expect.objectContaining({ key: 'c' }),
-				expect.objectContaining({ key: 'a' }),
-			]),
-		);
-	});
-
-	it('handleDragEnd no-ops when over is null', () => {
-		const onColumnOrderChange = jest.fn();
-		mockGetDraggedColumns.mockReturnValue([col('a'), col('b')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange,
-			}),
-		);
-
-		const before = result.current.orderedColumns;
-
-		act(() => {
-			result.current.handleDragEnd({
-				active: { id: 'a' },
-				over: null,
-			} as never);
-		});
-
-		expect(result.current.orderedColumns).toBe(before);
-		expect(onColumnOrderChange).not.toHaveBeenCalled();
-	});
-
-	it('handleDragEnd no-ops when active.id equals over.id', () => {
-		const onColumnOrderChange = jest.fn();
-		mockGetDraggedColumns.mockReturnValue([col('a'), col('b')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange,
-			}),
-		);
-
-		act(() => {
-			result.current.handleDragEnd({
-				active: { id: 'a' },
-				over: { id: 'a' },
-			} as never);
-		});
-
-		expect(onColumnOrderChange).not.toHaveBeenCalled();
-	});
-
-	it('handleDragEnd no-ops when indices cannot be resolved', () => {
-		const onColumnOrderChange = jest.fn();
-		mockGetDraggedColumns.mockReturnValue([col('a'), col('b')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange,
-			}),
-		);
-
-		act(() => {
-			result.current.handleDragEnd({
-				active: { id: 'missing' },
-				over: { id: 'a' },
-			} as never);
-		});
-
-		expect(onColumnOrderChange).not.toHaveBeenCalled();
-	});
-
-	it('exposes sensors from useSensors', () => {
-		mockGetDraggedColumns.mockReturnValue([col('a')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange: jest.fn(),
-			}),
-		);
-
-		expect(result.current.sensors).toBeDefined();
-	});
-
-	it('syncs ordered columns when base order changes externally (e.g. URL / localStorage)', () => {
-		mockGetDraggedColumns.mockReturnValue([col('a'), col('b'), col('c')]);
-
-		const { result, rerender } = renderHook(
-			({ draggedColumns }: { draggedColumns: unknown[] }) =>
-				useOrderedColumns({
-					columns: [],
-					draggedColumns,
-					onColumnOrderChange: jest.fn(),
-				}),
-			{ initialProps: { draggedColumns: [] as unknown[] } },
-		);
-
-		expect(result.current.orderedColumns.map((column) => column.key)).toEqual([
-			'a',
-			'b',
-			'c',
-		]);
-
-		mockGetDraggedColumns.mockReturnValue([col('c'), col('b'), col('a')]);
-
-		act(() => {
-			rerender({ draggedColumns: [{ title: 'from-url' }] as unknown[] });
-		});
-
-		expect(result.current.orderedColumns.map((column) => column.key)).toEqual([
-			'c',
-			'b',
-			'a',
-		]);
-	});
-});

frontend/src/container/LogsExplorerList/TanStackTableView/index.tsx

@@ -1,483 +0,0 @@
-import {
-	forwardRef,
-	memo,
-	MouseEvent as ReactMouseEvent,
-	ReactElement,
-	useCallback,
-	useEffect,
-	useImperativeHandle,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { useLocation } from 'react-router-dom';
-import { useCopyToClipboard } from 'react-use';
-import {
-	TableComponents,
-	TableVirtuoso,
-	TableVirtuosoHandle,
-} from 'react-virtuoso';
-import { DndContext, pointerWithin } from '@dnd-kit/core';
-import {
-	horizontalListSortingStrategy,
-	SortableContext,
-} from '@dnd-kit/sortable';
-import { toast } from '@signozhq/sonner';
-import {
-	ColumnDef,
-	getCoreRowModel,
-	useReactTable,
-} from '@tanstack/react-table';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
-import { ColumnTypeRender } from 'components/Logs/TableView/types';
-import { useTableView } from 'components/Logs/TableView/useTableView';
-import Spinner from 'components/Spinner';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import useDragColumns from 'hooks/useDragColumns';
-
-import { getInfinityDefaultStyles } from '../InfinityTableView/config';
-import {
-	TableHeaderCellStyled,
-	TanStackTableStyled,
-} from '../InfinityTableView/styles';
-import { InfinityTableProps } from '../InfinityTableView/types';
-import TanStackCustomTableRow from './TanStackCustomTableRow';
-import TanStackHeaderRow from './TanStackHeaderRow';
-import TanStackRow from './TanStackRow';
-import { TableRecord, TanStackTableRowData } from './types';
-import { useColumnSizingPersistence } from './useColumnSizingPersistence';
-import { useOrderedColumns } from './useOrderedColumns';
-import {
-	getColumnId,
-	getColumnMinWidthPx,
-	resolveColumnTypeRender,
-} from './utils';
-
-import '../logsTableVirtuosoScrollbar.scss';
-import './TanStackTableView.styles.scss';
-
-const COLUMN_DND_AUTO_SCROLL = {
-	layoutShiftCompensation: false as const,
-	threshold: { x: 0.2, y: 0 },
-};
-
-const TanStackTableView = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
-	function TanStackTableView(
-		{
-			isLoading,
-			isFetching,
-			onRemoveColumn,
-			removableColumnKeys,
-			tableViewProps,
-			infitiyTableProps,
-			onSetActiveLog,
-			onClearActiveLog,
-			activeLog,
-		}: InfinityTableProps,
-		forwardedRef,
-	): JSX.Element {
-		const { pathname } = useLocation();
-		const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
-		useImperativeHandle(
-			forwardedRef,
-			() => virtuosoRef.current as TableVirtuosoHandle,
-			[],
-		);
-		const [, setCopy] = useCopyToClipboard();
-		const { dataSource, columns } = useTableView({
-			...tableViewProps,
-			onClickExpand: onSetActiveLog,
-			onOpenLogsContext: (log): void => onSetActiveLog?.(log, VIEW_TYPES.CONTEXT),
-		});
-
-		const { draggedColumns, onColumnOrderChange } = useDragColumns<TableRecord>(
-			LOCALSTORAGE.LOGS_LIST_COLUMNS,
-		);
-		const {
-			orderedColumns,
-			orderedColumnIds,
-			hasSingleColumn,
-			handleDragEnd,
-			sensors,
-		} = useOrderedColumns({
-			columns,
-			draggedColumns,
-			onColumnOrderChange: onColumnOrderChange as (columns: unknown[]) => void,
-		});
-		const { columnSizing, setColumnSizing } = useColumnSizingPersistence(
-			orderedColumns,
-		);
-		const removableColumnKeySet = useMemo(
-			() => new Set((removableColumnKeys || []).map((column) => String(column))),
-			[removableColumnKeys],
-		);
-		const isAtMinimumRemovableColumns = useMemo(
-			() =>
-				orderedColumns.filter(
-					(column) => column.key !== 'state-indicator' && column.key !== 'expand',
-				).length <= 1,
-			[orderedColumns],
-		);
-		const tableData = useMemo<TanStackTableRowData[]>(
-			() =>
-				dataSource
-					.map((log, rowIndex) => {
-						const currentLog = tableViewProps.logs[rowIndex];
-						if (!currentLog) {
-							return null;
-						}
-						return { log, currentLog, rowIndex };
-					})
-					.filter(Boolean) as TanStackTableRowData[],
-			[dataSource, tableViewProps.logs],
-		);
-		const tanstackColumns = useMemo<ColumnDef<TanStackTableRowData>[]>(
-			() =>
-				orderedColumns.map((column) => {
-					const isStateIndicator = column.key === 'state-indicator';
-					const isExpand = column.key === 'expand';
-					const isFixedColumn = isStateIndicator || isExpand;
-					const fixedWidth = isFixedColumn ? 32 : undefined;
-					const minWidthPx = getColumnMinWidthPx(column, orderedColumns);
-					const headerTitle = String(column.title || '');
-
-					return {
-						id: getColumnId(column),
-						header: headerTitle.replace(/^\w/, (character) =>
-							character.toUpperCase(),
-						),
-						accessorFn: (row): unknown => row.log[column.key as keyof TableRecord],
-						enableResizing: !isFixedColumn,
-						minSize: fixedWidth ?? minWidthPx,
-						size: fixedWidth,
-						maxSize: fixedWidth,
-						cell: ({ row, getValue }): ReactElement | string | number | null => {
-							if (!column.render) {
-								return null;
-							}
-
-							return resolveColumnTypeRender(
-								column.render(
-									getValue(),
-									row.original.log,
-									row.original.rowIndex,
-								) as ColumnTypeRender<Record<string, unknown>>,
-							);
-						},
-					};
-				}),
-			[orderedColumns],
-		);
-		const { activeLogId } = useCopyLogLink();
-		const { activeLog: activeContextLog } = useActiveLog();
-		const rowSelection = useMemo<Record<string, boolean>>(() => {
-			const targetId = activeLog?.id ?? activeLogId;
-			if (targetId === undefined || targetId === null || targetId === '') {
-				return {};
-			}
-
-			const activeIndex = tableData.findIndex(
-				(row) => String(row.currentLog.id) === String(targetId),
-			);
-			if (activeIndex < 0) {
-				return {};
-			}
-
-			return { [String(activeIndex)]: true };
-		}, [activeLog?.id, activeLogId, tableData]);
-		const table = useReactTable({
-			data: tableData,
-			columns: tanstackColumns,
-			enableColumnResizing: true,
-			getCoreRowModel: getCoreRowModel(),
-			columnResizeMode: 'onChange',
-			onColumnSizingChange: setColumnSizing,
-			state: {
-				rowSelection,
-				columnSizing,
-			},
-		});
-		const tableRows = table.getRowModel().rows;
-		const [loadMoreState, setLoadMoreState] = useState<{
-			active: boolean;
-			seenFetching: boolean;
-			startCount: number;
-		}>({
-			active: false,
-			seenFetching: false,
-			startCount: 0,
-		});
-
-		const isLogsExplorerPage = pathname === ROUTES.LOGS_EXPLORER;
-		const logsById = useMemo(
-			() => new Map(tableViewProps.logs.map((log) => [String(log.id), log])),
-			[tableViewProps.logs],
-		);
-		useEffect(() => {
-			const activeLogIndex = tableViewProps.activeLogIndex ?? -1;
-			if (activeLogIndex < 0 || activeLogIndex >= tableRows.length) {
-				return;
-			}
-
-			virtuosoRef.current?.scrollToIndex({
-				index: activeLogIndex,
-				align: 'center',
-				behavior: 'auto',
-			});
-		}, [tableRows.length, tableViewProps.activeLogIndex]);
-
-		useEffect(() => {
-			if (!loadMoreState.active) {
-				return;
-			}
-
-			if (isFetching && !loadMoreState.seenFetching) {
-				setLoadMoreState((prev) =>
-					prev.active && !prev.seenFetching ? { ...prev, seenFetching: true } : prev,
-				);
-				return;
-			}
-
-			if (
-				(loadMoreState.seenFetching && !isFetching) ||
-				tableRows.length > loadMoreState.startCount
-			) {
-				setLoadMoreState((prev) =>
-					prev.active
-						? { active: false, seenFetching: false, startCount: prev.startCount }
-						: prev,
-				);
-			}
-		}, [isFetching, loadMoreState, tableRows.length]);
-		const isDarkMode = useIsDarkMode();
-		const handleLogCopy = useCallback(
-			(logId: string, event: ReactMouseEvent<HTMLElement>): void => {
-				event.preventDefault();
-				event.stopPropagation();
-
-				const urlQuery = new URLSearchParams(window.location.search);
-				urlQuery.delete(QueryParams.activeLogId);
-				urlQuery.delete(QueryParams.relativeTime);
-				urlQuery.set(QueryParams.activeLogId, `"${logId}"`);
-				const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
-
-				setCopy(link);
-				toast.success('Copied to clipboard', { position: 'top-right' });
-			},
-			[pathname, setCopy],
-		);
-		const customTableRow = useCallback<
-			NonNullable<TableComponents<TanStackTableRowData>['TableRow']>
-		>(
-			({ children, item, ...props }) => (
-				<TanStackCustomTableRow
-					{...props}
-					item={item}
-					activeLog={activeLog}
-					activeContextLog={activeContextLog}
-					logsById={logsById}
-				>
-					{children}
-				</TanStackCustomTableRow>
-			),
-			[activeContextLog, activeLog, logsById],
-		);
-		const itemContent = useCallback(
-			(index: number): JSX.Element | null => {
-				const row = table.getRowModel().rows[index];
-				if (!row) {
-					return null;
-				}
-
-				return (
-					<TanStackRow
-						row={row}
-						fontSize={tableViewProps.fontSize}
-						onSetActiveLog={onSetActiveLog}
-						onClearActiveLog={onClearActiveLog}
-						isActiveLog={
-							String(activeLog?.id ?? '') === String(row.original.currentLog.id ?? '')
-						}
-						isDarkMode={isDarkMode}
-						onLogCopy={handleLogCopy}
-						isLogsExplorerPage={isLogsExplorerPage}
-					/>
-				);
-			},
-			[
-				activeLog?.id,
-				handleLogCopy,
-				isDarkMode,
-				isLogsExplorerPage,
-				onClearActiveLog,
-				onSetActiveLog,
-				table,
-				tableViewProps.fontSize,
-			],
-		);
-		const tableHeader = useCallback(() => {
-			const flatHeaders = table
-				.getFlatHeaders()
-				.filter((header) => !header.isPlaceholder);
-			const orderedColumnsById = new Map(
-				orderedColumns.map((column) => [getColumnId(column), column] as const),
-			);
-
-			return (
-				<DndContext
-					sensors={sensors}
-					collisionDetection={pointerWithin}
-					onDragEnd={handleDragEnd}
-					autoScroll={COLUMN_DND_AUTO_SCROLL}
-				>
-					<SortableContext
-						items={orderedColumnIds}
-						strategy={horizontalListSortingStrategy}
-					>
-						<tr>
-							{flatHeaders.map((header) => {
-								const column = orderedColumnsById.get(header.id);
-								if (!column) {
-									return null;
-								}
-
-								return (
-									<TanStackHeaderRow
-										key={header.id}
-										column={column}
-										header={header}
-										isDarkMode={isDarkMode}
-										fontSize={tableViewProps.fontSize}
-										hasSingleColumn={hasSingleColumn}
-										onRemoveColumn={onRemoveColumn}
-										canRemoveColumn={
-											!isAtMinimumRemovableColumns &&
-											removableColumnKeySet.has(String(column.key ?? ''))
-										}
-									/>
-								);
-							})}
-							<TableHeaderCellStyled
-								aria-hidden
-								$isDragColumn={false}
-								$isDarkMode={isDarkMode}
-								fontSize={tableViewProps.fontSize}
-								className="logs-table-filler-header"
-							/>
-							{isLogsExplorerPage && (
-								<TableHeaderCellStyled
-									aria-hidden
-									$isDragColumn={false}
-									$isDarkMode={isDarkMode}
-									fontSize={tableViewProps.fontSize}
-									className="logs-table-actions-header"
-								/>
-							)}
-						</tr>
-					</SortableContext>
-				</DndContext>
-			);
-		}, [
-			handleDragEnd,
-			hasSingleColumn,
-			isDarkMode,
-			orderedColumnIds,
-			orderedColumns,
-			onRemoveColumn,
-			isAtMinimumRemovableColumns,
-			removableColumnKeySet,
-			sensors,
-			table,
-			tableViewProps.fontSize,
-			isLogsExplorerPage,
-		]);
-
-		const handleEndReached = useCallback(
-			(index: number): void => {
-				if (!infitiyTableProps?.onEndReached) {
-					return;
-				}
-
-				setLoadMoreState({
-					active: true,
-					seenFetching: Boolean(isFetching),
-					startCount: tableRows.length,
-				});
-				infitiyTableProps.onEndReached(index);
-			},
-			[infitiyTableProps, isFetching, tableRows.length],
-		);
-
-		if (isLoading) {
-			return <Spinner height="35px" tip="Getting Logs" />;
-		}
-
-		return (
-			<div className="tanstack-table-view-wrapper">
-				<TableVirtuoso
-					className="logs-table-virtuoso-scroll"
-					ref={virtuosoRef}
-					style={getInfinityDefaultStyles(tableViewProps.fontSize)}
-					data={tableData}
-					totalCount={tableRows.length}
-					initialTopMostItemIndex={
-						tableViewProps.activeLogIndex !== -1 ? tableViewProps.activeLogIndex : 0
-					}
-					fixedHeaderContent={tableHeader}
-					itemContent={itemContent}
-					components={{
-						Table: ({ style, children }): JSX.Element => (
-							<TanStackTableStyled style={style}>
-								<colgroup>
-									{orderedColumns.map((column) => {
-										const columnId = getColumnId(column);
-										const isFixedColumn =
-											column.key === 'expand' || column.key === 'state-indicator';
-										const minWidthPx = getColumnMinWidthPx(column, orderedColumns);
-										const persistedWidth = columnSizing[columnId];
-										const computedWidth = table.getColumn(columnId)?.getSize();
-										const effectiveWidth = persistedWidth ?? computedWidth;
-										if (isFixedColumn) {
-											return <col key={columnId} className="tanstack-fixed-col" />;
-										}
-										const widthPx =
-											effectiveWidth != null
-												? Math.max(effectiveWidth, minWidthPx)
-												: minWidthPx;
-										return (
-											<col
-												key={columnId}
-												style={{ width: `${widthPx}px`, minWidth: `${minWidthPx}px` }}
-											/>
-										);
-									})}
-									<col key="logs-table-filler-col" className="tanstack-filler-col" />
-									{isLogsExplorerPage && (
-										<col key="logs-table-actions-col" className="tanstack-actions-col" />
-									)}
-								</colgroup>
-								{children}
-							</TanStackTableStyled>
-						),
-						TableRow: customTableRow,
-					}}
-					{...(infitiyTableProps?.onEndReached
-						? { endReached: handleEndReached }
-						: {})}
-				/>
-				{loadMoreState.active && (
-					<div className="tanstack-load-more-container">
-						<Spinner height="20px" tip="Getting Logs" />
-					</div>
-				)}
-			</div>
-		);
-	},
-);
-
-export default memo(TanStackTableView);

frontend/src/container/LogsExplorerList/TanStackTableView/types.ts

@@ -1,31 +0,0 @@
-import { ColumnSizingState } from '@tanstack/react-table';
-import { ColumnTypeRender } from 'components/Logs/TableView/types';
-import { ILog } from 'types/api/logs/log';
-
-export type TableRecord = Record<string, unknown>;
-
-export type LogsTableColumnDef = {
-	key?: string | number;
-	title?: string;
-	render?: (
-		value: unknown,
-		record: TableRecord,
-		index: number,
-	) => ColumnTypeRender<Record<string, unknown>>;
-};
-
-export type OrderedColumn = LogsTableColumnDef & {
-	key: string | number;
-};
-
-export type TanStackTableRowData = {
-	log: TableRecord;
-	currentLog: ILog;
-	rowIndex: number;
-};
-
-export type PersistedColumnSizing = {
-	version: 1;
-	columnIdsSignature: string;
-	sizing: ColumnSizingState;
-};

frontend/src/container/LogsExplorerList/TanStackTableView/useColumnSizingPersistence.ts

@@ -1,113 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
-import { ColumnSizingState } from '@tanstack/react-table';
-import getFromLocalstorage from 'api/browser/localstorage/get';
-import setToLocalstorage from 'api/browser/localstorage/set';
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-import { OrderedColumn, PersistedColumnSizing } from './types';
-import { getColumnId } from './utils';
-
-const COLUMN_SIZING_PERSIST_DEBOUNCE_MS = 250;
-
-const readPersistedColumnSizing = (): ColumnSizingState => {
-	const rawSizing = getFromLocalstorage(LOCALSTORAGE.LOGS_LIST_COLUMN_SIZING);
-	if (!rawSizing) {
-		return {};
-	}
-
-	try {
-		const parsed = JSON.parse(rawSizing) as
-			| PersistedColumnSizing
-			| ColumnSizingState;
-		const sizing = ('sizing' in parsed
-			? parsed.sizing
-			: parsed) as ColumnSizingState;
-
-		return Object.entries(sizing).reduce<ColumnSizingState>(
-			(acc, [key, value]) => {
-				if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
-					return acc;
-				}
-				acc[key] = value;
-				return acc;
-			},
-			{},
-		);
-	} catch (error) {
-		console.error('Failed to parse persisted log column sizing', error);
-		return {};
-	}
-};
-
-type UseColumnSizingPersistenceResult = {
-	columnSizing: ColumnSizingState;
-	setColumnSizing: Dispatch<SetStateAction<ColumnSizingState>>;
-};
-
-export const useColumnSizingPersistence = (
-	orderedColumns: OrderedColumn[],
-): UseColumnSizingPersistenceResult => {
-	const [columnSizing, setColumnSizing] = useState<ColumnSizingState>(() =>
-		readPersistedColumnSizing(),
-	);
-	const orderedColumnIds = useMemo(
-		() => orderedColumns.map((column) => getColumnId(column)),
-		[orderedColumns],
-	);
-	const orderedColumnIdsSignature = useMemo(() => orderedColumnIds.join('|'), [
-		orderedColumnIds,
-	]);
-
-	useEffect(() => {
-		if (orderedColumnIds.length === 0) {
-			return;
-		}
-
-		const validColumnIds = new Set(orderedColumnIds);
-		const nonResizableColumnIds = new Set(
-			orderedColumns
-				.filter(
-					(column) => column.key === 'expand' || column.key === 'state-indicator',
-				)
-				.map((column) => getColumnId(column)),
-		);
-
-		setColumnSizing((previousSizing) => {
-			const nextSizing = Object.entries(previousSizing).reduce<ColumnSizingState>(
-				(acc, [columnId, size]) => {
-					if (!validColumnIds.has(columnId) || nonResizableColumnIds.has(columnId)) {
-						return acc;
-					}
-					acc[columnId] = size;
-					return acc;
-				},
-				{},
-			);
-			const hasChanged =
-				Object.keys(nextSizing).length !== Object.keys(previousSizing).length ||
-				Object.entries(nextSizing).some(
-					([columnId, size]) => previousSizing[columnId] !== size,
-				);
-
-			return hasChanged ? nextSizing : previousSizing;
-		});
-	}, [orderedColumnIds, orderedColumns]);
-
-	useEffect(() => {
-		const timeoutId = window.setTimeout(() => {
-			const persistedSizing: PersistedColumnSizing = {
-				version: 1,
-				columnIdsSignature: orderedColumnIdsSignature,
-				sizing: columnSizing,
-			};
-			setToLocalstorage(
-				LOCALSTORAGE.LOGS_LIST_COLUMN_SIZING,
-				JSON.stringify(persistedSizing),
-			);
-		}, COLUMN_SIZING_PERSIST_DEBOUNCE_MS);
-
-		return (): void => window.clearTimeout(timeoutId);
-	}, [columnSizing, orderedColumnIdsSignature]);
-
-	return { columnSizing, setColumnSizing };
-};

frontend/src/container/LogsExplorerList/TanStackTableView/useOrderedColumns.ts

@@ -1,146 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-	DragEndEvent,
-	PointerSensor,
-	useSensor,
-	useSensors,
-} from '@dnd-kit/core';
-import { arrayMove } from '@dnd-kit/sortable';
-import { getDraggedColumns } from 'hooks/useDragColumns/utils';
-
-import { OrderedColumn, TableRecord } from './types';
-import { getColumnId } from './utils';
-
-type UseOrderedColumnsProps = {
-	columns: unknown[];
-	draggedColumns: unknown[];
-	onColumnOrderChange: (columns: unknown[]) => void;
-};
-
-type UseOrderedColumnsResult = {
-	orderedColumns: OrderedColumn[];
-	orderedColumnIds: string[];
-	hasSingleColumn: boolean;
-	handleDragEnd: (event: DragEndEvent) => void;
-	sensors: ReturnType<typeof useSensors>;
-};
-
-export const useOrderedColumns = ({
-	columns,
-	draggedColumns,
-	onColumnOrderChange,
-}: UseOrderedColumnsProps): UseOrderedColumnsResult => {
-	const baseColumns = useMemo<OrderedColumn[]>(
-		() =>
-			getDraggedColumns<TableRecord>(
-				columns as never[],
-				draggedColumns as never[],
-			).filter(
-				(column): column is OrderedColumn =>
-					typeof column.key === 'string' || typeof column.key === 'number',
-			),
-		[columns, draggedColumns],
-	);
-
-	const [orderedColumns, setOrderedColumns] = useState<OrderedColumn[]>(
-		baseColumns,
-	);
-	const lastBaseOrderKeyRef = useRef<string | null>(null);
-	const sensors = useSensors(
-		useSensor(PointerSensor, {
-			activationConstraint: { distance: 4 },
-		}),
-	);
-
-	useEffect(() => {
-		const baseIds = baseColumns.map((column) => getColumnId(column));
-		const baseKey = baseIds.join('|');
-		const prevBaseKey = lastBaseOrderKeyRef.current;
-		const baseOrderChanged = prevBaseKey !== null && prevBaseKey !== baseKey;
-
-		lastBaseOrderKeyRef.current = baseKey;
-
-		setOrderedColumns((previousColumns) => {
-			const previousIds = previousColumns.map((column) => getColumnId(column));
-
-			// Only when `baseColumns` order from the parent actually changed (e.g. URL /
-			// localStorage hydration). If we synced whenever state ≠ base, we would reset
-			// user drags before `draggedColumns` catches up.
-			if (
-				baseOrderChanged &&
-				previousIds.length === baseIds.length &&
-				[...previousIds].sort().join('|') === [...baseIds].sort().join('|')
-			) {
-				return baseColumns;
-			}
-
-			const baseColumnsById = new Map(
-				baseColumns.map((column) => [getColumnId(column), column] as const),
-			);
-			const previousIdsSet = new Set(previousIds);
-			const orderedFromPrevious = previousColumns
-				.map((column) => baseColumnsById.get(getColumnId(column)))
-				.filter(Boolean) as OrderedColumn[];
-			const appendedNewColumns = baseColumns.filter(
-				(column) => !previousIdsSet.has(getColumnId(column)),
-			);
-			const nextColumns = [...orderedFromPrevious, ...appendedNewColumns];
-
-			if (nextColumns.length !== previousColumns.length) {
-				return nextColumns;
-			}
-
-			const hasReferenceChange = nextColumns.some(
-				(column, index) => column !== previousColumns[index],
-			);
-
-			return hasReferenceChange ? nextColumns : previousColumns;
-		});
-	}, [baseColumns]);
-
-	const handleDragEnd = useCallback(
-		(event: DragEndEvent): void => {
-			const { active, over } = event;
-			if (!over || active.id === over.id) {
-				return;
-			}
-
-			setOrderedColumns((previousColumns) => {
-				const oldIndex = previousColumns.findIndex(
-					(column) => getColumnId(column) === String(active.id),
-				);
-				const newIndex = previousColumns.findIndex(
-					(column) => getColumnId(column) === String(over.id),
-				);
-				if (oldIndex === -1 || newIndex === -1) {
-					return previousColumns;
-				}
-
-				const nextColumns = arrayMove(previousColumns, oldIndex, newIndex);
-				onColumnOrderChange(nextColumns as unknown[]);
-
-				return nextColumns;
-			});
-		},
-		[onColumnOrderChange],
-	);
-
-	const orderedColumnIds = useMemo(
-		() => orderedColumns.map((column) => getColumnId(column)),
-		[orderedColumns],
-	);
-	const hasSingleColumn = useMemo(
-		() =>
-			orderedColumns.filter((column) => column.key !== 'state-indicator')
-				.length === 1,
-		[orderedColumns],
-	);
-
-	return {
-		orderedColumns,
-		orderedColumnIds,
-		hasSingleColumn,
-		handleDragEnd,
-		sensors,
-	};
-};

frontend/src/container/LogsExplorerList/TanStackTableView/utils.ts

@@ -1,61 +0,0 @@
-import { cloneElement, isValidElement, ReactElement } from 'react';
-import { ColumnTypeRender } from 'components/Logs/TableView/types';
-
-import { OrderedColumn } from './types';
-
-export const getColumnId = (column: OrderedColumn): string =>
-	String(column.key);
-
-/** Browser default root font size; TanStack column sizing uses px. */
-const REM_PX = 16;
-const MIN_WIDTH_OTHER_REM = 12;
-const MIN_WIDTH_BODY_REM = 40;
-
-/** When total column count is below this, body column min width is doubled (more horizontal space for few columns). */
-export const FEW_COLUMNS_BODY_MIN_WIDTH_THRESHOLD = 4;
-
-/**
- * Minimum width (px) for TanStack column defs + colgroup.
- * Design: state/expand 32px; body min 40rem (doubled when fewer than
- * {@link FEW_COLUMNS_BODY_MIN_WIDTH_THRESHOLD} total columns); other columns use rem→px (16px root).
- */
-export const getColumnMinWidthPx = (
-	column: OrderedColumn,
-	orderedColumns?: OrderedColumn[],
-): number => {
-	const key = String(column.key);
-	if (key === 'state-indicator' || key === 'expand') {
-		return 32;
-	}
-	if (key === 'body') {
-		const base = MIN_WIDTH_BODY_REM * REM_PX;
-		const fewColumns =
-			orderedColumns != null &&
-			orderedColumns.length < FEW_COLUMNS_BODY_MIN_WIDTH_THRESHOLD;
-		return fewColumns ? base * 1.5 : base;
-	}
-	return MIN_WIDTH_OTHER_REM * REM_PX;
-};
-
-export const resolveColumnTypeRender = (
-	rendered: ColumnTypeRender<Record<string, unknown>>,
-): ReactElement | string | number | null => {
-	if (
-		rendered &&
-		typeof rendered === 'object' &&
-		'children' in rendered &&
-		isValidElement(rendered.children)
-	) {
-		const { children, props } = rendered as {
-			children: ReactElement;
-			props?: Record<string, unknown>;
-		};
-		return cloneElement(children, props || {});
-	}
-	if (rendered && typeof rendered === 'object' && isValidElement(rendered)) {
-		return rendered;
-	}
-	return typeof rendered === 'string' || typeof rendered === 'number'
-		? rendered
-		: null;
-};

frontend/src/container/LogsExplorerList/index.tsx

@@ -25,9 +25,9 @@ import { ILog } from 'types/api/logs/log';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 import NoLogs from '../NoLogs/NoLogs';
+import InfinityTableView from './InfinityTableView';
 import { LogsExplorerListProps } from './LogsExplorerList.interfaces';
 import { InfinityWrapperStyled } from './styles';
-import TanStackTableView from './TanStackTableView';
 import {
 	convertKeysToColumnFields,
 	getEmptyLogsListConfig,
@@ -61,7 +61,7 @@ function LogsExplorerList({
 		handleCloseLogDetail,
 	} = useLogDetailHandlers();
 
-	const { options, config } = useOptionsMenu({
+	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator:
@@ -83,10 +83,6 @@ function LogsExplorerList({
 		() => convertKeysToColumnFields(options.selectColumns),
 		[options],
 	);
-	const removableColumnKeys = useMemo(
-		() => options.selectColumns.map((column) => String(column.name)),
-		[options.selectColumns],
-	);
 
 	const handleScrollToLog = useScrollToLog({
 		logs,
@@ -159,10 +155,9 @@ function LogsExplorerList({
 
 		if (options.format === 'table') {
 			return (
-				<TanStackTableView
+				<InfinityTableView
 					ref={ref}
 					isLoading={isLoading}
-					isFetching={isFetching}
 					tableViewProps={{
 						logs,
 						fields: selectedFields,
@@ -177,8 +172,6 @@ function LogsExplorerList({
 					onSetActiveLog={handleSetActiveLog}
 					onClearActiveLog={handleCloseLogDetail}
 					activeLog={activeLog}
-					onRemoveColumn={config.addColumn?.onRemove}
-					removableColumnKeys={removableColumnKeys}
 				/>
 			);
 		}
@@ -223,14 +216,11 @@ function LogsExplorerList({
 		logs,
 		onEndReached,
 		getItemContent,
-		isFetching,
 		selectedFields,
 		handleChangeSelectedView,
 		handleSetActiveLog,
 		handleCloseLogDetail,
 		activeLog,
-		config.addColumn?.onRemove,
-		removableColumnKeys,
 	]);
 
 	const isTraceToLogsNavigation = useMemo(() => {

frontend/src/container/LogsExplorerList/logsTableVirtuosoScrollbar.scss

@@ -1,38 +0,0 @@
-.logs-table-virtuoso-scroll {
-	scrollbar-width: thin;
-	scrollbar-color: var(--bg-slate-300) transparent;
-
-	&::-webkit-scrollbar {
-		width: 4px;
-		height: 4px;
-	}
-
-	&::-webkit-scrollbar-corner {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--bg-slate-300);
-		border-radius: 9999px;
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: var(--bg-slate-200);
-	}
-}
-
-.lightMode .logs-table-virtuoso-scroll {
-	scrollbar-color: var(--bg-vanilla-300) transparent;
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--bg-vanilla-300);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: var(--bg-vanilla-100);
-	}
-}

frontend/src/container/LogsExplorerList/styles.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const InfinityWrapperStyled = styled.div`
 	flex: 1;
+	height: 40rem !important;
 	display: flex;
 	height: 100%;
-	min-height: 0;
 `;

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -1,7 +1,6 @@
 .logs-explorer-views-container {
 	margin-bottom: 24px;
 	flex: 1;
-	min-height: 0;
 	display: flex;
 	flex-direction: column;
 
@@ -10,7 +9,6 @@
 		display: flex;
 		flex-direction: column;
 		flex: 1;
-		min-height: 0;
 		padding-bottom: 10px;
 
 		.views-tabs-container {
@@ -197,7 +195,6 @@
 
 		.logs-explorer-views-type-content {
 			flex: 1;
-			min-height: 0;
 			display: flex;
 			flex-direction: column;
 
@@ -213,32 +210,12 @@
 				}
 			}
 
-			.table-view-container {
-				flex: 1;
-				min-height: 0;
-				overflow-y: visible;
-			}
-
 			.time-series-view-container {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				min-height: 0;
-				overflow-y: visible;
-
 				.time-series-view-container-header {
 					display: flex;
 					justify-content: flex-start;
 					align-items: center;
 					padding: 12px;
-					flex-shrink: 0;
-				}
-
-				.time-series-view {
-					flex-shrink: 0;
-					height: 65vh;
-					min-height: 450px;
-					padding-bottom: 140px;
 				}
 			}
 		}

frontend/src/container/LogsExplorerViews/index.tsx

@@ -499,18 +499,16 @@ function LogsExplorerViewsContainer({
 						</div>
 					)}
 					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
-						<div className="table-view-container">
-							<LogsExplorerTable
-								data={
-									(data?.payload?.data?.newResult?.data?.result ||
-										data?.payload?.data?.result ||
-										[]) as QueryDataV3[]
-								}
-								isLoading={isLoading || isFetching}
-								isError={isError}
-								error={error as APIError}
-							/>
-						</div>
+						<LogsExplorerTable
+							data={
+								(data?.payload?.data?.newResult?.data?.result ||
+									data?.payload?.data?.result ||
+									[]) as QueryDataV3[]
+							}
+							isLoading={isLoading || isFetching}
+							isError={isError}
+							error={error as APIError}
+						/>
 					)}
 				</div>
 			</div>

frontend/src/pages/LogsExplorer/LogsExplorer.styles.scss

@@ -1,9 +1,6 @@
 .logs-module-page {
 	display: flex;
 	height: 100%;
-	min-height: 0;
-	overflow: hidden;
-
 	.log-quick-filter-left-section {
 		width: 0%;
 		flex-shrink: 0;
@@ -13,19 +10,13 @@
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		min-height: 0;
-
 		.log-explorer-query-container {
 			display: flex;
 			flex-direction: column;
 			flex: 1;
-			min-height: 0;
-			overflow-y: auto;
-			overflow-x: hidden;
 
 			.logs-explorer-views {
 				flex: 1;
-				min-height: 0;
 				display: flex;
 				flex-direction: column;
 			}
@@ -35,18 +26,6 @@
 	&.filter-visible {
 		.log-quick-filter-left-section {
 			width: 260px;
-			height: 100%;
-			overflow: visible;
-			min-height: 0;
-			position: relative;
-			z-index: 2;
-			display: flex;
-			flex-direction: column;
-
-			.quick-filters-container {
-				flex: 1;
-				min-height: 0;
-			}
 		}
 
 		.log-module-right-section {

frontend/src/pages/LogsModulePage/LogsModulePage.styles.scss

@@ -1,14 +1,10 @@
 .logs-module-container {
 	flex: 1;
-	min-height: 0;
 	display: flex;
 	flex-direction: column;
 
 	.ant-tabs {
 		flex: 1;
-		min-height: 0;
-		display: flex;
-		flex-direction: column;
 	}
 
 	.ant-tabs-nav {
@@ -22,17 +18,14 @@
 
 	.ant-tabs-content-holder {
 		display: flex;
-		min-height: 0;
 
 		.ant-tabs-content {
 			flex: 1;
-			min-height: 0;
 			display: flex;
 			flex-direction: column;
 
 			.ant-tabs-tabpane {
 				flex: 1;
-				min-height: 0;
 				display: flex;
 				flex-direction: column;
 			}

frontend/yarn.lock

@@ -6017,19 +6017,26 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
-"@tanstack/react-table@8.21.3", "@tanstack/react-table@^8.21.3":
+"@tanstack/react-table@8.20.6":
+  version "8.20.6"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.20.6.tgz#a1f3103327aa59aa621931f4087a7604a21054d0"
+  integrity sha512-w0jluT718MrOKthRcr2xsjqzx+oEM7B7s/XXyfs19ll++hlId3fjTm+B2zrR3ijpANpkzBAr15j1XGVOMxpggQ==
+  dependencies:
+    "@tanstack/table-core" "8.20.5"
+
+"@tanstack/react-table@^8.21.3":
   version "8.21.3"
   resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.21.3.tgz#2c38c747a5731c1a07174fda764b9c2b1fb5e91b"
   integrity sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==
   dependencies:
     "@tanstack/table-core" "8.21.3"
 
-"@tanstack/react-virtual@3.13.22":
-  version "3.13.22"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.13.22.tgz#9a5529dee4010f33272ae3b3e3728dee317b3b42"
-  integrity sha512-EaOrBBJLi3M0bTMQRjGkxLXRw7Gizwntoy5E2Q2UnSbML7Mo2a1P/Hfkw5tw9FLzK62bj34Jl6VNbQfRV6eJcA==
+"@tanstack/react-virtual@3.11.2":
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.11.2.tgz#d6b9bd999c181f0a2edce270c87a2febead04322"
+  integrity sha512-OuFzMXPF4+xZgx8UzJha0AieuMihhhaWG0tCqpp6tDzlFwOmNBPYMuLOtMJ1Tr4pXLHmgjcWhG6RlknY2oNTdQ==
   dependencies:
-    "@tanstack/virtual-core" "3.13.22"
+    "@tanstack/virtual-core" "3.11.2"
 
 "@tanstack/react-virtual@^3.13.9":
   version "3.13.12"
@@ -6038,21 +6045,26 @@
   dependencies:
     "@tanstack/virtual-core" "3.13.12"
 
+"@tanstack/table-core@8.20.5":
+  version "8.20.5"
+  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.20.5.tgz#3974f0b090bed11243d4107283824167a395cf1d"
+  integrity sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==
+
 "@tanstack/table-core@8.21.3":
   version "8.21.3"
   resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.21.3.tgz#2977727d8fc8dfa079112d9f4d4c019110f1732c"
   integrity sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==
 
+"@tanstack/virtual-core@3.11.2":
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.11.2.tgz#00409e743ac4eea9afe5b7708594d5fcebb00212"
+  integrity sha512-vTtpNt7mKCiZ1pwU9hfKPhpdVO2sVzFQsxoVBGtOSHxlrRRzYr8iQ2TlwbAcRYCcEiZ9ECAM8kBzH0v2+VzfKw==
+
 "@tanstack/virtual-core@3.13.12":
   version "3.13.12"
   resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz#1dff176df9cc8f93c78c5e46bcea11079b397578"
   integrity sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==
 
-"@tanstack/virtual-core@3.13.22":
-  version "3.13.22"
-  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.13.22.tgz#660a2cd048510125a4da898e5a659d53166f51af"
-  integrity sha512-isuUGKsc5TAPDoHSbWTbl1SCil54zOS2MiWz/9GCWHPUQOvNTQx8qJEWC7UWR0lShhbK0Lmkcf0SZYxvch7G3g==
-
 "@testing-library/dom@^8.5.0":
   version "8.20.0"
   resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz"

pkg/prometheus/config.go

@@ -3,6 +3,7 @@ package prometheus
 import (
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 )
 
@@ -20,6 +21,9 @@ type Config struct {
 	//
 	// If not set, the prometheus default is used (currently 5m).
 	LookbackDelta time.Duration `mapstructure:"lookback_delta"`
+
+	// Timeout is the maximum time a query is allowed to run before being aborted.
+	Timeout time.Duration `mapstructure:"timeout"`
 }
 
 func NewConfigFactory() factory.ConfigFactory {
@@ -33,10 +37,14 @@ func newConfig() factory.Config {
 			Path:          "",
 			MaxConcurrent: 20,
 		},
+		Timeout: 2 * time.Minute,
 	}
 }
 
 func (c Config) Validate() error {
+	if c.Timeout <= 0 {
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "prometheus::timeout must be greater than 0")
+	}
 	return nil
 }
 

pkg/prometheus/constants.go

@@ -1,3 +0,0 @@
-package prometheus
-
-const FingerprintAsPromLabelName = "fingerprint"

pkg/prometheus/engine.go

@@ -2,7 +2,6 @@ package prometheus
 
 import (
 	"log/slog"
-	"time"
 
 	"github.com/prometheus/prometheus/promql"
 )
@@ -21,7 +20,7 @@ func NewEngine(logger *slog.Logger, cfg Config) *Engine {
 		Logger:             logger,
 		Reg:                nil,
 		MaxSamples:         5_0000_000,
-		Timeout:            2 * time.Minute,
+		Timeout:            cfg.Timeout,
 		ActiveQueryTracker: activeQueryTracker,
 		LookbackDelta:      cfg.LookbackDelta,
 	})

pkg/prometheus/label.go

@@ -6,6 +6,8 @@ import (
 	"github.com/prometheus/prometheus/promql"
 )
 
+const FingerprintAsPromLabelName string = "fingerprint"
+
 func RemoveExtraLabels(res *promql.Result, labelsToRemove ...string) error {
 	if len(labelsToRemove) == 0 || res == nil {
 		return nil

pkg/querier/promql_query.go

@@ -36,6 +36,28 @@ var unquotedDottedNamePattern = regexp.MustCompile(`(?:^|[{,(\s])([a-zA-Z_][a-zA
 // This is a common mistake when migrating to UTF-8 syntax.
 var quotedMetricOutsideBracesPattern = regexp.MustCompile(`"([^"]+)"\s*\{`)
 
+// tryEnhancePromQLExecError attempts to convert a PromQL execution error into
+// a properly typed error. Returns nil if the error is not a recognized execution error.
+func tryEnhancePromQLExecError(execErr error) error {
+	var eqc promql.ErrQueryCanceled
+	var eqt promql.ErrQueryTimeout
+	var es promql.ErrStorage
+	switch {
+	case errors.As(execErr, &eqc):
+		return errors.Newf(errors.TypeCanceled, errors.CodeCanceled, "query canceled").WithAdditional(eqc.Error())
+	case errors.As(execErr, &eqt):
+		return errors.Newf(errors.TypeTimeout, errors.CodeTimeout, "query timed out").WithAdditional(eqt.Error())
+	case errors.Is(execErr, context.DeadlineExceeded):
+		return errors.Newf(errors.TypeTimeout, errors.CodeTimeout, "query timed out")
+	case errors.Is(execErr, context.Canceled):
+		return errors.Newf(errors.TypeCanceled, errors.CodeCanceled, "query canceled")
+	case errors.As(execErr, &es):
+		return errors.Newf(errors.TypeInternal, errors.CodeInternal, "query execution error: %v", execErr)
+	default:
+		return nil
+	}
+}
+
 // enhancePromQLError adds helpful context to PromQL parse errors,
 // particularly for UTF-8 syntax migration issues where metric and label
 // names containing dots need to be quoted.
@@ -213,27 +235,20 @@ func (q *promqlQuery) Execute(ctx context.Context) (*qbv5.Result, error) {
 		time.Unix(0, end),
 		q.query.Step.Duration,
 	)
-
 	if err != nil {
+		// NewRangeQuery can fail with execution errors (e.g. context deadline exceeded)
+		// during the query queue/scheduling stage, not just parse errors.
+		if err := tryEnhancePromQLExecError(err); err != nil {
+			return nil, err
+		}
+
 		return nil, enhancePromQLError(query, err)
 	}
 
 	res := qry.Exec(ctx)
 	if res.Err != nil {
-		var eqc promql.ErrQueryCanceled
-		var eqt promql.ErrQueryTimeout
-		var es promql.ErrStorage
-		switch {
-		case errors.As(res.Err, &eqc):
-			return nil, errors.Newf(errors.TypeCanceled, errors.CodeCanceled, "query canceled")
-		case errors.As(res.Err, &eqt):
-			return nil, errors.Newf(errors.TypeTimeout, errors.CodeTimeout, "query timeout")
-		case errors.As(res.Err, &es):
-			return nil, errors.Newf(errors.TypeInternal, errors.CodeInternal, "query execution error: %v", res.Err)
-		}
-
-		if errors.Is(res.Err, context.Canceled) {
-			return nil, errors.Newf(errors.TypeCanceled, errors.CodeCanceled, "query canceled")
+		if err := tryEnhancePromQLExecError(res.Err); err != nil {
+			return nil, err
 		}
 
 		return nil, errors.Newf(errors.TypeInternal, errors.CodeInternal, "query execution error: %v", res.Err)

pkg/query-service/app/querier/querier_test.go

@@ -1407,7 +1407,7 @@ func Test_querier_Traces_runWindowBasedListQueryDesc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,
@@ -1633,7 +1633,7 @@ func Test_querier_Traces_runWindowBasedListQueryAsc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,
@@ -1934,7 +1934,7 @@ func Test_querier_Logs_runWindowBasedListQueryDesc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,
@@ -2162,7 +2162,7 @@ func Test_querier_Logs_runWindowBasedListQueryAsc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,

pkg/query-service/app/querier/v2/querier_test.go

@@ -1459,7 +1459,7 @@ func Test_querier_Traces_runWindowBasedListQueryDesc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,
@@ -1685,7 +1685,7 @@ func Test_querier_Traces_runWindowBasedListQueryAsc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,
@@ -1985,7 +1985,7 @@ func Test_querier_Logs_runWindowBasedListQueryDesc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,
@@ -2213,7 +2213,7 @@ func Test_querier_Logs_runWindowBasedListQueryAsc(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Duration(time.Second),
 				nil,

pkg/query-service/rules/base_rule_test.go

@@ -698,7 +698,7 @@ func TestBaseRule_FilterNewSeries(t *testing.T) {
 				slog.Default(),
 				nil,
 				telemetryStore,
-				prometheustest.New(context.Background(), settings, prometheus.Config{}, telemetryStore),
+				prometheustest.New(context.Background(), settings, prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore),
 				"",
 				time.Second,
 				nil,

pkg/query-service/rules/manager_test.go

@@ -253,7 +253,7 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 						WillReturnRows(samplesRows)
 
 					// Create Prometheus provider for this test
-					promProvider = prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, store)
+					promProvider = prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, store)
 				},
 				ManagerOptionsHook: func(opts *ManagerOptions) {
 					// Set Prometheus provider for PromQL queries

pkg/query-service/rules/managertestfactory.go

@@ -99,7 +99,7 @@ func NewTestManager(t *testing.T, testOpts *TestManagerOptions) *Manager {
 
 	options := clickhouseReader.NewOptions("", "", "archiveNamespace")
 	providerSettings := instrumentationtest.New().ToProviderSettings()
-	prometheus := prometheustest.New(context.Background(), providerSettings, prometheus.Config{}, telemetryStore)
+	prometheus := prometheustest.New(context.Background(), providerSettings, prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore)
 	reader := clickhouseReader.NewReader(
 		instrumentationtest.New().Logger(),
 		nil,

pkg/query-service/rules/prom_rule_test.go

@@ -940,7 +940,7 @@ func TestPromRuleUnitCombinations(t *testing.T) {
 			).
 			WillReturnRows(samplesRows)
 
-		promProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore)
+		promProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore)
 
 		postableRule.RuleCondition.CompareOp = ruletypes.CompareOp(c.compareOp)
 		postableRule.RuleCondition.MatchType = ruletypes.MatchType(c.matchType)
@@ -1061,7 +1061,7 @@ func _Enable_this_after_9146_issue_fix_is_merged_TestPromRuleNoData(t *testing.T
 			WithArgs("test_metric", "__name__", "test_metric").
 			WillReturnRows(fingerprintRows)
 
-		promProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore)
+		promProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore)
 
 		var target float64 = 0
 		postableRule.RuleCondition.Thresholds = &ruletypes.RuleThresholdData{
@@ -1281,7 +1281,7 @@ func TestMultipleThresholdPromRule(t *testing.T) {
 			).
 			WillReturnRows(samplesRows)
 
-		promProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore)
+		promProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore)
 
 		postableRule.RuleCondition.CompareOp = ruletypes.CompareOp(c.compareOp)
 		postableRule.RuleCondition.MatchType = ruletypes.MatchType(c.matchType)
@@ -1441,7 +1441,7 @@ func TestPromRule_NoData(t *testing.T) {
 			promProvider := prometheustest.New(
 				context.Background(),
 				instrumentationtest.New().ToProviderSettings(),
-				prometheus.Config{},
+				prometheus.Config{Timeout: 2 * time.Minute},
 				telemetryStore,
 			)
 			defer func() {
@@ -1590,7 +1590,7 @@ func TestPromRule_NoData_AbsentFor(t *testing.T) {
 			promProvider := prometheustest.New(
 				context.Background(),
 				instrumentationtest.New().ToProviderSettings(),
-				prometheus.Config{},
+				prometheus.Config{Timeout: 2 * time.Minute},
 				telemetryStore,
 			)
 			defer func() {
@@ -1748,7 +1748,7 @@ func TestPromRuleEval_RequireMinPoints(t *testing.T) {
 			promProvider := prometheustest.New(
 				context.Background(),
 				instrumentationtest.New().ToProviderSettings(),
-				prometheus.Config{LookbackDelta: lookBackDelta},
+				prometheus.Config{Timeout: 2 * time.Minute, LookbackDelta: lookBackDelta},
 				telemetryStore,
 			)
 			defer func() {

pkg/query-service/rules/threshold_rule_test.go

@@ -779,7 +779,7 @@ func TestThresholdRuleUnitCombinations(t *testing.T) {
 			},
 		)
 		require.NoError(t, err)
-		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore), "", time.Duration(time.Second), nil, readerCache, options)
+		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore), "", time.Duration(time.Second), nil, readerCache, options)
 		rule, err := NewThresholdRule("69", valuer.GenerateUUID(), &postableRule, reader, nil, logger)
 		rule.TemporalityMap = map[string]map[v3.Temporality]bool{
 			"signoz_calls_total": {
@@ -894,7 +894,7 @@ func TestThresholdRuleNoData(t *testing.T) {
 		)
 		assert.NoError(t, err)
 		options := clickhouseReader.NewOptions("", "", "archiveNamespace")
-		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore), "", time.Duration(time.Second), nil, readerCache, options)
+		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore), "", time.Duration(time.Second), nil, readerCache, options)
 
 		rule, err := NewThresholdRule("69", valuer.GenerateUUID(), &postableRule, reader, nil, logger)
 		rule.TemporalityMap = map[string]map[v3.Temporality]bool{
@@ -1014,7 +1014,7 @@ func TestThresholdRuleTracesLink(t *testing.T) {
 		}
 
 		options := clickhouseReader.NewOptions("", "", "archiveNamespace")
-		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore), "", time.Duration(time.Second), nil, nil, options)
+		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore), "", time.Duration(time.Second), nil, nil, options)
 
 		rule, err := NewThresholdRule("69", valuer.GenerateUUID(), &postableRule, reader, nil, logger)
 		rule.TemporalityMap = map[string]map[v3.Temporality]bool{
@@ -1151,7 +1151,7 @@ func TestThresholdRuleLogsLink(t *testing.T) {
 		}
 
 		options := clickhouseReader.NewOptions("", "", "archiveNamespace")
-		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore), "", time.Duration(time.Second), nil, nil, options)
+		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore), "", time.Duration(time.Second), nil, nil, options)
 
 		rule, err := NewThresholdRule("69", valuer.GenerateUUID(), &postableRule, reader, nil, logger)
 		rule.TemporalityMap = map[string]map[v3.Temporality]bool{
@@ -1418,7 +1418,7 @@ func TestMultipleThresholdRule(t *testing.T) {
 			},
 		)
 		require.NoError(t, err)
-		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore), "", time.Second, nil, readerCache, options)
+		reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore), "", time.Second, nil, readerCache, options)
 		rule, err := NewThresholdRule("69", valuer.GenerateUUID(), &postableRule, reader, nil, logger)
 		rule.TemporalityMap = map[string]map[v3.Temporality]bool{
 			"signoz_calls_total": {
@@ -2220,7 +2220,7 @@ func TestThresholdEval_RequireMinPoints(t *testing.T) {
 			)
 			require.NoError(t, err)
 
-			prometheusProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, telemetryStore)
+			prometheusProvider := prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, telemetryStore)
 			reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, prometheusProvider, "", time.Second, nil, readerCache, options)
 
 			rule, err := NewThresholdRule("some-id", valuer.GenerateUUID(), &postableRule, reader, nil, logger)