[pull] main from SigNoz:main

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

@@ -1,8 +1,6 @@
 .quick-filters-container {
 	display: flex;
 	flex-direction: row;
-	height: 100%;
-	min-height: 0;
 	position: relative;
 
 	.quick-filters-settings-container {

frontend/src/components/TagKeyValueInput/TagKeyValueInput.test.tsx

@@ -0,0 +1,112 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TagKeyValueInput from './TagKeyValueInput';
+
+const TID = 'tag-key-value-input';
+
+type User = ReturnType<typeof userEvent.setup>;
+
+const startEditingFirstChip = async (user: User): Promise<HTMLElement> => {
+	await user.dblClick(screen.getAllByTestId(`${TID}-chip`)[0]);
+	return screen.getByTestId(`${TID}-edit`);
+};
+
+describe('TagKeyValueInput — inline chip edit', () => {
+	it('shows an error and stays in edit mode when Enter commits an invalid value', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={['env:prod']} onTagsChange={onTagsChange} />);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'novalue{Enter}');
+
+		expect(screen.getByTestId(`${TID}-error`)).toHaveTextContent(
+			'key:value format',
+		);
+		// Still editing (input present), and no change committed.
+		expect(screen.getByTestId(`${TID}-edit`)).toBeInTheDocument();
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+
+	it('shows a duplicate error when Enter commits an existing tag', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(
+			<TagKeyValueInput
+				tags={['env:prod', 'team:pulse']}
+				onTagsChange={onTagsChange}
+			/>,
+		);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'team:pulse{Enter}');
+
+		expect(screen.getByTestId(`${TID}-error`)).toHaveTextContent(
+			'already exists',
+		);
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+
+	it('commits a valid edit on Enter', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={['env:prod']} onTagsChange={onTagsChange} />);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'env:staging{Enter}');
+
+		expect(onTagsChange).toHaveBeenCalledWith(['env:staging']);
+		expect(screen.queryByTestId(`${TID}-error`)).not.toBeInTheDocument();
+	});
+
+	it('reverts silently (no error) when blurring an invalid edit', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={['env:prod']} onTagsChange={onTagsChange} />);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'novalue');
+		await user.tab(); // blur off the edit input
+
+		expect(screen.queryByTestId(`${TID}-error`)).not.toBeInTheDocument();
+		expect(screen.queryByTestId(`${TID}-edit`)).not.toBeInTheDocument();
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+});
+
+describe('TagKeyValueInput — backend-rule validation', () => {
+	it('rejects a key containing a space on inline edit', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={['env:prod']} onTagsChange={onTagsChange} />);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'my key:prod{Enter}');
+
+		expect(screen.getByTestId(`${TID}-error`)).toHaveTextContent(
+			'spaces or special characters',
+		);
+		expect(screen.getByTestId(`${TID}-edit`)).toBeInTheDocument();
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+
+	it('rejects a value containing a space in the new-tag input', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={[]} onTagsChange={onTagsChange} />);
+
+		const input = screen.getByTestId(TID);
+		await user.type(input, 'env:pro d{Enter}');
+
+		expect(screen.getByTestId(`${TID}-error`)).toHaveTextContent(
+			'spaces or special characters',
+		);
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+});

frontend/src/components/TagKeyValueInput/TagKeyValueInput.tsx

@@ -5,7 +5,7 @@ import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 
 import TagBadge from '../TagBadge/TagBadge';
-import { parseKeyValueTag } from './utils';
+import { validateTag } from './utils';
 
 import styles from './TagKeyValueInput.module.scss';
 
@@ -43,16 +43,12 @@ function TagKeyValueInput({
 		if (!raw) {
 			return;
 		}
-		const normalized = parseKeyValueTag(raw);
-		if (!normalized) {
-			setError('Tags must be in key:value format (both sides required).');
+		const result = validateTag(raw, tags);
+		if ('error' in result) {
+			setError(result.error);
 			return;
 		}
-		if (tags.includes(normalized)) {
-			setError('This tag already exists.');
-			return;
-		}
-		onTagsChange([...tags, normalized]);
+		onTagsChange([...tags, result.tag]);
 		setInputValue('');
 		setError('');
 	};
@@ -82,15 +78,20 @@ function TagKeyValueInput({
 	const cancelEdit = (): void => {
 		setEditIndex(-1);
 		setEditValue('');
+		setError('');
 	};
 
-	const commitEdit = (): void => {
-		const normalized = parseKeyValueTag(editValue);
-		// Drop into a no-op (revert) on invalid or duplicate edits rather than
-		// stranding the user in an un-exitable edit box.
-		if (normalized && !tags.some((t, i) => t === normalized && i !== editIndex)) {
-			onTagsChange(tags.map((t, i) => (i === editIndex ? normalized : t)));
+	const commitEdit = (revertOnInvalid = false): void => {
+		const result = validateTag(editValue, tags, editIndex);
+		if ('error' in result) {
+			if (revertOnInvalid) {
+				cancelEdit();
+			} else {
+				setError(result.error);
+			}
+			return;
 		}
+		onTagsChange(tags.map((t, i) => (i === editIndex ? result.tag : t)));
 		cancelEdit();
 	};
 
@@ -121,11 +122,14 @@ function TagKeyValueInput({
 							value={editValue}
 							autoFocus
 							testId={`${testId}-edit`}
-							onChange={(e: ChangeEvent<HTMLInputElement>): void =>
-								setEditValue(e.target.value)
-							}
+							onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+								setEditValue(e.target.value);
+								if (error) {
+									setError('');
+								}
+							}}
 							onKeyDown={handleEditKeyDown}
-							onBlur={commitEdit}
+							onBlur={(): void => commitEdit(true)}
 						/>
 					) : (
 						<TagBadge

frontend/src/components/TagKeyValueInput/utils.ts

@@ -15,3 +15,42 @@ export function parseKeyValueTag(raw: string): string | null {
 	}
 	return `${key}:${value}`;
 }
+
+const TAG_KEY_REGEX = new RegExp('^[a-zA-Z$_@{#][a-zA-Z0-9$_@#{}:/-]*$');
+const TAG_VALUE_REGEX = new RegExp('^[a-zA-Z0-9$_@#{}:.+=/-]*$');
+const MAX_TAG_LEN = 32;
+
+export type TagValidation = { tag: string } | { error: string };
+
+export function validateTag(
+	raw: string,
+	existingTags: string[],
+	excludeIndex = -1,
+): TagValidation {
+	const normalized = parseKeyValueTag(raw);
+	if (!normalized) {
+		return { error: 'Tags must be in key:value format (both sides required).' };
+	}
+	const separator = normalized.indexOf(':');
+	const key = normalized.slice(0, separator);
+	const value = normalized.slice(separator + 1);
+	if (!TAG_KEY_REGEX.test(key)) {
+		return { error: 'Tag keys cannot contain spaces or special characters.' };
+	}
+	if (!TAG_VALUE_REGEX.test(value)) {
+		return { error: 'Tag values cannot contain spaces or special characters.' };
+	}
+	if (key.length > MAX_TAG_LEN || value.length > MAX_TAG_LEN) {
+		return {
+			error: `Tag key and value must each be ${MAX_TAG_LEN} characters or fewer.`,
+		};
+	}
+	if (
+		existingTags.some(
+			(tag, index) => tag === normalized && index !== excludeIndex,
+		)
+	) {
+		return { error: 'This tag already exists.' };
+	}
+	return { tag: normalized };
+}

frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx

@@ -1,7 +1,11 @@
-import { ComponentProps, memo } from 'react';
+import { ComponentProps, memo, useCallback, useLayoutEffect } from 'react';
 import { TableComponents } from 'react-virtuoso';
 import cx from 'classnames';
 
+import {
+	chromePerformanceTanstackTableBeginHover,
+	chromePerformanceMeasureTanstackTable,
+} from './perfDevtools';
 import TanStackRowCells from './TanStackRow';
 import {
 	useClearRowHovered,
@@ -10,6 +14,7 @@ import {
 import { FlatItem, TableRowContext } from './types';
 
 import tableStyles from './TanStackTable.module.scss';
+import { chromePerformanceNow } from 'lib/chromePerformanceDevTools';
 
 type VirtuosoTableRowProps<TData, TItemKey = string> = ComponentProps<
 	NonNullable<
@@ -22,13 +27,31 @@ function TanStackCustomTableRow<TData, TItemKey = string>({
 	context,
 	...props
 }: VirtuosoTableRowProps<TData, TItemKey>): JSX.Element {
+	const renderStart = chromePerformanceNow();
 	const rowId = item.row.id;
 	const rowData = item.row.original;
 
 	// Stable callbacks for hover state management
 	const setHovered = useSetRowHovered(rowId);
 	const clearHovered = useClearRowHovered(rowId);
 
+	const handleMouseEnter = useCallback((): void => {
+		chromePerformanceTanstackTableBeginHover(rowId);
+		setHovered();
+	}, [rowId, setHovered]);
+
+	useLayoutEffect(() => {
+		chromePerformanceMeasureTanstackTable('Row render', renderStart, {
+			track: 'Row render',
+			color: 'secondary',
+			tooltipText: 'Row render + commit',
+			properties: [
+				['rowId', rowId],
+				['kind', item.kind],
+			],
+		});
+	});
+
 	if (item.kind === 'expansion') {
 		return (
 			<tr {...props} className={tableStyles.tableRowExpansion}>
@@ -65,7 +88,7 @@ function TanStackCustomTableRow<TData, TItemKey = string>({
 			{...props}
 			className={rowClassName}
 			style={rowStyle}
-			onMouseEnter={setHovered}
+			onMouseEnter={handleMouseEnter}
 			onMouseLeave={clearHovered}
 		>
 			<TanStackRowCells

frontend/src/components/TanStackTableView/TanStackHoverTooltip.tsx

@@ -0,0 +1,30 @@
+import { useLayoutEffect, type ReactNode } from 'react';
+
+import { chromePerformanceTanstackTableEndHover } from './perfDevtools';
+import { useIsRowHovered } from './TanStackTableStateContext';
+import { TooltipSimple, TooltipSimpleProps } from '@signozhq/ui/tooltip';
+
+export type HoverTooltipProps = Omit<TooltipSimpleProps, 'open'> & {
+	rowId: string;
+	children: ReactNode;
+};
+
+export function TanStackHoverTooltip({
+	rowId,
+	children,
+	...tooltipProps
+}: HoverTooltipProps): JSX.Element {
+	const isHovered = useIsRowHovered(rowId);
+
+	useLayoutEffect(() => {
+		if (isHovered) {
+			chromePerformanceTanstackTableEndHover(rowId);
+		}
+	}, [isHovered, rowId]);
+
+	if (!isHovered) {
+		return <>{children}</>;
+	}
+
+	return <TooltipSimple {...tooltipProps}>{children}</TooltipSimple>;
+}

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -5,6 +5,7 @@ import {
 	useCallback,
 	useEffect,
 	useImperativeHandle,
+	useLayoutEffect,
 	useMemo,
 	useRef,
 } from 'react';
@@ -44,6 +45,7 @@ import {
 	TanStackTableHandle,
 	TanStackTableProps,
 } from './types';
+import { chromePerformanceMeasureTanstackTable } from './perfDevtools';
 import { useColumnDnd } from './useColumnDnd';
 import { useColumnHandlers } from './useColumnHandlers';
 import { useColumnState } from './useColumnState';
@@ -56,6 +58,7 @@ import { VirtuosoTableColGroup } from './VirtuosoTableColGroup';
 
 import tableStyles from './TanStackTable.module.scss';
 import viewStyles from './TanStackTableView.module.scss';
+import { chromePerformanceNow } from 'lib/chromePerformanceDevTools';
 
 const COLUMN_DND_AUTO_SCROLL = {
 	layoutShiftCompensation: false as const,
@@ -116,6 +119,8 @@ function TanStackTableInner<TData, TItemKey = string>(
 		);
 	}
 
+	const renderStart = chromePerformanceNow();
+
 	const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
 	const isDarkMode = useIsDarkMode();
 
@@ -344,6 +349,19 @@ function TanStackTableInner<TData, TItemKey = string>(
 
 	const visibleColumnsCount = table.getVisibleFlatColumns().length;
 
+	useLayoutEffect(() => {
+		chromePerformanceMeasureTanstackTable('Table render', renderStart, {
+			track: 'Table render',
+			color: 'primary',
+			tooltipText: 'TanStackTable render + commit',
+			properties: [
+				['rows', String(flatItems.length)],
+				['columns', String(visibleColumnsCount)],
+				['loading', String(isLoading)],
+			],
+		});
+	});
+
 	const columnOrderKey = useMemo(() => columnIds.join(','), [columnIds]);
 	const columnVisibilityKey = useMemo(
 		() =>