Merge branch 'main' into nv/layout-validations

frontend/src/hooks/queryBuilder/useCreateAlerts.tsx

@@ -24,11 +24,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { withBasePath } from 'utils/basePath';
 import { getGraphType } from 'utils/getGraphType';
 
-/**
- * @deprecated V1-only. V2 dashboards seed alerts from a panel via
- * `useCreateAlertFromPanel` / `buildCreateAlertUrl`
- * (pages/DashboardPageV2/.../Panel). Do not use in new code.
- */
 const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 	const queryRangeMutation = useMutation(getSubstituteVars);
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigActions/ConfigActionRow.tsx

@@ -1,43 +0,0 @@
-import { SquareArrowOutUpRight } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import type { ReactNode } from 'react';
-
-import styles from './ConfigActions.module.scss';
-
-interface ConfigActionRowProps {
-	/** Leading glyph for the action. */
-	icon: ReactNode;
-	label: string;
-	onClick: () => void;
-	testId?: string;
-}
-
-/**
- * One row in the config pane's "Actions" list — a cross-page navigation link
- * (leading icon, label, trailing external-link affordance). The whole row is the
- * click target.
- */
-function ConfigActionRow({
-	icon,
-	label,
-	onClick,
-	testId,
-}: ConfigActionRowProps): JSX.Element {
-	return (
-		<Button
-			type="button"
-			variant="outlined"
-			color="secondary"
-			className={styles.row}
-			data-testid={testId}
-			onClick={onClick}
-			prefix={<span className={styles.icon}>{icon}</span>}
-			suffix={<SquareArrowOutUpRight size={14} />}
-		>
-			<Typography.Text className={styles.label}>{label}</Typography.Text>
-		</Button>
-	);
-}
-
-export default ConfigActionRow;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigActions/ConfigActions.module.scss

@@ -1,57 +0,0 @@
-/* The "Actions" group: a list of cross-page navigation links, visually separated
-   from the collapsible config sections above by the same hairline divider. */
-.divider {
-	height: 1px;
-	background: var(--l2-border);
-	margin: 18px 0;
-}
-
-.container {
-	padding: 0 16px;
-}
-
-.eyebrow {
-	display: block;
-	margin: 0 2px 10px;
-	font-size: 11px;
-	font-weight: 600;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-	color: var(--l1-foreground);
-}
-
-.list {
-	display: flex;
-	flex-direction: column;
-}
-
-/* A navigation-link row: leading icon, label, trailing external-link affordance. */
-.row {
-	display: flex;
-	align-items: center;
-	gap: 11px;
-	width: 100%;
-	height: 44px;
-	padding: 0 4px;
-	border: none;
-	background: transparent;
-	cursor: pointer;
-	color: var(--text-vanilla-100);
-	border-radius: 4px;
-
-	&:hover {
-		background: color-mix(in srgb, var(--bg-vanilla-100) 6%, transparent);
-	}
-}
-
-.icon {
-	display: grid;
-	place-items: center;
-	flex: none;
-	color: var(--l2-foreground);
-}
-
-.label {
-	flex: 1;
-	text-align: left;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigActions/ConfigActions.tsx

@@ -1,51 +0,0 @@
-import { Bell } from '@signozhq/icons';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-import { useCreateAlertFromPanel } from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel';
-
-import ConfigActionRow from './ConfigActionRow';
-import styles from './ConfigActions.module.scss';
-
-interface ConfigActionsProps {
-	/** The draft panel — its current query seeds the actions (e.g. Create alert). */
-	panel: DashboardtypesPanelDTO;
-	panelId: string;
-}
-
-/**
- * The "Actions" group at the foot of the config pane: cross-page navigation links,
- * kept distinct from the collapsible config sections above. Each link is gated by the
- * panel kind's capabilities; the whole group hides when none apply.
- */
-function ConfigActions({
-	panel,
-	panelId,
-}: ConfigActionsProps): JSX.Element | null {
-	const createAlert = useCreateAlertFromPanel();
-	const { actions } = getPanelDefinition(panel.spec.plugin.kind);
-
-	// Only kinds whose query can seed an alert offer this today; mirror the panel
-	// menu's create-alert capability.
-	if (!actions.createAlert) {
-		return null;
-	}
-
-	return (
-		<>
-			<div className={styles.divider} />
-			<div className={styles.container}>
-				<span className={styles.eyebrow}>Actions</span>
-				<div className={styles.list}>
-					<ConfigActionRow
-						testId="panel-editor-v2-create-alert"
-						icon={<Bell size={14} />}
-						label="Create alert"
-						onClick={(): void => createAlert(panel, panelId)}
-					/>
-				</div>
-			</div>
-		</>
-	);
-}
-
-export default ConfigActions;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigActions/__tests__/ConfigActions.test.tsx

@@ -1,51 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-
-import ConfigActions from '../ConfigActions';
-
-const mockCreateAlert = jest.fn();
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel',
-	() => ({
-		useCreateAlertFromPanel: jest.fn(() => mockCreateAlert),
-	}),
-);
-
-function makePanel(kind: string): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: {
-			display: { name: 'CPU' },
-			plugin: { kind, spec: {} },
-			queries: [],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-describe('ConfigActions', () => {
-	beforeEach(() => jest.clearAllMocks());
-
-	it('offers "Create alert rule" for a create-alert-capable kind and seeds from the panel', async () => {
-		const user = userEvent.setup();
-		const panel = makePanel('signoz/TimeSeriesPanel');
-		render(<ConfigActions panel={panel} panelId="panel-1" />);
-
-		const row = screen.getByTestId('panel-editor-v2-create-alert');
-		expect(row).toHaveTextContent('Create alert');
-
-		await user.click(row);
-		expect(mockCreateAlert).toHaveBeenCalledWith(panel, 'panel-1');
-	});
-
-	it('renders nothing for a kind that cannot seed an alert', () => {
-		const { container } = render(
-			<ConfigActions panel={makePanel('signoz/TablePanel')} panelId="panel-1" />,
-		);
-
-		expect(
-			screen.queryByTestId('panel-editor-v2-create-alert'),
-		).not.toBeInTheDocument();
-		expect(container).toBeEmptyDOMElement();
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.tsx

@@ -1,22 +1,20 @@
 import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import type {
-	DashboardtypesPanelDTO,
-	DashboardtypesPanelSpecDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import { resolveSignal } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
 import type { EQueryType } from 'types/common/dashboard';
 
 import type { LegendSeries } from '../hooks/useLegendSeries';
 import type { TableColumnOption } from '../hooks/useTableColumns';
-import ConfigActions from './ConfigActions/ConfigActions';
 import SectionSlot from './SectionSlot/SectionSlot';
 
 import styles from './ConfigPane.module.scss';
 import { PanelKind } from '../../Panels/types/panelKind';
 
 interface ConfigPaneProps {
+	/** Full plugin kind (e.g. `signoz/TimeSeriesPanel`); drives which sections show. */
+	panelKind: PanelKind;
 	/** The panel spec — the single editing surface (title/description + section slices). */
 	spec: DashboardtypesPanelSpecDTO;
 	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
@@ -34,12 +32,6 @@ interface ConfigPaneProps {
 	tableColumns: TableColumnOption[];
 	/** Query step interval (seconds), for the chart-appearance span-gaps floor. */
 	stepInterval?: number;
-	/**
-	 * The draft panel and its id — the "Actions" group seeds cross-page links
-	 * (Create alert) from the current query.
-	 */
-	panel: DashboardtypesPanelDTO;
-	panelId: string;
 }
 
 /**
@@ -49,6 +41,7 @@ interface ConfigPaneProps {
  * generically via the section registry — only sections with a built editor appear.
  */
 function ConfigPane({
+	panelKind,
 	spec,
 	onChangeSpec,
 	onChangePanelKind,
@@ -56,10 +49,7 @@ function ConfigPane({
 	legendSeries,
 	tableColumns,
 	stepInterval,
-	panel,
-	panelId,
 }: ConfigPaneProps): JSX.Element {
-	const panelKind = spec.plugin.kind;
 	const definition = getPanelDefinition(panelKind);
 	const sections = definition.sections;
 
@@ -124,8 +114,6 @@ function ConfigPane({
 					</div>
 				</>
 			)}
-
-			<ConfigActions panel={panel} panelId={panelId} />
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/__tests__/ConfigPane.test.tsx

@@ -1,20 +1,9 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import type {
-	DashboardtypesPanelDTO,
-	DashboardtypesPanelSpecDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 import ConfigPane from '../ConfigPane';
 
-// The Actions group's hook navigates/logs; stub it so ConfigPane renders without a router.
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel',
-	() => ({
-		useCreateAlertFromPanel: (): jest.Mock => jest.fn(),
-	}),
-);
-
 function spec(unit?: string): DashboardtypesPanelSpecDTO {
 	return {
 		display: { name: 'CPU', description: 'usage' },
@@ -30,14 +19,13 @@ function renderConfigPane(
 	overrides: Partial<React.ComponentProps<typeof ConfigPane>> = {},
 ): React.ComponentProps<typeof ConfigPane> {
 	const props: React.ComponentProps<typeof ConfigPane> = {
+		panelKind: 'signoz/TimeSeriesPanel',
 		spec: spec(),
 		onChangeSpec: jest.fn(),
 		onChangePanelKind: jest.fn(),
 		queryType: EQueryType.QUERY_BUILDER,
 		legendSeries: [],
 		tableColumns: [],
-		panel: { kind: 'Panel', spec: spec() } as DashboardtypesPanelDTO,
-		panelId: 'panel-1',
 		...overrides,
 	};
 	render(<ConfigPane {...props} />);
@@ -75,28 +63,4 @@ describe('ConfigPane', () => {
 			screen.getByTestId('config-section-formatting-&-units'),
 		).toBeInTheDocument();
 	});
-
-	it('renders the Actions group for a create-alert-capable panel', () => {
-		// renderConfigPane defaults to a TimeSeries panel, which can seed an alert.
-		renderConfigPane();
-
-		expect(screen.getByText('Actions')).toBeInTheDocument();
-		expect(
-			screen.getByTestId('panel-editor-v2-create-alert'),
-		).toBeInTheDocument();
-	});
-
-	it('omits the create-alert action for a kind that cannot seed an alert', () => {
-		// Table panels can't seed alerts → the Actions group hides its row. Only the
-		// panel passed to ConfigActions needs the kind; sections are asserted elsewhere.
-		const panel = {
-			kind: 'Panel',
-			spec: { ...spec(), plugin: { kind: 'signoz/TablePanel', spec: {} } },
-		} as DashboardtypesPanelDTO;
-		renderConfigPane({ panel });
-
-		expect(
-			screen.queryByTestId('panel-editor-v2-create-alert'),
-		).not.toBeInTheDocument();
-	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.tsx

@@ -71,8 +71,10 @@ function PreviewPane({
 			<div className={styles.container}>
 				<div className={styles.surface}>
 					<PanelHeader
+						name={panel.spec.display.name}
+						description={panel.spec.display.description}
 						panelId={panelId}
-						panel={panel}
+						panelKind={panel.spec.plugin.kind}
 						isFetching={isFetching}
 						error={error}
 						warning={data.response?.data?.warning}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/index.tsx

@@ -242,8 +242,7 @@ function PanelEditorContainer({
 					className={styles.right}
 				>
 					<ConfigPane
-						panel={draft}
-						panelId={panelId}
+						panelKind={draft.spec.plugin.kind}
 						spec={spec}
 						onChangeSpec={setSpec}
 						onChangePanelKind={onChangePanelKind}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx

@@ -41,6 +41,10 @@ function Panel({
 	isVisible,
 	panelActions,
 }: PanelProps): JSX.Element {
+	const name = panel.spec.display.name;
+	const description = panel.spec.display?.description;
+	const fullKind = panel.spec.plugin.kind;
+
 	// A per-panel time preference is surfaced as a header pill. `visualization` is
 	// common to every plugin-spec variant — localized cast reads it without
 	// narrowing on kind.
@@ -51,8 +55,7 @@ function Panel({
 	)?.visualization?.timePreference;
 	const timeLabel = panelTimePreferenceLabel(timePreference);
 
-	const panelKind = panel.spec.plugin.kind;
-	const panelDefinition = getPanelDefinition(panelKind);
+	const panelDefinition = getPanelDefinition(fullKind);
 
 	// Header search: only kinds that declare it render the box. The term is owned
 	// here and threaded to both the header (input) and renderer (filter).
@@ -74,8 +77,10 @@ function Panel({
 			data-panel-visible={isVisible ? 'true' : 'false'}
 		>
 			<PanelHeader
+				name={name}
+				description={description}
 				panelId={panelId}
-				panel={panel}
+				panelKind={fullKind}
 				isFetching={isFetching}
 				error={error}
 				warning={data.response?.data?.warning}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.tsx

@@ -1,17 +1,17 @@
 import { EllipsisVertical } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 
 import ConfirmDeleteDialog from '../../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
 import type { PanelActionsConfig } from '../Panel';
 import { usePanelActionItems } from './usePanelActionItems';
 import styles from './PanelActionsMenu.module.scss';
+import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 
 interface PanelActionsMenuProps {
 	panelId: string;
-	/** The panel itself — its query seeds "Create Alerts". */
-	panel: DashboardtypesPanelDTO;
+	/** Full plugin kind (e.g. `signoz/TimeSeriesPanel`);*/
+	panelKind: PanelKind;
 	/** Layout context for move/delete — absent outside editable sectioned mode. */
 	panelActions?: PanelActionsConfig;
 }
@@ -23,12 +23,12 @@ interface PanelActionsMenuProps {
  */
 function PanelActionsMenu({
 	panelId,
-	panel,
+	panelKind,
 	panelActions,
 }: PanelActionsMenuProps): JSX.Element | null {
 	const { items, deleteConfirm } = usePanelActionItems({
 		panelId,
-		panel,
+		panelKind,
 		panelActions,
 	});
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/__tests__/usePanelActionItems.test.tsx

@@ -1,10 +1,10 @@
 import { act, renderHook } from '@testing-library/react';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import type { ROLES } from 'types/roles';
 
 import type { DashboardSection } from '../../../../utils';
 import { useDashboardStore } from '../../../../store/useDashboardStore';
 import { usePanelActionItems } from '../usePanelActionItems';
+import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 
 const mockOpenEditor = jest.fn();
 jest.mock(
@@ -29,11 +29,6 @@ jest.mock('../../hooks/useClonePanel', () => ({
 	useClonePanel: (): jest.Mock => mockClonePanel,
 }));
 
-const mockCreateAlert = jest.fn();
-jest.mock('../../hooks/useCreateAlertFromPanel', () => ({
-	useCreateAlertFromPanel: (): jest.Mock => mockCreateAlert,
-}));
-
 // Role is the only thing read off the app context; useComponentPermission runs
 // for real so the tests exercise the actual role → permission mapping.
 let mockRole: ROLES = 'ADMIN';
@@ -60,20 +55,9 @@ const TWO_TITLED_SECTIONS = [section(0, 'Overview'), section(1, 'Latency')];
 // Index 0 is the untitled root (free-flow) section; index 1 is a titled section.
 const TITLED_WITH_ROOT = [section(0, undefined), section(1, 'Latency')];
 
-// Minimal panel — only its presence gates "Create Alerts"; the query→URL
-// translation it drives is covered by buildCreateAlertUrl's own tests.
-const mockPanel = {
-	kind: 'Panel',
-	spec: {
-		display: { name: 'CPU' },
-		plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
-		queries: [],
-	},
-} as unknown as DashboardtypesPanelDTO;
-
 const baseArgs = {
 	panelId: 'panel-1',
-	panel: mockPanel,
+	panelKind: 'signoz/TimeSeriesPanel' as PanelKind,
 	panelActions: { currentLayoutIndex: 0, sections: TWO_TITLED_SECTIONS },
 };
 
@@ -131,18 +115,29 @@ describe('usePanelActionItems', () => {
 		]);
 	});
 
-	it('read-only dashboard keeps View and Create Alerts (V1 parity: both survive a lock)', () => {
+	it('unknown panel kind hides all kind-gated actions (incl. clone), keeping only move/delete', () => {
+		const { result } = renderHook(() =>
+			// A kind with no registered definition — exercises the "unsupported kind"
+			// branch. Clone is kind-gated (needs the kind to declare actions.clone),
+			// so it drops too; only the kind-agnostic layout actions remain.
+			usePanelActionItems({
+				...baseArgs,
+				panelKind: 'signoz/UnsupportedPanel' as PanelKind,
+			}),
+		);
+		expect(itemKeys(result.current)).toStrictEqual([
+			'move',
+			'divider',
+			'delete-panel',
+		]);
+	});
+
+	it('read-only dashboard keeps only View (V1 parity)', () => {
 		useDashboardStore.setState({ isEditable: false });
 		const { result } = renderHook(() =>
 			usePanelActionItems({ ...baseArgs, panelActions: undefined }),
 		);
-		// Create Alerts opens a new tab and never mutates the dashboard, so it
-		// isn't gated on edit access — matching V1's locked-dashboard menu.
-		expect(itemKeys(result.current)).toStrictEqual([
-			'view-panel',
-			'divider',
-			'create-alert',
-		]);
+		expect(itemKeys(result.current)).toStrictEqual(['view-panel']);
 	});
 
 	it('move is disabled when there is no other titled section to move to', () => {
@@ -264,26 +259,18 @@ describe('usePanelActionItems', () => {
 		});
 	});
 
-	it('not-yet-implemented actions (view) fire the placeholder alert with the feature name', () => {
+	it('not-yet-implemented actions (view/create-alert) fire the placeholder alert with the feature name', () => {
 		const alertSpy = jest.spyOn(window, 'alert').mockImplementation(() => {});
 		const { result } = renderHook(() => usePanelActionItems(baseArgs));
 
-		const view = result.current.items.find(
-			(i) => 'key' in i && i.key === 'view-panel',
-		);
-		(view as { onClick: () => void }).onClick();
+		['view-panel', 'create-alert'].forEach((key) => {
+			const item = result.current.items.find((i) => 'key' in i && i.key === key);
+			(item as { onClick: () => void }).onClick();
+		});
 
-		expect(alertSpy).toHaveBeenCalledTimes(1);
+		expect(alertSpy).toHaveBeenCalledTimes(2);
 		expect(alertSpy).toHaveBeenCalledWith('View option clicked');
+		expect(alertSpy).toHaveBeenCalledWith('Create Alerts option clicked');
 		alertSpy.mockRestore();
 	});
-
-	it('create-alert seeds an alert from this panel', () => {
-		const { result } = renderHook(() => usePanelActionItems(baseArgs));
-		const createAlert = result.current.items.find(
-			(i) => 'key' in i && i.key === 'create-alert',
-		);
-		(createAlert as { onClick: () => void }).onClick();
-		expect(mockCreateAlert).toHaveBeenCalledWith(mockPanel, 'panel-1');
-	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/usePanelActionItems.tsx

@@ -10,7 +10,6 @@ import {
 	Trash2,
 } from '@signozhq/icons';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import useComponentPermission from 'hooks/useComponentPermission';
 import {
 	type ConfirmableAction,
@@ -24,13 +23,13 @@ import { useAppContext } from 'providers/App/App';
 import type { DashboardSection } from '../../../utils';
 import type { PanelActionsConfig } from '../Panel';
 import { useClonePanel } from '../hooks/useClonePanel';
-import { useCreateAlertFromPanel } from '../hooks/useCreateAlertFromPanel';
 import { useDeletePanel } from '../hooks/useDeletePanel';
 import {
 	type MovePanelArgs,
 	useMovePanelToSection,
 } from '../hooks/useMovePanelToSection';
 import { PANEL_ACTION_META } from './panelActionMeta';
+import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 
 // Stable fallback so renders without layout context don't churn the mutation
 // hooks' deps (a fresh [] each render would re-create their callbacks).
@@ -104,8 +103,8 @@ function buildMoveItems({
 
 interface UsePanelActionItemsArgs {
 	panelId: string;
-	/** The panel itself — its query seeds the "Create Alerts" action. */
-	panel: DashboardtypesPanelDTO;
+	/** Full plugin kind (e.g. `signoz/TimeSeriesPanel`); */
+	panelKind: PanelKind;
 	/** Layout context for move/delete — absent outside editable mode. */
 	panelActions?: PanelActionsConfig;
 }
@@ -129,10 +128,9 @@ export interface PanelActionItems {
  */
 export function usePanelActionItems({
 	panelId,
-	panel,
+	panelKind,
 	panelActions,
 }: UsePanelActionItemsArgs): PanelActionItems {
-	const panelKind = panel.spec.plugin.kind;
 	const { user } = useAppContext();
 	const [canEditWidget, canMove, canDelete] = useComponentPermission(
 		[
@@ -145,7 +143,6 @@ export function usePanelActionItems({
 	);
 	const isEditable = useDashboardStore((s) => s.isEditable);
 	const openPanelEditor = useOpenPanelEditor();
-	const createAlert = useCreateAlertFromPanel();
 
 	// Mutations are store-backed (dashboardId/refetch) — the layout tree only
 	// supplies data (`sections`), so no callbacks are threaded through it.
@@ -154,7 +151,7 @@ export function usePanelActionItems({
 	const deletePanel = useDeletePanel({ sections });
 	const clonePanel = useClonePanel({ sections });
 
-	const panelCapabilities = getPanelDefinition(panelKind).actions;
+	const kindActions = getPanelDefinition(panelKind)?.actions;
 
 	// Delete runs on confirm, not on click — the menu item opens a prompt.
 	const deleteConfirm = useConfirmableAction(
@@ -173,7 +170,7 @@ export function usePanelActionItems({
 
 	const items = useMemo<MenuItem[]>(() => {
 		const panelGroup: MenuItem[] = [];
-		if (panelCapabilities.view) {
+		if (kindActions?.view) {
 			panelGroup.push({
 				key: 'view-panel',
 				label: 'View',
@@ -181,7 +178,7 @@ export function usePanelActionItems({
 				onClick: (): void => notImplementedYet('View'),
 			});
 		}
-		if (isEditable && canEditWidget && panelCapabilities.edit) {
+		if (isEditable && canEditWidget && kindActions?.edit) {
 			panelGroup.push({
 				key: 'edit-panel',
 				label: 'Edit panel',
@@ -191,7 +188,7 @@ export function usePanelActionItems({
 		}
 		// Clone needs the section context (source spec + dimensions) to place the
 		// copy, so — unlike Edit — it requires panelActions.
-		if (isEditable && canEditWidget && panelActions && panelCapabilities.clone) {
+		if (isEditable && canEditWidget && panelActions && kindActions?.clone) {
 			panelGroup.push({
 				key: 'clone-panel',
 				label: 'Clone',
@@ -205,7 +202,7 @@ export function usePanelActionItems({
 		}
 
 		const dataGroup: MenuItem[] = [];
-		if (panelCapabilities.download) {
+		if (kindActions?.download) {
 			dataGroup.push({
 				key: 'download-panel',
 				label: 'Download as CSV',
@@ -213,15 +210,12 @@ export function usePanelActionItems({
 				onClick: (): void => notImplementedYet('Download'),
 			});
 		}
-		// Seeding an alert opens a new tab and never mutates the dashboard, so —
-		// unlike edit/clone — it isn't gated on `isEditable` (V1 parity: available
-		// on locked dashboards too).
-		if (panelCapabilities.createAlert) {
+		if (isEditable && kindActions?.createAlert) {
 			dataGroup.push({
 				key: 'create-alert',
 				label: 'Create Alerts',
 				icon: <Bell size={14} />,
-				onClick: (): void => createAlert(panel, panelId),
+				onClick: (): void => notImplementedYet('Create Alerts'),
 			});
 		}
 
@@ -258,13 +252,11 @@ export function usePanelActionItems({
 		canEditWidget,
 		canMove,
 		canDelete,
-		panelCapabilities,
-		panel,
+		kindActions,
 		panelActions,
 		sections,
 		panelId,
 		openPanelEditor,
-		createAlert,
 		movePanel,
 		clonePanel,
 		requestDelete,

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader.tsx

@@ -1,10 +1,7 @@
 import { useMemo } from 'react';
 import { Info, Loader } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
-import type {
-	DashboardtypesPanelDTO,
-	Querybuildertypesv5QueryWarnDataDTO as WarningDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import type { Querybuildertypesv5QueryWarnDataDTO as WarningDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import type { PanelTimePreferenceLabel } from 'pages/DashboardPageV2/DashboardContainer/hooks/resolvePanelTimeWindow';
 
@@ -17,12 +14,15 @@ import {
 	panelStatusFromWarning,
 } from '../PanelStatus/utils';
 import styles from './PanelHeader.module.scss';
+import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 
 interface PanelHeaderProps {
+	name: string;
+	description?: string;
 	panelId: string;
-	/** The panel itself — its query seeds the menu's "Create Alerts" action. */
-	panel: DashboardtypesPanelDTO;
+	/** Full plugin kind — drives kind-gated menu actions. */
+	panelKind: PanelKind;
 	/** Background refresh in flight — shows a spinner without blinking the chart. */
 	isFetching: boolean;
 	/** Latest query error — surfaced as a header error indicator. */
@@ -49,8 +49,10 @@ interface PanelHeaderProps {
 
 /** Panel chrome: drag handle, title, refetch + status indicators, actions. */
 function PanelHeader({
+	name,
+	description,
 	panelId,
-	panel,
+	panelKind,
 	isFetching,
 	error,
 	warning,
@@ -61,8 +63,6 @@ function PanelHeader({
 	onSearchChange,
 	hideActions,
 }: PanelHeaderProps): JSX.Element {
-	const name = panel.spec.display.name;
-	const description = panel.spec.display.description;
 	const errorDetail = useMemo(() => panelStatusFromError(error), [error]);
 
 	const warningDetail = useMemo(
@@ -116,7 +116,7 @@ function PanelHeader({
 				{!hideActions && (
 					<PanelActionsMenu
 						panelId={panelId}
-						panel={panel}
+						panelKind={panelKind}
 						panelActions={panelActions}
 					/>
 				)}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/PanelHeader.test.tsx

@@ -1,11 +1,11 @@
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import type { ReactElement } from 'react';
 import type { Warning } from 'types/api';
 
 import PanelHeader from '../PanelHeader/PanelHeader';
+import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 
 // Status indicators use a radix tooltip, which needs a TooltipProvider ancestor
 // (supplied globally by AppLayout at runtime).
@@ -22,26 +22,9 @@ jest.mock(
 		},
 );
 
-// The header reads its name/description/kind off the panel itself.
-function makePanel(overrides?: {
-	name?: string;
-	description?: string;
-}): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: {
-			display: {
-				name: overrides?.name ?? 'My panel',
-				description: overrides?.description,
-			},
-			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
-			queries: [],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
 const baseProps = {
-	panel: makePanel(),
+	name: 'My panel',
+	panelKind: 'signoz/TimeSeriesPanel' as PanelKind,
 	panelId: 'panel-1',
 	isFetching: false,
 };
@@ -61,10 +44,7 @@ describe('PanelHeader title and description', () => {
 
 	it('shows the description info icon when a description is provided', () => {
 		renderWithProvider(
-			<PanelHeader
-				{...baseProps}
-				panel={makePanel({ description: 'What this panel measures' })}
-			/>,
+			<PanelHeader {...baseProps} description="What this panel measures" />,
 		);
 		expect(screen.getByTestId('panel-header-info-icon')).toBeInTheDocument();
 	});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/__tests__/useCreateAlertFromPanel.test.ts

@@ -1,69 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import logEvent from 'api/common/logEvent';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useDashboardStore } from 'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore';
-
-import { useCreateAlertFromPanel } from '../useCreateAlertFromPanel';
-
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-const mockSafeNavigate = jest.fn();
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-// The V5→V1 query→URL translation is covered by buildCreateAlertUrl's own tests;
-// stub it so this asserts only the hook's side effects (analytics + navigation).
-jest.mock('../../utils/buildCreateAlertUrl', () => ({
-	buildCreateAlertUrl: (): string => '/alerts/new?composite=1',
-}));
-
-const mockLogEvent = logEvent as jest.Mock;
-
-const panel = {
-	kind: 'Panel',
-	spec: {
-		display: { name: 'CPU' },
-		plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
-		queries: [],
-	},
-} as unknown as DashboardtypesPanelDTO;
-
-describe('useCreateAlertFromPanel', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		useDashboardStore.setState({ dashboardId: 'dash-1' });
-	});
-
-	it('opens the seeded alert builder in a new tab', () => {
-		const { result } = renderHook(() => useCreateAlertFromPanel());
-
-		result.current(panel, 'panel-1');
-
-		expect(mockSafeNavigate).toHaveBeenCalledWith('/alerts/new?composite=1', {
-			newTab: true,
-		});
-	});
-
-	it('logs the create-alert action with panel and dashboard context (V1 parity)', () => {
-		const { result } = renderHook(() => useCreateAlertFromPanel());
-
-		result.current(panel, 'panel-1');
-
-		expect(mockLogEvent).toHaveBeenCalledWith(
-			'Dashboard Detail: Panel action',
-			expect.objectContaining({
-				action: 'createAlerts',
-				panelType: PANEL_TYPES.TIME_SERIES,
-				dashboardId: 'dash-1',
-				widgetId: 'panel-1',
-			}),
-		);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel.ts

@@ -1,37 +0,0 @@
-import { useCallback } from 'react';
-import logEvent from 'api/common/logEvent';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
-import { getPanelQueryType } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelQueryType';
-import { useDashboardStore } from 'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore';
-
-import { buildCreateAlertUrl } from '../utils/buildCreateAlertUrl';
-
-/**
- * Returns a callback that opens the alert builder in a new tab, seeded from a
- * panel's query, and logs the action — mirroring V1's `useCreateAlerts`
- * ('dashboardView' caller). The panel is supplied at call time so the callback
- * stays stable across panels (and the dashboard's react-query refetches).
- */
-export function useCreateAlertFromPanel(): (
-	panel: DashboardtypesPanelDTO,
-	panelId: string,
-) => void {
-	const { safeNavigate } = useSafeNavigate();
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-
-	return useCallback(
-		(panel: DashboardtypesPanelDTO, panelId: string): void => {
-			void logEvent('Dashboard Detail: Panel action', {
-				action: 'createAlerts',
-				panelType: PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind],
-				dashboardId,
-				widgetId: panelId,
-				queryType: getPanelQueryType(panel),
-			});
-			safeNavigate(buildCreateAlertUrl(panel), { newTab: true });
-		},
-		[dashboardId, safeNavigate],
-	);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/utils/__tests__/buildCreateAlertUrl.test.ts

@@ -1,103 +0,0 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { fromPerses } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
-import type { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-
-import { buildCreateAlertUrl } from '../buildCreateAlertUrl';
-
-// The V5→V1 translation has its own coverage; stub it so this asserts only the
-// URL assembly (params, encoding, unit) buildCreateAlertUrl owns.
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters',
-	() => ({
-		fromPerses: jest.fn(),
-	}),
-);
-
-const mockFromPerses = fromPerses as jest.Mock;
-
-const translatedQuery: Query = {
-	queryType: EQueryType.QUERY_BUILDER,
-	promql: [],
-	clickhouse_sql: [],
-	builder: { queryData: [], queryFormulas: [], queryTraceOperator: [] },
-	id: 'q1',
-};
-
-function makePanel(
-	overrides?: Partial<{ unit: string; queries: unknown[] }>,
-): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: {
-			display: { name: 'CPU' },
-			plugin: {
-				kind: 'signoz/TimeSeriesPanel',
-				spec: overrides?.unit ? { formatting: { unit: overrides.unit } } : {},
-			},
-			queries: overrides?.queries ?? [{ some: 'query' }],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-describe('buildCreateAlertUrl', () => {
-	beforeEach(() => {
-		mockFromPerses.mockReset();
-		mockFromPerses.mockReturnValue({ ...translatedQuery });
-	});
-
-	function parse(url: string): URLSearchParams {
-		expect(url.startsWith(`${ROUTES.ALERTS_NEW}?`)).toBe(true);
-		return new URLSearchParams(url.slice(url.indexOf('?') + 1));
-	}
-
-	it('translates the panel queries with the mapped panel type', () => {
-		const panel = makePanel();
-		buildCreateAlertUrl(panel);
-
-		expect(mockFromPerses).toHaveBeenCalledWith(
-			panel.spec.queries,
-			PANEL_TYPES.TIME_SERIES,
-		);
-	});
-
-	it('tags the URL with panel type, v5 version, and the dashboards source', () => {
-		const params = parse(buildCreateAlertUrl(makePanel()));
-
-		expect(params.get(QueryParams.panelTypes)).toBe(PANEL_TYPES.TIME_SERIES);
-		expect(params.get(QueryParams.version)).toBe(ENTITY_VERSION_V5);
-		expect(params.get(QueryParams.source)).toBe('dashboards');
-	});
-
-	it('encodes the translated query as the compositeQuery param', () => {
-		const params = parse(buildCreateAlertUrl(makePanel()));
-
-		const raw = params.get(QueryParams.compositeQuery);
-		expect(raw).toBeTruthy();
-		const decoded = JSON.parse(decodeURIComponent(raw as string));
-		expect(decoded.queryType).toBe(EQueryType.QUERY_BUILDER);
-		expect(decoded.id).toBe('q1');
-	});
-
-	it('carries the panel formatting unit onto the alert query when set', () => {
-		const params = parse(buildCreateAlertUrl(makePanel({ unit: 'bytes' })));
-
-		const decoded = JSON.parse(
-			decodeURIComponent(params.get(QueryParams.compositeQuery) as string),
-		);
-		expect(decoded.unit).toBe('bytes');
-	});
-
-	it('leaves the query unit unset when the panel has no formatting unit', () => {
-		const params = parse(buildCreateAlertUrl(makePanel()));
-
-		const decoded = JSON.parse(
-			decodeURIComponent(params.get(QueryParams.compositeQuery) as string),
-		);
-		expect(decoded.unit).toBeUndefined();
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/utils/buildCreateAlertUrl.ts

@@ -1,54 +0,0 @@
-import type {
-	DashboardtypesPanelDTO,
-	DashboardtypesPanelPluginDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { YAxisSource } from 'components/YAxisUnitSelector/types';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
-import { fromPerses } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
-
-function readPanelUnit(
-	plugin: DashboardtypesPanelPluginDTO,
-): string | undefined {
-	switch (plugin.kind) {
-		case 'signoz/TimeSeriesPanel':
-		case 'signoz/BarChartPanel':
-		case 'signoz/NumberPanel':
-		case 'signoz/PieChartPanel':
-			return plugin.spec.formatting?.unit;
-		default:
-			return undefined;
-	}
-}
-
-/**
- * Builds the `/alerts/new` URL that seeds the alert builder from a panel's query,
- * mirroring V1's `useCreateAlerts`: the panel's V5 queries are translated to the
- * V1 `Query` the alert page reads from `compositeQuery`, tagged with the panel
- * type, entity version, and a `dashboards` source.
- *
- * Unlike V1 there is no `/substitute_vars` round-trip — V2 has no query-variable
- * plumbing yet, so any dashboard-variable references travel through verbatim.
- */
-export function buildCreateAlertUrl(panel: DashboardtypesPanelDTO): string {
-	const panelType = PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind];
-	const query = fromPerses(panel.spec.queries, panelType);
-
-	const unit = readPanelUnit(panel.spec.plugin);
-	if (unit) {
-		query.unit = unit;
-	}
-
-	const params = new URLSearchParams();
-	params.set(
-		QueryParams.compositeQuery,
-		encodeURIComponent(JSON.stringify(query)),
-	);
-	params.set(QueryParams.panelTypes, panelType);
-	params.set(QueryParams.version, ENTITY_VERSION_V5);
-	params.set(QueryParams.source, YAxisSource.DASHBOARDS);
-
-	return `${ROUTES.ALERTS_NEW}?${params.toString()}`;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/__tests__/useResolvedVariables.test.tsx

@@ -1,67 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import type {
-	DashboardtypesGettableDashboardV2DTO,
-	DashboardtypesVariableDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { selectResolvedVariables } from '../../store/slices/variableSelectionSlice';
-import { useDashboardStore } from '../../store/useDashboardStore';
-import { useResolvedVariables } from '../useResolvedVariables';
-
-// A text variable is the simplest envelope (no list plugin); the builder's full
-// type/value matrix is covered in buildVariablesPayload.test.ts. The envelope is
-// cast at the boundary — its kind discriminant is the literal 'TextVariable'.
-function textVariable(name: string, value: string): DashboardtypesVariableDTO {
-	return {
-		kind: 'TextVariable',
-		spec: { name, value, display: { name } },
-	} as unknown as DashboardtypesVariableDTO;
-}
-
-function dashboard(
-	id: string,
-	variables: DashboardtypesVariableDTO[],
-): DashboardtypesGettableDashboardV2DTO {
-	return {
-		id,
-		spec: { variables },
-	} as unknown as DashboardtypesGettableDashboardV2DTO;
-}
-
-describe('useResolvedVariables', () => {
-	afterEach(() => {
-		useDashboardStore.setState({ variableValues: {}, resolvedVariables: {} });
-	});
-
-	it('publishes the resolved V5 payload for the dashboard to the store', () => {
-		renderHook(() =>
-			useResolvedVariables(dashboard('d1', [textVariable('env', 'prod')])),
-		);
-
-		expect(
-			selectResolvedVariables('d1')(useDashboardStore.getState()),
-		).toStrictEqual({ env: { type: 'text', value: 'prod' } });
-	});
-
-	it('reflects the runtime selection over the configured default', () => {
-		useDashboardStore
-			.getState()
-			.setVariableValues('d2', { env: { value: 'staging', allSelected: false } });
-
-		renderHook(() =>
-			useResolvedVariables(dashboard('d2', [textVariable('env', 'prod')])),
-		);
-
-		expect(
-			selectResolvedVariables('d2')(useDashboardStore.getState()),
-		).toStrictEqual({ env: { type: 'text', value: 'staging' } });
-	});
-
-	it('publishes an empty payload when the dashboard has no variables', () => {
-		renderHook(() => useResolvedVariables(dashboard('d3', [])));
-
-		expect(
-			selectResolvedVariables('d3')(useDashboardStore.getState()),
-		).toStrictEqual({});
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery.ts

@@ -17,8 +17,6 @@ import type { PanelPagination, PanelQueryData } from '../queryV5/types';
 import { getRawResults } from '../queryV5/v5ResponseData';
 import { getBuilderQueries } from '../Panels/utils/getBuilderQueries';
 import { PANEL_KIND_TO_PANEL_TYPE } from '../Panels/types/panelKind';
-import { selectResolvedVariables } from '../store/slices/variableSelectionSlice';
-import { useDashboardStore } from '../store/useDashboardStore';
 import { resolvePanelTimeWindow } from './resolvePanelTimeWindow';
 import { useGetQueryRangeV5 } from './useGetQueryRangeV5';
 
@@ -67,9 +65,8 @@ export interface UsePanelQueryResult {
 /**
  * Fetches query-range data for a V2 panel over the pure-V5 contract: builds the request DTO
  * from the panel's perses queries (no V1 `Query` intermediary), reads global time from Redux,
- * substitutes the dashboard's resolved variable values (published to the store by
- * `useResolvedVariables`), and posts via `useGetQueryRangeV5`. Renderers consume the raw
- * response through the `queryV5` prep utils.
+ * and posts via `useGetQueryRangeV5`. Variable substitution is deferred until V2 has its own
+ * variable plumbing. Renderers consume the raw response through the `queryV5` prep utils.
  */
 export function usePanelQuery({
 	panel,
@@ -108,11 +105,6 @@ export function usePanelQuery({
 		minTime,
 	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
 
-	// Resolved variable values for this dashboard, published by useResolvedVariables.
-	// Substituted into the request and keyed into the cache so a selection change refetches.
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const variables = useDashboardStore(selectResolvedVariables(dashboardId));
-
 	// `visualization` exists only on variants that declare it — read via `in` narrowing over the
 	// generated union (no cast). `fillSpans` (TimeSeries/Bar only) → formatOptions.fillGaps.
 	const pluginSpec = panel.spec.plugin.spec;
@@ -149,19 +141,8 @@ export function usePanelQuery({
 				endMs,
 				fillGaps,
 				pagination: isPaginated ? { offset, limit: pageSize } : undefined,
-				variables,
 			}),
-		[
-			queries,
-			panelType,
-			startMs,
-			endMs,
-			fillGaps,
-			isPaginated,
-			offset,
-			pageSize,
-			variables,
-		],
+		[queries, panelType, startMs, endMs, fillGaps, isPaginated, offset, pageSize],
 	);
 
 	const legendMap = useMemo(() => extractLegendMap(queries), [queries]);
@@ -186,8 +167,6 @@ export function usePanelQuery({
 			// Each page is its own cache entry (0/default for non-paged kinds).
 			offset,
 			pageSize,
-			// Variable selection changes the request, so it must re-key the cache (refetch).
-			variables,
 		],
 		[
 			panelId,
@@ -203,7 +182,6 @@ export function usePanelQuery({
 			queries,
 			offset,
 			pageSize,
-			variables,
 		],
 	);
 

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useResolvedVariables.ts

@@ -1,42 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import { dtoToFormModel } from '../DashboardSettings/Variables/variableAdapters';
-import { buildVariablesPayload } from '../queryV5/buildVariablesPayload';
-import { selectVariableValues } from '../store/slices/variableSelectionSlice';
-import { useDashboardStore } from '../store/useDashboardStore';
-
-/**
- * Resolves the dashboard's variable selection into the V5 query payload and
- * publishes it to the store, so `usePanelQuery` reads it by dashboardId without
- * the spec being threaded through the panel tree (the `setEditContext` pattern).
- *
- * Definitions come from the spec; values come from the runtime selection (seeded
- * by the variable bar). Re-publishes whenever either changes, which re-keys the
- * panel queries and triggers a refetch with the new values.
- */
-export function useResolvedVariables(
-	dashboard: DashboardtypesGettableDashboardV2DTO,
-): void {
-	const dashboardId = dashboard.id ?? '';
-
-	const definitions = useMemo(
-		() => (dashboard.spec?.variables ?? []).map(dtoToFormModel),
-		[dashboard.spec?.variables],
-	);
-
-	const selection = useDashboardStore(selectVariableValues(dashboardId));
-	const setResolvedVariables = useDashboardStore((s) => s.setResolvedVariables);
-
-	const resolved = useMemo(
-		() => buildVariablesPayload(definitions, selection),
-		[definitions, selection],
-	);
-
-	useEffect(() => {
-		if (!dashboardId) {
-			return;
-		}
-		setResolvedVariables(dashboardId, resolved);
-	}, [dashboardId, resolved, setResolvedVariables]);
-}

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

@@ -7,7 +7,6 @@ import { useAppContext } from 'providers/App/App';
 
 import DashboardPageToolbar from './DashboardPageToolbar';
 import PanelsAndSectionsLayout from './PanelsAndSectionsLayout';
-import { useResolvedVariables } from './hooks/useResolvedVariables';
 import { useDashboardStore } from './store/useDashboardStore';
 import styles from './DashboardContainer.module.scss';
 import DashboardPageHeader from './components/DashboardPageHeader/DashboardPageHeader';
@@ -51,10 +50,6 @@ function DashboardContainer({
 		setEditContext,
 	]);
 
-	// Resolve the variable selection into the V5 query payload and publish it to
-	// the store, so each panel's query substitutes the bar's selected values.
-	useResolvedVariables(dashboard);
-
 	const spec = dashboard.spec;
 	const image = dashboard.image || Base64Icons[0];
 	const name = spec.display.name;

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/__tests__/buildVariablesPayload.test.ts

@@ -1,103 +0,0 @@
-import {
-	emptyVariableFormModel,
-	type VariableFormModel,
-	type VariableType,
-} from '../../DashboardSettings/Variables/variableFormModel';
-import type { VariableSelectionMap } from '../../VariablesBar/selectionTypes';
-import { buildVariablesPayload } from '../buildVariablesPayload';
-
-function variable(
-	name: string,
-	type: VariableType,
-	overrides: Partial<VariableFormModel> = {},
-): VariableFormModel {
-	return { ...emptyVariableFormModel(), name, type, ...overrides };
-}
-
-describe('buildVariablesPayload', () => {
-	it('returns an empty map when there are no definitions', () => {
-		expect(buildVariablesPayload([], {})).toStrictEqual({});
-	});
-
-	it('maps each UI variable type to its V5 wire type', () => {
-		const definitions = [
-			variable('q', 'QUERY'),
-			variable('c', 'CUSTOM'),
-			variable('t', 'TEXT'),
-			variable('d', 'DYNAMIC'),
-		];
-		const selection: VariableSelectionMap = {
-			q: { value: 'a', allSelected: false },
-			c: { value: 'b', allSelected: false },
-			t: { value: 'c', allSelected: false },
-			d: { value: 'e', allSelected: false },
-		};
-		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({
-			q: { type: 'query', value: 'a' },
-			c: { type: 'custom', value: 'b' },
-			t: { type: 'text', value: 'c' },
-			d: { type: 'dynamic', value: 'e' },
-		});
-	});
-
-	it('passes a multi-select array value through verbatim', () => {
-		const definitions = [variable('svc', 'QUERY', { multiSelect: true })];
-		const selection: VariableSelectionMap = {
-			svc: { value: ['a', 'b'], allSelected: false },
-		};
-		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({
-			svc: { type: 'query', value: ['a', 'b'] },
-		});
-	});
-
-	it('collapses a multi-select dynamic ALL selection to the __all__ sentinel', () => {
-		const definitions = [variable('pod', 'DYNAMIC', { multiSelect: true })];
-		const selection: VariableSelectionMap = {
-			pod: { value: null, allSelected: true },
-		};
-		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({
-			pod: { type: 'dynamic', value: '__all__' },
-		});
-	});
-
-	it('does NOT collapse a query ALL selection — it sends the full value array', () => {
-		const definitions = [variable('svc', 'QUERY', { multiSelect: true })];
-		const selection: VariableSelectionMap = {
-			svc: { value: ['a', 'b'], allSelected: true },
-		};
-		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({
-			svc: { type: 'query', value: ['a', 'b'] },
-		});
-	});
-
-	it('falls back to a text variable configured value when unselected', () => {
-		const definitions = [variable('env', 'TEXT', { textValue: 'prod' })];
-		expect(buildVariablesPayload(definitions, {})).toStrictEqual({
-			env: { type: 'text', value: 'prod' },
-		});
-	});
-
-	it('falls back to a list variable configured default when unselected', () => {
-		const definitions = [
-			variable('region', 'QUERY', {
-				defaultValue: { value: 'us-east' },
-			} as unknown as Partial<VariableFormModel>),
-		];
-		expect(buildVariablesPayload(definitions, {})).toStrictEqual({
-			region: { type: 'query', value: 'us-east' },
-		});
-	});
-
-	it('omits a variable with no selection and no default', () => {
-		const definitions = [variable('q', 'QUERY')];
-		expect(buildVariablesPayload(definitions, {})).toStrictEqual({});
-	});
-
-	it('omits an unnamed variable', () => {
-		const definitions = [variable('', 'QUERY')];
-		const selection: VariableSelectionMap = {
-			'': { value: 'x', allSelected: false },
-		};
-		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({});
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/buildQueryRangeRequest.ts

@@ -6,7 +6,6 @@ import type {
 	Querybuildertypesv5PromQueryDTO,
 	Querybuildertypesv5QueryEnvelopeDTO,
 	Querybuildertypesv5QueryRangeRequestDTO,
-	Querybuildertypesv5QueryRangeRequestDTOVariables,
 } from 'api/generated/services/sigNoz.schemas';
 import {
 	Querybuildertypesv5QueryEnvelopeBuilderDTOType,
@@ -203,13 +202,11 @@ export interface BuildQueryRangeRequestArgs {
 	fillGaps?: boolean;
 	/** Server-side paging for raw/list panels, written onto the builder queries' `offset`/`limit`. */
 	pagination?: { offset: number; limit: number };
-	/** Runtime variable values (name → {type,value}) substituted server-side; built by `buildVariablesPayload`. */
-	variables?: Querybuildertypesv5QueryRangeRequestDTOVariables;
 }
 
 /**
  * Builds the V5 query-range request DTO directly from the panel's perses queries (no V1 `Query`
- * intermediary). `variables` carries the runtime selection (empty when the dashboard has none).
+ * intermediary). Variables are absent (`variables: {}`) until V2 grows its own variable plumbing.
  */
 export function buildQueryRangeRequest({
 	queries,
@@ -218,7 +215,6 @@ export function buildQueryRangeRequest({
 	endMs,
 	fillGaps = false,
 	pagination,
-	variables = {},
 }: BuildQueryRangeRequestArgs): Querybuildertypesv5QueryRangeRequestDTO {
 	let envelopes = toQueryEnvelopes(queries);
 	if (panelType === PANEL_TYPES.BAR) {
@@ -238,7 +234,7 @@ export function buildQueryRangeRequest({
 			formatTableResultForUI: panelType === PANEL_TYPES.TABLE,
 			fillGaps,
 		},
-		variables,
+		variables: {},
 	};
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/buildVariablesPayload.ts

@@ -1,105 +0,0 @@
-import type {
-	Querybuildertypesv5QueryRangeRequestDTOVariables,
-	Querybuildertypesv5VariableItemDTOValue,
-} from 'api/generated/services/sigNoz.schemas';
-import { Querybuildertypesv5VariableTypeDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type {
-	VariableFormModel,
-	VariableType,
-} from '../DashboardSettings/Variables/variableFormModel';
-import type {
-	SelectedVariableValue,
-	VariableSelection,
-	VariableSelectionMap,
-} from '../VariablesBar/selectionTypes';
-
-/**
- * Backend sentinel for "every value selected" on a multi-select dynamic variable.
- * V1 parity (`getDashboardVariables`): only dynamic vars collapse to `__all__`;
- * query/custom multi-selects send the full value array instead. Lowercase — the
- * URL/store `__ALL__` sentinel is a separate serialization concern.
- */
-const ALL_VALUES_SENTINEL = '__all__';
-
-/** UI variable grouping → the V5 wire `variables[].type`. */
-const VARIABLE_TYPE_TO_DTO: Record<
-	VariableType,
-	Querybuildertypesv5VariableTypeDTO
-> = {
-	QUERY: Querybuildertypesv5VariableTypeDTO.query,
-	CUSTOM: Querybuildertypesv5VariableTypeDTO.custom,
-	TEXT: Querybuildertypesv5VariableTypeDTO.text,
-	DYNAMIC: Querybuildertypesv5VariableTypeDTO.dynamic,
-};
-
-/** The variable's configured default, used when nothing is selected yet. */
-function configuredDefault(
-	definition: VariableFormModel,
-): SelectedVariableValue | undefined {
-	if (definition.type === 'TEXT') {
-		return definition.textValue || undefined;
-	}
-	return (
-		definition.defaultValue as { value?: SelectedVariableValue } | undefined
-	)?.value;
-}
-
-/**
- * Resolves the wire value for one variable: the dynamic "ALL" sentinel, else the
- * user's selection, else the configured default. Returns `undefined` when there
- * is nothing meaningful to send (the variable is then omitted from the payload).
- */
-function resolveValue(
-	definition: VariableFormModel,
-	selection: VariableSelection | undefined,
-): Querybuildertypesv5VariableItemDTOValue | undefined {
-	if (
-		definition.type === 'DYNAMIC' &&
-		definition.multiSelect &&
-		selection?.allSelected
-	) {
-		return ALL_VALUES_SENTINEL;
-	}
-
-	const selected = selection?.value;
-	const hasSelection =
-		selected !== null &&
-		selected !== undefined &&
-		!(typeof selected === 'string' && selected === '');
-	if (hasSelection) {
-		return selected as Querybuildertypesv5VariableItemDTOValue;
-	}
-
-	const fallback = configuredDefault(definition);
-	return fallback == null
-		? undefined
-		: (fallback as Querybuildertypesv5VariableItemDTOValue);
-}
-
-/**
- * Builds the V5 `variables` map from the dashboard's variable definitions and the
- * runtime selection, so a panel query substitutes the values the user picked in
- * the variable bar (V1 parity with `getDashboardVariables` + the V5 prep). The
- * definition list supplies the wire `type` (the selection map carries only values).
- */
-export function buildVariablesPayload(
-	definitions: VariableFormModel[],
-	selection: VariableSelectionMap,
-): Querybuildertypesv5QueryRangeRequestDTOVariables {
-	const payload: Querybuildertypesv5QueryRangeRequestDTOVariables = {};
-	definitions.forEach((definition) => {
-		if (!definition.name) {
-			return;
-		}
-		const value = resolveValue(definition, selection[definition.name]);
-		if (value === undefined) {
-			return;
-		}
-		payload[definition.name] = {
-			type: VARIABLE_TYPE_TO_DTO[definition.type],
-			value,
-		};
-	});
-	return payload;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/variableSelectionSlice.ts

@@ -1,4 +1,3 @@
-import type { Querybuildertypesv5QueryRangeRequestDTOVariables } from 'api/generated/services/sigNoz.schemas';
 import type { StateCreator } from 'zustand';
 
 import type {
@@ -13,19 +12,9 @@ import type { DashboardStore } from '../useDashboardStore';
  * localStorage (mirrored to the URL by the bar for shareable links); it is
  * deliberately NOT part of the dashboard spec, so selecting a value never
  * patches the dashboard.
- *
- * `resolvedVariables` is the same selection resolved into the V5 query payload
- * shape (`{ name: { type, value } }`), published by `useResolvedVariables` so
- * `usePanelQuery` reads it without threading the dashboard spec down the tree
- * (the edit-context publish pattern). Transient — not persisted (it is derived
- * from `variableValues` + the spec on every load).
  */
 export interface VariableSelectionSlice {
 	variableValues: Record<string, VariableSelectionMap>;
-	resolvedVariables: Record<
-		string,
-		Querybuildertypesv5QueryRangeRequestDTOVariables
-	>;
 	setVariableValue: (
 		dashboardId: string,
 		name: string,
@@ -33,11 +22,6 @@ export interface VariableSelectionSlice {
 	) => void;
 	/** Bulk set (used to seed from URL/localStorage/defaults on load). */
 	setVariableValues: (dashboardId: string, values: VariableSelectionMap) => void;
-	/** Publish the resolved V5 variables payload for a dashboard. */
-	setResolvedVariables: (
-		dashboardId: string,
-		variables: Querybuildertypesv5QueryRangeRequestDTOVariables,
-	) => void;
 }
 
 export const createVariableSelectionSlice: StateCreator<
@@ -47,7 +31,6 @@ export const createVariableSelectionSlice: StateCreator<
 	VariableSelectionSlice
 > = (set, get) => ({
 	variableValues: {},
-	resolvedVariables: {},
 	setVariableValue: (dashboardId, name, selection): void => {
 		const { variableValues } = get();
 		set({
@@ -63,12 +46,6 @@ export const createVariableSelectionSlice: StateCreator<
 			variableValues: { ...variableValues, [dashboardId]: values },
 		});
 	},
-	setResolvedVariables: (dashboardId, variables): void => {
-		const { resolvedVariables } = get();
-		set({
-			resolvedVariables: { ...resolvedVariables, [dashboardId]: variables },
-		});
-	},
 });
 
 /**
@@ -83,13 +60,3 @@ export const selectVariableValues =
 	(dashboardId: string) =>
 	(state: DashboardStore): VariableSelectionMap =>
 		state.variableValues[dashboardId] ?? EMPTY_SELECTION_MAP;
-
-/** Stable empty payload — same rationale as {@link EMPTY_SELECTION_MAP}. */
-const EMPTY_RESOLVED_VARIABLES: Querybuildertypesv5QueryRangeRequestDTOVariables =
-	{};
-
-/** Selector: the resolved V5 variables payload for a dashboard (empty if none). */
-export const selectResolvedVariables =
-	(dashboardId: string) =>
-	(state: DashboardStore): Querybuildertypesv5QueryRangeRequestDTOVariables =>
-		state.resolvedVariables[dashboardId] ?? EMPTY_RESOLVED_VARIABLES;

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -138,14 +138,33 @@ func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind,
 	return nil
 }
 
-// validateLayouts rejects grid items referencing a panel that doesn't exist.
+const maxLayoutsPerDashboard = 500
+
+// validateLayouts validates the dashboard's layouts: bounded section count,
+// per-item geometry, resolvable panel references, and no panel placed twice.
+// Geometry (validateGridLayoutGeometry) needs only each layout's own data but
+// runs here so its errors can name the layout by index.
 func (d *DashboardSpec) validateLayouts() error {
+	if len(d.Layouts) > maxLayoutsPerDashboard {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts: dashboard has %d layouts; maximum is %d", len(d.Layouts), maxLayoutsPerDashboard)
+	}
+
+	// Could enforce this but skipping for now: panels in no grid item (orphans)
+	// are allowed.
+
+	// The frontend keys each grid item by its panel id, so placing one panel in
+	// two grid items collides; reject duplicate references dashboard-wide. Maps
+	// each referenced panel key to the path of the item that first placed it.
+	referencedPanels := make(map[string]string, len(d.Panels))
 	for li, layout := range d.Layouts {
 		grid, ok := layout.Spec.(*dashboard.GridLayoutSpec)
 		if !ok {
 			// Unreachable via UnmarshalJSON; reaching here means a Go caller broke the Kind/Spec pairing.
 			return errors.NewInternalf(errors.CodeInternal, "spec.layouts[%d].spec: unexpected layout spec type %T", li, layout.Spec)
 		}
+		if err := validateGridLayoutGeometry(grid, li); err != nil {
+			return err
+		}
 		for ii, item := range grid.Items {
 			path := fmt.Sprintf("spec.layouts[%d].spec.items[%d].content", li, ii)
 			if item.Content == nil {
@@ -158,6 +177,10 @@ func (d *DashboardSpec) validateLayouts() error {
 			if _, ok := d.Panels[key]; !ok {
 				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: references unknown panel %q", path, key)
 			}
+			if firstPath, dup := referencedPanels[key]; dup {
+				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: panel %q is already placed by %s", path, key, firstPath)
+			}
+			referencedPanels[key] = path
 		}
 	}
 	return nil

pkg/types/dashboardtypes/perses_dashboard_patch_test.go

@@ -299,19 +299,22 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 	// Layout edits
 	// ─────────────────────────────────────────────────────────────────
 
-	t.Run("move panel by editing layout x coordinate", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/x", "value": 6}]`).Apply(base)
+	t.Run("move panel by editing layout y coordinate", func(t *testing.T) {
+		// p2 fills the right half of row 0, so p1 can only move to a fresh row
+		// without tripping overlap validation.
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/y", "value": 6}]`).Apply(base)
 		require.NoError(t, err)
 		raw := jsonOf(t, out)
-		// The first item used to live at x=0, now lives at x=6.
-		assert.Contains(t, raw, `"x":6,"y":0,"width":6,"height":6,"content":{"$ref":"#/spec/panels/p1"}`)
+		// The first item used to live at y=0, now lives at y=6.
+		assert.Contains(t, raw, `"x":0,"y":6,"width":6,"height":6,"content":{"$ref":"#/spec/panels/p1"}`)
 	})
 
 	t.Run("resize panel by editing layout width", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/width", "value": 12}]`).Apply(base)
+		// p2 sits at x=6, so p1 (at x=0) can only shrink; widening it would overlap.
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/width", "value": 3}]`).Apply(base)
 		require.NoError(t, err)
 		raw := jsonOf(t, out)
-		assert.Contains(t, raw, `"width":12`)
+		assert.Contains(t, raw, `"width":3`)
 	})
 
 	t.Run("rename layout row title", func(t *testing.T) {
@@ -321,11 +324,12 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 	})
 
 	t.Run("append layout item", func(t *testing.T) {
-		out, err := decode(t, `[{
-			"op": "add",
-			"path": "/spec/layouts/0/spec/items/-",
-			"value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}
-		}]`).Apply(base)
+		// Appending needs a not-yet-placed panel, so add one in the same patch;
+		// re-placing p1 or p2 would be a duplicate reference.
+		out, err := decode(t, `[
+			{"op": "add", "path": "/spec/panels/p3", "value": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}}},
+			{"op": "add", "path": "/spec/layouts/0/spec/items/-", "value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p3"}}}
+		]`).Apply(base)
 		require.NoError(t, err)
 		// Item count went 2 → 3.
 		raw := jsonOf(t, out)

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -8,6 +8,7 @@ import (
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/perses/spec/go/dashboard"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 	"k8s.io/apimachinery/pkg/util/validation"
@@ -1442,3 +1443,123 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 		})
 	}
 }
+
+func TestValidateGridGeometry(t *testing.T) {
+	tests := []struct {
+		scenario         string
+		items            []dashboard.GridItem
+		expectErrContain string
+	}{
+		{
+			scenario:         "valid side-by-side items",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 6}, {X: 6, Y: 0, Width: 6, Height: 6}},
+			expectErrContain: "",
+		},
+		{
+			scenario:         "valid full-width item",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 12, Height: 6}},
+			expectErrContain: "",
+		},
+		{
+			scenario:         "stacked items do not overlap",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 6}, {X: 0, Y: 6, Width: 6, Height: 6}},
+			expectErrContain: "",
+		},
+		{
+			scenario:         "zero width",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 0, Height: 6}},
+			expectErrContain: "width must be at least 1",
+		},
+		{
+			scenario:         "zero height",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 0}},
+			expectErrContain: "height must be at least 1",
+		},
+		{
+			scenario:         "negative x",
+			items:            []dashboard.GridItem{{X: -1, Y: 0, Width: 6, Height: 6}},
+			expectErrContain: "x must not be negative",
+		},
+		{
+			scenario:         "negative y",
+			items:            []dashboard.GridItem{{X: 0, Y: -1, Width: 6, Height: 6}},
+			expectErrContain: "y must not be negative",
+		},
+		{
+			scenario:         "width wider than grid",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 13, Height: 6}},
+			expectErrContain: "width (13) exceeds grid width 12",
+		},
+		{
+			scenario:         "x at grid width",
+			items:            []dashboard.GridItem{{X: 12, Y: 0, Width: 1, Height: 6}},
+			expectErrContain: "x (12) must be less than grid width 12",
+		},
+		{
+			scenario:         "x plus width overflows grid",
+			items:            []dashboard.GridItem{{X: 8, Y: 0, Width: 6, Height: 6}},
+			expectErrContain: "x (8) + width (6) exceeds grid width 12",
+		},
+		{
+			scenario:         "overlapping items",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 6}, {X: 3, Y: 3, Width: 6, Height: 6}},
+			expectErrContain: "items[0] and items[1] overlap",
+		},
+	}
+	for _, test := range tests {
+		t.Run(test.scenario, func(t *testing.T) {
+			err := validateGridLayoutGeometry(&dashboard.GridLayoutSpec{Items: test.items}, 0)
+			if test.expectErrContain == "" {
+				require.NoError(t, err)
+				return
+			}
+			require.Error(t, err)
+			require.Contains(t, err.Error(), test.expectErrContain)
+		})
+	}
+}
+
+func TestValidateGridItemLimit(t *testing.T) {
+	err := validateGridLayoutGeometry(&dashboard.GridLayoutSpec{Items: make([]dashboard.GridItem, maxItemsPerGridLayout+1)}, 0)
+	require.Error(t, err)
+	require.Contains(t, err.Error(), "maximum is")
+}
+
+// Both panel refs are valid, so this errors only if geometry validation runs on
+// the unmarshal path — it does, via DashboardSpec.Validate -> validateLayouts.
+func TestInvalidateLayoutOverlapViaUnmarshal(t *testing.T) {
+	data := []byte(`{
+		"panels": {
+			"p1": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}},
+			"p2": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}}
+		},
+		"layouts": [{"kind": "Grid", "spec": {"items": [
+			{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+			{"x": 3, "y": 3, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p2"}}
+		]}}]
+	}`)
+	_, err := unmarshalDashboard(data)
+	require.Error(t, err)
+	require.Contains(t, err.Error(), "overlap")
+}
+
+// The frontend keys each grid item by its panel id, so the same panel placed by
+// two grid items crashes the section; the backend rejects it dashboard-wide. The
+// two items are side by side so they clear the overlap check first.
+func TestInvalidateDuplicatePanelReference(t *testing.T) {
+	data := []byte(`{
+		"panels": {
+			"p1": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}}
+		},
+		"layouts": [{"kind": "Grid", "spec": {"items": [
+			{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+			{"x": 6, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}
+		]}}]
+	}`)
+	_, err := unmarshalDashboard(data)
+	require.Error(t, err)
+	require.Contains(t, err.Error(), "already placed")
+	// Both offending grid items are named.
+	require.Contains(t, err.Error(), "spec.layouts[0].spec.items[0].content")
+	require.Contains(t, err.Error(), "spec.layouts[0].spec.items[1].content")
+}

pkg/types/dashboardtypes/perses_replicas.go

@@ -322,6 +322,55 @@ func (l *Layout) UnmarshalJSON(data []byte) error {
 	return nil
 }
 
+const (
+	gridColumnCount       = 12
+	maxItemsPerGridLayout = 100
+)
+
+// validateGridLayoutGeometry checks a single grid layout's item geometry (size,
+// position, and intra-section overlap), which Perses does not. It reads only the
+// layout's own items; layoutIndex is supplied by the caller (validateLayouts)
+// solely to name the layout in error paths.
+func validateGridLayoutGeometry(spec *dashboard.GridLayoutSpec, layoutIndex int) error {
+	if len(spec.Items) > maxItemsPerGridLayout {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items: has %d items; maximum is %d", layoutIndex, len(spec.Items), maxItemsPerGridLayout)
+	}
+	for i, item := range spec.Items {
+		// The width/x bounds keep x+width small enough not to overflow.
+		switch {
+		case item.Width < 1:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: width must be at least 1, got %d", layoutIndex, i, item.Width)
+		case item.Height < 1:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: height must be at least 1, got %d", layoutIndex, i, item.Height)
+		case item.X < 0:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: x must not be negative, got %d", layoutIndex, i, item.X)
+		case item.Y < 0:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: y must not be negative, got %d", layoutIndex, i, item.Y)
+		case item.Width > gridColumnCount:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: width (%d) exceeds grid width %d", layoutIndex, i, item.Width, gridColumnCount)
+		case item.X >= gridColumnCount:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: x (%d) must be less than grid width %d", layoutIndex, i, item.X, gridColumnCount)
+		case item.X+item.Width > gridColumnCount:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: x (%d) + width (%d) exceeds grid width %d", layoutIndex, i, item.X, item.Width, gridColumnCount)
+		}
+		// Could cap y/height but skipping for now: the grid grows vertically
+		// without limit (frontend autoSize), so "too big" has no natural bound.
+	}
+	// Two items overlap iff their rectangles intersect on both axes.
+	overlap := func(a, b dashboard.GridItem) bool {
+		return a.X < b.X+b.Width && b.X < a.X+a.Width &&
+			a.Y < b.Y+b.Height && b.Y < a.Y+a.Height
+	}
+	for i := 0; i < len(spec.Items); i++ {
+		for j := i + 1; j < len(spec.Items); j++ {
+			if overlap(spec.Items[i], spec.Items[j]) {
+				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d] and items[%d] overlap", layoutIndex, i, j)
+			}
+		}
+	}
+	return nil
+}
+
 func (Layout) JSONSchemaOneOf() []any {
 	return []any{
 		LayoutEnvelope[dashboard.GridLayoutSpec]{Kind: string(dashboard.KindGridLayout)},

tests/integration/tests/dashboard/03_v2_dashboard.py

@@ -173,6 +173,125 @@ def test_create_rejects_too_many_tags(
     assert response.json()["error"]["code"] == "dashboard_invalid_input"
 
 
+def test_create_rejects_invalid_grid_layout(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+):
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    def panel(name: str) -> dict:
+        return {
+            "kind": "Panel",
+            "spec": {
+                "display": {"name": name},
+                "plugin": {"kind": "signoz/TablePanel", "spec": {}},
+                "queries": [
+                    {
+                        "kind": "time_series",
+                        "spec": {
+                            "plugin": {
+                                "kind": "signoz/BuilderQuery",
+                                "spec": {
+                                    "name": "A",
+                                    "signal": "logs",
+                                    "aggregations": [{"expression": "count()"}],
+                                },
+                            }
+                        },
+                    }
+                ],
+            },
+        }
+
+    # Two grid items reference valid, distinct panels but share cells, so the
+    # overlap is the only violation.
+    response = requests.post(
+        signoz.self.host_configs["8080"].get(BASE_URL),
+        json={
+            "schemaVersion": "v6",
+            "name": "rejects-overlap",
+            "spec": {
+                "display": {"name": "Rejects Overlap"},
+                "panels": {"p1": panel("P1"), "p2": panel("P2")},
+                "layouts": [
+                    {
+                        "kind": "Grid",
+                        "spec": {
+                            "items": [
+                                {"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+                                {"x": 3, "y": 3, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p2"}},
+                            ]
+                        },
+                    }
+                ],
+            },
+            "tags": [],
+        },
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert response.status_code == HTTPStatus.BAD_REQUEST
+    assert response.json()["error"]["code"] == "dashboard_invalid_input"
+    assert "overlap" in response.json()["error"]["message"]
+
+    # One panel placed by two grid items (side by side, so they clear the overlap
+    # check first). The frontend keys grid items by panel id, so this is rejected.
+    response = requests.post(
+        signoz.self.host_configs["8080"].get(BASE_URL),
+        json={
+            "schemaVersion": "v6",
+            "name": "rejects-multiref",
+            "spec": {
+                "display": {"name": "Rejects Multiref"},
+                "panels": {"p1": panel("P1")},
+                "layouts": [
+                    {
+                        "kind": "Grid",
+                        "spec": {
+                            "items": [
+                                {"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+                                {"x": 6, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+                            ]
+                        },
+                    }
+                ],
+            },
+            "tags": [],
+        },
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert response.status_code == HTTPStatus.BAD_REQUEST
+    assert response.json()["error"]["code"] == "dashboard_invalid_input"
+    assert "already placed" in response.json()["error"]["message"]
+
+    # More grid items than allowed. The item-count check runs before the
+    # panel-ref check, so content-less items suffice here.
+    response = requests.post(
+        signoz.self.host_configs["8080"].get(BASE_URL),
+        json={
+            "schemaVersion": "v6",
+            "name": "rejects-too-many-items",
+            "spec": {
+                "display": {"name": "Rejects Too Many"},
+                "layouts": [
+                    {
+                        "kind": "Grid",
+                        "spec": {"items": [{"x": 0, "y": 0, "width": 1, "height": 1} for _ in range(101)]},
+                    }
+                ],
+            },
+            "tags": [],
+        },
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert response.status_code == HTTPStatus.BAD_REQUEST
+    assert response.json()["error"]["code"] == "dashboard_invalid_input"
+    assert "maximum" in response.json()["error"]["message"]
+
+
 @pytest.mark.parametrize(
     "params",
     [