fix: add build cache path for local

.github/workflows/e2eci.yaml

@@ -45,9 +45,15 @@ jobs:
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-e2e')
     runs-on: ubuntu-latest
     timeout-minutes: 30
+    env:
+      SIGNOZ_BUILDX_GHA_SCOPE: signoz-e2e
     steps:
       - name: checkout
         uses: actions/checkout@v4
+      - name: setup-buildx
+        uses: docker/setup-buildx-action@v3
+      - name: expose-gha-runtime
+        uses: crazy-max/ghaction-github-runtime@04d248b84655b509d8c44dc1d6f990c879747487
       - name: python
         uses: actions/setup-python@v5
         with:

.github/workflows/integrationci.yaml

@@ -70,9 +70,15 @@ jobs:
       ((github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-integrate')
     runs-on: ubuntu-latest
+    env:
+      SIGNOZ_BUILDX_GHA_SCOPE: signoz-integration
     steps:
       - name: checkout
         uses: actions/checkout@v4
+      - name: setup-buildx
+        uses: docker/setup-buildx-action@v3
+      - name: expose-gha-runtime
+        uses: crazy-max/ghaction-github-runtime@04d248b84655b509d8c44dc1d6f990c879747487
       - name: python
         uses: actions/setup-python@v5
         with:

Makefile

@@ -34,6 +34,8 @@ DOCKER_BUILD_ARCHS_ENTERPRISE 	= $(addprefix docker-build-enterprise-,$(ARCHS))
 DOCKERFILE_ENTERPRISE 			= $(SRC)/cmd/enterprise/Dockerfile
 DOCKER_REGISTRY_ENTERPRISE 		?= docker.io/signoz/signoz
 JS_BUILD_CONTEXT 				= $(SRC)/frontend
+DOCKER_BUILDX_PRUNE_FLAGS 		?= --force
+SIGNOZ_INTEGRATION_BUILD_CACHE_DIR 	?= /tmp/signoz-integration-buildx-cache
 
 ##############################################################
 # directories
@@ -210,7 +212,7 @@ py-lint: ## Run ruff check across the shared tests project
 
 .PHONY: py-test-setup
 py-test-setup: ## Bring up the shared SigNoz backend used by integration and e2e tests
-	@cd tests && uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no integration/bootstrap/setup.py::test_setup
+	@cd tests && SIGNOZ_INTEGRATION_BUILD_CACHE_DIR=$(SIGNOZ_INTEGRATION_BUILD_CACHE_DIR) uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no integration/bootstrap/setup.py::test_setup
 
 .PHONY: py-test-teardown
 py-test-teardown: ## Tear down the shared SigNoz backend
@@ -229,6 +231,21 @@ py-clean: ## Clear all pycache and pytest cache from tests directory recursively
 	@find tests -type f -name "*.pyo" -delete 2>/dev/null || true
 	@echo ">> python cache cleaned"
 
+.PHONY: py-docker-clean
+py-docker-clean: ## Remove Docker image and build caches used by python integration tests
+	@echo ">> removing SigNoz integration test image"
+	@docker image rm -f signoz:integration 2>/dev/null || true
+	@echo ">> removing local integration buildx cache directories"
+	@rm -rf $(SIGNOZ_INTEGRATION_BUILD_CACHE_DIR) $(SIGNOZ_INTEGRATION_BUILD_CACHE_DIR)-next
+	@echo ">> pruning docker buildx cache with flags: $(DOCKER_BUILDX_PRUNE_FLAGS)"
+	@docker buildx prune $(DOCKER_BUILDX_PRUNE_FLAGS)
+
+.PHONY: py-test-clean
+py-test-clean: ## Tear down python test stack and remove python/Docker test caches
+	@$(MAKE) py-test-teardown || true
+	@$(MAKE) py-clean
+	@$(MAKE) py-docker-clean
+
 
 ##############################################################
 # generate commands

cmd/enterprise/Dockerfile.integration

@@ -1,3 +1,5 @@
+# syntax=docker/dockerfile:1.13
+
 FROM golang:1.25-bookworm
 
 ARG OS="linux"
@@ -21,7 +23,8 @@ RUN set -eux; \
 
 COPY go.mod go.sum ./
 
-RUN go mod download
+RUN --mount=type=cache,target=/go/pkg/mod \
+	go mod download
 
 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
@@ -29,7 +32,9 @@ COPY ./pkg/ ./pkg/
 COPY ./templates /root/templates
 
 COPY Makefile Makefile
-RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
+RUN --mount=type=cache,target=/go/pkg/mod \
+	--mount=type=cache,target=/root/.cache/go-build \
+	TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
 RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
 
 RUN chmod 755 /root /root/signoz

cmd/enterprise/Dockerfile.with-web.integration

@@ -1,3 +1,5 @@
+# syntax=docker/dockerfile:1.13
+
 FROM node:22-bookworm AS build
 
 WORKDIR /opt/
@@ -30,7 +32,8 @@ RUN set -eux; \
 
 COPY go.mod go.sum ./
 
-RUN go mod download
+RUN --mount=type=cache,target=/go/pkg/mod \
+	go mod download
 
 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
@@ -38,7 +41,9 @@ COPY ./pkg/ ./pkg/
 COPY ./templates /root/templates
 
 COPY Makefile Makefile
-RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
+RUN --mount=type=cache,target=/go/pkg/mod \
+	--mount=type=cache,target=/root/.cache/go-build \
+	TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
 RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
 
 COPY --from=build /opt/build ./web/

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

@@ -16,17 +16,14 @@ import { Button } from '@signozhq/ui/button';
 import { toast } from '@signozhq/ui/sonner';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
 
-import DashboardSettings from '../../DashboardSettings';
-import SettingsDrawer from '../SettingsDrawer';
 import styles from '../DashboardDescription.module.scss';
 
-interface DashboardActionsProps {
+interface Props {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	handle: FullScreenHandle;
 	isDashboardLocked: boolean;
@@ -48,7 +45,7 @@ function DashboardActions({
 	onAddPanel,
 	onLockToggle,
 	onOpenRename,
-}: DashboardActionsProps): JSX.Element {
+}: Props): JSX.Element {
 	const { user } = useAppContext();
 	const { t } = useTranslation(['dashboard', 'common']);
 
@@ -58,9 +55,6 @@ function DashboardActions({
 	const [isDashboardSettingsOpen, setIsDashboardSettingsOpen] =
 		useState<boolean>(false);
 
-	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
-		useState<boolean>(false);
-
 	const [state, setCopy] = useCopyToClipboard();
 
 	useEffect(() => {
@@ -185,26 +179,6 @@ function DashboardActions({
 					testId="options"
 				/>
 			</Popover>
-			{!isDashboardLocked && editDashboard && (
-				<>
-					<Button
-						variant="ghost"
-						className={styles.configureButton}
-						prefix={<ConfigureIcon />}
-						testId="show-drawer"
-						onClick={(): void => setIsSettingsDrawerOpen(true)}
-					>
-						Configure
-					</Button>
-					<SettingsDrawer
-						drawerTitle="Dashboard Configuration"
-						isOpen={isSettingsDrawerOpen}
-						onClose={(): void => setIsSettingsDrawerOpen(false)}
-					>
-						<DashboardSettings dashboard={dashboard} />
-					</SettingsDrawer>
-				</>
-			)}
 			{!isDashboardLocked && addPanelPermission && (
 				<Button
 					variant="solid"

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

@@ -42,14 +42,6 @@
 				overflow: hidden;
 			}
 
-			.clickableTitle {
-				cursor: pointer;
-			}
-
-			.titleInput {
-				max-width: 80%;
-			}
-
 			.publicDashboardIcon {
 				margin-right: 4px;
 			}
@@ -216,3 +208,96 @@
 		}
 	}
 }
+
+.renameDashboard {
+	:global(.ant-modal-content) {
+		width: 384px;
+		flex-shrink: 0;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		padding: 0px;
+
+		:global(.ant-modal-header) {
+			height: 52px;
+			padding: 16px;
+			background: var(--l2-background);
+			border-bottom: 1px solid var(--l1-border);
+			margin-bottom: 0px;
+
+			:global(.ant-modal-title) {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				width: 349px;
+				height: 20px;
+			}
+		}
+
+		:global(.ant-modal-body) {
+			padding: 16px;
+
+			.dashboardContent {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+
+				.nameText {
+					color: var(--l1-foreground);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 20px; /* 142.857% */
+				}
+
+				.dashboardNameInput {
+					display: flex;
+					padding: 6px 6px 6px 8px;
+					align-items: center;
+					gap: 4px;
+					align-self: stretch;
+					border-radius: 0px 2px 2px 0px;
+					border: 1px solid var(--l1-border);
+					background: var(--l3-background);
+				}
+			}
+		}
+
+		:global(.ant-modal-footer) {
+			padding: 16px;
+			margin-top: 0px;
+
+			.dashboardRename {
+				display: flex;
+				flex-direction: row-reverse;
+				gap: 12px;
+
+				.cancelBtn {
+					display: flex;
+					padding: 4px 8px;
+					justify-content: center;
+					align-items: center;
+					gap: 4px;
+					border-radius: 2px;
+					background: var(--l1-border);
+				}
+
+				.renameBtn {
+					display: flex;
+					align-items: center;
+					width: 169px;
+					padding: 4px 8px;
+					justify-content: center;
+					gap: 4px;
+					border-radius: 2px;
+					background: var(--primary-background);
+				}
+			}
+		}
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardMeta/DashboardMeta.tsx

@@ -3,12 +3,12 @@ import { isEmpty } from 'lodash-es';
 
 import styles from '../DashboardDescription.module.scss';
 
-interface DashboardMetaProps {
+interface Props {
 	tags: string[];
 	description: string;
 }
 
-function DashboardMeta({ tags, description }: DashboardMetaProps): JSX.Element {
+function DashboardMeta({ tags, description }: Props): JSX.Element {
 	return (
 		<>
 			{tags.length > 0 && (

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/DashboardTitle.tsx

@@ -1,24 +1,14 @@
-import { KeyboardEvent } from 'react';
 import { Globe, LockKeyhole } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
 
 import styles from '../DashboardDescription.module.scss';
 
-interface DashboardTitleProps {
+interface Props {
 	title: string;
 	image: string;
 	isPublicDashboard: boolean;
 	isDashboardLocked: boolean;
-	isEditable: boolean;
-	isEditing: boolean;
-	draft: string;
-	onDraftChange: (value: string) => void;
-	onStartEdit: () => void;
-	onCommit: () => void;
-	onCancel: () => void;
 }
 
 function DashboardTitle({
@@ -26,52 +16,18 @@ function DashboardTitle({
 	image,
 	isPublicDashboard,
 	isDashboardLocked,
-	isEditable,
-	isEditing,
-	draft,
-	onDraftChange,
-	onStartEdit,
-	onCommit,
-	onCancel,
-}: DashboardTitleProps): JSX.Element {
-	const canEdit = isEditable && !isDashboardLocked;
-
-	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
-		if (event.key === 'Enter') {
-			event.preventDefault();
-			onCommit();
-		} else if (event.key === 'Escape') {
-			onCancel();
-		}
-	};
-
+}: Props): JSX.Element {
 	return (
 		<div className={styles.leftSection}>
 			<img src={image} alt="dashboard-img" className={styles.dashboardImg} />
-			{isEditing ? (
-				<Input
-					autoFocus
-					value={draft}
-					testId="dashboard-title-input"
-					maxLength={120}
-					className={styles.titleInput}
-					onChange={(e): void => onDraftChange(e.target.value)}
-					onBlur={onCommit}
-					onKeyDown={onKeyDown}
-				/>
-			) : (
-				<TooltipSimple title={title.length > 30 ? title : ''}>
-					<Typography.Text
-						className={cx(styles.dashboardTitle, {
-							[styles.clickableTitle]: canEdit,
-						})}
-						data-testid="dashboard-title"
-						onClick={canEdit ? onStartEdit : undefined}
-					>
-						{title}
-					</Typography.Text>
-				</TooltipSimple>
-			)}
+			<TooltipSimple title={title.length > 30 ? title : ''}>
+				<Typography.Text
+					className={styles.dashboardTitle}
+					data-testid="dashboard-title"
+				>
+					{title}
+				</Typography.Text>
+			</TooltipSimple>
 
 			{isPublicDashboard && (
 				<TooltipSimple title="This dashboard is publicly accessible">

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/useEditableTitle.ts

@@ -1,63 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-interface UseEditableTitleArgs {
-	value: string;
-	onSave: (next: string) => void;
-}
-
-interface UseEditableTitleResult {
-	isEditing: boolean;
-	draft: string;
-	setDraft: (next: string) => void;
-	startEdit: () => void;
-	cancel: () => void;
-	commit: () => void;
-}
-
-/**
- * Drives an inline-editable title. The parent owns the canonical `value`; this
- * hook tracks the in-flight `draft` and whether we're editing. `commit` saves
- * only when the trimmed draft is non-empty and actually changed. A `cancelled`
- * ref guards against a blur firing right after Escape from also committing.
- */
-export function useEditableTitle({
-	value,
-	onSave,
-}: UseEditableTitleArgs): UseEditableTitleResult {
-	const [isEditing, setIsEditing] = useState<boolean>(false);
-	const [draft, setDraft] = useState<string>(value);
-	const cancelled = useRef<boolean>(false);
-
-	// Keep the draft in sync with the canonical value while not editing (e.g.
-	// after a refetch updates the title).
-	useEffect(() => {
-		if (!isEditing) {
-			setDraft(value);
-		}
-	}, [value, isEditing]);
-
-	const startEdit = (): void => {
-		cancelled.current = false;
-		setDraft(value);
-		setIsEditing(true);
-	};
-
-	const cancel = (): void => {
-		cancelled.current = true;
-		setIsEditing(false);
-	};
-
-	const commit = (): void => {
-		if (cancelled.current) {
-			cancelled.current = false;
-			return;
-		}
-		const trimmed = draft.trim();
-		if (trimmed && trimmed !== value) {
-			onSave(trimmed);
-		}
-		setIsEditing(false);
-	};
-
-	return { isEditing, draft, setDraft, startEdit, cancel, commit };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/RenameDashboardModal/RenameDashboardModal.tsx

@@ -0,0 +1,70 @@
+import { Input, Modal } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { Check, X } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from '../DashboardDescription.module.scss';
+
+interface Props {
+	open: boolean;
+	value: string;
+	isLoading: boolean;
+	onChange: (value: string) => void;
+	onRename: () => void;
+	onClose: () => void;
+}
+
+function RenameDashboardModal({
+	open,
+	value,
+	isLoading,
+	onChange,
+	onRename,
+	onClose,
+}: Props): JSX.Element {
+	return (
+		<Modal
+			open={open}
+			title="Rename Dashboard"
+			onOk={onRename}
+			onCancel={onClose}
+			rootClassName={styles.renameDashboard}
+			footer={
+				<div className={styles.dashboardRename}>
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Check size={14} />}
+						className={styles.renameBtn}
+						onClick={onRename}
+						disabled={isLoading}
+					>
+						Rename Dashboard
+					</Button>
+					<Button
+						variant="ghost"
+						prefix={<X size={14} />}
+						className={styles.cancelBtn}
+						onClick={onClose}
+					>
+						Cancel
+					</Button>
+				</div>
+			}
+		>
+			<div className={styles.dashboardContent}>
+				<Typography.Text className={styles.nameText}>
+					Enter a new name
+				</Typography.Text>
+				<Input
+					data-testid="dashboard-name"
+					className={styles.dashboardNameInput}
+					value={value}
+					onChange={(e): void => onChange(e.target.value)}
+				/>
+			</div>
+		</Modal>
+	);
+}
+
+export default RenameDashboardModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/SettingsDrawer/SettingsDrawer.module.scss

@@ -1,43 +0,0 @@
-.settingsContainerRoot {
-	:global(.ant-drawer-wrapper-body) {
-		border-left: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-
-		:global(.ant-drawer-header) {
-			height: 48px;
-			border-bottom: 1px solid var(--l1-border);
-			padding: 14px 14px 14px 11px;
-
-			:global(.ant-drawer-header-title) {
-				gap: 16px;
-
-				:global(.ant-drawer-title) {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-					padding-left: 16px;
-					border-left: 1px solid var(--l1-border);
-				}
-
-				:global(.ant-drawer-close) {
-					height: 16px;
-					width: 16px;
-					margin-inline-end: 0px !important;
-				}
-			}
-		}
-
-		:global(.ant-drawer-body) {
-			padding: 16px;
-
-			&::-webkit-scrollbar {
-				width: 0.1rem;
-			}
-		}
-	}
-}

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

@@ -1,34 +0,0 @@
-import { memo, PropsWithChildren, ReactElement } from 'react';
-import { Drawer } from 'antd';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-
-import styles from './SettingsDrawer.module.scss';
-
-type SettingsDrawerProps = PropsWithChildren<{
-	drawerTitle: string;
-	isOpen: boolean;
-	onClose: () => void;
-}>;
-
-function SettingsDrawer({
-	children,
-	drawerTitle,
-	isOpen,
-	onClose,
-}: SettingsDrawerProps): JSX.Element {
-	return (
-		<Drawer
-			title={drawerTitle}
-			placement="right"
-			width="50%"
-			onClose={onClose}
-			open={isOpen}
-			rootClassName={styles.settingsContainerRoot}
-		>
-			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}
-			<OverlayScrollbar>{children as ReactElement}</OverlayScrollbar>
-		</Drawer>
-	);
-}
-
-export default memo(SettingsDrawer);

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { Card } from 'antd';
 import { toast } from '@signozhq/ui/sonner';
@@ -22,7 +22,7 @@ import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
 import DashboardActions from './DashboardActions/DashboardActions';
 import DashboardMeta from './DashboardMeta/DashboardMeta';
 import DashboardTitle from './DashboardTitle/DashboardTitle';
-import { useEditableTitle } from './DashboardTitle/useEditableTitle';
+import RenameDashboardModal from './RenameDashboardModal/RenameDashboardModal';
 
 import styles from './DashboardDescription.module.scss';
 
@@ -59,7 +59,16 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	// V2 public dashboard wiring lives separately; treat as not-public for chrome.
 	const isPublicDashboard = false;
 
-	const handleLockDashboardToggle = useCallback(async (): Promise<void> => {
+	const [isRenameDashboardOpen, setIsRenameDashboardOpen] =
+		useState<boolean>(false);
+	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
+	const [isRenameLoading, setIsRenameLoading] = useState<boolean>(false);
+
+	useEffect(() => {
+		setUpdatedTitle(title);
+	}, [title]);
+
+	const handleLockDashboardToggle = async (): Promise<void> => {
 		if (!id) {
 			return;
 		}
@@ -75,43 +84,41 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		} catch (error) {
 			showErrorModal(error as APIError);
 		}
-	}, [id, isDashboardLocked, refetch, showErrorModal]);
+	};
 
-	const onNameSave = useCallback(
-		async (next: string): Promise<void> => {
-			if (!id) {
-				return;
-			}
-			try {
-				const patch: DashboardtypesJSONPatchOperationDTO[] = [
-					{
-						op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-						path: '/spec/display/name',
-						value: next,
-					},
-				];
-				await patchDashboardV2({ id }, patch);
-				toast.success('Dashboard renamed successfully');
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[id, refetch, showErrorModal],
-	);
+	const onNameChangeHandler = async (): Promise<void> => {
+		const trimmed = updatedTitle.trim();
+		if (!id || !trimmed || trimmed === title) {
+			setIsRenameDashboardOpen(false);
+			return;
+		}
+		try {
+			setIsRenameLoading(true);
+			const patch: DashboardtypesJSONPatchOperationDTO[] = [
+				{
+					op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
+					path: '/spec/display/name',
+					value: trimmed,
+				},
+			];
+			await patchDashboardV2({ id }, patch);
+			toast.success('Dashboard renamed successfully');
+			setIsRenameDashboardOpen(false);
+			refetch();
+		} catch (error) {
+			showErrorModal(error as APIError);
+			setIsRenameDashboardOpen(true);
+		} finally {
+			setIsRenameLoading(false);
+		}
+	};
 
-	const { isEditing, draft, setDraft, startEdit, cancel, commit } =
-		useEditableTitle({
-			value: title,
-			onSave: onNameSave,
-		});
-
-	const onEmptyWidgetHandler = useCallback((): void => {
+	const onEmptyWidgetHandler = (): void => {
 		void logEvent('Dashboard Detail V2: Add new panel clicked', {
 			dashboardId: id,
 		});
 		toast.info('V2 panel editor coming next');
-	}, [id]);
+	};
 
 	return (
 		<Card className={styles.dashboardDescriptionContainer}>
@@ -122,13 +129,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					image={image}
 					isPublicDashboard={isPublicDashboard}
 					isDashboardLocked={isDashboardLocked}
-					isEditable={editDashboard}
-					isEditing={isEditing}
-					draft={draft}
-					onDraftChange={setDraft}
-					onStartEdit={startEdit}
-					onCommit={commit}
-					onCancel={cancel}
 				/>
 				<DashboardActions
 					dashboard={dashboard}
@@ -139,10 +139,19 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					addPanelPermission={addPanelPermission}
 					onAddPanel={onEmptyWidgetHandler}
 					onLockToggle={handleLockDashboardToggle}
-					onOpenRename={startEdit}
+					onOpenRename={(): void => setIsRenameDashboardOpen(true)}
 				/>
 			</section>
 			<DashboardMeta tags={tags} description={description} />
+
+			<RenameDashboardModal
+				open={isRenameDashboardOpen}
+				value={updatedTitle}
+				isLoading={isRenameLoading}
+				onChange={setUpdatedTitle}
+				onRename={onNameChangeHandler}
+				onClose={(): void => setIsRenameDashboardOpen(false)}
+			/>
 		</Card>
 	);
 }

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

@@ -1,3 +0,0 @@
-.placeholder {
-	padding: 24px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/CrossPanelSync/CrossPanelSync.tsx

@@ -1,114 +0,0 @@
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Radio to @signozhq/ui/radio-group
-import { Col, Radio, Tooltip } from 'antd';
-import { ExternalLink, SolidInfoCircle } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-import logEvent from 'api/common/logEvent';
-import { Events } from 'constants/events';
-import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
-import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
-import {
-	DashboardCursorSync,
-	SyncTooltipFilterMode,
-} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { getAbsoluteUrl } from 'utils/basePath';
-import cx from 'classnames';
-
-import styles from '../GeneralSettings.module.scss';
-
-interface CrossPanelSyncProps {
-	dashboardId: string;
-}
-
-function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
-	const [cursorSyncMode, setCursorSyncMode] =
-		useDashboardCursorSyncMode(dashboardId);
-	const [syncTooltipFilterMode, setSyncTooltipFilterMode] =
-		useSyncTooltipFilterMode(dashboardId);
-
-	return (
-		<Col className={cx(styles.overviewSettings, styles.crossPanelSyncGroup)}>
-			<div className={styles.crossPanelSyncSectionHeader}>
-				<Typography.Text className={styles.crossPanelSyncSectionTitle}>
-					Cross-Panel Sync
-				</Typography.Text>
-				<Tooltip
-					title={
-						<div className={styles.crossPanelSyncTooltipContent}>
-							<strong className={styles.crossPanelSyncTooltipTitle}>
-								Cross-Panel Sync
-							</strong>
-							<span className={styles.crossPanelSyncTooltipDescription}>
-								Sync crosshair and tooltip across all the dashboard panels
-							</span>
-							<a
-								href="https://signoz.io/docs/dashboards/interactivity/#cross-panel-sync"
-								target="_blank"
-								rel="noopener noreferrer"
-								className={styles.crossPanelSyncTooltipDocLink}
-							>
-								Learn more
-								<ExternalLink size={12} />
-							</a>
-						</div>
-					}
-					placement="top"
-					mouseEnterDelay={0.5}
-				>
-					<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
-				</Tooltip>
-			</div>
-			<div className={styles.crossPanelSyncRow}>
-				<div className={styles.crossPanelSyncInfo}>
-					<Typography.Text className={styles.crossPanelSyncTitle}>
-						Sync Mode
-					</Typography.Text>
-					<Typography.Text className={styles.crossPanelSyncDescription}>
-						Sync crosshair and tooltip across all the dashboard panels
-					</Typography.Text>
-				</div>
-				<Radio.Group
-					value={cursorSyncMode}
-					onChange={(e): void => {
-						setCursorSyncMode(e.target.value as DashboardCursorSync);
-					}}
-				>
-					<Radio.Button value={DashboardCursorSync.None}>No Sync</Radio.Button>
-					<Radio.Button value={DashboardCursorSync.Crosshair}>
-						Crosshair
-					</Radio.Button>
-					<Radio.Button value={DashboardCursorSync.Tooltip}>Tooltip</Radio.Button>
-				</Radio.Group>
-			</div>
-			{cursorSyncMode === DashboardCursorSync.Tooltip && (
-				<div className={styles.crossPanelSyncRow}>
-					<div className={styles.crossPanelSyncInfo}>
-						<Typography.Text className={styles.crossPanelSyncTitle}>
-							Synced Tooltip Series
-						</Typography.Text>
-						<Typography.Text className={styles.crossPanelSyncDescription}>
-							Show only series that intersect on group-by, or every series with the
-							matching ones highlighted
-						</Typography.Text>
-					</div>
-					<Radio.Group
-						value={syncTooltipFilterMode}
-						onChange={(e): void => {
-							void logEvent(Events.TOOLTIP_SYNC_MODE_CHANGED, {
-								path: getAbsoluteUrl(window.location.pathname),
-								mode: e.target.value,
-							});
-							setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
-						}}
-					>
-						<Radio.Button value={SyncTooltipFilterMode.All}>All</Radio.Button>
-						<Radio.Button value={SyncTooltipFilterMode.Filtered}>
-							Filtered
-						</Radio.Button>
-					</Radio.Group>
-				</div>
-			)}
-		</Col>
-	);
-}
-
-export default CrossPanelSync;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/GeneralForm/GeneralForm.tsx

@@ -1,85 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Select/Input to @signozhq/ui
-import { Col, Input, Select, Space } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
-
-import { Base64Icons } from '../utils';
-import styles from '../GeneralSettings.module.scss';
-
-const { Option } = Select;
-
-interface GeneralFormProps {
-	title: string;
-	description: string;
-	image: string;
-	tags: string[];
-	onTitleChange: (value: string) => void;
-	onDescriptionChange: (value: string) => void;
-	onImageChange: (value: string) => void;
-	onTagsChange: Dispatch<SetStateAction<string[]>>;
-}
-
-function GeneralForm({
-	title,
-	description,
-	image,
-	tags,
-	onTitleChange,
-	onDescriptionChange,
-	onImageChange,
-	onTagsChange,
-}: GeneralFormProps): JSX.Element {
-	return (
-		<Col className={styles.overviewSettings}>
-			<Space direction="vertical" className={styles.formSpace}>
-				<div>
-					<Typography className={styles.dashboardName}>Dashboard Name</Typography>
-					<section className={styles.nameIconInput}>
-						<Select
-							defaultActiveFirstOption
-							data-testid="dashboard-image"
-							suffixIcon={null}
-							rootClassName={styles.dashboardImageInput}
-							value={image}
-							onChange={onImageChange}
-						>
-							{Base64Icons.map((icon) => (
-								<Option value={icon} key={icon}>
-									<img
-										src={icon}
-										alt="dashboard-icon"
-										className={styles.listItemImage}
-									/>
-								</Option>
-							))}
-						</Select>
-						<Input
-							data-testid="dashboard-name"
-							className={styles.dashboardNameInput}
-							value={title}
-							onChange={(e): void => onTitleChange(e.target.value)}
-						/>
-					</section>
-				</div>
-
-				<div>
-					<Typography className={styles.dashboardName}>Description</Typography>
-					<Input.TextArea
-						data-testid="dashboard-desc"
-						rows={6}
-						value={description}
-						className={styles.descriptionTextArea}
-						onChange={(e): void => onDescriptionChange(e.target.value)}
-					/>
-				</div>
-				<div>
-					<Typography className={styles.dashboardName}>Tags</Typography>
-					<AddTags tags={tags} setTags={onTagsChange} />
-				</div>
-			</Space>
-		</Col>
-	);
-}
-
-export default GeneralForm;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/GeneralSettings.module.scss

@@ -1,237 +0,0 @@
-.overviewContent {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.overviewSettings {
-	border-radius: 3px;
-	border: 1px solid var(--l1-border);
-	padding: 16px !important;
-}
-
-.crossPanelSyncGroup {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.formSpace {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 21px;
-}
-
-.crossPanelSyncSectionTitle {
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 500;
-	line-height: 20px;
-}
-
-.crossPanelSyncSectionHeader {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	align-self: flex-start;
-}
-
-.crossPanelSyncInfoIcon {
-	cursor: help;
-	color: var(--l3-foreground);
-}
-
-.crossPanelSyncTooltipContent {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	max-width: 300px;
-}
-
-.crossPanelSyncTooltipTitle {
-	font-size: 14px;
-}
-
-.crossPanelSyncTooltipDescription {
-	font-size: 12px;
-	line-height: 1.5;
-}
-
-.crossPanelSyncTooltipDocLink {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	color: var(--primary-background);
-	font-size: 12px;
-	margin-top: 4px;
-}
-
-.crossPanelSyncRow {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	gap: 16px;
-
-	& + & {
-		padding-top: 16px;
-		border-top: 1px solid var(--l1-border);
-	}
-}
-
-.crossPanelSyncInfo {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.crossPanelSyncTitle {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 20px;
-}
-
-.crossPanelSyncDescription {
-	color: var(--l3-foreground);
-	font-family: Inter;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 20px;
-}
-
-.nameIconInput {
-	display: flex;
-}
-
-.dashboardImageInput {
-	:global(.ant-select-selector) {
-		display: flex;
-		width: 32px;
-		height: 32px;
-		padding: 6px;
-		justify-content: center;
-		align-items: center;
-		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border) !important;
-		background: var(--l3-background) !important;
-
-		:global(.ant-select-selection-item) {
-			display: flex;
-			align-items: center;
-		}
-	}
-
-	&:global(.ant-select-dropdown) {
-		padding: 0px !important;
-	}
-
-	:global(.ant-select-item) {
-		padding: 0px;
-		align-items: center;
-		justify-content: center;
-
-		:global(.ant-select-item-option-content) {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-}
-
-.listItemImage {
-	height: 16px;
-	width: 16px;
-}
-
-.dashboardNameInput {
-	border-radius: 0px 2px 2px 0px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.dashboardName {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	margin-bottom: 0.5rem;
-}
-
-.descriptionTextArea {
-	padding: 6px 6px 6px 8px;
-	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.overviewSettingsFooter {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: -webkit-fill-available;
-	padding: 12px 16px 12px 0px;
-	position: fixed;
-	bottom: 0;
-	height: 32px;
-	border-top: 1px solid var(--l1-border);
-	background: var(--l2-background);
-}
-
-.unsaved {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.unsavedDot {
-	width: 6px;
-	height: 6px;
-	border-radius: 50px;
-	background: var(--primary-background);
-	box-shadow: 0px 0px 6px 0px
-		color-mix(in srgb, var(--primary-background) 40%, transparent);
-}
-
-.unsavedChanges {
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 24px;
-	letter-spacing: -0.07px;
-}
-
-.footerActionBtns {
-	display: flex;
-	gap: 8px;
-}
-
-.discardBtn {
-	display: flex;
-	align-items: center;
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}
-
-.saveBtn {
-	display: flex;
-	align-items: center;
-	margin: 0px !important;
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/UnsavedChangesFooter/UnsavedChangesFooter.tsx

@@ -1,59 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Button } from '@signozhq/ui/button';
-import { Check, X } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from '../GeneralSettings.module.scss';
-
-interface UnsavedChangesFooterProps {
-	count: number;
-	isSaving: boolean;
-	onDiscard: () => void;
-	onSave: () => void;
-}
-
-function UnsavedChangesFooter({
-	count,
-	isSaving,
-	onDiscard,
-	onSave,
-}: UnsavedChangesFooterProps): JSX.Element {
-	const { t } = useTranslation('common');
-
-	return (
-		<div className={styles.overviewSettingsFooter}>
-			<div className={styles.unsaved}>
-				<div className={styles.unsavedDot} />
-				<Typography.Text className={styles.unsavedChanges}>
-					{count} unsaved change
-					{count > 1 && 's'}
-				</Typography.Text>
-			</div>
-			<div className={styles.footerActionBtns}>
-				<Button
-					variant="ghost"
-					disabled={isSaving}
-					prefix={<X size={14} />}
-					onClick={onDiscard}
-					className={styles.discardBtn}
-				>
-					Discard
-				</Button>
-				<Button
-					variant="solid"
-					color="primary"
-					disabled={isSaving}
-					loading={isSaving}
-					prefix={<Check size={14} />}
-					testId="save-dashboard-config"
-					onClick={onSave}
-					className={styles.saveBtn}
-				>
-					{t('save')}
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-export default UnsavedChangesFooter;

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

@@ -1,170 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type {
-	DashboardtypesGettableDashboardV2DTO,
-	DashboardtypesJSONPatchOperationDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { toast } from '@signozhq/ui/sonner';
-import { isEqual } from 'lodash-es';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { useDashboardStore } from '../../store/useDashboardStore';
-import CrossPanelSync from './CrossPanelSync/CrossPanelSync';
-import GeneralForm from './GeneralForm/GeneralForm';
-import UnsavedChangesFooter from './UnsavedChangesFooter/UnsavedChangesFooter';
-import { Base64Icons, stringsToTags, tagsToStrings } from './utils';
-import styles from './GeneralSettings.module.scss';
-
-interface GeneralSettingsProps {
-	dashboard: DashboardtypesGettableDashboardV2DTO;
-}
-
-function GeneralSettings({ dashboard }: GeneralSettingsProps): JSX.Element {
-	const id = dashboard.id;
-
-	const refetch = useDashboardStore((s) => s.refetch);
-
-	const title = dashboard.spec?.display?.name ?? '';
-	const description = dashboard.spec?.display?.description ?? '';
-	const image = dashboard.image || Base64Icons[0];
-	const tagsAsStrings = useMemo(
-		() => tagsToStrings(dashboard.tags ?? []),
-		[dashboard.tags],
-	);
-
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-	const [updatedTags, setUpdatedTags] = useState<string[]>(tagsAsStrings);
-	const [updatedDescription, setUpdatedDescription] =
-		useState<string>(description);
-	const [updatedImage, setUpdatedImage] = useState<string>(image);
-	const [isSaving, setIsSaving] = useState<boolean>(false);
-	const [numberOfUnsavedChanges, setNumberOfUnsavedChanges] =
-		useState<number>(0);
-
-	const { showErrorModal } = useErrorModal();
-
-	// Sync state when dashboard refetches after a save
-	useEffect(() => {
-		setUpdatedTitle(title);
-		setUpdatedDescription(description);
-		setUpdatedImage(image);
-		setUpdatedTags(tagsAsStrings);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dashboard.updatedAt]);
-
-	const buildPatch = useCallback((): DashboardtypesJSONPatchOperationDTO[] => {
-		const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-		const replace = (
-			path: string,
-			value: unknown,
-		): DashboardtypesJSONPatchOperationDTO => ({
-			op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-			path,
-			value,
-		});
-
-		if (updatedTitle !== title) {
-			ops.push(replace('/spec/display/name', updatedTitle));
-		}
-		if (updatedDescription !== description) {
-			ops.push(replace('/spec/display/description', updatedDescription));
-		}
-		if (updatedImage !== image) {
-			ops.push(replace('/image', updatedImage));
-		}
-		if (!isEqual(updatedTags, tagsAsStrings)) {
-			ops.push(replace('/tags', stringsToTags(updatedTags)));
-		}
-		return ops;
-	}, [
-		updatedTitle,
-		title,
-		updatedDescription,
-		description,
-		updatedImage,
-		image,
-		updatedTags,
-		tagsAsStrings,
-	]);
-
-	const onSaveHandler = useCallback(async (): Promise<void> => {
-		if (!id) {
-			return;
-		}
-		const ops = buildPatch();
-		if (ops.length === 0) {
-			return;
-		}
-
-		try {
-			setIsSaving(true);
-			await patchDashboardV2({ id }, ops);
-			toast.success('Dashboard updated');
-			refetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		} finally {
-			setIsSaving(false);
-		}
-	}, [id, buildPatch, refetch, showErrorModal]);
-
-	useEffect(() => {
-		let n = 0;
-		const initialValues = [title, description, tagsAsStrings, image];
-		const updatedValues = [
-			updatedTitle,
-			updatedDescription,
-			updatedTags,
-			updatedImage,
-		];
-		initialValues.forEach((val, index) => {
-			if (!isEqual(val, updatedValues[index])) {
-				n += 1;
-			}
-		});
-		setNumberOfUnsavedChanges(n);
-	}, [
-		description,
-		image,
-		tagsAsStrings,
-		title,
-		updatedDescription,
-		updatedImage,
-		updatedTags,
-		updatedTitle,
-	]);
-
-	const discardHandler = useCallback((): void => {
-		setUpdatedTitle(title);
-		setUpdatedImage(image);
-		setUpdatedTags(tagsAsStrings);
-		setUpdatedDescription(description);
-	}, [title, image, tagsAsStrings, description]);
-
-	return (
-		<div className={styles.overviewContent}>
-			<GeneralForm
-				title={updatedTitle}
-				description={updatedDescription}
-				image={updatedImage}
-				tags={updatedTags}
-				onTitleChange={setUpdatedTitle}
-				onDescriptionChange={setUpdatedDescription}
-				onImageChange={setUpdatedImage}
-				onTagsChange={setUpdatedTags}
-			/>
-			<CrossPanelSync dashboardId={id} />
-			{numberOfUnsavedChanges > 0 && (
-				<UnsavedChangesFooter
-					count={numberOfUnsavedChanges}
-					isSaving={isSaving}
-					onDiscard={discardHandler}
-					onSave={onSaveHandler}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default GeneralSettings;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/utils.ts

@@ -1,24 +0,0 @@
-import type { TagtypesPostableTagDTO } from 'api/generated/services/sigNoz.schemas';
-
-export { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
-
-// tag UX, a string with no ':' is round-tripped as `{key: x, value: x}` and
-// collapsed back to just `x` for display.
-export function tagsToStrings(tags: TagtypesPostableTagDTO[]): string[] {
-	return tags.map((t) => (t.key === t.value ? t.key : `${t.key}:${t.value}`));
-}
-
-export function stringsToTags(tagStrings: string[]): TagtypesPostableTagDTO[] {
-	return tagStrings
-		.map((s) => {
-			const trimmed = s.trim();
-			const idx = trimmed.indexOf(':');
-			if (idx === -1) {
-				return { key: trimmed, value: trimmed };
-			}
-			const key = trimmed.slice(0, idx).trim();
-			const value = trimmed.slice(idx + 1).trim();
-			return { key, value: value || key };
-		})
-		.filter((t) => t.key.length > 0);
-}

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

@@ -1,46 +0,0 @@
-import { useMemo } from 'react';
-
-import { Braces, Globe, Table } from '@signozhq/icons';
-import { Tabs } from '@signozhq/ui/tabs';
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import GeneralSettings from './General';
-import { SettingsTabPlaceholder } from './utils';
-
-interface DashboardSettingsProps {
-	dashboard: DashboardtypesGettableDashboardV2DTO;
-}
-
-function DashboardSettings({ dashboard }: DashboardSettingsProps): JSX.Element {
-	const items = useMemo(
-		() => [
-			{
-				key: 'general',
-				label: 'General',
-				prefixIcon: <Table size={14} />,
-				children: <GeneralSettings dashboard={dashboard} />,
-			},
-			{
-				key: 'variables',
-				label: 'Variables',
-				prefixIcon: <Braces size={14} />,
-				children: (
-					<SettingsTabPlaceholder message="V2 dashboard variables coming next." />
-				),
-			},
-			{
-				key: 'public-dashboard',
-				label: 'Publish',
-				prefixIcon: <Globe size={14} />,
-				children: (
-					<SettingsTabPlaceholder message="V2 public dashboard publishing coming next." />
-				),
-			},
-		],
-		[dashboard],
-	);
-
-	return <Tabs defaultValue="general" items={items} />;
-}
-
-export default DashboardSettings;

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

@@ -1,23 +0,0 @@
-import { Empty } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './DashboardSettings.module.scss';
-
-/**
- * TEMPORARY: stand-in for the not-yet-built Variables / Publish settings tabs.
- * Will be cleaned up later once those tabs ship their real content.
- */
-export function SettingsTabPlaceholder({
-	message,
-}: {
-	message: string;
-}): JSX.Element {
-	return (
-		<div className={styles.placeholder}>
-			<Empty
-				image={Empty.PRESENTED_IMAGE_SIMPLE}
-				description={<Typography.Text>{message}</Typography.Text>}
-			/>
-		</div>
-	);
-}

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

@@ -6,13 +6,9 @@ import { EllipsisVertical } from '@signozhq/icons';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 
-import type { DashboardSection } from '../../utils';
-import type { DeletePanelArgs } from './hooks/useDeletePanel';
-import type { MovePanelArgs } from './hooks/useMovePanelToSection';
-import PanelActionsMenu from './PanelActionsMenu/PanelActionsMenu';
 import styles from './Panel.module.scss';
 
-interface PanelProps {
+interface Props {
 	panel: DashboardtypesPanelDTO | undefined;
 	panelId: string;
 	/**
@@ -21,22 +17,9 @@ interface PanelProps {
 	 * data. Currently unused on purpose.
 	 */
 	isVisible?: boolean;
-	/** Section actions — present only in editable sectioned mode. */
-	currentLayoutIndex?: number;
-	sections?: DashboardSection[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
 }
 
-function Panel({
-	panel,
-	panelId,
-	isVisible,
-	currentLayoutIndex,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: PanelProps): JSX.Element {
+function Panel({ panel, panelId, isVisible }: Props): JSX.Element {
 	const name = panel?.spec?.display?.name || `Panel ${panelId.slice(0, 6)}`;
 	const description = panel?.spec?.display?.description;
 	const kind = panel?.spec?.plugin?.kind?.replace(/^signoz\//, '') ?? 'unknown';
@@ -65,17 +48,7 @@ function Panel({
 					</Typography.Text>
 					<Badge className={styles.badge}>{kind}</Badge>
 				</div>
-				{currentLayoutIndex !== undefined && (onMovePanel || onDeletePanel) ? (
-					<PanelActionsMenu
-						panelId={panelId}
-						currentLayoutIndex={currentLayoutIndex}
-						sections={sections ?? []}
-						onMovePanel={onMovePanel}
-						onDeletePanel={onDeletePanel}
-					/>
-				) : (
-					<EllipsisVertical size={14} />
-				)}
+				<EllipsisVertical size={14} />
 			</div>
 
 			<div className={styles.body}>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.module.scss

@@ -1,16 +0,0 @@
-.trigger {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 2px;
-	background: transparent;
-	border: none;
-	border-radius: 2px;
-	color: var(--bg-vanilla-400, #8993ae);
-	cursor: pointer;
-
-	&:hover {
-		color: var(--bg-vanilla-100, #fff);
-		background: var(--bg-slate-400, #1d212d);
-	}
-}

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

@@ -1,98 +0,0 @@
-import { useMemo } from 'react';
-import { EllipsisVertical, FolderInput, Trash2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import type { MenuItem } from '@signozhq/ui/dropdown-menu';
-
-import type { DashboardSection } from '../../../utils';
-import type { DeletePanelArgs } from '../hooks/useDeletePanel';
-import type { MovePanelArgs } from '../hooks/useMovePanelToSection';
-import styles from './PanelActionsMenu.module.scss';
-
-interface PanelActionsMenuProps {
-	panelId: string;
-	currentLayoutIndex: number;
-	sections: DashboardSection[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
-}
-
-function PanelActionsMenu({
-	panelId,
-	currentLayoutIndex,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: PanelActionsMenuProps): JSX.Element {
-	const items = useMemo<MenuItem[]>(() => {
-		const result: MenuItem[] = [];
-
-		if (onMovePanel) {
-			const targets = sections.filter(
-				(s) => s.title && s.layoutIndex !== currentLayoutIndex,
-			);
-			if (targets.length === 0) {
-				result.push({
-					key: 'move',
-					label: 'Move to section',
-					icon: <FolderInput size={14} />,
-					disabled: true,
-				});
-			} else {
-				result.push({
-					key: 'move',
-					label: 'Move to section',
-					icon: <FolderInput size={14} />,
-					children: targets.map((s) => ({
-						key: `move-${s.layoutIndex}`,
-						label: s.title,
-						onClick: (): void =>
-							onMovePanel({
-								panelId,
-								fromLayoutIndex: currentLayoutIndex,
-								toLayoutIndex: s.layoutIndex,
-							}),
-					})),
-				});
-			}
-		}
-
-		if (onDeletePanel) {
-			if (result.length > 0) {
-				result.push({ type: 'divider' });
-			}
-			result.push({
-				key: 'delete-panel',
-				danger: true,
-				icon: <Trash2 size={14} />,
-				label: 'Delete panel',
-				onClick: (): void =>
-					onDeletePanel({ panelId, layoutIndex: currentLayoutIndex }),
-			});
-		}
-
-		return result;
-	}, [sections, currentLayoutIndex, panelId, onMovePanel, onDeletePanel]);
-
-	return (
-		<DropdownMenuSimple menu={{ items }}>
-			<Button
-				type="button"
-				variant="ghost"
-				size="icon"
-				className={styles.trigger}
-				aria-label="Panel actions"
-				data-testid={`panel-actions-${panelId}`}
-				// Stop pointer/mouse down from reaching the RGL drag handle this
-				// button lives inside, so opening the menu never starts a panel drag.
-				onPointerDown={(e): void => e.stopPropagation()}
-				onMouseDown={(e): void => e.stopPropagation()}
-				onClick={(e): void => e.stopPropagation()}
-			>
-				<EllipsisVertical size={14} />
-			</Button>
-		</DropdownMenuSimple>
-	);
-}
-
-export default PanelActionsMenu;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.module.scss

@@ -1,22 +0,0 @@
-.grid {
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	gap: 8px;
-}
-
-.typeButton {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 12px;
-	background: var(--bg-ink-400, #0b0c0e);
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	border-radius: 4px;
-	color: var(--bg-vanilla-100, #fff);
-	cursor: pointer;
-	text-align: left;
-
-	&:hover {
-		border-color: var(--bg-robin-500);
-	}
-}

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

@@ -1,84 +0,0 @@
-import { Modal } from 'antd';
-import {
-	BarChart,
-	ChartLine,
-	ChartPie,
-	Hash,
-	List,
-	Table,
-} from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-
-import styles from './PanelTypeSelectionModal.module.scss';
-
-interface PanelType {
-	pluginKind: string;
-	label: string;
-	icon: JSX.Element;
-}
-
-const PANEL_TYPES: PanelType[] = [
-	{
-		pluginKind: 'signoz/TimeSeriesPanel',
-		label: 'Time Series',
-		icon: <ChartLine size={16} />,
-	},
-	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
-	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
-	{
-		pluginKind: 'signoz/BarChartPanel',
-		label: 'Bar Chart',
-		icon: <BarChart size={16} />,
-	},
-	{
-		pluginKind: 'signoz/PieChartPanel',
-		label: 'Pie Chart',
-		icon: <ChartPie size={16} />,
-	},
-	{
-		pluginKind: 'signoz/HistogramPanel',
-		label: 'Histogram',
-		icon: <BarChart size={16} />,
-	},
-	{ pluginKind: 'signoz/ListPanel', label: 'List', icon: <List size={16} /> },
-];
-
-interface PanelTypeSelectionModalProps {
-	open: boolean;
-	onClose: () => void;
-	onSelect: (pluginKind: string) => void;
-}
-
-function PanelTypeSelectionModal({
-	open,
-	onClose,
-	onSelect,
-}: PanelTypeSelectionModalProps): JSX.Element {
-	return (
-		<Modal
-			open={open}
-			title="Select a panel type"
-			onCancel={onClose}
-			footer={null}
-			destroyOnClose
-		>
-			<div className={styles.grid}>
-				{PANEL_TYPES.map((type) => (
-					<Button
-						key={type.pluginKind}
-						type="button"
-						variant="ghost"
-						className={styles.typeButton}
-						data-testid={`panel-type-${type.pluginKind}`}
-						onClick={(): void => onSelect(type.pluginKind)}
-					>
-						{type.icon}
-						{type.label}
-					</Button>
-				))}
-			</div>
-		</Modal>
-	);
-}
-
-export default PanelTypeSelectionModal;

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

@@ -1,76 +0,0 @@
-import { useCallback } from 'react';
-import { v4 as uuid } from 'uuid';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import {
-	addPanelToSectionOps,
-	createDefaultPanel,
-	panelRef,
-} from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { DashboardSection } from '../../../utils';
-
-interface Params {
-	sections: DashboardSection[];
-}
-
-export interface AddPanelArgs {
-	layoutIndex: number;
-	pluginKind: string;
-}
-
-/**
- * Creates a new panel and places its item ref at the bottom of the target
- * section, as one atomic patch. Structure-only: the panel is a valid minimal
- * placeholder (its query is filled in once the panel editor lands).
- */
-export function useAddPanelToSection({
-	sections,
-}: Params): (args: AddPanelArgs) => Promise<void> {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const { showErrorModal } = useErrorModal();
-
-	return useCallback(
-		async ({ layoutIndex, pluginKind }: AddPanelArgs): Promise<void> => {
-			if (!dashboardId) {
-				return;
-			}
-			const target = sections.find((s) => s.layoutIndex === layoutIndex);
-			if (!target) {
-				return;
-			}
-
-			const panelId = uuid();
-			const nextY = target.items.reduce(
-				(max, i) => Math.max(max, i.y + i.height),
-				0,
-			);
-
-			try {
-				await patchDashboardV2(
-					{ id: dashboardId },
-					addPanelToSectionOps({
-						panelId,
-						panel: createDefaultPanel(pluginKind),
-						layoutIndex,
-						item: {
-							x: 0,
-							y: nextY,
-							width: 6,
-							height: 6,
-							content: { $ref: panelRef(panelId) },
-						},
-					}),
-				);
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[sections, dashboardId, refetch, showErrorModal],
-	);
-}

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

@@ -1,54 +0,0 @@
-import { useCallback } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { removePanelOp, replaceSectionItemsOp } from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { DashboardSection } from '../../../utils';
-
-interface Params {
-	sections: DashboardSection[];
-}
-
-export interface DeletePanelArgs {
-	panelId: string;
-	layoutIndex: number;
-}
-
-/**
- * Removes a panel: drops its item ref from the section's items and deletes the
- * panel from `spec.panels`, as one atomic patch.
- */
-export function useDeletePanel({
-	sections,
-}: Params): (args: DeletePanelArgs) => Promise<void> {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const { showErrorModal } = useErrorModal();
-
-	return useCallback(
-		async ({ panelId, layoutIndex }: DeletePanelArgs): Promise<void> => {
-			if (!dashboardId) {
-				return;
-			}
-			const section = sections.find((s) => s.layoutIndex === layoutIndex);
-			if (!section) {
-				return;
-			}
-
-			const nextItems = section.items.filter((i) => i.id !== panelId);
-			try {
-				await patchDashboardV2({ id: dashboardId }, [
-					replaceSectionItemsOp(layoutIndex, nextItems),
-					removePanelOp(panelId),
-				]);
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[sections, dashboardId, refetch, showErrorModal],
-	);
-}

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

@@ -1,79 +0,0 @@
-import { useCallback } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { movePanelBetweenSectionsOps } from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { DashboardSection } from '../../../utils';
-
-export interface MovePanelArgs {
-	panelId: string;
-	fromLayoutIndex: number;
-	toLayoutIndex: number;
-}
-
-interface Params {
-	sections: DashboardSection[];
-}
-
-/**
- * Relocates a panel's item ref from one section to another. The panel itself
- * stays in `spec.panels`; only the grid item moves, dropped into a free row at
- * the bottom of the target section. Persisted as one atomic patch.
- */
-export function useMovePanelToSection({
-	sections,
-}: Params): (args: MovePanelArgs) => Promise<void> {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const { showErrorModal } = useErrorModal();
-
-	return useCallback(
-		async ({
-			panelId,
-			fromLayoutIndex,
-			toLayoutIndex,
-		}: MovePanelArgs): Promise<void> => {
-			if (!dashboardId || fromLayoutIndex === toLayoutIndex) {
-				return;
-			}
-
-			const source = sections.find((s) => s.layoutIndex === fromLayoutIndex);
-			const target = sections.find((s) => s.layoutIndex === toLayoutIndex);
-			if (!source || !target) {
-				return;
-			}
-
-			const moved = source.items.find((i) => i.id === panelId);
-			if (!moved) {
-				return;
-			}
-
-			const sourceItems = source.items.filter((i) => i.id !== panelId);
-			// Place at a fresh row at the bottom of the target section.
-			const nextY = target.items.reduce(
-				(max, i) => Math.max(max, i.y + i.height),
-				0,
-			);
-			const targetItems = [...target.items, { ...moved, x: 0, y: nextY }];
-
-			try {
-				await patchDashboardV2(
-					{ id: dashboardId },
-					movePanelBetweenSectionsOps({
-						sourceIndex: fromLayoutIndex,
-						sourceItems,
-						targetIndex: toLayoutIndex,
-						targetItems,
-					}),
-				);
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[sections, dashboardId, refetch, showErrorModal],
-	);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.module.scss

@@ -1,17 +0,0 @@
-.addButton {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	margin-top: 8px;
-	padding: 8px 12px;
-	background: transparent;
-	border: 1px dashed var(--bg-slate-400, #1d212d);
-	border-radius: 4px;
-	color: var(--bg-vanilla-400, #8993ae);
-	cursor: pointer;
-
-	&:hover {
-		border-color: var(--bg-robin-500);
-		color: var(--bg-vanilla-100, #fff);
-	}
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.tsx

@@ -1,69 +0,0 @@
-import { useCallback, useState } from 'react';
-import { Plus } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { DashboardSection } from '../../../utils';
-import { useAddSection } from '../hooks/useAddSection';
-import { useFirstSectionMigration } from '../hooks/useFirstSectionMigration';
-import FirstSectionMigrationModal from '../FirstSectionMigrationModal';
-import styles from './AddSectionControl.module.scss';
-
-const DEFAULT_SECTION_TITLE = 'New section';
-
-interface AddSectionControlProps {
-	sections: DashboardSection[];
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-	isSectioned: boolean;
-}
-
-function AddSectionControl({
-	sections,
-	layouts,
-	isSectioned,
-}: AddSectionControlProps): JSX.Element {
-	const [isMigrationOpen, setIsMigrationOpen] = useState(false);
-	const { addSection } = useAddSection({ layouts });
-	const { migrate, isSaving } = useFirstSectionMigration({ sections });
-
-	// Free-flowing dashboard with existing panels → must migrate before sections
-	// can coexist (every panel must belong to a section once any exists).
-	const needsMigration =
-		!isSectioned && sections.some((s) => s.items.length > 0);
-
-	const handleClick = useCallback((): void => {
-		if (needsMigration) {
-			setIsMigrationOpen(true);
-			return;
-		}
-		void addSection(DEFAULT_SECTION_TITLE);
-	}, [needsMigration, addSection]);
-
-	const handleConfirmMigration = useCallback(async (): Promise<void> => {
-		await migrate(DEFAULT_SECTION_TITLE);
-		setIsMigrationOpen(false);
-	}, [migrate]);
-
-	return (
-		<>
-			<Button
-				type="button"
-				variant="ghost"
-				className={styles.addButton}
-				onClick={handleClick}
-				data-testid="add-section"
-			>
-				<Plus size={14} />
-				Add section
-			</Button>
-			<FirstSectionMigrationModal
-				open={isMigrationOpen}
-				isSaving={isSaving}
-				onClose={(): void => setIsMigrationOpen(false)}
-				onConfirm={handleConfirmMigration}
-			/>
-		</>
-	);
-}
-
-export default AddSectionControl;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/FirstSectionMigrationModal.tsx

@@ -1,41 +0,0 @@
-import { Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-interface FirstSectionMigrationModalProps {
-	open: boolean;
-	isSaving: boolean;
-	onClose: () => void;
-	onConfirm: () => void;
-}
-
-/**
- * Shown when the user adds the first section to a free-flowing dashboard that
- * already has panels. Confirms grouping the existing panels into a section
- * before proceeding.
- */
-function FirstSectionMigrationModal({
-	open,
-	isSaving,
-	onClose,
-	onConfirm,
-}: FirstSectionMigrationModalProps): JSX.Element {
-	return (
-		<Modal
-			open={open}
-			title="Group panels into sections?"
-			onCancel={onClose}
-			onOk={onConfirm}
-			okText="Continue"
-			okButtonProps={{ disabled: isSaving, 'data-testid': 'confirm-migration' }}
-			destroyOnClose
-		>
-			<Typography.Text>
-				This dashboard&apos;s panels are currently free-flowing. Adding a section
-				will move the existing panels into their own section, and a new empty
-				section will be added below. You can rename sections afterwards.
-			</Typography.Text>
-		</Modal>
-	);
-}
-
-export default FirstSectionMigrationModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/RenameSectionModal.tsx

@@ -1,64 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Modal } from 'antd';
-import { Input } from '@signozhq/ui/input';
-
-interface RenameSectionModalProps {
-	open: boolean;
-	initialValue: string;
-	isSaving: boolean;
-	onClose: () => void;
-	onSubmit: (title: string) => void;
-}
-
-function RenameSectionModal({
-	open,
-	initialValue,
-	isSaving,
-	onClose,
-	onSubmit,
-}: RenameSectionModalProps): JSX.Element {
-	const [value, setValue] = useState<string>(initialValue);
-
-	// Reseed the field each time the modal opens.
-	useEffect(() => {
-		if (open) {
-			setValue(initialValue);
-		}
-	}, [open, initialValue]);
-
-	const submit = (): void => {
-		const trimmed = value.trim();
-		if (trimmed) {
-			onSubmit(trimmed);
-		}
-	};
-
-	return (
-		<Modal
-			open={open}
-			title="Rename section"
-			onCancel={onClose}
-			onOk={submit}
-			okText="Rename"
-			okButtonProps={{ disabled: isSaving || !value.trim() }}
-			destroyOnClose
-		>
-			<Input
-				testId="rename-section-input"
-				autoFocus
-				value={value}
-				maxLength={120}
-				placeholder="Section name"
-				onChange={(e): void => setValue(e.target.value)}
-				onKeyDown={(e): void => {
-					if (e.key === 'Enter') {
-						e.preventDefault();
-						submit();
-					}
-				}}
-			/>
-		</Modal>
-	);
-}
-
-export default RenameSectionModal;

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

@@ -1,45 +1,17 @@
-import { useCallback, useRef, useState } from 'react';
-import { Modal } from 'antd';
+import { useRef, useState } from 'react';
 
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 
 import type { DashboardSection } from '../../../utils';
-import type { AddPanelArgs } from '../../Panel/hooks/useAddPanelToSection';
-import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
-import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
-import PanelTypeSelectionModal from '../../Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import { useDeleteSection } from '../hooks/useDeleteSection';
-import { useRenameSection } from '../hooks/useRenameSection';
-import { useToggleSectionCollapse } from '../hooks/useToggleSectionCollapse';
-import RenameSectionModal from '../RenameSectionModal';
 import SectionGrid from '../SectionGrid/SectionGrid';
-import SectionHeader, {
-	type SectionDragHandle,
-} from '../SectionHeader/SectionHeader';
+import SectionHeader from '../SectionHeader/SectionHeader';
 import styles from './Section.module.scss';
 
-interface SectionProps {
+interface Props {
 	section: DashboardSection;
-	/** Adds a panel to this section; present only in editable sectioned mode. */
-	onAddPanel?: (args: AddPanelArgs) => void;
-	/** All sections + per-panel handlers, for the panel "Move to section" / delete actions. */
-	sections?: DashboardSection[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
-	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
-	dragHandle?: SectionDragHandle;
 }
 
-function Section({
-	section,
-	onAddPanel,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-	dragHandle,
-}: SectionProps): JSX.Element {
-	const isEditable = useDashboardStore((s) => s.isEditable);
+function Section({ section }: Props): JSX.Element {
 	const containerRef = useRef<HTMLDivElement>(null);
 	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
 	// true once the section scrolls into (or near) the viewport.
@@ -47,54 +19,10 @@ function Section({
 		rootMargin: '200px',
 	});
 
-	const { open, toggle } = useToggleSectionCollapse({ sectionId: section.id });
+	const [open, setOpen] = useState<boolean>(section.open);
+	const toggle = (): void => setOpen((prev) => !prev);
 
-	const [isRenaming, setIsRenaming] = useState(false);
-	const { rename, isSaving } = useRenameSection({
-		layoutIndex: section.layoutIndex,
-	});
-
-	const handleRenameSubmit = useCallback(
-		async (title: string): Promise<void> => {
-			const ok = await rename(title);
-			if (ok) {
-				setIsRenaming(false);
-			}
-		},
-		[rename],
-	);
-
-	const [isAddingPanel, setIsAddingPanel] = useState(false);
-	const handleSelectPanelType = useCallback(
-		(pluginKind: string): void => {
-			onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
-			setIsAddingPanel(false);
-		},
-		[onAddPanel, section.layoutIndex],
-	);
-
-	const { deleteSection } = useDeleteSection({ section });
-	const confirmDeleteSection = useCallback((): void => {
-		Modal.confirm({
-			title: `Delete section "${section.title ?? ''}"?`,
-			content: 'Panels in this section will be removed.',
-			okText: 'Delete',
-			okButtonProps: { danger: true },
-			centered: true,
-			onOk: () => deleteSection(),
-		});
-	}, [section.title, deleteSection]);
-
-	const grid = (
-		<SectionGrid
-			items={section.items}
-			layoutIndex={section.layoutIndex}
-			isVisible={isVisible}
-			sections={sections}
-			onMovePanel={onMovePanel}
-			onDeletePanel={onDeletePanel}
-		/>
-	);
+	const grid = <SectionGrid items={section.items} isVisible={isVisible} />;
 
 	if (!section.title) {
 		// Untitled section — just the grid (no header chrome), but still observed
@@ -123,26 +51,8 @@ function Section({
 				open={open}
 				onToggle={toggle}
 				repeatVariable={section.repeatVariable}
-				dragHandle={dragHandle}
-				onRename={isEditable ? (): void => setIsRenaming(true) : undefined}
-				onAddPanel={
-					isEditable && onAddPanel ? (): void => setIsAddingPanel(true) : undefined
-				}
-				onDeleteSection={isEditable ? confirmDeleteSection : undefined}
 			/>
 			{open ? grid : null}
-			<RenameSectionModal
-				open={isRenaming}
-				initialValue={section.title}
-				isSaving={isSaving}
-				onClose={(): void => setIsRenaming(false)}
-				onSubmit={handleRenameSubmit}
-			/>
-			<PanelTypeSelectionModal
-				open={isAddingPanel}
-				onClose={(): void => setIsAddingPanel(false)}
-				onSelect={handleSelectPanelType}
-			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.module.scss

@@ -1,16 +0,0 @@
-.trigger {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 2px;
-	background: transparent;
-	border: none;
-	border-radius: 2px;
-	color: var(--bg-vanilla-400, #8993ae);
-	cursor: pointer;
-
-	&:hover {
-		color: var(--bg-vanilla-100, #fff);
-		background: var(--bg-slate-400, #1d212d);
-	}
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.tsx

@@ -1,71 +0,0 @@
-import { useMemo } from 'react';
-import { EllipsisVertical, PenLine, Plus, Trash2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import type { MenuItem } from '@signozhq/ui/dropdown-menu';
-
-import styles from './SectionActionsMenu.module.scss';
-
-interface SectionActionsMenuProps {
-	sectionId: string;
-	onAddPanel?: () => void;
-	onRename?: () => void;
-	onDeleteSection?: () => void;
-}
-
-function SectionActionsMenu({
-	sectionId,
-	onAddPanel,
-	onRename,
-	onDeleteSection,
-}: SectionActionsMenuProps): JSX.Element {
-	const items = useMemo<MenuItem[]>(() => {
-		const result: MenuItem[] = [];
-		if (onAddPanel) {
-			result.push({
-				key: 'add-panel',
-				icon: <Plus size={14} />,
-				label: 'Add panel',
-				onClick: onAddPanel,
-			});
-		}
-		if (onRename) {
-			result.push({
-				key: 'rename',
-				icon: <PenLine size={14} />,
-				label: 'Rename section',
-				onClick: onRename,
-			});
-		}
-		if (onDeleteSection) {
-			result.push(
-				{ type: 'divider' },
-				{
-					key: 'delete-section',
-					danger: true,
-					icon: <Trash2 size={14} />,
-					label: 'Delete section',
-					onClick: onDeleteSection,
-				},
-			);
-		}
-		return result;
-	}, [onAddPanel, onRename, onDeleteSection]);
-
-	return (
-		<DropdownMenuSimple menu={{ items }}>
-			<Button
-				type="button"
-				variant="ghost"
-				size="icon"
-				className={styles.trigger}
-				aria-label="Section actions"
-				data-testid={`dashboard-section-actions-${sectionId}`}
-			>
-				<EllipsisVertical size={14} />
-			</Button>
-		</DropdownMenuSimple>
-	);
-}
-
-export default SectionActionsMenu;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionDragPreview/SectionDragPreview.module.scss

@@ -1,7 +0,0 @@
-.preview {
-	border: 1px solid var(--bg-robin-500);
-	border-radius: 4px;
-	background: var(--bg-ink-400, #0b0c0e);
-	box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
-	cursor: grabbing;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionDragPreview/SectionDragPreview.tsx

@@ -1,32 +0,0 @@
-import type { DashboardSection } from '../../../utils';
-import SectionHeader from '../SectionHeader/SectionHeader';
-import styles from './SectionDragPreview.module.scss';
-
-interface SectionDragPreviewProps {
-	section: DashboardSection;
-}
-
-/**
- * Lightweight preview rendered inside the DragOverlay while a section is being
- * dragged. Deliberately header-only (no react-grid-layout) so the overlay is
- * cheap and never triggers RGL width re-measurement.
- */
-function SectionDragPreview({ section }: SectionDragPreviewProps): JSX.Element {
-	const panelCount = section.items.length;
-	const title = `${section.title ?? ''} · ${panelCount} ${
-		panelCount === 1 ? 'panel' : 'panels'
-	}`;
-
-	return (
-		<div className={styles.preview}>
-			<SectionHeader
-				sectionId={`${section.id}-preview`}
-				title={title}
-				open={false}
-				onToggle={(): void => undefined}
-			/>
-		</div>
-	);
-}
-
-export default SectionDragPreview;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionGrid/SectionGrid.tsx

@@ -2,35 +2,18 @@ import { useMemo } from 'react';
 import GridLayout, { WidthProvider, type Layout } from 'react-grid-layout';
 
 import type { DashboardSection } from '../../../utils';
-import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
-import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
 import Panel from '../../Panel/Panel';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import { usePersistLayout } from '../hooks/usePersistLayout';
 import styles from './SectionGrid.module.scss';
 
 const ResponsiveGridLayout = WidthProvider(GridLayout);
 
-interface SectionGridProps {
+interface Props {
 	items: DashboardSection['items'];
-	layoutIndex: number;
 	/** Forwarded to panels — true when the parent section is in the viewport. */
 	isVisible?: boolean;
-	/** All sections + handlers — present only in editable sectioned mode (panel "Move to section" / delete). */
-	sections?: DashboardSection[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
 }
 
-function SectionGrid({
-	items,
-	layoutIndex,
-	isVisible,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: SectionGridProps): JSX.Element {
-	const isEditable = useDashboardStore((s) => s.isEditable);
+function SectionGrid({ items, isVisible }: Props): JSX.Element {
 	const rglLayout = useMemo<Layout[]>(
 		() =>
 			items.map((item) => ({
@@ -43,8 +26,6 @@ function SectionGrid({
 		[items],
 	);
 
-	const { handleLayoutChange } = usePersistLayout({ layoutIndex, items });
-
 	return (
 		<ResponsiveGridLayout
 			className={styles.grid}
@@ -53,24 +34,13 @@ function SectionGrid({
 			autoSize
 			useCSSTransforms
 			layout={rglLayout}
-			draggableHandle=".panel-drag-handle"
-			isDraggable={isEditable}
-			isResizable={isEditable}
-			onDragStop={handleLayoutChange}
-			onResizeStop={handleLayoutChange}
+			isDraggable={false}
+			isResizable={false}
 			margin={[8, 8]}
 		>
 			{items.map((item) => (
 				<div key={item.id}>
-					<Panel
-						panel={item.panel}
-						panelId={item.id}
-						isVisible={isVisible}
-						currentLayoutIndex={layoutIndex}
-						sections={isEditable ? sections : undefined}
-						onMovePanel={isEditable ? onMovePanel : undefined}
-						onDeletePanel={isEditable ? onDeletePanel : undefined}
-					/>
+					<Panel panel={item.panel} panelId={item.id} isVisible={isVisible} />
 				</div>
 			))}
 		</ResponsiveGridLayout>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionHeader/SectionHeader.tsx

@@ -1,30 +1,15 @@
-import type { DraggableAttributes } from '@dnd-kit/core';
-import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
-import { ChevronDown, ChevronRight, GripVertical } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 
-import SectionActionsMenu from '../SectionActionsMenu/SectionActionsMenu';
 import styles from './SectionHeader.module.scss';
 
-export interface SectionDragHandle {
-	attributes: DraggableAttributes;
-	listeners: SyntheticListenerMap | undefined;
-	setActivatorNodeRef: (element: HTMLElement | null) => void;
-}
-
-interface SectionHeaderProps {
+interface Props {
 	sectionId: string;
 	title: string;
 	open: boolean;
 	onToggle: () => void;
 	repeatVariable?: string;
-	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
-	dragHandle?: SectionDragHandle;
-	onRename?: () => void;
-	onAddPanel?: () => void;
-	onDeleteSection?: () => void;
 }
 
 function SectionHeader({
@@ -33,32 +18,11 @@ function SectionHeader({
 	open,
 	onToggle,
 	repeatVariable,
-	dragHandle,
-	onRename,
-	onAddPanel,
-	onDeleteSection,
-}: SectionHeaderProps): JSX.Element {
-	const hasActions = !!(onAddPanel || onRename || onDeleteSection);
+}: Props): JSX.Element {
 	return (
 		<div className={cx(styles.header, { [styles.headerOpen]: open })}>
-			{dragHandle ? (
-				<Button
-					type="button"
-					variant="ghost"
-					size="icon"
-					className={styles.dragHandle}
-					ref={dragHandle.setActivatorNodeRef}
-					aria-label="Drag to reorder section"
-					data-testid={`dashboard-section-drag-${sectionId}`}
-					{...dragHandle.attributes}
-					{...dragHandle.listeners}
-				>
-					<GripVertical size={14} />
-				</Button>
-			) : null}
-			<Button
+			<button
 				type="button"
-				variant="ghost"
 				className={styles.toggle}
 				onClick={onToggle}
 				data-testid={`dashboard-section-toggle-${sectionId}`}
@@ -70,15 +34,7 @@ function SectionHeader({
 						(repeats per ${repeatVariable})
 					</Typography.Text>
 				) : null}
-			</Button>
-			{hasActions ? (
-				<SectionActionsMenu
-					sectionId={sectionId}
-					onAddPanel={onAddPanel}
-					onRename={onRename}
-					onDeleteSection={onDeleteSection}
-				/>
-			) : null}
+			</button>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionList.tsx

@@ -1,102 +0,0 @@
-import { useMemo } from 'react';
-import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
-import {
-	restrictToParentElement,
-	restrictToVerticalAxis,
-} from '@dnd-kit/modifiers';
-import {
-	SortableContext,
-	verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { DashboardSection } from '../../utils';
-import { useAddPanelToSection } from '../Panel/hooks/useAddPanelToSection';
-import { useDeletePanel } from '../Panel/hooks/useDeletePanel';
-import { useMovePanelToSection } from '../Panel/hooks/useMovePanelToSection';
-import { useDashboardStore } from '../../store/useDashboardStore';
-import { useSectionDragReorder } from './hooks/useSectionDragReorder';
-import Section from './Section/Section';
-import SectionDragPreview from './SectionDragPreview/SectionDragPreview';
-import SortableSection from './SortableSection';
-
-interface SectionListProps {
-	sections: DashboardSection[];
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-}
-
-function SectionList({ sections, layouts }: SectionListProps): JSX.Element {
-	const isEditable = useDashboardStore((s) => s.isEditable);
-
-	const {
-		sensors,
-		orderedSections,
-		activeSection,
-		onDragStart,
-		onDragEnd,
-		onDragCancel,
-	} = useSectionDragReorder({ sections, layouts });
-
-	const onAddPanel = useAddPanelToSection({ sections });
-	const onMovePanel = useMovePanelToSection({ sections });
-	const onDeletePanel = useDeletePanel({ sections });
-
-	// Only titled sections participate in reordering; untitled (free-flow)
-	// blocks render in place without a drag handle.
-	const sortableIds = useMemo(
-		() => orderedSections.filter((s) => s.title).map((s) => s.id),
-		[orderedSections],
-	);
-
-	if (!isEditable) {
-		return (
-			<>
-				{sections.map((section) => (
-					<Section key={section.id} section={section} />
-				))}
-			</>
-		);
-	}
-
-	return (
-		<DndContext
-			sensors={sensors}
-			collisionDetection={closestCenter}
-			modifiers={[restrictToVerticalAxis, restrictToParentElement]}
-			onDragStart={onDragStart}
-			onDragEnd={onDragEnd}
-			onDragCancel={onDragCancel}
-		>
-			<SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
-				{orderedSections.map((section) =>
-					section.title ? (
-						<SortableSection
-							key={section.id}
-							section={section}
-							sections={sections}
-							onAddPanel={onAddPanel}
-							onMovePanel={onMovePanel}
-							onDeletePanel={onDeletePanel}
-						/>
-					) : (
-						<Section
-							key={section.id}
-							section={section}
-							sections={sections}
-							onAddPanel={onAddPanel}
-							onMovePanel={onMovePanel}
-							onDeletePanel={onDeletePanel}
-						/>
-					),
-				)}
-			</SortableContext>
-			{/* dropAnimation disabled: optimistic reorder already places the section,
-			    so animating the overlay back would cause a visible snap/shake. */}
-			<DragOverlay dropAnimation={null}>
-				{activeSection ? <SectionDragPreview section={activeSection} /> : null}
-			</DragOverlay>
-		</DndContext>
-	);
-}
-
-export default SectionList;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SortableSection.tsx

@@ -1,59 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-
-import type { DashboardSection } from '../../utils';
-import type { AddPanelArgs } from '../Panel/hooks/useAddPanelToSection';
-import type { DeletePanelArgs } from '../Panel/hooks/useDeletePanel';
-import type { MovePanelArgs } from '../Panel/hooks/useMovePanelToSection';
-import Section from './Section/Section';
-
-interface SortableSectionProps {
-	section: DashboardSection;
-	sections: DashboardSection[];
-	onAddPanel: (args: AddPanelArgs) => void;
-	onMovePanel: (args: MovePanelArgs) => void;
-	onDeletePanel: (args: DeletePanelArgs) => void;
-}
-
-function SortableSection({
-	section,
-	sections,
-	onAddPanel,
-	onMovePanel,
-	onDeletePanel,
-}: SortableSectionProps): JSX.Element {
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		setActivatorNodeRef,
-		transform,
-		transition,
-		isDragging,
-	} = useSortable({ id: section.id });
-
-	// dnd-kit drives the drag transform per-frame, so this must be an inline
-	// style — there is no static-stylesheet equivalent for a live transform.
-	// While dragging, the original is hidden (the DragOverlay renders the moving
-	// preview); keeping it in place preserves the gap and lets siblings animate.
-	const style: React.CSSProperties = {
-		transform: CSS.Transform.toString(transform),
-		transition,
-		opacity: isDragging ? 0 : undefined,
-	};
-
-	return (
-		<div ref={setNodeRef} style={style}>
-			<Section
-				section={section}
-				sections={sections}
-				onAddPanel={onAddPanel}
-				onMovePanel={onMovePanel}
-				onDeletePanel={onDeletePanel}
-				dragHandle={{ attributes, listeners, setActivatorNodeRef }}
-			/>
-		</div>
-	);
-}
-
-export default SortableSection;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useAddSection.ts

@@ -1,59 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import {
-	addSectionOp,
-	newGridLayout,
-	reorderLayoutsOp,
-} from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-
-interface Params {
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-}
-
-interface Result {
-	addSection: (title: string) => Promise<void>;
-	isSaving: boolean;
-}
-
-/**
- * Appends an empty titled section. When the dashboard has no layouts yet, the
- * layouts array is created via a `replace` (an `add` to a missing/empty array
- * pointer is unreliable); otherwise a new Grid is appended.
- */
-export function useAddSection({ layouts }: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const addSection = useCallback(
-		async (title: string): Promise<void> => {
-			const trimmed = title.trim();
-			if (!dashboardId || !trimmed) {
-				return;
-			}
-			const op =
-				!layouts || layouts.length === 0
-					? reorderLayoutsOp([newGridLayout(trimmed)])
-					: addSectionOp(trimmed);
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, [op]);
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[layouts, dashboardId, refetch, showErrorModal],
-	);
-
-	return { addSection, isSaving };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useDeleteSection.ts

@@ -1,51 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { removePanelOp, removeSectionOp } from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { DashboardSection } from '../../../utils';
-
-interface Params {
-	section: DashboardSection;
-}
-
-interface Result {
-	deleteSection: () => Promise<void>;
-	isSaving: boolean;
-}
-
-/**
- * Deletes a section: removes its Grid layout and deletes every panel it
- * contained from `spec.panels` (orphan cleanup), as one atomic patch.
- */
-export function useDeleteSection({ section }: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const deleteSection = useCallback(async (): Promise<void> => {
-		if (!dashboardId) {
-			return;
-		}
-		const ops: DashboardtypesJSONPatchOperationDTO[] = section.items.map((i) =>
-			removePanelOp(i.id),
-		);
-		ops.push(removeSectionOp(section.layoutIndex));
-		try {
-			setIsSaving(true);
-			await patchDashboardV2({ id: dashboardId }, ops);
-			refetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		} finally {
-			setIsSaving(false);
-		}
-	}, [section, dashboardId, refetch, showErrorModal]);
-
-	return { deleteSection, isSaving };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useFirstSectionMigration.ts

@@ -1,64 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { addSectionOp, titleUntitledSectionOp } from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { DashboardSection } from '../../../utils';
-
-interface Params {
-	sections: DashboardSection[];
-}
-
-interface Result {
-	migrate: (newSectionTitle: string) => Promise<void>;
-	isSaving: boolean;
-}
-
-/**
- * Converts a free-flowing dashboard into a sectioned one: every existing
- * untitled layout that holds panels is titled in place ("Section 1", "Section
- * 2", …), then the brand-new section the user asked for is appended — all in one
- * atomic patch. Used once the user confirms the migration prompt.
- */
-export function useFirstSectionMigration({ sections }: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const migrate = useCallback(
-		async (newSectionTitle: string): Promise<void> => {
-			const trimmed = newSectionTitle.trim();
-			if (!dashboardId || !trimmed) {
-				return;
-			}
-
-			const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-			let counter = 1;
-			sections.forEach((s) => {
-				if (!s.title && s.items.length > 0) {
-					ops.push(titleUntitledSectionOp(s.layoutIndex, `Section ${counter}`));
-					counter += 1;
-				}
-			});
-			ops.push(addSectionOp(trimmed));
-
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, ops);
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[sections, dashboardId, refetch, showErrorModal],
-	);
-
-	return { migrate, isSaving };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/usePersistLayout.ts

@@ -1,97 +0,0 @@
-import { useCallback, useState } from 'react';
-import type { Layout } from 'react-grid-layout';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { replaceSectionItemsOp } from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { GridItem } from '../../../utils';
-
-interface Params {
-	layoutIndex: number;
-	items: GridItem[];
-}
-
-interface Result {
-	handleLayoutChange: (rglLayout: Layout[]) => void;
-	isSaving: boolean;
-}
-
-/** Maps an RGL layout back onto the section's grid items, preserving panel refs. */
-function mergeRglLayout(rglLayout: Layout[], items: GridItem[]): GridItem[] {
-	const byId = new Map(items.map((item) => [item.id, item]));
-	return rglLayout
-		.map((entry) => {
-			const existing = byId.get(entry.i);
-			if (!existing) {
-				return null;
-			}
-			return {
-				...existing,
-				x: entry.x,
-				y: entry.y,
-				width: entry.w,
-				height: entry.h,
-			};
-		})
-		.filter((item): item is GridItem => item !== null);
-}
-
-function hasGeometryChanged(next: GridItem[], prev: GridItem[]): boolean {
-	if (next.length !== prev.length) {
-		return true;
-	}
-	const prevById = new Map(prev.map((item) => [item.id, item]));
-	return next.some((item) => {
-		const before = prevById.get(item.id);
-		if (!before) {
-			return true;
-		}
-		return (
-			before.x !== item.x ||
-			before.y !== item.y ||
-			before.width !== item.width ||
-			before.height !== item.height
-		);
-	});
-}
-
-/**
- * Persists panel geometry within a single section. Call the returned handler
- * from RGL's `onDragStop`/`onResizeStop` (stop events only — not continuous
- * `onLayoutChange`) to limit network churn.
- */
-export function usePersistLayout({ layoutIndex, items }: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const handleLayoutChange = useCallback(
-		async (rglLayout: Layout[]): Promise<void> => {
-			if (!dashboardId) {
-				return;
-			}
-			const nextItems = mergeRglLayout(rglLayout, items);
-			if (!hasGeometryChanged(nextItems, items)) {
-				return;
-			}
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, [
-					replaceSectionItemsOp(layoutIndex, nextItems),
-				]);
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[dashboardId, items, layoutIndex, refetch, showErrorModal],
-	);
-
-	return { handleLayoutChange, isSaving };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useRenameSection.ts

@@ -1,50 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { renameSectionOp } from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-
-interface Params {
-	layoutIndex: number;
-}
-
-interface Result {
-	rename: (title: string) => Promise<boolean>;
-	isSaving: boolean;
-}
-
-/** Renames a section's title via `replace /spec/layouts/<i>/spec/display/title`. */
-export function useRenameSection({ layoutIndex }: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const rename = useCallback(
-		async (title: string): Promise<boolean> => {
-			const trimmed = title.trim();
-			if (!dashboardId || !trimmed) {
-				return false;
-			}
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, [
-					renameSectionOp(layoutIndex, trimmed),
-				]);
-				refetch();
-				return true;
-			} catch (error) {
-				showErrorModal(error as APIError);
-				return false;
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[dashboardId, layoutIndex, refetch, showErrorModal],
-	);
-
-	return { rename, isSaving };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useSectionDragReorder.ts

@@ -1,125 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-	type DragEndEvent,
-	type DragStartEvent,
-	KeyboardSensor,
-	PointerSensor,
-	useSensor,
-	useSensors,
-} from '@dnd-kit/core';
-import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { reorderLayoutsOp } from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { DashboardSection } from '../../../utils';
-
-interface Params {
-	sections: DashboardSection[];
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-}
-
-interface Result {
-	sensors: ReturnType<typeof useSensors>;
-	/** Display order — optimistically reordered on drop so the UI doesn't wait on refetch. */
-	orderedSections: DashboardSection[];
-	/** The section currently being dragged (for the DragOverlay preview), or null. */
-	activeSection: DashboardSection | null;
-	onDragStart: (event: DragStartEvent) => void;
-	onDragEnd: (event: DragEndEvent) => void;
-	onDragCancel: () => void;
-}
-
-/**
- * Owns section-reorder drag state. Reorders happen optimistically in local
- * state (keyed by stable section id) and persist via a single
- * `replace /spec/layouts` patch; the optimistic order is cleared once fresh
- * server data arrives. Each section maps 1:1 to a Grid layout via `layoutIndex`,
- * so the new layouts array is rebuilt by mapping the reordered sections back.
- */
-export function useSectionDragReorder({ sections, layouts }: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const [activeId, setActiveId] = useState<string | null>(null);
-	const [localOrderIds, setLocalOrderIds] = useState<string[] | null>(null);
-	const { showErrorModal } = useErrorModal();
-
-	const sensors = useSensors(
-		useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-		useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-	);
-
-	// Server data is the source of truth — drop optimistic order whenever it changes.
-	useEffect(() => {
-		setLocalOrderIds(null);
-	}, [sections]);
-
-	const orderedSections = useMemo<DashboardSection[]>(() => {
-		if (!localOrderIds) {
-			return sections;
-		}
-		const byId = new Map(sections.map((s) => [s.id, s]));
-		const ordered = localOrderIds
-			.map((id) => byId.get(id))
-			.filter((s): s is DashboardSection => s !== undefined);
-		return ordered.length === sections.length ? ordered : sections;
-	}, [sections, localOrderIds]);
-
-	const onDragStart = useCallback((event: DragStartEvent): void => {
-		setActiveId(String(event.active.id));
-	}, []);
-
-	const onDragCancel = useCallback((): void => {
-		setActiveId(null);
-	}, []);
-
-	const onDragEnd = useCallback(
-		async (event: DragEndEvent): Promise<void> => {
-			setActiveId(null);
-			const { active, over } = event;
-			if (!over || active.id === over.id || !dashboardId || !layouts) {
-				return;
-			}
-
-			const oldIndex = orderedSections.findIndex((s) => s.id === active.id);
-			const newIndex = orderedSections.findIndex((s) => s.id === over.id);
-			if (oldIndex < 0 || newIndex < 0) {
-				return;
-			}
-
-			const newOrdered = arrayMove(orderedSections, oldIndex, newIndex);
-			setLocalOrderIds(newOrdered.map((s) => s.id));
-
-			const newLayouts = newOrdered
-				.map((s) => layouts[s.layoutIndex])
-				.filter((l): l is DashboardtypesLayoutDTO => l !== undefined);
-
-			try {
-				await patchDashboardV2({ id: dashboardId }, [reorderLayoutsOp(newLayouts)]);
-				refetch();
-			} catch (error) {
-				setLocalOrderIds(null); // revert optimistic order on failure
-				showErrorModal(error as APIError);
-			}
-		},
-		[orderedSections, layouts, dashboardId, refetch, showErrorModal],
-	);
-
-	const activeSection = useMemo(
-		() => orderedSections.find((s) => s.id === activeId) ?? null,
-		[orderedSections, activeId],
-	);
-
-	return {
-		sensors,
-		orderedSections,
-		activeSection,
-		onDragStart,
-		onDragEnd,
-		onDragCancel,
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useToggleSectionCollapse.ts

@@ -1,36 +0,0 @@
-import { useCallback } from 'react';
-
-import {
-	selectIsSectionOpen,
-	useDashboardStore,
-} from '../../../store/useDashboardStore';
-
-interface Params {
-	sectionId: string;
-}
-
-interface Result {
-	open: boolean;
-	toggle: () => void;
-}
-
-/**
- * Owns a section's expand/collapse state. Collapse is a frontend-only, per-user
- * preference (not in the dashboard spec): it lives in the persisted zustand
- * store, keyed by dashboardId + section id, and survives reloads. Default open.
- */
-export function useToggleSectionCollapse({ sectionId }: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const open = useDashboardStore(selectIsSectionOpen(dashboardId, sectionId));
-	const toggleSectionCollapse = useDashboardStore(
-		(s) => s.toggleSectionCollapse,
-	);
-
-	const toggle = useCallback((): void => {
-		if (dashboardId) {
-			toggleSectionCollapse(dashboardId, sectionId);
-		}
-	}, [dashboardId, sectionId, toggleSectionCollapse]);
-
-	return { open, toggle };
-}

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

@@ -7,27 +7,19 @@ import type {
 	DashboardtypesPanelDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
-import { useDashboardStore } from '../store/useDashboardStore';
 import { layoutsToSections } from '../utils';
-import AddSectionControl from './Section/AddSectionControl/AddSectionControl';
 import Section from './Section/Section/Section';
-import SectionList from './Section/SectionList';
 import styles from './PanelsAndSectionsLayout.module.scss';
 
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
-interface PanelsAndSectionsLayoutProps {
+interface Props {
 	layouts: DashboardtypesLayoutDTO[];
 	panels: Record<string, DashboardtypesPanelDTO | undefined>;
 }
 
-function PanelsAndSectionsLayout({
-	layouts,
-	panels,
-}: PanelsAndSectionsLayoutProps): JSX.Element {
-	const isEditable = useDashboardStore((s) => s.isEditable);
-
+function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
 	const sections = useMemo(
 		() => layoutsToSections(layouts, panels),
 		[layouts, panels],
@@ -36,11 +28,6 @@ function PanelsAndSectionsLayout({
 	const isEmpty =
 		sections.length === 0 || sections.every((s) => s.items.length === 0);
 
-	// Sectioned mode = at least one titled layout. Sections then become a
-	// reorderable list; otherwise the dashboard is a single free-flowing grid
-	// with no section chrome or reordering.
-	const isSectioned = useMemo(() => sections.some((s) => !!s.title), [sections]);
-
 	const renderContent = (): ReactNode => {
 		if (isEmpty) {
 			return (
@@ -55,27 +42,12 @@ function PanelsAndSectionsLayout({
 			);
 		}
 
-		if (isSectioned) {
-			return <SectionList sections={sections} layouts={layouts} />;
-		}
-
 		return sections.map((section) => (
 			<Section key={section.id} section={section} />
 		));
 	};
 
-	return (
-		<div className={styles.body}>
-			{renderContent()}
-			{isEditable ? (
-				<AddSectionControl
-					sections={sections}
-					layouts={layouts}
-					isSectioned={isSectioned}
-				/>
-			) : null}
-		</div>
-	);
+	return <div className={styles.body}>{renderContent()}</div>;
 }
 
 export default PanelsAndSectionsLayout;

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -8,15 +8,12 @@ import { LayoutGrid } from '@signozhq/icons';
 
 import styles from './DashboardBreadcrumbs.module.scss';
 
-interface DashboardBreadcrumbsProps {
+interface Props {
 	title: string;
 	image: string;
 }
 
-function DashboardBreadcrumbs({
-	title,
-	image,
-}: DashboardBreadcrumbsProps): JSX.Element {
+function DashboardBreadcrumbs({ title, image }: Props): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 
 	const goToListPage = useCallback(() => {

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardHeader.tsx

@@ -5,12 +5,12 @@ import DashboardBreadcrumbs from './DashboardBreadcrumbs';
 
 import styles from './DashboardHeader.module.scss';
 
-interface DashboardHeaderProps {
+interface Props {
 	title: string;
 	image: string;
 }
 
-function DashboardHeader({ title, image }: DashboardHeaderProps): JSX.Element {
+function DashboardHeader({ title, image }: Props): JSX.Element {
 	return (
 		<div className={styles.dashboardHeader}>
 			<DashboardBreadcrumbs title={title} image={image} />

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

@@ -1,37 +1,20 @@
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-import useComponentPermission from 'hooks/useComponentPermission';
-import { useAppContext } from 'providers/App/App';
 
 import DashboardDescription from './DashboardDescription';
 import PanelsAndSectionsLayout from './PanelsAndSectionsLayout';
-import { useDashboardStore } from './store/useDashboardStore';
 import styles from './DashboardContainer.module.scss';
 
-interface DashboardContainerProps {
+interface Props {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	refetch: () => void;
 }
 
-function DashboardContainer({
-	dashboard,
-	refetch,
-}: DashboardContainerProps): JSX.Element {
+function DashboardContainer({ dashboard, refetch }: Props): JSX.Element {
 	const fullScreenHandle = useFullScreenHandle();
 
-	const { user } = useAppContext();
-	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
-	const isEditable = !dashboard.locked && editDashboard;
-
-	// Publish edit context to the store so hooks/components read it from there
-	// instead of receiving dashboardId/isEditable/refetch as props down the tree.
-	const setEditContext = useDashboardStore((s) => s.setEditContext);
-	useEffect(() => {
-		setEditContext({ dashboardId: dashboard.id ?? '', isEditable, refetch });
-	}, [dashboard.id, isEditable, refetch, setEditContext]);
-
 	const { spec } = dashboard;
 	const layouts = useMemo(() => spec?.layouts ?? [], [spec?.layouts]);
 	const panels = useMemo(() => spec?.panels ?? {}, [spec?.panels]);

frontend/src/pages/DashboardPageV2/DashboardContainer/patchOps.ts

@@ -1,177 +0,0 @@
-import type {
-	DashboardGridItemDTO,
-	DashboardtypesJSONPatchOperationDTO,
-	DashboardtypesLayoutDTO,
-	DashboardtypesPanelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { DashboardtypesJSONPatchOperationDTOOp } from 'api/generated/services/sigNoz.schemas';
-
-import type { GridItem } from './utils';
-
-/**
- * Pure RFC-6902 JSON-Patch builders for the V2 dashboard spec. These are
- * intentionally side-effect-free (no React, no network) so they can be unit
- * tested and reused by the layout hooks. JSON pointers target the postable
- * shape: `/spec/layouts/...`, `/spec/panels/...` (matches the existing V2
- * patches in DashboardSettings/General and DashboardDescription).
- */
-
-const { add, replace, remove } = DashboardtypesJSONPatchOperationDTOOp;
-
-const PANEL_REF_PREFIX = '#/spec/panels/';
-
-export function panelRef(panelId: string): string {
-	return `${PANEL_REF_PREFIX}${panelId}`;
-}
-
-/**
- * Builds a minimal, backend-valid panel for a given plugin kind. The spec
- * requires exactly one query whose plugin kind is allowed for the panel;
- * `signoz/BuilderQuery` is allowed for every panel kind and its contents are not
- * validated, so an empty builder query is the safe default. The real query is
- * filled in once the panel editor lands.
- */
-export function createDefaultPanel(pluginKind: string): DashboardtypesPanelDTO {
-	// The DTO types plugin/query kinds as large generated enum unions; the kind
-	// here is chosen dynamically by the user, so we build the structurally-valid
-	// shape and assert the type.
-	return {
-		kind: 'Panel',
-		spec: {
-			display: { name: 'New panel' },
-			plugin: { kind: pluginKind, spec: {} },
-			queries: [
-				{
-					kind: 'TimeSeriesQuery',
-					spec: { plugin: { kind: 'signoz/BuilderQuery', spec: { name: 'A' } } },
-				},
-			],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-/** Converts a UI grid item back into the spec's grid-item DTO shape. */
-export function gridItemToDTO(item: GridItem): DashboardGridItemDTO {
-	return {
-		x: item.x,
-		y: item.y,
-		width: item.width,
-		height: item.height,
-		content: { $ref: panelRef(item.id) },
-	};
-}
-
-/** Replace the entire items array of one section (used on panel move/resize). */
-export function replaceSectionItemsOp(
-	layoutIndex: number,
-	items: GridItem[],
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: replace,
-		path: `/spec/layouts/${layoutIndex}/spec/items`,
-		value: items.map(gridItemToDTO),
-	};
-}
-
-/** Replace the whole layouts array (used on section reorder — avoids move-index ambiguity). */
-export function reorderLayoutsOp(
-	layouts: DashboardtypesLayoutDTO[],
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: replace, path: '/spec/layouts', value: layouts };
-}
-
-/** An empty titled Grid layout (one section). */
-export function newGridLayout(title: string): DashboardtypesLayoutDTO {
-	return {
-		kind: 'Grid' as DashboardtypesLayoutDTO['kind'],
-		spec: { display: { title }, items: [] },
-	};
-}
-
-/** Append a new, empty titled Grid section. */
-export function addSectionOp(
-	title: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: add, path: '/spec/layouts/-', value: newGridLayout(title) };
-}
-
-interface AddPanelToSectionArgs {
-	panelId: string;
-	panel: DashboardtypesPanelDTO;
-	layoutIndex: number;
-	item: DashboardGridItemDTO;
-}
-
-/** Add a panel to `spec.panels` and an item ref into a section, as one atomic patch. */
-export function addPanelToSectionOps({
-	panelId,
-	panel,
-	layoutIndex,
-	item,
-}: AddPanelToSectionArgs): DashboardtypesJSONPatchOperationDTO[] {
-	return [
-		{ op: add, path: `/spec/panels/${panelId}`, value: panel },
-		{ op: add, path: `/spec/layouts/${layoutIndex}/spec/items/-`, value: item },
-	];
-}
-
-interface MovePanelArgs {
-	sourceIndex: number;
-	sourceItems: GridItem[];
-	targetIndex: number;
-	targetItems: GridItem[];
-}
-
-/** Move a panel's item ref from one section to another (panel stays in spec.panels). */
-export function movePanelBetweenSectionsOps({
-	sourceIndex,
-	sourceItems,
-	targetIndex,
-	targetItems,
-}: MovePanelArgs): DashboardtypesJSONPatchOperationDTO[] {
-	return [
-		replaceSectionItemsOp(sourceIndex, sourceItems),
-		replaceSectionItemsOp(targetIndex, targetItems),
-	];
-}
-
-/** Rename an existing section's title. */
-export function renameSectionOp(
-	layoutIndex: number,
-	title: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: replace,
-		path: `/spec/layouts/${layoutIndex}/spec/display/title`,
-		value: title,
-	};
-}
-
-/**
- * First-section migration: give an existing untitled (free-flowing) layout a
- * title, turning it into a section in place while preserving its panels.
- */
-export function titleUntitledSectionOp(
-	layoutIndex: number,
-	title: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: add,
-		path: `/spec/layouts/${layoutIndex}/spec/display`,
-		value: { title },
-	};
-}
-
-/** Remove a section. Panel cleanup (orphaned refs) is handled by the caller. */
-export function removeSectionOp(
-	layoutIndex: number,
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: remove, path: `/spec/layouts/${layoutIndex}` };
-}
-
-/** Remove a panel definition from `spec.panels`. */
-export function removePanelOp(
-	panelId: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: remove, path: `/spec/panels/${panelId}` };
-}

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

@@ -1,35 +0,0 @@
-import type { StateCreator } from 'zustand';
-
-import type { DashboardStore } from '../useDashboardStore';
-
-/**
- * Section collapse state — frontend-only and persisted to localStorage. Keyed by
- * dashboardId → section stable id → open. An absent entry means "open" (the
- * default). This is intentionally NOT server state: collapse is a per-user UI
- * preference, so it lives here instead of in the dashboard spec.
- */
-export interface CollapseSlice {
-	collapsed: Record<string, Record<string, boolean>>;
-	toggleSectionCollapse: (dashboardId: string, sectionId: string) => void;
-}
-
-export const createCollapseSlice: StateCreator<
-	DashboardStore,
-	[['zustand/persist', unknown]],
-	[],
-	CollapseSlice
-> = (set, get) => ({
-	collapsed: {},
-	toggleSectionCollapse: (dashboardId, sectionId): void => {
-		const { collapsed } = get();
-		const current = collapsed[dashboardId]?.[sectionId];
-		// Absent → open by default, so the first toggle closes it.
-		const next = current === undefined ? false : !current;
-		set({
-			collapsed: {
-				...collapsed,
-				[dashboardId]: { ...collapsed[dashboardId], [sectionId]: next },
-			},
-		});
-	},
-});

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

@@ -1,38 +0,0 @@
-import type { StateCreator } from 'zustand';
-
-import type { DashboardStore } from '../useDashboardStore';
-
-/**
- * Edit context shared across the V2 dashboard tree — the dashboard id, whether
- * the user can edit, and the react-query refetch. Set once by DashboardContainer
- * so hooks/components read it from the store instead of receiving it as props
- * through every layer. Not persisted.
- */
-export interface EditContextSlice {
-	dashboardId: string;
-	isEditable: boolean;
-	refetch: () => void;
-	setEditContext: (ctx: {
-		dashboardId: string;
-		isEditable: boolean;
-		refetch: () => void;
-	}) => void;
-}
-
-export const createEditContextSlice: StateCreator<
-	DashboardStore,
-	[['zustand/persist', unknown]],
-	[],
-	EditContextSlice
-> = (set) => ({
-	dashboardId: '',
-	isEditable: false,
-	refetch: (): void => undefined,
-	setEditContext: (ctx): void => {
-		set({
-			dashboardId: ctx.dashboardId,
-			isEditable: ctx.isEditable,
-			refetch: ctx.refetch,
-		});
-	},
-});

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

@@ -1,44 +0,0 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-
-import {
-	createEditContextSlice,
-	type EditContextSlice,
-} from './slices/editContextSlice';
-import {
-	createCollapseSlice,
-	type CollapseSlice,
-} from './slices/collapseSlice';
-
-export type DashboardStore = EditContextSlice & CollapseSlice;
-
-/**
- * V2 dashboard session store. Holds cross-cutting client state only — never the
- * dashboard spec (that stays in react-query via useGetDashboardV2). Two slices:
- * - edit-context: dashboardId / isEditable / refetch (set once, not persisted).
- * - collapse: per-section open state (frontend-only, persisted to localStorage).
- */
-export const useDashboardStore = create<DashboardStore>()(
-	persist(
-		(...a) => ({
-			...createEditContextSlice(...a),
-			...createCollapseSlice(...a),
-		}),
-		{
-			name: '@signoz/dashboard-v2',
-			// Persist only the collapse map — context (incl. the refetch fn) is transient.
-			partialize: (state) => ({ collapsed: state.collapsed }),
-		},
-	),
-);
-
-/** Selector: is a section open? Absent entry (or no dashboard) → open by default. */
-export const selectIsSectionOpen =
-	(dashboardId: string, sectionId: string) =>
-	(state: DashboardStore): boolean => {
-		if (!dashboardId) {
-			return true;
-		}
-		const value = state.collapsed[dashboardId]?.[sectionId];
-		return value === undefined ? true : value;
-	};

frontend/src/pages/DashboardPageV2/DashboardContainer/utils.ts

@@ -72,6 +72,7 @@ export interface DashboardSection {
 	/** Position of this section's Grid in `spec.layouts`. All JSON-Patch ops target by this. */
 	layoutIndex: number;
 	title: string | undefined;
+	open: boolean;
 	items: GridItem[];
 	repeatVariable: string | undefined;
 }
@@ -126,11 +127,15 @@ export function layoutsToSections(
 				.filter((it): it is GridItem => it !== null);
 
 			const title = spec?.display?.title;
+			// `open` defaults to true when no collapse field is set (the section
+			// is expanded by default).
+			const open = spec?.display?.collapse?.open !== false;
 
 			return {
 				id: getSectionStableId(items, idx),
 				layoutIndex: idx,
 				title,
+				open,
 				items,
 				repeatVariable: spec?.repeatVariable,
 			};

tests/fixtures/http.py

@@ -17,6 +17,8 @@ from fixtures.logger import setup_logger
 
 logger = setup_logger(__name__)
 
+ZEUS_NETWORK_ALIAS = "signoz-zeus"
+
 
 @pytest.fixture(name="zeus", scope="package")
 def zeus(
@@ -31,6 +33,7 @@ def zeus(
     def create() -> types.TestContainerDocker:
         container = WireMockContainer(image="wiremock/wiremock:2.35.1-1", secure=False)
         container.with_network(network)
+        container.with_network_aliases(ZEUS_NETWORK_ALIAS)
         container.start()
 
         return types.TestContainerDocker(
@@ -42,7 +45,7 @@ def zeus(
                     container.get_exposed_port(8080),
                 )
             },
-            container_configs={"8080": types.TestContainerUrlConfig("http", container.get_wrapped_container().name, 8080)},
+            container_configs={"8080": types.TestContainerUrlConfig("http", ZEUS_NETWORK_ALIAS, 8080)},
         )
 
     def delete(container: types.TestContainerDocker):

tests/fixtures/signoz.py

@@ -1,14 +1,19 @@
+import os
 import platform
+import shutil
+import subprocess
+import threading
 import time
+from dataclasses import dataclass
 from http import HTTPStatus
 from os import path
+from pathlib import Path
 
 import docker
 import docker.errors
 import pytest
 import requests
 from testcontainers.core.container import DockerContainer, Network
-from testcontainers.core.image import DockerImage
 
 from fixtures import reuse, types
 from fixtures.logger import setup_logger
@@ -16,6 +21,110 @@ from fixtures.logger import setup_logger
 logger = setup_logger(__name__)
 
 
+@dataclass
+class SigNozImageBuild:
+    process: subprocess.Popen
+    command: list[str]
+    cache_path: Path | None = None
+    next_cache_path: Path | None = None
+    reader: threading.Thread | None = None
+
+
+def _stream_build_output(pipe, log) -> None:
+    try:
+        for line in iter(pipe.readline, ""):
+            log.info("buildx: %s", line.rstrip())
+    finally:
+        pipe.close()
+
+
+def start_signoz_image_build(pytestconfig: pytest.Config, dockerfile_path: str, arch: str, zeus_url: str) -> SigNozImageBuild:
+    root = pytestconfig.rootpath.parent
+    command = [
+        "docker",
+        "buildx",
+        "build",
+        "--load",
+        "--progress",
+        "plain",
+        "--tag",
+        "signoz:integration",
+        "--file",
+        dockerfile_path,
+        "--build-arg",
+        f"TARGETARCH={arch}",
+        "--build-arg",
+        f"ZEUSURL={zeus_url}",
+        str(root),
+    ]
+
+    cache_path = None
+    next_cache_path = None
+    if os.environ.get("ACTIONS_RUNTIME_TOKEN"):
+        # Running in GitHub Actions — use BuildKit's native GHA cache backend.
+        # Avoids the local-write races and partial exports seen with type=local.
+        scope = os.environ.get("SIGNOZ_BUILDX_GHA_SCOPE", "signoz-integration")
+        command.extend(["--cache-from", f"type=gha,scope={scope}"])
+        command.extend(["--cache-to", f"type=gha,scope={scope},mode=max"])
+    elif build_cache_dir := os.environ.get("SIGNOZ_INTEGRATION_BUILD_CACHE_DIR"):
+        # Local cache for developer machines / non-GHA CI.
+        cache_path = Path(build_cache_dir)
+        next_cache_path = Path(f"{build_cache_dir}-next")
+        cache_path.parent.mkdir(parents=True, exist_ok=True)
+        shutil.rmtree(next_cache_path, ignore_errors=True)
+
+        if cache_path.exists():
+            command.extend(["--cache-from", f"type=local,src={cache_path}"])
+        command.extend(["--cache-to", f"type=local,dest={next_cache_path},mode=max"])
+
+    logger.info("Building SigNoz integration image with %s", " ".join(command))
+    process = subprocess.Popen(
+        command,
+        cwd=root,
+        stdout=subprocess.PIPE,
+        stderr=subprocess.STDOUT,
+        text=True,
+        bufsize=1,
+    )
+    reader = threading.Thread(target=_stream_build_output, args=(process.stdout, logger), daemon=True)
+    reader.start()
+
+    return SigNozImageBuild(
+        process=process,
+        command=command,
+        cache_path=cache_path,
+        next_cache_path=next_cache_path,
+        reader=reader,
+    )
+
+
+def wait_for_signoz_image_build(build: SigNozImageBuild) -> None:
+    returncode = build.process.wait()
+    if build.reader is not None:
+        build.reader.join(timeout=5)
+    if returncode != 0:
+        raise subprocess.CalledProcessError(returncode, build.command)
+
+    if build.cache_path and build.next_cache_path and build.next_cache_path.exists():
+        shutil.rmtree(build.cache_path, ignore_errors=True)
+        shutil.move(build.next_cache_path, build.cache_path)
+
+
+def stop_signoz_image_build(build: SigNozImageBuild) -> None:
+    if build.process.poll() is not None:
+        return
+
+    build.process.terminate()
+    try:
+        build.process.wait(timeout=10)
+    except subprocess.TimeoutExpired:
+        build.process.kill()
+        build.process.wait()
+
+    if build.reader is not None:
+        build.reader.join(timeout=5)
+
+
 def create_signoz(
     network: Network,
     zeus: types.TestContainerDocker,
@@ -33,9 +142,6 @@ def create_signoz(
     """
 
     def create() -> types.SigNoz:
-        # Run the migrations for clickhouse
-        request.getfixturevalue("migrator")
-
         # Get the no-web flag
         with_web = pytestconfig.getoption("--with-web")
 
@@ -48,19 +154,15 @@ def create_signoz(
         if with_web:
             dockerfile_path = "cmd/enterprise/Dockerfile.with-web.integration"
 
-        # Docker build context is the repo root — one up from pytest's
-        # rootdir (tests/).
-        self = DockerImage(
-            path=str(pytestconfig.rootpath.parent),
-            dockerfile_path=dockerfile_path,
-            tag="signoz:integration",
-            buildargs={
-                "TARGETARCH": arch,
-                "ZEUSURL": zeus.container_configs["8080"].base(),
-            },
-        )
-
-        self.build()
+        # The SigNoz image build does not depend on ClickHouse migrations, so
+        # build it while the migrator container runs.
+        image_build = start_signoz_image_build(pytestconfig, dockerfile_path, arch, zeus.container_configs["8080"].base())
+        try:
+            request.getfixturevalue("migrator")
+            wait_for_signoz_image_build(image_build)
+        except Exception:  # pylint: disable=broad-exception-caught
+            stop_signoz_image_build(image_build)
+            raise
 
         env = (
             {