put back json

* chore: add tests for trace waterfall

* chore: remove unhelpful tests

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "none"
+}

.vscode/settings.json

@@ -1,23 +1,25 @@
 {
-	"eslint.workingDirectories": [
-		"./frontend"
-	],
-	"editor.formatOnSave": true,
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": "explicit"
-	},
-	"prettier.requireConfig": true,
-	"[go]": {
-		"editor.formatOnSave": true,
-		"editor.defaultFormatter": "golang.go"
-	},
-	"[sql]": {
-		"editor.defaultFormatter": "adpyke.vscode-sql-formatter"
-	},
-	"[html]": {
-		"editor.defaultFormatter": "vscode.html-language-features"
-	},
-	"python-envs.defaultEnvManager": "ms-python.python:system",
-	"python-envs.pythonProjects": []
+  "eslint.workingDirectories": ["./frontend"],
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "prettier.requireConfig": true,
+  "[go]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "golang.go"
+  },
+  "[sql]": {
+    "editor.defaultFormatter": "adpyke.vscode-sql-formatter"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
+  },
+  "python-envs.defaultEnvManager": "ms-python.python:system",
+  "python-envs.pythonProjects": [],
+  "editor.tokenColorCustomizations": {
+    "comments": "",
+    "textMateRules": []
+  }
 }

conf/example.yaml

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

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.116.1
+    image: signoz/signoz:v0.117.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.116.1
+    image: signoz/signoz:v0.117.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.116.1}
+    image: signoz/signoz:${VERSION:-v0.117.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.116.1}
+    image: signoz/signoz:${VERSION:-v0.117.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

ee/query-service/app/server.go

@@ -136,6 +136,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	logParsingPipelineController, err := logparsingpipeline.NewLogParsingPipelinesController(
 		signoz.SQLStore,
 		integrationsController.GetPipelinesForInstalledIntegrations,
+		reader,
 	)
 	if err != nil {
 		return nil, err

ee/query-service/rules/manager_test.go

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

frontend/package.json

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

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -109,6 +109,7 @@ export function useNavigateToExplorer(): (
 					widgetConfig: {
 						query: preparedQuery,
 						panelTypes: PANEL_TYPES.TIME_SERIES,
+						// does this change at any time? How does it change if so?
 						timePreferance: 'GLOBAL_TIME',
 					},
 					selectedDashboard,

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

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

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

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

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

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

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

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

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

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

frontend/src/constants/localStorage.ts

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

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -577,6 +577,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 				open={isPanelNameModalOpen}
 				title="New Section"
 				rootClassName="section-naming"
+				// This is not required on the specification of a custom footer
 				onOk={(): void => handleAddRow()}
 				onCancel={(): void => {
 					setIsPanelNameModalOpen(false);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,220 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { FontSize } from 'container/OptionsMenu/types';
-
-import 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(3);
-		expect(flexRenderMock).toHaveBeenCalled();
-	});
-
-	it('applies state-indicator styling class on the indicator cell', () => {
-		const row = buildMockRow([{ columnId: 'state-indicator' }]);
-
-		const { container } = render(
-			<table>
-				<tbody>
-					<tr>
-						<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', () => {
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		expect(screen.getByTestId('copy-btn')).toBeInTheDocument();
-	});
-
-	it('click on a data cell calls onSetActiveLog with current log', () => {
-		const onSetActiveLog = jest.fn();
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<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('click on filler cell calls onSetActiveLog', () => {
-		const onSetActiveLog = jest.fn();
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		const { container } = render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onSetActiveLog={onSetActiveLog}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		const filler = container.querySelector('td.logs-table-filler-cell');
-		expect(filler).toBeTruthy();
-		fireEvent.click(filler!);
-
-		expect(onSetActiveLog).toHaveBeenCalledWith(
-			expect.objectContaining({ id: 'log-1' }),
-		);
-	});
-
-	it('when row is active log, click on cell clears active log', () => {
-		const onSetActiveLog = jest.fn();
-		const onClearActiveLog = jest.fn();
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<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,460 +0,0 @@
-import {
-	forwardRef,
-	memo,
-	MouseEvent as ReactMouseEvent,
-	ReactElement,
-	useCallback,
-	useEffect,
-	useImperativeHandle,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { useLocation } from 'react-router-dom';
-import { useCopyToClipboard } from 'react-use';
-import {
-	TableComponents,
-	TableVirtuoso,
-	TableVirtuosoHandle,
-} from 'react-virtuoso';
-import { DndContext, pointerWithin } from '@dnd-kit/core';
-import {
-	horizontalListSortingStrategy,
-	SortableContext,
-} from '@dnd-kit/sortable';
-import { toast } from '@signozhq/sonner';
-import {
-	ColumnDef,
-	getCoreRowModel,
-	useReactTable,
-} from '@tanstack/react-table';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
-import { ColumnTypeRender } from 'components/Logs/TableView/types';
-import { useTableView } from 'components/Logs/TableView/useTableView';
-import Spinner from 'components/Spinner';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import useDragColumns from 'hooks/useDragColumns';
-
-import { getInfinityDefaultStyles } from '../InfinityTableView/config';
-import {
-	TableHeaderCellStyled,
-	TanStackTableStyled,
-} from '../InfinityTableView/styles';
-import { InfinityTableProps } from '../InfinityTableView/types';
-import TanStackCustomTableRow from './TanStackCustomTableRow';
-import TanStackHeaderRow from './TanStackHeaderRow';
-import 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);
-		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)
-		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)
-		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) => {
-					const isStateIndicator = column.key === 'state-indicator';
-					const isExpand = column.key === 'expand';
-					const isFixedColumn = isStateIndicator || isExpand;
-					const fixedWidth = isFixedColumn ? 32 : undefined;
-					const minWidthPx = getColumnMinWidthPx(column, orderedColumns);
-					const headerTitle = String(column.title || '');
-
-					return {
-						id: getColumnId(column),
-						header: headerTitle.replace(/^\w/, (character) =>
-							character.toUpperCase(),
-						),
-						accessorFn: (row): unknown => row.log[column.key as keyof TableRecord],
-						enableResizing: !isFixedColumn,
-						minSize: fixedWidth ?? minWidthPx,
-						size: fixedWidth,
-						maxSize: fixedWidth,
-						cell: ({ row, getValue }): ReactElement | string | number | null => {
-							if (!column.render) {
-								return null;
-							}
-
-							return resolveColumnTypeRender(
-								column.render(
-									getValue(),
-									row.original.log,
-									row.original.rowIndex,
-								) as ColumnTypeRender<Record<string, unknown>>,
-							);
-						},
-					};
-				}),
-			[orderedColumns],
-		);
-		const 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],
-		);
-
-		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 customTableRow = useCallback<
-			NonNullable<TableComponents<TanStackTableRowData>['TableRow']>
-		>(
-			({ children, item, ...props }) => (
-				<TanStackCustomTableRow
-					{...props}
-					item={item}
-					activeLog={activeLog}
-					activeContextLog={activeContextLog}
-					logsById={logsById}
-				>
-					{children}
-				</TanStackCustomTableRow>
-			),
-			[activeContextLog, activeLog, logsById],
-		);
-
-		const itemContent = useCallback(
-			(index: number): JSX.Element | null => {
-				const row = table.getRowModel().rows[index];
-				if (!row) {
-					return null;
-				}
-
-				return (
-					<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,
-				table,
-				tableViewProps.fontSize,
-			],
-		);
-
-		const tableHeader = useCallback(() => {
-			const flatHeaders = table
-				.getFlatHeaders()
-				.filter((header) => !header.isPlaceholder);
-			const orderedColumnsById = new Map(
-				orderedColumns.map((column) => [getColumnId(column), column] as const),
-			);
-
-			return (
-				<DndContext
-					sensors={sensors}
-					collisionDetection={pointerWithin}
-					onDragEnd={handleDragEnd}
-					autoScroll={COLUMN_DND_AUTO_SCROLL}
-				>
-					<SortableContext
-						items={orderedColumnIds}
-						strategy={horizontalListSortingStrategy}
-					>
-						<tr>
-							{flatHeaders.map((header) => {
-								const column = orderedColumnsById.get(header.id);
-								if (!column) {
-									return null;
-								}
-
-								return (
-									<TanStackHeaderRow
-										key={header.id}
-										column={column}
-										header={header}
-										isDarkMode={isDarkMode}
-										fontSize={tableViewProps.fontSize}
-										hasSingleColumn={hasSingleColumn}
-										onRemoveColumn={onRemoveColumn}
-										canRemoveColumn={!isAtMinimumRemovableColumns}
-									/>
-								);
-							})}
-							<TableHeaderCellStyled
-								aria-hidden
-								$isDragColumn={false}
-								$isDarkMode={isDarkMode}
-								fontSize={tableViewProps.fontSize}
-								className="logs-table-filler-header"
-							/>
-							{isLogsExplorerPage && (
-								<TableHeaderCellStyled
-									aria-hidden
-									$isDragColumn={false}
-									$isDarkMode={isDarkMode}
-									fontSize={tableViewProps.fontSize}
-									className="logs-table-actions-header"
-								/>
-							)}
-						</tr>
-					</SortableContext>
-				</DndContext>
-			);
-		}, [
-			handleDragEnd,
-			hasSingleColumn,
-			isDarkMode,
-			orderedColumnIds,
-			orderedColumns,
-			onRemoveColumn,
-			isAtMinimumRemovableColumns,
-			sensors,
-			table,
-			tableViewProps.fontSize,
-			isLogsExplorerPage,
-		]);
-
-		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={getInfinityDefaultStyles(tableViewProps.fontSize)}
-					data={tableData}
-					totalCount={tableRows.length}
-					initialTopMostItemIndex={
-						tableViewProps.activeLogIndex !== -1 ? tableViewProps.activeLogIndex : 0
-					}
-					fixedHeaderContent={tableHeader}
-					itemContent={itemContent}
-					components={{
-						Table: ({ style, children }): JSX.Element => (
-							<TanStackTableStyled style={style}>
-								<colgroup>
-									{orderedColumns.map((column) => {
-										const columnId = getColumnId(column);
-										const isFixedColumn =
-											column.key === 'expand' || column.key === 'state-indicator';
-										const minWidthPx = getColumnMinWidthPx(column, orderedColumns);
-										const persistedWidth = columnSizing[columnId];
-										const computedWidth = table.getColumn(columnId)?.getSize();
-										const effectiveWidth = persistedWidth ?? computedWidth;
-										if (isFixedColumn) {
-											return <col key={columnId} className="tanstack-fixed-col" />;
-										}
-										const widthPx =
-											effectiveWidth != null
-												? Math.max(effectiveWidth, minWidthPx)
-												: minWidthPx;
-										return (
-											<col
-												key={columnId}
-												style={{ width: `${widthPx}px`, minWidth: `${minWidthPx}px` }}
-											/>
-										);
-									})}
-									<col key="logs-table-filler-col" className="tanstack-filler-col" />
-									{isLogsExplorerPage && (
-										<col key="logs-table-actions-col" className="tanstack-actions-col" />
-									)}
-								</colgroup>
-								{children}
-							</TanStackTableStyled>
-						),
-						TableRow: customTableRow,
-					}}
-					{...(infitiyTableProps?.onEndReached
-						? { endReached: handleEndReached }
-						: {})}
-				/>
-				{loadMoreState.active && (
-					<div className="tanstack-load-more-container">
-						<Spinner height="20px" tip="Getting Logs" />
-					</div>
-				)}
-			</div>
-		);
-	},
-);
-
-export default memo(TanStackTableView);

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

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

frontend/src/container/LogsExplorerList/TanStackTableView/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,93 +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 = baseColumns;
-
-	const handleDragEnd = useCallback(
-		(event: DragEndEvent): void => {
-			const { active, over } = event;
-			if (!over || active.id === over.id) {
-				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

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

frontend/src/container/LogsExplorerList/logsTableVirtuosoScrollbar.scss

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

frontend/src/container/LogsExplorerList/styles.ts

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

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

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

frontend/src/container/LogsExplorerViews/index.tsx

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

frontend/src/container/NewWidget/types.ts

@@ -16,8 +16,10 @@ export interface NewWidgetProps {
 }
 
 export interface WidgetGraphProps {
+	// this should be inside the querier plugin definition
 	selectedLogFields: Widgets['selectedLogFields'];
 	setSelectedLogFields?: Dispatch<SetStateAction<Widgets['selectedLogFields']>>;
+	// this should be inside the querier plugin definition
 	selectedTracesFields: Widgets['selectedTracesFields'];
 	setSelectedTracesFields?: Dispatch<
 		SetStateAction<Widgets['selectedTracesFields']>

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

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

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

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

frontend/src/types/api/dashboard/getAll.ts

@@ -118,7 +118,6 @@ export interface IBaseWidget {
 	opacity: string;
 	nullZeroValues: string;
 	timePreferance: timePreferenceType;
-	stepSize?: number;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption; // number of decimals or 'full precision'
 	stackedBarChart?: boolean;

frontend/yarn.lock

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

perses/common/common.cue

@@ -0,0 +1,131 @@
+package common
+
+// ──────────────────────────────────────────────
+// Shared types
+// ──────────────────────────────────────────────
+
+// ! What is used for - Got answer
+// Which one of these will be there if this exists
+#TelemetryFieldKey: {
+    name:           string
+    key?:           string
+    description?:   string
+    unit?:          string
+    signal?:        string
+    fieldContext?:   string
+    fieldDataType?: string
+    materialized?:  bool
+    isIndexed?:     bool
+}
+
+// ──────────────────────────────────────────────
+// Panel types
+// ──────────────────────────────────────────────
+
+#ContextLinkProps: {
+    url:   string
+    label: string
+}
+
+// is this used on the frontend or just for query building?
+#TimePreference: *"globalTime" | "last5Min" | "last15Min" | "last30Min" | "last1Hr" | "last6Hr" | "last1Day" | "last3Days" | "last1Week" | "last1Month"
+
+// is the default option the one in the front
+#PrecisionOption: *2 | 0 | 1 | 3 | 4 | "full"
+
+// how is this undefined and null? Would like to avoid undefined if possible
+// also bools can required always?
+#Axes: {
+    softMin?:    number | *null
+    softMax?:    number | *null
+    isLogScale?: bool | *false
+}
+
+#LegendPosition: *"bottom" | "right"
+
+#ThresholdWithLabel: {
+    value:  number
+    unit?:  string
+    // is this required? I think it is auto on the frontend and it can be overridden when set
+    color:  string
+    // What is this?
+    format: "Text" | "Background"
+    // What would be label if undefined here? There would be some default noe
+    label?: string
+}
+
+// where is this used
+#ComparisonThreshold: {
+    value:    number
+    operator: ">" | "<" | ">=" | "<=" | "="
+    unit?:    string
+    color:    string
+    format:   "Text" | "Background"
+}
+
+// ──────────────────────────────────────────────
+// Query types
+// ──────────────────────────────────────────────
+
+#QueryName: =~"^[A-Za-z][A-Za-z0-9_]*$"
+
+// where used?
+#Limit: int & >=0 & <=10000
+
+#Offset: int & >=0
+
+#ReduceTo: "sum" | "count" | "avg" | "min" | "max" | "last" | "median"
+
+// what is close?
+// where is this used?
+#MetricAggregation: close({
+    metricName:       string & !=""
+    timeAggregation:  "latest" | "sum" | "avg" | "min" | "max" | "count" | "rate" | "increase"
+    spaceAggregation: "sum" | "avg" | "min" | "max" | "count" | "p50" | "p75" | "p90" | "p95" | "p99"
+    reduceTo?:        #ReduceTo
+    // should unspecified be the default?
+    temporality?:     "delta" | "cumulative" | "unspecified"
+})
+
+#ExpressionAggregation: close({
+    expression: string & !=""
+    alias?:     string
+})
+
+#Aggregation: #MetricAggregation | #ExpressionAggregation
+
+// Can this be extended with common struct? this also has - HavingExpression
+#FilterExpression: close({
+    expression: string
+})
+
+#GroupByItem: close({
+    name:           string & !=""
+    fieldDataType?: string
+    fieldContext?:   string
+})
+
+#OrderByItem: close({
+    columnName: string & !=""
+    order:      "asc" | "desc"
+})
+
+#HavingExpression: close({
+    expression: string
+})
+
+// Is the definition used for above?
+#Function: close({
+    name: "cutOffMin" | "cutOffMax" | "clampMin" | "clampMax" |
+        "absolute" | "runningDiff" | "log2" | "log10" |
+        "cumulativeSum" | "ewma3" | "ewma5" | "ewma7" |
+        "median3" | "median5" | "median7" | "timeShift" |
+        "anomaly" | "fillZero"
+    args?: [...close({value: number | string | bool})]
+})
+
+// ──────────────────────────────────────────────
+// Variable types
+// ──────────────────────────────────────────────
+
+#VariableSortOrder: *"disabled" | "asc" | "desc"

perses/cue.mod/module.cue

@@ -0,0 +1,4 @@
+module: "github.com/signoz"
+language: {
+	version: "v0.12.0"
+}

perses/examples/perses.json

@@ -0,0 +1,926 @@
+{
+  "kind": "Dashboard",
+  "metadata": {
+    "name": "the-everything-dashboard",
+    "project": "signoz" // should this be an id? What is this project exactly?
+    // where would createdAt, updatedAt, createdBy, updatedBy be used?
+    // where would dashboardID or organizationID go
+    // where is locked going to come in
+    // can we have public path here as well? default time range and
+
+    // where would version go?
+    // where would image value go?
+    // where would tags go?
+
+    // we have uploadedGrafana. What is uploadedGrafana used for?
+
+    // ! all above looks like we need a plugin for the root dashboard as well
+
+    // how is panelMap and widgets translated to layout? Is layout the same as before?
+    // where is timePreferance set up
+    // collapsed?
+    // ? https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#layout-item
+  },
+  "spec": {
+    "display": {
+      "name": "The everything dashboard", // this is duplicate?
+      "description": "Trying to cover as many concepts here as possible"
+    },
+    "duration": "1h", // is this required?
+    "datasources": {
+      "SigNozDatasource": {
+        "default": true,
+        "plugin": {
+          "kind": "SigNozDatasource",
+          "spec": {}
+        }
+      }
+    },
+    "variables": [
+      {
+        // what is a ListVariable
+        "kind": "ListVariable",
+        "spec": {
+          "name": "serviceName",
+          "display": {
+            "name": "serviceName"
+          },
+          "allowAllValue": true,
+          "allowMultiple": false,
+          "plugin": {
+            "kind": "SigNozDynamicVariable",
+            "spec": {
+              "name": "service.name",
+              "source": "Metrics",
+              "sort": "disabled"
+            }
+          }
+        }
+      },
+      {
+        "kind": "ListVariable",
+        "spec": {
+          "name": "statusCodesFromQuery",
+          "display": {
+            "name": "statusCodesFromQuery"
+          },
+          "allowAllValue": true,
+          "allowMultiple": true,
+          "plugin": {
+            "kind": "SigNozQueryVariable",
+            "spec": {
+              // missing defaultValue for these list variables
+              "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",
+              "sort": "asc"
+            }
+          }
+        }
+      },
+      {
+        "kind": "ListVariable",
+        "spec": {
+          "name": "limit",
+          "display": {
+            "name": "limit"
+          },
+          "allowAllValue": false,
+          "allowMultiple": false,
+          "plugin": {
+            "kind": "SigNozCustomVariable",
+            "spec": {
+              // defaultValue missing
+              "customValue": "1,10,20,40,80,160,200",
+              "sort": "disabled"
+            }
+          }
+        }
+      },
+      {
+        // do we need uuid for id here? Do we need id at all?
+        // migration will require cleanup from localstorage as it is all saved with ids right now
+        "kind": "TextVariable",
+        "spec": {
+          "name": "textboxvar",
+          "display": {
+            "name": "textboxvar"
+          },
+          "value": "defaultvaluegoeshere",
+          "plugin": {
+            // just to confirm, this would be the type right?
+            "kind": "SigNozTextboxVariable",
+            "spec": {
+              // How should selectedValue be handled on share?
+              // we should have an option for selectedValue here
+              // should go in for all variables
+              // should be auto filled with the default or with the queried value. All for multi, first for single
+              // if selectedValue goes in, then we will need allSelected as well
+            }
+          }
+        }
+      }
+    ],
+    "panels": {
+      // need metadata inside this for section creation
+      // maybe another key just for sections. much easier
+      "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"
+                }
+              },
+              "contextLinks": [
+                {
+                  "label": "View service details",
+                  "url": "http://localhost:8080/{{_service.name}}?dfddf=%7B%7Blimit%7D%7D"
+                }
+              ],
+              "thresholds": [
+                {
+                  "value": 1024,
+                  "unit": "By",
+                  "color": "Red",
+                  "format": "Text",
+                  "label": "upper limit"
+                },
+                {
+                  "value": 100,
+                  "unit": "By",
+                  "color": "Orange",
+                  "format": "Text",
+                  "label": "kinda bad"
+                }
+              ]
+            }
+          },
+          "queries": [
+            {
+              "kind": "TimeSeriesQuery",
+              "spec": {
+                "plugin": {
+                  "kind": "SigNozBuilderQuery",
+                  "spec": {
+                    "name": "A",
+                    "signal": "metrics",
+                    "expression": "A",
+                    "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",
+                  "format": "Background",
+                  "label": "max possible"
+                }
+              ]
+            }
+          },
+          "queries": [
+            {
+              "kind": "TimeSeriesQuery",
+              "spec": {
+                "plugin": {
+                  "kind": "SigNozCompositeQuery",
+                  "spec": {
+                    "queries": [
+                      {
+                        "type": "builder_query",
+                        "spec": {
+                          "name": "A",
+                          "signal": "metrics",
+                          "expression": "A",
+                          "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",
+                          "expression": "B",
+                          "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",
+                    "expression": "A",
+                    "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",
+                    "expression": "A",
+                    "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",
+                    "expression": "A",
+                    "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",
+                    "expression": "A",
+                    "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",
+                  "tableOptions": "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",
+                    "expression": "A",
+                    "aggregations": [
+                      {
+                        "expression": "count() "
+                      }
+                    ],
+                    "filter": {
+                      "expression": "service.name = $serviceName"
+                    },
+                    "groupBy": [],
+                    "order": [
+                      {
+                        "columnName": "timestamp",
+                        "order": "desc"
+                      },
+                      {
+                        "columnName": "id",
+                        "order": "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",
+                    "expression": "A",
+                    "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",
+                          "expression": "A",
+                          "aggregations": [
+                            {
+                              "expression": "count() "
+                            }
+                          ],
+                          "filter": {
+                            "expression": "service.name = 'sampleapp-gateway' "
+                          },
+                          "legend": "Gateway"
+                        }
+                      },
+                      {
+                        "type": "builder_query",
+                        "spec": {
+                          "name": "B",
+                          "signal": "traces",
+                          "expression": "B",
+                          "aggregations": [
+                            {
+                              "expression": "count() "
+                            }
+                          ],
+                          "filter": {
+                            "expression": "http.response.status_code = 200"
+                          },
+                          "legend": "$serviceName"
+                        }
+                      },
+                      {
+                        "type": "builder_trace_operator",
+                        "spec": {
+                          "name": "T1",
+                          "expression": "A -> B ",
+                          "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": {
+          // ! where is row header?
+          // w: 12,
+          // 	minW: 12,
+          // 	minH: 1,
+          // 	maxH: 1,
+          // 	x: 0,
+          // 	h: 1,
+          // 	y: 0,
+          // These above properties are required for the headers only
+          // need collapsed state for a section
+          "items": [
+            {
+              // we need id here. could be injected from the frontend
+              "x": 0,
+              "y": 0,
+              "width": 6,
+              "height": 6,
+              // how easy would it be to introduce more here? like maxW, minW, static, etc. Do we want to introduce those from the start?
+              // "moved" might need experimenting
+              "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"
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+}

perses/howToDefineAPanel.md

@@ -0,0 +1,140 @@
+# Adding a new panel plugin
+
+This guide is for developers adding a new panel kind to the Perses schema. It covers the file structure you need to create, the shared types available in `common.cue`, and how to compose them into your panel's spec.
+
+---
+
+## 1. File structure
+
+Create a new directory under `schemas-wrapper/schemas/` named after your panel:
+
+```
+schemas-wrapper/schemas/your-panel-name/
+├── your-panel-name.cue    # Schema definition
+└── example.json           # Example JSON that validates against the schema
+```
+
+The CUE file must use `package model` and declare a `kind` and `spec`:
+
+```cue
+package model
+
+import "github.com/signoz/common"
+
+kind: "YourPanelName"
+spec: close({
+    // your fields here
+})
+```
+
+Register the panel in `schemas-wrapper/schemas/package.json` by adding an entry to the `plugins` array:
+
+```json
+{
+    "kind": "Panel",
+    "spec": {
+        "name": "YourPanelName"
+    }
+}
+```
+
+---
+
+## 2. Available shared types from `common.cue`
+
+These types are defined in `common/common.cue` and can be used via `import "github.com/signoz/common"`. Use them instead of redefining the same structures in your panel.
+
+## 3. Defining your spec
+
+Your spec is a `close({})` block containing the fields relevant to your panel. Pick from the shared types above and add panel-specific types as needed. Every field should be optional (suffixed with `?`) since a panel should be valid with just defaults.
+
+### Typical patterns
+
+**Panel with graphs** (has axes, legend, thresholds as reference lines):
+
+```cue
+spec: close({
+    visualization?:  #Visualization
+    formatting?:     #Formatting
+    axes?:           common.#Axes
+    legend?:         #Legend
+    contextLinks?:   [...common.#ContextLinkProps]
+    thresholds?:     [...common.#ThresholdWithLabel]
+})
+```
+
+**Panel with a single value** (no axes/legend, thresholds as conditional formatting):
+
+```cue
+spec: close({
+    visualization?:  #Visualization
+    formatting?:     #Formatting
+    contextLinks?:   [...common.#ContextLinkProps]
+    thresholds?:     [...common.#ComparisonThreshold]
+})
+```
+
+**Panel with custom data structure** (panel-specific fields only):
+
+```cue
+spec: close({
+    yourCustomConfig?: #YourCustomConfig
+    contextLinks?:     [...common.#ContextLinkProps]
+})
+```
+
+### Defining panel-local types
+
+Types that are specific to your panel (not reusable) should be defined in your CUE file, not in common. For example, `#Visualization` varies per panel because each panel has different rendering options:
+
+```cue
+#Visualization: {
+    timePreference?: common.#TimePreference
+    yourCustomFlag?: bool | *false
+}
+```
+
+If your panel needs a threshold type that extends a common one, embed it:
+
+```cue
+#YourThreshold: {
+    common.#ComparisonThreshold
+    extraField: string
+}
+```
+
+---
+
+## 4. Writing the example JSON
+
+Create an `example.json` that exercises all fields in your spec. This file is used for validation — `./validate.sh` will check it against your schema.
+
+```json
+{
+    "kind": "YourPanelName",
+    "spec": {
+        ...
+    }
+}
+```
+
+Also add at least one panel using your new kind to `examples/perses.json` so it gets validated as part of a full dashboard.
+
+---
+
+## 5. Validation
+
+Run `./validate.sh` from the `perses/` directory. It lints `examples/perses.json` against all registered schemas. If your schema or example has issues, the error will point to the specific field.
+
+---
+
+## Quick reference: existing panels and what they use
+
+| Field | Time-series | Bar-chart | Number | Pie | Table | Histogram | List |
+|-------|:-----------:|:---------:|:------:|:---:|:-----:|:---------:|:----:|
+| `visualization` | yes | yes | yes | yes | yes | — | — |
+| `formatting` | yes | yes | yes | yes | yes | — | — |
+| `axes` | yes | yes | — | — | — | — | — |
+| `legend` | yes | yes | — | yes | — | yes | — |
+| `contextLinks` | yes | yes | yes | yes | yes | yes | — |
+| `thresholds` | yes | yes | yes | — | yes | — | — |

perses/schemas-wrapper/schemas/mf-manifest.json

@@ -0,0 +1,9 @@
+{
+  "id": "signoz",
+  "name": "signoz",
+  "metaData": {
+    "buildInfo": {
+      "buildVersion": "0.0.1"
+    }
+  }
+}

perses/schemas-wrapper/schemas/others/signoz-datasource/signoz-datasource.cue

@@ -0,0 +1,11 @@
+package model
+
+kind: "SigNozDatasource"
+
+// SigNoz has a single built-in backend — the frontend already knows
+// the API endpoint, so there is no connection config to validate.
+// Add fields here if SigNoz ever supports multiple backends or
+// configurable API versions.
+spec: close({})
+
+ // this is required to override the default that always requires a spec

perses/schemas-wrapper/schemas/others/signoz-datasource/signoz-datasource.json

@@ -0,0 +1,4 @@
+{
+    "kind": "SigNozDatasource",
+    "spec": {}
+}

perses/schemas-wrapper/schemas/others/signoz-everything-chart/signoz-everything-chart.cue

@@ -0,0 +1,26 @@
+package model
+
+// Fields from IBaseWidget that are NOT in any dedicated panel CUE file.
+// This file exists as a reference only and will be removed in the end.
+// Needs to be removed from package.json as well.
+
+kind: "SigNozIgnoredFieldsChart"
+spec: close({
+    opacity?:              string        // not wired to chart rendering
+    nullZeroValues?:       string        // not wired to chart rendering
+    stepSize?:             number
+    columnWidths?:         [string]: number // not a config choice — persisted user-resized column widths
+    // "Chart Appearance" section in UI — could not find this section in the app.
+    // This is behind a boolean flag right now. Can help reproduce locally
+    // These 4 fields are gated behind panelTypeVs* constants (TIME_SERIES only).
+    lineInterpolation?:    #LineInterpolation
+    showPoints?:           bool
+    lineStyle?:            #LineStyle
+    fillMode?:             #FillMode
+})
+
+#LineInterpolation: "linear" | "spline" | "stepAfter" | "stepBefore"
+
+#LineStyle: "solid" | "dashed"
+
+#FillMode: "solid" | "gradient" | "none"

perses/schemas-wrapper/schemas/others/signoz-formula/signoz-formula.cue

@@ -0,0 +1,17 @@
+package model
+
+import "github.com/signoz/common"
+
+// Source: pkg/types/querybuildertypes/querybuildertypesv5/formula.go — QueryBuilderFormula
+kind: "SigNozFormula"
+spec: close({
+	name:          common.#QueryName
+	expression:    string
+	disabled?:     bool | *false
+	legend?:       string
+	limit?:        common.#Limit
+	having?:       common.#HavingExpression
+	stepInterval?: number
+	order?:        [...common.#OrderByItem]
+	functions?:      [...common.#Function]
+})

perses/schemas-wrapper/schemas/others/signoz-formula/signoz-formula.json

@@ -0,0 +1,8 @@
+{
+    "kind": "SigNozFormula",
+    "spec": {
+        "name": "F1",
+        "expression": "A / B * 100",
+        "legend": "Hit rate %"
+    }
+}

perses/schemas-wrapper/schemas/others/signoz-trace-operator/signoz-trace-operator.cue

@@ -0,0 +1,31 @@
+package model
+
+import "github.com/signoz/common"
+
+// Source: pkg/types/querybuildertypes/querybuildertypesv5/trace_operator.go — QueryBuilderTraceOperator
+// SigNozTraceOperator composes multiple trace BuilderQueries using
+// relational operators (=>, ->, &&, ||, NOT) to query trace relationships.
+// Signal is implicitly "traces" — all referenced queries must be trace queries.
+kind: "SigNozTraceOperator"
+spec: close({
+	name:       common.#QueryName
+	// Operator expression composing trace queries, e.g. "A => B && C".
+	expression: string & !=""
+	disabled?:  bool | *false
+
+	// Which query's spans to return (must be a query referenced in expression).
+	returnSpansFrom?: common.#QueryName
+
+	aggregations?: [...common.#ExpressionAggregation]
+	filter?:       common.#FilterExpression
+	groupBy?:      [...common.#GroupByItem]
+	order?:        [...common.#OrderByItem]
+	limit?:        common.#Limit
+	offset?:       common.#Offset
+	cursor?:       string
+	functions?:    [...common.#Function]
+	stepInterval?: number
+	having?:       common.#HavingExpression
+	legend?:       string
+	selectFields?: [...common.#TelemetryFieldKey]
+})

perses/schemas-wrapper/schemas/others/signoz-trace-operator/signoz-trace-operator.json

@@ -0,0 +1,19 @@
+{
+    "kind": "SigNozTraceOperator",
+    "spec": {
+        "name": "T1",
+        "expression": "A => B",
+        "returnSpansFrom": "A",
+        "aggregations": [
+            {
+                "expression": "count()",
+                "alias": "request_count"
+            }
+        ],
+        "filter": {
+            "expression": "service.name = 'frontend'"
+        },
+        "groupBy": [],
+        "order": []
+    }
+}

perses/schemas-wrapper/schemas/package.json

@@ -0,0 +1,136 @@
+{
+  "name": "@signoz/signoz-schemas",
+  "version": "0.0.1",
+  "description": "SigNoz schema plugins",
+  "perses": {
+    "schemasPath": ".",
+    "plugins": [
+      {
+        "kind": "Datasource",
+        "spec": {
+          "name": "SigNozDatasource"
+        }
+      },
+      {
+        "kind": "Panel",
+        "spec": {
+          "name": "SigNozTimeSeriesPanel"
+        }
+      },
+      {
+        "kind": "Panel",
+        "spec": {
+          "name": "SigNozBarChartPanel"
+        }
+      },
+      {
+        "kind": "Panel",
+        "spec": {
+          "name": "SigNozNumberPanel"
+        }
+      },
+      {
+        "kind": "Panel",
+        "spec": {
+          "name": "SigNozPieChartPanel"
+        }
+      },
+      {
+        "kind": "Panel",
+        "spec": {
+          "name": "SigNozTablePanel"
+        }
+      },
+      {
+        "kind": "Panel",
+        "spec": {
+          "name": "SigNozHistogramPanel"
+        }
+      },
+      {
+        "kind": "Panel",
+        "spec": {
+          "name": "SigNozListPanel"
+        }
+      },
+      {
+        "kind": "Panel",
+        "spec": {
+          "name": "SigNozIgnoredFieldsChart"
+        }
+      },
+      {
+        "kind": "TimeSeriesQuery",
+        "spec": {
+          "name": "SigNozBuilderQuery"
+        }
+      },
+      {
+        "kind": "TimeSeriesQuery",
+        "spec": {
+          "name": "SigNozClickHouseSQL"
+        }
+      },
+      {
+        "kind": "TimeSeriesQuery",
+        "spec": {
+          "name": "SigNozPromQLQuery"
+        }
+      },
+      {
+        "kind": "TimeSeriesQuery",
+        "spec": {
+          "name": "SigNozCompositeQuery"
+        }
+      },
+      {
+        "kind": "TimeSeriesQuery",
+        "spec": {
+          "name": "SigNozTraceOperator"
+        }
+      },
+      {
+        "kind": "TimeSeriesQuery",
+        "spec": {
+          "name": "SigNozFormula"
+        }
+      },
+      {
+        "kind": "LogQuery",
+        "spec": {
+          "name": "SigNozBuilderQuery"
+        }
+      },
+      {
+        "kind": "TraceQuery",
+        "spec": {
+          "name": "SigNozBuilderQuery"
+        }
+      },
+      {
+        "kind": "Variable",
+        "spec": {
+          "name": "SigNozCustomVariable"
+        }
+      },
+      {
+        "kind": "Variable",
+        "spec": {
+          "name": "SigNozDynamicVariable"
+        }
+      },
+      {
+        "kind": "Variable",
+        "spec": {
+          "name": "SigNozQueryVariable"
+        }
+      },
+      {
+        "kind": "Variable",
+        "spec": {
+          "name": "SigNozTextboxVariable"
+        }
+      }
+    ]
+  }
+}

perses/schemas-wrapper/schemas/panels/review.md

@@ -0,0 +1,20 @@
+which panel type only caters to specific signals?
+metrics has no option for list panel type. also, no other querying types
+
+should the panel definition be linked to the query type?
+
+| type        | QB  | P   | CH  |
+| ----------- | --- | --- | --- |
+| Time Series | ✅  | ✅  | ✅  |
+| Number      | ✅  | ✅  | ✅  |
+| Table       | ✅  | ❌  | ✅  |
+| List        | ✅  | ❌  | ❌  |
+| Bar         | ✅  | ✅  | ✅  |
+| Pie         | ✅  | ❌  | ✅  |
+| Histogram   | ✅  | ✅  | ✅  |
+
+- unsure where this is used
+  stepSize - can be removed
+  renderColumnCell - used though - only table
+  customColumTitles - used though - only table
+  hiddenColumns - used though - only table

perses/schemas-wrapper/schemas/panels/signoz-bar-chart-panel/example.json

@@ -0,0 +1,40 @@
+{
+    "kind": "SigNozBarChartPanel",
+    "spec": {
+        "visualization": {
+            "timePreference": "globalTime",
+            "fillSpans": false,
+            "stackedBarChart": false
+        },
+        "formatting": {
+            "unit": "By",
+            "decimalPrecision": 2
+        },
+        "axes": {
+            "softMin": 0,
+            "softMax": 1000,
+            "isLogScale": false
+        },
+        "legend": {
+            "position": "bottom",
+            "customColors": {
+                "series-A": "#9ea5f7"
+            }
+        },
+        "contextLinks": [
+            {
+                "label": "View details",
+                "url": "http://localhost:8080/{{_service.name}}"
+            }
+        ],
+        "thresholds": [
+            {
+                "value": 500,
+                "unit": "By",
+                "color": "Red",
+                "format": "Text",
+                "label": "upper limit"
+            }
+        ]
+    }
+}

perses/schemas-wrapper/schemas/panels/signoz-bar-chart-panel/signoz-bar-chart-panel.cue

@@ -0,0 +1,31 @@
+package model
+
+import "github.com/signoz/common"
+
+kind: "SigNozBarChartPanel"
+spec: close({
+    // need to put more thought into this being optional?
+    visualization?:        #Visualization
+    formatting?:           #Formatting
+    axes?:                 common.#Axes
+    legend?:               #Legend
+    contextLinks?:         [...common.#ContextLinkProps]
+    thresholds?:           [...common.#ThresholdWithLabel]
+})
+
+#Visualization: {
+    timePreference?:  common.#TimePreference
+    fillSpans?:       bool | *false
+    stackedBarChart?: bool | *true
+}
+
+#Formatting: {
+    unit?:             string | *""
+    decimalPrecision?: common.#PrecisionOption
+}
+
+// can this be more composable?
+#Legend: {
+    position?:     common.#LegendPosition
+    customColors?: [string]: string
+}

perses/schemas-wrapper/schemas/panels/signoz-histogram-panel/example.json

@@ -0,0 +1,21 @@
+{
+    "kind": "SigNozHistogramPanel",
+    "spec": {
+        "histogramBuckets": {
+            "bucketCount": 60,
+            "bucketWidth": 100,
+            "mergeAllActiveQueries": true
+        },
+        "legend": {
+            "customColors": {
+                "series-A": "#9ea5f7"
+            }
+        },
+        "contextLinks": [
+            {
+                "label": "View histogram details",
+                "url": "http://localhost:8080/histogram"
+            }
+        ]
+    }
+}

perses/schemas-wrapper/schemas/panels/signoz-histogram-panel/signoz-histogram-panel.cue

@@ -0,0 +1,20 @@
+package model
+
+import "github.com/signoz/common"
+
+kind: "SigNozHistogramPanel"
+spec: close({
+    histogramBuckets?:     #HistogramBuckets
+    legend?:               #Legend
+    contextLinks?:         [...common.#ContextLinkProps]
+})
+
+#HistogramBuckets: {
+    bucketCount?:          number | *30
+    bucketWidth?:          number | *0
+    mergeAllActiveQueries?: bool | *false
+}
+
+#Legend: {
+    customColors?: [string]: string
+}

perses/schemas-wrapper/schemas/panels/signoz-list-panel/example.json

@@ -0,0 +1,54 @@
+{
+    "kind": "SigNozListPanel",
+    "spec": {
+        "selectedLogFields": [
+            {
+                "name": "timestamp",
+                "type": "log",
+                "dataType": ""
+            },
+            {
+                "name": "body",
+                "type": "log",
+                "dataType": ""
+            },
+            {
+                "name": "error",
+                "type": "",
+                "dataType": "string"
+            }
+        ],
+        "selectedTracesFields": [
+            {
+                "name": "service.name",
+                "signal": "traces",
+                "fieldContext": "resource",
+                "fieldDataType": "string"
+            },
+            {
+                "name": "name",
+                "signal": "traces",
+                "fieldContext": "span",
+                "fieldDataType": "string"
+            },
+            {
+                "name": "duration_nano",
+                "signal": "traces",
+                "fieldContext": "span",
+                "fieldDataType": ""
+            },
+            {
+                "name": "http_method",
+                "signal": "traces",
+                "fieldContext": "span",
+                "fieldDataType": ""
+            },
+            {
+                "name": "response_status_code",
+                "signal": "traces",
+                "fieldContext": "span",
+                "fieldDataType": ""
+            }
+        ]
+    }
+}

perses/schemas-wrapper/schemas/panels/signoz-list-panel/signoz-list-panel.cue

@@ -0,0 +1,15 @@
+package model
+
+import "github.com/signoz/common"
+
+kind: "SigNozListPanel"
+spec: close({
+    selectedLogFields?:    [...#LogField]
+    selectedTracesFields?: [...common.#TelemetryFieldKey]
+})
+
+#LogField: {
+    name:     string
+    type:     string
+    dataType: string
+}

perses/schemas-wrapper/schemas/panels/signoz-number-panel/example.json

@@ -0,0 +1,34 @@
+{
+    "kind": "SigNozNumberPanel",
+    "spec": {
+        "visualization": {
+            "timePreference": "globalTime"
+        },
+        "formatting": {
+            "unit": "none",
+            "decimalPrecision": 1
+        },
+        "contextLinks": [
+            {
+                "label": "View details",
+                "url": "http://localhost:8080/details"
+            }
+        ],
+        "thresholds": [
+            {
+                "value": 1200000,
+                "operator": ">",
+                "unit": "none",
+                "color": "Red",
+                "format": "Text"
+            },
+            {
+                "value": 1200000,
+                "operator": "<=",
+                "unit": "none",
+                "color": "Green",
+                "format": "Text"
+            }
+        ]
+    }
+}

perses/schemas-wrapper/schemas/panels/signoz-number-panel/signoz-number-panel.cue

@@ -0,0 +1,23 @@
+package model
+
+import "github.com/signoz/common"
+
+kind: "SigNozNumberPanel"
+spec: close({
+    visualization?:        #Visualization
+    formatting?:           #Formatting
+    contextLinks?:         [...common.#ContextLinkProps]
+    thresholds?:           [...common.#ComparisonThreshold]
+})
+
+#Visualization: {
+    timePreference?: common.#TimePreference
+}
+
+// where to store if alerts can be added or not?
+
+#Formatting: {
+    // mainly need to discuss optional fields
+    unit?:             string | *""
+    decimalPrecision?: common.#PrecisionOption
+}

perses/schemas-wrapper/schemas/panels/signoz-pie-chart-panel/example.json

@@ -0,0 +1,25 @@
+{
+    "kind": "SigNozPieChartPanel",
+    "spec": {
+        "visualization": {
+            "timePreference": "globalTime"
+        },
+        "formatting": {
+            "unit": "none",
+            "decimalPrecision": 1
+        },
+        "legend": {
+            "customColors": {
+                "\"201\"": "#2bc051",
+                "\"400\"": "#cc462e",
+                "\"500\"": "#ff0000"
+            }
+        },
+        "contextLinks": [
+            {
+                "label": "View breakdown",
+                "url": "http://localhost:8080/breakdown"
+            }
+        ]
+    }
+}

perses/schemas-wrapper/schemas/panels/signoz-pie-chart-panel/signoz-pie-chart-panel.cue

@@ -0,0 +1,24 @@
+package model
+
+import "github.com/signoz/common"
+
+kind: "SigNozPieChartPanel"
+spec: close({
+    visualization?:        #Visualization
+    formatting?:           #Formatting
+    legend?:               #Legend
+    contextLinks?:         [...common.#ContextLinkProps]
+})
+
+#Visualization: {
+    timePreference?: common.#TimePreference
+}
+
+#Formatting: {
+    unit?:             string | *""
+    decimalPrecision?: common.#PrecisionOption
+}
+
+#Legend: {
+    customColors?: [string]: string
+}

perses/schemas-wrapper/schemas/panels/signoz-table-panel/example.json

@@ -0,0 +1,30 @@
+{
+    "kind": "SigNozTablePanel",
+    "spec": {
+        "visualization": {
+            "timePreference": "globalTime"
+        },
+        "formatting": {
+            "columnUnits": {
+                "A": "s"
+            },
+            "decimalPrecision": 2
+        },
+        "contextLinks": [
+            {
+                "label": "View trace",
+                "url": "http://localhost:8080/trace/{{traceID}}"
+            }
+        ],
+        "thresholds": [
+            {
+                "value": 1,
+                "operator": ">",
+                "unit": "min",
+                "color": "Red",
+                "format": "Text",
+                "tableOptions": "A"
+            }
+        ]
+    }
+}

perses/schemas-wrapper/schemas/panels/signoz-table-panel/signoz-table-panel.cue

@@ -0,0 +1,31 @@
+package model
+
+import "github.com/signoz/common"
+
+kind: "SigNozTablePanel"
+spec: close({
+    visualization?:        #Visualization
+    formatting?:           #Formatting
+    contextLinks?:         [...common.#ContextLinkProps]
+    thresholds?:           [...#TableThreshold]
+})
+
+#Visualization: {
+    timePreference?: common.#TimePreference
+}
+
+#Formatting: {
+    columnUnits?:      [string]: string
+    decimalPrecision?: common.#PrecisionOption
+}
+
+#TableThreshold: {
+    common.#ComparisonThreshold
+    tableOptions: string
+}
+
+// missing
+columnWidths
+customColumnTitles
+hiddenColumns
+renderColumnCell - can be FE

perses/schemas-wrapper/schemas/panels/signoz-time-series-panel/example.json

@@ -0,0 +1,46 @@
+{
+    "kind": "SigNozTimeSeriesPanel",
+    "spec": {
+        "visualization": {
+            "timePreference": "globalTime",
+            "fillSpans": true
+        },
+        "formatting": {
+            "unit": "By",
+            "decimalPrecision": 3
+        },
+        "axes": {
+            "softMin": 0,
+            "softMax": 800,
+            "isLogScale": true
+        },
+        "legend": {
+            "position": "right",
+            "customColors": {
+                "{service.name=\"sampleapp-gateway\"}": "#9ea5f7"
+            }
+        },
+        "contextLinks": [
+            {
+                "label": "View service details",
+                "url": "http://localhost:8080/{{_service.name}}?dfddf=%7B%7Blimit%7D%7D"
+            }
+        ],
+        "thresholds": [
+            {
+                "value": 1024,
+                "unit": "By",
+                "color": "Red",
+                "format": "Text",
+                "label": "upper limit"
+            },
+            {
+                "value": 100,
+                "unit": "By",
+                "color": "Orange",
+                "format": "Text",
+                "label": "kinda bad"
+            }
+        ]
+    }
+}

perses/schemas-wrapper/schemas/panels/signoz-time-series-panel/signoz-time-series-panel.cue

@@ -0,0 +1,36 @@
+package model
+
+import "github.com/signoz/common"
+
+kind: "SigNozTimeSeriesPanel"
+spec: close({
+    visualization?:        #Visualization
+    formatting?:           #Formatting
+    axes?:                 common.#Axes
+    legend?:               #Legend
+    contextLinks?:         [...common.#ContextLinkProps]
+    thresholds?:           [...common.#ThresholdWithLabel]
+})
+
+#Visualization: {
+    timePreference?: common.#TimePreference
+    fillSpans?:      bool | *false
+}
+
+#Formatting: {
+    unit?:             string | *""
+    decimalPrecision?: common.#PrecisionOption
+}
+
+#Legend: {
+    position?:     common.#LegendPosition
+    // why call it customColors?
+    customColors?: [string]: string
+}
+
+// chart appearance
+ - fill mode
+ - line style
+ - line interpolation
+ - show points
+ - span gaps

perses/schemas-wrapper/schemas/querier/signoz-builder-query/signoz-builder-query.cue

@@ -0,0 +1,35 @@
+package model
+
+import "github.com/signoz/common"
+
+// Source: pkg/types/querybuildertypes/querybuildertypesv5/builder_query.go — QueryBuilderQuery
+kind: "SigNozBuilderQuery"
+spec: close({
+	name:       common.#QueryName
+	signal:     "metrics" | "logs" | "traces"
+	expression: string
+	disabled?:  bool | *false
+
+	aggregations?:   [...common.#Aggregation]
+	filter?:         common.#FilterExpression
+	groupBy?:        [...common.#GroupByItem]
+	order?:          [...common.#OrderByItem]
+	selectFields?:   [...common.#TelemetryFieldKey]
+	limit?:          common.#Limit
+	limitBy?:        #LimitBy
+	offset?:         common.#Offset
+	cursor?:         string
+	having?:         common.#HavingExpression
+	// secondaryAggregations not added — not yet implemented.
+	functions?:      [...common.#Function]
+	legend?:         string
+	stepInterval?:   number
+	reduceTo?:       common.#ReduceTo
+	pageSize?:       int & >=1
+	source?:         string
+})
+
+#LimitBy: close({
+	keys:  [...string]
+	value: string
+})

perses/schemas-wrapper/schemas/querier/signoz-builder-query/signoz-builder-query.json

@@ -0,0 +1,24 @@
+{
+    "kind": "SigNozBuilderQuery",
+    "spec": {
+        "name": "A",
+        "signal": "metrics",
+        "expression": "A",
+        "aggregations": [
+            {
+                "metricName": "redis_keyspace_hits",
+                "timeAggregation": "rate",
+                "spaceAggregation": "sum",
+                "reduceTo": "sum"
+            }
+        ],
+        "filter": {
+            "expression": "host_name IN $host_name"
+        },
+        "groupBy": [],
+        "order": [],
+        "disabled": false,
+        "legend": "Hit/s across all hosts",
+        "stepInterval": 60
+    }
+}

perses/schemas-wrapper/schemas/querier/signoz-clickhouse-sql/signoz-clickhouse-sql.cue

@@ -0,0 +1,13 @@
+package model
+
+import "github.com/signoz/common"
+
+// Source: pkg/types/querybuildertypes/querybuildertypesv5/clickhouse_query.go — ClickHouseQuery
+kind: "SigNozClickHouseSQL"
+spec: close({
+	name:      common.#QueryName
+	query:     string & !=""
+	// required / optional
+	disabled?: bool | *false
+	legend?:   string
+})

perses/schemas-wrapper/schemas/querier/signoz-clickhouse-sql/signoz-clickhouse-sql.json

@@ -0,0 +1,9 @@
+{
+    "kind": "SigNozClickHouseSQL",
+    "spec": {
+        "name": "A",
+        "query": "SELECT toStartOfInterval(timestamp, INTERVAL 1 MINUTE) AS ts, count() AS total FROM signoz_logs.distributed_logs GROUP BY ts ORDER BY ts",
+        "disabled": false,
+        "legend": "Log count"
+    }
+}

perses/schemas-wrapper/schemas/querier/signoz-composite-query/signoz-composite-query.cue

@@ -0,0 +1,47 @@
+package model
+
+import (
+	bq "github.com/signoz/schemas-wrapper/schemas/signoz-builder-query:model"
+	f "github.com/signoz/schemas-wrapper/schemas/signoz-formula:model"
+	to "github.com/signoz/schemas-wrapper/schemas/signoz-trace-operator:model"
+	pql "github.com/signoz/schemas-wrapper/schemas/signoz-promql:model"
+	ch "github.com/signoz/schemas-wrapper/schemas/signoz-clickhouse-sql:model"
+)
+
+// Source: pkg/types/querybuildertypes/querybuildertypesv5/req.go — CompositeQuery
+// SigNozCompositeQuery groups multiple query plugins into a single
+// query request. Each entry is a typed envelope whose spec is
+// validated by the corresponding plugin schema.
+
+// this is to be used when there are multiple queries in a panel
+// in most cases, there will be only one query, and there it is a better idea to 
+// use the corresponding kind for that query instead of this composite query
+kind: "SigNozCompositeQuery"
+spec: close({
+	queries: [...#QueryEnvelope]
+})
+
+// QueryEnvelope wraps a single query plugin with a type discriminator.
+
+// need to verify the types internally are marked required where necessary, so that we can make them optional here and not have to worry about it at the top level
+#QueryEnvelope:
+	close({
+		type: "builder_query",
+		spec: bq.spec
+	}) |
+	close({
+		type: "builder_formula",
+		spec: f.spec
+	}) |
+	close({
+		type: "builder_trace_operator",
+		spec: to.spec
+	}) |
+	close({
+		type: "promql",
+		spec: pql.spec
+	}) |
+	close({
+		type: "clickhouse_sql",
+		spec: ch.spec
+	})

perses/schemas-wrapper/schemas/querier/signoz-composite-query/signoz-composite-query.json

@@ -0,0 +1,53 @@
+{
+    "kind": "SigNozCompositeQuery",
+    "spec": {
+        "queries": [
+            {
+                "type": "builder_query",
+                "spec": {
+                    "name": "A",
+                    "signal": "metrics",
+                    "expression": "A",
+                    "aggregations": [
+                        {
+                            "metricName": "redis_keyspace_hits",
+                            "timeAggregation": "rate",
+                            "spaceAggregation": "sum",
+                            "reduceTo": "sum"
+                        }
+                    ],
+                    "filter": {
+                        "expression": "host_name IN $host_name"
+                    }
+                }
+            },
+            {
+                "type": "builder_query",
+                "spec": {
+                    "name": "B",
+                    "signal": "metrics",
+                    "expression": "B",
+                    "aggregations": [
+                        {
+                            "metricName": "redis_keyspace_misses",
+                            "timeAggregation": "rate",
+                            "spaceAggregation": "sum",
+                            "reduceTo": "sum"
+                        }
+                    ],
+                    "filter": {
+                        "expression": "host_name IN $host_name"
+                    }
+                }
+            },
+            {
+                "type": "builder_formula",
+                "spec": {
+                    "name": "F1",
+                    "expression": "A / (A + B) * 100",
+                    "legend": "Hit rate %"
+                }
+            }
+        ]
+    }
+}

perses/schemas-wrapper/schemas/querier/signoz-promql/signoz-promql.cue

@@ -0,0 +1,15 @@
+package model
+
+import "github.com/signoz/common"
+
+// Source: pkg/types/querybuildertypes/querybuildertypesv5/prom_query.go — PromQuery
+kind: "SigNozPromQLQuery"
+spec: close({
+	name:      common.#QueryName
+	query:     string & !=""
+	disabled?: bool | *false
+	legend?:   string
+	// where are the below items coming from? Don't see types for it. How to arrive at this?
+	step?:     =~"^([0-9]+(\\.[0-9]+)?(ns|us|µs|ms|s|m|h))+$" | number
+	stats?:    bool
+})

perses/schemas-wrapper/schemas/querier/signoz-promql/signoz-promql.json

@@ -0,0 +1,9 @@
+{
+    "kind": "SigNozPromQLQuery",
+    "spec": {
+        "name": "A",
+        "query": "rate(http_requests_total{status=\"200\"}[5m])",
+        "disabled": false,
+        "legend": "{{method}} {{path}}"
+    }
+}

perses/schemas-wrapper/schemas/review.md

@@ -0,0 +1 @@
+creating folders based on type is helpful instead of a flat folder structure. It is how you would visualise the dashboard as components

perses/schemas-wrapper/schemas/variables/signoz-custom-variable/signoz-custom-variable.cue

@@ -0,0 +1,10 @@
+package model
+
+import "github.com/signoz/common"
+
+// defaultValue lives on the Perses ListVariable wrapper (spec level).
+kind: "SigNozCustomVariable"
+spec: close({
+	customValue: =~"^[^,]+(,[^,]+)*$"
+	sort?:       common.#VariableSortOrder
+})

perses/schemas-wrapper/schemas/variables/signoz-custom-variable/signoz-custom-variable.json

@@ -0,0 +1,7 @@
+{
+    "kind": "SigNozCustomVariable",
+    "spec": {
+        "customValue": "production,staging,development",
+        "sort": "disabled"
+    }
+}

perses/schemas-wrapper/schemas/variables/signoz-dynamic-variable/signoz-dynamic-variable.cue

@@ -0,0 +1,12 @@
+package model
+
+import "github.com/signoz/common"
+
+// defaultValue lives on the Perses ListVariable wrapper (spec level).
+kind: "SigNozDynamicVariable"
+spec: close({
+	name: string
+	source:    string
+	sort?: common.#VariableSortOrder
+	// where does attribute go here?
+})

perses/schemas-wrapper/schemas/variables/signoz-dynamic-variable/signoz-dynamic-variable.json

@@ -0,0 +1,8 @@
+{
+    "kind": "SigNozDynamicVariable",
+    "spec": {
+        "name": "host_name",
+        "source": "metrics",
+        "sort": "asc"
+    }
+}

perses/schemas-wrapper/schemas/variables/signoz-query-variable/signoz-query-variable.cue

@@ -0,0 +1,13 @@
+package model
+
+import "github.com/signoz/common"
+
+// defaultValue lives on the Perses ListVariable wrapper (spec level).
+kind: "SigNozQueryVariable"
+spec: close({
+	queryValue: string
+	sort?:      common.#VariableSortOrder
+	// This should not be optional
+	// what happens to the existing https://perses.dev/perses/docs/dac/go/variable/#sortingby inside the ListVariable spec? Do we move that to the plugin spec level?
+	// same for other list variable cues
+})

perses/schemas-wrapper/schemas/variables/signoz-query-variable/signoz-query-variable.json

@@ -0,0 +1,7 @@
+{
+    "kind": "SigNozQueryVariable",
+    "spec": {
+        "queryValue": "SELECT DISTINCT host_name FROM signoz_metrics.distributed_time_series_v4_1day WHERE metric_name = 'redis_cpu_time'",
+        "sort": "asc"
+    }
+}

perses/schemas-wrapper/schemas/variables/signoz-textbox-variable/signoz-textbox-variable.cue

@@ -0,0 +1,7 @@
+package model
+
+// Shouldn't the below line be TextVariable?
+// are any of the variables inside this required? How would that validation work?
+// defaultValue lives on the Perses ListVariable wrapper (spec level).
+kind: "SigNozTextboxVariable"
+spec: close({})

perses/schemas-wrapper/schemas/variables/signoz-textbox-variable/signoz-textbox-variable.json

@@ -0,0 +1,4 @@
+{
+    "kind": "SigNozTextboxVariable",
+    "spec": {}
+}

perses/validate.sh

@@ -0,0 +1,2 @@
+percli lint -f ./examples/perses.json --plugin.path ./schemas-wrapper
+rm ./schemas-wrapper/plugin-modules.json