fix(row): missing active styles

Co-authored-by: primus-bot[bot] <171087277+primus-bot[bot]@users.noreply.github.com>
Co-authored-by: Priyanshu Shrivastava <priyanshu@signoz.io>

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.117.1
+    image: signoz/signoz:v0.118.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.117.1
+    image: signoz/signoz:v0.118.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.117.1}
+    image: signoz/signoz:${VERSION:-v0.118.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.117.1}
+    image: signoz/signoz:${VERSION:-v0.118.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

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

@@ -28,17 +28,6 @@
 	}
 }
 
-// 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);

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

@@ -1,6 +1,4 @@
 .log-state-indicator {
-	padding-left: 8px;
-
 	.line {
 		margin: 0 8px;
 		min-height: 24px;

frontend/src/components/Logs/LogStateIndicator/getRowBackgroundColor.ts

@@ -0,0 +1,43 @@
+import { Color } from '@signozhq/design-tokens';
+
+import { LogType } from './LogStateIndicator';
+
+export function getRowBackgroundColor(
+	isDarkMode: boolean,
+	logType?: string,
+): string {
+	if (isDarkMode) {
+		switch (logType) {
+			case LogType.INFO:
+				return `${Color.BG_ROBIN_500}40`;
+			case LogType.WARN:
+				return `${Color.BG_AMBER_500}40`;
+			case LogType.ERROR:
+				return `${Color.BG_CHERRY_500}40`;
+			case LogType.TRACE:
+				return `${Color.BG_FOREST_400}40`;
+			case LogType.DEBUG:
+				return `${Color.BG_AQUA_500}40`;
+			case LogType.FATAL:
+				return `${Color.BG_SAKURA_500}40`;
+			default:
+				return `${Color.BG_ROBIN_500}40`;
+		}
+	}
+	switch (logType) {
+		case LogType.INFO:
+			return Color.BG_ROBIN_100;
+		case LogType.WARN:
+			return Color.BG_AMBER_100;
+		case LogType.ERROR:
+			return Color.BG_CHERRY_100;
+		case LogType.TRACE:
+			return Color.BG_FOREST_200;
+		case LogType.DEBUG:
+			return Color.BG_AQUA_100;
+		case LogType.FATAL:
+			return Color.BG_SAKURA_100;
+		default:
+			return Color.BG_VANILLA_300;
+	}
+}

frontend/src/components/Logs/TableView/useLogsTableColumns.module.scss

@@ -0,0 +1,12 @@
+.logBodyCell {
+	font-style: normal;
+	font-weight: 400;
+	letter-spacing: -0.07px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: var(--tanstack-plain-cell-font-size, 14px);
+	line-height: var(--tanstack-plain-cell-line-height, 18px);
+	line-clamp: var(--tanstack-plain-body-line-clamp, 1);
+	color: var(--l2-foreground);
+}

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

@@ -0,0 +1,117 @@
+import type { ReactElement } from 'react';
+import { useMemo } from 'react';
+import TanStackTable from 'components/TanStackTableView';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import { FontSize } from 'container/OptionsMenu/types';
+import { FlatLogData } from 'lib/logs/flatLogData';
+import { useTimezone } from 'providers/Timezone';
+import { IField } from 'types/api/logs/fields';
+import { ILog } from 'types/api/logs/log';
+
+import type { TableColumnDef } from '../../TanStackTableView/types';
+import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
+
+import styles from './useLogsTableColumns.module.scss';
+
+type UseLogsTableColumnsProps = {
+	fields: IField[];
+	linesPerRow: number;
+	fontSize: FontSize;
+	appendTo?: 'center' | 'end';
+};
+
+export function useLogsTableColumns({
+	fields,
+	fontSize,
+	appendTo = 'center',
+}: UseLogsTableColumnsProps): TableColumnDef<ILog>[] {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	return useMemo<TableColumnDef<ILog>[]>(() => {
+		const stateIndicatorCol: TableColumnDef<ILog> = {
+			id: 'state-indicator',
+			header: '',
+			pin: 'left',
+			enableMove: false,
+			enableResize: false,
+			enableRemove: false,
+			width: { fixed: 32 },
+			cell: ({ row }): ReactElement => (
+				<LogStateIndicator
+					fontSize={fontSize}
+					severityText={row.severity_text as string}
+					severityNumber={row.severity_number as number}
+				/>
+			),
+		};
+
+		const fieldColumns: TableColumnDef<ILog>[] = fields
+			.filter((f): boolean => !['id', 'body', 'timestamp'].includes(f.name))
+			.map(
+				(f): TableColumnDef<ILog> => ({
+					id: f.name,
+					header: f.name,
+					accessorFn: (log): unknown => FlatLogData(log)[f.name],
+					enableRemove: true,
+					width: { min: 192 },
+					cell: ({ value }): ReactElement => (
+						<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
+					),
+				}),
+			);
+
+		const timestampCol: TableColumnDef<ILog> | null = fields.some(
+			(f) => f.name === 'timestamp',
+		)
+			? {
+					id: 'timestamp',
+					header: 'Timestamp',
+					accessorFn: (log): unknown => log.timestamp,
+					width: { min: 200 },
+					cell: ({ value }): ReactElement => {
+						const ts = value as string | number;
+						const formatted =
+							typeof ts === 'string'
+								? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
+								: formatTimezoneAdjustedTimestamp(
+										ts / 1e6,
+										DATE_TIME_FORMATS.ISO_DATETIME_MS,
+								  );
+						return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
+					},
+			  }
+			: null;
+
+		const bodyCol: TableColumnDef<ILog> | null = fields.some(
+			(f) => f.name === 'body',
+		)
+			? {
+					id: 'body',
+					header: 'Body',
+					accessorFn: (log): string => log.body,
+					width: { min: 640 },
+					cell: ({ value, isActive }): ReactElement => (
+						<div
+							// eslint-disable-next-line react/no-danger
+							dangerouslySetInnerHTML={{
+								__html: getSanitizedLogBody(value as string, {
+									shouldEscapeHtml: true,
+								}),
+							}}
+							data-active={isActive}
+							className={styles.logBodyCell}
+						/>
+					),
+			  }
+			: null;
+
+		return [
+			stateIndicatorCol,
+			...(timestampCol ? [timestampCol] : []),
+			...(appendTo === 'center' ? fieldColumns : []),
+			...(bodyCol ? [bodyCol] : []),
+			...(appendTo === 'end' ? fieldColumns : []),
+		];
+	}, [fields, appendTo, fontSize, formatTimezoneAdjustedTimestamp]);
+}

frontend/src/components/TanStackTableView/RowHoverContext.tsx

@@ -0,0 +1,101 @@
+/* eslint-disable no-restricted-imports */
+import {
+	createContext,
+	ReactNode,
+	useCallback,
+	useContext,
+	useRef,
+} from 'react';
+/* eslint-enable no-restricted-imports */
+import { createStore, StoreApi, useStore } from 'zustand';
+
+const CLEAR_HOVER_DELAY_MS = 100;
+
+type RowHoverState = {
+	hoveredRowId: string | null;
+	clearTimeoutId: ReturnType<typeof setTimeout> | null;
+	setHoveredRowId: (id: string | null) => void;
+	scheduleClearHover: (rowId: string) => void;
+};
+
+const createRowHoverStore = (): StoreApi<RowHoverState> =>
+	createStore<RowHoverState>((set, get) => ({
+		hoveredRowId: null,
+		clearTimeoutId: null,
+		setHoveredRowId: (id: string | null): void => {
+			const { clearTimeoutId } = get();
+			if (clearTimeoutId) {
+				clearTimeout(clearTimeoutId);
+				set({ clearTimeoutId: null });
+			}
+			set({ hoveredRowId: id });
+		},
+		scheduleClearHover: (rowId: string): void => {
+			const { clearTimeoutId } = get();
+			if (clearTimeoutId) {
+				clearTimeout(clearTimeoutId);
+			}
+			const timeoutId = setTimeout(() => {
+				const current = get().hoveredRowId;
+				if (current === rowId) {
+					set({ hoveredRowId: null, clearTimeoutId: null });
+				}
+			}, CLEAR_HOVER_DELAY_MS);
+			set({ clearTimeoutId: timeoutId });
+		},
+	}));
+
+type RowHoverStore = StoreApi<RowHoverState>;
+
+const RowHoverContext = createContext<RowHoverStore | null>(null);
+
+export function RowHoverProvider({
+	children,
+}: {
+	children: ReactNode;
+}): JSX.Element {
+	const storeRef = useRef<RowHoverStore | null>(null);
+	if (!storeRef.current) {
+		storeRef.current = createRowHoverStore();
+	}
+	return (
+		<RowHoverContext.Provider value={storeRef.current}>
+			{children}
+		</RowHoverContext.Provider>
+	);
+}
+
+const defaultStore = createRowHoverStore();
+
+export const useIsRowHovered = (rowId: string): boolean => {
+	const store = useContext(RowHoverContext);
+	// Selector returns true only if this specific row is hovered
+	const isHovered = useStore(
+		store ?? defaultStore,
+		(s) => s.hoveredRowId === rowId,
+	);
+	return store ? isHovered : false;
+};
+
+export const useSetRowHovered = (rowId: string): (() => void) => {
+	const store = useContext(RowHoverContext);
+	return useCallback(() => {
+		if (store) {
+			const current = store.getState().hoveredRowId;
+			if (current !== rowId) {
+				store.getState().setHoveredRowId(rowId);
+			}
+		}
+	}, [store, rowId]);
+};
+
+export const useClearRowHovered = (rowId: string): (() => void) => {
+	const store = useContext(RowHoverContext);
+	return useCallback(() => {
+		if (store) {
+			store.getState().scheduleClearHover(rowId);
+		}
+	}, [store, rowId]);
+};
+
+export default RowHoverContext;

frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx

@@ -0,0 +1,111 @@
+import { ComponentProps, memo } from 'react';
+import { TableComponents } from 'react-virtuoso';
+import cx from 'classnames';
+
+import { useClearRowHovered, useSetRowHovered } from './RowHoverContext';
+import { FlatItem, TableRowContext } from './types';
+
+import tableStyles from './TanStackTable.module.scss';
+
+type VirtuosoTableRowProps<TData> = ComponentProps<
+	NonNullable<
+		TableComponents<FlatItem<TData>, TableRowContext<TData>>['TableRow']
+	>
+>;
+
+function TanStackCustomTableRow<TData>({
+	children,
+	item,
+	context,
+	...props
+}: VirtuosoTableRowProps<TData>): JSX.Element {
+	const rowId = item.row.id;
+	const rowData = item.row.original;
+
+	// Stable callbacks for hover state management
+	const setHovered = useSetRowHovered(rowId);
+	const clearHovered = useClearRowHovered(rowId);
+
+	if (item.kind === 'expansion') {
+		return (
+			<tr {...props} className={tableStyles.tableRowExpansion}>
+				{children}
+			</tr>
+		);
+	}
+
+	const isActive = context?.isRowActive?.(rowData) ?? false;
+	const extraClass = context?.getRowClassName?.(rowData) ?? '';
+	const rowStyle = context?.getRowStyle?.(rowData);
+
+	const rowClassName = cx(
+		tableStyles.tableRow,
+		isActive && tableStyles.tableRowActive,
+		extraClass,
+	);
+
+	return (
+		<tr
+			{...props}
+			className={rowClassName}
+			style={rowStyle}
+			onMouseEnter={setHovered}
+			onMouseLeave={clearHovered}
+		>
+			{children}
+		</tr>
+	);
+}
+
+// Custom comparison - only re-render when row identity or computed values change
+function areTableRowPropsEqual<TData>(
+	prev: Readonly<VirtuosoTableRowProps<TData>>,
+	next: Readonly<VirtuosoTableRowProps<TData>>,
+): boolean {
+	// Different row = must re-render
+	if (prev.item.row.id !== next.item.row.id) {
+		return false;
+	}
+	// Different kind (row vs expansion) = must re-render
+	if (prev.item.kind !== next.item.kind) {
+		return false;
+	}
+	// Same row, same kind - check if computed values would differ
+	// We compare the context callbacks and row data to determine this
+	const prevData = prev.item.row.original;
+	const nextData = next.item.row.original;
+
+	// Row data reference changed = potential re-render needed
+	if (prevData !== nextData) {
+		return false;
+	}
+
+	// Context callbacks changed = computed values may differ
+	if (prev.context !== next.context) {
+		// If context changed, check if the actual computed values differ
+		const prevActive = prev.context?.isRowActive?.(prevData) ?? false;
+		const nextActive = next.context?.isRowActive?.(nextData) ?? false;
+		if (prevActive !== nextActive) {
+			return false;
+		}
+
+		const prevClass = prev.context?.getRowClassName?.(prevData) ?? '';
+		const nextClass = next.context?.getRowClassName?.(nextData) ?? '';
+		if (prevClass !== nextClass) {
+			return false;
+		}
+
+		const prevStyle = prev.context?.getRowStyle?.(prevData);
+		const nextStyle = next.context?.getRowStyle?.(nextData);
+		if (prevStyle !== nextStyle) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default memo(
+	TanStackCustomTableRow,
+	areTableRowPropsEqual,
+) as typeof TanStackCustomTableRow;

frontend/src/components/TanStackTableView/TanStackHeaderRow.module.scss

@@ -1,4 +1,4 @@
-.tanstack-header-cell {
+.tanstackHeaderCell {
 	position: sticky;
 	top: 0;
 	z-index: 2;
@@ -10,16 +10,21 @@
 	);
 	transition: var(--tanstack-header-transition, none);
 
-	&.is-dragging {
+	&.isDragging {
 		opacity: 0.85;
 	}
 
-	&.is-resizing {
+	&.isResizing {
 		background: var(--l2-background-hover);
 	}
+
+	&:last-child .cursorColResize {
+		display: none;
+		border-right: 1px solid var(--l2-border);
+	}
 }
 
-.tanstack-header-content {
+.tanstackHeaderContent {
 	display: flex;
 	align-items: center;
 	height: 100%;
@@ -28,20 +33,20 @@
 	cursor: default;
 	max-width: 100%;
 
-	&.has-resize-control {
+	&.hasResizeControl {
 		max-width: calc(100% - 5px);
 	}
 
-	&.has-action-control {
+	&.hasActionControl {
 		max-width: calc(100% - 5px);
 	}
 
-	&.has-resize-control.has-action-control {
+	&.hasResizeControl.hasActionControl {
 		max-width: calc(100% - 10px);
 	}
 }
 
-.tanstack-grip-slot {
+.tanstackGripSlot {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -51,7 +56,7 @@
 	flex-shrink: 0;
 }
 
-.tanstack-grip-activator {
+.tanstackGripActivator {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -63,7 +68,7 @@
 	touch-action: none;
 }
 
-.tanstack-header-action-trigger {
+.tanstackHeaderActionTrigger {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -72,9 +77,11 @@
 	cursor: pointer;
 	flex-shrink: 0;
 	color: var(--l2-foreground);
+
+	margin-left: auto;
 }
 
-.tanstack-column-actions-content {
+.tanstackColumnActionsContent {
 	width: 140px;
 	padding: 0;
 	background: var(--l2-background);
@@ -83,7 +90,7 @@
 	box-shadow: none;
 }
 
-.tanstack-remove-column-action {
+.tanstackRemoveColumnAction {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -105,19 +112,19 @@
 		background: var(--l2-background-hover);
 		color: var(--l2-foreground);
 
-		.tanstack-remove-column-action-icon {
+		.tanstackRemoveColumnActionIcon {
 			color: var(--l2-foreground);
 		}
 	}
 }
 
-.tanstack-remove-column-action-icon {
+.tanstackRemoveColumnActionIcon {
 	font-size: 11px;
 	color: var(--l2-foreground);
 	opacity: 0.95;
 }
 
-.tanstack-header-cell .cursor-col-resize {
+.tanstackHeaderCell .cursorColResize {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -129,11 +136,11 @@
 	background: transparent;
 }
 
-.tanstack-header-cell.is-resizing .cursor-col-resize {
+.tanstackHeaderCell.isResizing .cursorColResize {
 	background: var(--bg-robin-300);
 }
 
-.tanstack-resize-handle-line {
+.tanstackResizeHandleLine {
 	position: absolute;
 	top: 0;
 	bottom: 0;
@@ -146,7 +153,7 @@
 	transition: background 120ms ease, width 120ms ease;
 }
 
-.tanstack-header-cell.is-resizing .tanstack-resize-handle-line {
+.tanstackHeaderCell.isResizing .tanstackResizeHandleLine {
 	width: 2px;
 	background: var(--bg-robin-500);
 	transition: none;

frontend/src/components/TanStackTableView/TanStackHeaderRow.tsx

@@ -8,51 +8,46 @@ 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 cx from 'classnames';
 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 { TableColumnDef } from './types';
 
-import './styles/TanStackHeaderRow.styles.scss';
+import headerStyles from './TanStackHeaderRow.module.scss';
+import tableStyles from './TanStackTable.module.scss';
 
-type TanStackHeaderRowProps = {
-	column: OrderedColumn;
-	header?: TanStackHeader<TanStackTableRowData, unknown>;
+type TanStackHeaderRowProps<TData = unknown> = {
+	column: TableColumnDef<TData>;
+	header?: TanStackHeader<TData, unknown>;
 	isDarkMode: boolean;
-	fontSize: InfinityTableProps['tableViewProps']['fontSize'];
 	hasSingleColumn: boolean;
 	canRemoveColumn?: boolean;
-	onRemoveColumn?: (columnKey: string) => void;
+	onRemoveColumn?: (columnId: string) => void;
 };
 
 const GRIP_ICON_SIZE = 12;
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
-function TanStackHeaderRow({
+function TanStackHeaderRow<TData>({
 	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());
+}: TanStackHeaderRowProps<TData>): JSX.Element {
+	const columnId = column.id;
+	const isDragColumn = column.enableMove !== false && column.pin == null;
+	const isResizableColumn =
+		column.enableResize !== false && Boolean(header?.column.getCanResize());
 	const isColumnRemovable = Boolean(
-		canRemoveColumn &&
-			onRemoveColumn &&
-			column.key !== 'expand' &&
-			column.key !== 'state-indicator',
+		canRemoveColumn && onRemoveColumn && column.enableRemove,
 	);
 	const isResizing = Boolean(header?.column.getIsResizing());
 	const resizeHandler = header?.getResizeHandler();
 	const headerText =
-		typeof column.title === 'string' && column.title
-			? column.title
+		typeof column.header === 'string' && column.header
+			? column.header
 			: String(header?.id ?? columnId);
 	const headerTitleAttr = headerText.replace(/^\w/, (c) => c.toUpperCase());
 	const handleResizeStart = (
@@ -83,54 +78,57 @@ function TanStackHeaderRow({
 			} 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(' ');
+	const headerCellClassName = cx(
+		headerStyles.tanstackHeaderCell,
+		isDragging && headerStyles.isDragging,
+		isResizing && headerStyles.isResizing,
+	);
+	const headerContentClassName = cx(
+		headerStyles.tanstackHeaderContent,
+		isResizableColumn && headerStyles.hasResizeControl,
+		isColumnRemovable && headerStyles.hasActionControl,
+	);
+
+	const thClassName = cx(
+		tableStyles.tableHeaderCell,
+		headerCellClassName,
+		column.id,
+	);
 
 	return (
-		<TableHeaderCellStyled
+		<th
 			ref={setNodeRef}
-			$isLogIndicator={column.key === 'state-indicator'}
-			$isDarkMode={isDarkMode}
-			$isDragColumn={false}
-			className={headerCellClassName}
+			className={thClassName}
 			key={columnId}
-			fontSize={fontSize}
-			$hasSingleColumn={hasSingleColumn}
 			style={headerCellStyle}
+			data-dark-mode={isDarkMode}
+			data-single-column={hasSingleColumn || undefined}
 		>
 			<span className={headerContentClassName}>
 				{isDragColumn ? (
-					<span className="tanstack-grip-slot">
+					<span className={headerStyles.tanstackGripSlot}>
 						<span
 							ref={setActivatorNodeRef}
 							{...attributes}
 							{...listeners}
 							role="button"
 							aria-label={`Drag ${String(
-								column.title || header?.id || columnId,
+								(typeof column.header === 'string' && column.header) ||
+									header?.id ||
+									columnId,
 							)} column`}
-							className="tanstack-grip-activator"
+							className={headerStyles.tanstackGripActivator}
 						>
 							<GripVertical size={GRIP_ICON_SIZE} />
 						</span>
 					</span>
 				) : null}
 				<span className="tanstack-header-title" title={headerTitleAttr}>
-					{header
+					{header?.column?.columnDef
 						? flexRender(header.column.columnDef.header, header.getContext())
-						: String(column.title || '').replace(/^\w/, (c) => c.toUpperCase())}
+						: typeof column.header === 'function'
+						? column.header()
+						: String(column.header || '').replace(/^\w/, (c) => c.toUpperCase())}
 				</span>
 				{isColumnRemovable && (
 					<Popover>
@@ -138,7 +136,7 @@ function TanStackHeaderRow({
 							<span
 								role="button"
 								aria-label={`Column actions for ${headerTitleAttr}`}
-								className="tanstack-header-action-trigger"
+								className={headerStyles.tanstackHeaderActionTrigger}
 								onMouseDown={(event): void => {
 									event.stopPropagation();
 								}}
@@ -149,18 +147,20 @@ function TanStackHeaderRow({
 						<PopoverContent
 							align="end"
 							sideOffset={6}
-							className="tanstack-column-actions-content"
+							className={headerStyles.tanstackColumnActionsContent}
 						>
 							<button
 								type="button"
-								className="tanstack-remove-column-action"
+								className={headerStyles.tanstackRemoveColumnAction}
 								onClick={(event): void => {
 									event.preventDefault();
 									event.stopPropagation();
-									onRemoveColumn?.(String(column.key));
+									onRemoveColumn?.(column.id);
 								}}
 							>
-								<CloseOutlined className="tanstack-remove-column-action-icon" />
+								<CloseOutlined
+									className={headerStyles.tanstackRemoveColumnActionIcon}
+								/>
 								Remove column
 							</button>
 						</PopoverContent>
@@ -170,7 +170,7 @@ function TanStackHeaderRow({
 			{isResizableColumn && (
 				<span
 					role="presentation"
-					className="cursor-col-resize"
+					className={headerStyles.cursorColResize}
 					title="Drag to resize column"
 					onClick={(event): void => {
 						event.preventDefault();
@@ -183,10 +183,10 @@ function TanStackHeaderRow({
 						handleResizeStart(event);
 					}}
 				>
-					<span className="tanstack-resize-handle-line" />
+					<span className={headerStyles.tanstackResizeHandleLine} />
 				</span>
 			)}
-		</TableHeaderCellStyled>
+		</th>
 	);
 }
 

frontend/src/components/TanStackTableView/TanStackRow.tsx

@@ -0,0 +1,105 @@
+import { memo, useCallback } from 'react';
+import { Row as TanStackRowModel } from '@tanstack/react-table';
+
+import { useIsRowHovered } from './RowHoverContext';
+import { TanStackRowCell } from './TanStackRowCell';
+import { TableRowContext } from './types';
+
+import tableStyles from './TanStackTable.module.scss';
+
+type TanStackRowCellsProps<TData> = {
+	row: TanStackRowModel<TData>;
+	context: TableRowContext<TData> | undefined;
+	itemKind: 'row' | 'expansion';
+	hasSingleColumn: boolean;
+};
+
+function TanStackRowCellsInner<TData>({
+	row,
+	context,
+	itemKind,
+	hasSingleColumn,
+}: TanStackRowCellsProps<TData>): JSX.Element {
+	// Only re-render this row when ITS hover state changes
+	const hasHovered = useIsRowHovered(row.id);
+	const rowData = row.original;
+	const visibleCells = row.getVisibleCells();
+	const lastCellIndex = visibleCells.length - 1;
+
+	// Stable references via destructuring
+	const onRowClick = context?.onRowClick;
+	const onRowDeactivate = context?.onRowDeactivate;
+	const isRowActive = context?.isRowActive;
+
+	const handleClick = useCallback(() => {
+		const isActive = isRowActive?.(rowData) ?? false;
+		if (isActive && onRowDeactivate) {
+			onRowDeactivate();
+		} else {
+			onRowClick?.(rowData);
+		}
+	}, [isRowActive, onRowDeactivate, onRowClick, rowData]);
+
+	if (itemKind === 'expansion') {
+		return (
+			<td
+				colSpan={context?.colCount ?? 1}
+				className={tableStyles.tableCellExpansion}
+			>
+				{context?.renderExpandedRow?.(rowData)}
+			</td>
+		);
+	}
+
+	return (
+		<>
+			{visibleCells.map((cell, index) => {
+				const isLastCell = index === lastCellIndex;
+				return (
+					<TanStackRowCell
+						key={cell.id}
+						cell={cell}
+						hasSingleColumn={hasSingleColumn}
+						isLastCell={isLastCell}
+						hasHovered={hasHovered}
+						rowData={rowData}
+						onClick={handleClick}
+						renderRowActions={context?.renderRowActions}
+					/>
+				);
+			})}
+		</>
+	);
+}
+
+// Custom comparison - only re-render when row data changes
+function areRowCellsPropsEqual<TData>(
+	prev: Readonly<TanStackRowCellsProps<TData>>,
+	next: Readonly<TanStackRowCellsProps<TData>>,
+): boolean {
+	return (
+		// Row identity
+		prev.row.id === next.row.id &&
+		// Row kind (row vs expansion)
+		prev.itemKind === next.itemKind &&
+		// Row data reference
+		prev.row.original === next.row.original &&
+		// Layout
+		prev.hasSingleColumn === next.hasSingleColumn &&
+		// Context callbacks for click handlers and row actions
+		prev.context?.onRowClick === next.context?.onRowClick &&
+		prev.context?.onRowDeactivate === next.context?.onRowDeactivate &&
+		prev.context?.isRowActive === next.context?.isRowActive &&
+		prev.context?.renderRowActions === next.context?.renderRowActions &&
+		prev.context?.renderExpandedRow === next.context?.renderExpandedRow &&
+		prev.context?.colCount === next.context?.colCount
+	);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TanStackRowCells = memo(
+	TanStackRowCellsInner,
+	areRowCellsPropsEqual as any,
+) as <T>(props: TanStackRowCellsProps<T>) => JSX.Element;
+
+export default TanStackRowCells;

frontend/src/components/TanStackTableView/TanStackRowCell.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+import type { Cell } from '@tanstack/react-table';
+import { flexRender } from '@tanstack/react-table';
+import cx from 'classnames';
+
+import tableStyles from './TanStackTable.module.scss';
+
+export type TanStackRowCellProps<TData> = {
+	cell: Cell<TData, unknown>;
+	hasSingleColumn: boolean;
+	isLastCell: boolean;
+	hasHovered: boolean;
+	rowData: TData;
+	onClick: () => void;
+	renderRowActions?: (row: TData) => ReactNode;
+};
+
+function TanStackRowCellInner<TData>({
+	cell,
+	hasSingleColumn,
+	isLastCell,
+	hasHovered,
+	rowData,
+	onClick,
+	renderRowActions,
+}: TanStackRowCellProps<TData>): JSX.Element {
+	return (
+		<td
+			className={cx(tableStyles.tableCell, 'tanstack-cell-' + cell.column.id)}
+			data-single-column={hasSingleColumn || undefined}
+			onClick={onClick}
+		>
+			{flexRender(cell.column.columnDef.cell, cell.getContext())}
+			{isLastCell && hasHovered && renderRowActions && (
+				<span className={tableStyles.tableViewRowActions}>
+					{renderRowActions(rowData)}
+				</span>
+			)}
+		</td>
+	);
+}
+
+function areTanStackRowCellPropsEqual<TData>(
+	prev: Readonly<TanStackRowCellProps<TData>>,
+	next: Readonly<TanStackRowCellProps<TData>>,
+): boolean {
+	return (
+		prev.cell.id === next.cell.id &&
+		prev.cell.column.id === next.cell.column.id &&
+		Object.is(prev.cell.getValue(), next.cell.getValue()) &&
+		prev.hasSingleColumn === next.hasSingleColumn &&
+		prev.isLastCell === next.isLastCell &&
+		prev.hasHovered === next.hasHovered &&
+		prev.onClick === next.onClick &&
+		prev.renderRowActions === next.renderRowActions &&
+		prev.rowData === next.rowData
+	);
+}
+
+const TanStackRowCellMemo = memo(
+	TanStackRowCellInner,
+	areTanStackRowCellPropsEqual,
+);
+
+TanStackRowCellMemo.displayName = 'TanStackRowCell';
+
+export const TanStackRowCell = TanStackRowCellMemo as typeof TanStackRowCellInner;

frontend/src/components/TanStackTableView/TanStackTable.module.scss

@@ -0,0 +1,105 @@
+.tanStackTable {
+	width: 100%;
+	border-collapse: separate;
+	border-spacing: 0;
+	table-layout: fixed;
+	min-width: 100%;
+	max-width: 100%;
+
+	& td,
+	& th {
+		overflow: hidden;
+		min-width: 0;
+		box-sizing: border-box;
+		vertical-align: middle;
+	}
+}
+
+.tableCellText {
+	font-style: normal;
+	font-weight: 400;
+	letter-spacing: -0.07px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	width: auto;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: var(--tanstack-plain-body-line-clamp, 1);
+	line-clamp: var(--tanstack-plain-body-line-clamp, 1);
+	font-size: var(--tanstack-plain-cell-font-size, 14px);
+	line-height: var(--tanstack-plain-cell-line-height, 18px);
+	color: var(--l2-foreground);
+	max-width: 100%;
+	word-break: break-all;
+}
+
+.tableViewRowActions {
+	position: absolute;
+	top: 50%;
+	right: 8px;
+	left: auto;
+	transform: translateY(-50%);
+	margin: 0;
+	z-index: 5;
+}
+
+.tableCell {
+	padding: 0.3rem;
+	font-style: normal;
+	font-weight: 400;
+	letter-spacing: -0.07px;
+	font-size: var(--tanstack-plain-cell-font-size, 14px);
+	line-height: var(--tanstack-plain-cell-line-height, 18px);
+	color: var(--l2-foreground);
+}
+
+.tableRow {
+	cursor: pointer;
+	position: relative;
+
+	&:hover {
+		.tableCell {
+			background-color: var(--row-hover-bg) !important;
+		}
+	}
+
+	&.tableRowActive {
+		.tableCell {
+			background-color: var(--row-active-bg) !important;
+		}
+	}
+}
+
+.tableHeaderCell {
+	padding: 0.3rem;
+	height: 36px;
+	text-align: left;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px;
+	letter-spacing: -0.07px;
+	border-top: 1px solid var(--l2-border);
+	border-bottom: 1px solid var(--l2-border);
+	border-left: 1px solid var(--l2-border);
+	box-shadow: inset 0 -1px 0 var(--l2-border);
+	color: var(--l1-foreground);
+
+	// TODO: Remove this once background color (l1) is matching the actual background color of the page
+	&[data-dark-mode='true'] {
+		background: #0b0c0d;
+	}
+
+	&[data-dark-mode='false'] {
+		background: #fdfdfd;
+	}
+}
+
+.tableRowExpansion {
+	display: table-row;
+}
+
+.tableCellExpansion {
+	padding: 0.5rem;
+	vertical-align: top;
+}

frontend/src/components/TanStackTableView/TanStackTableText.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import cx from 'classnames';
+
+import tableStyles from './TanStackTable.module.scss';
+
+export type TanStackTableTextProps = {
+	children?: ReactNode;
+	className?: string;
+};
+
+function TanStackTableText({
+	children,
+	className,
+}: TanStackTableTextProps): JSX.Element {
+	return (
+		<span className={cx(tableStyles.tableCellText, className)}>{children}</span>
+	);
+}
+
+export default TanStackTableText;

frontend/src/components/TanStackTableView/TanStackTableView.module.scss

@@ -0,0 +1,135 @@
+.tanstackTableViewWrapper {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	position: relative;
+	min-height: 0;
+}
+
+.tanstackFixedCol {
+	width: 32px;
+	min-width: 32px;
+	max-width: 32px;
+}
+
+.tanstackFillerCol {
+	width: 100%;
+	min-width: 0;
+}
+
+.tanstackActionsCol {
+	width: 0;
+	min-width: 0;
+	max-width: 0;
+}
+
+.tanstackLoadMoreContainer {
+	width: 100%;
+	min-height: 56px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 8px 0 12px;
+	flex-shrink: 0;
+}
+
+.tanstackTableVirtuoso {
+	width: 100%;
+	overflow-x: scroll;
+}
+
+.tanstackTableFootLoaderCell {
+	text-align: center;
+	padding: 8px 0;
+}
+
+.tanstackTableVirtuosoScroll {
+	width: 100%;
+	overflow-x: 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);
+	}
+
+	&.cellTypographySmall {
+		--tanstack-plain-cell-font-size: 11px;
+		--tanstack-plain-cell-line-height: 16px;
+
+		:global(table tr td),
+		:global(table thead th) {
+			font-size: 11px;
+			line-height: 16px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	&.cellTypographyMedium {
+		--tanstack-plain-cell-font-size: 13px;
+		--tanstack-plain-cell-line-height: 20px;
+
+		:global(table tr td),
+		:global(table thead th) {
+			font-size: 13px;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	&.cellTypographyLarge {
+		--tanstack-plain-cell-font-size: 14px;
+		--tanstack-plain-cell-line-height: 24px;
+
+		:global(table tr td),
+		:global(table thead th) {
+			font-size: 14px;
+			line-height: 24px;
+			letter-spacing: -0.07px;
+		}
+	}
+}
+
+.tanstackLoadingOverlay {
+	position: absolute;
+	left: 50%;
+	bottom: 2rem;
+	transform: translateX(-50%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	pointer-events: none;
+	z-index: 3;
+	border-radius: 8px;
+	padding: 8px 16px;
+}
+
+:global(.lightMode) .tanstackTableVirtuosoScroll {
+	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/components/TanStackTableView/VirtuosoTableColGroup.tsx

@@ -0,0 +1,52 @@
+import type { Table } from '@tanstack/react-table';
+
+import type { TableColumnDef, TanStackTableProps } from './types';
+import { getColumnMinWidthPx } from './utils';
+
+import viewStyles from './TanStackTableView.module.scss';
+
+export function VirtuosoTableColGroup<TData>({
+	columns,
+	columnSizingProp,
+	table,
+}: {
+	columns: TableColumnDef<TData>[];
+	columnSizingProp: TanStackTableProps<TData>['columnSizing'];
+	table: Table<TData>;
+}): JSX.Element {
+	return (
+		<colgroup>
+			{columns.map((column, colIndex) => {
+				const columnId = column.id;
+				const isFixedColumn = column.width?.fixed != null;
+				const minWidthPx = getColumnMinWidthPx(column);
+				const persistedWidth = columnSizingProp?.[columnId];
+				const computedWidth = table.getColumn(columnId)?.getSize();
+				const effectiveWidth = persistedWidth ?? computedWidth;
+				if (isFixedColumn) {
+					return <col key={columnId} className={viewStyles.tanstackFixedCol} />;
+				}
+				const isLastColumn = colIndex === columns.length - 1;
+				if (isLastColumn) {
+					return (
+						<col
+							key={columnId}
+							style={{ width: '100%', minWidth: `${minWidthPx}px` }}
+						/>
+					);
+				}
+				const widthPx =
+					effectiveWidth != null ? Math.max(effectiveWidth, minWidthPx) : minWidthPx;
+				return (
+					<col
+						key={columnId}
+						style={{
+							width: `${widthPx}px`,
+							minWidth: `${minWidthPx}px`,
+						}}
+					/>
+				);
+			})}
+		</colgroup>
+	);
+}

frontend/src/components/TanStackTableView/__tests__/TanStackCustomTableRow.test.tsx

@@ -0,0 +1,102 @@
+jest.mock('../TanStackTable.module.scss', () => ({
+	__esModule: true,
+	default: {
+		tableRow: 'tableRow',
+		tableRowActive: 'tableRowActive',
+		tableRowExpansion: 'tableRowExpansion',
+	},
+}));
+
+import { render, screen } from '@testing-library/react';
+
+import TanStackCustomTableRow from '../TanStackCustomTableRow';
+import type { FlatItem, TableRowContext } from '../types';
+
+const makeItem = (id: string): FlatItem<{ id: string }> => ({
+	kind: 'row',
+	row: { original: { id } } as never,
+});
+
+const virtuosoAttrs = {
+	'data-index': 0,
+	'data-item-index': 0,
+	'data-known-size': 40,
+} as const;
+
+describe('TanStackCustomTableRow', () => {
+	it('renders children', async () => {
+		render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoAttrs}
+						item={makeItem('1')}
+						context={undefined}
+					>
+						<td>cell</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(await screen.findByText('cell')).toBeInTheDocument();
+	});
+
+	it('applies active class when isRowActive returns true', () => {
+		const ctx: TableRowContext<{ id: string }> = {
+			isRowActive: (row) => row.id === '1',
+			colCount: 1,
+		};
+		const { container } = render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoAttrs}
+						item={makeItem('1')}
+						context={ctx as never}
+					>
+						<td>x</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(container.querySelector('tr')).toHaveClass('tableRowActive');
+	});
+
+	it('does not apply active class when isRowActive returns false', () => {
+		const ctx: TableRowContext<{ id: string }> = {
+			isRowActive: (row) => row.id === 'other',
+			colCount: 1,
+		};
+		const { container } = render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoAttrs}
+						item={makeItem('1')}
+						context={ctx as never}
+					>
+						<td>x</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(container.querySelector('tr')).not.toHaveClass('tableRowActive');
+	});
+
+	it('renders expansion row without RowHoverContext when kind is expansion', () => {
+		const item: FlatItem<{ id: string }> = {
+			kind: 'expansion',
+			row: { original: { id: '1' } } as never,
+		};
+		const { container } = render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow {...virtuosoAttrs} item={item} context={undefined}>
+						<td>expanded content</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(container.querySelector('tr')).toHaveClass('tableRowExpansion');
+	});
+});

frontend/src/components/TanStackTableView/__tests__/TanStackHeaderRow.test.tsx

@@ -0,0 +1,144 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TanStackHeaderRow from '../TanStackHeaderRow';
+import type { TableColumnDef } from '../types';
+
+jest.mock('@dnd-kit/sortable', () => ({
+	useSortable: (): any => ({
+		attributes: {},
+		listeners: {},
+		setNodeRef: jest.fn(),
+		setActivatorNodeRef: jest.fn(),
+		transform: null,
+		transition: null,
+		isDragging: false,
+	}),
+}));
+
+const col = (
+	id: string,
+	overrides?: Partial<TableColumnDef<unknown>>,
+): TableColumnDef<unknown> => ({
+	id,
+	header: id,
+	cell: (): null => null,
+	...overrides,
+});
+
+const header = {
+	id: 'col',
+	column: {
+		getCanResize: () => true,
+		getIsResizing: () => false,
+		columnDef: { header: 'col' },
+	},
+	getResizeHandler: () => jest.fn(),
+	getContext: () => ({}),
+} as never;
+
+describe('TanStackHeaderRow', () => {
+	it('renders column title', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('timestamp', { header: 'timestamp' })}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(screen.getByTitle('Timestamp')).toBeInTheDocument();
+	});
+
+	it('shows grip icon when enableMove is not false and pin is not set', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('body')}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(
+			screen.getByRole('button', { name: /drag body/i }),
+		).toBeInTheDocument();
+	});
+
+	it('does NOT show grip icon when pin is set', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('indicator', { pin: 'left' })}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(
+			screen.queryByRole('button', { name: /drag/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('shows remove button when enableRemove and canRemoveColumn are true', async () => {
+		const user = userEvent.setup();
+		const onRemoveColumn = jest.fn();
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('name', { enableRemove: true })}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+							canRemoveColumn
+							onRemoveColumn={onRemoveColumn}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		await user.click(screen.getByRole('button', { name: /column actions/i }));
+		await user.click(await screen.findByText(/remove column/i));
+		expect(onRemoveColumn).toHaveBeenCalledWith('name');
+	});
+
+	it('does NOT show remove button when enableRemove is absent', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('name')}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+							canRemoveColumn
+							onRemoveColumn={jest.fn()}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(
+			screen.queryByRole('button', { name: /column actions/i }),
+		).not.toBeInTheDocument();
+	});
+});

frontend/src/components/TanStackTableView/__tests__/TanStackRow.test.tsx

@@ -0,0 +1,162 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TanStackRowCells from '../TanStackRow';
+import type { TableRowContext } from '../types';
+
+const flexRenderMock = jest.fn((def: unknown) =>
+	typeof def === 'function' ? def({}) : def,
+);
+jest.mock('@tanstack/react-table', () => ({
+	flexRender: (def: unknown, _ctx?: unknown): unknown => flexRenderMock(def),
+}));
+
+type Row = { id: string };
+
+function buildMockRow(
+	cells: { id: string }[],
+	rowData: Row = { id: 'r1' },
+): Parameters<typeof TanStackRowCells>[0]['row'] {
+	return {
+		original: rowData,
+		getVisibleCells: () =>
+			cells.map((c, i) => ({
+				id: `cell-${i}`,
+				column: {
+					id: c.id,
+					columnDef: { cell: (): string => `content-${c.id}` },
+				},
+				getContext: (): Record<string, unknown> => ({}),
+				getValue: (): string => `content-${c.id}`,
+			})),
+	} as never;
+}
+
+describe('TanStackRowCells', () => {
+	beforeEach(() => flexRenderMock.mockClear());
+
+	it('renders a cell per visible column', () => {
+		const row = buildMockRow([{ id: 'col-a' }, { id: 'col-b' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={undefined}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		expect(screen.getAllByRole('cell')).toHaveLength(2);
+	});
+
+	it('calls onRowClick when a cell is clicked', async () => {
+		const user = userEvent.setup();
+		const onRowClick = jest.fn();
+		const ctx: TableRowContext<Row> = { colCount: 1, onRowClick };
+		const row = buildMockRow([{ id: 'body' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		await user.click(screen.getAllByRole('cell')[0]);
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' });
+	});
+
+	it('calls onRowDeactivate instead of onRowClick when row is active', async () => {
+		const user = userEvent.setup();
+		const onRowClick = jest.fn();
+		const onRowDeactivate = jest.fn();
+		const ctx: TableRowContext<Row> = {
+			colCount: 1,
+			onRowClick,
+			onRowDeactivate,
+			isRowActive: () => true,
+		};
+		const row = buildMockRow([{ id: 'body' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		await user.click(screen.getAllByRole('cell')[0]);
+		expect(onRowDeactivate).toHaveBeenCalled();
+		expect(onRowClick).not.toHaveBeenCalled();
+	});
+
+	it('does not render renderRowActions before hover', () => {
+		const ctx: TableRowContext<Row> = {
+			colCount: 1,
+			renderRowActions: () => <button type="button">action</button>,
+		};
+		const row = buildMockRow([{ id: 'body' }]);
+
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		// Row actions are not rendered until hover (useIsRowHovered returns false by default)
+		expect(
+			screen.queryByRole('button', { name: 'action' }),
+		).not.toBeInTheDocument();
+	});
+
+	it('renders expansion cell with renderExpandedRow content', async () => {
+		const row = {
+			original: { id: 'r1' },
+			getVisibleCells: () => [],
+		} as never;
+		const ctx: TableRowContext<Row> = {
+			colCount: 3,
+			renderExpandedRow: (r) => <div>expanded-{r.id}</div>,
+		};
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="expansion"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		expect(await screen.findByText('expanded-r1')).toBeInTheDocument();
+	});
+});

frontend/src/components/TanStackTableView/__tests__/TanStackTableView.test.tsx

@@ -0,0 +1,68 @@
+import { forwardRef } from 'react';
+import { render, screen } from '@testing-library/react';
+
+import TanStackTable from '../index';
+import type { TableColumnDef, TanStackTableProps } from '../types';
+
+jest.mock('react-virtuoso', () => ({
+	TableVirtuoso: forwardRef<unknown, { fixedHeaderContent?: () => JSX.Element }>(
+		function MockVirtuoso({ fixedHeaderContent }, _ref) {
+			return <div data-testid="virtuoso">{fixedHeaderContent?.()}</div>;
+		},
+	),
+}));
+
+jest.mock('../useTableParams', () => ({
+	useTableParams: (): Record<string, unknown> => ({
+		page: 1,
+		limit: 50,
+		orderBy: null,
+		setPage: jest.fn(),
+		setLimit: jest.fn(),
+		setOrderBy: jest.fn(),
+	}),
+}));
+
+jest.mock('../../Spinner', () => ({
+	__esModule: true,
+	default: ({ tip }: { tip: string }): JSX.Element => (
+		<div data-testid="spinner">{tip}</div>
+	),
+}));
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: (): boolean => false,
+}));
+
+type Row = { id: string };
+
+const col = (): TableColumnDef<Row> => ({
+	id: 'id',
+	header: 'ID',
+	cell: ({ row }): string => row.id,
+	accessorKey: 'id',
+});
+
+const baseProps: TanStackTableProps<Row> = {
+	data: [{ id: '1' }],
+	columns: [col()],
+};
+
+describe('TanStackTable', () => {
+	it('renders virtuoso when not loading', () => {
+		render(<TanStackTable {...baseProps} />);
+		expect(screen.getByTestId('virtuoso')).toBeInTheDocument();
+	});
+
+	it('shows loading spinner overlay when isLoading is true', () => {
+		render(<TanStackTable {...baseProps} isLoading />);
+		expect(screen.getByTestId('spinner')).toBeInTheDocument();
+	});
+
+	it('passes loadingTip to spinner', () => {
+		render(
+			<TanStackTable {...baseProps} isLoading loadingTip="Fetching hosts" />,
+		);
+		expect(screen.getByTestId('spinner')).toHaveTextContent('Fetching hosts');
+	});
+});

frontend/src/components/TanStackTableView/__tests__/useTableColumns.test.tsx

@@ -0,0 +1,194 @@
+import { act, renderHook } from '@testing-library/react';
+
+import type { TableColumnDef } from '../types';
+import { useTableColumns } from '../useTableColumns';
+
+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),
+}));
+
+type Row = { id: string; name: string };
+
+const col = (id: string, pin?: 'left' | 'right'): TableColumnDef<Row> => ({
+	id,
+	header: id,
+	cell: ({ value }): string => String(value),
+	...(pin ? { pin } : {}),
+});
+
+describe('useTableColumns', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockGet.mockReturnValue(null);
+		jest.useFakeTimers();
+	});
+	afterEach(() => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+	});
+
+	it('returns definitions in original order when no persisted state', () => {
+		const defs = [col('timestamp'), col('body'), col('name')];
+		const { result } = renderHook(() => useTableColumns(defs));
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'timestamp',
+			'body',
+			'name',
+		]);
+	});
+
+	it('restores column order from localStorage', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: ['name', 'body', 'timestamp'],
+				columnSizing: {},
+				removedColumnIds: [],
+			}),
+		);
+		const defs = [col('timestamp'), col('body'), col('name')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'name',
+			'body',
+			'timestamp',
+		]);
+	});
+
+	it('pinned columns always stay first regardless of persisted order', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: ['body', 'indicator'],
+				columnSizing: {},
+				removedColumnIds: [],
+			}),
+		);
+		const defs = [col('indicator', 'left'), col('body')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns[0].id).toBe('indicator');
+	});
+
+	it('excludes removed columns from tableProps.columns', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: [],
+				columnSizing: {},
+				removedColumnIds: ['name'],
+			}),
+		);
+		const defs = [col('body'), col('name')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual(['body']);
+		expect(result.current.activeColumnIds).toEqual(['body']);
+	});
+
+	it('activeColumnIds reflects only currently visible columns', () => {
+		const defs = [col('body'), col('timestamp'), col('name')];
+		const { result } = renderHook(() => useTableColumns(defs));
+		expect(result.current.activeColumnIds).toEqual(['body', 'timestamp', 'name']);
+	});
+
+	it('onRemoveColumn removes column and persists after debounce', () => {
+		const defs = [col('body'), col('name')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+
+		act(() => {
+			result.current.tableProps.onRemoveColumn('body');
+		});
+
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual(['name']);
+
+		act(() => {
+			jest.advanceTimersByTime(250);
+		});
+
+		expect(mockSet).toHaveBeenCalledWith(
+			'test_table',
+			expect.stringContaining('"removedColumnIds":["body"]'),
+		);
+	});
+
+	it('onColumnOrderChange updates column order', () => {
+		const defs = [col('a'), col('b'), col('c')];
+		const { result } = renderHook(() => useTableColumns(defs));
+
+		act(() => {
+			result.current.tableProps.onColumnOrderChange([
+				col('c'),
+				col('b'),
+				col('a'),
+			]);
+		});
+
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'c',
+			'b',
+			'a',
+		]);
+	});
+
+	it('restores column sizing from localStorage', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: [],
+				columnSizing: { body: 400 },
+				removedColumnIds: [],
+			}),
+		);
+		const defs = [col('body')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columnSizing).toEqual({ body: 400 });
+	});
+
+	it('debounces sizing writes to localStorage', () => {
+		const defs = [col('body')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+
+		act(() => {
+			result.current.tableProps.onColumnSizingChange({ body: 500 });
+		});
+		expect(mockSet).not.toHaveBeenCalled();
+
+		act(() => {
+			jest.advanceTimersByTime(250);
+		});
+		expect(mockSet).toHaveBeenCalledWith(
+			'test_table',
+			expect.stringContaining('"body":500'),
+		);
+	});
+
+	it('falls back to definitions order when localStorage is corrupt', () => {
+		const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+		mockGet.mockReturnValue('not-json');
+		const defs = [col('a'), col('b')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'a',
+			'b',
+		]);
+		spy.mockRestore();
+	});
+});

frontend/src/components/TanStackTableView/__tests__/useTableParams.test.tsx

@@ -0,0 +1,105 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useTableParams } from '../useTableParams';
+
+jest.mock('utils/nuqsParsers', () => ({
+	parseAsJsonNoValidate: (): any => ({
+		withDefault: (d: unknown): any => ({
+			withOptions: (): any => ({ _default: d }),
+			_default: d,
+		}),
+	}),
+}));
+
+jest.mock('nuqs', () => ({
+	parseAsInteger: {
+		withDefault: (d: number): any => ({
+			withOptions: (): any => ({ _default: d }),
+			_default: d,
+		}),
+	},
+	parseAsJson: (): any => ({
+		withDefault: (d: unknown): any => ({
+			withOptions: (): any => ({ _default: d }),
+			_default: d,
+		}),
+	}),
+	useQueryState: jest
+		.fn()
+		.mockImplementation((_key: string, parser: { _default: unknown }) => {
+			const [val, setVal] = (jest.requireActual(
+				'react',
+			) as typeof import('react')).useState(parser?._default);
+			return [val, setVal];
+		}),
+}));
+
+describe('useTableParams (local mode — enableQueryParams not set)', () => {
+	it('returns default page=1 and limit=50', () => {
+		const { result } = renderHook(() => useTableParams());
+		expect(result.current.page).toBe(1);
+		expect(result.current.limit).toBe(50);
+		expect(result.current.orderBy).toBeNull();
+	});
+
+	it('respects custom defaults', () => {
+		const { result } = renderHook(() =>
+			useTableParams(undefined, { page: 2, limit: 25 }),
+		);
+		expect(result.current.page).toBe(2);
+		expect(result.current.limit).toBe(25);
+	});
+
+	it('setPage updates page', () => {
+		const { result } = renderHook(() => useTableParams());
+		act(() => {
+			result.current.setPage(3);
+		});
+		expect(result.current.page).toBe(3);
+	});
+
+	it('setLimit updates limit', () => {
+		const { result } = renderHook(() => useTableParams());
+		act(() => {
+			result.current.setLimit(100);
+		});
+		expect(result.current.limit).toBe(100);
+	});
+
+	it('setOrderBy updates orderBy', () => {
+		const { result } = renderHook(() => useTableParams());
+		act(() => {
+			result.current.setOrderBy({ columnId: 'cpu', desc: true });
+		});
+		expect(result.current.orderBy).toEqual({ columnId: 'cpu', desc: true });
+	});
+});
+
+describe('useTableParams (URL mode — enableQueryParams set)', () => {
+	it('uses nuqs state when enableQueryParams=true', () => {
+		const { result } = renderHook(() => useTableParams(true));
+		expect(result.current.page).toBe(1);
+		act(() => {
+			result.current.setPage(5);
+		});
+		expect(result.current.page).toBe(5);
+	});
+
+	it('uses prefixed keys when enableQueryParams is a string', () => {
+		const { result } = renderHook(() => useTableParams('pods', { page: 2 }));
+		expect(result.current.page).toBe(2);
+		act(() => {
+			result.current.setPage(4);
+		});
+		expect(result.current.page).toBe(4);
+	});
+
+	it('local state is ignored when enableQueryParams is set', () => {
+		const { result: local } = renderHook(() => useTableParams());
+		const { result: url } = renderHook(() => useTableParams(true));
+		act(() => {
+			local.current.setPage(99);
+		});
+		expect(url.current.page).toBe(1);
+	});
+});

frontend/src/components/TanStackTableView/index.tsx

@@ -0,0 +1,618 @@
+import type { ComponentProps, CSSProperties, Ref } from 'react';
+import {
+	forwardRef,
+	memo,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import type { TableComponents } from 'react-virtuoso';
+import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso';
+import {
+	DndContext,
+	DragEndEvent,
+	PointerSensor,
+	pointerWithin,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import {
+	arrayMove,
+	horizontalListSortingStrategy,
+	SortableContext,
+} from '@dnd-kit/sortable';
+import { TooltipProvider } from '@signozhq/ui';
+import type { Row } from '@tanstack/react-table';
+import {
+	ColumnDef,
+	ColumnPinningState,
+	ExpandedState,
+	getCoreRowModel,
+	useReactTable,
+} from '@tanstack/react-table';
+import { Pagination } from 'antd';
+import cx from 'classnames';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import Spinner from '../Spinner';
+import { RowHoverProvider } from './RowHoverContext';
+import TanStackCustomTableRow from './TanStackCustomTableRow';
+import TanStackHeaderRow from './TanStackHeaderRow';
+import TanStackRowCells from './TanStackRow';
+import TanStackTableText from './TanStackTableText';
+import {
+	FlatItem,
+	TableRowContext,
+	TanStackTableHandle,
+	TanStackTableProps,
+} from './types';
+import { useTableParams } from './useTableParams';
+import { buildTanstackColumnDef } from './utils';
+import { VirtuosoTableColGroup } from './VirtuosoTableColGroup';
+
+import tableStyles from './TanStackTable.module.scss';
+import viewStyles from './TanStackTableView.module.scss';
+
+const COLUMN_DND_AUTO_SCROLL = {
+	layoutShiftCompensation: false as const,
+	threshold: { x: 0.2, y: 0 },
+};
+
+const INCREASE_VIEWPORT_BY = { top: 500, bottom: 500 };
+
+const PAGINATION_STYLE: CSSProperties = { marginTop: 12, textAlign: 'right' };
+
+const noopColumnSizing = (): void => {};
+
+function TanStackTableInner<TData>(
+	{
+		data,
+		columns,
+		columnSizing: columnSizingProp,
+		onColumnSizingChange,
+		onColumnOrderChange,
+		onRemoveColumn,
+		isLoading = false,
+		loadingTip = 'Loading',
+		enableQueryParams,
+		pagination,
+		onEndReached,
+		getRowStyle,
+		getRowClassName,
+		isRowActive,
+		renderRowActions,
+		onRowClick,
+		onRowDeactivate,
+		activeRowIndex,
+		renderExpandedRow,
+		getRowCanExpand,
+		tableScrollerProps,
+		plainTextCellLineClamp,
+		cellTypographySize,
+	}: TanStackTableProps<TData>,
+	forwardedRef: React.ForwardedRef<TanStackTableHandle>,
+): JSX.Element {
+	const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
+	const isDarkMode = useIsDarkMode();
+
+	const { page, limit, setPage, setLimit } = useTableParams(enableQueryParams, {
+		page: pagination?.defaultPage,
+		limit: pagination?.defaultLimit,
+	});
+
+	const [expanded, setExpanded] = useState<ExpandedState>({});
+
+	const columnPinning = useMemo<ColumnPinningState>(
+		() => ({
+			left: columns.filter((c) => c.pin === 'left').map((c) => c.id),
+			right: columns.filter((c) => c.pin === 'right').map((c) => c.id),
+		}),
+		[columns],
+	);
+
+	const tanstackColumns = useMemo<ColumnDef<TData>[]>(
+		() => columns.map((colDef) => buildTanstackColumnDef(colDef, isRowActive)),
+		[columns, isRowActive],
+	);
+
+	const getRowId = useCallback((row: TData, index: number): string => {
+		const r = row as Record<string, unknown>;
+		if (r != null && typeof r.id !== 'undefined') {
+			return String(r.id);
+		}
+		return String(index);
+	}, []);
+
+	const tableGetRowCanExpand = useCallback(
+		(row: Row<TData>): boolean =>
+			getRowCanExpand ? getRowCanExpand(row.original) : true,
+		[getRowCanExpand],
+	);
+
+	const table = useReactTable({
+		data,
+		columns: tanstackColumns,
+		enableColumnResizing: true,
+		enableColumnPinning: true,
+		columnResizeMode: 'onChange',
+		getCoreRowModel: getCoreRowModel(),
+		getRowId,
+		enableExpanding: Boolean(renderExpandedRow),
+		getRowCanExpand: renderExpandedRow ? tableGetRowCanExpand : undefined,
+		onColumnSizingChange: onColumnSizingChange ?? noopColumnSizing,
+		onExpandedChange: setExpanded,
+		state: {
+			columnSizing: columnSizingProp ?? {},
+			columnPinning,
+			expanded,
+		},
+	});
+
+	const tableRows = table.getRowModel().rows;
+
+	const flatItems = useMemo<FlatItem<TData>[]>(() => {
+		const result: FlatItem<TData>[] = [];
+		for (const row of tableRows) {
+			result.push({ kind: 'row', row });
+			if (renderExpandedRow && row.getIsExpanded()) {
+				result.push({ kind: 'expansion', row });
+			}
+		}
+		return result;
+	}, [tableRows, renderExpandedRow]);
+
+	const flatIndexForActiveRow = useMemo(() => {
+		if (activeRowIndex == null || activeRowIndex < 0) {
+			return -1;
+		}
+		for (let i = 0; i < flatItems.length; i++) {
+			const item = flatItems[i];
+			if (item.kind === 'row' && item.row.index === activeRowIndex) {
+				return i;
+			}
+		}
+		return -1;
+	}, [activeRowIndex, flatItems]);
+
+	useEffect(() => {
+		if (flatIndexForActiveRow < 0) {
+			return;
+		}
+		virtuosoRef.current?.scrollToIndex({
+			index: flatIndexForActiveRow,
+			align: 'center',
+			behavior: 'auto',
+		});
+	}, [flatIndexForActiveRow]);
+
+	const sensors = useSensors(
+		useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+	);
+
+	const columnIds = useMemo(() => columns.map((c) => c.id), [columns]);
+
+	const handleDragEnd = useCallback(
+		(event: DragEndEvent): void => {
+			const { active, over } = event;
+			if (!over || active.id === over.id || !onColumnOrderChange) {
+				return;
+			}
+			const activeCol = columns.find((c) => c.id === String(active.id));
+			const overCol = columns.find((c) => c.id === String(over.id));
+			if (
+				!activeCol ||
+				!overCol ||
+				activeCol.pin != null ||
+				overCol.pin != null ||
+				activeCol.enableMove === false
+			) {
+				return;
+			}
+			const oldIndex = columns.findIndex((c) => c.id === String(active.id));
+			const newIndex = columns.findIndex((c) => c.id === String(over.id));
+			if (oldIndex === -1 || newIndex === -1) {
+				return;
+			}
+			onColumnOrderChange(arrayMove(columns, oldIndex, newIndex));
+		},
+		[columns, onColumnOrderChange],
+	);
+
+	const hasSingleColumn = useMemo(
+		() => columns.filter((c) => !c.pin && c.enableRemove !== false).length <= 1,
+		[columns],
+	);
+
+	const canRemoveColumn = !hasSingleColumn;
+
+	const flatHeaders = useMemo(
+		() => table.getFlatHeaders().filter((header) => !header.isPlaceholder),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[tanstackColumns, columnPinning],
+	);
+
+	const columnsById = useMemo(
+		() => new Map(columns.map((c) => [c.id, c] as const)),
+		[columns],
+	);
+
+	const virtuosoContext = useMemo<TableRowContext<TData>>(
+		() => ({
+			getRowStyle,
+			getRowClassName,
+			isRowActive,
+			renderRowActions,
+			onRowClick,
+			onRowDeactivate,
+			renderExpandedRow,
+			colCount: columns.length,
+			isDarkMode,
+			plainTextCellLineClamp,
+		}),
+		[
+			getRowStyle,
+			getRowClassName,
+			isRowActive,
+			renderRowActions,
+			onRowClick,
+			onRowDeactivate,
+			renderExpandedRow,
+			columns.length,
+			isDarkMode,
+			plainTextCellLineClamp,
+		],
+	);
+
+	const itemContent = useCallback(
+		(_index: number, item: FlatItem<TData>): JSX.Element => (
+			<TanStackRowCells
+				row={item.row}
+				itemKind={item.kind}
+				context={virtuosoContext}
+				hasSingleColumn={hasSingleColumn}
+			/>
+		),
+		[virtuosoContext, hasSingleColumn],
+	);
+
+	const tableHeader = useCallback(() => {
+		return (
+			<DndContext
+				sensors={sensors}
+				collisionDetection={pointerWithin}
+				onDragEnd={handleDragEnd}
+				autoScroll={COLUMN_DND_AUTO_SCROLL}
+			>
+				<SortableContext items={columnIds} strategy={horizontalListSortingStrategy}>
+					<tr>
+						{flatHeaders.map((header) => {
+							const column = columnsById.get(header.id);
+							if (!column) {
+								return null;
+							}
+							return (
+								<TanStackHeaderRow
+									key={header.id}
+									column={column}
+									header={header}
+									isDarkMode={isDarkMode}
+									hasSingleColumn={hasSingleColumn}
+									onRemoveColumn={onRemoveColumn}
+									canRemoveColumn={canRemoveColumn}
+								/>
+							);
+						})}
+					</tr>
+				</SortableContext>
+			</DndContext>
+		);
+	}, [
+		sensors,
+		handleDragEnd,
+		columnIds,
+		flatHeaders,
+		columnsById,
+		isDarkMode,
+		hasSingleColumn,
+		onRemoveColumn,
+		canRemoveColumn,
+	]);
+
+	const handleEndReached = useCallback(
+		(index: number): void => {
+			onEndReached?.(index);
+		},
+		[onEndReached],
+	);
+
+	useImperativeHandle(
+		forwardedRef,
+		(): TanStackTableHandle =>
+			new Proxy(
+				{
+					goToPage: (p: number): void => {
+						setPage(p);
+						virtuosoRef.current?.scrollToIndex({
+							index: 0,
+							align: 'start',
+						});
+					},
+				} as TanStackTableHandle,
+				{
+					get(target, prop): unknown {
+						if (prop in target) {
+							return Reflect.get(target, prop);
+						}
+						const v = (virtuosoRef.current as unknown) as Record<string, unknown>;
+						const value = v?.[prop as string];
+						if (typeof value === 'function') {
+							return (value as (...a: unknown[]) => unknown).bind(virtuosoRef.current);
+						}
+						return value;
+					},
+				},
+			),
+		[setPage],
+	);
+
+	const showPagination = Boolean(pagination && !onEndReached);
+
+	const { className: tableScrollerClassName, ...restTableScrollerProps } =
+		tableScrollerProps ?? {};
+
+	const cellTypographyClass = useMemo((): string | undefined => {
+		if (cellTypographySize === 'small') {
+			return viewStyles.cellTypographySmall;
+		}
+		if (cellTypographySize === 'medium') {
+			return viewStyles.cellTypographyMedium;
+		}
+		if (cellTypographySize === 'large') {
+			return viewStyles.cellTypographyLarge;
+		}
+		return undefined;
+	}, [cellTypographySize]);
+
+	const virtuosoClassName = useMemo(
+		() =>
+			cx(
+				viewStyles.tanstackTableVirtuosoScroll,
+				cellTypographyClass,
+				tableScrollerClassName,
+			),
+		[cellTypographyClass, tableScrollerClassName],
+	);
+
+	const virtuosoTableStyle = useMemo(
+		() =>
+			({
+				'--tanstack-plain-body-line-clamp': plainTextCellLineClamp,
+			} as CSSProperties),
+		[plainTextCellLineClamp],
+	);
+
+	type VirtuosoTableComponentProps = ComponentProps<
+		NonNullable<TableComponents<FlatItem<TData>, TableRowContext<TData>>['Table']>
+	>;
+
+	const virtuosoComponents = useMemo(
+		() => ({
+			Table: ({ style, children }: VirtuosoTableComponentProps): JSX.Element => (
+				<table className={tableStyles.tanStackTable} style={style}>
+					<VirtuosoTableColGroup
+						columns={columns}
+						columnSizingProp={columnSizingProp}
+						table={table}
+					/>
+					{children}
+				</table>
+			),
+			TableRow: TanStackCustomTableRow,
+		}),
+		[columns, columnSizingProp, table],
+	);
+
+	return (
+		<div className={viewStyles.tanstackTableViewWrapper}>
+			<RowHoverProvider>
+				<TooltipProvider>
+					<TableVirtuoso<FlatItem<TData>, TableRowContext<TData>>
+						className={virtuosoClassName}
+						ref={virtuosoRef}
+						{...restTableScrollerProps}
+						data={flatItems}
+						totalCount={flatItems.length}
+						context={virtuosoContext}
+						increaseViewportBy={INCREASE_VIEWPORT_BY}
+						initialTopMostItemIndex={
+							flatIndexForActiveRow >= 0 ? flatIndexForActiveRow : 0
+						}
+						fixedHeaderContent={tableHeader}
+						itemContent={itemContent}
+						style={virtuosoTableStyle}
+						components={virtuosoComponents}
+						endReached={onEndReached ? handleEndReached : undefined}
+					/>
+					{isLoading && (
+						<div className={viewStyles.tanstackLoadingOverlay}>
+							<Spinner height="35px" tip={loadingTip} />
+						</div>
+					)}
+					{showPagination && pagination && (
+						<Pagination
+							style={PAGINATION_STYLE}
+							current={page}
+							pageSize={limit}
+							total={pagination.total}
+							showSizeChanger
+							onChange={(p, ps): void => {
+								setPage(p);
+								if (ps != null && ps !== limit) {
+									setLimit(ps);
+								}
+							}}
+						/>
+					)}
+				</TooltipProvider>
+			</RowHoverProvider>
+		</div>
+	);
+}
+
+const TanStackTableForward = forwardRef(TanStackTableInner) as <TData>(
+	props: TanStackTableProps<TData> & {
+		ref?: React.Ref<TanStackTableHandle>;
+	},
+) => JSX.Element;
+
+const TanStackTableBase = memo(
+	TanStackTableForward,
+) as typeof TanStackTableForward;
+
+/**
+ * Virtualized data table built on TanStack Table and `react-virtuoso`: resizable and pinnable columns,
+ * optional drag-to-reorder headers, expandable rows, and Ant Design pagination or infinite scroll.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import TanStackTable from 'components/TanStackTableView';
+ * import type { TableColumnDef } from 'components/TanStackTableView/types';
+ *
+ * type Row = { id: string; name: string };
+ *
+ * const columns: TableColumnDef<Row>[] = [
+ *   {
+ *     id: 'name',
+ *     header: 'Name',
+ *     accessorKey: 'name',
+ *     cell: ({ value }) => <TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>,
+ *   },
+ * ];
+ *
+ * function Example(): JSX.Element {
+ *   return <TanStackTable<Row> data={rows} columns={columns} />;
+ * }
+ * ```
+ *
+ * @example Column definitions — `accessorFn`, custom header, pinned column
+ * ```tsx
+ * const columns: TableColumnDef<Row>[] = [
+ *   {
+ *     id: 'id',
+ *     header: 'ID',
+ *     accessorKey: 'id',
+ *     pin: 'left',
+ *     width: { min: 80, default: 120 },
+ *     cell: ({ value }) => <TanStackTable.Text>{String(value)}</TanStackTable.Text>,
+ *   },
+ *   {
+ *     id: 'computed',
+ *     header: () => <span>Computed</span>,
+ *     accessorFn: (row) => row.first + row.last,
+ *     enableMove: false,
+ *     cell: ({ value }) => <TanStackTable.Text>{String(value)}</TanStackTable.Text>,
+ *   },
+ * ];
+ * ```
+ *
+ * @example Controlled column sizing and reorder (persist in parent state)
+ * ```tsx
+ * import type { ColumnSizingState } from '@tanstack/react-table';
+ *
+ * const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
+ *
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   columnSizing={columnSizing}
+ *   onColumnSizingChange={setColumnSizing}
+ *   onColumnOrderChange={setColumns}
+ *   onRemoveColumn={(id) => setColumns((cols) => cols.filter((c) => c.id !== id))}
+ * />
+ * ```
+ *
+ * @example Pagination (Ant Design). Omit `onEndReached` so the footer pager is shown.
+ * ```tsx
+ * <TanStackTable
+ *   data={pageRows}
+ *   columns={columns}
+ *   pagination={{ total: totalCount, defaultPage: 1, defaultLimit: 20 }}
+ *   enableQueryParams
+ * />
+ * ```
+ *
+ * @example Infinite scroll — use `onEndReached` instead of `pagination` (pagination UI is hidden when `onEndReached` is set).
+ * ```tsx
+ * <TanStackTable
+ *   data={accumulatedRows}
+ *   columns={columns}
+ *   onEndReached={(lastIndex) => fetchMore(lastIndex)}
+ * />
+ * ```
+ *
+ * @example Loading overlay and typography for plain string/number cells
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   isLoading={isFetching}
+ *   loadingTip="Loading logs…"
+ *   cellTypographySize="small"
+ *   plainTextCellLineClamp={2}
+ * />
+ * ```
+ *
+ * @example Row styling, selection, and actions
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   isRowActive={(row) => row.id === selectedId}
+ *   activeRowIndex={selectedIndex}
+ *   onRowClick={(row) => setSelectedId(row.id)}
+ *   onRowDeactivate={() => setSelectedId(undefined)}
+ *   getRowClassName={(row) => (row.severity === 'error' ? 'row-error' : '')}
+ *   getRowStyle={(row) => (row.dimmed ? { opacity: 0.5 } : {})}
+ *   renderRowActions={(row) => <Button size="small">Open</Button>}
+ * />
+ * ```
+ *
+ * @example Expandable rows
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   renderExpandedRow={(row) => <pre>{JSON.stringify(row.raw, null, 2)}</pre>}
+ *   getRowCanExpand={(row) => Boolean(row.raw)}
+ * />
+ * ```
+ *
+ * @example Imperative handle — `goToPage` plus Virtuoso methods (e.g. `scrollToIndex`)
+ * ```tsx
+ * import type { TanStackTableHandle } from 'components/TanStackTableView/types';
+ *
+ * const ref = useRef<TanStackTableHandle>(null);
+ *
+ * <TanStackTable ref={ref} data={data} columns={columns} pagination={{ total, defaultLimit: 20 }} />;
+ *
+ * ref.current?.goToPage(2);
+ * ref.current?.scrollToIndex({ index: 0, align: 'start' });
+ * ```
+ *
+ * @example Scroll container props (className, `data-testid`, etc.). `data` is reserved by Virtuoso and cannot be passed here.
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   tableScrollerProps={{ className: 'my-table-scroll', 'data-testid': 'logs-table' }}
+ * />
+ * ```
+ */
+const TanStackTable = Object.assign(TanStackTableBase, {
+	Text: TanStackTableText,
+});
+
+export default TanStackTable;

frontend/src/components/TanStackTableView/types.ts

@@ -0,0 +1,112 @@
+import {
+	CSSProperties,
+	Dispatch,
+	HTMLAttributes,
+	ReactNode,
+	SetStateAction,
+} from 'react';
+import type { TableVirtuosoHandle } from 'react-virtuoso';
+import type {
+	ColumnSizingState,
+	Row as TanStackRowType,
+} from '@tanstack/react-table';
+
+export type SortState = { columnId: string; desc: boolean };
+
+/** Sets `--tanstack-plain-cell-*` on the scroll root via CSS module classes (no data attributes). */
+export type CellTypographySize = 'small' | 'medium' | 'large';
+
+export type TableCellContext<TData> = {
+	row: TData;
+	value: unknown;
+	isActive: boolean;
+	rowIndex: number;
+	isExpanded: boolean;
+	canExpand: boolean;
+	toggleExpanded: () => void;
+};
+
+export type TableColumnDef<TData> = {
+	id: string;
+	header: string | (() => ReactNode);
+	cell: (context: TableCellContext<TData>) => ReactNode;
+	accessorKey?: keyof TData & string;
+	accessorFn?: (row: TData) => unknown;
+	pin?: 'left' | 'right';
+	enableMove?: boolean;
+	enableResize?: boolean;
+	enableRemove?: boolean;
+	enableSort?: boolean;
+	width?: {
+		fixed?: number;
+		min?: number;
+		default?: number;
+	};
+};
+
+export type FlatItem<TData> =
+	| { kind: 'row'; row: TanStackRowType<TData> }
+	| { kind: 'expansion'; row: TanStackRowType<TData> };
+
+export type TableRowContext<TData> = {
+	getRowStyle?: (row: TData) => CSSProperties;
+	getRowClassName?: (row: TData) => string;
+	isRowActive?: (row: TData) => boolean;
+	renderRowActions?: (row: TData) => ReactNode;
+	onRowClick?: (row: TData) => void;
+	onRowDeactivate?: () => void;
+	renderExpandedRow?: (row: TData) => ReactNode;
+	colCount: number;
+	isDarkMode?: boolean;
+	/** When set, primitive cell output (string/number/boolean) is wrapped with typography + line-clamp (see `plainTextCellLineClamp` on the table). */
+	plainTextCellLineClamp?: number;
+};
+
+export type PaginationProps = {
+	total: number;
+	defaultPage?: number;
+	defaultLimit?: number;
+};
+
+export type TanStackTableProps<TData> = {
+	data: TData[];
+	columns: TableColumnDef<TData>[];
+	columnSizing?: ColumnSizingState;
+	onColumnSizingChange?: Dispatch<SetStateAction<ColumnSizingState>>;
+	onColumnOrderChange?: (cols: TableColumnDef<TData>[]) => void;
+	onRemoveColumn?: (id: string) => void;
+	isLoading?: boolean;
+	loadingTip?: string;
+	enableQueryParams?: boolean | string;
+	pagination?: PaginationProps;
+	onEndReached?: (index: number) => void;
+	getRowStyle?: (row: TData) => CSSProperties;
+	getRowClassName?: (row: TData) => string;
+	isRowActive?: (row: TData) => boolean;
+	renderRowActions?: (row: TData) => ReactNode;
+	onRowClick?: (row: TData) => void;
+	onRowDeactivate?: () => void;
+	activeRowIndex?: number;
+	renderExpandedRow?: (row: TData) => ReactNode;
+	getRowCanExpand?: (row: TData) => boolean;
+	/**
+	 * Primitive cell values use `--tanstack-plain-cell-*` from the scroll container when `cellTypographySize` is set.
+	 */
+	plainTextCellLineClamp?: number;
+	/** Optional CSS-module typography tier for the scroll root (`--tanstack-plain-cell-font-size` / line-height + header `th`). */
+	cellTypographySize?: CellTypographySize;
+	/** Spread onto the Virtuoso scroll container. `data` is omitted — reserved by Virtuoso. */
+	tableScrollerProps?: Omit<HTMLAttributes<HTMLDivElement>, 'data'>;
+};
+
+export type TanStackTableHandle = TableVirtuosoHandle & {
+	goToPage: (page: number) => void;
+};
+
+export type TableColumnsState<TData> = {
+	columns: TableColumnDef<TData>[];
+	columnSizing: ColumnSizingState;
+	onColumnSizingChange: Dispatch<SetStateAction<ColumnSizingState>>;
+	onColumnOrderChange: (cols: TableColumnDef<TData>[]) => void;
+	onRemoveColumn: (id: string) => void;
+};

frontend/src/components/TanStackTableView/useTableColumns.ts

@@ -0,0 +1,200 @@
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { ColumnSizingState } from '@tanstack/react-table';
+import getFromLocalstorage from 'api/browser/localstorage/get';
+import setToLocalstorage from 'api/browser/localstorage/set';
+
+import { TableColumnDef, TableColumnsState } from './types';
+
+const DEBOUNCE_MS = 250;
+
+type PersistedState = {
+	columnOrder: string[];
+	columnSizing: ColumnSizingState;
+	removedColumnIds: string[];
+};
+
+const EMPTY: PersistedState = {
+	columnOrder: [],
+	columnSizing: {},
+	removedColumnIds: [],
+};
+
+function readStorage(storageKey: string): PersistedState {
+	const raw = getFromLocalstorage(storageKey);
+	if (!raw) {
+		return EMPTY;
+	}
+	try {
+		const parsed = JSON.parse(raw) as PersistedState;
+		return {
+			columnOrder: Array.isArray(parsed.columnOrder) ? parsed.columnOrder : [],
+			columnSizing:
+				parsed.columnSizing && typeof parsed.columnSizing === 'object'
+					? Object.fromEntries(
+							Object.entries(parsed.columnSizing).filter(
+								([, v]) => typeof v === 'number' && Number.isFinite(v) && v > 0,
+							),
+					  )
+					: {},
+			removedColumnIds: Array.isArray(parsed.removedColumnIds)
+				? parsed.removedColumnIds
+				: [],
+		};
+	} catch (e) {
+		console.error('useTableColumns: failed to parse storage', e);
+		return EMPTY;
+	}
+}
+
+type UseTableColumnsOptions = { storageKey?: string };
+
+type UseTableColumnsResult<TData> = {
+	tableProps: TableColumnsState<TData>;
+	activeColumnIds: string[];
+};
+
+export function useTableColumns<TData>(
+	definitions: TableColumnDef<TData>[],
+	options?: UseTableColumnsOptions,
+): UseTableColumnsResult<TData> {
+	const { storageKey } = options ?? {};
+
+	const [persisted, setPersisted] = useState<PersistedState>(() =>
+		storageKey ? readStorage(storageKey) : EMPTY,
+	);
+
+	const [columnSizing, setColumnSizing] = useState<ColumnSizingState>(
+		() => persisted.columnSizing,
+	);
+
+	const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const persistedRef = useRef(persisted);
+	persistedRef.current = persisted;
+	const columnSizingRef = useRef(columnSizing);
+	columnSizingRef.current = columnSizing;
+
+	const scheduleWrite = useCallback(() => {
+		if (!storageKey) {
+			return;
+		}
+		if (pendingRef.current !== null) {
+			clearTimeout(pendingRef.current);
+		}
+		pendingRef.current = setTimeout(() => {
+			setToLocalstorage(
+				storageKey,
+				JSON.stringify({
+					...persistedRef.current,
+					columnSizing: columnSizingRef.current,
+				}),
+			);
+		}, DEBOUNCE_MS);
+	}, [storageKey]);
+
+	useEffect(() => {
+		scheduleWrite();
+		return (): void => {
+			if (pendingRef.current !== null) {
+				clearTimeout(pendingRef.current);
+			}
+		};
+	}, [columnSizing, scheduleWrite]);
+
+	const handleColumnSizingChange: Dispatch<
+		SetStateAction<ColumnSizingState>
+	> = useCallback((updater) => {
+		setColumnSizing((prev) =>
+			typeof updater === 'function' ? updater(prev) : updater,
+		);
+	}, []);
+
+	const handleColumnOrderChange = useCallback(
+		(updated: TableColumnDef<TData>[]) => {
+			const newOrder = updated.map((c) => c.id);
+			setPersisted((prev) => {
+				const next = { ...prev, columnOrder: newOrder };
+				if (storageKey) {
+					setToLocalstorage(
+						storageKey,
+						JSON.stringify({
+							...next,
+							columnSizing: columnSizingRef.current,
+						}),
+					);
+				}
+				return next;
+			});
+		},
+		[storageKey],
+	);
+
+	const handleRemoveColumn = useCallback(
+		(id: string) => {
+			setPersisted((prev) => {
+				if (prev.removedColumnIds.includes(id)) {
+					return prev;
+				}
+				const next = {
+					...prev,
+					removedColumnIds: [...prev.removedColumnIds, id],
+				};
+				if (storageKey) {
+					if (pendingRef.current !== null) {
+						clearTimeout(pendingRef.current);
+					}
+					pendingRef.current = setTimeout(() => {
+						setToLocalstorage(
+							storageKey,
+							JSON.stringify({
+								...next,
+								columnSizing: columnSizingRef.current,
+							}),
+						);
+					}, DEBOUNCE_MS);
+				}
+				return next;
+			});
+		},
+		[storageKey],
+	);
+
+	const columns = useMemo<TableColumnDef<TData>[]>(() => {
+		const removedSet = new Set(persisted.removedColumnIds);
+		const active = definitions.filter((d) => !removedSet.has(d.id));
+
+		if (persisted.columnOrder.length === 0) {
+			return active;
+		}
+
+		const orderMap = new Map(persisted.columnOrder.map((id, i) => [id, i]));
+		const pinned = active.filter((c) => c.pin != null);
+		const rest = active.filter((c) => c.pin == null);
+		const sortedRest = [...rest].sort((a, b) => {
+			const ai = orderMap.get(a.id) ?? Infinity;
+			const bi = orderMap.get(b.id) ?? Infinity;
+			return ai - bi;
+		});
+		return [...pinned, ...sortedRest];
+	}, [definitions, persisted]);
+
+	const activeColumnIds = useMemo(() => columns.map((c) => c.id), [columns]);
+
+	return {
+		tableProps: {
+			columns,
+			columnSizing,
+			onColumnSizingChange: handleColumnSizingChange,
+			onColumnOrderChange: handleColumnOrderChange,
+			onRemoveColumn: handleRemoveColumn,
+		},
+		activeColumnIds,
+	};
+}

frontend/src/components/TanStackTableView/useTableParams.ts

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { parseAsInteger, useQueryState } from 'nuqs';
+import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
+
+import { SortState } from './types';
+
+const NUQS_OPTIONS = { history: 'push' as const };
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 50;
+
+type Defaults = { page?: number; limit?: number; orderBy?: SortState | null };
+
+type TableParamsResult = {
+	page: number;
+	limit: number;
+	orderBy: SortState | null;
+	setPage: (p: number) => void;
+	setLimit: (l: number) => void;
+	setOrderBy: (s: SortState | null) => void;
+};
+
+export function useTableParams(
+	enableQueryParams?: boolean | string,
+	defaults?: Defaults,
+): TableParamsResult {
+	const prefix = typeof enableQueryParams === 'string' ? enableQueryParams : '';
+	const sep = prefix ? '_' : '';
+	const pageDefault = defaults?.page ?? DEFAULT_PAGE;
+	const limitDefault = defaults?.limit ?? DEFAULT_LIMIT;
+	const orderByDefault = defaults?.orderBy ?? null;
+
+	const [localPage, setLocalPage] = useState(pageDefault);
+	const [localLimit, setLocalLimit] = useState(limitDefault);
+	const [localOrderBy, setLocalOrderBy] = useState<SortState | null>(
+		orderByDefault,
+	);
+
+	const [urlPage, setUrlPage] = useQueryState(
+		`${prefix}${sep}page`,
+		parseAsInteger.withDefault(pageDefault).withOptions(NUQS_OPTIONS),
+	);
+	const [urlLimit, setUrlLimit] = useQueryState(
+		`${prefix}${sep}limit`,
+		parseAsInteger.withDefault(limitDefault).withOptions(NUQS_OPTIONS),
+	);
+	const [urlOrderBy, setUrlOrderBy] = useQueryState(
+		`${prefix}${sep}order_by`,
+		parseAsJsonNoValidate<SortState | null>()
+			.withDefault(orderByDefault as never)
+			.withOptions(NUQS_OPTIONS),
+	);
+
+	if (enableQueryParams) {
+		return {
+			page: urlPage,
+			limit: urlLimit,
+			orderBy: urlOrderBy as SortState | null,
+			setPage: setUrlPage,
+			setLimit: setUrlLimit,
+			setOrderBy: setUrlOrderBy,
+		};
+	}
+
+	return {
+		page: localPage,
+		limit: localLimit,
+		orderBy: localOrderBy,
+		setPage: setLocalPage,
+		setLimit: setLocalLimit,
+		setOrderBy: setLocalOrderBy,
+	};
+}

frontend/src/components/TanStackTableView/utils.ts

@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+
+import { TableColumnDef } from './types';
+
+export const getColumnId = <TData>(column: TableColumnDef<TData>): string =>
+	column.id;
+
+const REM_PX = 16;
+const MIN_WIDTH_DEFAULT_REM = 12;
+
+export const getColumnMinWidthPx = <TData>(
+	column: TableColumnDef<TData>,
+): number => {
+	if (column.width?.fixed != null) {
+		return column.width.fixed;
+	}
+	if (column.width?.min != null) {
+		return column.width.min;
+	}
+	return MIN_WIDTH_DEFAULT_REM * REM_PX;
+};
+
+export function buildTanstackColumnDef<TData>(
+	colDef: TableColumnDef<TData>,
+	isRowActive?: (row: TData) => boolean,
+): ColumnDef<TData> {
+	const isFixed = colDef.width?.fixed != null;
+	const fixedWidth = colDef.width?.fixed;
+	const minWidthPx = getColumnMinWidthPx(colDef);
+	return {
+		id: colDef.id,
+		header:
+			typeof colDef.header === 'string'
+				? colDef.header
+				: (): ReactNode =>
+						typeof colDef.header === 'function' ? colDef.header() : null,
+		accessorFn: (row: TData): unknown => {
+			if (colDef.accessorFn) {
+				return colDef.accessorFn(row);
+			}
+			if (colDef.accessorKey) {
+				return (row as Record<string, unknown>)[colDef.accessorKey];
+			}
+			return undefined;
+		},
+		enableResizing: colDef.enableResize !== false && !isFixed,
+		enableSorting: colDef.enableSort === true,
+		minSize: fixedWidth ?? minWidthPx,
+		size: colDef.width?.default ?? fixedWidth,
+		maxSize: fixedWidth,
+		cell: ({ row, getValue }): ReactNode => {
+			const rowData = row.original;
+			return colDef.cell({
+				row: rowData,
+				value: getValue(),
+				isActive: isRowActive?.(rowData) ?? false,
+				rowIndex: row.index,
+				isExpanded: row.getIsExpanded(),
+				canExpand: row.getCanExpand(),
+				toggleExpanded: (): void => {
+					row.toggleExpanded();
+				},
+			});
+		},
+	};
+}

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

@@ -1,21 +1,34 @@
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { toast } from '@signozhq/sonner';
 import { Card, Typography } from 'antd';
 import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
+import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
+import { getRowBackgroundColor } from 'components/Logs/LogStateIndicator/getRowBackgroundColor';
+import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import RawLogView from 'components/Logs/RawLogView';
+import { useLogsTableColumns } from 'components/Logs/TableView/useLogsTableColumns';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import TanStackTable from 'components/TanStackTableView';
+import type { TanStackTableHandle } from 'components/TanStackTableView/types';
+import { useTableColumns } from 'components/TanStackTableView/useTableColumns';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { OptionFormatTypes } from 'constants/optionsFormatTypes';
+import { QueryParams } from 'constants/query';
 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';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useEventSource } from 'providers/EventSource';
 // interfaces
 import { ILog } from 'types/api/logs/log';
@@ -30,7 +43,10 @@ function LiveLogsList({
 	isLoading,
 	handleChangeSelectedView,
 }: LiveLogsListProps): JSX.Element {
-	const ref = useRef<VirtuosoHandle>(null);
+	const ref = useRef<TanStackTableHandle | VirtuosoHandle | null>(null);
+	const { pathname } = useLocation();
+	const [, setCopy] = useCopyToClipboard();
+	const isDarkMode = useIsDarkMode();
 
 	const { isConnectionLoading } = useEventSource();
 
@@ -66,9 +82,46 @@ function LiveLogsList({
 		...options.selectColumns,
 	]);
 
+	const logsColumns = useLogsTableColumns({
+		fields: selectedFields,
+		linesPerRow: options.maxLines,
+		fontSize: options.fontSize,
+		appendTo: 'end',
+	});
+
+	const { tableProps } = useTableColumns(logsColumns, {
+		storageKey: LOCALSTORAGE.LOGS_LIST_COLUMNS,
+	});
+
+	const handleRemoveColumn = useCallback(
+		(columnId: string): void => {
+			tableProps.onRemoveColumn(columnId);
+			config.addColumn?.onRemove?.(columnId);
+		},
+		[tableProps, config.addColumn],
+	);
+
+	const makeOnLogCopy = useCallback(
+		(log: ILog) => (event: MouseEvent<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, `"${log.id}"`);
+			const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
+			setCopy(link);
+			toast.success('Copied to clipboard', { position: 'top-right' });
+		},
+		[pathname, setCopy],
+	);
+
 	const handleScrollToLog = useScrollToLog({
 		logs: formattedLogs,
-		virtuosoRef: ref,
+		virtuosoRef: ref as React.RefObject<Pick<
+			VirtuosoHandle,
+			'scrollToIndex'
+		> | null>,
 	});
 
 	const getItemContent = useCallback(
@@ -158,29 +211,48 @@ function LiveLogsList({
 			{formattedLogs.length !== 0 && (
 				<InfinityWrapperStyled>
 					{options.format === OptionFormatTypes.TABLE ? (
-						<TanStackTableView
-							ref={ref}
+						<TanStackTable
+							ref={ref as React.Ref<TanStackTableHandle>}
+							{...tableProps}
+							plainTextCellLineClamp={options.maxLines}
+							cellTypographySize={options.fontSize}
+							onRemoveColumn={handleRemoveColumn}
+							data={formattedLogs}
 							isLoading={false}
-							tableViewProps={{
-								logs: formattedLogs,
-								fields: selectedFields,
-								linesPerRow: options.maxLines,
-								fontSize: options.fontSize,
-								appendTo: 'end',
-								activeLogIndex,
+							isRowActive={(log): boolean => log.id === activeLog?.id}
+							getRowStyle={(log): CSSProperties =>
+								({
+									'--row-active-bg': getRowBackgroundColor(
+										isDarkMode,
+										getLogIndicatorType(log),
+									),
+									'--row-hover-bg': getRowBackgroundColor(
+										isDarkMode,
+										getLogIndicatorType(log),
+									),
+								} as CSSProperties)
+							}
+							onRowClick={(log): void => {
+								handleSetActiveLog(log);
 							}}
-							handleChangeSelectedView={handleChangeSelectedView}
-							logs={formattedLogs}
-							onSetActiveLog={handleSetActiveLog}
-							onClearActiveLog={handleCloseLogDetail}
-							activeLog={activeLog}
-							onRemoveColumn={config.addColumn?.onRemove}
+							onRowDeactivate={handleCloseLogDetail}
+							activeRowIndex={activeLogIndex}
+							renderRowActions={(log): ReactNode => (
+								<LogLinesActionButtons
+									handleShowContext={(e): void => {
+										e.preventDefault();
+										e.stopPropagation();
+										handleSetActiveLog(log, VIEW_TYPES.CONTEXT);
+									}}
+									onLogCopy={makeOnLogCopy(log)}
+								/>
+							)}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
 							<OverlayScrollbar isVirtuoso>
 								<Virtuoso
-									ref={ref}
+									ref={ref as React.Ref<VirtuosoHandle>}
 									initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
 									data={formattedLogs}
 									totalCount={formattedLogs.length}

frontend/src/container/LogsExplorerList/ColumnView/ColumnView.tsx

@@ -221,7 +221,7 @@ function ColumnView({
 		onColumnOrderChange(formattedColumns);
 	};
 
-	const handleRowClick = (row: Row<Record<string, unknown>>): void => {
+	const handleRowClick = (row: Row<Record<string, string>>): void => {
 		const currentLog = logs.find(({ id }) => id === row.original.id);
 
 		setShowActiveLog(true);

frontend/src/container/LogsExplorerList/RowHoverContext.tsx

@@ -1,8 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { createContext, useContext } from 'react';
-
-const RowHoverContext = createContext(false);
-
-export const useRowHover = (): boolean => useContext(RowHoverContext);
-
-export default RowHoverContext;

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

@@ -1,84 +0,0 @@
-import { ComponentProps, memo, useCallback, useState } 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 RowHoverContext from '../RowHoverContext';
-import { TanStackTableRowData } from './types';
-
-export type TableRowContext = {
-	activeLog?: ILog | null;
-	activeContextLog?: ILog | null;
-	logsById: Map<string, ILog>;
-};
-
-type VirtuosoTableRowProps = ComponentProps<
-	NonNullable<TableComponents<TanStackTableRowData, TableRowContext>['TableRow']>
->;
-
-type TanStackCustomTableRowProps = VirtuosoTableRowProps;
-
-function TanStackCustomTableRow({
-	children,
-	item,
-	context,
-	...props
-}: TanStackCustomTableRowProps): JSX.Element {
-	const { isHighlighted } = useCopyLogLink(item.currentLog.id);
-	const isDarkMode = useIsDarkMode();
-	const [hasHovered, setHasHovered] = useState(false);
-	const rowId = String(item.currentLog.id ?? '');
-	const activeLog = context?.activeLog;
-	const activeContextLog = context?.activeContextLog;
-	const logsById = context?.logsById;
-	const rowLog = logsById?.get(rowId) || item.currentLog;
-	const logType = rowLog
-		? getLogIndicatorType(rowLog)
-		: getLogIndicatorTypeForTable(item.log);
-
-	const handleMouseEnter = useCallback(() => {
-		if (!hasHovered) {
-			setHasHovered(true);
-		}
-	}, [hasHovered]);
-
-	return (
-		<RowHoverContext.Provider value={hasHovered}>
-			<TableRowStyled
-				{...props}
-				$isDarkMode={isDarkMode}
-				$isActiveLog={
-					isHighlighted ||
-					rowId === String(activeLog?.id ?? '') ||
-					rowId === String(activeContextLog?.id ?? '')
-				}
-				$logType={logType}
-				onMouseEnter={handleMouseEnter}
-			>
-				{children}
-			</TableRowStyled>
-		</RowHoverContext.Provider>
-	);
-}
-
-export default memo(TanStackCustomTableRow, (prev, next) => {
-	const prevId = String(prev.item.currentLog.id ?? '');
-	const nextId = String(next.item.currentLog.id ?? '');
-	if (prevId !== nextId) {
-		return false;
-	}
-
-	const prevIsActive =
-		prevId === String(prev.context?.activeLog?.id ?? '') ||
-		prevId === String(prev.context?.activeContextLog?.id ?? '');
-	const nextIsActive =
-		nextId === String(next.context?.activeLog?.id ?? '') ||
-		nextId === String(next.context?.activeContextLog?.id ?? '');
-	return prevIsActive === nextIsActive;
-});

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

@@ -1,95 +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 { useRowHover } from '../RowHoverContext';
-import { TanStackTableRowData } from './types';
-
-type TanStackRowCellsProps = {
-	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 TanStackRowCells({
-	row,
-	fontSize,
-	onSetActiveLog,
-	onClearActiveLog,
-	isActiveLog = false,
-	isDarkMode,
-	onLogCopy,
-	isLogsExplorerPage,
-}: TanStackRowCellsProps): JSX.Element {
-	const { currentLog } = row.original;
-	const hasHovered = useRowHover();
-
-	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]);
-
-	const visibleCells = row.getVisibleCells();
-	const lastCellIndex = visibleCells.length - 1;
-
-	return (
-		<>
-			{visibleCells.map((cell, index) => {
-				const columnKey = cell.column.id;
-				const isLastCell = index === lastCellIndex;
-				return (
-					<TableCellStyled
-						$isDragColumn={false}
-						$isLogIndicator={columnKey === 'state-indicator'}
-						$hasSingleColumn={visibleCells.length <= 2}
-						$isDarkMode={isDarkMode}
-						key={cell.id}
-						fontSize={fontSize}
-						className={columnKey}
-						onClick={handleShowLogDetails}
-					>
-						{flexRender(cell.column.columnDef.cell, cell.getContext())}
-						{isLastCell && isLogsExplorerPage && hasHovered && (
-							<LogLinesActionButtons
-								handleShowContext={handleShowContext}
-								onLogCopy={(event): void => onLogCopy(currentLog.id, event)}
-								customClassName="table-view-log-actions"
-							/>
-						)}
-					</TableCellStyled>
-				);
-			})}
-		</>
-	);
-}
-
-export default TanStackRowCells;

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

@@ -1,105 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import TanStackCustomTableRow, {
-	TableRowContext,
-} 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,
-};
-
-const virtuosoTableRowAttrs = {
-	'data-index': 0,
-	'data-item-index': 0,
-	'data-known-size': 40,
-} as const;
-
-const defaultContext: TableRowContext = {
-	activeLog: null,
-	activeContextLog: null,
-	logsById: new Map(),
-};
-
-describe('TanStackCustomTableRow', () => {
-	it('renders children inside TableRowStyled', () => {
-		render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoTableRowAttrs}
-						item={item}
-						context={defaultContext}
-					>
-						<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}
-						context={{
-							...defaultContext,
-							activeLog: { id: 'row-1' } as never,
-						}}
-					>
-						<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}
-						context={{
-							...defaultContext,
-							logsById: new Map([['row-1', logFromMap]]),
-						}}
-					>
-						<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,193 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import RowHoverContext from 'container/LogsExplorerList/RowHoverContext';
-import { FontSize } from 'container/OptionsMenu/types';
-
-import TanStackRowCells 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 TanStackRowCells>[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('TanStackRowCells', () => {
-	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>
-						<TanStackRowCells
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		expect(screen.getAllByRole('cell')).toHaveLength(2);
-		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>
-						<TanStackRowCells
-							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 after hover', () => {
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		render(
-			<RowHoverContext.Provider value>
-				<table>
-					<tbody>
-						<tr>
-							<TanStackRowCells
-								row={row}
-								fontSize={FontSize.SMALL}
-								isDarkMode={false}
-								onLogCopy={jest.fn()}
-								isLogsExplorerPage
-							/>
-						</tr>
-					</tbody>
-				</table>
-			</RowHoverContext.Provider>,
-		);
-
-		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>
-						<TanStackRowCells
-							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('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>
-						<TanStackRowCells
-							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(onColumnOrderChange).toHaveBeenCalledWith([
-			expect.objectContaining({ key: 'b' }),
-			expect.objectContaining({ key: 'c' }),
-			expect.objectContaining({ key: 'a' }),
-		]);
-
-		// Derived-only: orderedColumns should remain until draggedColumns (URL/localStorage) updates.
-		expect(result.current.orderedColumns.map((c) => c.key)).toEqual([
-			'a',
-			'b',
-			'c',
-		]);
-	});
-
-	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,433 +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 { 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 { useIsDarkMode } from 'hooks/useDarkMode';
-import useDragColumns from 'hooks/useDragColumns';
-
-import { infinityDefaultStyles } from '../InfinityTableView/config';
-import { TanStackTableStyled } from '../InfinityTableView/styles';
-import { InfinityTableProps } from '../InfinityTableView/types';
-import TanStackCustomTableRow from './TanStackCustomTableRow';
-import TanStackHeaderRow from './TanStackHeaderRow';
-import TanStackRowCells 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 './styles/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,
-			tableViewProps,
-			infitiyTableProps,
-			onSetActiveLog,
-			onClearActiveLog,
-			activeLog,
-		}: InfinityTableProps,
-		forwardedRef,
-	): JSX.Element {
-		const { pathname } = useLocation();
-		const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
-		// could avoid this if directly use forwardedRef in TableVirtuoso, but need to verify if it causes any issue with react-virtuoso internal ref handling
-		useImperativeHandle(
-			forwardedRef,
-			() => virtuosoRef.current as TableVirtuosoHandle,
-			[],
-		);
-		const [, setCopy] = useCopyToClipboard();
-		const isDarkMode = useIsDarkMode();
-		const isLogsExplorerPage = pathname === ROUTES.LOGS_EXPLORER;
-		const { activeLog: activeContextLog } = useActiveLog();
-
-		// Column definitions (shared with existing logs table)
-		const { dataSource, columns } = useTableView({
-			...tableViewProps,
-			onClickExpand: onSetActiveLog,
-			onOpenLogsContext: (log): void => onSetActiveLog?.(log, VIEW_TYPES.CONTEXT),
-		});
-
-		// Column order (drag + persisted order)
-		const { draggedColumns, onColumnOrderChange } = useDragColumns<TableRecord>(
-			LOCALSTORAGE.LOGS_LIST_COLUMNS,
-		);
-		const {
-			orderedColumns,
-			orderedColumnIds,
-			hasSingleColumn,
-			handleDragEnd,
-			sensors,
-		} = useOrderedColumns({
-			columns,
-			draggedColumns,
-			onColumnOrderChange: onColumnOrderChange as (columns: unknown[]) => void,
-		});
-
-		// Column sizing (persisted). stored to localStorage.
-		const { columnSizing, setColumnSizing } = useColumnSizingPersistence(
-			orderedColumns,
-		);
-
-		// don't allow "remove column" when only state-indicator + one data col remain
-		const isAtMinimumRemovableColumns = useMemo(
-			() =>
-				orderedColumns.filter(
-					(column) => column.key !== 'state-indicator' && column.key !== 'expand',
-				).length <= 1,
-			[orderedColumns],
-		);
-
-		// Table data (TanStack row data shape)
-		// useTableView sends flattened log data. this would not be needed once we move to new log details view
-		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],
-		);
-
-		// TanStack columns + table instance
-		const tanstackColumns = useMemo<ColumnDef<TanStackTableRowData>[]>(
-			() =>
-				orderedColumns.map((column, index) => {
-					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 && index !== orderedColumns.length - 1,
-						minSize: fixedWidth ?? minWidthPx,
-						size: fixedWidth, // last column gets remaining space, so don't set initial size to avoid conflict with resizing
-						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 table = useReactTable({
-			data: tableData,
-			columns: tanstackColumns,
-			enableColumnResizing: true,
-			getCoreRowModel: getCoreRowModel(),
-			columnResizeMode: 'onChange',
-			onColumnSizingChange: setColumnSizing,
-			state: {
-				columnSizing,
-			},
-		});
-		const tableRows = table.getRowModel().rows;
-
-		// Infinite-scroll footer UI state
-		const [loadMoreState, setLoadMoreState] = useState<{
-			active: boolean;
-			startCount: number;
-		}>({
-			active: false,
-			startCount: 0,
-		});
-
-		// Map to resolve full log object by id (row highlighting + indicator)
-		const logsById = useMemo(
-			() => new Map(tableViewProps.logs.map((log) => [String(log.id), log])),
-			[tableViewProps.logs],
-		);
-
-		// this is already written in parent. Check if this is needed.
-		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 || tableRows.length > loadMoreState.startCount) {
-				setLoadMoreState((prev) =>
-					prev.active ? { active: false, startCount: prev.startCount } : prev,
-				);
-			}
-		}, [isFetching, loadMoreState, tableRows.length]);
-
-		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 itemContent = useCallback(
-			(index: number): JSX.Element | null => {
-				const row = tableRows[index];
-				if (!row) {
-					return null;
-				}
-
-				return (
-					<TanStackRowCells
-						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,
-				tableRows,
-				tableViewProps.fontSize,
-			],
-		);
-
-		const flatHeaders = useMemo(
-			() => table.getFlatHeaders().filter((header) => !header.isPlaceholder),
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-			[tanstackColumns],
-		);
-
-		const tableHeader = useCallback(() => {
-			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}
-									/>
-								);
-							})}
-						</tr>
-					</SortableContext>
-				</DndContext>
-			);
-		}, [
-			flatHeaders,
-			handleDragEnd,
-			hasSingleColumn,
-			isDarkMode,
-			orderedColumnIds,
-			orderedColumns,
-			onRemoveColumn,
-			isAtMinimumRemovableColumns,
-			sensors,
-			tableViewProps.fontSize,
-		]);
-
-		const handleEndReached = useCallback(
-			(index: number): void => {
-				if (!infitiyTableProps?.onEndReached) {
-					return;
-				}
-
-				setLoadMoreState({
-					active: true,
-					startCount: tableRows.length,
-				});
-				infitiyTableProps.onEndReached(index);
-			},
-			[infitiyTableProps, 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={infinityDefaultStyles}
-					data={tableData}
-					totalCount={tableRows.length}
-					increaseViewportBy={{ top: 500, bottom: 500 }}
-					initialTopMostItemIndex={
-						tableViewProps.activeLogIndex !== -1 ? tableViewProps.activeLogIndex : 0
-					}
-					context={{ activeLog, activeContextLog, logsById }}
-					fixedHeaderContent={tableHeader}
-					itemContent={itemContent}
-					components={{
-						Table: ({ style, children }): JSX.Element => (
-							<TanStackTableStyled style={style}>
-								<colgroup>
-									{orderedColumns.map((column, colIndex) => {
-										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" />;
-										}
-										// Last data column should stretch to fill remaining space
-										const isLastColumn = colIndex === orderedColumns.length - 1;
-										if (isLastColumn) {
-											return (
-												<col
-													key={columnId}
-													style={{ width: '100%', minWidth: `${minWidthPx}px` }}
-												/>
-											);
-										}
-										const widthPx =
-											effectiveWidth != null
-												? Math.max(effectiveWidth, minWidthPx)
-												: minWidthPx;
-										return (
-											<col
-												key={columnId}
-												style={{ width: `${widthPx}px`, minWidth: `${minWidthPx}px` }}
-											/>
-										);
-									})}
-								</colgroup>
-								{children}
-							</TanStackTableStyled>
-						),
-						TableRow: TanStackCustomTableRow,
-					}}
-					{...(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/styles/TanStackTableView.styles.scss

@@ -1,55 +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/types.ts

@@ -1,29 +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 = {
-	sizing: ColumnSizingState;
-};

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

@@ -1,111 +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 sanitizeSizing = (input: unknown): ColumnSizingState => {
-	if (!input || typeof input !== 'object') {
-		return {};
-	}
-	return Object.entries(
-		input as Record<string, unknown>,
-	).reduce<ColumnSizingState>((acc, [key, value]) => {
-		if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
-			return acc;
-		}
-		acc[key] = value;
-		return acc;
-	}, {});
-};
-
-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 sanitizeSizing(sizing);
-	} 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],
-	);
-
-	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 = { sizing: columnSizing };
-			setToLocalstorage(
-				LOCALSTORAGE.LOGS_LIST_COLUMN_SIZING,
-				JSON.stringify(persistedSizing),
-			);
-		}, COLUMN_SIZING_PERSIST_DEBOUNCE_MS);
-
-		return (): void => window.clearTimeout(timeoutId);
-	}, [columnSizing]);
-
-	return { columnSizing, setColumnSizing };
-};

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

@@ -1,108 +0,0 @@
-import { useCallback, useMemo } 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 = useMemo(() => {
-		const stateIndicatorIndex = baseColumns.findIndex(
-			(column) => column.key === 'state-indicator',
-		);
-		if (stateIndicatorIndex <= 0) {
-			return baseColumns;
-		}
-		const pinned = baseColumns[stateIndicatorIndex];
-		const rest = baseColumns.filter((_, i) => i !== stateIndicatorIndex);
-		return [pinned, ...rest];
-	}, [baseColumns]);
-
-	const handleDragEnd = useCallback(
-		(event: DragEndEvent): void => {
-			const { active, over } = event;
-			if (!over || active.id === over.id) {
-				return;
-			}
-
-			// Don't allow moving the state-indicator column
-			if (String(active.id) === 'state-indicator') {
-				return;
-			}
-
-			const oldIndex = orderedColumns.findIndex(
-				(column) => getColumnId(column) === String(active.id),
-			);
-			const newIndex = orderedColumns.findIndex(
-				(column) => getColumnId(column) === String(over.id),
-			);
-			if (oldIndex === -1 || newIndex === -1) {
-				return;
-			}
-
-			const nextColumns = arrayMove(orderedColumns, oldIndex, newIndex);
-			onColumnOrderChange(nextColumns as unknown[]);
-		},
-		[onColumnOrderChange, orderedColumns],
-	);
-
-	const orderedColumnIds = useMemo(
-		() => orderedColumns.map((column) => getColumnId(column)),
-		[orderedColumns],
-	);
-	const hasSingleColumn = useMemo(
-		() =>
-			orderedColumns.filter((column) => column.key !== 'state-indicator')
-				.length === 1,
-		[orderedColumns],
-	);
-	const sensors = useSensors(
-		useSensor(PointerSensor, {
-			activationConstraint: { distance: 4 },
-		}),
-	);
-
-	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

@@ -1,16 +1,28 @@
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { toast } from '@signozhq/sonner';
 import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import LogDetail from 'components/LogDetail';
-// components
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
+import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
+import { getRowBackgroundColor } from 'components/Logs/LogStateIndicator/getRowBackgroundColor';
+import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import RawLogView from 'components/Logs/RawLogView';
+import { useLogsTableColumns } from 'components/Logs/TableView/useLogsTableColumns';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import Spinner from 'components/Spinner';
+import TanStackTable from 'components/TanStackTableView';
+import type { TanStackTableHandle } from 'components/TanStackTableView/types';
+import { useTableColumns } from 'components/TanStackTableView/useTableColumns';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { useOptionsMenu } from 'container/OptionsMenu';
@@ -19,6 +31,7 @@ import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import APIError from 'types/api/error';
 // interfaces
 import { ILog } from 'types/api/logs/log';
@@ -27,7 +40,6 @@ import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import NoLogs from '../NoLogs/NoLogs';
 import { LogsExplorerListProps } from './LogsExplorerList.interfaces';
 import { InfinityWrapperStyled } from './styles';
-import TanStackTableView from './TanStackTableView';
 import {
 	convertKeysToColumnFields,
 	getEmptyLogsListConfig,
@@ -50,7 +62,10 @@ function LogsExplorerList({
 	isFilterApplied,
 	handleChangeSelectedView,
 }: LogsExplorerListProps): JSX.Element {
-	const ref = useRef<VirtuosoHandle>(null);
+	const ref = useRef<TanStackTableHandle | VirtuosoHandle | null>(null);
+	const { pathname } = useLocation();
+	const [, setCopy] = useCopyToClipboard();
+	const isDarkMode = useIsDarkMode();
 	const { activeLogId } = useCopyLogLink();
 
 	const {
@@ -84,9 +99,46 @@ function LogsExplorerList({
 		[options],
 	);
 
+	const logsColumns = useLogsTableColumns({
+		fields: selectedFields,
+		linesPerRow: options.maxLines,
+		fontSize: options.fontSize,
+		appendTo: 'end',
+	});
+
+	const { tableProps } = useTableColumns(logsColumns, {
+		storageKey: LOCALSTORAGE.LOGS_LIST_COLUMNS,
+	});
+
+	const handleRemoveColumn = useCallback(
+		(columnId: string): void => {
+			tableProps.onRemoveColumn(columnId);
+			config.addColumn?.onRemove?.(columnId);
+		},
+		[tableProps, config.addColumn],
+	);
+
+	const makeOnLogCopy = useCallback(
+		(log: ILog) => (event: MouseEvent<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, `"${log.id}"`);
+			const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
+			setCopy(link);
+			toast.success('Copied to clipboard', { position: 'top-right' });
+		},
+		[pathname, setCopy],
+	);
+
 	const handleScrollToLog = useScrollToLog({
 		logs,
-		virtuosoRef: ref,
+		virtuosoRef: ref as React.RefObject<Pick<
+			VirtuosoHandle,
+			'scrollToIndex'
+		> | null>,
 	});
 
 	useEffect(() => {
@@ -155,25 +207,46 @@ function LogsExplorerList({
 
 		if (options.format === 'table') {
 			return (
-				<TanStackTableView
-					ref={ref}
-					isLoading={isLoading}
-					isFetching={isFetching}
-					tableViewProps={{
-						logs,
-						fields: selectedFields,
-						linesPerRow: options.maxLines,
-						fontSize: options.fontSize,
-						appendTo: 'end',
-						activeLogIndex,
+				<TanStackTable
+					ref={ref as React.Ref<TanStackTableHandle>}
+					{...tableProps}
+					plainTextCellLineClamp={options.maxLines}
+					cellTypographySize={options.fontSize}
+					onRemoveColumn={handleRemoveColumn}
+					data={logs}
+					isLoading={isLoading || isFetching}
+					loadingTip="Getting Logs"
+					onEndReached={onEndReached}
+					isRowActive={(log): boolean =>
+						log.id === activeLog?.id || log.id === activeLogId
+					}
+					getRowStyle={(log): CSSProperties =>
+						({
+							'--row-active-bg': getRowBackgroundColor(
+								isDarkMode,
+								getLogIndicatorType(log),
+							),
+							'--row-hover-bg': getRowBackgroundColor(
+								isDarkMode,
+								getLogIndicatorType(log),
+							),
+						} as CSSProperties)
+					}
+					onRowClick={(log): void => {
+						handleSetActiveLog(log);
 					}}
-					infitiyTableProps={{ onEndReached }}
-					handleChangeSelectedView={handleChangeSelectedView}
-					logs={logs}
-					onSetActiveLog={handleSetActiveLog}
-					onClearActiveLog={handleCloseLogDetail}
-					activeLog={activeLog}
-					onRemoveColumn={config.addColumn?.onRemove}
+					onRowDeactivate={handleCloseLogDetail}
+					activeRowIndex={activeLogIndex}
+					renderRowActions={(log): ReactNode => (
+						<LogLinesActionButtons
+							handleShowContext={(e): void => {
+								e.preventDefault();
+								e.stopPropagation();
+								handleSetActiveLog(log, VIEW_TYPES.CONTEXT);
+							}}
+							onLogCopy={makeOnLogCopy(log)}
+						/>
+					)}
 				/>
 			);
 		}
@@ -198,7 +271,7 @@ function LogsExplorerList({
 				<OverlayScrollbar isVirtuoso>
 					<Virtuoso
 						key={activeLogIndex || 'logs-virtuoso'}
-						ref={ref}
+						ref={ref as React.Ref<VirtuosoHandle>}
 						initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
 						data={logs}
 						endReached={onEndReached}
@@ -219,12 +292,13 @@ function LogsExplorerList({
 		onEndReached,
 		getItemContent,
 		isFetching,
-		selectedFields,
-		handleChangeSelectedView,
 		handleSetActiveLog,
 		handleCloseLogDetail,
 		activeLog,
-		config.addColumn?.onRemove,
+		tableProps,
+		handleRemoveColumn,
+		isDarkMode,
+		makeOnLogCopy,
 	]);
 
 	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/hooks/logs/useScrollToLog.ts

@@ -1,9 +1,11 @@
 import { useCallback } from 'react';
 import type { VirtuosoHandle } from 'react-virtuoso';
 
+type ScrollToIndexHandle = Pick<VirtuosoHandle, 'scrollToIndex'>;
+
 type UseScrollToLogParams = {
 	logs: Array<{ id: string }>;
-	virtuosoRef: React.RefObject<VirtuosoHandle | null>;
+	virtuosoRef: React.RefObject<ScrollToIndexHandle | null>;
 };
 
 function useScrollToLog({

go.mod

@@ -1,6 +1,6 @@
 module github.com/SigNoz/signoz
 
-go 1.25.7
+go 1.25.0
 
 require (
 	dario.cat/mergo v1.0.2
@@ -19,7 +19,6 @@ require (
 	github.com/go-co-op/gocron v1.30.1
 	github.com/go-openapi/runtime v0.29.2
 	github.com/go-openapi/strfmt v0.25.0
-	github.com/go-playground/validator/v10 v10.27.0
 	github.com/go-redis/redismock/v9 v9.2.0
 	github.com/go-viper/mapstructure/v2 v2.5.0
 	github.com/gojek/heimdall/v7 v7.0.3
@@ -28,8 +27,8 @@ require (
 	github.com/gorilla/handlers v1.5.1
 	github.com/gorilla/mux v1.8.1
 	github.com/gorilla/websocket v1.5.4-0.20250319132907-e064f32e3674
-	github.com/huandu/go-sqlbuilder v1.39.1
-	github.com/jackc/pgx/v5 v5.8.0
+	github.com/huandu/go-sqlbuilder v1.35.0
+	github.com/jackc/pgx/v5 v5.7.6
 	github.com/json-iterator/go v1.1.13-0.20220915233716-71ac16282d12
 	github.com/knadh/koanf v1.5.0
 	github.com/knadh/koanf/v2 v2.3.2
@@ -39,7 +38,6 @@ require (
 	github.com/openfga/api/proto v0.0.0-20250909172242-b4b2a12f5c67
 	github.com/openfga/language/pkg/go v0.2.0-beta.2.0.20251027165255-0f8f255e5f6c
 	github.com/opentracing/opentracing-go v1.2.0
-	github.com/perses/perses v0.53.1
 	github.com/pkg/errors v0.9.1
 	github.com/prometheus/alertmanager v0.31.0
 	github.com/prometheus/client_golang v1.23.2
@@ -77,18 +75,18 @@ require (
 	go.opentelemetry.io/otel/trace v1.40.0
 	go.uber.org/multierr v1.11.0
 	go.uber.org/zap v1.27.1
-	golang.org/x/crypto v0.48.0
+	golang.org/x/crypto v0.47.0
 	golang.org/x/exp v0.0.0-20260112195511-716be5621a96
-	golang.org/x/net v0.50.0
-	golang.org/x/oauth2 v0.35.0
+	golang.org/x/net v0.49.0
+	golang.org/x/oauth2 v0.34.0
 	golang.org/x/sync v0.19.0
-	golang.org/x/text v0.34.0
+	golang.org/x/text v0.33.0
 	gonum.org/v1/gonum v0.17.0
 	google.golang.org/api v0.265.0
 	google.golang.org/protobuf v1.36.11
 	gopkg.in/yaml.v2 v2.4.0
 	gopkg.in/yaml.v3 v3.0.1
-	k8s.io/apimachinery v0.35.2
+	k8s.io/apimachinery v0.35.0
 	modernc.org/sqlite v1.40.1
 )
 
@@ -127,14 +125,12 @@ require (
 	github.com/go-openapi/swag/yamlutils v0.25.4 // indirect
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
+	github.com/go-playground/validator/v10 v10.27.0 // indirect
 	github.com/goccy/go-yaml v1.19.2 // indirect
 	github.com/hashicorp/go-metrics v0.5.4 // indirect
-	github.com/huandu/go-clone v1.7.3 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
-	github.com/muhlemmer/gu v0.3.1 // indirect
 	github.com/ncruces/go-strftime v0.1.9 // indirect
-	github.com/perses/common v0.30.2 // indirect
 	github.com/prometheus/client_golang/exp v0.0.0-20260108101519-fb0838f53562 // indirect
 	github.com/redis/go-redis/extra/rediscmd/v9 v9.15.1 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
@@ -143,8 +139,6 @@ require (
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
 	github.com/ugorji/go/codec v1.3.0 // indirect
 	github.com/uptrace/opentelemetry-go-extra/otelsql v0.3.2 // indirect
-	github.com/zitadel/oidc/v3 v3.45.4 // indirect
-	github.com/zitadel/schema v1.3.2 // indirect
 	go.opentelemetry.io/collector/client v1.50.0 // indirect
 	go.opentelemetry.io/collector/config/configoptional v1.50.0 // indirect
 	go.opentelemetry.io/collector/config/configretry v1.50.0 // indirect
@@ -214,7 +208,7 @@ require (
 	github.com/golang/protobuf v1.5.4 // indirect
 	github.com/golang/snappy v1.0.0 // indirect
 	github.com/google/btree v1.1.3 // indirect
-	github.com/google/cel-go v0.27.0 // indirect
+	github.com/google/cel-go v0.26.1 // indirect
 	github.com/google/s2a-go v0.1.9 // indirect
 	github.com/googleapis/enterprise-certificate-proxy v0.3.11 // indirect
 	github.com/googleapis/gax-go/v2 v2.16.0 // indirect
@@ -232,7 +226,7 @@ require (
 	github.com/hashicorp/golang-lru v1.0.2 // indirect
 	github.com/hashicorp/golang-lru/v2 v2.0.7 // indirect
 	github.com/hashicorp/memberlist v0.5.4 // indirect
-	github.com/huandu/xstrings v1.5.0 // indirect
+	github.com/huandu/xstrings v1.4.0 // indirect
 	github.com/inconshreveable/mousetrap v1.1.0 // indirect
 	github.com/jackc/pgpassfile v1.0.0 // indirect
 	github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761 // indirect
@@ -304,6 +298,7 @@ require (
 	github.com/spf13/cast v1.10.0 // indirect
 	github.com/spf13/pflag v1.0.10 // indirect
 	github.com/spf13/viper v1.20.1 // indirect
+	github.com/stoewer/go-strcase v1.3.0 // indirect
 	github.com/stretchr/objx v0.5.2 // indirect
 	github.com/subosito/gotenv v1.6.0 // indirect
 	github.com/swaggest/openapi-go v0.2.60
@@ -381,15 +376,15 @@ require (
 	go.uber.org/atomic v1.11.0 // indirect
 	go.uber.org/mock v0.6.0 // indirect
 	go.yaml.in/yaml/v3 v3.0.4 // indirect
-	golang.org/x/mod v0.33.0 // indirect
-	golang.org/x/sys v0.41.0 // indirect
+	golang.org/x/mod v0.32.0 // indirect
+	golang.org/x/sys v0.40.0 // indirect
 	golang.org/x/time v0.14.0 // indirect
-	golang.org/x/tools v0.42.0 // indirect
+	golang.org/x/tools v0.41.0 // indirect
 	google.golang.org/genproto/googleapis/api v0.0.0-20260203192932-546029d2fa20 // indirect
 	google.golang.org/genproto/googleapis/rpc v0.0.0-20260128011058-8636f8732409
 	google.golang.org/grpc v1.78.0 // indirect
 	gopkg.in/telebot.v3 v3.3.8 // indirect
-	k8s.io/client-go v0.35.2 // indirect
+	k8s.io/client-go v0.35.0 // indirect
 	k8s.io/klog/v2 v2.130.1 // indirect
 	k8s.io/utils v0.0.0-20251002143259-bc988d571ff4 // indirect
 )

go.sum

@@ -489,8 +489,8 @@ github.com/google/btree v0.0.0-20180813153112-4030bb1f1f0c/go.mod h1:lNA+9X1NB3Z
 github.com/google/btree v1.0.0/go.mod h1:lNA+9X1NB3Zf8V7Ke586lFgjr2dZNuvo3lPJSGZ5JPQ=
 github.com/google/btree v1.1.3 h1:CVpQJjYgC4VbzxeGVHfvZrv1ctoYCAI8vbl07Fcxlyg=
 github.com/google/btree v1.1.3/go.mod h1:qOPhT0dTNdNzV6Z/lhRX0YXUafgPLFUh+gZMl761Gm4=
-github.com/google/cel-go v0.27.0 h1:e7ih85+4qVrBuqQWTW4FKSqZYokVuc3HnhH5keboFTo=
-github.com/google/cel-go v0.27.0/go.mod h1:tTJ11FWqnhw5KKpnWpvW9CJC3Y9GK4EIS0WXnBbebzw=
+github.com/google/cel-go v0.26.1 h1:iPbVVEdkhTX++hpe3lzSk7D3G3QSYqLGoHOcEio+UXQ=
+github.com/google/cel-go v0.26.1/go.mod h1:A9O8OU9rdvrK5MQyrqfIxo1a0u4g3sF8KB6PUIaryMM=
 github.com/google/gnostic-models v0.7.0 h1:qwTtogB15McXDaNqTZdzPJRHvaVJlAl+HVQnLmJEJxo=
 github.com/google/gnostic-models v0.7.0/go.mod h1:whL5G0m6dmc5cPxKc5bdKdEN3UjI7OUGxBlw57miDrQ=
 github.com/google/go-cmp v0.2.0/go.mod h1:oXzfMopK8JAjlY9xF4vHSVASa0yLyX7SntLO5aqRK0M=
@@ -654,15 +654,12 @@ github.com/hetznercloud/hcloud-go/v2 v2.36.0 h1:HlLL/aaVXUulqe+rsjoJmrxKhPi1MflL
 github.com/hetznercloud/hcloud-go/v2 v2.36.0/go.mod h1:MnN/QJEa/RYNQiiVoJjNHPntM7Z1wlYPgJ2HA40/cDE=
 github.com/hjson/hjson-go/v4 v4.0.0 h1:wlm6IYYqHjOdXH1gHev4VoXCaW20HdQAGCxdOEEg2cs=
 github.com/hjson/hjson-go/v4 v4.0.0/go.mod h1:KaYt3bTw3zhBjYqnXkYywcYctk0A2nxeEFTse3rH13E=
-github.com/huandu/go-assert v1.1.5/go.mod h1:yOLvuqZwmcHIC5rIzrBhT7D3Q9c3GFnd0JrPVhn/06U=
 github.com/huandu/go-assert v1.1.6 h1:oaAfYxq9KNDi9qswn/6aE0EydfxSa+tWZC1KabNitYs=
 github.com/huandu/go-assert v1.1.6/go.mod h1:JuIfbmYG9ykwvuxoJ3V8TB5QP+3+ajIA54Y44TmkMxs=
-github.com/huandu/go-clone v1.7.3 h1:rtQODA+ABThEn6J5LBTppJfKmZy/FwfpMUWa8d01TTQ=
-github.com/huandu/go-clone v1.7.3/go.mod h1:ReGivhG6op3GYr+UY3lS6mxjKp7MIGTknuU5TbTVaXE=
-github.com/huandu/go-sqlbuilder v1.39.1 h1:uUaj41yLNTQBe7ojNF6Im1RPbHCN4zCjMRySTEC2ooI=
-github.com/huandu/go-sqlbuilder v1.39.1/go.mod h1:zdONH67liL+/TvoUMwnZP/sUYGSSvHh9psLe/HpXn8E=
-github.com/huandu/xstrings v1.5.0 h1:2ag3IFq9ZDANvthTwTiqSSZLjDc+BedvHPAp5tJy2TI=
-github.com/huandu/xstrings v1.5.0/go.mod h1:y5/lhBue+AyNmUVz9RLU9xbLR0o4KIIExikq4ovT0aE=
+github.com/huandu/go-sqlbuilder v1.35.0 h1:ESvxFHN8vxCTudY1Vq63zYpU5yJBESn19sf6k4v2T5Q=
+github.com/huandu/go-sqlbuilder v1.35.0/go.mod h1:mS0GAtrtW+XL6nM2/gXHRJax2RwSW1TraavWDFAc1JA=
+github.com/huandu/xstrings v1.4.0 h1:D17IlohoQq4UcpqD7fDk80P7l+lwAmlFaBHgOipl2FU=
+github.com/huandu/xstrings v1.4.0/go.mod h1:y5/lhBue+AyNmUVz9RLU9xbLR0o4KIIExikq4ovT0aE=
 github.com/iancoleman/orderedmap v0.3.0 h1:5cbR2grmZR/DiVt+VJopEhtVs9YGInGIxAoMJn+Ichc=
 github.com/iancoleman/orderedmap v0.3.0/go.mod h1:XuLcCUkdL5owUCQeF2Ue9uuw1EptkJDkXXS7VoV7XGE=
 github.com/ianlancetaylor/demangle v0.0.0-20181102032728-5e5cf60278f6/go.mod h1:aSSvb/t6k1mPoxDqO4vJh6VOCGPwU4O0C2/Eqndh1Sc=
@@ -675,8 +672,8 @@ github.com/jackc/pgpassfile v1.0.0 h1:/6Hmqy13Ss2zCq62VdNG8tM1wchn8zjSGOBJ6icpsI
 github.com/jackc/pgpassfile v1.0.0/go.mod h1:CEx0iS5ambNFdcRtxPj5JhEz+xB6uRky5eyVu/W2HEg=
 github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761 h1:iCEnooe7UlwOQYpKFhBabPMi4aNAfoODPEFNiAnClxo=
 github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761/go.mod h1:5TJZWKEWniPve33vlWYSoGYefn3gLQRzjfDlhSJ9ZKM=
-github.com/jackc/pgx/v5 v5.8.0 h1:TYPDoleBBme0xGSAX3/+NujXXtpZn9HBONkQC7IEZSo=
-github.com/jackc/pgx/v5 v5.8.0/go.mod h1:QVeDInX2m9VyzvNeiCJVjCkNFqzsNb43204HshNSZKw=
+github.com/jackc/pgx/v5 v5.7.6 h1:rWQc5FwZSPX58r1OQmkuaNicxdmExaEz5A2DO2hUuTk=
+github.com/jackc/pgx/v5 v5.7.6/go.mod h1:aruU7o91Tc2q2cFp5h4uP3f6ztExVpyVv88Xl/8Vl8M=
 github.com/jackc/puddle/v2 v2.2.2 h1:PR8nw+E/1w0GLuRFSmiioY6UooMp6KJv0/61nB7icHo=
 github.com/jackc/puddle/v2 v2.2.2/go.mod h1:vriiEXHvEE654aYKXXjOvZM39qJ0q+azkZFrfEOc3H4=
 github.com/jessevdk/go-flags v1.6.1 h1:Cvu5U8UGrLay1rZfv/zP7iLpSHGUZ/Ou68T0iX1bBK4=
@@ -821,8 +818,6 @@ github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjY
 github.com/modern-go/reflect2 v1.0.3-0.20250322232337-35a7c28c31ee h1:W5t00kpgFdJifH4BDsTlE89Zl93FEloxaWZfGcifgq8=
 github.com/modern-go/reflect2 v1.0.3-0.20250322232337-35a7c28c31ee/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
 github.com/montanaflynn/stats v0.0.0-20171201202039-1bf9dbcd8cbe/go.mod h1:wL8QJuTMNUDYhXwkmfOly8iTdp5TEcJFWZD2D7SIkUc=
-github.com/muhlemmer/gu v0.3.1 h1:7EAqmFrW7n3hETvuAdmFmn4hS8W+z3LgKtrnow+YzNM=
-github.com/muhlemmer/gu v0.3.1/go.mod h1:YHtHR+gxM+bKEIIs7Hmi9sPT3ZDUvTN/i88wQpZkrdM=
 github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822 h1:C3w9PqII01/Oq1c1nUAm88MOHcQC9l5mIlSMApZMrHA=
 github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822/go.mod h1:+n7T8mK8HuQTcFwEeznm/DIxMOiR9yIdICNftLE1DvQ=
 github.com/mwitkow/go-conntrack v0.0.0-20161129095857-cc309e4a2223/go.mod h1:qRWi+5nqEBWmkhHvq77mSJWrCKwh8bxhgT7d/eI7P4U=
@@ -832,11 +827,9 @@ github.com/natefinch/wrap v0.2.0 h1:IXzc/pw5KqxJv55gV0lSOcKHYuEZPGbQrOOXr/bamRk=
 github.com/natefinch/wrap v0.2.0/go.mod h1:6gMHlAl12DwYEfKP3TkuykYUfLSEAvHw67itm4/KAS8=
 github.com/ncruces/go-strftime v0.1.9 h1:bY0MQC28UADQmHmaF5dgpLmImcShSi2kHU9XLdhx/f4=
 github.com/ncruces/go-strftime v0.1.9/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
-github.com/nexucis/lamenv v0.5.2 h1:tK/u3XGhCq9qIoVNcXsK9LZb8fKopm0A5weqSRvHd7M=
-github.com/nexucis/lamenv v0.5.2/go.mod h1:HusJm6ltmmT7FMG8A750mOLuME6SHCsr2iFYxp5fFi0=
 github.com/npillmayer/nestext v0.1.3/go.mod h1:h2lrijH8jpicr25dFY+oAJLyzlya6jhnuG+zWp9L0Uk=
-github.com/nxadm/tail v1.4.11 h1:8feyoE3OzPrcshW5/MJ4sGESc5cqmGkGCWlco4l0bqY=
-github.com/nxadm/tail v1.4.11/go.mod h1:OTaG3NK980DZzxbRq6lEuzgU+mug70nY11sMd4JXXHc=
+github.com/nxadm/tail v1.4.8 h1:nPr65rt6Y5JFSKQO7qToXr7pePgD6Gwiw05lkbyAQTE=
+github.com/nxadm/tail v1.4.8/go.mod h1:+ncqLTQzXmGhMZNUePPaPqPvBxHAIsmXswZKocGu+AU=
 github.com/oklog/run v1.0.0/go.mod h1:dlhp/R75TPv97u0XWUtDeV/lRKWPKSdTuV0TZvrmrQA=
 github.com/oklog/run v1.2.0 h1:O8x3yXwah4A73hJdlrwo/2X6J62gE5qTMusH0dvz60E=
 github.com/oklog/run v1.2.0/go.mod h1:mgDbKRSwPhJfesJ4PntqFUbKQRZ50NgmZTSPlFA0YFk=
@@ -898,10 +891,6 @@ github.com/pelletier/go-toml v1.9.5/go.mod h1:u1nR/EPcESfeI/szUZKdtJ0xRNbUoANCko
 github.com/pelletier/go-toml/v2 v2.0.5/go.mod h1:OMHamSCAODeSsVrwwvcJOaoN0LIUIaFVNZzmWyNfXas=
 github.com/pelletier/go-toml/v2 v2.2.4 h1:mye9XuhQ6gvn5h28+VilKrrPoQVanw5PMw/TB0t5Ec4=
 github.com/pelletier/go-toml/v2 v2.2.4/go.mod h1:2gIqNv+qfxSVS7cM2xJQKtLSTLUE9V8t9Stt+h56mCY=
-github.com/perses/common v0.30.2 h1:RAiVxUpX76lTCb4X7pfcXSvYdXQmZwKi4oDKAEO//u0=
-github.com/perses/common v0.30.2/go.mod h1:DFtur1QPah2/ChXbKKhw7djYdwNgz27s5fPKpiK0Xao=
-github.com/perses/perses v0.53.1 h1:9VY/6p9QWrZwPSV7qiwTMSOsgcB37Lb1AXKT0ORXc6I=
-github.com/perses/perses v0.53.1/go.mod h1:ro8fsgBkHYOdrL/MV+fdP9mflKzYCy/+gcbxiaReI/A=
 github.com/pierrec/lz4 v2.0.5+incompatible/go.mod h1:pdkljMzZIN41W+lC3N2tnIh5sFi+IEE17M5jbnwPHcY=
 github.com/pierrec/lz4/v4 v4.1.23 h1:oJE7T90aYBGtFNrI8+KbETnPymobAhzRrR8Mu8n1yfU=
 github.com/pierrec/lz4/v4 v4.1.23/go.mod h1:EoQMVJgeeEOMsCqCzqFm2O0cJvljX2nGZjcRIPL34O4=
@@ -1060,6 +1049,8 @@ github.com/srikanthccv/ClickHouse-go-mock v0.13.0 h1:/b7DQphGkh29ocNtLh4DGmQxQYA
 github.com/srikanthccv/ClickHouse-go-mock v0.13.0/go.mod h1:LiiyBUdXNwB/1DE9rgK/8q9qjVYsTzg6WXQ/3mU3TeY=
 github.com/stackitcloud/stackit-sdk-go/core v0.21.1 h1:Y/PcAgM7DPYMNqum0MLv4n1mF9ieuevzcCIZYQfm3Ts=
 github.com/stackitcloud/stackit-sdk-go/core v0.21.1/go.mod h1:osMglDby4csGZ5sIfhNyYq1bS1TxIdPY88+skE/kkmI=
+github.com/stoewer/go-strcase v1.3.0 h1:g0eASXYtp+yvN9fK8sH94oCIk0fau9uV1/ZdJ0AVEzs=
+github.com/stoewer/go-strcase v1.3.0/go.mod h1:fAH5hQ5pehh+j3nZfvwdk2RgEgQjAoM8wodgtPmh1xo=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.1.1/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.3.0/go.mod h1:qt09Ya8vawLte6SNmTgCsAVtYtaKzEcn8ATUoHMkEqE=
@@ -1159,10 +1150,6 @@ github.com/zeebo/assert v1.3.1 h1:vukIABvugfNMZMQO1ABsyQDJDTVQbn+LWSMy1ol1h6A=
 github.com/zeebo/assert v1.3.1/go.mod h1:Pq9JiuJQpG8JLJdtkwrJESF0Foym2/D9XMU5ciN/wJ0=
 github.com/zeebo/xxh3 v1.0.2 h1:xZmwmqxHZA8AI603jOQ0tMqmBr9lPeFwGg6d+xy9DC0=
 github.com/zeebo/xxh3 v1.0.2/go.mod h1:5NWz9Sef7zIDm2JHfFlcQvNekmcEl9ekUZQQKCYaDcA=
-github.com/zitadel/oidc/v3 v3.45.4 h1:GKyWaPRVQ8sCu9XgJ3NgNGtG52FzwVJpzXjIUG2+YrI=
-github.com/zitadel/oidc/v3 v3.45.4/go.mod h1:XALmFXS9/kSom9B6uWin1yJ2WTI/E4Ti5aXJdewAVEs=
-github.com/zitadel/schema v1.3.2 h1:gfJvt7dOMfTmxzhscZ9KkapKo3Nei3B6cAxjav+lyjI=
-github.com/zitadel/schema v1.3.2/go.mod h1:IZmdfF9Wu62Zu6tJJTH3UsArevs3Y4smfJIj3L8fzxw=
 go.etcd.io/etcd/api/v3 v3.5.4/go.mod h1:5GB2vv4A4AOn3yk7MftYGHkUfGtDHnEraIjym4dYz5A=
 go.etcd.io/etcd/client/pkg/v3 v3.5.4/go.mod h1:IJHfcCEKxYu1Os13ZdwCwIUTUVGYTSAM3YSwc9/Ac1g=
 go.etcd.io/etcd/client/v2 v2.305.4/go.mod h1:Ud+VUwIi9/uQHOMA+4ekToJ12lTxlv0zB/+DHwTGEbU=
@@ -1398,8 +1385,8 @@ golang.org/x/crypto v0.0.0-20210421170649-83a5a9bb288b/go.mod h1:T9bdIzuCu7OtxOm
 golang.org/x/crypto v0.0.0-20211108221036-ceb1ce70b4fa/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/crypto v0.0.0-20220411220226-7b82a4e95df4/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
 golang.org/x/crypto v0.0.0-20220622213112-05595931fe9d/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
-golang.org/x/crypto v0.48.0 h1:/VRzVqiRSggnhY7gNRxPauEQ5Drw9haKdM0jqfcCFts=
-golang.org/x/crypto v0.48.0/go.mod h1:r0kV5h3qnFPlQnBSrULhlsRfryS2pmewsg+XfMgkVos=
+golang.org/x/crypto v0.47.0 h1:V6e3FRj+n4dbpw86FJ8Fv7XVOql7TEwpHapKoMJ/GO8=
+golang.org/x/crypto v0.47.0/go.mod h1:ff3Y9VzzKbwSSEzWqJsJVBnWmRwRSHt/6Op5n9bQc4A=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20190306152737-a1d7652674e8/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20190510132918-efd6b22b2522/go.mod h1:ZjyILWgesfNpC6sMxTJOJm9Kp84zZh5NQWvqDGG3Qr8=
@@ -1437,8 +1424,8 @@ golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.4.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.4.1/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.4.2/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
-golang.org/x/mod v0.33.0 h1:tHFzIWbBifEmbwtGz65eaWyGiGZatSrT9prnU8DbVL8=
-golang.org/x/mod v0.33.0/go.mod h1:swjeQEj+6r7fODbD2cqrnje9PnziFuw4bmLbBZFrQ5w=
+golang.org/x/mod v0.32.0 h1:9F4d3PHLljb6x//jOyokMv3eX+YDeepZSEo3mFJy93c=
+golang.org/x/mod v0.32.0/go.mod h1:SgipZ/3h2Ci89DlEtEXWUk/HteuRin+HHhN+WbNhguU=
 golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20180826012351-8a410e7b638d/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20181114220301-adae6a3d119a/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
@@ -1487,8 +1474,8 @@ golang.org/x/net v0.0.0-20220325170049-de3da57026de/go.mod h1:CfG3xpIq0wQ8r1q4Su
 golang.org/x/net v0.0.0-20220412020605-290c469a71a5/go.mod h1:CfG3xpIq0wQ8r1q4Su4UZFWDARRcnwPjda9FqA0JpMk=
 golang.org/x/net v0.0.0-20220425223048-2871e0cb64e4/go.mod h1:CfG3xpIq0wQ8r1q4Su4UZFWDARRcnwPjda9FqA0JpMk=
 golang.org/x/net v0.0.0-20220520000938-2e3eb7b945c2/go.mod h1:CfG3xpIq0wQ8r1q4Su4UZFWDARRcnwPjda9FqA0JpMk=
-golang.org/x/net v0.50.0 h1:ucWh9eiCGyDR3vtzso0WMQinm2Dnt8cFMuQa9K33J60=
-golang.org/x/net v0.50.0/go.mod h1:UgoSli3F/pBgdJBHCTc+tp3gmrU4XswgGRgtnwWTfyM=
+golang.org/x/net v0.49.0 h1:eeHFmOGUTtaaPSGNmjBKpbng9MulQsJURQUAfUwY++o=
+golang.org/x/net v0.49.0/go.mod h1:/ysNB2EvaqvesRkuLAyjI1ycPZlQHM3q01F02UY/MV8=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
@@ -1509,8 +1496,8 @@ golang.org/x/oauth2 v0.0.0-20211104180415-d3ed0bb246c8/go.mod h1:KelEdhl1UZF7XfJ
 golang.org/x/oauth2 v0.0.0-20220223155221-ee480838109b/go.mod h1:DAh4E804XQdzx2j+YRIaUnCqCV2RuMz24cGBJ5QYIrc=
 golang.org/x/oauth2 v0.0.0-20220309155454-6242fa91716a/go.mod h1:DAh4E804XQdzx2j+YRIaUnCqCV2RuMz24cGBJ5QYIrc=
 golang.org/x/oauth2 v0.0.0-20220411215720-9780585627b5/go.mod h1:DAh4E804XQdzx2j+YRIaUnCqCV2RuMz24cGBJ5QYIrc=
-golang.org/x/oauth2 v0.35.0 h1:Mv2mzuHuZuY2+bkyWXIHMfhNdJAdwW3FuWeCPYN5GVQ=
-golang.org/x/oauth2 v0.35.0/go.mod h1:lzm5WQJQwKZ3nwavOZ3IS5Aulzxi68dUSgRHujetwEA=
+golang.org/x/oauth2 v0.34.0 h1:hqK/t4AKgbqWkdkcAeI8XLmbK+4m4G5YeQRrmiotGlw=
+golang.org/x/oauth2 v0.34.0/go.mod h1:lzm5WQJQwKZ3nwavOZ3IS5Aulzxi68dUSgRHujetwEA=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20181108010431-42b317875d0f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20181221193216-37e7f081c4d4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
@@ -1611,12 +1598,12 @@ golang.org/x/sys v0.0.0-20220502124256-b6088ccd6cba/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.41.0 h1:Ivj+2Cp/ylzLiEU89QhWblYnOE9zerudt9Ftecq2C6k=
-golang.org/x/sys v0.41.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
+golang.org/x/sys v0.40.0 h1:DBZZqJ2Rkml6QMQsZywtnjnnGvHza6BTfYFWY9kjEWQ=
+golang.org/x/sys v0.40.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
-golang.org/x/term v0.40.0 h1:36e4zGLqU4yhjlmxEaagx2KuYbJq3EwY8K943ZsHcvg=
-golang.org/x/term v0.40.0/go.mod h1:w2P8uVp06p2iyKKuvXIm7N/y0UCRt3UfJTfZ7oOpglM=
+golang.org/x/term v0.39.0 h1:RclSuaJf32jOqZz74CkPA9qFuVTX7vhLlpfj/IGWlqY=
+golang.org/x/term v0.39.0/go.mod h1:yxzUCTP/U+FzoxfdKmLaA0RV1WgE0VY7hXBwKtY/4ww=
 golang.org/x/text v0.0.0-20170915032832-14c0d48ead0c/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.1-0.20180807135948-17ff2d5776d2/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
@@ -1627,8 +1614,8 @@ golang.org/x/text v0.3.4/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.5/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
-golang.org/x/text v0.34.0 h1:oL/Qq0Kdaqxa1KbNeMKwQq0reLCCaFtqu2eNuSeNHbk=
-golang.org/x/text v0.34.0/go.mod h1:homfLqTYRFyVYemLBFl5GgL/DWEiH5wcsQ5gSh1yziA=
+golang.org/x/text v0.33.0 h1:B3njUFyqtHDUI5jMn1YIr5B0IE2U0qck04r6d4KPAxE=
+golang.org/x/text v0.33.0/go.mod h1:LuMebE6+rBincTi9+xWTY8TztLzKHc/9C1uBCG27+q8=
 golang.org/x/time v0.0.0-20181108054448-85acf8d2951c/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20190308202827-9d24e82272b4/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20191024005414-555d28b269f0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
@@ -1691,8 +1678,8 @@ golang.org/x/tools v0.1.2/go.mod h1:o0xws9oXOQQZyjljx8fwUC0k7L1pTE6eaCbjGeHmOkk=
 golang.org/x/tools v0.1.3/go.mod h1:o0xws9oXOQQZyjljx8fwUC0k7L1pTE6eaCbjGeHmOkk=
 golang.org/x/tools v0.1.4/go.mod h1:o0xws9oXOQQZyjljx8fwUC0k7L1pTE6eaCbjGeHmOkk=
 golang.org/x/tools v0.1.5/go.mod h1:o0xws9oXOQQZyjljx8fwUC0k7L1pTE6eaCbjGeHmOkk=
-golang.org/x/tools v0.42.0 h1:uNgphsn75Tdz5Ji2q36v/nsFSfR/9BRFvqhGBaJGd5k=
-golang.org/x/tools v0.42.0/go.mod h1:Ma6lCIwGZvHK6XtgbswSoWroEkhugApmsXyrUmBhfr0=
+golang.org/x/tools v0.41.0 h1:a9b8iMweWG+S0OBnlU36rzLp20z1Rp10w+IY2czHTQc=
+golang.org/x/tools v0.41.0/go.mod h1:XSY6eDqxVNiYgezAVqqCeihT4j1U2CCsqvH3WhQpnlg=
 golang.org/x/tools/godoc v0.1.0-deprecated h1:o+aZ1BOj6Hsx/GBdJO/s815sqftjSnrZZwyYTHODvtk=
 golang.org/x/tools/godoc v0.1.0-deprecated/go.mod h1:qM63CriJ961IHWmnWa9CjZnBndniPt4a3CK0PVB9bIg=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
@@ -1928,12 +1915,12 @@ honnef.co/go/tools v0.0.0-20190523083050-ea95bdfd59fc/go.mod h1:rf3lG4BRIbNafJWh
 honnef.co/go/tools v0.0.1-2019.2.3/go.mod h1:a3bituU0lyd329TUQxRnasdCoJDkEUEAqEt0JzvZhAg=
 honnef.co/go/tools v0.0.1-2020.1.3/go.mod h1:X/FiERA/W4tHapMX5mGpAtMSVEeEUOyHaw9vFzvIQ3k=
 honnef.co/go/tools v0.0.1-2020.1.4/go.mod h1:X/FiERA/W4tHapMX5mGpAtMSVEeEUOyHaw9vFzvIQ3k=
-k8s.io/api v0.35.2 h1:tW7mWc2RpxW7HS4CoRXhtYHSzme1PN1UjGHJ1bdrtdw=
-k8s.io/api v0.35.2/go.mod h1:7AJfqGoAZcwSFhOjcGM7WV05QxMMgUaChNfLTXDRE60=
-k8s.io/apimachinery v0.35.2 h1:NqsM/mmZA7sHW02JZ9RTtk3wInRgbVxL8MPfzSANAK8=
-k8s.io/apimachinery v0.35.2/go.mod h1:jQCgFZFR1F4Ik7hvr2g84RTJSZegBc8yHgFWKn//hns=
-k8s.io/client-go v0.35.2 h1:YUfPefdGJA4aljDdayAXkc98DnPkIetMl4PrKX97W9o=
-k8s.io/client-go v0.35.2/go.mod h1:4QqEwh4oQpeK8AaefZ0jwTFJw/9kIjdQi0jpKeYvz7g=
+k8s.io/api v0.35.0 h1:iBAU5LTyBI9vw3L5glmat1njFK34srdLmktWwLTprlY=
+k8s.io/api v0.35.0/go.mod h1:AQ0SNTzm4ZAczM03QH42c7l3bih1TbAXYo0DkF8ktnA=
+k8s.io/apimachinery v0.35.0 h1:Z2L3IHvPVv/MJ7xRxHEtk6GoJElaAqDCCU0S6ncYok8=
+k8s.io/apimachinery v0.35.0/go.mod h1:jQCgFZFR1F4Ik7hvr2g84RTJSZegBc8yHgFWKn//hns=
+k8s.io/client-go v0.35.0 h1:IAW0ifFbfQQwQmga0UdoH0yvdqrbwMdq9vIFEhRpxBE=
+k8s.io/client-go v0.35.0/go.mod h1:q2E5AAyqcbeLGPdoRB+Nxe3KYTfPce1Dnu1myQdqz9o=
 k8s.io/klog/v2 v2.130.1 h1:n9Xl7H1Xvksem4KFG4PYbdQCQxqc/tTUyrgXaOhHSzk=
 k8s.io/klog/v2 v2.130.1/go.mod h1:3Jpz1GvMt720eyJH1ckRHK1EDfpxISzJ7I9OYgaDtPE=
 k8s.io/kube-openapi v0.0.0-20250910181357-589584f1c912 h1:Y3gxNAuB0OBLImH611+UDZcmKS3g6CthxToOb37KgwE=

pkg/modules/dashboard/dashboard.go

@@ -13,18 +13,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
-// IntegrationDashboardProvider abstracts access to integration-managed dashboards
-// (cloud integrations and installed integrations) so that the module does not
-// depend on pkg/query-service/app. The wiring layer adapts the concrete
-// controllers to this interface.
-type IntegrationDashboardProvider interface {
-	IsCloudIntegrationDashboard(id string) bool
-	GetCloudIntegrationDashboard(ctx context.Context, orgID valuer.UUID, id string) (*dashboardtypes.DashboardV2, error)
-
-	IsInstalledIntegrationDashboard(id string) bool
-	GetInstalledIntegrationDashboard(ctx context.Context, orgID valuer.UUID, id string) (*dashboardtypes.DashboardV2, error)
-}
-
 type Module interface {
 	// creates public sharing config and enables public sharing for the dashboard
 	CreatePublic(context.Context, valuer.UUID, *dashboardtypes.PublicDashboard) error
@@ -61,21 +49,6 @@ type Module interface {
 
 	GetByMetricNames(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]map[string]string, error)
 
-	// Perses-backed (v2) dashboard methods
-	CreatePerses(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, data dashboardtypes.PostableDashboardV2) (*dashboardtypes.DashboardV2, error)
-
-	GetPerses(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error)
-
-	UpdatePerses(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, data dashboardtypes.UpdatableDashboardV2, diff int) (*dashboardtypes.DashboardV2, error)
-
-	DeletePerses(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error
-
-	LockUnlockPerses(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) (*dashboardtypes.DashboardV2, error)
-
-	UpdateNamePerses(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, name string) (*dashboardtypes.DashboardV2, error)
-
-	UpdateDescriptionPerses(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, description string) (*dashboardtypes.DashboardV2, error)
-
 	statsreporter.StatsCollector
 
 	authz.RegisterTypeable
@@ -101,19 +74,4 @@ type Handler interface {
 	LockUnlock(http.ResponseWriter, *http.Request)
 
 	Delete(http.ResponseWriter, *http.Request)
-
-	// Perses-backed (v2) dashboard handlers
-	CreatePerses(http.ResponseWriter, *http.Request)
-
-	GetPerses(http.ResponseWriter, *http.Request)
-
-	UpdatePerses(http.ResponseWriter, *http.Request)
-
-	DeletePerses(http.ResponseWriter, *http.Request)
-
-	LockUnlockPerses(http.ResponseWriter, *http.Request)
-
-	UpdateNamePerses(http.ResponseWriter, *http.Request)
-
-	UpdateDescriptionPerses(http.ResponseWriter, *http.Request)
 }

pkg/modules/dashboard/impldashboard/handler.go

@@ -3,7 +3,6 @@ package impldashboard
 import (
 	"context"
 	"encoding/json"
-	"io"
 	"net/http"
 	"strconv"
 	"time"
@@ -26,11 +25,10 @@ type handler struct {
 	module           dashboard.Module
 	authz            authz.AuthZ
 	providerSettings factory.ProviderSettings
-	integrations     dashboard.IntegrationDashboardProvider
 }
 
-func NewHandler(module dashboard.Module, providerSettings factory.ProviderSettings, authz authz.AuthZ, integrations dashboard.IntegrationDashboardProvider) dashboard.Handler {
-	return &handler{module: module, providerSettings: providerSettings, authz: authz, integrations: integrations}
+func NewHandler(module dashboard.Module, providerSettings factory.ProviderSettings, authz authz.AuthZ) dashboard.Handler {
+	return &handler{module: module, providerSettings: providerSettings, authz: authz}
 }
 
 func (handler *handler) Create(rw http.ResponseWriter, r *http.Request) {
@@ -464,344 +462,3 @@ func (handler *handler) DeletePublic(rw http.ResponseWriter, r *http.Request) {
 
 	render.Success(rw, http.StatusNoContent, nil)
 }
-
-// Perses-backed (v2) dashboard handlers
-
-func (handler *handler) CreatePerses(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	body, err := io.ReadAll(r.Body)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	req, err := dashboardtypes.UnmarshalAndValidateDashboardV2JSON(body)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	dashboard, err := handler.module.CreatePerses(ctx, orgID, claims.Email, valuer.MustNewUUID(claims.IdentityID()), *req)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	gettable, err := dashboardtypes.NewGettableDashboardV2FromDashboard(dashboard)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusCreated, gettable)
-}
-
-func (handler *handler) GetPerses(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	id := mux.Vars(r)["id"]
-	if id == "" {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
-		return
-	}
-
-	if handler.integrations.IsCloudIntegrationDashboard(id) {
-		dashboard, err := handler.integrations.GetCloudIntegrationDashboard(ctx, orgID, id)
-		if err != nil {
-			render.Error(rw, err)
-			return
-		}
-		render.Success(rw, http.StatusOK, dashboard)
-		return
-	}
-
-	if handler.integrations.IsInstalledIntegrationDashboard(id) {
-		dashboard, err := handler.integrations.GetInstalledIntegrationDashboard(ctx, orgID, id)
-		if err != nil {
-			render.Error(rw, err)
-			return
-		}
-		render.Success(rw, http.StatusOK, dashboard)
-		return
-	}
-
-	dashboardID, err := valuer.NewUUID(id)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	dashboard, err := handler.module.GetPerses(ctx, orgID, dashboardID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusOK, dashboard)
-}
-
-func (handler *handler) UpdatePerses(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	// TODO: reject cloud integration and installed integration dashboard IDs
-	// (prefixed with "cloud-integration--" and "integration--") with an explicit error,
-	// since those dashboards are read-only and cannot be updated.
-	id := mux.Vars(r)["id"]
-	if id == "" {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
-		return
-	}
-	dashboardID, err := valuer.NewUUID(id)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	body, err := io.ReadAll(r.Body)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	req, err := dashboardtypes.UnmarshalAndValidateDashboardV2JSON(body)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	diff := 0
-	if claims.IdentNProvider == authtypes.IdentNProviderTokenizer {
-		diff = 1
-	}
-
-	dashboard, err := handler.module.UpdatePerses(ctx, orgID, dashboardID, claims.Email, *req, diff)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusOK, dashboard)
-}
-
-func (handler *handler) DeletePerses(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	id := mux.Vars(r)["id"]
-	if id == "" {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
-		return
-	}
-	dashboardID, err := valuer.NewUUID(id)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	err = handler.module.DeletePerses(ctx, orgID, dashboardID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusNoContent, nil)
-}
-
-func (handler *handler) LockUnlockPerses(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	id := mux.Vars(r)["id"]
-	if id == "" {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
-		return
-	}
-	dashboardID, err := valuer.NewUUID(id)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	req := new(dashboardtypes.LockUnlockDashboard)
-	if err := json.NewDecoder(r.Body).Decode(req); err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	isAdmin := false
-	selectors := []authtypes.Selector{
-		authtypes.MustNewSelector(authtypes.TypeRole, authtypes.SigNozAdminRoleName),
-	}
-	err = handler.authz.CheckWithTupleCreation(
-		ctx,
-		claims,
-		valuer.MustNewUUID(claims.OrgID),
-		authtypes.RelationAssignee,
-		authtypes.TypeableRole,
-		selectors,
-		selectors,
-	)
-	if err == nil {
-		isAdmin = true
-	}
-
-	dashboard, err := handler.module.LockUnlockPerses(ctx, orgID, dashboardID, claims.Email, isAdmin, *req.Locked)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusOK, dashboard)
-}
-
-func (handler *handler) UpdateNamePerses(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	id := mux.Vars(r)["id"]
-	if id == "" {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
-		return
-	}
-	dashboardID, err := valuer.NewUUID(id)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	var req struct {
-		Name string `json:"name"`
-	}
-	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	dashboard, err := handler.module.UpdateNamePerses(ctx, orgID, dashboardID, claims.Email, req.Name)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusOK, dashboard)
-}
-
-func (handler *handler) UpdateDescriptionPerses(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	id := mux.Vars(r)["id"]
-	if id == "" {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
-		return
-	}
-	dashboardID, err := valuer.NewUUID(id)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	var req struct {
-		Description string `json:"description"`
-	}
-	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	dashboard, err := handler.module.UpdateDescriptionPerses(ctx, orgID, dashboardID, claims.Email, req.Description)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusOK, dashboard)
-}

pkg/modules/dashboard/impldashboard/module.go

@@ -322,160 +322,6 @@ func (module *module) checkClickHouseQueriesForMetricNames(ctx context.Context,
 }
 
 // checkPromQLQueriesForMetricNames checks promql[] array for metric names in query strings.
-// Perses-backed (v2) dashboard methods
-
-func (module *module) CreatePerses(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, data dashboardtypes.PostableDashboardV2) (*dashboardtypes.DashboardV2, error) {
-	dashboard := dashboardtypes.NewDashboardV2(orgID, createdBy, data)
-
-	storable, err := dashboardtypes.NewStorableDashboardFromDashboardV2(dashboard)
-	if err != nil {
-		return nil, err
-	}
-
-	err = module.store.Create(ctx, storable)
-	if err != nil {
-		return nil, err
-	}
-
-	module.analytics.TrackUser(ctx, orgID.String(), creator.String(), "Dashboard Created", dashboardtypes.NewStatsFromStorableDashboardsV2([]*dashboardtypes.StorableDashboard{storable}))
-
-	return dashboard, nil
-}
-
-func (module *module) GetPerses(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
-	storable, err := module.store.Get(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-
-	return dashboardtypes.NewDashboardV2FromStorableDashboard(storable), nil
-}
-
-func (module *module) UpdatePerses(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, data dashboardtypes.UpdatableDashboardV2, diff int) (*dashboardtypes.DashboardV2, error) {
-	// Fetch current state to validate lock status and panel diff before updating.
-	// This lives in the module layer (not pushed into a conditional SQL update)
-	// to keep business logic out of the store.
-	storable, err := module.store.Get(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-
-	dashboard := dashboardtypes.NewDashboardV2FromStorableDashboard(storable)
-
-	err = dashboard.Update(ctx, data, updatedBy, diff)
-	if err != nil {
-		return nil, err
-	}
-
-	updatedStorable, err := dashboardtypes.NewStorableDashboardFromDashboardV2(dashboard)
-	if err != nil {
-		return nil, err
-	}
-
-	err = module.store.Update(ctx, orgID, updatedStorable)
-	if err != nil {
-		return nil, err
-	}
-
-	return dashboard, nil
-}
-
-func (module *module) DeletePerses(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
-	dashboard, err := module.Get(ctx, orgID, id)
-	if err != nil {
-		return err
-	}
-
-	if dashboard.Locked {
-		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "dashboard is locked, please unlock the dashboard to delete it")
-	}
-
-	return module.store.Delete(ctx, orgID, id)
-}
-
-func (module *module) LockUnlockPerses(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) (*dashboardtypes.DashboardV2, error) {
-	storable, err := module.store.Get(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-
-	dashboard := dashboardtypes.NewDashboardV2FromStorableDashboard(storable)
-
-	role := types.RoleViewer
-	if isAdmin {
-		role = types.RoleAdmin
-	}
-
-	err = dashboard.LockUnlock(lock, role, updatedBy)
-	if err != nil {
-		return nil, err
-	}
-
-	updatedStorable, err := dashboardtypes.NewStorableDashboardFromDashboardV2(dashboard)
-	if err != nil {
-		return nil, err
-	}
-
-	err = module.store.Update(ctx, orgID, updatedStorable)
-	if err != nil {
-		return nil, err
-	}
-
-	return dashboard, nil
-}
-
-func (module *module) UpdateNamePerses(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, name string) (*dashboardtypes.DashboardV2, error) {
-	storable, err := module.store.Get(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-
-	dashboard := dashboardtypes.NewDashboardV2FromStorableDashboard(storable)
-
-	err = dashboard.UpdateName(name, updatedBy)
-	if err != nil {
-		return nil, err
-	}
-
-	updatedStorable, err := dashboardtypes.NewStorableDashboardFromDashboardV2(dashboard)
-	if err != nil {
-		return nil, err
-	}
-
-	err = module.store.Update(ctx, orgID, updatedStorable)
-	if err != nil {
-		return nil, err
-	}
-
-	return dashboard, nil
-}
-
-func (module *module) UpdateDescriptionPerses(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, description string) (*dashboardtypes.DashboardV2, error) {
-	storable, err := module.store.Get(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-
-	dashboard := dashboardtypes.NewDashboardV2FromStorableDashboard(storable)
-
-	err = dashboard.UpdateDescription(description, updatedBy)
-	if err != nil {
-		return nil, err
-	}
-
-	updatedStorable, err := dashboardtypes.NewStorableDashboardFromDashboardV2(dashboard)
-	if err != nil {
-		return nil, err
-	}
-
-	err = module.store.Update(ctx, orgID, updatedStorable)
-	if err != nil {
-		return nil, err
-	}
-
-	return dashboard, nil
-}
-
 func (module *module) checkPromQLQueriesForMetricNames(ctx context.Context, query map[string]interface{}, metricNames []string, foundMetrics map[string]bool) {
 	promQL, ok := query["promql"].([]interface{})
 	if !ok {

pkg/query-service/app/cloudintegrations/controller.go

@@ -623,87 +623,3 @@ func (c *Controller) IsCloudIntegrationDashboardUuid(dashboardUuid string) bool
 	_, _, _, apiErr := c.parseDashboardUuid(dashboardUuid)
 	return apiErr == nil
 }
-
-// GetDashboardV2ById and AvailableDashboardsV2ForCloudProvider assume that
-// integration dashboard definitions have been migrated to the v2 (Perses) schema.
-// The bundled asset definitions (svc.Assets.Dashboards) must produce
-// StorableDashboardDataV2 with a populated v1.DashboardSpec for this to work correctly.
-// Locked is set at Get time (not stored in the definition) since integration
-// dashboards are always locked.
-func (c *Controller) GetDashboardV2ById(ctx context.Context, orgID valuer.UUID, dashboardUuid string) (*dashboardtypes.DashboardV2, *model.ApiError) {
-	cloudProvider, _, _, apiErr := c.parseDashboardUuid(dashboardUuid)
-	if apiErr != nil {
-		return nil, apiErr
-	}
-
-	allDashboards, apiErr := c.AvailableDashboardsV2ForCloudProvider(ctx, orgID, cloudProvider)
-	if apiErr != nil {
-		return nil, model.WrapApiError(apiErr, "couldn't list available dashboards")
-	}
-
-	for _, d := range allDashboards {
-		if d.ID == dashboardUuid {
-			return d, nil
-		}
-	}
-
-	return nil, model.NotFoundError(fmt.Errorf("couldn't find dashboard with uuid: %s", dashboardUuid))
-}
-
-func (c *Controller) AvailableDashboardsV2ForCloudProvider(ctx context.Context, orgID valuer.UUID, cloudProvider string) ([]*dashboardtypes.DashboardV2, *model.ApiError) {
-	accountRecords, apiErr := c.accountsRepo.listConnected(ctx, orgID.StringValue(), cloudProvider)
-	if apiErr != nil {
-		return nil, model.WrapApiError(apiErr, "couldn't list connected cloud accounts")
-	}
-
-	servicesWithAvailableMetrics := map[string]*time.Time{}
-
-	for _, ar := range accountRecords {
-		if ar.AccountID != nil {
-			configsBySvcId, apiErr := c.serviceConfigRepo.getAllForAccount(
-				ctx, orgID.StringValue(), ar.ID.StringValue(),
-			)
-			if apiErr != nil {
-				return nil, apiErr
-			}
-
-			for svcId, config := range configsBySvcId {
-				if config.Metrics != nil && config.Metrics.Enabled {
-					servicesWithAvailableMetrics[svcId] = &ar.CreatedAt
-				}
-			}
-		}
-	}
-
-	allServices, apiErr := services.List(cloudProvider)
-	if apiErr != nil {
-		return nil, apiErr
-	}
-
-	svcDashboards := []*dashboardtypes.DashboardV2{}
-	for _, svc := range allServices {
-		serviceDashboardsCreatedAt := servicesWithAvailableMetrics[svc.Id]
-		if serviceDashboardsCreatedAt != nil {
-			for _, d := range svc.Assets.Dashboards {
-				author := fmt.Sprintf("%s-integration", cloudProvider)
-				svcDashboards = append(svcDashboards, &dashboardtypes.DashboardV2{
-					ID: c.dashboardUuid(cloudProvider, svc.Id, d.Id),
-					TimeAuditable: types.TimeAuditable{
-						CreatedAt: *serviceDashboardsCreatedAt,
-						UpdatedAt: *serviceDashboardsCreatedAt,
-					},
-					UserAuditable: types.UserAuditable{
-						CreatedBy: author,
-						UpdatedBy: author,
-					},
-					OrgID:  orgID,
-					Data:   *d.DefinitionV2,
-					Locked: true,
-				})
-			}
-			servicesWithAvailableMetrics[svc.Id] = nil
-		}
-	}
-
-	return svcDashboards, nil
-}

pkg/query-service/app/cloudintegrations/services/models.go

@@ -88,8 +88,4 @@ type Dashboard struct {
 	Description string                                `json:"description"`
 	Image       string                                `json:"image"`
 	Definition  *dashboardtypes.StorableDashboardData `json:"definition,omitempty"`
-	// TODO: populate DefinitionV2 from bundled asset files once integration
-	// dashboard definitions are migrated to the v2 (Perses) schema.
-	// Locked should NOT be set in the definition — it is set at Get time.
-	DefinitionV2 *dashboardtypes.StorableDashboardDataV2 `json:"definition_v2,omitempty"`
 }

pkg/query-service/app/http_handler.go

@@ -540,16 +540,6 @@ func (aH *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	router.HandleFunc("/api/v1/dashboards/{id}", am.EditAccess(aH.Signoz.Handlers.Dashboard.Update)).Methods(http.MethodPut)
 	router.HandleFunc("/api/v1/dashboards/{id}", am.EditAccess(aH.Signoz.Handlers.Dashboard.Delete)).Methods(http.MethodDelete)
 	router.HandleFunc("/api/v1/dashboards/{id}/lock", am.EditAccess(aH.Signoz.Handlers.Dashboard.LockUnlock)).Methods(http.MethodPut)
-
-	// Dashboard v2 routes
-	router.HandleFunc("/api/v2/dashboards", am.EditAccess(aH.Signoz.Handlers.Dashboard.CreatePerses)).Methods(http.MethodPost)
-	router.HandleFunc("/api/v2/dashboards/{id}", am.ViewAccess(aH.Signoz.Handlers.Dashboard.GetPerses)).Methods(http.MethodGet)
-	router.HandleFunc("/api/v2/dashboards/{id}", am.EditAccess(aH.Signoz.Handlers.Dashboard.UpdatePerses)).Methods(http.MethodPut)
-	router.HandleFunc("/api/v2/dashboards/{id}", am.EditAccess(aH.Signoz.Handlers.Dashboard.DeletePerses)).Methods(http.MethodDelete)
-	router.HandleFunc("/api/v2/dashboards/{id}/lock", am.EditAccess(aH.Signoz.Handlers.Dashboard.LockUnlockPerses)).Methods(http.MethodPatch)
-	router.HandleFunc("/api/v2/dashboards/{id}/name", am.EditAccess(aH.Signoz.Handlers.Dashboard.UpdateNamePerses)).Methods(http.MethodPatch)
-	router.HandleFunc("/api/v2/dashboards/{id}/description", am.EditAccess(aH.Signoz.Handlers.Dashboard.UpdateDescriptionPerses)).Methods(http.MethodPatch)
-
 	router.HandleFunc("/api/v2/variables/query", am.ViewAccess(aH.queryDashboardVarsV2)).Methods(http.MethodPost)
 
 	router.HandleFunc("/api/v1/explorer/views", am.ViewAccess(aH.Signoz.Handlers.SavedView.List)).Methods(http.MethodGet)
@@ -617,6 +607,7 @@ func (aH *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	router.HandleFunc("/api/v1/query_filter/analyze", am.ViewAccess(aH.QueryParserAPI.AnalyzeQueryFilter)).Methods(http.MethodPost)
 }
 
+
 func Intersection(a, b []int) (c []int) {
 	m := make(map[int]bool)
 

pkg/query-service/app/integration_dashboard_adapter.go

@@ -1,57 +0,0 @@
-package app
-
-import (
-	"context"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/modules/dashboard"
-	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
-	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
-	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-)
-
-// integrationDashboardAdapter adapts CloudIntegrationsController and
-// IntegrationsController to the dashboardv2.IntegrationDashboardProvider interface.
-//
-// This adapter lives in pkg/query-service/app/ because the controllers it wraps
-// are here. Once those controllers are moved to pkg/modules/, this adapter becomes
-// unnecessary — the controllers can implement IntegrationDashboardProvider directly.
-type integrationDashboardAdapter struct {
-	cloud        *cloudintegrations.Controller
-	integrations *integrations.Controller
-}
-
-func NewIntegrationDashboardAdapter(
-	cloud *cloudintegrations.Controller,
-	integrations *integrations.Controller,
-) dashboard.IntegrationDashboardProvider {
-	return &integrationDashboardAdapter{
-		cloud:        cloud,
-		integrations: integrations,
-	}
-}
-
-func (a *integrationDashboardAdapter) IsCloudIntegrationDashboard(id string) bool {
-	return a.cloud.IsCloudIntegrationDashboardUuid(id)
-}
-
-func (a *integrationDashboardAdapter) GetCloudIntegrationDashboard(ctx context.Context, orgID valuer.UUID, id string) (*dashboardtypes.DashboardV2, error) {
-	dashboard, apiErr := a.cloud.GetDashboardV2ById(ctx, orgID, id)
-	if apiErr != nil {
-		return nil, errors.Wrapf(apiErr, errors.TypeInternal, errors.CodeInternal, "failed to get cloud integration dashboard")
-	}
-	return dashboard, nil
-}
-
-func (a *integrationDashboardAdapter) IsInstalledIntegrationDashboard(id string) bool {
-	return a.integrations.IsInstalledIntegrationDashboardID(id)
-}
-
-func (a *integrationDashboardAdapter) GetInstalledIntegrationDashboard(ctx context.Context, orgID valuer.UUID, id string) (*dashboardtypes.DashboardV2, error) {
-	dashboard, apiErr := a.integrations.GetInstalledIntegrationDashboardV2ById(ctx, orgID, id)
-	if apiErr != nil {
-		return nil, errors.Wrapf(apiErr, errors.TypeInternal, errors.CodeInternal, "failed to get installed integration dashboard")
-	}
-	return dashboard, nil
-}

pkg/query-service/app/integrations/controller.go

@@ -121,7 +121,3 @@ func (c *Controller) GetInstalledIntegrationDashboardById(ctx context.Context, o
 func (c *Controller) IsInstalledIntegrationDashboardID(dashboardUuid string) bool {
 	return c.mgr.IsInstalledIntegrationDashboardUuid(dashboardUuid)
 }
-
-func (c *Controller) GetInstalledIntegrationDashboardV2ById(ctx context.Context, orgID valuer.UUID, dashboardUuid string) (*dashboardtypes.DashboardV2, *model.ApiError) {
-	return c.mgr.GetInstalledIntegrationDashboardV2ById(ctx, orgID, dashboardUuid)
-}

pkg/query-service/app/integrations/manager.go

@@ -35,11 +35,6 @@ type IntegrationSummary struct {
 type IntegrationAssets struct {
 	Logs       LogsAssets                             `json:"logs"`
 	Dashboards []dashboardtypes.StorableDashboardData `json:"dashboards"`
-	// TODO: populate DashboardsV2 from bundled asset files once integration
-	// dashboard definitions are migrated to the v2 (Perses) schema.
-	// Map key is the integration dashboard ID.
-	// Locked should NOT be set in the definition — it is set at Get time.
-	DashboardsV2 map[string]dashboardtypes.StorableDashboardDataV2 `json:"dashboards_v2"`
 
 	Alerts []ruletypes.PostableRule `json:"alerts"`
 }
@@ -364,55 +359,6 @@ func (m *Manager) GetInstalledIntegrationDashboardById(
 	))
 }
 
-// GetInstalledIntegrationDashboardV2ById assumes that integration dashboard
-// definitions have been migrated to the v2 (Perses) schema.
-// Locked is set at Get time (not stored in the definition) since integration
-// dashboards are always locked.
-func (m *Manager) GetInstalledIntegrationDashboardV2ById(
-	ctx context.Context,
-	orgID valuer.UUID,
-	dashboardUuid string,
-) (*dashboardtypes.DashboardV2, *model.ApiError) {
-	integrationId, dashboardId, apiErr := m.parseDashboardUuid(dashboardUuid)
-	if apiErr != nil {
-		return nil, apiErr
-	}
-
-	integration, apiErr := m.GetIntegration(ctx, orgID.StringValue(), integrationId)
-	if apiErr != nil {
-		return nil, apiErr
-	}
-
-	if integration.Installation == nil {
-		return nil, model.BadRequest(fmt.Errorf(
-			"integration with id %s is not installed", integrationId,
-		))
-	}
-
-	dd, ok := integration.IntegrationDetails.Assets.DashboardsV2[dashboardId]
-	if !ok {
-		return nil, model.NotFoundError(fmt.Errorf(
-			"integration dashboard with id %s not found", dashboardUuid,
-		))
-	}
-
-	author := "integration"
-	return &dashboardtypes.DashboardV2{
-		ID: m.dashboardUuid(integrationId, dashboardId),
-		TimeAuditable: types.TimeAuditable{
-			CreatedAt: integration.Installation.InstalledAt,
-			UpdatedAt: integration.Installation.InstalledAt,
-		},
-		UserAuditable: types.UserAuditable{
-			CreatedBy: author,
-			UpdatedBy: author,
-		},
-		OrgID:  orgID,
-		Data:   dd,
-		Locked: true,
-	}, nil
-}
-
 func (m *Manager) GetDashboardsForInstalledIntegrations(
 	ctx context.Context,
 	orgId valuer.UUID,

pkg/signoz/handler.go

@@ -81,7 +81,7 @@ func NewHandlers(
 	return Handlers{
 		SavedView:               implsavedview.NewHandler(modules.SavedView),
 		Apdex:                   implapdex.NewHandler(modules.Apdex),
-		Dashboard:               impldashboard.NewHandler(modules.Dashboard, providerSettings, authz), // cant call NewIntegrationDashboardAdapter here!!!
+		Dashboard:               impldashboard.NewHandler(modules.Dashboard, providerSettings, authz),
 		QuickFilter:             implquickfilter.NewHandler(modules.QuickFilter),
 		TraceFunnel:             impltracefunnel.NewHandler(modules.TraceFunnel),
 		RawDataExport:           implrawdataexport.NewHandler(modules.RawDataExport),

pkg/signoz/signoz.go

@@ -312,7 +312,7 @@ func New(
 	// Initialize query parser (needed for dashboard module)
 	queryParser := queryparser.New(providerSettings)
 
-	// Initialize dashboard modules (needed for authz registry)
+	// Initialize dashboard module (needed for authz registry)
 	dashboard := dashboardModuleCallback(sqlstore, providerSettings, analytics, orgGetter, queryParser, querier, licensing)
 
 	// Initialize authz

pkg/types/dashboardtypes/dashboard.go

@@ -34,10 +34,9 @@ type StorableDashboard struct {
 	types.Identifiable
 	types.TimeAuditable
 	types.UserAuditable
-	Data   StorableDashboardData   `bun:"data,type:text,notnull"`
-	DataV2 StorableDashboardDataV2 `bun:"datav2,type:text,notnull"`
-	Locked bool                    `bun:"locked,notnull,default:false"`
-	OrgID  valuer.UUID             `bun:"org_id,notnull"`
+	Data   StorableDashboardData `bun:"data,type:text,notnull"`
+	Locked bool                  `bun:"locked,notnull,default:false"`
+	OrgID  valuer.UUID           `bun:"org_id,notnull"`
 }
 
 type Dashboard struct {

pkg/types/dashboardtypes/dashboard_v2.go

@@ -1,433 +0,0 @@
-package dashboardtypes
-
-import (
-	"context"
-	"encoding/json"
-	"fmt"
-	"slices"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/types"
-	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/go-playground/validator/v10"
-	v1 "github.com/perses/perses/pkg/model/api/v1"
-	"github.com/perses/perses/pkg/model/api/v1/common"
-)
-
-// StorableDashboardDataV2 wraps v1.DashboardSpec (Perses) with additional SigNoz-specific fields.
-//
-// We embed DashboardSpec (not v1.Dashboard) to avoid carrying Perses's Metadata
-// (Name, Project, CreatedAt, UpdatedAt, Tags, Version) and Kind field. SigNoz
-// manages identity (ID), timestamps (TimeAuditable), and multi-tenancy (OrgID)
-// separately on StorableDashboardV2/DashboardV2.
-//
-// The following v1 request fields map to locations inside v1.DashboardSpec:
-//   - title       → Display.Name          (common.Display)
-//   - description → Display.Description   (common.Display)
-//
-// Fields that have no Perses equivalent live on this wrapper:
-//   - image           → Image
-//   - uploadedGrafana → UploadedGrafana
-type StorableDashboardDataV2 struct {
-	v1.DashboardSpec
-	Image           string `json:"image,omitempty"`
-	UploadedGrafana bool   `json:"uploadedGrafana,omitempty"`
-}
-
-type DashboardV2 struct {
-	types.TimeAuditable
-	types.UserAuditable
-
-	ID     string                  `json:"id"`
-	Data   StorableDashboardDataV2 `json:"data"`
-	Locked bool                    `json:"locked"`
-	OrgID  valuer.UUID             `json:"org_id"`
-}
-
-type (
-	GettableDashboardV2  = DashboardV2
-	UpdatableDashboardV2 = StorableDashboardDataV2
-	PostableDashboardV2  = StorableDashboardDataV2
-	ListableDashboardV2  []*GettableDashboardV2
-)
-
-func NewStorableDashboardFromDashboardV2(dashboard *DashboardV2) (*StorableDashboard, error) {
-	dashboardID, err := valuer.NewUUID(dashboard.ID)
-	if err != nil {
-		return nil, errors.Wrapf(err, errors.TypeInvalidInput, errors.CodeInvalidInput, "id is not a valid uuid")
-	}
-
-	return &StorableDashboard{
-		Identifiable: types.Identifiable{
-			ID: dashboardID,
-		},
-		TimeAuditable: types.TimeAuditable{
-			CreatedAt: dashboard.CreatedAt,
-			UpdatedAt: dashboard.UpdatedAt,
-		},
-		UserAuditable: types.UserAuditable{
-			CreatedBy: dashboard.CreatedBy,
-			UpdatedBy: dashboard.UpdatedBy,
-		},
-		OrgID:  dashboard.OrgID,
-		DataV2: dashboard.Data,
-		Locked: dashboard.Locked,
-	}, nil
-}
-
-func NewDashboardV2(orgID valuer.UUID, createdBy string, data StorableDashboardDataV2) *DashboardV2 {
-	currentTime := time.Now()
-	return &DashboardV2{
-		ID: valuer.GenerateUUID().StringValue(),
-		TimeAuditable: types.TimeAuditable{
-			CreatedAt: currentTime,
-			UpdatedAt: currentTime,
-		},
-		UserAuditable: types.UserAuditable{
-			CreatedBy: createdBy,
-			UpdatedBy: createdBy,
-		},
-		OrgID:  orgID,
-		Data:   data,
-		Locked: false,
-	}
-}
-
-func NewDashboardV2FromStorableDashboard(storableDashboard *StorableDashboard) *DashboardV2 {
-	return &DashboardV2{
-		ID: storableDashboard.ID.StringValue(),
-		TimeAuditable: types.TimeAuditable{
-			CreatedAt: storableDashboard.CreatedAt,
-			UpdatedAt: storableDashboard.UpdatedAt,
-		},
-		UserAuditable: types.UserAuditable{
-			CreatedBy: storableDashboard.CreatedBy,
-			UpdatedBy: storableDashboard.UpdatedBy,
-		},
-		OrgID:  storableDashboard.OrgID,
-		Data:   storableDashboard.DataV2,
-		Locked: storableDashboard.Locked,
-	}
-}
-
-func NewDashboardsV2FromStorableDashboards(storableDashboards []*StorableDashboard) []*DashboardV2 {
-	dashboards := make([]*DashboardV2, len(storableDashboards))
-	for idx, storableDashboard := range storableDashboards {
-		dashboards[idx] = NewDashboardV2FromStorableDashboard(storableDashboard)
-	}
-	return dashboards
-}
-
-func NewGettableDashboardsV2FromDashboards(dashboards []*DashboardV2) ([]*GettableDashboardV2, error) {
-	gettableDashboards := make([]*GettableDashboardV2, len(dashboards))
-	for idx, d := range dashboards {
-		gettableDashboard, err := NewGettableDashboardV2FromDashboard(d)
-		if err != nil {
-			return nil, err
-		}
-		gettableDashboards[idx] = gettableDashboard
-	}
-	return gettableDashboards, nil
-}
-
-func NewGettableDashboardV2FromDashboard(dashboard *DashboardV2) (*GettableDashboardV2, error) {
-	return &GettableDashboardV2{
-		ID:            dashboard.ID,
-		TimeAuditable: dashboard.TimeAuditable,
-		UserAuditable: dashboard.UserAuditable,
-		OrgID:         dashboard.OrgID,
-		Data:          dashboard.Data,
-		Locked:        dashboard.Locked,
-	}, nil
-}
-
-func (dashboard *DashboardV2) Update(ctx context.Context, updatableDashboard UpdatableDashboardV2, updatedBy string, diff int) error {
-	if dashboard.Locked {
-		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "cannot update a locked dashboard, please unlock the dashboard to update")
-	}
-
-	if diff > 0 {
-		deleted := 0
-		for key := range dashboard.Data.Panels {
-			if _, exists := updatableDashboard.Panels[key]; !exists {
-				deleted++
-			}
-		}
-		if deleted > diff {
-			return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "deleting more than %d panel(s) is not supported", diff)
-		}
-	}
-
-	dashboard.UpdatedBy = updatedBy
-	dashboard.UpdatedAt = time.Now()
-	dashboard.Data = updatableDashboard
-	return nil
-}
-
-func (dashboard *DashboardV2) UpdateName(name string, updatedBy string) error {
-	if dashboard.Locked {
-		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "cannot update a locked dashboard, please unlock the dashboard to update")
-	}
-	if dashboard.Data.Display == nil {
-		dashboard.Data.Display = &common.Display{}
-	}
-	dashboard.Data.Display.Name = name
-	dashboard.UpdatedBy = updatedBy
-	dashboard.UpdatedAt = time.Now()
-	return nil
-}
-
-func (dashboard *DashboardV2) UpdateDescription(description string, updatedBy string) error {
-	if dashboard.Locked {
-		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "cannot update a locked dashboard, please unlock the dashboard to update")
-	}
-	if dashboard.Data.Display == nil {
-		dashboard.Data.Display = &common.Display{}
-	}
-	dashboard.Data.Display.Description = description
-	dashboard.UpdatedBy = updatedBy
-	dashboard.UpdatedAt = time.Now()
-	return nil
-}
-
-func (dashboard *DashboardV2) LockUnlock(lock bool, role types.Role, updatedBy string) error {
-	if dashboard.CreatedBy != updatedBy && role != types.RoleAdmin {
-		return errors.Newf(errors.TypeForbidden, errors.CodeForbidden, "you are not authorized to lock/unlock this dashboard")
-	}
-	dashboard.Locked = lock
-	dashboard.UpdatedBy = updatedBy
-	dashboard.UpdatedAt = time.Now()
-	return nil
-}
-
-// UnmarshalAndValidateDashboardV2JSON unmarshals the JSON into a StorableDashboardDataV2
-// (= PostableDashboardV2 = UpdatableDashboardV2) and validates plugin kinds and specs.
-func UnmarshalAndValidateDashboardV2JSON(data []byte) (*StorableDashboardDataV2, error) {
-	var d StorableDashboardDataV2
-	if err := json.Unmarshal(data, &d); err != nil {
-		return nil, err
-	}
-	if err := validateDashboardV2(d); err != nil {
-		return nil, err
-	}
-	return &d, nil
-}
-
-// Plugin kind → spec type factory. Each value is a pointer to the zero value of the
-// expected spec struct. validatePluginSpec marshals plugin.Spec back to JSON and
-// unmarshals into the typed struct to catch field-level errors.
-var (
-	panelPluginSpecs = map[string]func() any{
-		PanelKindTimeSeries: func() any { return new(TimeSeriesPanelSpec) },
-		PanelKindBarChart:   func() any { return new(BarChartPanelSpec) },
-		PanelKindNumber:     func() any { return new(NumberPanelSpec) },
-		PanelKindPieChart:   func() any { return new(PieChartPanelSpec) },
-		PanelKindTable:      func() any { return new(TablePanelSpec) },
-		PanelKindHistogram:  func() any { return new(HistogramPanelSpec) },
-		PanelKindList:       func() any { return new(ListPanelSpec) },
-	}
-	queryPluginSpecs = map[string]func() any{
-		QueryKindBuilder:       func() any { return new(BuilderQuerySpec) },
-		QueryKindComposite:     func() any { return new(CompositeQuerySpec) },
-		QueryKindFormula:       func() any { return new(FormulaSpec) },
-		QueryKindPromQL:        func() any { return new(PromQLQuerySpec) },
-		QueryKindClickHouseSQL: func() any { return new(ClickHouseSQLQuerySpec) },
-		QueryKindTraceOperator: func() any { return new(TraceOperatorSpec) },
-	}
-	variablePluginSpecs = map[string]func() any{
-		VariableKindDynamic: func() any { return new(DynamicVariableSpec) },
-		VariableKindQuery:   func() any { return new(QueryVariableSpec) },
-		VariableKindCustom:  func() any { return new(CustomVariableSpec) },
-		VariableKindTextbox: func() any { return new(TextboxVariableSpec) },
-	}
-	datasourcePluginSpecs = map[string]func() any{
-		DatasourceKindSigNoz: func() any { return new(struct{}) },
-	}
-
-	// allowedQueryKinds maps each panel plugin kind to the query plugin
-	// kinds it supports. Composite sub-query types are mapped to these
-	// same kind strings via compositeSubQueryTypeToPluginKind.
-	allowedQueryKinds = map[string][]string{
-		PanelKindTimeSeries: {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindBarChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindNumber:     {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindHistogram:  {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindPieChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
-		PanelKindTable:      {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
-		PanelKindList:       {QueryKindBuilder},
-	}
-
-	// compositeSubQueryTypeToPluginKind maps CompositeQuery sub-query type
-	// strings to the equivalent top-level query plugin kind for validation.
-	compositeSubQueryTypeToPluginKind = map[string]string{
-		qb.QueryTypeBuilder.StringValue():       QueryKindBuilder,
-		qb.QueryTypeFormula.StringValue():       QueryKindFormula,
-		qb.QueryTypeTraceOperator.StringValue(): QueryKindTraceOperator,
-		qb.QueryTypePromQL.StringValue():        QueryKindPromQL,
-		qb.QueryTypeClickHouseSQL.StringValue(): QueryKindClickHouseSQL,
-	}
-)
-
-func validateDashboardV2(d StorableDashboardDataV2) error {
-	// Validate datasource plugins.
-	for name, ds := range d.Datasources {
-		if err := validatePlugin(ds.Plugin, datasourcePluginSpecs, fmt.Sprintf("datasources.%s.plugin", name)); err != nil {
-			return err
-		}
-	}
-
-	// Validate variable plugins (only ListVariables have plugins; TextVariables do not).
-	for i, v := range d.Variables {
-		plugin, err := extractPluginFromVariable(v)
-		if err != nil {
-			return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "variables[%d]", i)
-		}
-		if plugin == nil {
-			continue
-		}
-		if err := validatePlugin(*plugin, variablePluginSpecs, fmt.Sprintf("variables[%d].spec.plugin", i)); err != nil {
-			return err
-		}
-	}
-
-	// Validate panel and query plugins.
-	for key, panel := range d.Panels {
-		if panel == nil {
-			continue
-		}
-		path := fmt.Sprintf("panels.%s", key)
-		if err := validatePlugin(panel.Spec.Plugin, panelPluginSpecs, path+".spec.plugin"); err != nil {
-			return err
-		}
-		allowed := allowedQueryKinds[panel.Spec.Plugin.Kind]
-		for qi, query := range panel.Spec.Queries {
-			queryPath := fmt.Sprintf("%s.spec.queries[%d].spec.plugin", path, qi)
-			if err := validatePlugin(query.Spec.Plugin, queryPluginSpecs, queryPath); err != nil {
-				return err
-			}
-			if err := validateQueryAllowedForPanel(query.Spec.Plugin, allowed, panel.Spec.Plugin.Kind, queryPath); err != nil {
-				return err
-			}
-		}
-	}
-
-	return nil
-}
-
-func validatePlugin(plugin common.Plugin, specs map[string]func() any, path string) error {
-	if plugin.Kind == "" {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: plugin kind is required", path)
-	}
-	factory, ok := specs[plugin.Kind]
-	if !ok {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: unknown plugin kind %q", path, plugin.Kind)
-	}
-	if plugin.Spec == nil {
-		return nil
-	}
-	// Re-marshal the spec and unmarshal into the typed struct.
-	specJSON, err := json.Marshal(plugin.Spec)
-	if err != nil {
-		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
-	}
-	target := factory()
-	if err := json.Unmarshal(specJSON, target); err != nil {
-		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
-	}
-	if err := validator.New().Struct(target); err != nil {
-		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
-	}
-	return nil
-}
-
-// validateQueryAllowedForPanel checks that the query plugin kind is permitted
-// for the given panel. For composite queries it recurses into sub-queries.
-func validateQueryAllowedForPanel(plugin common.Plugin, allowed []string, panelKind string, path string) error {
-	if !slices.Contains(allowed, plugin.Kind) {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
-			"%s: query kind %q is not supported by panel kind %q", path, plugin.Kind, panelKind)
-	}
-
-	// For composite queries, validate each sub-query type.
-	if plugin.Kind == QueryKindComposite && plugin.Spec != nil {
-		specJSON, err := json.Marshal(plugin.Spec)
-		if err != nil {
-			return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
-		}
-		var composite struct {
-			Queries []struct {
-				Type string `json:"type"`
-			} `json:"queries"`
-		}
-		if err := json.Unmarshal(specJSON, &composite); err != nil {
-			return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
-		}
-		for si, sub := range composite.Queries {
-			pluginKind, ok := compositeSubQueryTypeToPluginKind[sub.Type]
-			if !ok {
-				continue
-			}
-			if !slices.Contains(allowed, pluginKind) {
-				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
-					"%s.spec.queries[%d]: sub-query type %q is not supported by panel kind %q",
-					path, si, sub.Type, panelKind)
-			}
-		}
-	}
-	return nil
-}
-
-// extractPluginFromVariable extracts the plugin from a variable.
-// Returns nil if the variable has no plugin (e.g. TextVariable).
-func extractPluginFromVariable(v any) (*common.Plugin, error) {
-	data, err := json.Marshal(v)
-	if err != nil {
-		return nil, err
-	}
-	var raw struct {
-		Spec struct {
-			Plugin *common.Plugin `json:"plugin,omitempty"`
-		} `json:"spec"`
-	}
-	if err := json.Unmarshal(data, &raw); err != nil {
-		return nil, err
-	}
-	return raw.Spec.Plugin, nil
-}
-
-func NewStatsFromStorableDashboardsV2(dashboards []*StorableDashboard) map[string]any {
-	stats := make(map[string]any)
-	stats["dashboard.panels.count"] = int64(0)
-	stats["dashboard.panels.traces.count"] = int64(0)
-	stats["dashboard.panels.metrics.count"] = int64(0)
-	stats["dashboard.panels.logs.count"] = int64(0)
-	for _, dashboard := range dashboards {
-		for _, panel := range dashboard.DataV2.Panels {
-			if panel == nil {
-				continue
-			}
-			stats["dashboard.panels.count"] = stats["dashboard.panels.count"].(int64) + 1
-			for _, query := range panel.Spec.Queries {
-				if query.Spec.Plugin.Kind != QueryKindBuilder {
-					continue
-				}
-				spec, ok := query.Spec.Plugin.Spec.(*BuilderQuerySpec)
-				if !ok {
-					continue
-				}
-				switch spec.Spec.(type) {
-				case MetricBuilderQuerySpec:
-					stats["dashboard.panels.metrics.count"] = stats["dashboard.panels.metrics.count"].(int64) + 1
-				case LogBuilderQuerySpec:
-					stats["dashboard.panels.logs.count"] = stats["dashboard.panels.logs.count"].(int64) + 1
-				case TraceBuilderQuerySpec:
-					stats["dashboard.panels.traces.count"] = stats["dashboard.panels.traces.count"].(int64) + 1
-				}
-			}
-		}
-	}
-	stats["dashboard.count"] = int64(len(dashboards))
-	return stats
-}

pkg/types/dashboardtypes/dashboard_v2_test.go

@@ -1,571 +0,0 @@
-package dashboardtypes
-
-import (
-	"encoding/json"
-	"os"
-	"strings"
-	"testing"
-)
-
-func TestValidateBigExample(t *testing.T) {
-	data, err := os.ReadFile("testdata/perses.json")
-	if err != nil {
-		t.Fatalf("reading example file: %v", err)
-	}
-	if _, err := UnmarshalAndValidateDashboardV2JSON(data); err != nil {
-		t.Fatalf("expected valid dashboard, got error: %v", err)
-	}
-}
-
-func TestValidateDashboardWithSections(t *testing.T) {
-	data, err := os.ReadFile("testdata/perses_with_sections.json")
-	if err != nil {
-		t.Fatalf("reading example file: %v", err)
-	}
-	if _, err := UnmarshalAndValidateDashboardV2JSON(data); err != nil {
-		t.Fatalf("expected valid dashboard, got error: %v", err)
-	}
-}
-
-func TestInvalidateNotAJSON(t *testing.T) {
-	if _, err := UnmarshalAndValidateDashboardV2JSON([]byte("not json")); err == nil {
-		t.Fatal("expected error for invalid JSON")
-	}
-}
-
-func TestValidateEmptySpec(t *testing.T) {
-	// no variables no panels
-	data := []byte(`{}`)
-	if _, err := UnmarshalAndValidateDashboardV2JSON(data); err != nil {
-		t.Fatalf("expected valid, got: %v", err)
-	}
-}
-
-func TestValidateOnlyVariables(t *testing.T) {
-	data := []byte(`{
-		"variables": [
-			{
-				"kind": "ListVariable",
-				"spec": {
-					"name": "service",
-					"allowAllValue": true,
-					"allowMultiple": false,
-					"plugin": {
-						"kind": "SigNozDynamicVariable",
-						"spec": {
-							"name": "service.name",
-							"source": "Metrics"
-						}
-					}
-				}
-			},
-			{
-				"kind": "TextVariable",
-				"spec": {
-					"name": "mytext",
-					"value": "default",
-					"plugin": {
-						"kind": "SigNozTextboxVariable",
-						"spec": {}
-					}
-				}
-			}
-		],
-		"layouts": []
-	}`)
-	if _, err := UnmarshalAndValidateDashboardV2JSON(data); err != nil {
-		t.Fatalf("expected valid, got: %v", err)
-	}
-}
-
-func TestInvalidateUnknownPluginKind(t *testing.T) {
-	tests := []struct {
-		name        string
-		data        string
-		wantContain string
-	}{
-		{
-			name: "unknown panel plugin",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {"kind": "NonExistentPanel", "spec": {}}
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "NonExistentPanel",
-		},
-		{
-			name: "unknown query plugin",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {"kind": "SigNozTimeSeriesPanel", "spec": {}},
-							"queries": [{
-								"kind": "TimeSeriesQuery",
-								"spec": {
-									"plugin": {"kind": "FakeQueryPlugin", "spec": {}}
-								}
-							}]
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "FakeQueryPlugin",
-		},
-		{
-			name: "unknown variable plugin",
-			data: `{
-				"variables": [{
-					"kind": "ListVariable",
-					"spec": {
-						"name": "v1",
-						"allowAllValue": false,
-						"allowMultiple": false,
-						"plugin": {"kind": "FakeVariable", "spec": {}}
-					}
-				}],
-				"layouts": []
-			}`,
-			wantContain: "FakeVariable",
-		},
-		{
-			name: "unknown datasource plugin",
-			data: `{
-				"datasources": {
-					"ds1": {
-						"default": true,
-						"plugin": {"kind": "FakeDatasource", "spec": {}}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "FakeDatasource",
-		},
-	}
-
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			_, err := UnmarshalAndValidateDashboardV2JSON([]byte(tt.data))
-			if err == nil {
-				t.Fatalf("expected error containing %q, got nil", tt.wantContain)
-			}
-			if !strings.Contains(err.Error(), tt.wantContain) {
-				t.Fatalf("error should mention %q, got: %v", tt.wantContain, err)
-			}
-		})
-	}
-}
-
-func TestInvalidateOneInvalidPanel(t *testing.T) {
-	data := []byte(`{
-		"panels": {
-			"good": {
-				"kind": "Panel",
-				"spec": {"plugin": {"kind": "SigNozNumberPanel", "spec": {}}}
-			},
-			"bad": {
-				"kind": "Panel",
-				"spec": {"plugin": {"kind": "FakePanel", "spec": {}}}
-			}
-		},
-		"layouts": []
-	}`)
-	_, err := UnmarshalAndValidateDashboardV2JSON(data)
-	if err == nil {
-		t.Fatal("expected error for invalid panel plugin kind")
-	}
-	if !strings.Contains(err.Error(), "FakePanel") {
-		t.Fatalf("error should mention FakePanel, got: %v", err)
-	}
-}
-
-func TestInvalidateWrongFieldTypeInPluginSpec(t *testing.T) {
-	tests := []struct {
-		name        string
-		data        string
-		wantContain string
-	}{
-		{
-			name: "wrong type on panel plugin field",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {
-								"kind": "SigNozTimeSeriesPanel",
-								"spec": {"visualization": {"fillSpans": "notabool"}}
-							}
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "fillSpans",
-		},
-		{
-			name: "wrong type on query plugin field",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {"kind": "SigNozTimeSeriesPanel", "spec": {}},
-							"queries": [{
-								"kind": "TimeSeriesQuery",
-								"spec": {
-									"plugin": {
-										"kind": "SigNozPromQLQuery",
-										"spec": {"name": "A", "query": 123}
-									}
-								}
-							}]
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "",
-		},
-		{
-			name: "wrong type on variable plugin field",
-			data: `{
-				"variables": [{
-					"kind": "ListVariable",
-					"spec": {
-						"name": "v",
-						"allowAllValue": false,
-						"allowMultiple": false,
-						"plugin": {
-							"kind": "SigNozDynamicVariable",
-							"spec": {"name": 123, "source": "Metrics"}
-						}
-					}
-				}],
-				"layouts": []
-			}`,
-			wantContain: "",
-		},
-	}
-
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			_, err := UnmarshalAndValidateDashboardV2JSON([]byte(tt.data))
-			if err == nil {
-				t.Fatal("expected validation error")
-			}
-			if tt.wantContain != "" && !strings.Contains(err.Error(), tt.wantContain) {
-				t.Fatalf("error should mention %q, got: %v", tt.wantContain, err)
-			}
-		})
-	}
-}
-
-func TestInvalidateBadPanelSpecValues(t *testing.T) {
-	tests := []struct {
-		name        string
-		data        string
-		wantContain string
-	}{
-		{
-			name: "bad time preference",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {
-								"kind": "SigNozTimeSeriesPanel",
-								"spec": {"visualization": {"timePreference": "last2Hr"}}
-							}
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "timePreference",
-		},
-		{
-			name: "bad legend position",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {
-								"kind": "SigNozBarChartPanel",
-								"spec": {"legend": {"position": "top"}}
-							}
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "legend position",
-		},
-		{
-			name: "bad threshold format",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {
-								"kind": "SigNozNumberPanel",
-								"spec": {"thresholds": [{"value": 100, "operator": ">", "color": "Red", "format": "Color"}]}
-							}
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "threshold format",
-		},
-		{
-			name: "bad comparison operator",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {
-								"kind": "SigNozNumberPanel",
-								"spec": {"thresholds": [{"value": 100, "operator": "!=", "color": "Red", "format": "Text"}]}
-							}
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "comparison operator",
-		},
-		{
-			name: "bad precision",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {
-								"kind": "SigNozTimeSeriesPanel",
-								"spec": {"formatting": {"decimalPrecision": 9}}
-							}
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "precision",
-		},
-	}
-
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			_, err := UnmarshalAndValidateDashboardV2JSON([]byte(tt.data))
-			if err == nil {
-				t.Fatalf("expected error containing %q, got nil", tt.wantContain)
-			}
-			if !strings.Contains(err.Error(), tt.wantContain) {
-				t.Fatalf("error should mention %q, got: %v", tt.wantContain, err)
-			}
-		})
-	}
-}
-
-func TestValidateRequiredFields(t *testing.T) {
-	wrapVariable := func(pluginKind, pluginSpec string) string {
-		return `{
-			"variables": [{
-				"kind": "ListVariable",
-				"spec": {
-					"name": "v",
-					"allowAllValue": false,
-					"allowMultiple": false,
-					"plugin": {"kind": "` + pluginKind + `", "spec": ` + pluginSpec + `}
-				}
-			}],
-			"layouts": []
-		}`
-	}
-	wrapPanel := func(panelKind, panelSpec string) string {
-		return `{
-			"panels": {
-				"p1": {
-					"kind": "Panel",
-					"spec": {
-						"plugin": {"kind": "` + panelKind + `", "spec": ` + panelSpec + `}
-					}
-				}
-			},
-			"layouts": []
-		}`
-	}
-
-	tests := []struct {
-		name        string
-		data        string
-		wantContain string
-	}{
-		{
-			name:        "DynamicVariable missing name",
-			data:        wrapVariable("SigNozDynamicVariable", `{"source": "Metrics"}`),
-			wantContain: "Name",
-		},
-		{
-			name:        "DynamicVariable missing source",
-			data:        wrapVariable("SigNozDynamicVariable", `{"name": "http.method"}`),
-			wantContain: "Source",
-		},
-		{
-			name:        "QueryVariable missing queryValue",
-			data:        wrapVariable("SigNozQueryVariable", `{}`),
-			wantContain: "QueryValue",
-		},
-		{
-			name:        "CustomVariable missing customValue",
-			data:        wrapVariable("SigNozCustomVariable", `{}`),
-			wantContain: "CustomValue",
-		},
-		{
-			name:        "ThresholdWithLabel missing color",
-			data:        wrapPanel("SigNozTimeSeriesPanel", `{"thresholds": [{"value": 100, "label": "high", "color": ""}]}`),
-			wantContain: "Color",
-		},
-		{
-			name:        "ThresholdWithLabel missing label",
-			data:        wrapPanel("SigNozTimeSeriesPanel", `{"thresholds": [{"value": 100, "color": "Red", "label": ""}]}`),
-			wantContain: "Label",
-		},
-		{
-			name:        "ComparisonThreshold missing color",
-			data:        wrapPanel("SigNozNumberPanel", `{"thresholds": [{"value": 100, "operator": ">", "format": "Text", "color": ""}]}`),
-			wantContain: "Color",
-		},
-		{
-			name:        "TableThreshold missing columnName",
-			data:        wrapPanel("SigNozTablePanel", `{"thresholds": [{"value": 100, "operator": ">", "format": "Text", "color": "Red", "columnName": ""}]}`),
-			wantContain: "ColumnName",
-		},
-		{
-			name:        "LogField missing name",
-			data:        wrapPanel("SigNozListPanel", `{"selectedLogFields": [{"name": "", "type": "log", "dataType": "string"}]}`),
-			wantContain: "Name",
-		},
-	}
-
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			_, err := UnmarshalAndValidateDashboardV2JSON([]byte(tt.data))
-			if err == nil {
-				t.Fatalf("expected error containing %q, got nil", tt.wantContain)
-			}
-			if !strings.Contains(err.Error(), tt.wantContain) {
-				t.Fatalf("error should mention %q, got: %v", tt.wantContain, err)
-			}
-		})
-	}
-}
-
-func TestTimeSeriesPanelDefaults(t *testing.T) {
-	data := []byte(`{
-		"panels": {
-			"p1": {
-				"kind": "Panel",
-				"spec": {
-					"plugin": {
-						"kind": "SigNozTimeSeriesPanel",
-						"spec": {}
-					}
-				}
-			}
-		},
-		"layouts": []
-	}`)
-	var d StorableDashboardDataV2
-	if err := json.Unmarshal(data, &d); err != nil {
-		t.Fatalf("unmarshal failed: %v", err)
-	}
-
-	specJSON, _ := json.Marshal(d.Panels["p1"].Spec.Plugin.Spec)
-	var spec TimeSeriesPanelSpec
-	if err := json.Unmarshal(specJSON, &spec); err != nil {
-		t.Fatalf("unmarshal spec failed: %v", err)
-	}
-
-	if spec.Formatting.DecimalPrecision.Value() != 2 {
-		t.Fatalf("expected DecimalPrecision default 2, got %v", spec.Formatting.DecimalPrecision.Value())
-	}
-	if spec.ChartAppearance.LineInterpolation.Value() != "spline" {
-		t.Fatalf("expected LineInterpolation default spline, got %v", spec.ChartAppearance.LineInterpolation.Value())
-	}
-	if spec.ChartAppearance.LineStyle.Value() != "solid" {
-		t.Fatalf("expected LineStyle default solid, got %v", spec.ChartAppearance.LineStyle.Value())
-	}
-	if spec.ChartAppearance.FillMode.Value() != "solid" {
-		t.Fatalf("expected FillMode default solid, got %v", spec.ChartAppearance.FillMode.Value())
-	}
-	if spec.ChartAppearance.SpanGaps.Value() != true {
-		t.Fatalf("expected SpanGaps default true, got %v", spec.ChartAppearance.SpanGaps.Value())
-	}
-}
-
-func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
-	mkQuery := func(panelKind, queryKind, querySpec string) []byte {
-		return []byte(`{
-			"panels": {"p1": {"kind": "Panel", "spec": {
-				"plugin": {"kind": "` + panelKind + `", "spec": {}},
-				"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "` + queryKind + `", "spec": ` + querySpec + `}}}]
-			}}},
-			"layouts": []
-		}`)
-	}
-	mkComposite := func(panelKind, subType, subSpec string) []byte {
-		return []byte(`{
-			"panels": {"p1": {"kind": "Panel", "spec": {
-				"plugin": {"kind": "` + panelKind + `", "spec": {}},
-				"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "SigNozCompositeQuery", "spec": {
-					"queries": [{"type": "` + subType + `", "spec": ` + subSpec + `}]
-				}}}}]
-			}}},
-			"layouts": []
-		}`)
-	}
-
-	cases := []struct {
-		name    string
-		data    []byte
-		wantErr bool
-	}{
-		// Top-level: allowed
-		{"TimeSeries+PromQL", mkQuery("SigNozTimeSeriesPanel", "SigNozPromQLQuery", `{"name":"A","query":"up"}`), false},
-		{"Table+ClickHouse", mkQuery("SigNozTablePanel", "SigNozClickHouseSQL", `{"name":"A","query":"SELECT 1"}`), false},
-		{"List+Builder", mkQuery("SigNozListPanel", "SigNozBuilderQuery", `{"name":"A","signal":"logs"}`), false},
-		// Top-level: rejected
-		{"Table+PromQL", mkQuery("SigNozTablePanel", "SigNozPromQLQuery", `{"name":"A","query":"up"}`), true},
-		{"List+ClickHouse", mkQuery("SigNozListPanel", "SigNozClickHouseSQL", `{"name":"A","query":"SELECT 1"}`), true},
-		{"List+PromQL", mkQuery("SigNozListPanel", "SigNozPromQLQuery", `{"name":"A","query":"up"}`), true},
-		{"List+Composite", mkQuery("SigNozListPanel", "SigNozCompositeQuery", `{"queries":[]}`), true},
-		{"List+Formula", mkQuery("SigNozListPanel", "SigNozFormula", `{"name":"F1","expression":"A+B"}`), true},
-		// Composite sub-queries
-		{"Table+Composite(promql)", mkComposite("SigNozTablePanel", "promql", `{"name":"A","query":"up"}`), true},
-		{"Table+Composite(clickhouse)", mkComposite("SigNozTablePanel", "clickhouse_sql", `{"name":"A","query":"SELECT 1"}`), false},
-	}
-
-	for _, tc := range cases {
-		_, err := UnmarshalAndValidateDashboardV2JSON(tc.data)
-		if tc.wantErr && err == nil {
-			t.Fatalf("%s: expected error, got nil", tc.name)
-		}
-		if !tc.wantErr && err != nil {
-			t.Fatalf("%s: expected valid, got: %v", tc.name, err)
-		}
-	}
-}

pkg/types/dashboardtypes/perses_plugin_types.go

@@ -1,541 +0,0 @@
-package dashboardtypes
-
-import (
-	"encoding/json"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
-)
-
-// ══════════════════════════════════════════════
-// SigNoz variable plugin specs
-// ══════════════════════════════════════════════
-
-type VariablePluginKind = string
-
-const (
-	VariableKindDynamic VariablePluginKind = "SigNozDynamicVariable"
-	VariableKindQuery   VariablePluginKind = "SigNozQueryVariable"
-	VariableKindCustom  VariablePluginKind = "SigNozCustomVariable"
-	VariableKindTextbox VariablePluginKind = "SigNozTextboxVariable"
-)
-
-type DynamicVariableSpec struct {
-	// Name is the name of the attribute being fetched dynamically from the
-	// source. This could be extended to a richer selector in the future.
-	Name   string `json:"name" validate:"required" required:"true"`
-	Source string `json:"source" validate:"required" required:"true"`
-}
-
-type QueryVariableSpec struct {
-	QueryValue string `json:"queryValue" validate:"required" required:"true"`
-}
-
-type CustomVariableSpec struct {
-	CustomValue string `json:"customValue" validate:"required" required:"true"`
-}
-
-type TextboxVariableSpec struct{}
-
-// ══════════════════════════════════════════════
-// SigNoz query plugin specs — aliased from querybuildertypesv5
-// ══════════════════════════════════════════════
-
-type QueryPluginKind = string
-
-const (
-	QueryKindBuilder       QueryPluginKind = "SigNozBuilderQuery"
-	QueryKindComposite     QueryPluginKind = "SigNozCompositeQuery"
-	QueryKindFormula       QueryPluginKind = "SigNozFormula"
-	QueryKindPromQL        QueryPluginKind = "SigNozPromQLQuery"
-	QueryKindClickHouseSQL QueryPluginKind = "SigNozClickHouseSQL"
-	QueryKindTraceOperator QueryPluginKind = "SigNozTraceOperator"
-)
-
-type (
-	CompositeQuerySpec     = qb.CompositeQuery
-	QueryEnvelope          = qb.QueryEnvelope
-	FormulaSpec            = qb.QueryBuilderFormula
-	PromQLQuerySpec        = qb.PromQuery
-	ClickHouseSQLQuerySpec = qb.ClickHouseQuery
-	TraceOperatorSpec      = qb.QueryBuilderTraceOperator
-)
-
-// BuilderQuerySpec dispatches to MetricBuilderQuerySpec, LogBuilderQuerySpec,
-// or TraceBuilderQuerySpec based on the signal field.
-
-type (
-	MetricBuilderQuerySpec = qb.QueryBuilderQuery[qb.MetricAggregation]
-	LogBuilderQuerySpec    = qb.QueryBuilderQuery[qb.LogAggregation]
-	TraceBuilderQuerySpec  = qb.QueryBuilderQuery[qb.TraceAggregation]
-)
-
-type BuilderQuerySpec struct {
-	Spec any
-}
-
-func (b *BuilderQuerySpec) UnmarshalJSON(data []byte) error {
-	var peek struct {
-		Signal string `json:"signal"`
-	}
-	if err := json.Unmarshal(data, &peek); err != nil {
-		return err
-	}
-	switch peek.Signal {
-	case "metrics":
-		var spec MetricBuilderQuerySpec
-		if err := json.Unmarshal(data, &spec); err != nil {
-			return err
-		}
-		b.Spec = spec
-	case "logs":
-		var spec LogBuilderQuerySpec
-		if err := json.Unmarshal(data, &spec); err != nil {
-			return err
-		}
-		b.Spec = spec
-	case "traces":
-		var spec TraceBuilderQuerySpec
-		if err := json.Unmarshal(data, &spec); err != nil {
-			return err
-		}
-		b.Spec = spec
-	default:
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid signal %q: must be metrics, logs, or traces", peek.Signal)
-	}
-	return nil
-}
-
-// ══════════════════════════════════════════════
-// SigNoz panel plugin specs
-// ══════════════════════════════════════════════
-
-type PanelPluginKind = string
-
-const (
-	PanelKindTimeSeries PanelPluginKind = "SigNozTimeSeriesPanel"
-	PanelKindBarChart   PanelPluginKind = "SigNozBarChartPanel"
-	PanelKindNumber     PanelPluginKind = "SigNozNumberPanel"
-	PanelKindPieChart   PanelPluginKind = "SigNozPieChartPanel"
-	PanelKindTable      PanelPluginKind = "SigNozTablePanel"
-	PanelKindHistogram  PanelPluginKind = "SigNozHistogramPanel"
-	PanelKindList       PanelPluginKind = "SigNozListPanel"
-)
-
-type DatasourcePluginKind = string
-
-const (
-	DatasourceKindSigNoz DatasourcePluginKind = "SigNozDatasource"
-)
-
-type TimeSeriesPanelSpec struct {
-	Visualization   TimeSeriesVisualization   `json:"visualization"`
-	Formatting      PanelFormatting           `json:"formatting"`
-	ChartAppearance TimeSeriesChartAppearance `json:"chartAppearance"`
-	Axes            Axes                      `json:"axes"`
-	Legend          Legend                    `json:"legend"`
-	Thresholds      []ThresholdWithLabel      `json:"thresholds" validate:"dive"`
-}
-
-type TimeSeriesChartAppearance struct {
-	LineInterpolation LineInterpolation `json:"lineInterpolation"`
-	ShowPoints        bool              `json:"showPoints"`
-	LineStyle         LineStyle         `json:"lineStyle"`
-	FillMode          FillMode          `json:"fillMode"`
-	SpanGaps          SpanGaps          `json:"spanGaps"`
-}
-
-type BarChartPanelSpec struct {
-	Visualization BarChartVisualization `json:"visualization"`
-	Formatting    PanelFormatting       `json:"formatting"`
-	Axes          Axes                  `json:"axes"`
-	Legend        Legend                `json:"legend"`
-	Thresholds    []ThresholdWithLabel  `json:"thresholds" validate:"dive"`
-}
-
-type NumberPanelSpec struct {
-	Visualization BasicVisualization    `json:"visualization"`
-	Formatting    PanelFormatting       `json:"formatting"`
-	Thresholds    []ComparisonThreshold `json:"thresholds" validate:"dive"`
-}
-
-type PieChartPanelSpec struct {
-	Visualization BasicVisualization `json:"visualization"`
-	Formatting    PanelFormatting    `json:"formatting"`
-	Legend        Legend             `json:"legend"`
-}
-
-type TablePanelSpec struct {
-	Visualization BasicVisualization `json:"visualization"`
-	Formatting    TableFormatting    `json:"formatting"`
-	Thresholds    []TableThreshold   `json:"thresholds" validate:"dive"`
-}
-
-type HistogramPanelSpec struct {
-	HistogramBuckets HistogramBuckets `json:"histogramBuckets"`
-	Legend           Legend           `json:"legend"`
-}
-
-type HistogramBuckets struct {
-	BucketCount           *float64 `json:"bucketCount"`
-	BucketWidth           *float64 `json:"bucketWidth"`
-	MergeAllActiveQueries bool     `json:"mergeAllActiveQueries"`
-}
-
-type ListPanelSpec struct {
-	SelectedLogFields    []LogField                         `json:"selectedLogFields" validate:"dive"`
-	SelectedTracesFields []telemetrytypes.TelemetryFieldKey `json:"selectedTracesFields"`
-}
-
-type LogField struct {
-	Name     string `json:"name" validate:"required" required:"true"`
-	Type     string `json:"type"`
-	DataType string `json:"dataType"`
-}
-
-// ══════════════════════════════════════════════
-// Panel common types
-// ══════════════════════════════════════════════
-
-type Axes struct {
-	SoftMin    *float64 `json:"softMin"`
-	SoftMax    *float64 `json:"softMax"`
-	IsLogScale bool     `json:"isLogScale"`
-}
-
-type BasicVisualization struct {
-	TimePreference TimePreference `json:"timePreference"`
-}
-
-type TimeSeriesVisualization struct {
-	BasicVisualization
-	FillSpans bool `json:"fillSpans"`
-}
-
-type BarChartVisualization struct {
-	BasicVisualization
-	FillSpans       bool `json:"fillSpans"`
-	StackedBarChart bool `json:"stackedBarChart"`
-}
-
-type PanelFormatting struct {
-	Unit             string          `json:"unit"`
-	DecimalPrecision PrecisionOption `json:"decimalPrecision"`
-}
-
-type TableFormatting struct {
-	ColumnUnits      map[string]string `json:"columnUnits"`
-	DecimalPrecision PrecisionOption   `json:"decimalPrecision"`
-}
-
-type Legend struct {
-	Position     LegendPosition    `json:"position"`
-	CustomColors map[string]string `json:"customColors"`
-}
-
-type ThresholdWithLabel struct {
-	Value float64 `json:"value"`
-	Unit  string  `json:"unit"`
-	Color string  `json:"color" validate:"required" required:"true"`
-	Label string  `json:"label" validate:"required" required:"true"`
-}
-
-type ComparisonThreshold struct {
-	Value    float64            `json:"value"`
-	Operator ComparisonOperator `json:"operator"`
-	Unit     string             `json:"unit"`
-	Color    string             `json:"color" validate:"required" required:"true"`
-	Format   ThresholdFormat    `json:"format"`
-}
-
-type TableThreshold struct {
-	ComparisonThreshold
-	ColumnName string `json:"columnName" validate:"required" required:"true"`
-}
-
-// ══════════════════════════════════════════════
-// Constrained scalar types (enum validation via custom UnmarshalJSON)
-// ══════════════════════════════════════════════
-
-// LineInterpolation: "linear" | "spline" | "stepAfter" | "stepBefore". Default is "spline".
-type LineInterpolation struct {
-	value string
-}
-
-const (
-	LineInterpolationLinear     = "linear"
-	LineInterpolationSpline     = "spline"
-	LineInterpolationStepAfter  = "stepAfter"
-	LineInterpolationStepBefore = "stepBefore"
-)
-
-func (li LineInterpolation) Value() string {
-	if li.value == "" {
-		return LineInterpolationSpline
-	}
-	return li.value
-}
-
-func (li *LineInterpolation) UnmarshalJSON(data []byte) error {
-	var v string
-	if err := json.Unmarshal(data, &v); err != nil {
-		return err
-	}
-	switch v {
-	case LineInterpolationLinear, LineInterpolationSpline, LineInterpolationStepAfter, LineInterpolationStepBefore:
-		li.value = v
-		return nil
-	default:
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid line interpolation %q: must be linear, spline, stepAfter, or stepBefore", v)
-	}
-}
-
-func (li LineInterpolation) MarshalJSON() ([]byte, error) {
-	return json.Marshal(li.Value())
-}
-
-// LineStyle: "solid" | "dashed". Default is "solid".
-type LineStyle struct {
-	value string
-}
-
-const (
-	LineStyleSolid  = "solid"
-	LineStyleDashed = "dashed"
-)
-
-func (ls LineStyle) Value() string {
-	if ls.value == "" {
-		return LineStyleSolid
-	}
-	return ls.value
-}
-
-func (ls *LineStyle) UnmarshalJSON(data []byte) error {
-	var v string
-	if err := json.Unmarshal(data, &v); err != nil {
-		return err
-	}
-	switch v {
-	case LineStyleSolid, LineStyleDashed:
-		ls.value = v
-		return nil
-	default:
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid line style %q: must be solid or dashed", v)
-	}
-}
-
-func (ls LineStyle) MarshalJSON() ([]byte, error) {
-	return json.Marshal(ls.Value())
-}
-
-// FillMode: "solid" | "gradient" | "none". Default is "solid".
-type FillMode struct {
-	value string
-}
-
-const (
-	FillModeSolid    = "solid"
-	FillModeGradient = "gradient"
-	FillModeNone     = "none"
-)
-
-func (fm FillMode) Value() string {
-	if fm.value == "" {
-		return FillModeSolid
-	}
-	return fm.value
-}
-
-func (fm *FillMode) UnmarshalJSON(data []byte) error {
-	var v string
-	if err := json.Unmarshal(data, &v); err != nil {
-		return err
-	}
-	switch v {
-	case FillModeSolid, FillModeGradient, FillModeNone:
-		fm.value = v
-		return nil
-	default:
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid fill mode %q: must be solid, gradient, or none", v)
-	}
-}
-
-func (fm FillMode) MarshalJSON() ([]byte, error) {
-	return json.Marshal(fm.Value())
-}
-
-// TimePreference: "globalTime" | "last5Min" | "last15Min" | "last30Min" | "last1Hr" | "last6Hr" | "last1Day" | "last3Days" | "last1Week" | "last1Month".
-type TimePreference string
-
-const (
-	TimePreferenceGlobalTime TimePreference = "globalTime"
-	TimePreferenceLast5Min   TimePreference = "last5Min"
-	TimePreferenceLast15Min  TimePreference = "last15Min"
-	TimePreferenceLast30Min  TimePreference = "last30Min"
-	TimePreferenceLast1Hr    TimePreference = "last1Hr"
-	TimePreferenceLast6Hr    TimePreference = "last6Hr"
-	TimePreferenceLast1Day   TimePreference = "last1Day"
-	TimePreferenceLast3Days  TimePreference = "last3Days"
-	TimePreferenceLast1Week  TimePreference = "last1Week"
-	TimePreferenceLast1Month TimePreference = "last1Month"
-)
-
-func (t *TimePreference) UnmarshalJSON(data []byte) error {
-	var v string
-	if err := json.Unmarshal(data, &v); err != nil {
-		return err
-	}
-	switch TimePreference(v) {
-	case TimePreferenceGlobalTime, TimePreferenceLast5Min, TimePreferenceLast15Min, TimePreferenceLast30Min, TimePreferenceLast1Hr, TimePreferenceLast6Hr, TimePreferenceLast1Day, TimePreferenceLast3Days, TimePreferenceLast1Week, TimePreferenceLast1Month:
-		*t = TimePreference(v)
-		return nil
-	default:
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid timePreference %q", v)
-	}
-}
-
-// LegendPosition: "bottom" | "right".
-type LegendPosition string
-
-const (
-	LegendPositionBottom LegendPosition = "bottom"
-	LegendPositionRight  LegendPosition = "right"
-)
-
-func (l *LegendPosition) UnmarshalJSON(data []byte) error {
-	var v string
-	if err := json.Unmarshal(data, &v); err != nil {
-		return err
-	}
-	switch LegendPosition(v) {
-	case LegendPositionBottom, LegendPositionRight:
-		*l = LegendPosition(v)
-		return nil
-	default:
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid legend position %q: must be bottom or right", v)
-	}
-}
-
-// ThresholdFormat: "Text" | "Background".
-type ThresholdFormat string
-
-const (
-	ThresholdFormatText       ThresholdFormat = "Text"
-	ThresholdFormatBackground ThresholdFormat = "Background"
-)
-
-func (f *ThresholdFormat) UnmarshalJSON(data []byte) error {
-	var v string
-	if err := json.Unmarshal(data, &v); err != nil {
-		return err
-	}
-	switch ThresholdFormat(v) {
-	case ThresholdFormatText, ThresholdFormatBackground:
-		*f = ThresholdFormat(v)
-		return nil
-	default:
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid threshold format %q: must be Text or Background", v)
-	}
-}
-
-// ComparisonOperator: ">" | "<" | ">=" | "<=" | "=".
-type ComparisonOperator string
-
-const (
-	ComparisonOperatorGT  ComparisonOperator = ">"
-	ComparisonOperatorLT  ComparisonOperator = "<"
-	ComparisonOperatorGTE ComparisonOperator = ">="
-	ComparisonOperatorLTE ComparisonOperator = "<="
-	ComparisonOperatorEQ  ComparisonOperator = "="
-)
-
-func (o *ComparisonOperator) UnmarshalJSON(data []byte) error {
-	var v string
-	if err := json.Unmarshal(data, &v); err != nil {
-		return err
-	}
-	switch ComparisonOperator(v) {
-	case ComparisonOperatorGT, ComparisonOperatorLT, ComparisonOperatorGTE, ComparisonOperatorLTE, ComparisonOperatorEQ:
-		*o = ComparisonOperator(v)
-		return nil
-	default:
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid comparison operator %q", v)
-	}
-}
-
-// SpanGaps: bool | number. Default is true.
-// When true, lines connect across null values. When false, lines break at nulls.
-// When a number, gaps smaller than that threshold (in seconds) are connected.
-type SpanGaps struct {
-	value any
-}
-
-func (sg SpanGaps) Value() any {
-	if sg.value == nil {
-		return true
-	}
-	return sg.value
-}
-
-func (sg *SpanGaps) UnmarshalJSON(data []byte) error {
-	var b bool
-	if err := json.Unmarshal(data, &b); err == nil {
-		sg.value = b
-		return nil
-	}
-	var n float64
-	if err := json.Unmarshal(data, &n); err == nil {
-		if n < 0 {
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid spanGaps %v: numeric value must be non-negative", n)
-		}
-		sg.value = n
-		return nil
-	}
-	return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid spanGaps: must be a bool or a non-negative number")
-}
-
-func (sg SpanGaps) MarshalJSON() ([]byte, error) {
-	return json.Marshal(sg.Value())
-}
-
-// PrecisionOption: 0 | 1 | 2 | 3 | 4 | "full". Default is 2.
-type PrecisionOption struct {
-	value any
-}
-
-const PrecisionOptionFull = "full"
-
-func (p PrecisionOption) Value() any {
-	if p.value == nil {
-		return 2
-	}
-	return p.value
-}
-
-func (p *PrecisionOption) UnmarshalJSON(data []byte) error {
-	var s string
-	if err := json.Unmarshal(data, &s); err == nil {
-		if s != PrecisionOptionFull {
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid precision option %q: string value must be %q", s, PrecisionOptionFull)
-		}
-		p.value = s
-		return nil
-	}
-	var n int
-	if err := json.Unmarshal(data, &n); err == nil {
-		switch n {
-		case 0, 1, 2, 3, 4:
-			p.value = n
-			return nil
-		default:
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid precision option %d: must be 0, 1, 2, 3, or 4", n)
-		}
-	}
-	return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid precision option: must be an int (0-4) or \"full\"")
-}
-
-func (p PrecisionOption) MarshalJSON() ([]byte, error) {
-	return json.Marshal(p.Value())
-}

pkg/types/dashboardtypes/testdata/perses.json

@@ -1,864 +0,0 @@
-{
-    "display": {
-        "name": "The everything dashboard",
-        "description": "Trying to cover as many concepts here as possible"
-    },
-    "duration": "1h",
-    "datasources": {
-        "SigNozDatasource": {
-            "default": true,
-            "plugin": {
-                "kind": "SigNozDatasource",
-                "spec": {}
-            }
-        }
-    },
-    "variables": [
-        {
-            "kind": "ListVariable",
-            "spec": {
-                "name": "serviceName",
-                "display": {
-                    "name": "serviceName"
-                },
-                "allowAllValue": true,
-                "allowMultiple": false,
-                "sort": "none",
-                "plugin": {
-                    "kind": "SigNozDynamicVariable",
-                    "spec": {
-                        "name": "service.name",
-                        "source": "Metrics"
-                    }
-                }
-            }
-        },
-        {
-            "kind": "ListVariable",
-            "spec": {
-                "name": "statusCodesFromQuery",
-                "display": {
-                    "name": "statusCodesFromQuery"
-                },
-                "allowAllValue": true,
-                "allowMultiple": true,
-                "sort": "alphabetical-asc",
-                "plugin": {
-                    "kind": "SigNozQueryVariable",
-                    "spec": {
-                        "queryValue": "SELECT JSONExtractString(labels, 'http.status_code') AS status_code FROM signoz_metrics.distributed_time_series_v4_1day WHERE status_code != '' GROUP BY status_code"
-                    }
-                }
-            }
-        },
-        {
-            "kind": "ListVariable",
-            "spec": {
-                "name": "limit",
-                "display": {
-                    "name": "limit"
-                },
-                "allowAllValue": false,
-                "allowMultiple": false,
-                "sort": "none",
-                "plugin": {
-                    "kind": "SigNozCustomVariable",
-                    "spec": {
-                        "customValue": "1,10,20,40,80,160,200"
-                    }
-                }
-            }
-        },
-        {
-            "kind": "TextVariable",
-            "spec": {
-                "name": "textboxvar",
-                "display": {
-                    "name": "textboxvar"
-                },
-                "value": "defaultvaluegoeshere",
-                "plugin": {
-                    "kind": "SigNozTextboxVariable",
-                    "spec": {}
-                }
-            }
-        }
-    ],
-    "panels": {
-        "24e2697b": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": "total resp size",
-                    "description": ""
-                },
-                "plugin": {
-                    "kind": "SigNozTimeSeriesPanel",
-                    "spec": {
-                        "visualization": {
-                            "fillSpans": true
-                        },
-                        "formatting": {
-                            "unit": "By",
-                            "decimalPrecision": 3
-                        },
-                        "axes": {
-                            "softMax": 800,
-                            "isLogScale": true
-                        },
-                        "legend": {
-                            "position": "right",
-                            "customColors": {
-                                "{service.name=\"sampleapp-gateway\"}": "#9ea5f7"
-                            }
-                        },
-                        "thresholds": [
-                            {
-                                "value": 1024,
-                                "unit": "By",
-                                "color": "Red",
-                                "label": "upper limit"
-                            },
-                            {
-                                "value": 100,
-                                "unit": "By",
-                                "color": "Orange",
-                                "label": "kinda bad"
-                            }
-                        ]
-                    }
-                },
-                "links": [
-                    {
-                        "name": "View service details",
-                        "url": "http://localhost:8080/{{_service.name}}?dfddf=%7B%7Blimit%7D%7D"
-                    }
-                ],
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "SigNozBuilderQuery",
-                                "spec": {
-                                    "name": "A",
-                                    "signal": "metrics",
-                                    "aggregations": [
-                                        {
-                                            "metricName": "http.server.response.body.size.sum",
-                                            "reduceTo": "sum",
-                                            "spaceAggregation": "sum",
-                                            "timeAggregation": "rate"
-                                        }
-                                    ],
-                                    "filter": {
-                                        "expression": "http.response.status_code IN $statusCodesFromQuery"
-                                    },
-                                    "groupBy": [
-                                        {
-                                            "name": "service.name",
-                                            "fieldDataType": "string",
-                                            "fieldContext": "tag"
-                                        }
-                                    ]
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        },
-        "ff2f72f1": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": "fraction of calls",
-                    "description": ""
-                },
-                "plugin": {
-                    "kind": "SigNozTimeSeriesPanel",
-                    "spec": {
-                        "visualization": {
-                            "fillSpans": true
-                        },
-                        "formatting": {
-                            "decimalPrecision": 1
-                        },
-                        "thresholds": [
-                            {
-                                "value": 1,
-                                "color": "Blue",
-                                "label": "max possible"
-                            }
-                        ]
-                    }
-                },
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "SigNozCompositeQuery",
-                                "spec": {
-                                    "queries": [
-                                        {
-                                            "type": "builder_query",
-                                            "spec": {
-                                                "name": "A",
-                                                "signal": "metrics",
-                                                "disabled": true,
-                                                "aggregations": [
-                                                    {
-                                                        "metricName": "signoz_calls_total",
-                                                        "reduceTo": "sum",
-                                                        "spaceAggregation": "sum",
-                                                        "timeAggregation": "rate"
-                                                    }
-                                                ],
-                                                "filter": {
-                                                    "expression": "service.name IN $serviceName  AND http.status_code IN $statusCodesFromQuery"
-                                                }
-                                            }
-                                        },
-                                        {
-                                            "type": "builder_query",
-                                            "spec": {
-                                                "name": "B",
-                                                "signal": "metrics",
-                                                "disabled": true,
-                                                "aggregations": [
-                                                    {
-                                                        "metricName": "signoz_calls_total",
-                                                        "reduceTo": "sum",
-                                                        "spaceAggregation": "sum",
-                                                        "timeAggregation": "rate"
-                                                    }
-                                                ],
-                                                "filter": {
-                                                    "expression": "service.name in $serviceName"
-                                                }
-                                            }
-                                        },
-                                        {
-                                            "type": "builder_formula",
-                                            "spec": {
-                                                "name": "F1",
-                                                "expression": "A / B"
-                                            }
-                                        }
-                                    ]
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        },
-        "011605e7": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": "total resp size"
-                },
-                "plugin": {
-                    "kind": "SigNozBarChartPanel",
-                    "spec": {
-                        "visualization": {
-                            "stackedBarChart": false
-                        },
-                        "formatting": {
-                            "unit": "By"
-                        }
-                    }
-                },
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "SigNozBuilderQuery",
-                                "spec": {
-                                    "name": "A",
-                                    "signal": "metrics",
-                                    "aggregations": [
-                                        {
-                                            "metricName": "http.server.response.body.size.sum",
-                                            "reduceTo": "sum",
-                                            "spaceAggregation": "sum",
-                                            "timeAggregation": "rate"
-                                        }
-                                    ],
-                                    "filter": {
-                                        "expression": "http.response.status_code IN $statusCodesFromQuery"
-                                    },
-                                    "groupBy": [
-                                        {
-                                            "name": "service.name",
-                                            "fieldDataType": "string",
-                                            "fieldContext": "tag"
-                                        }
-                                    ]
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        },
-        "e23516fc": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": "num traces for service"
-                },
-                "plugin": {
-                    "kind": "SigNozNumberPanel",
-                    "spec": {
-                        "formatting": {
-                            "unit": "none",
-                            "decimalPrecision": 1
-                        },
-                        "thresholds": [
-                            {
-                                "value": 1200000,
-                                "operator": ">",
-                                "unit": "none",
-                                "color": "Red",
-                                "format": "Text"
-                            },
-                            {
-                                "value": 1200000,
-                                "operator": "<=",
-                                "unit": "none",
-                                "color": "Green",
-                                "format": "Text"
-                            }
-                        ]
-                    }
-                },
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "SigNozBuilderQuery",
-                                "spec": {
-                                    "name": "A",
-                                    "signal": "traces",
-                                    "aggregations": [
-                                        {
-                                            "expression": "count() "
-                                        }
-                                    ],
-                                    "filter": {
-                                        "expression": "service.name = $serviceName "
-                                    }
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        },
-        "130c8d6b": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": "num logs for service"
-                },
-                "plugin": {
-                    "kind": "SigNozNumberPanel",
-                    "spec": {
-                        "formatting": {
-                            "unit": "none",
-                            "decimalPrecision": 1
-                        }
-                    }
-                },
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "SigNozBuilderQuery",
-                                "spec": {
-                                    "name": "A",
-                                    "signal": "logs",
-                                    "aggregations": [
-                                        {
-                                            "expression": "count() "
-                                        }
-                                    ],
-                                    "filter": {
-                                        "expression": "service.name = $serviceName "
-                                    }
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        },
-        "246f7c6d": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": "num traces for service per resp code"
-                },
-                "plugin": {
-                    "kind": "SigNozPieChartPanel",
-                    "spec": {
-                        "formatting": {
-                            "decimalPrecision": 1
-                        },
-                        "legend": {
-                            "customColors": {
-                                "\"201\"": "#2bc051",
-                                "\"400\"": "#cc462e",
-                                "\"500\"": "#ff0000"
-                            }
-                        }
-                    }
-                },
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "SigNozBuilderQuery",
-                                "spec": {
-                                    "name": "A",
-                                    "signal": "traces",
-                                    "aggregations": [
-                                        {
-                                            "expression": "count() "
-                                        }
-                                    ],
-                                    "filter": {
-                                        "expression": "service.name = $serviceName isEntryPoint = 'true'"
-                                    },
-                                    "groupBy": [
-                                        {
-                                            "name": "http.response.status_code",
-                                            "fieldDataType": "float64",
-                                            "fieldContext": "tag"
-                                        }
-                                    ],
-                                    "legend": "\"{{http.response.status_code}}\""
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        },
-        "21f7d4d0": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": "average latency per service"
-                },
-                "plugin": {
-                    "kind": "SigNozTablePanel",
-                    "spec": {
-                        "formatting": {
-                            "columnUnits": {
-                                "A": "s"
-                            }
-                        },
-                        "thresholds": [
-                            {
-                                "value": 1,
-                                "operator": ">",
-                                "unit": "min",
-                                "color": "Red",
-                                "format": "Text",
-                                "columnName": "A"
-                            }
-                        ]
-                    }
-                },
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "SigNozClickHouseSQL",
-                                "spec": {
-                                    "name": "A",
-                                    "query": "WITH\n    __spatial_aggregation_cte AS\n    (\n        SELECT\n            toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(60)) AS ts,\n            `service.name`,\n            le,\n            sum(value) / 60 AS value\n        FROM signoz_metrics.distributed_samples_v4 AS points\n        INNER JOIN\n        (\n            SELECT\n                fingerprint,\n                JSONExtractString(labels, 'service.name') AS `service.name`,\n                JSONExtractString(labels, 'le') AS le\n            FROM signoz_metrics.time_series_v4\n            WHERE (metric_name IN ('signoz_latency.bucket')) AND (LOWER(temporality) LIKE LOWER('delta')) AND (__normalized = 0)\n            GROUP BY\n                fingerprint,\n                `service.name`,\n                le\n        ) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint\n        WHERE metric_name IN ('signoz_latency.bucket')\n        GROUP BY\n            ts,\n            `service.name`,\n            le\n    ),\n    __histogramCTE AS\n    (\n        SELECT\n            ts,\n            `service.name`,\n            histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), 0.9) AS value\n        FROM __spatial_aggregation_cte\n        GROUP BY\n            `service.name`,\n            ts\n        ORDER BY\n            `service.name` ASC,\n            ts ASC\n    )\nSELECT\n    `service.name` AS service,\n    avg(value) AS A\nFROM __histogramCTE\nGROUP BY `service.name`"
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        },
-        "ad5fd556": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": "logs from service"
-                },
-                "plugin": {
-                    "kind": "SigNozListPanel",
-                    "spec": {
-                        "selectedLogFields": [
-                            {
-                                "name": "timestamp",
-                                "type": "log",
-                                "dataType": ""
-                            },
-                            {
-                                "name": "body",
-                                "type": "log",
-                                "dataType": ""
-                            },
-                            {
-                                "name": "error",
-                                "type": "",
-                                "dataType": "string"
-                            }
-                        ]
-                    }
-                },
-                "queries": [
-                    {
-                        "kind": "LogQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "SigNozBuilderQuery",
-                                "spec": {
-                                    "name": "A",
-                                    "signal": "logs",
-                                    "aggregations": [
-                                        {
-                                            "expression": "count() "
-                                        }
-                                    ],
-                                    "filter": {
-                                        "expression": "service.name = $serviceName"
-                                    },
-                                    "groupBy": [],
-                                    "order": [
-                                        {
-                                            "key": {
-                                                "name": "timestamp"
-                                            },
-                                            "direction": "desc"
-                                        },
-                                        {
-                                            "key": {
-                                                "name": "id"
-                                            },
-                                            "direction": "desc"
-                                        }
-                                    ]
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        },
-        "f07b59ee": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": "response size buckets"
-                },
-                "plugin": {
-                    "kind": "SigNozHistogramPanel",
-                    "spec": {
-                        "histogramBuckets": {
-                            "bucketCount": 60,
-                            "mergeAllActiveQueries": true
-                        }
-                    }
-                },
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "SigNozBuilderQuery",
-                                "spec": {
-                                    "name": "A",
-                                    "signal": "metrics",
-                                    "aggregations": [
-                                        {
-                                            "metricName": "http.server.response.body.size.bucket",
-                                            "reduceTo": "avg",
-                                            "spaceAggregation": "p90",
-                                            "timeAggregation": "rate"
-                                        }
-                                    ]
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        },
-        "e1a41831": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": "trace operator",
-                    "description": ""
-                },
-                "plugin": {
-                    "kind": "SigNozTimeSeriesPanel",
-                    "spec": {
-                        "legend": {
-                            "position": "right"
-                        }
-                    }
-                },
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "SigNozCompositeQuery",
-                                "spec": {
-                                    "queries": [
-                                        {
-                                            "type": "builder_query",
-                                            "spec": {
-                                                "name": "A",
-                                                "signal": "traces",
-                                                "aggregations": [
-                                                    {
-                                                        "expression": "count() "
-                                                    }
-                                                ],
-                                                "filter": {
-                                                    "expression": "service.name = 'sampleapp-gateway' "
-                                                },
-                                                "legend": "Gateway"
-                                            }
-                                        },
-                                        {
-                                            "type": "builder_query",
-                                            "spec": {
-                                                "name": "B",
-                                                "signal": "traces",
-                                                "aggregations": [
-                                                    {
-                                                        "expression": "count() "
-                                                    }
-                                                ],
-                                                "filter": {
-                                                    "expression": "http.response.status_code = 200"
-                                                },
-                                                "legend": "$serviceName"
-                                            }
-                                        },
-                                        {
-                                            "type": "builder_trace_operator",
-                                            "spec": {
-                                                "name": "T1",
-                                                "aggregations": [
-                                                    {
-                                                        "expression": "count()",
-                                                        "alias": "request_count"
-                                                    }
-                                                ]
-                                            }
-                                        }
-                                    ]
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        },
-        "f0d70491": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": "no results in this promql",
-                    "description": ""
-                },
-                "plugin": {
-                    "kind": "SigNozTimeSeriesPanel",
-                    "spec": {}
-                },
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "SigNozCompositeQuery",
-                                "spec": {
-                                    "queries": [
-                                        {
-                                            "type": "promql",
-                                            "spec": {
-                                                "name": "A",
-                                                "query": "sum(rate(flask_exporter_info[5m]))"
-                                            }
-                                        },
-                                        {
-                                            "type": "promql",
-                                            "spec": {
-                                                "name": "B",
-                                                "query": "sum(increase(flask_exporter_info[5m]))"
-                                            }
-                                        }
-                                    ]
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        },
-        "0e6eb4ca": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": "no results in this promql",
-                    "description": ""
-                },
-                "plugin": {
-                    "kind": "SigNozTimeSeriesPanel",
-                    "spec": {}
-                },
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "SigNozPromQLQuery",
-                                "spec": {
-                                    "name": "A",
-                                    "query": "sum(rate(flask_exporter_info[5m]))"
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        }
-    },
-    "layouts": [
-        {
-            "kind": "Grid",
-            "spec": {
-                "items": [
-                    {
-                        "x": 0,
-                        "y": 0,
-                        "width": 6,
-                        "height": 6,
-                        "content": {
-                            "$ref": "#/spec/panels/24e2697b"
-                        }
-                    },
-                    {
-                        "x": 6,
-                        "y": 0,
-                        "width": 6,
-                        "height": 6,
-                        "content": {
-                            "$ref": "#/spec/panels/ff2f72f1"
-                        }
-                    },
-                    {
-                        "x": 0,
-                        "y": 6,
-                        "width": 6,
-                        "height": 6,
-                        "content": {
-                            "$ref": "#/spec/panels/011605e7"
-                        }
-                    },
-                    {
-                        "x": 6,
-                        "y": 6,
-                        "width": 6,
-                        "height": 3,
-                        "content": {
-                            "$ref": "#/spec/panels/e23516fc"
-                        }
-                    },
-                    {
-                        "x": 6,
-                        "y": 9,
-                        "width": 6,
-                        "height": 3,
-                        "content": {
-                            "$ref": "#/spec/panels/130c8d6b"
-                        }
-                    },
-                    {
-                        "x": 0,
-                        "y": 12,
-                        "width": 6,
-                        "height": 6,
-                        "content": {
-                            "$ref": "#/spec/panels/246f7c6d"
-                        }
-                    },
-                    {
-                        "x": 6,
-                        "y": 12,
-                        "width": 6,
-                        "height": 6,
-                        "content": {
-                            "$ref": "#/spec/panels/21f7d4d0"
-                        }
-                    },
-                    {
-                        "x": 0,
-                        "y": 18,
-                        "width": 6,
-                        "height": 6,
-                        "content": {
-                            "$ref": "#/spec/panels/ad5fd556"
-                        }
-                    },
-                    {
-                        "x": 6,
-                        "y": 18,
-                        "width": 6,
-                        "height": 6,
-                        "content": {
-                            "$ref": "#/spec/panels/f07b59ee"
-                        }
-                    },
-                    {
-                        "x": 0,
-                        "y": 24,
-                        "width": 12,
-                        "height": 6,
-                        "content": {
-                            "$ref": "#/spec/panels/e1a41831"
-                        }
-                    },
-                    {
-                        "x": 0,
-                        "y": 30,
-                        "width": 6,
-                        "height": 6,
-                        "content": {
-                            "$ref": "#/spec/panels/f0d70491"
-                        }
-                    },
-                    {
-                        "x": 6,
-                        "y": 30,
-                        "width": 6,
-                        "height": 6,
-                        "content": {
-                            "$ref": "#/spec/panels/0e6eb4ca"
-                        }
-                    }
-                ]
-            }
-        }
-    ]
-}

pkg/types/dashboardtypes/testdata/perses_with_sections.json

@@ -1,160 +0,0 @@
-{
-    "display": {
-        "name": "NV dashboard with sections",
-        "description": ""
-    },
-    "datasources": {
-        "SigNozDatasource": {
-            "default": true,
-            "plugin": {
-                "kind": "SigNozDatasource",
-                "spec": {}
-            }
-        }
-    },
-    "panels": {
-        "b424e23b": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": ""
-                },
-                "plugin": {
-                    "kind": "SigNozNumberPanel",
-                    "spec": {
-                        "formatting": {
-                            "unit": "s",
-                            "decimalPrecision": 2
-                        }
-                    }
-                },
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "SigNozBuilderQuery",
-                                "spec": {
-                                    "name": "A",
-                                    "signal": "metrics",
-                                    "aggregations": [
-                                        {
-                                            "metricName": "container.cpu.time",
-                                            "reduceTo": "sum",
-                                            "spaceAggregation": "sum",
-                                            "timeAggregation": "rate"
-                                        }
-                                    ],
-                                    "filter": {
-                                        "expression": ""
-                                    }
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        },
-        "251df4d5": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": ""
-                },
-                "plugin": {
-                    "kind": "SigNozTimeSeriesPanel",
-                    "spec": {
-                        "visualization": {
-                            "fillSpans": false
-                        },
-                        "formatting": {
-                            "unit": "recommendations",
-                            "decimalPrecision": 2
-                        },
-                        "chartAppearance": {
-                            "lineInterpolation": "spline",
-                            "showPoints": false,
-                            "lineStyle": "solid",
-                            "fillMode": "none",
-                            "spanGaps": true
-                        },
-                        "legend": {
-                            "position": "bottom"
-                        }
-                    }
-                },
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "SigNozBuilderQuery",
-                                "spec": {
-                                    "name": "A",
-                                    "signal": "metrics",
-                                    "aggregations": [
-                                        {
-                                            "metricName": "app_recommendations_counter",
-                                            "reduceTo": "sum",
-                                            "spaceAggregation": "sum",
-                                            "timeAggregation": "rate"
-                                        }
-                                    ],
-                                    "filter": {
-                                        "expression": ""
-                                    }
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        }
-    },
-    "layouts": [
-        {
-            "kind": "Grid",
-            "spec": {
-                "display": {
-                    "title": "Bravo",
-                    "collapse": {
-                        "open": true
-                    }
-                },
-                "items": [
-                    {
-                        "x": 0,
-                        "y": 0,
-                        "width": 6,
-                        "height": 6,
-                        "content": {
-                            "$ref": "#/spec/panels/b424e23b"
-                        }
-                    }
-                ]
-            }
-        },
-        {
-            "kind": "Grid",
-            "spec": {
-                "display": {
-                    "title": "Alpha",
-                    "collapse": {
-                        "open": true
-                    }
-                },
-                "items": [
-                    {
-                        "x": 0,
-                        "y": 0,
-                        "width": 6,
-                        "height": 6,
-                        "content": {
-                            "$ref": "#/spec/panels/251df4d5"
-                        }
-                    }
-                ]
-            }
-        }
-    ]
-}