Merge branch 'feat/dashboard-v2-variable-orchestration' into feat/dashboard-v2-variables-redesign

Show only the sections and panels in full screen — the header and toolbar
(actions, variables bar, time selector) are hidden for a clean presentation
view; exit with Esc. Also drops a stray blank line that failed the format check.

frontend/src/hooks/dynamicVariables/useGetFieldKeys.ts

@@ -30,4 +30,6 @@ export const useGetFieldKeys = ({
 		queryKey: ['fieldKeys', signal, name],
 		queryFn: () => getFieldKeys(signal, name),
 		enabled,
+		// Keep prior keys during a search refetch so the dropdown doesn't blank out.
+		keepPreviousData: true,
 	});

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.module.scss

@@ -5,3 +5,9 @@
 	justify-content: flex-end;
 	gap: 12px;
 }
+
+/* Actions / Configure / Edit-as-JSON: a flat l3 outline — no depth/shadow. */
+.toolbarButton {
+	border: 1px solid var(--l3-border) !important;
+	box-shadow: none !important;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { generatePath } from 'react-router-dom';
 import {
@@ -59,6 +59,8 @@ function DashboardActions({
 	onOpenRename,
 }: DashboardActionsProps): JSX.Element {
 	const canEdit = useDashboardStore((s) => s.isEditable);
+	const settingsRequest = useDashboardStore((s) => s.settingsRequest);
+	const clearSettingsRequest = useDashboardStore((s) => s.clearSettingsRequest);
 	const { user } = useAppContext();
 	const { safeNavigate } = useSafeNavigate();
 	const { showErrorModal } = useErrorModal();
@@ -72,6 +74,14 @@ function DashboardActions({
 	const [isDeleteOpen, setIsDeleteOpen] = useState<boolean>(false);
 	const deleteDashboardMutation = useDeleteDashboard(dashboard.id);
 
+	// Open the settings drawer when something in the tree requests it (e.g. the
+	// variables bar's "Add variable" button).
+	useEffect(() => {
+		if (settingsRequest) {
+			setIsSettingsDrawerOpen(true);
+		}
+	}, [settingsRequest]);
+
 	const { addSection, isSaving: isAddingSection } = useAddSection({
 		layouts: dashboard.spec.layouts,
 	});
@@ -201,6 +211,7 @@ function DashboardActions({
 					variant="solid"
 					color="secondary"
 					size="md"
+					className={styles.toolbarButton}
 					prefix={<Grid3X3 size="md" />}
 					testId="options"
 				>
@@ -212,6 +223,7 @@ function DashboardActions({
 					<Button
 						variant="solid"
 						color="secondary"
+						className={styles.toolbarButton}
 						prefix={<Configure size="md" />}
 						testId="show-drawer"
 						onClick={(): void => setIsSettingsDrawerOpen(true)}
@@ -222,7 +234,11 @@ function DashboardActions({
 					<SettingsDrawer
 						drawerTitle="Dashboard Configuration"
 						isOpen={isSettingsDrawerOpen}
-						onClose={(): void => setIsSettingsDrawerOpen(false)}
+						destroyOnClose
+						onClose={(): void => {
+							setIsSettingsDrawerOpen(false);
+							clearSettingsRequest();
+						}}
 					>
 						<DashboardSettings dashboard={dashboard} />
 					</SettingsDrawer>
@@ -231,6 +247,7 @@ function DashboardActions({
 			<Button
 				variant="solid"
 				color="secondary"
+				className={styles.toolbarButton}
 				prefix={<Braces size="md" />}
 				testId="edit-json"
 				onClick={(): void => setIsJsonEditorOpen(true)}

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

@@ -8,6 +8,8 @@ type SettingsDrawerProps = PropsWithChildren<{
 	drawerTitle: string;
 	isOpen: boolean;
 	onClose: () => void;
+	/** Unmount the content on close so it re-initializes on the next open. */
+	destroyOnClose?: boolean;
 }>;
 
 function SettingsDrawer({
@@ -15,6 +17,7 @@ function SettingsDrawer({
 	drawerTitle,
 	isOpen,
 	onClose,
+	destroyOnClose = false,
 }: SettingsDrawerProps): JSX.Element {
 	return (
 		<Drawer
@@ -23,6 +26,7 @@ function SettingsDrawer({
 			width="50%"
 			onClose={onClose}
 			open={isOpen}
+			destroyOnClose={destroyOnClose}
 			rootClassName={styles.settingsContainerRoot}
 		>
 			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/DynamicVariableFields.tsx

@@ -40,7 +40,7 @@ function DynamicVariableFields({
 	attributeError,
 }: DynamicVariableFieldsProps): JSX.Element {
 	const [search, setSearch] = useState('');
-	const debouncedSearch = useDebounce(search, 300);
+	const debouncedSearch = useDebounce(search, 500);
 	const apiSignal = signalForApi(signal);
 
 	const {
@@ -82,38 +82,14 @@ function DynamicVariableFields({
 
 	return (
 		<>
-			<div className={cx(styles.row, styles.sortSection)}>
-				<div className={cx(styles.labelContainer, styles.sourceLabel)}>
-					<Typography.Text className={styles.label}>Source</Typography.Text>
-					<TextToolTip
-						text="By default, this searches across logs, traces, and metrics, which can be slow. Selecting a single source improves performance. Many fields share the same values across different signals (for example, `k8s.pod.name` is identical in logs, traces and metrics) making one source enough. Only use `All telemetry` when you need fields that have different values in different signal types."
-						useFilledIcon={false}
-						outlinedIcon={<Info size={14} />}
-					/>
-				</div>
-				<Select
-					className={styles.sortSelect}
-					popupMatchSelectWidth={false}
-					value={signal}
-					options={DYNAMIC_SIGNALS.map((s) => ({
-						label: DYNAMIC_SIGNAL_LABEL[s],
-						value: s,
-					}))}
-					onChange={(value): void =>
-						onChange({ dynamicSignal: value as DynamicSignalOption })
-					}
-					data-testid="variable-signal-select"
-				/>
-			</div>
-			<div className={cx(styles.row, styles.sortSection)}>
-				<div className={styles.labelContainer}>
-					<Typography.Text className={styles.label}>Attribute</Typography.Text>
-				</div>
+			{/* Combined row retained from V1: the field on the left, `from` + the
+			    telemetry source on the right. */}
+			<div className={cx(styles.row, styles.dynamicCombinedRow)}>
 				<CustomSelect
-					className={styles.searchSelect}
+					className={styles.dynamicFieldSelect}
 					showSearch
 					value={attribute || undefined}
-					placeholder="Select a telemetry field"
+					placeholder="Select a field"
 					loading={isLoading}
 					options={options}
 					onSearch={setSearch}
@@ -126,6 +102,25 @@ function DynamicVariableFields({
 					showRetryButton={error ? isRetryableError(error) : true}
 					data-testid="variable-field-select"
 				/>
+				<Typography.Text className={styles.fromText}>from</Typography.Text>
+				<TextToolTip
+					text="By default, this searches across logs, traces, and metrics, which can be slow. Selecting a single source improves performance. Many fields share the same values across different signals (for example, `k8s.pod.name` is identical in logs, traces and metrics) making one source enough. Only use `All telemetry` when you need fields that have different values in different signal types."
+					useFilledIcon={false}
+					outlinedIcon={<Info size={14} />}
+				/>
+				<Select
+					className={styles.dynamicSourceSelect}
+					popupMatchSelectWidth={false}
+					value={signal}
+					options={DYNAMIC_SIGNALS.map((s) => ({
+						label: DYNAMIC_SIGNAL_LABEL[s],
+						value: s,
+					}))}
+					onChange={(value): void =>
+						onChange({ dynamicSignal: value as DynamicSignalOption })
+					}
+					data-testid="variable-signal-select"
+				/>
 			</div>
 			{attributeError ? (
 				<Typography.Text className={styles.errorText}>

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.module.scss

@@ -138,7 +138,7 @@
 	align-items: center;
 	gap: 6px;
 	min-height: 24px;
-	padding: 6px 14px;
+	padding: 4px 16px !important;
 	white-space: nowrap;
 	border-radius: 0;
 	color: var(--l2-foreground);
@@ -157,6 +157,7 @@
 
 .betaTag {
 	margin-left: 4px;
+	vertical-align: middle;
 }
 
 /* Query */
@@ -264,6 +265,7 @@
 	flex-flow: wrap;
 	gap: 8px;
 	padding: 4.5px 11px;
+	max-height: 120px;
 	overflow-y: auto;
 }
 
@@ -328,16 +330,54 @@
 
 /* All variable selects (Source / Attribute / Sort / Default Value) share width
    and a consistent --l2-border outline. */
+.sortSelect,
+.searchSelect,
+.dynamicFieldSelect,
+.dynamicSourceSelect {
+	:global(.ant-select-selector) {
+		border-color: var(--l2-border) !important;
+	}
+}
+
 .sortSelect,
 .searchSelect {
 	width: 240px;
 	flex-shrink: 0;
 
-	:global(.ant-select-selector) {
-		border-color: var(--l2-border) !important;
+	// The clear (X) is an SVG, so antd's font-glyph offset mis-centers it — center
+	// it on the row and make it clearly visible.
+	:global(.ant-select-clear) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 0;
+		transform: translateY(-50%);
+		color: var(--l2-foreground);
+		opacity: 1;
 	}
 }
 
+/* Dynamic variable: field | "from" | info | source, retained from V1. */
+.dynamicCombinedRow {
+	display: grid;
+	grid-template-columns: 1fr auto 16px 180px;
+	gap: 12px;
+	align-items: center;
+}
+
+.dynamicFieldSelect,
+.dynamicSourceSelect {
+	width: 100%;
+	min-width: 0;
+}
+
+.fromText {
+	font-family: 'Space Mono';
+	font-size: 13px;
+	font-weight: var(--font-weight-medium);
+	white-space: nowrap;
+}
+
 .actionButtons {
 	width: 100%;
 	display: flex;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import { Check, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
@@ -6,6 +7,7 @@ import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 // eslint-disable-next-line signoz/no-antd-components -- TextArea/Collapse: no @signozhq/ui equivalent
 import { Collapse, Input as AntdInput } from 'antd';
+import { CustomMultiSelect } from 'components/NewSelect';
 
 import type { VariableType } from '../variableFormModel';
 import DynamicVariableFields from './DynamicVariableFields';
@@ -30,9 +32,19 @@ function VariableForm({
 	siblings,
 	isNew,
 	isSaving,
+	panelOptions,
+	appliedPanelIds,
 	onClose,
 	onSave,
 }: VariableFormProps): JSX.Element {
+	// The "apply to panels" selection is transient form state, seeded from the
+	// panels that already reference this variable. Held in a ref so the save
+	// callback (owned by useVariableForm) reads the latest value.
+	const [selectedPanelIds, setSelectedPanelIds] =
+		useState<string[]>(appliedPanelIds);
+	const selectedPanelIdsRef = useRef(selectedPanelIds);
+	selectedPanelIdsRef.current = selectedPanelIds;
+
 	const {
 		model,
 		set,
@@ -54,7 +66,12 @@ function VariableForm({
 		showAllOptionField,
 		payloadVariables,
 		handleSave,
-	} = useVariableForm({ initial, siblings, isNew, onSave });
+	} = useVariableForm({
+		initial,
+		siblings,
+		isNew,
+		onSave: (next): void => onSave(next, selectedPanelIdsRef.current),
+	});
 
 	// Shared list rows (preview/sort/multi/default) for the list-type variables;
 	// rendered as a sibling inside each list-type panel. Only the active panel
@@ -101,6 +118,20 @@ function VariableForm({
 								attributeError={attributeError}
 							/>
 							{listFields}
+							<div className={styles.row}>
+								<div className={styles.labelContainer}>
+									<Typography.Text className={styles.label}>
+										Apply to panels
+									</Typography.Text>
+								</div>
+								<CustomMultiSelect
+									placeholder="Select panels"
+									options={panelOptions}
+									value={selectedPanelIds}
+									onChange={(value): void => setSelectedPanelIds(value as string[])}
+									data-testid="variable-apply-panels"
+								/>
+							</div>
 						</div>
 					</TabsContent>
 

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableRow.tsx

@@ -3,18 +3,13 @@ import { Check, GripVertical, PenLine, Trash2, X } from '@signozhq/icons';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
 
 import type { VariableFormModel } from './variableFormModel';
 import styles from './Variables.module.scss';
 
-const TYPE_LABEL: Record<VariableFormModel['type'], string> = {
-	QUERY: 'Query',
-	CUSTOM: 'Custom',
-	TEXT: 'Text',
-	DYNAMIC: 'Dynamic',
-};
-
 interface VariableRowProps {
 	variable: VariableFormModel;
 	index: number;
@@ -25,9 +20,11 @@ interface VariableRowProps {
 	onRequestDelete: (index: number) => void;
 	onConfirmDelete: (index: number) => void;
 	onCancelDelete: () => void;
+	/** Apply this variable's filter to all panels. Dynamic variables only. */
+	onApplyToAll: (index: number) => void;
 }
 
-/** A single draggable variable row (drag handle + meta + inline actions). */
+/** A single draggable variable row in the two-column (name / description) table. */
 function VariableRow({
 	variable,
 	index,
@@ -37,6 +34,7 @@ function VariableRow({
 	onRequestDelete,
 	onConfirmDelete,
 	onCancelDelete,
+	onApplyToAll,
 }: VariableRowProps): JSX.Element {
 	const {
 		attributes,
@@ -61,7 +59,7 @@ function VariableRow({
 			className={styles.row}
 			data-testid={`variable-row-${variable.name}`}
 		>
-			<div className={styles.rowMain}>
+			<div className={styles.varCell}>
 				{canEdit ? (
 					<span
 						ref={setActivatorNodeRef}
@@ -74,65 +72,94 @@ function VariableRow({
 					</span>
 				) : null}
 				<Typography.Text className={styles.varName}>
-					${variable.name}
+					{variable.name}
 				</Typography.Text>
-				<span className={styles.typeTag}>{TYPE_LABEL[variable.type]}</span>
+			</div>
+
+			<div className={styles.descCell}>
 				{variable.description ? (
 					<Typography.Text className={styles.varDesc}>
 						{variable.description}
 					</Typography.Text>
+				) : (
+					<span className={styles.varDescEmpty}>—</span>
+				)}
+
+				{canEdit ? (
+					<div
+						className={cx(styles.rowActions, {
+							[styles.rowActionsVisible]: isConfirmingDelete,
+						})}
+					>
+						{isConfirmingDelete ? (
+							<>
+								<Typography.Text className={styles.confirmText}>
+									Delete?
+								</Typography.Text>
+								<Button
+									variant="ghost"
+									color="destructive"
+									size="icon"
+									onClick={(): void => onConfirmDelete(index)}
+									aria-label="Confirm delete"
+									testId={`variable-delete-confirm-${variable.name}`}
+								>
+									<Check size={14} />
+								</Button>
+								<Button
+									variant="ghost"
+									color="secondary"
+									size="icon"
+									onClick={onCancelDelete}
+									aria-label="Cancel delete"
+								>
+									<X size={14} />
+								</Button>
+							</>
+						) : (
+							<>
+								{variable.type === 'DYNAMIC' ? (
+									<TooltipSimple
+										side="top"
+										title="Add this variable as a filter to every panel"
+									>
+										<Button
+											variant="ghost"
+											color="secondary"
+											size="sm"
+											className={styles.applyAllButton}
+											onClick={(): void => onApplyToAll(index)}
+											testId={`variable-apply-all-${variable.name}`}
+										>
+											Apply to all
+										</Button>
+									</TooltipSimple>
+								) : null}
+								<Button
+									variant="ghost"
+									color="secondary"
+									size="icon"
+									onClick={(): void => onEdit(index)}
+									aria-label="Edit variable"
+									testId={`variable-edit-${variable.name}`}
+								>
+									<PenLine size={14} />
+								</Button>
+								<Button
+									variant="ghost"
+									color="secondary"
+									size="icon"
+									onClick={(): void => onRequestDelete(index)}
+									aria-label="Delete variable"
+									testId={`variable-delete-${variable.name}`}
+								>
+									<Trash2 size={14} />
+								</Button>
+							</>
+						)}
+					</div>
 				) : null}
 			</div>
-
-			{canEdit && isConfirmingDelete ? (
-				<div className={styles.rowActions}>
-					<Typography.Text className={styles.confirmText}>Delete?</Typography.Text>
-					<Button
-						variant="ghost"
-						color="destructive"
-						size="icon"
-						onClick={(): void => onConfirmDelete(index)}
-						aria-label="Confirm delete"
-						testId={`variable-delete-confirm-${variable.name}`}
-					>
-						<Check size={14} />
-					</Button>
-					<Button
-						variant="ghost"
-						color="secondary"
-						size="icon"
-						onClick={onCancelDelete}
-						aria-label="Cancel delete"
-					>
-						<X size={14} />
-					</Button>
-				</div>
-			) : null}
-
-			{canEdit && !isConfirmingDelete ? (
-				<div className={styles.rowActions}>
-					<Button
-						variant="ghost"
-						color="secondary"
-						size="icon"
-						onClick={(): void => onEdit(index)}
-						aria-label="Edit variable"
-						testId={`variable-edit-${variable.name}`}
-					>
-						<PenLine size={14} />
-					</Button>
-					<Button
-						variant="ghost"
-						color="secondary"
-						size="icon"
-						onClick={(): void => onRequestDelete(index)}
-						aria-label="Delete variable"
-						testId={`variable-delete-${variable.name}`}
-					>
-						<Trash2 size={14} />
-					</Button>
-				</div>
-			) : null}
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/Variables.module.scss

@@ -4,7 +4,7 @@
 	gap: 16px;
 }
 
-.header {
+.footer {
 	display: flex;
 	justify-content: flex-end;
 	gap: 16px;
@@ -28,69 +28,125 @@
 	color: var(--l2-foreground);
 }
 
+// Two-column (Variable / Description) table matching the V1 variables listing.
+$grid-columns: minmax(0, 2fr) minmax(0, 3fr);
+
+.table {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid var(--l2-border);
+	border-radius: 6px;
+	overflow: hidden;
+}
+
+.headerRow {
+	display: grid;
+	grid-template-columns: $grid-columns;
+	padding: 0 16px;
+	border-bottom: 1px solid var(--l2-border);
+}
+
+.headerCell {
+	padding: 12px 0;
+	font-size: 13px;
+	font-weight: 500;
+	color: var(--l1-foreground);
+
+	&:first-child {
+		padding-right: 16px;
+		border-right: 1px solid var(--l2-border);
+	}
+
+	&:last-child {
+		padding-left: 16px;
+	}
+}
+
 .list {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
 }
 
 .row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	padding: 10px 12px;
-	border: 1px solid var(--l1-border);
-	border-radius: 4px;
+	position: relative;
+	display: grid;
+	grid-template-columns: $grid-columns;
+	padding: 0 16px;
 	background: var(--l1-background);
+
+	&:not(:last-child) {
+		border-bottom: 1px solid var(--l2-border);
+	}
+
+	&:hover {
+		background: var(--l2-background);
+	}
 }
 
-.rowMain {
+.varCell {
 	display: flex;
-	align-items: center;
-	gap: 10px;
+	align-items: flex-start;
+	gap: 8px;
 	min-width: 0;
+	padding: 12px 16px 12px 0;
+	border-right: 1px solid var(--l2-border);
 }
 
 .dragHandle {
 	display: flex;
 	flex-shrink: 0;
 	align-items: center;
+	margin-top: 1px;
 	color: var(--l3-foreground);
 	cursor: grab;
 	touch-action: none;
 }
 
 .varName {
-	font-weight: 500;
-	color: var(--l1-foreground);
+	min-width: 0;
+	font-family: 'Space Mono', monospace;
+	font-size: 13px;
+	color: var(--bg-robin-400);
+	word-break: break-all;
+}
+
+.descCell {
+	position: relative;
+	min-width: 0;
+	padding: 12px 0 12px 16px;
 }
 
 .varDesc {
-	min-width: 0;
-	overflow: hidden;
-	font-size: 12px;
-	color: var(--l2-foreground);
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	font-family: 'Space Mono', monospace;
+	font-size: 13px;
+	color: var(--bg-sienna-400);
+	white-space: pre-wrap;
+	word-break: break-word;
 }
 
-.typeTag {
-	flex-shrink: 0;
-	padding: 1px 8px;
-	font-size: 11px;
-	letter-spacing: 0.04em;
-	color: var(--l2-foreground);
-	text-transform: uppercase;
-	background: var(--l2-background);
-	border-radius: 10px;
+.varDescEmpty {
+	color: var(--l3-foreground);
 }
 
 .rowActions {
+	position: absolute;
+	top: 8px;
+	right: 0;
 	display: flex;
-	flex-shrink: 0;
 	align-items: center;
 	gap: 2px;
+	padding-left: 16px;
+	background: var(--l2-background);
+	opacity: 0;
+	transition: opacity 120ms ease;
+}
+
+.row:hover .rowActions {
+	opacity: 1;
+}
+
+.rowActionsVisible {
+	opacity: 1;
 }
 
 .confirmText {
@@ -98,3 +154,8 @@
 	font-size: 12px;
 	color: var(--l2-foreground);
 }
+
+.applyAllButton {
+	font-size: 12px;
+	white-space: nowrap;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariablesList.tsx

@@ -25,6 +25,7 @@ interface VariablesListProps {
 	onConfirmDelete: (index: number) => void;
 	onCancelDelete: () => void;
 	onMove: (from: number, to: number) => void;
+	onApplyToAll: (index: number) => void;
 }
 
 function VariablesList({
@@ -36,6 +37,7 @@ function VariablesList({
 	onConfirmDelete,
 	onCancelDelete,
 	onMove,
+	onApplyToAll,
 }: VariablesListProps): JSX.Element {
 	const sensors = useSensors(
 		useSensor(PointerSensor, { activationConstraint: { distance: 1 } }),
@@ -53,32 +55,39 @@ function VariablesList({
 	};
 
 	return (
-		<DndContext
-			sensors={sensors}
-			modifiers={[restrictToVerticalAxis]}
-			onDragEnd={handleDragEnd}
-		>
-			<SortableContext
-				items={variables.map((v) => v.name)}
-				strategy={verticalListSortingStrategy}
+		<div className={styles.table} data-testid="variables-list">
+			<div className={styles.headerRow}>
+				<span className={styles.headerCell}>Variable</span>
+				<span className={styles.headerCell}>Description</span>
+			</div>
+			<DndContext
+				sensors={sensors}
+				modifiers={[restrictToVerticalAxis]}
+				onDragEnd={handleDragEnd}
 			>
-				<div className={styles.list} data-testid="variables-list">
-					{variables.map((variable, index) => (
-						<VariableRow
-							key={variable.name || `variable-${index}`}
-							variable={variable}
-							index={index}
-							canEdit={canEdit}
-							isConfirmingDelete={confirmingIndex === index}
-							onEdit={onEdit}
-							onRequestDelete={onRequestDelete}
-							onConfirmDelete={onConfirmDelete}
-							onCancelDelete={onCancelDelete}
-						/>
-					))}
-				</div>
-			</SortableContext>
-		</DndContext>
+				<SortableContext
+					items={variables.map((v) => v.name)}
+					strategy={verticalListSortingStrategy}
+				>
+					<div className={styles.list}>
+						{variables.map((variable, index) => (
+							<VariableRow
+								key={variable.name || `variable-${index}`}
+								variable={variable}
+								index={index}
+								canEdit={canEdit}
+								isConfirmingDelete={confirmingIndex === index}
+								onEdit={onEdit}
+								onRequestDelete={onRequestDelete}
+								onConfirmDelete={onConfirmDelete}
+								onCancelDelete={onCancelDelete}
+								onApplyToAll={onApplyToAll}
+							/>
+						))}
+					</div>
+				</SortableContext>
+			</DndContext>
+		</div>
 	);
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/__tests__/applyVariableToPanelsPatch.test.ts

@@ -0,0 +1,231 @@
+import type {
+	DashboardtypesDashboardSpecDTOPanels,
+	DashboardtypesJSONPatchOperationDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import {
+	buildApplyVariableToPanelsPatch,
+	buildSyncVariableToPanelsPatch,
+	getPanelIdsReferencingVariable,
+} from '../applyVariableToPanelsPatch';
+
+/** Minimal builder-query panel wrapped in a CompositeQuery, with a given filter. */
+function compositePanel(filterExpression: string): unknown {
+	return {
+		kind: 'panel',
+		spec: {
+			display: { title: '' },
+			plugin: { kind: 'signoz/TimeSeries', spec: {} },
+			queries: [
+				{
+					kind: 'builder_query',
+					spec: {
+						plugin: {
+							kind: 'signoz/CompositeQuery',
+							spec: {
+								queries: [
+									{
+										type: 'builder_query',
+										spec: {
+											name: 'A',
+											signal: 'logs',
+											filter: { expression: filterExpression },
+										},
+									},
+								],
+							},
+						},
+					},
+				},
+			],
+		},
+	};
+}
+
+/** A bare LIST-style BuilderQuery panel (filter lives directly on the plugin spec). */
+function listPanel(filterExpression: string): unknown {
+	return {
+		kind: 'panel',
+		spec: {
+			display: { title: '' },
+			plugin: { kind: 'signoz/List', spec: {} },
+			queries: [
+				{
+					kind: 'builder_query',
+					spec: {
+						plugin: {
+							kind: 'signoz/BuilderQuery',
+							spec: {
+								name: 'A',
+								signal: 'logs',
+								filter: { expression: filterExpression },
+							},
+						},
+					},
+				},
+			],
+		},
+	};
+}
+
+/** A PromQL panel — no builder filter, must be skipped. */
+function promqlPanel(): unknown {
+	return {
+		kind: 'panel',
+		spec: {
+			display: { title: '' },
+			plugin: { kind: 'signoz/TimeSeries', spec: {} },
+			queries: [
+				{
+					kind: 'promql',
+					spec: {
+						plugin: { kind: 'signoz/PromQLQuery', spec: { query: 'up' } },
+					},
+				},
+			],
+		},
+	};
+}
+
+/** Reads the first builder query's filter expression out of a patch op's value. */
+function expressionOf(
+	op: DashboardtypesJSONPatchOperationDTO,
+): string | undefined {
+	const queries = op.value as Array<{
+		spec: { plugin: { kind: string; spec: any } };
+	}>;
+	const { plugin } = queries[0].spec;
+	const builderSpec =
+		plugin.kind === 'signoz/CompositeQuery'
+			? plugin.spec.queries[0].spec
+			: plugin.spec;
+	return builderSpec.filter?.expression;
+}
+
+function panels(
+	map: Record<string, unknown>,
+): DashboardtypesDashboardSpecDTOPanels {
+	return map as DashboardtypesDashboardSpecDTOPanels;
+}
+
+describe('buildApplyVariableToPanelsPatch', () => {
+	it('appends the clause to an existing filter (AND-joined)', () => {
+		const ops = buildApplyVariableToPanelsPatch(
+			panels({ p1: compositePanel('env = "prod"') }),
+			'service.name',
+			'svc',
+		);
+		expect(ops).toHaveLength(1);
+		expect(ops[0]).toMatchObject({
+			op: 'replace',
+			path: '/spec/panels/p1/spec/queries',
+		});
+		expect(expressionOf(ops[0])).toBe('env = "prod" AND service.name IN $svc');
+	});
+
+	it('sets the clause when the filter is empty', () => {
+		const ops = buildApplyVariableToPanelsPatch(
+			panels({ p1: compositePanel('') }),
+			'service.name',
+			'svc',
+		);
+		expect(expressionOf(ops[0])).toBe('service.name IN $svc');
+	});
+
+	it('applies to a bare BuilderQuery (LIST) panel', () => {
+		const ops = buildApplyVariableToPanelsPatch(
+			panels({ p1: listPanel('') }),
+			'k8s.pod.name',
+			'pod',
+		);
+		expect(expressionOf(ops[0])).toBe('k8s.pod.name IN $pod');
+	});
+
+	it('is idempotent — re-applying does not duplicate the clause', () => {
+		const ops = buildApplyVariableToPanelsPatch(
+			panels({ p1: compositePanel('service.name IN $svc') }),
+			'service.name',
+			'svc',
+		);
+		expect(ops).toHaveLength(0);
+	});
+
+	it('only targets the requested panels', () => {
+		const ops = buildApplyVariableToPanelsPatch(
+			panels({ p1: compositePanel(''), p2: compositePanel('') }),
+			'service.name',
+			'svc',
+			['p2'],
+		);
+		expect(ops).toHaveLength(1);
+		expect(ops[0].path).toBe('/spec/panels/p2/spec/queries');
+	});
+
+	it('skips PromQL panels (no builder filter)', () => {
+		const ops = buildApplyVariableToPanelsPatch(
+			panels({ p1: promqlPanel() }),
+			'service.name',
+			'svc',
+		);
+		expect(ops).toHaveLength(0);
+	});
+
+	it('returns nothing when attribute or name is missing', () => {
+		expect(
+			buildApplyVariableToPanelsPatch(
+				panels({ p1: compositePanel('') }),
+				'',
+				'svc',
+			),
+		).toHaveLength(0);
+	});
+});
+
+describe('buildSyncVariableToPanelsPatch', () => {
+	it('adds to selected panels and removes from the rest', () => {
+		const ops = buildSyncVariableToPanelsPatch(
+			panels({
+				p1: compositePanel('service.name IN $svc'), // has it, not selected → remove
+				p2: compositePanel(''), // selected → add
+				p3: compositePanel('service.name IN $svc'), // has it, selected → unchanged
+			}),
+			'service.name',
+			'svc',
+			['p2', 'p3'],
+		);
+		const byPath = Object.fromEntries(ops.map((op) => [op.path, op]));
+		expect(Object.keys(byPath).sort()).toStrictEqual([
+			'/spec/panels/p1/spec/queries',
+			'/spec/panels/p2/spec/queries',
+		]);
+		expect(expressionOf(byPath['/spec/panels/p1/spec/queries'])).toBe('');
+		expect(expressionOf(byPath['/spec/panels/p2/spec/queries'])).toBe(
+			'service.name IN $svc',
+		);
+	});
+
+	it('removing keeps other clauses intact', () => {
+		const ops = buildSyncVariableToPanelsPatch(
+			panels({ p1: compositePanel('env = "prod" AND service.name IN $svc') }),
+			'service.name',
+			'svc',
+			[],
+		);
+		expect(expressionOf(ops[0])).toBe('env = "prod"');
+	});
+});
+
+describe('getPanelIdsReferencingVariable', () => {
+	it('returns only panels whose filter references the variable', () => {
+		const ids = getPanelIdsReferencingVariable(
+			panels({
+				p1: compositePanel('service.name IN $svc'),
+				p2: compositePanel('env = "prod"'),
+				p3: listPanel('service.name IN $svc'),
+			}),
+			'service.name',
+			'svc',
+		);
+		expect(ids.sort()).toStrictEqual(['p1', 'p3']);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/applyVariableToPanelsPatch.ts

@@ -0,0 +1,179 @@
+import type {
+	DashboardtypesDashboardSpecDTOPanels,
+	DashboardtypesJSONPatchOperationDTO,
+	DashboardtypesQueryDTO,
+	Querybuildertypesv5BuilderQuerySpecDTO,
+	Querybuildertypesv5CompositeQueryDTO,
+	Querybuildertypesv5QueryEnvelopeBuilderDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { cloneDeep } from 'lodash-es';
+
+// Injects/removes a dynamic variable's filter (`attribute IN $name`) in panel
+// builder queries as JSON-Patch ops. Only builder queries carry a filter.
+
+function clauseFor(attribute: string, variableName: string): string {
+	return `${attribute} IN $${variableName}`;
+}
+
+/** Runs `fn` on every builder-query spec in a panel's single query (Composite or bare Builder). */
+function forEachBuilderSpec(
+	queries: DashboardtypesQueryDTO[],
+	fn: (spec: Querybuildertypesv5BuilderQuerySpecDTO) => void,
+): void {
+	const plugin = queries[0]?.spec?.plugin;
+	if (!plugin?.spec) {
+		return;
+	}
+	if (plugin.kind === 'signoz/CompositeQuery') {
+		const composite = plugin.spec as Querybuildertypesv5CompositeQueryDTO;
+		(composite.queries ?? [])
+			.filter((envelope) => envelope.type === 'builder_query')
+			.forEach((envelope) => {
+				const { spec } = envelope as Querybuildertypesv5QueryEnvelopeBuilderDTO;
+				if (spec) {
+					fn(spec as Querybuildertypesv5BuilderQuerySpecDTO);
+				}
+			});
+	} else if (plugin.kind === 'signoz/BuilderQuery') {
+		fn(plugin.spec as Querybuildertypesv5BuilderQuerySpecDTO);
+	}
+}
+
+/** Appends the clause to every builder query's filter. Returns whether anything changed. */
+function addClause(queries: DashboardtypesQueryDTO[], clause: string): boolean {
+	let changed = false;
+	forEachBuilderSpec(queries, (spec) => {
+		const existing = spec.filter?.expression?.trim();
+		// Idempotent: a repeated apply must not stack duplicate clauses.
+		if (existing?.includes(clause)) {
+			return;
+		}
+		spec.filter = {
+			expression: existing ? `${existing} AND ${clause}` : clause,
+		};
+		changed = true;
+	});
+	return changed;
+}
+
+/** Removes the managed clause (an ` AND `-joined part) from every builder filter. */
+function removeClause(
+	queries: DashboardtypesQueryDTO[],
+	clause: string,
+): boolean {
+	let changed = false;
+	forEachBuilderSpec(queries, (spec) => {
+		const existing = spec.filter?.expression;
+		if (!existing) {
+			return;
+		}
+		const parts = existing
+			.split(' AND ')
+			.map((part) => part.trim())
+			.filter(Boolean);
+		const kept = parts.filter((part) => part !== clause);
+		if (kept.length !== parts.length) {
+			spec.filter = { expression: kept.join(' AND ') };
+			changed = true;
+		}
+	});
+	return changed;
+}
+
+/** Whether any builder query in the panel already carries the clause. */
+function panelHasClause(
+	queries: DashboardtypesQueryDTO[],
+	clause: string,
+): boolean {
+	let has = false;
+	forEachBuilderSpec(queries, (spec) => {
+		if (spec.filter?.expression?.includes(clause)) {
+			has = true;
+		}
+	});
+	return has;
+}
+
+function replaceQueriesOp(
+	panelId: string,
+	queries: DashboardtypesQueryDTO[],
+): DashboardtypesJSONPatchOperationDTO {
+	return {
+		op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
+		path: `/spec/panels/${panelId}/spec/queries`,
+		value: queries,
+	};
+}
+
+/** Add-only: inject the variable's filter into the given panels (default: all). */
+export function buildApplyVariableToPanelsPatch(
+	panels: DashboardtypesDashboardSpecDTOPanels,
+	attribute: string,
+	variableName: string,
+	targetPanelIds?: string[],
+): DashboardtypesJSONPatchOperationDTO[] {
+	if (!attribute || !variableName) {
+		return [];
+	}
+	const clause = clauseFor(attribute, variableName);
+	const ids = targetPanelIds ?? Object.keys(panels);
+
+	const ops: DashboardtypesJSONPatchOperationDTO[] = [];
+	ids.forEach((id) => {
+		const panel = panels[id];
+		if (!panel?.spec?.queries?.length) {
+			return;
+		}
+		const queries = cloneDeep(panel.spec.queries);
+		if (addClause(queries, clause)) {
+			ops.push(replaceQueriesOp(id, queries));
+		}
+	});
+	return ops;
+}
+
+/** Full sync: selected panels get the clause; every other panel has it removed. */
+export function buildSyncVariableToPanelsPatch(
+	panels: DashboardtypesDashboardSpecDTOPanels,
+	attribute: string,
+	variableName: string,
+	selectedPanelIds: string[],
+): DashboardtypesJSONPatchOperationDTO[] {
+	if (!attribute || !variableName) {
+		return [];
+	}
+	const clause = clauseFor(attribute, variableName);
+	const selected = new Set(selectedPanelIds);
+
+	const ops: DashboardtypesJSONPatchOperationDTO[] = [];
+	Object.keys(panels).forEach((id) => {
+		const panel = panels[id];
+		if (!panel?.spec?.queries?.length) {
+			return;
+		}
+		const queries = cloneDeep(panel.spec.queries);
+		const changed = selected.has(id)
+			? addClause(queries, clause)
+			: removeClause(queries, clause);
+		if (changed) {
+			ops.push(replaceQueriesOp(id, queries));
+		}
+	});
+	return ops;
+}
+
+/** Panel ids whose queries currently reference the variable — pre-populates the picker. */
+export function getPanelIdsReferencingVariable(
+	panels: DashboardtypesDashboardSpecDTOPanels,
+	attribute: string,
+	variableName: string,
+): string[] {
+	if (!attribute || !variableName) {
+		return [];
+	}
+	const clause = clauseFor(attribute, variableName);
+	return Object.keys(panels).filter((id) => {
+		const queries = panels[id]?.spec?.queries;
+		return queries?.length ? panelHasClause(queries, clause) : false;
+	});
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/components/ApplyToAllDialog/ApplyToAllDialog.module.scss

@@ -0,0 +1,16 @@
+.body {
+	font-size: 13px;
+	line-height: 20px;
+	color: var(--l2-foreground);
+}
+
+.variableName {
+	font-family: 'Space Mono', monospace;
+	color: var(--bg-robin-400);
+}
+
+.footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/components/ApplyToAllDialog/ApplyToAllDialog.tsx

@@ -0,0 +1,67 @@
+import { Check, X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
+
+import styles from './ApplyToAllDialog.module.scss';
+
+interface ApplyToAllDialogProps {
+	open: boolean;
+	variableName: string;
+	isLoading: boolean;
+	onConfirm: () => void;
+	onClose: () => void;
+}
+
+/** Confirms applying a dynamic variable as a filter to every panel. */
+function ApplyToAllDialog({
+	open,
+	variableName,
+	isLoading,
+	onConfirm,
+	onClose,
+}: ApplyToAllDialogProps): JSX.Element {
+	const footer = (
+		<div className={styles.footer}>
+			<Button variant="solid" color="secondary" onClick={onClose}>
+				<X size={12} />
+				Cancel
+			</Button>
+			<Button
+				variant="solid"
+				color="primary"
+				loading={isLoading}
+				onClick={onConfirm}
+				testId="confirm-apply-to-all"
+			>
+				<Check size={12} />
+				Apply to all
+			</Button>
+		</div>
+	);
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
+			title="Apply variable to all panels"
+			width="narrow"
+			showCloseButton={false}
+			// Lift above the settings drawer (z ~1000); overlay off (it would only half-dim).
+			style={{ zIndex: 1100 }}
+			showOverlay={false}
+			footer={footer}
+		>
+			<div className={styles.body}>
+				Add <span className={styles.variableName}>${variableName}</span> as a filter
+				to every panel on this dashboard. Panels that already reference it are left
+				unchanged.
+			</div>
+		</DialogWrapper>
+	);
+}
+
+export default ApplyToAllDialog;

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

@@ -1,9 +1,16 @@
 import { useEffect, useMemo, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 
 import settingsStyles from '../DashboardSettings.module.scss';
+import { useOptimisticPatch } from '../../hooks/useOptimisticPatch';
 import { useDashboardStore } from '../../store/useDashboardStore';
+import {
+	buildApplyVariableToPanelsPatch,
+	buildSyncVariableToPanelsPatch,
+	getPanelIdsReferencingVariable,
+} from './applyVariableToPanelsPatch';
 import { useSaveVariables } from './useSaveVariables';
 import { dtoToFormModel } from './variableAdapters';
 import {
@@ -14,6 +21,7 @@ import VariableForm from './VariableForm/VariableForm';
 import VariablesList from './VariablesList';
 import styles from './Variables.module.scss';
 import AddVariableButton from './components/AddVariableButton';
+import ApplyToAllDialog from './components/ApplyToAllDialog/ApplyToAllDialog';
 import NoVariablesCard from './components/NoVariablesCard/NoVariablesCard';
 import { EditingState } from './types';
 
@@ -23,7 +31,13 @@ interface VariablesSettingsProps {
 
 function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
+	// The drawer destroys on close, so reading this once on mount is enough to
+	// open the add-form when deep-linked (e.g. the bar's "Add variable" button).
+	const openAddOnMount = useDashboardStore(
+		(s) => s.settingsRequest?.addVariable ?? false,
+	);
 	const { save, isSaving } = useSaveVariables();
+	const { patchAsync, isPatching } = useOptimisticPatch();
 
 	const initialFormModels = useMemo(
 		() => dashboard.spec.variables.map(dtoToFormModel),
@@ -38,10 +52,13 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dashboard.updatedAt]);
 
-	const [isEditing, setIsEditing] = useState<EditingState>(null);
+	const [isEditing, setIsEditing] = useState<EditingState>(
+		openAddOnMount && isEditable ? { type: 'new' } : null,
+	);
 	const [confirmDeleteIndex, setConfirmDeleteIndex] = useState<number | null>(
 		null,
 	);
+	const [applyToAllIndex, setApplyToAllIndex] = useState<number | null>(null);
 
 	const editingFormModel: VariableFormModel | null = useMemo(() => {
 		if (!isEditing) {
@@ -57,20 +74,64 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 		return variables.filter((_, i) => i !== self);
 	}, [variables, isEditing]);
 
+	const panelOptions = useMemo(
+		() =>
+			Object.entries(dashboard.spec.panels ?? {}).map(([id, panel]) => ({
+				value: id,
+				label: panel.spec?.display?.name || id,
+			})),
+		[dashboard.spec.panels],
+	);
+
+	// Panels the edited variable is already applied to — pre-checks the picker.
+	const appliedPanelIds = useMemo(() => {
+		if (!editingFormModel || editingFormModel.type !== 'DYNAMIC') {
+			return [];
+		}
+		return getPanelIdsReferencingVariable(
+			dashboard.spec.panels,
+			editingFormModel.dynamicAttribute,
+			editingFormModel.name,
+		);
+	}, [editingFormModel, dashboard.spec.panels]);
+
 	const persist = (next: VariableFormModel[]): void => {
 		setVariables(next);
 		void save(next);
 	};
 
-	const handleFormSave = (Formmodel: VariableFormModel): void => {
+	const handleFormSave = (
+		formModel: VariableFormModel,
+		selectedPanelIds: string[],
+	): void => {
 		const next = [...variables];
 		if (isEditing?.type === 'new') {
-			next.push(Formmodel);
+			next.push(formModel);
 		} else if (isEditing?.type === 'edit') {
-			next[isEditing.index] = Formmodel;
+			next[isEditing.index] = formModel;
 		}
 		setIsEditing(null);
-		persist(next);
+		setVariables(next);
+		void (async (): Promise<void> => {
+			const saved = await save(next);
+			if (!saved || formModel.type !== 'DYNAMIC') {
+				return;
+			}
+			const ops = buildSyncVariableToPanelsPatch(
+				dashboard.spec.panels,
+				formModel.dynamicAttribute,
+				formModel.name,
+				selectedPanelIds,
+			);
+			if (ops.length === 0) {
+				return;
+			}
+			try {
+				await patchAsync(ops);
+			} catch {
+				toast.error('Could not update panels');
+			}
+		})();
 	};
 
 	const handleMove = (from: number, to: number): void => {
@@ -88,6 +149,32 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 		setConfirmDeleteIndex(null);
 	};
 
+	const applyToAllVariable =
+		applyToAllIndex === null ? null : variables[applyToAllIndex];
+
+	const handleConfirmApplyToAll = async (): Promise<void> => {
+		if (!applyToAllVariable) {
+			return;
+		}
+		const ops = buildApplyVariableToPanelsPatch(
+			dashboard.spec.panels,
+			applyToAllVariable.dynamicAttribute,
+			applyToAllVariable.name,
+		);
+		if (ops.length === 0) {
+			toast.info('No panels needed this filter.');
+			setApplyToAllIndex(null);
+			return;
+		}
+		try {
+			await patchAsync(ops);
+			toast.success(`Applied $${applyToAllVariable.name} to all panels`);
+		} catch {
+			toast.error('Could not apply the variable to panels');
+		}
+		setApplyToAllIndex(null);
+	};
+
 	if (editingFormModel) {
 		return (
 			<VariableForm
@@ -95,6 +182,8 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 				siblings={siblings}
 				isNew={isEditing?.type === 'new'}
 				isSaving={isSaving}
+				panelOptions={panelOptions}
+				appliedPanelIds={appliedPanelIds}
 				onClose={(): void => setIsEditing(null)}
 				onSave={handleFormSave}
 			/>
@@ -108,9 +197,6 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 				<NoVariablesCard isEditable={isEditable} setIsEditing={setIsEditing} />
 			) : (
 				<>
-					<div className={styles.header}>
-						<AddVariableButton isEditable={isEditable} setIsEditing={setIsEditing} />
-					</div>
 					<VariablesList
 						variables={variables}
 						canEdit={isEditable}
@@ -120,9 +206,20 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 						onConfirmDelete={handleConfirmDelete}
 						onCancelDelete={(): void => setConfirmDeleteIndex(null)}
 						onMove={handleMove}
+						onApplyToAll={(index): void => setApplyToAllIndex(index)}
 					/>
+					<div className={styles.footer}>
+						<AddVariableButton isEditable={isEditable} setIsEditing={setIsEditing} />
+					</div>
 				</>
 			)}
+			<ApplyToAllDialog
+				open={applyToAllVariable !== null}
+				variableName={applyToAllVariable?.name ?? ''}
+				isLoading={isPatching}
+				onConfirm={(): void => void handleConfirmApplyToAll()}
+				onClose={(): void => setApplyToAllIndex(null)}
+			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/types.ts

@@ -6,6 +6,11 @@ export type EditingState =
 	| { type: 'edit'; index: number }
 	| null;
 
+export interface PanelOption {
+	label: string;
+	value: string;
+}
+
 export interface VariableFormProps {
 	initial: VariableFormModel;
 	/** The other variables (excluding this one), for uniqueness & cycle checks. */
@@ -13,6 +18,10 @@ export interface VariableFormProps {
 	/** True when adding a new variable (enables auto-naming from the attribute). */
 	isNew: boolean;
 	isSaving: boolean;
+	/** All panels, for the dynamic "apply to panels" picker. */
+	panelOptions: PanelOption[];
+	/** Panels this variable is already applied to — pre-checks the picker. */
+	appliedPanelIds: string[];
 	onClose: () => void;
-	onSave: (model: VariableFormModel) => void;
+	onSave: (model: VariableFormModel, selectedPanelIds: string[]) => void;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters.ts

@@ -14,6 +14,7 @@ import type {
 
 import {
 	DYNAMIC_SIGNAL_ALL,
+	DYNAMIC_SIGNALS,
 	type DynamicSignalOption,
 	emptyVariableFormModel,
 	signalForApi,
@@ -68,9 +69,12 @@ export function dtoToFormModel(
 			...listCommon,
 			type: 'DYNAMIC',
 			dynamicAttribute: plugin.spec.name ?? '',
-			// An omitted wire signal means "all telemetry".
-			dynamicSignal:
-				(plugin.spec.signal as DynamicSignalOption) ?? DYNAMIC_SIGNAL_ALL,
+			// Unrecognized/empty signal → "all telemetry", so the source always shows.
+			dynamicSignal: DYNAMIC_SIGNALS.includes(
+				plugin.spec.signal as DynamicSignalOption,
+			)
+				? (plugin.spec.signal as DynamicSignalOption)
+				: DYNAMIC_SIGNAL_ALL,
 		};
 	}
 	// Default to Query (also covers a query plugin or a missing/unknown plugin).

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

@@ -17,6 +17,7 @@ import { useAppContext } from 'providers/App/App';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { USER_ROLES } from 'types/roles';
 
+import { useDashboardStore } from '../store/useDashboardStore';
 import styles from './DashboardSettings.module.scss';
 
 interface DashboardSettingsProps {
@@ -38,6 +39,9 @@ const prefixIcons: Record<TabKeys, JSX.Element> = {
 function DashboardSettings({ dashboard }: DashboardSettingsProps): JSX.Element {
 	const { user } = useAppContext();
 	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
+	// Opened once per drawer mount (the drawer destroys on close); a deep-link
+	// request lands us on the right tab.
+	const settingsRequest = useDashboardStore((s) => s.settingsRequest);
 
 	const enablePublicDashboard = isCloudUser || isEnterpriseSelfHostedUser;
 
@@ -69,7 +73,7 @@ function DashboardSettings({ dashboard }: DashboardSettingsProps): JSX.Element {
 	);
 
 	return (
-		<TabsRoot defaultValue={TabKeys.OVERVIEW}>
+		<TabsRoot defaultValue={settingsRequest?.tab ?? TabKeys.OVERVIEW}>
 			<TabsList variant="primary">
 				{Object.values(TabKeys).map((key) => (
 					<TabsTrigger value={key} key={key}>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/DashboardEmptyState/DashboardEmptyState.module.scss

@@ -25,7 +25,6 @@
 
 	.welcome {
 		color: var(--l1-foreground);
-		font-family: Inter;
 		font-size: 16px;
 		font-weight: 500;
 		line-height: 24px;
@@ -34,52 +33,56 @@
 
 	.welcomeInfo {
 		color: var(--l3-foreground);
-		font-family: Inter;
 		font-size: 13px;
 		font-weight: 400;
 		line-height: 18px;
 	}
 }
 
-.addPanel {
+.steps {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.step {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	gap: 16px;
 	padding: 16px;
-	border: 1px dashed var(--l1-border);
+	border: 1px dashed var(--l3-border);
 	border-radius: 6px;
 }
 
-.addPanelText {
+.stepText {
 	display: flex;
 	align-items: flex-start;
 	gap: 10px;
 
-	.icon {
+	.stepIcon {
 		height: 14px;
 		width: 14px;
 		margin-top: 2px;
+		flex: none;
 	}
 }
 
-.addPanelCopy {
+.stepCopy {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
 }
 
-.addPanelTitle {
+.stepTitle {
 	color: var(--l1-foreground);
-	font-family: Inter;
 	font-size: 14px;
 	font-weight: 500;
 	line-height: 20px;
 }
 
-.addPanelInfo {
+.stepInfo {
 	color: var(--l3-foreground);
-	font-family: Inter;
 	font-size: 13px;
 	font-weight: 400;
 	line-height: 18px;

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

@@ -1,4 +1,4 @@
-import { Plus } from '@signozhq/icons';
+import { Configure, Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 
@@ -6,6 +6,7 @@ import dashboardEmojiUrl from '@/assets/Icons/dashboard_emoji.svg';
 import landscapeUrl from '@/assets/Icons/landscape.svg';
 
 import { useCreatePanel } from '../../hooks/useCreatePanel';
+import { useDashboardStore } from '../../store/useDashboardStore';
 import PanelTypeSelectionModal from '../Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
 import styles from './DashboardEmptyState.module.scss';
 
@@ -18,6 +19,8 @@ function DashboardEmptyState({
 }: DashboardEmptyStateProps): JSX.Element {
 	const { isPickerOpen, openPicker, closePicker, createPanel } =
 		useCreatePanel();
+	const isEditable = useDashboardStore((s) => s.isEditable);
+	const requestSettings = useDashboardStore((s) => s.requestSettings);
 
 	return (
 		<section className={styles.emptyState}>
@@ -32,28 +35,55 @@ function DashboardEmptyState({
 					</Typography.Text>
 				</div>
 
-				<div className={styles.addPanel}>
-					<div className={styles.addPanelText}>
-						<img src={landscapeUrl} alt="" className={styles.icon} />
-						<div className={styles.addPanelCopy}>
-							<Typography.Text className={styles.addPanelTitle}>
-								Add panels
-							</Typography.Text>
-							<Typography.Text className={styles.addPanelInfo}>
-								Add panels to visualize your data
-							</Typography.Text>
+				<div className={styles.steps}>
+					<div className={styles.step}>
+						<div className={styles.stepText}>
+							<Configure size={14} className={styles.stepIcon} />
+							<div className={styles.stepCopy}>
+								<Typography.Text className={styles.stepTitle}>
+									Configure your new dashboard
+								</Typography.Text>
+								<Typography.Text className={styles.stepInfo}>
+									Give it a name, add description, tags and variables
+								</Typography.Text>
+							</div>
 						</div>
+						{isEditable && (
+							<Button
+								variant="solid"
+								color="secondary"
+								prefix={<Configure size="md" />}
+								onClick={(): void => requestSettings({ tab: 'Overview' })}
+								testId="empty-configure"
+							>
+								Configure
+							</Button>
+						)}
+					</div>
+
+					<div className={styles.step}>
+						<div className={styles.stepText}>
+							<img src={landscapeUrl} alt="" className={styles.stepIcon} />
+							<div className={styles.stepCopy}>
+								<Typography.Text className={styles.stepTitle}>
+									Add panels
+								</Typography.Text>
+								<Typography.Text className={styles.stepInfo}>
+									Add panels to visualize your data
+								</Typography.Text>
+							</div>
+						</div>
+						{canAddPanel && (
+							<Button
+								color="primary"
+								prefix={<Plus size="md" />}
+								onClick={(): void => openPicker()}
+								testId="add-panel"
+							>
+								New Panel
+							</Button>
+						)}
 					</div>
-					{canAddPanel && (
-						<Button
-							color="primary"
-							prefix={<Plus size="md" />}
-							onClick={(): void => openPicker()}
-							testId="add-panel"
-						>
-							New Panel
-						</Button>
-					)}
 				</div>
 			</div>
 			<PanelTypeSelectionModal

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/AddVariableFull.tsx

@@ -0,0 +1,31 @@
+import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+
+import { useDashboardStore } from '../store/useDashboardStore';
+import styles from './VariablesBar.module.scss';
+
+/**
+ * Full-width labelled "Add variable" button shown in the empty state, before any
+ * variables exist. Opens the Variables settings tab with the add form primed.
+ */
+function AddVariableFull(): JSX.Element {
+	const requestSettings = useDashboardStore((s) => s.requestSettings);
+
+	return (
+		<Button
+			variant="outlined"
+			color="secondary"
+			size="md"
+			className={styles.addVariable}
+			prefix={<Plus size={14} />}
+			testId="dashboard-variables-add"
+			onClick={(): void =>
+				requestSettings({ tab: 'Variables', addVariable: true })
+			}
+		>
+			Add variable
+		</Button>
+	);
+}
+
+export default AddVariableFull;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/AddVariableIcon.tsx

@@ -0,0 +1,35 @@
+import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+
+import { useDashboardStore } from '../store/useDashboardStore';
+import styles from './VariablesBar.module.scss';
+
+/**
+ * Compact "+" trigger (label on hover) shown after the variable pills once at
+ * least one variable exists. Opens the Variables settings tab with the add form
+ * primed.
+ */
+function AddVariableIcon(): JSX.Element {
+	const requestSettings = useDashboardStore((s) => s.requestSettings);
+
+	return (
+		<TooltipSimple side="top" title="Add variable">
+			<Button
+				variant="outlined"
+				color="secondary"
+				size="icon"
+				className={styles.addVariable}
+				aria-label="Add variable"
+				testId="dashboard-variables-add"
+				onClick={(): void =>
+					requestSettings({ tab: 'Variables', addVariable: true })
+				}
+			>
+				<Plus size={14} />
+			</Button>
+		</TooltipSimple>
+	);
+}
+
+export default AddVariableIcon;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariablesBar.module.scss

@@ -1,9 +1,21 @@
+// Block (not flex) so the strip wraps around the floated time selector: one line
+// beside it when collapsed, and — via `.stripExpanded`'s `clear: both` — dropping
+// full-width below it when expanded. A flex `.bar` would be a BFC that sits beside
+// the float and makes the child strip's `clear` inert.
 .bar {
 	min-width: 0;
 }
 
+.addVariable {
+	flex: none;
+	border-style: dashed !important;
+	border-color: var(--l3-border) !important;
+}
+
 .strip {
 	display: flow-root;
+	// Collapsed: one line only, so the trailing add "+" never wraps below.
+	white-space: nowrap;
 }
 
 .stripExpanded {
@@ -12,10 +24,12 @@
 	gap: 8px;
 	padding-top: 12px;
 	overflow: visible;
+	white-space: normal;
 	clear: both;
 
 	.variableSlot,
-	.moreButton {
+	.moreButton,
+	.addSlot {
 		margin: 0;
 	}
 
@@ -48,6 +62,12 @@
 }
 
 .moreButton {
+	display: inline-flex;
+	margin-right: 8px;
+	vertical-align: top;
+}
+
+.addSlot {
 	display: inline-flex;
 	vertical-align: top;
 }

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

@@ -6,6 +6,9 @@ import cx from 'classnames';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 import { useInlineOverflowCount } from 'hooks/useInlineOverflowCount';
 
+import { useDashboardStore } from '../store/useDashboardStore';
+import AddVariableFull from './AddVariableFull';
+import AddVariableIcon from './AddVariableIcon';
 import type { VariableSelection } from './selectionTypes';
 import { useVariableSelection } from './useVariableSelection';
 import VariableSelector from './VariableSelector';
@@ -44,15 +47,19 @@ interface VariablesBarProps {
 function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
 	const { variables, selection, setSelection, autoSelect } =
 		useVariableSelection(dashboard);
+	const isEditable = useDashboardStore((s) => s.isEditable);
 	const [expanded, setExpanded] = useState(false);
 	const { containerRef, visibleCount, overflowCount } = useInlineOverflowCount({
 		itemCount: variables.length,
 		gap: 8,
-		reserveWidth: 48,
+		// Reserve room for the "+N" trigger and the add "+" so both stay on one line.
+		reserveWidth: isEditable ? 112 : 48,
 		enabled: !expanded,
 	});
 
-	if (variables.length === 0) {
+	// Editors can add a variable even before any exist; viewers with no variables
+	// have nothing to show.
+	if (variables.length === 0 && !isEditable) {
 		return null;
 	}
 
@@ -74,6 +81,14 @@ function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
 		</Button>
 	);
 
+	if (variables.length === 0) {
+		return (
+			<div className={styles.bar} data-testid="dashboard-variables-bar">
+				<AddVariableFull />
+			</div>
+		);
+	}
+
 	return (
 		<div className={styles.bar} data-testid="dashboard-variables-bar">
 			<div
@@ -128,6 +143,15 @@ function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
 						)}
 					</span>
 				)}
+
+				{/* After the more/less trigger, in every state. Kept inline (not block)
+				    so the row still flows under the floated time selector, and always
+				    mounted so measuring never toggles it. */}
+				{isEditable && (
+					<span className={styles.addSlot}>
+						<AddVariableIcon />
+					</span>
+				)}
 			</div>
 		</div>
 	);

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

@@ -59,12 +59,16 @@ function DashboardContainer({
 	return (
 		<FullScreen handle={fullScreenHandle}>
 			<div className={styles.container}>
-				<DashboardPageHeader title={name} image={image} />
-				<DashboardPageToolbar
-					dashboard={dashboard}
-					handle={fullScreenHandle}
-					refetch={refetch}
-				/>
+				{!fullScreenHandle.active && (
+					<>
+						<DashboardPageHeader title={name} image={image} />
+						<DashboardPageToolbar
+							dashboard={dashboard}
+							handle={fullScreenHandle}
+							refetch={refetch}
+						/>
+					</>
+				)}
 				<PanelsAndSectionsLayout layouts={spec.layouts} panels={spec.panels} />
 			</div>
 		</FullScreen>

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

@@ -0,0 +1,39 @@
+import type { StateCreator } from 'zustand';
+
+import type { DashboardStore } from '../useDashboardStore';
+
+/** Which settings-drawer tab to open. Mirrors the DashboardSettings tab keys. */
+export type SettingsTab = 'Overview' | 'Variables' | 'Publish';
+
+export interface SettingsRequest {
+	tab: SettingsTab;
+	/** Open the add-variable form immediately (Variables tab only). */
+	addVariable?: boolean;
+}
+
+/**
+ * A transient request to open the settings drawer at a given tab/action, so a
+ * control anywhere in the tree (e.g. the "Add variable" button in the variables
+ * bar) can deep-link into the drawer without prop-threading. Not persisted;
+ * cleared when the drawer closes.
+ */
+export interface SettingsRequestSlice {
+	settingsRequest: SettingsRequest | null;
+	requestSettings: (request: SettingsRequest) => void;
+	clearSettingsRequest: () => void;
+}
+
+export const createSettingsRequestSlice: StateCreator<
+	DashboardStore,
+	[['zustand/persist', unknown]],
+	[],
+	SettingsRequestSlice
+> = (set) => ({
+	settingsRequest: null,
+	requestSettings: (settingsRequest): void => {
+		set({ settingsRequest });
+	},
+	clearSettingsRequest: (): void => {
+		set({ settingsRequest: null });
+	},
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/store/useDashboardStore.ts

@@ -17,11 +17,16 @@ import {
 	createVariableFetchSlice,
 	type VariableFetchSlice,
 } from './slices/variableFetchSlice';
+import {
+	createSettingsRequestSlice,
+	type SettingsRequestSlice,
+} from './slices/settingsRequestSlice';
 
 export type DashboardStore = EditContextSlice &
 	CollapseSlice &
 	VariableSelectionSlice &
-	VariableFetchSlice;
+	VariableFetchSlice &
+	SettingsRequestSlice;
 
 /**
  * V2 dashboard session store. Holds cross-cutting client state only — never the
@@ -37,6 +42,7 @@ export const useDashboardStore = create<DashboardStore>()(
 			...createCollapseSlice(...a),
 			...createVariableSelectionSlice(...a),
 			...createVariableFetchSlice(...a),
+			...createSettingsRequestSlice(...a),
 		}),
 		{
 			name: '@signoz/dashboard-v2',