test: use v1 dashboards list API in cleanup (#11688)

* test: check for response status in integration test before initiating cleanup

* fix: use v1 list api in cleanup

frontend/src/constants/reactQueryKeys.ts

@@ -36,6 +36,7 @@ export const REACT_QUERY_KEY = {
 	GET_TRACE_V4_WATERFALL: 'GET_TRACE_V4_WATERFALL',
 	GET_TRACE_AGGREGATIONS: 'GET_TRACE_AGGREGATIONS',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
+	GET_TRACE_V3_FLAMEGRAPH: 'GET_TRACE_V3_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',
 	GET_DEPLOYMENT_LIST: 'GET_DEPLOYMENT_LIST',

frontend/src/hooks/trace/useGetTraceFlamegraphV3.tsx

@@ -0,0 +1,42 @@
+import { getFlamegraph } from 'api/generated/services/tracedetail';
+import {
+	SpantypesGettableFlamegraphTraceDTO,
+	TelemetrytypesTelemetryFieldKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useQuery, UseQueryResult } from 'react-query';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+
+export interface GetTraceFlamegraphV3Props {
+	traceId: string;
+	selectedSpanId?: string;
+	selectFields?: TelemetryFieldKey[];
+	enabled?: boolean;
+}
+
+const useGetTraceFlamegraphV3 = (
+	props: GetTraceFlamegraphV3Props,
+): UseQueryResult<SpantypesGettableFlamegraphTraceDTO, unknown> =>
+	useQuery({
+		queryFn: () =>
+			getFlamegraph(
+				{ traceID: props.traceId },
+				{
+					selectedSpanId: props.selectedSpanId,
+					// v5 TelemetryFieldKey and the generated DTO are runtime-identical; only
+					// the literal-union vs enum nominal types differ
+					selectFields: props.selectFields as TelemetrytypesTelemetryFieldKeyDTO[],
+				},
+			).then((res) => res.data),
+		queryKey: [
+			REACT_QUERY_KEY.GET_TRACE_V3_FLAMEGRAPH,
+			props.traceId,
+			props.selectedSpanId,
+			props.selectFields,
+		],
+		enabled: props.enabled,
+		keepPreviousData: true,
+		refetchOnWindowFocus: false,
+	});
+
+export default useGetTraceFlamegraphV3;

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

@@ -28,40 +28,43 @@ import { USER_ROLES } from 'types/roles';
 import ConfirmDeleteDialog from '../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
 import DashboardSettings from '../../DashboardSettings';
 import SettingsDrawer from '../SettingsDrawer';
-import styles from './DashboardActions.module.scss';
-import { useDashboardStore } from '../../store/useDashboardStore';
+import styles from '../DashboardDescription.module.scss';
 
 interface DashboardActionsProps {
-	title: string;
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	handle: FullScreenHandle;
 	isDashboardLocked: boolean;
+	editDashboard: boolean;
 	isAuthor: boolean;
+	addPanelPermission: boolean;
 	onAddPanel: () => void;
 	onLockToggle: () => void;
 	onOpenRename: () => void;
 }
 
 function DashboardActions({
-	title,
 	dashboard,
 	handle,
 	isDashboardLocked,
+	editDashboard,
 	isAuthor,
+	addPanelPermission,
 	onAddPanel,
 	onLockToggle,
 	onOpenRename,
 }: DashboardActionsProps): JSX.Element {
-	const canEdit = useDashboardStore((s) => s.isEditable);
 	const { user } = useAppContext();
 	const { t } = useTranslation(['dashboard', 'common']);
 
+	const id = dashboard.id ?? '';
+	const title = dashboard.spec?.display?.name ?? '';
+
 	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
 		useState<boolean>(false);
 
 	const [state, setCopy] = useCopyToClipboard();
 	const [isDeleteOpen, setIsDeleteOpen] = useState<boolean>(false);
-	const deleteDashboardMutation = useDeleteDashboard(dashboard.id);
+	const deleteDashboardMutation = useDeleteDashboard(id);
 
 	useEffect(() => {
 		if (state.error) {
@@ -100,7 +103,7 @@ function DashboardActions({
 
 	const menuItems = useMemo<MenuItem[]>(() => {
 		const editGroup: MenuItem[] = [];
-		if (canEdit) {
+		if (!isDashboardLocked && editDashboard) {
 			editGroup.push({
 				key: 'rename',
 				label: 'Rename',
@@ -156,6 +159,7 @@ function DashboardActions({
 			);
 	}, [
 		isDashboardLocked,
+		editDashboard,
 		isAuthor,
 		user.role,
 		dashboard.createdBy,
@@ -165,60 +169,58 @@ function DashboardActions({
 		exportJSON,
 		setCopy,
 		dashboardDataJSON,
-		canEdit,
 	]);
 
 	return (
-		<div className={styles.dashboardActionsContainer}>
+		<div className={styles.rightSection}>
 			<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-			<div className={styles.dashboardActionsSecondary}>
-				<DropdownMenuSimple menu={{ items: menuItems }}>
+			<DropdownMenuSimple menu={{ items: menuItems }}>
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="icon"
+					prefix={<Ellipsis size={14} />}
+					className={styles.icons}
+					testId="options"
+				/>
+			</DropdownMenuSimple>
+			{!isDashboardLocked && editDashboard && (
+				<>
 					<Button
 						variant="solid"
 						color="secondary"
-						size="icon"
-						prefix={<Ellipsis size="md" />}
-						testId="options"
-					/>
-				</DropdownMenuSimple>
-				{canEdit && (
-					<>
-						<Button
-							variant="solid"
-							color="secondary"
-							prefix={<Configure size="md" />}
-							testId="show-drawer"
-							onClick={(): void => setIsSettingsDrawerOpen(true)}
-							size="md"
-						>
-							Configure
-						</Button>
-						<SettingsDrawer
-							drawerTitle="Dashboard Configuration"
-							isOpen={isSettingsDrawerOpen}
-							onClose={(): void => setIsSettingsDrawerOpen(false)}
-						>
-							<DashboardSettings dashboard={dashboard} />
-						</SettingsDrawer>
-					</>
-				)}
-				{!isDashboardLocked && (
-					<Button
-						variant="solid"
-						color="primary"
-						onClick={onAddPanel}
-						prefix={<Plus size="md" />}
-						testId="add-panel-header"
+						prefix={<Configure size="md" />}
+						testId="show-drawer"
+						onClick={(): void => setIsSettingsDrawerOpen(true)}
 						size="md"
 					>
-						New Panel
+						Configure
 					</Button>
-				)}
-			</div>
+					<SettingsDrawer
+						drawerTitle="Dashboard Configuration"
+						isOpen={isSettingsDrawerOpen}
+						onClose={(): void => setIsSettingsDrawerOpen(false)}
+					>
+						<DashboardSettings dashboard={dashboard} />
+					</SettingsDrawer>
+				</>
+			)}
+			{!isDashboardLocked && addPanelPermission && (
+				<Button
+					variant="solid"
+					color="primary"
+					onClick={onAddPanel}
+					prefix={<Plus size="md" />}
+					testId="add-panel-header"
+					size="md"
+				>
+					New Panel
+				</Button>
+			)}
 			<ConfirmDeleteDialog
 				open={isDeleteOpen}
-				title={`Delete dashboard"?`}
-				description={`Are you sure you want to delete this dashboard - "${title}"? This action cannot be undone.`}
+				title={`Delete dashboard "${title}"?`}
+				description="This action cannot be undone."
 				isLoading={deleteDashboardMutation.isLoading}
 				onConfirm={handleConfirmDelete}
 				onClose={(): void => setIsDeleteOpen(false)}

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

@@ -0,0 +1,210 @@
+.dashboardDescriptionContainer {
+	box-shadow: none;
+	border: none;
+	background: unset;
+	color: var(--l2-foreground);
+
+	:global(.ant-card-body) {
+		padding: 0px;
+	}
+
+	.dashboardDetails {
+		display: flex;
+		justify-content: space-between;
+		gap: 8px;
+		padding: 16px 16px 0px 16px;
+		align-items: flex-start;
+
+		.leftSection {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			width: 45%;
+			height: 40px;
+
+			.dashboardImg {
+				height: 16px;
+				width: 16px;
+			}
+
+			.dashboardTitle {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 16px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 24px; /* 150% */
+				letter-spacing: -0.08px;
+				max-width: 80%;
+
+				display: -webkit-box;
+				-webkit-line-clamp: 1;
+				-webkit-box-orient: vertical;
+				overflow: hidden;
+			}
+
+			.clickableTitle {
+				cursor: pointer;
+			}
+
+			.titleEdit {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+				width: 100%;
+				min-width: 0;
+			}
+
+			.titleInput {
+				flex: 1;
+				min-width: 0;
+				max-width: 70%;
+			}
+
+			.titleEditActionButton {
+				--button-height: auto;
+				--button-padding: 4px;
+				flex-shrink: 0;
+			}
+
+			.titleSaveActionButton {
+				--button-border-color: var(--text-forest-700);
+				--button-outlined-foreground: var(--text-forest-700);
+			}
+
+			.publicDashboardIcon {
+				margin-right: 4px;
+			}
+		}
+
+		.rightSection {
+			display: flex;
+			width: 55%;
+			justify-content: flex-end;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 14px;
+			height: 40px;
+
+			.icons {
+				display: flex;
+				align-items: center;
+				width: 32px;
+				height: 34px;
+				padding: 6px;
+				justify-content: center;
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 10px; /* 83.333% */
+				letter-spacing: 0.12px;
+			}
+
+			.icons:hover {
+				background-color: unset;
+			}
+		}
+	}
+
+	.dashboardTags {
+		display: flex;
+		gap: 6px;
+		padding: 16px 16px 0px 16px;
+		flex-wrap: wrap;
+
+		.tag {
+			display: flex;
+			padding: 4px 8px;
+			justify-content: center;
+			align-items: center;
+			border-radius: 20px;
+			border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+			background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+			color: var(--bg-sienna-400);
+			text-align: center;
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+			margin-inline-end: 0px;
+		}
+	}
+
+	.dashboardDescriptionSection {
+		color: var(--l2-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 22px; /* 157.143% */
+		letter-spacing: -0.07px;
+		padding: 20px 16px 0px 16px;
+	}
+}
+
+.dashboardSettings {
+	width: 191px;
+	height: 302px;
+	flex-shrink: 0;
+
+	:global(.ant-popover-inner) {
+		padding: 0px;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		) !important;
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+	}
+
+	.menuContent {
+		display: flex;
+		flex-direction: column;
+
+		section {
+			display: flex;
+			flex-direction: column;
+			align-items: start;
+
+			button {
+				display: flex;
+				width: 100%;
+				height: unset;
+				padding: 8px;
+				align-items: center;
+				gap: 12px;
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: normal;
+				letter-spacing: 0.14px;
+				border-top: none;
+			}
+		}
+
+		.section1,
+		.section2 {
+			border-bottom: 1px solid var(--l1-border);
+		}
+
+		.deleteDashboard button {
+			color: var(--bg-cherry-400) !important;
+		}
+	}
+}
+
+.deleteModal :global(.ant-modal-confirm-body) {
+	align-items: center;
+}

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

@@ -0,0 +1,32 @@
+import { Badge } from '@signozhq/ui/badge';
+import { isEmpty } from 'lodash-es';
+
+import styles from '../DashboardDescription.module.scss';
+
+interface DashboardMetaProps {
+	tags: string[];
+	description: string;
+}
+
+function DashboardMeta({ tags, description }: DashboardMetaProps): JSX.Element {
+	return (
+		<>
+			{tags.length > 0 && (
+				<div className={styles.dashboardTags}>
+					{tags.map((tag) => (
+						<Badge key={tag} className={styles.tag}>
+							{tag}
+						</Badge>
+					))}
+				</div>
+			)}
+			{!isEmpty(description) && (
+				<section className={styles.dashboardDescriptionSection}>
+					{description}
+				</section>
+			)}
+		</>
+	);
+}
+
+export default DashboardMeta;

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

@@ -0,0 +1,116 @@
+import { KeyboardEvent } from 'react';
+import { Check, Globe, LockKeyhole, X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+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 {
+	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({
+	title,
+	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();
+		}
+	};
+
+	return (
+		<div className={styles.leftSection}>
+			<img src={image} alt="dashboard-img" className={styles.dashboardImg} />
+			{isEditing ? (
+				<div className={styles.titleEdit}>
+					<Input
+						autoFocus
+						value={draft}
+						testId="dashboard-title-input"
+						maxLength={120}
+						className={styles.titleInput}
+						onChange={(e): void => onDraftChange(e.target.value)}
+						onKeyDown={onKeyDown}
+					/>
+					<Button
+						type="button"
+						variant="outlined"
+						size="icon"
+						className={cx(styles.titleEditActionButton, styles.titleSaveActionButton)}
+						aria-label="Save title"
+						testId="dashboard-title-save"
+						onClick={onCommit}
+					>
+						<Check size={14} />
+					</Button>
+					<Button
+						type="button"
+						variant="outlined"
+						color="destructive"
+						size="icon"
+						className={styles.titleEditActionButton}
+						aria-label="Cancel title edit"
+						testId="dashboard-title-cancel"
+						onClick={onCancel}
+					>
+						<X size={14} />
+					</Button>
+				</div>
+			) : (
+				<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>
+			)}
+
+			{isPublicDashboard && (
+				<TooltipSimple title="This dashboard is publicly accessible">
+					<Globe size={14} className={styles.publicDashboardIcon} />
+				</TooltipSimple>
+			)}
+
+			{isDashboardLocked && (
+				<TooltipSimple title="This dashboard is locked">
+					<LockKeyhole size={14} />
+				</TooltipSimple>
+			)}
+		</div>
+	);
+}
+
+export default DashboardTitle;

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

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
+import { Card } from 'antd';
 import { toast } from '@signozhq/ui/sonner';
 import logEvent from 'api/common/logEvent';
 import {
@@ -12,32 +13,34 @@ import type {
 	DashboardtypesJSONPatchOperationDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
+import useComponentPermission from 'hooks/useComponentPermission';
 import { useAppContext } from 'providers/App/App';
 import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
+import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
 import DashboardActions from './DashboardActions/DashboardActions';
-import DashboardInfo from './DashboardInfo/DashboardInfo';
-import { useEditableTitle } from './DashboardInfo/useEditableTitle';
+import DashboardMeta from './DashboardMeta/DashboardMeta';
+import DashboardTitle from './DashboardTitle/DashboardTitle';
+import { useEditableTitle } from './DashboardTitle/useEditableTitle';
 
-import styles from './DashboardPageToolbar.module.scss';
-// import VariablesBar from '../VariablesBar/VariablesBar';
+import styles from './DashboardDescription.module.scss';
 
-interface DashboardPageToolbarProps {
+interface DashboardDescriptionProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	handle: FullScreenHandle;
 	refetch: () => void;
 }
 
-function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
+function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	const { dashboard, handle, refetch } = props;
 
 	const id = dashboard.id;
 	const isDashboardLocked = !!dashboard.locked;
 
-	const title = dashboard.spec.display.name;
-	const description = dashboard.spec.display.description ?? '';
+	const title = dashboard.spec?.display?.name ?? '';
+	const description = dashboard.spec?.display?.description ?? '';
 	const image = dashboard.image || Base64Icons[0];
 	const tags = useMemo(
 		() =>
@@ -48,6 +51,7 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 	);
 
 	const { user } = useAppContext();
+	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
 	const { showErrorModal } = useErrorModal();
 	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
 		(s) => s.setIsPanelTypeSelectionModalOpen,
@@ -55,6 +59,9 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
+	const addPanelPermission = !isDashboardLocked;
+	// V2 public dashboard wiring lives separately; treat as not-public for chrome.
+	const isPublicDashboard = false;
 
 	const handleLockDashboardToggle = useCallback(async (): Promise<void> => {
 		if (!id) {
@@ -103,7 +110,7 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 			onSave: onNameSave,
 		});
 
-	const onAddPanel = useCallback((): void => {
+	const onEmptyWidgetHandler = useCallback((): void => {
 		void logEvent('Dashboard Detail V2: Add new panel clicked', {
 			dashboardId: id,
 		});
@@ -111,15 +118,15 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 	}, [id, setIsPanelTypeSelectionModalOpen]);
 
 	return (
-		<section className={styles.dashboardPageToolbarContainer}>
-			<div className={styles.dashboardInfoWithActions}>
-				<DashboardInfo
+		<Card className={styles.dashboardDescriptionContainer}>
+			<DashboardHeader title={title} image={image} />
+			<section className={styles.dashboardDetails}>
+				<DashboardTitle
 					title={title}
 					image={image}
-					tags={tags}
-					description={description}
-					isPublicDashboard={false}
+					isPublicDashboard={isPublicDashboard}
 					isDashboardLocked={isDashboardLocked}
+					isEditable={editDashboard}
 					isEditing={isEditing}
 					draft={draft}
 					onDraftChange={setDraft}
@@ -128,21 +135,20 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 					onCancel={cancel}
 				/>
 				<DashboardActions
-					title={title}
 					dashboard={dashboard}
 					handle={handle}
 					isDashboardLocked={isDashboardLocked}
+					editDashboard={editDashboard}
 					isAuthor={isAuthor}
-					onAddPanel={onAddPanel}
+					addPanelPermission={addPanelPermission}
+					onAddPanel={onEmptyWidgetHandler}
 					onLockToggle={handleLockDashboardToggle}
 					onOpenRename={startEdit}
 				/>
-			</div>
-		</section>
+			</section>
+			<DashboardMeta tags={tags} description={description} />
+		</Card>
 	);
 }
 
-{
-	/* <VariablesBar dashboard={dashboard} /> */
-}
-export default DashboardPageToolbar;
+export default DashboardDescription;

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

@@ -1,11 +0,0 @@
-.dashboardActionsContainer {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: flex-end;
-	gap: 12px;
-}
-
-.dashboardActionsSecondary {
-	display: flex;
-	gap: 12px;
-}

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

@@ -1,61 +0,0 @@
-.dashboardInfo {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	width: 40%;
-
-	@media (min-width: 1280px) {
-		width: 30%;
-	}
-}
-
-.dashboardTitleContainer {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	width: 100%;
-}
-
-.dashboardImage {
-	flex-shrink: 0;
-}
-
-.dashboardTitle {
-	flex: 1;
-	min-width: 0;
-	max-width: fit-content;
-	color: var(--l1-foreground);
-	font-size: 18px;
-	font-weight: 500;
-
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.dashboardTitleHover {
-	cursor: text !important;
-}
-
-.dashboardTitleEditor {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	flex: 1;
-	min-width: 0;
-}
-
-.dashboardTitleInput {
-	flex: 1;
-	min-width: 0;
-}
-
-.dashboardTitleActionButton {
-	flex-shrink: 0;
-}
-
-.dashboardTags {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-}

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

@@ -1,141 +0,0 @@
-import { KeyboardEvent } from 'react';
-import { Check, Globe, LockKeyhole, X } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import { isEmpty } from 'lodash-es';
-
-import styles from './DashboardInfo.module.scss';
-import { useDashboardStore } from '../../store/useDashboardStore';
-
-interface DashboardInfoProps {
-	title: string;
-	image: string;
-	tags: string[];
-	description: string;
-	isPublicDashboard: boolean;
-	isDashboardLocked: boolean;
-	isEditing: boolean;
-	draft: string;
-	onDraftChange: (value: string) => void;
-	onStartEdit: () => void;
-	onCommit: () => void;
-	onCancel: () => void;
-}
-
-function DashboardInfo({
-	title,
-	image,
-	tags,
-	description,
-	isPublicDashboard,
-	isDashboardLocked,
-	isEditing,
-	draft,
-	onDraftChange,
-	onStartEdit,
-	onCommit,
-	onCancel,
-}: DashboardInfoProps): JSX.Element {
-	const canEdit = useDashboardStore((s) => s.isEditable);
-
-	const hasTags = tags.length > 0;
-	const hasDescription = !isEmpty(description);
-
-	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
-		if (event.key === 'Enter') {
-			event.preventDefault();
-			onCommit();
-		} else if (event.key === 'Escape') {
-			onCancel();
-		}
-	};
-
-	return (
-		<div className={styles.dashboardInfo}>
-			<div className={styles.dashboardTitleContainer}>
-				<img src={image} alt={title} className={styles.dashboardImage} />
-				{isEditing ? (
-					<div className={styles.dashboardTitleEditor}>
-						<Input
-							autoFocus
-							value={draft}
-							testId="dashboard-title-input"
-							maxLength={120}
-							className={styles.dashboardTitleInput}
-							onChange={(e): void => onDraftChange(e.target.value)}
-							onKeyDown={onKeyDown}
-						/>
-						<Button
-							type="button"
-							variant="outlined"
-							color="primary"
-							size="icon"
-							className={styles.dashboardTitleActionButton}
-							aria-label="Save title"
-							testId="dashboard-title-save"
-							onClick={onCommit}
-						>
-							<Check size={14} />
-						</Button>
-						<Button
-							type="button"
-							variant="outlined"
-							color="secondary"
-							size="icon"
-							className={styles.dashboardTitleActionButton}
-							aria-label="Cancel title edit"
-							testId="dashboard-title-cancel"
-							onClick={onCancel}
-						>
-							<X size={14} />
-						</Button>
-					</div>
-				) : (
-					<TooltipSimple title={title}>
-						<Typography.Text
-							className={cx(styles.dashboardTitle, {
-								[styles.dashboardTitleHover]: canEdit,
-							})}
-							data-testid="dashboard-title"
-							onClick={canEdit ? onStartEdit : undefined}
-						>
-							{title}
-						</Typography.Text>
-					</TooltipSimple>
-				)}
-
-				{isPublicDashboard && (
-					<TooltipSimple title="This dashboard is publicly accessible">
-						<Globe size={14} />
-					</TooltipSimple>
-				)}
-
-				{isDashboardLocked && (
-					<TooltipSimple title="This dashboard is locked">
-						<LockKeyhole size={14} />
-					</TooltipSimple>
-				)}
-			</div>
-
-			{hasTags && (
-				<div className={styles.dashboardTags}>
-					{tags.map((tag) => (
-						<Badge key={tag} color="warning" variant="outline">
-							{tag}
-						</Badge>
-					))}
-				</div>
-			)}
-
-			{hasDescription && (
-				<Typography.Text color="muted">{description}</Typography.Text>
-			)}
-		</div>
-	);
-}
-
-export default DashboardInfo;

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

@@ -1,20 +0,0 @@
-.dashboardPageToolbarContainer {
-	position: sticky;
-	top: 0;
-	z-index: 10;
-	color: var(--l2-foreground);
-	background-color: var(--l1-background);
-	padding: 16px;
-	box-shadow: 0 2px 2px 0px var(--l2-border);
-}
-
-.dashboardPageToolbarSubContainer {
-	width: 100%;
-}
-
-.dashboardInfoWithActions {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
-	width: 100%;
-}

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

@@ -1,8 +1,3 @@
-.tabsContent {
-	padding-left: 0 !important;
-	padding-right: 0 !important;
-}
-
 .placeholder {
 	padding: 24px;
 }
@@ -14,10 +9,3 @@
 	line-height: 1;
 	padding-top: 4px;
 }
-
-// shared "settings card" wrapper, used by the dashboard-info form and cross-panel sync
-.settingsCard {
-	padding: 24px 16px;
-	border-radius: 3px;
-	border: 1px solid var(--l2-border);
-}

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

@@ -1,5 +1,6 @@
+// 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 { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { Events } from 'constants/events';
@@ -12,9 +13,7 @@ import {
 import { getAbsoluteUrl } from 'utils/basePath';
 import cx from 'classnames';
 
-import SegmentedControl from '../SegmentedControl/SegmentedControl';
-import settingsStyles from '../../DashboardSettings.module.scss';
-import styles from './CrossPanelSync.module.scss';
+import styles from '../GeneralSettings.module.scss';
 
 interface CrossPanelSyncProps {
 	dashboardId: string;
@@ -27,15 +26,12 @@ function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
 		useSyncTooltipFilterMode(dashboardId);
 
 	return (
-		<div className={cx(settingsStyles.settingsCard, styles.crossPanelSyncGroup)}>
+		<Col className={cx(styles.overviewSettings, styles.crossPanelSyncGroup)}>
 			<div className={styles.crossPanelSyncSectionHeader}>
-				<Typography.Text className={styles.crossPanelsSyncSectionTitle}>
+				<Typography.Text className={styles.crossPanelSyncSectionTitle}>
 					Cross-Panel Sync
 				</Typography.Text>
-
-				<TooltipSimple
-					side="top"
-					withPortal={false}
+				<Tooltip
 					title={
 						<div className={styles.crossPanelSyncTooltipContent}>
 							<strong className={styles.crossPanelSyncTooltipTitle}>
@@ -44,7 +40,7 @@ function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
 							<span className={styles.crossPanelSyncTooltipDescription}>
 								Sync crosshair and tooltip across all the dashboard panels
 							</span>
-							<Typography.Link
+							<a
 								href="https://signoz.io/docs/dashboards/interactivity/#cross-panel-sync"
 								target="_blank"
 								rel="noopener noreferrer"
@@ -52,14 +48,15 @@ function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
 							>
 								Learn more
 								<ExternalLink size={12} />
-							</Typography.Link>
+							</a>
 						</div>
 					}
+					placement="top"
+					mouseEnterDelay={0.5}
 				>
 					<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
-				</TooltipSimple>
+				</Tooltip>
 			</div>
-
 			<div className={styles.crossPanelSyncRow}>
 				<div className={styles.crossPanelSyncInfo}>
 					<Typography.Text className={styles.crossPanelSyncTitle}>
@@ -69,18 +66,19 @@ function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
 						Sync crosshair and tooltip across all the dashboard panels
 					</Typography.Text>
 				</div>
-				<SegmentedControl
-					testId="cursor-sync-mode"
+				<Radio.Group
 					value={cursorSyncMode}
-					onChange={setCursorSyncMode}
-					options={[
-						{ label: 'No Sync', value: DashboardCursorSync.None },
-						{ label: 'Crosshair', value: DashboardCursorSync.Crosshair },
-						{ label: 'Tooltip', value: DashboardCursorSync.Tooltip },
-					]}
-				/>
+					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}>
@@ -92,25 +90,24 @@ function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
 							matching ones highlighted
 						</Typography.Text>
 					</div>
-
-					<SegmentedControl
-						testId="sync-tooltip-filter-mode"
+					<Radio.Group
 						value={syncTooltipFilterMode}
-						onChange={(value): void => {
+						onChange={(e): void => {
 							void logEvent(Events.TOOLTIP_SYNC_MODE_CHANGED, {
 								path: getAbsoluteUrl(window.location.pathname),
-								mode: value,
+								mode: e.target.value,
 							});
-							setSyncTooltipFilterMode(value);
+							setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
 						}}
-						options={[
-							{ label: 'All', value: SyncTooltipFilterMode.All },
-							{ label: 'Filtered', value: SyncTooltipFilterMode.Filtered },
-						]}
-					/>
+					>
+						<Radio.Button value={SyncTooltipFilterMode.All}>All</Radio.Button>
+						<Radio.Button value={SyncTooltipFilterMode.Filtered}>
+							Filtered
+						</Radio.Button>
+					</Radio.Group>
 				</div>
 			)}
-		</div>
+		</Col>
 	);
 }
 

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

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,238 @@
+.overviewContent {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+	padding: 20px 16px;
+}
+
+.overviewSettings {
+	padding: 16px;
+	border-radius: 3px;
+	border: 1px solid var(--l1-border);
+}
+
+.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

@@ -3,7 +3,7 @@ import { Button } from '@signozhq/ui/button';
 import { Check, X } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
 
-import styles from './UnsavedChangesFooter.module.scss';
+import styles from '../GeneralSettings.module.scss';
 
 interface UnsavedChangesFooterProps {
 	count: number;
@@ -29,13 +29,13 @@ function UnsavedChangesFooter({
 					{count > 1 && 's'}
 				</Typography.Text>
 			</div>
-			<div className={styles.footerActionButtons}>
+			<div className={styles.footerActionBtns}>
 				<Button
 					variant="ghost"
-					color="secondary"
 					disabled={isSaving}
 					prefix={<X size={14} />}
 					onClick={onDiscard}
+					className={styles.discardBtn}
 				>
 					Discard
 				</Button>
@@ -47,6 +47,7 @@ function UnsavedChangesFooter({
 					prefix={<Check size={14} />}
 					testId="save-dashboard-config"
 					onClick={onSave}
+					className={styles.saveBtn}
 				>
 					{t('save')}
 				</Button>

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

@@ -11,22 +11,22 @@ import APIError from 'types/api/error';
 
 import { useDashboardStore } from '../../store/useDashboardStore';
 import CrossPanelSync from './CrossPanelSync/CrossPanelSync';
-import DashboardInfoForm from './DashboardInfoForm/DashboardInfoForm';
+import GeneralForm from './GeneralForm/GeneralForm';
 import UnsavedChangesFooter from './UnsavedChangesFooter/UnsavedChangesFooter';
 import { Base64Icons, stringsToTags, tagsToStrings } from './utils';
-import styles from './Overview.module.scss';
+import styles from './GeneralSettings.module.scss';
 
-interface OverviewProps {
+interface GeneralSettingsProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 }
 
-function Overview({ dashboard }: OverviewProps): JSX.Element {
+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 title = dashboard.spec?.display?.name ?? '';
+	const description = dashboard.spec?.display?.description ?? '';
 	const image = dashboard.image || Base64Icons[0];
 	const tagsAsStrings = useMemo(
 		() => tagsToStrings(dashboard.tags ?? []),
@@ -64,7 +64,7 @@ function Overview({ dashboard }: OverviewProps): JSX.Element {
 			value,
 		});
 
-		if (updatedTitle !== title && updatedTitle !== '') {
+		if (updatedTitle !== title) {
 			ops.push(replace('/spec/display/name', updatedTitle));
 		}
 		if (updatedDescription !== description) {
@@ -89,6 +89,9 @@ function Overview({ dashboard }: OverviewProps): JSX.Element {
 	]);
 
 	const onSaveHandler = useCallback(async (): Promise<void> => {
+		if (!id) {
+			return;
+		}
 		const ops = buildPatch();
 		if (ops.length === 0) {
 			return;
@@ -107,7 +110,7 @@ function Overview({ dashboard }: OverviewProps): JSX.Element {
 	}, [id, buildPatch, refetch, showErrorModal]);
 
 	useEffect(() => {
-		let numberOfUnsavedChanges = 0;
+		let n = 0;
 		const initialValues = [title, description, tagsAsStrings, image];
 		const updatedValues = [
 			updatedTitle,
@@ -117,10 +120,10 @@ function Overview({ dashboard }: OverviewProps): JSX.Element {
 		];
 		initialValues.forEach((val, index) => {
 			if (!isEqual(val, updatedValues[index])) {
-				numberOfUnsavedChanges += 1;
+				n += 1;
 			}
 		});
-		setNumberOfUnsavedChanges(numberOfUnsavedChanges);
+		setNumberOfUnsavedChanges(n);
 	}, [
 		description,
 		image,
@@ -141,7 +144,7 @@ function Overview({ dashboard }: OverviewProps): JSX.Element {
 
 	return (
 		<div className={styles.overviewContent}>
-			<DashboardInfoForm
+			<GeneralForm
 				title={updatedTitle}
 				description={updatedDescription}
 				image={updatedImage}
@@ -164,4 +167,4 @@ function Overview({ dashboard }: OverviewProps): JSX.Element {
 	);
 }
 
-export default Overview;
+export default GeneralSettings;

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

@@ -1,86 +0,0 @@
-.crossPanelSyncGroup {
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-}
-
-.crossPanelSyncSectionHeader {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-}
-
-.crossPanelsSyncSectionTitle {
-	color: var(--l1-foreground);
-	font-size: 14px;
-	font-weight: 500;
-}
-
-.crossPanelSyncInfoIcon {
-	cursor: help;
-}
-
-.crossPanelSyncTooltipContent {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: 8px;
-	max-width: 200px;
-}
-
-.crossPanelSyncTooltipTitle {
-	font-size: 14px;
-}
-
-.crossPanelSyncTooltipDescription {
-	font-size: 12px;
-}
-
-.crossPanelSyncTooltipDocLink {
-	color: var(--primary-background);
-	font-size: 12px;
-	margin-top: 16px;
-	vertical-align: middle;
-
-	// typography override
-	--typography-text-display: inline-flex;
-	align-items: center;
-	gap: 5px;
-}
-
-.crossPanelSyncRow {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	align-items: center;
-	gap: 16px;
-
-	& + & {
-		padding-top: 16px;
-		border-top: 1px dashed var(--l2-border);
-	}
-}
-
-.crossPanelSyncInfo {
-	display: flex;
-	flex: 1 1 80px;
-	min-width: 0;
-	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;
-}

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

@@ -1,80 +0,0 @@
-.formSpace {
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-}
-
-.infoItemContainer {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.infoTitle {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-}
-
-.nameIconInput {
-	display: flex;
-	gap: 4px;
-
-	[data-radix-popper-content-wrapper] {
-		z-index: 1100 !important;
-	}
-}
-
-.dashboardImageInput {
-	display: flex;
-	width: 32px;
-	min-width: 32px;
-	height: 32px;
-	padding: 6px;
-	justify-content: center;
-	align-items: center;
-	border-radius: 2px 0px 0px 2px;
-	background: var(--l3-background);
-
-	// icon-only trigger: drop the dropdown chevron, keep just the selected icon
-	svg {
-		display: none;
-	}
-}
-
-.dashboardImageOptions {
-	min-width: min-content;
-}
-
-.dashboardImageSelectItem {
-	width: min-content;
-
-	span {
-		vertical-align: middle;
-	}
-}
-
-.listItemImage {
-	height: 16px;
-	width: 16px;
-}
-
-.dashboardNameInput {
-	border-radius: 0px 2px 2px 0px;
-	border: 1px solid var(--l2-border);
-}
-
-.descriptionTextArea {
-	border-radius: 2px;
-	border: 1px solid var(--l2-border);
-}
-
-// the V1 tags input ships borderless; give the field a visible box to match
-.tagsField {
-	display: flex;
-	align-items: center;
-	padding: 6px 8px;
-	border-radius: 2px;
-	border: 1px solid var(--l2-border);
-	// background: var(--l3-background);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/DashboardInfoForm/DashboardInfoForm.tsx

@@ -1,101 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { Input } from '@signozhq/ui/input';
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-} from '@signozhq/ui/select';
-import { Typography } from '@signozhq/ui/typography';
-// eslint-disable-next-line signoz/no-antd-components -- multiline TextArea has no @signozhq/ui equivalent yet
-import { Input as AntdInput } from 'antd';
-import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
-
-import { Base64Icons } from '../utils';
-import settingsStyles from '../../DashboardSettings.module.scss';
-import styles from './DashboardInfoForm.module.scss';
-
-interface DashboardInfoFormProps {
-	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 DashboardInfoForm({
-	title,
-	description,
-	image,
-	tags,
-	onTitleChange,
-	onDescriptionChange,
-	onImageChange,
-	onTagsChange,
-}: DashboardInfoFormProps): JSX.Element {
-	return (
-		<div className={settingsStyles.settingsCard}>
-			<div className={styles.formSpace}>
-				<div className={styles.infoItemContainer}>
-					<Typography className={styles.infoTitle}>Dashboard Name</Typography>
-					<section className={styles.nameIconInput}>
-						<Select
-							value={image}
-							onChange={(value): void => onImageChange(value as string)}
-						>
-							<SelectTrigger className={styles.dashboardImageInput} />
-							<SelectContent
-								className={styles.dashboardImageOptions}
-								withPortal={false}
-							>
-								{Base64Icons.map((icon) => (
-									<SelectItem
-										key={icon}
-										value={icon}
-										className={styles.dashboardImageSelectItem}
-									>
-										<img
-											src={icon}
-											alt="dashboard-icon"
-											className={styles.listItemImage}
-										/>
-									</SelectItem>
-								))}
-							</SelectContent>
-						</Select>
-
-						<Input
-							testId="dashboard-name"
-							className={styles.dashboardNameInput}
-							value={title}
-							onChange={(e): void => onTitleChange(e.target.value)}
-						/>
-					</section>
-				</div>
-
-				<div className={styles.infoItemContainer}>
-					<Typography className={styles.infoTitle}>Description</Typography>
-					<AntdInput.TextArea
-						data-testid="dashboard-desc"
-						rows={6}
-						value={description}
-						className={styles.descriptionTextArea}
-						onChange={(e): void => onDescriptionChange(e.target.value)}
-					/>
-				</div>
-
-				<div className={styles.infoItemContainer}>
-					<Typography className={styles.infoTitle}>Tags</Typography>
-					<div className={styles.tagsField}>
-						<AddTags tags={tags} setTags={onTagsChange} />
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default DashboardInfoForm;

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

@@ -1,5 +0,0 @@
-.overviewContent {
-	display: flex;
-	flex-direction: column;
-	gap: 24px;
-}

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

@@ -1,61 +0,0 @@
-.segmented {
-	// override RadioGroup's default vertical grid; lay segments out connected
-	display: inline-flex;
-	grid-auto-flow: column;
-	gap: 0;
-	flex-shrink: 0;
-	border: 1px solid var(--l2-border);
-	border-radius: 2px;
-}
-
-.segment {
-	position: relative;
-	display: flex;
-	align-items: center;
-
-	&:not(:last-child) {
-		border-right: 1px solid var(--l2-border);
-	}
-
-	// the visible segment is the radio's label (htmlFor-wired, so clicks register)
-	label {
-		display: flex;
-		align-items: center;
-		min-height: 24px;
-		padding: 6px 14px;
-		font-family: Inter;
-		font-size: 13px;
-		line-height: 20px;
-		color: var(--l2-foreground);
-		white-space: nowrap;
-		cursor: pointer;
-		user-select: none;
-	}
-}
-
-// collapse the radio circle into a transparent full-cell click target
-.segmentInput {
-	position: absolute;
-	inset: 0;
-	width: 100%;
-	height: 100%;
-	margin: 0;
-	padding: 0;
-	border: none;
-	background: transparent;
-	cursor: pointer;
-
-	// hide the default radio dot/indicator
-	* {
-		display: none;
-	}
-}
-
-// highlight the selected segment as a raised, lighter pill (data-state is a
-// stable Radix attribute). --l3-background is the lightest layer, so lift it
-// further with a subtle foreground tint rather than going darker.
-.segmentInput[data-state='checked'] + label {
-	background: var(--l3-background);
-	color: var(--l1-foreground);
-	font-weight: 500;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/SegmentedControl/SegmentedControl.tsx

@@ -1,51 +0,0 @@
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
-
-import styles from './SegmentedControl.module.scss';
-
-export interface SegmentedControlOption<T extends string> {
-	label: string;
-	value: T;
-}
-
-interface SegmentedControlProps<T extends string> {
-	value: T;
-	options: SegmentedControlOption<T>[];
-	onChange: (value: T) => void;
-	testId?: string;
-}
-
-/**
- * Connected pill segmented control composed on top of @signozhq/ui RadioGroup:
- * the radio circle is collapsed into a transparent full-cell click target and
- * the label becomes the visible segment (highlighted via the radio's stable
- * `data-state="checked"`). Keeps radio semantics + keyboard nav.
- */
-function SegmentedControl<T extends string>({
-	value,
-	options,
-	onChange,
-	testId,
-}: SegmentedControlProps<T>): JSX.Element {
-	return (
-		<RadioGroup
-			className={styles.segmented}
-			value={value}
-			onChange={(next): void => onChange(next as T)}
-			testId={testId}
-		>
-			{options.map((option) => (
-				<RadioGroupItem
-					key={option.value}
-					value={option.value}
-					containerClassName={styles.segment}
-					className={styles.segmentInput}
-					testId={testId ? `${testId}-${option.value}` : undefined}
-				>
-					{option.label}
-				</RadioGroupItem>
-			))}
-		</RadioGroup>
-	);
-}
-
-export default SegmentedControl;

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

@@ -1,39 +0,0 @@
-.overviewSettingsFooter {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: -webkit-fill-available;
-	padding: 12px 16px 12px 16px;
-	position: fixed;
-	bottom: 0;
-	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-weight: 400;
-	line-height: 24px;
-	letter-spacing: -0.07px;
-}
-
-.footerActionButtons {
-	display: flex;
-	gap: 8px;
-}

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

@@ -31,7 +31,6 @@ export function dtoToFormModel(
 		...base,
 		name: dto.spec?.name ?? display?.name ?? '',
 		description: display?.description ?? '',
-		hidden: display?.hidden ?? false,
 	};
 
 	// Text variable — a distinct envelope (no list plugin).

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

@@ -1,90 +1,45 @@
 import { useMemo } from 'react';
 
 import { Braces, Globe, Table } from '@signozhq/icons';
-import {
-	TabItemProps,
-	TabsContent,
-	TabsList,
-	TabsRoot,
-	TabsTrigger,
-} from '@signozhq/ui/tabs';
+import { TabItemProps, Tabs } from '@signozhq/ui/tabs';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 
-import Overview from './Overview';
-import PublicDashboardSettings from './PublicDashboard';
+import GeneralSettings from './General';
+import { SettingsTabPlaceholder } from './utils';
 import VariablesSettings from './Variables';
-import { useAppContext } from 'providers/App/App';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { USER_ROLES } from 'types/roles';
-
-import styles from './DashboardSettings.module.scss';
 
 interface DashboardSettingsProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 }
 
-enum TabKeys {
-	OVERVIEW = 'Overview',
-	VARIABLES = 'Variables',
-	PUBLISH = 'Publish',
-}
-
-const prefixIcons: Record<TabKeys, JSX.Element> = {
-	[TabKeys.OVERVIEW]: <Table size={14} />,
-	[TabKeys.VARIABLES]: <Braces size={14} />,
-	[TabKeys.PUBLISH]: <Globe size={14} />,
-};
-
 function DashboardSettings({ dashboard }: DashboardSettingsProps): JSX.Element {
-	const { user } = useAppContext();
-	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
-
-	const enablePublicDashboard = isCloudUser || isEnterpriseSelfHostedUser;
-
 	const items: TabItemProps[] = useMemo(
 		() => [
 			{
-				key: TabKeys.OVERVIEW,
-				label: TabKeys.OVERVIEW,
-				children: <Overview dashboard={dashboard} />,
+				key: 'general',
+				label: 'General',
+				children: <GeneralSettings dashboard={dashboard} />,
+				prefixIcon: <Table size={14} />,
 			},
 			{
-				key: TabKeys.VARIABLES,
-				label: TabKeys.VARIABLES,
+				key: 'variables',
+				label: 'Variables',
 				children: <VariablesSettings dashboard={dashboard} />,
+				prefixIcon: <Braces size={14} />,
+			},
+			{
+				key: 'public-dashboard',
+				label: 'Publish',
+				children: (
+					<SettingsTabPlaceholder message="V2 public dashboard publishing coming next." />
+				),
+				prefixIcon: <Globe size={14} />,
 			},
-			...(enablePublicDashboard
-				? [
-						{
-							key: TabKeys.PUBLISH,
-							label: TabKeys.PUBLISH,
-							children: <PublicDashboardSettings dashboard={dashboard} />,
-							disabled: user?.role !== USER_ROLES.ADMIN,
-						},
-					]
-				: []),
 		],
-		[enablePublicDashboard, dashboard, user?.role],
+		[dashboard],
 	);
 
-	return (
-		<TabsRoot defaultValue={TabKeys.OVERVIEW}>
-			<TabsList variant="primary">
-				{Object.values(TabKeys).map((key) => (
-					<TabsTrigger value={key} key={key}>
-						{prefixIcons[key]}
-						{key}
-					</TabsTrigger>
-				))}
-			</TabsList>
-
-			{items.map((item) => (
-				<TabsContent value={item.key} key={item.key} className={styles.tabsContent}>
-					{item.children}
-				</TabsContent>
-			))}
-		</TabsRoot>
-	);
+	return <Tabs defaultValue="general" items={items} />;
 }
 
 export default DashboardSettings;

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

@@ -1,98 +0,0 @@
-import { useMemo } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
-import sortValues from 'lib/dashboardVariables/sortVariableValues';
-
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-import type { VariableSelection, VariableSelectionMap } from './selectionTypes';
-import DynamicSelector from './selectors/DynamicSelector';
-import QuerySelector from './selectors/QuerySelector';
-import TextSelector from './selectors/TextSelector';
-import ValueSelector from './selectors/ValueSelector';
-import styles from './VariablesBar.module.scss';
-
-interface VariableSelectorProps {
-	variable: VariableFormModel;
-	/** All variables (Dynamic uses them to scope options by sibling selections). */
-	variables: VariableFormModel[];
-	/** Names this variable depends on (for Query gating). */
-	parents: string[];
-	/** All current selections (Query passes them as the request payload). */
-	selections: VariableSelectionMap;
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-}
-
-/** One labelled variable control; dispatches on the variable type. */
-function VariableSelector({
-	variable,
-	variables,
-	parents,
-	selections,
-	selection,
-	onChange,
-}: VariableSelectorProps): JSX.Element {
-	const customOptions = useMemo(
-		() =>
-			variable.type === 'CUSTOM'
-				? sortValues(commaValuesParser(variable.customValue), variable.sort).map(
-						String,
-					)
-				: [],
-		[variable],
-	);
-
-	const renderControl = (): JSX.Element => {
-		switch (variable.type) {
-			case 'TEXT':
-				return (
-					<TextSelector
-						selection={selection}
-						onChange={onChange}
-						testId={`variable-input-${variable.name}`}
-					/>
-				);
-			case 'QUERY':
-				return (
-					<QuerySelector
-						variable={variable}
-						parents={parents}
-						selections={selections}
-						selection={selection}
-						onChange={onChange}
-					/>
-				);
-			case 'DYNAMIC':
-				return (
-					<DynamicSelector
-						variable={variable}
-						variables={variables}
-						selections={selections}
-						selection={selection}
-						onChange={onChange}
-					/>
-				);
-			case 'CUSTOM':
-			default:
-				return (
-					<ValueSelector
-						options={customOptions}
-						multiSelect={variable.multiSelect}
-						showAllOption={variable.showAllOption}
-						selection={selection}
-						onChange={onChange}
-						testId={`variable-select-${variable.name}`}
-					/>
-				);
-		}
-	};
-
-	return (
-		<div className={styles.variable} data-testid={`variable-${variable.name}`}>
-			<Typography.Text className={styles.label}>${variable.name}</Typography.Text>
-			{renderControl()}
-		</div>
-	);
-}
-
-export default VariableSelector;

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

@@ -1,29 +0,0 @@
-.bar {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: flex-end;
-	gap: 12px 16px;
-	padding: 12px 16px;
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.variable {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	min-width: 0;
-}
-
-.label {
-	font-size: 12px;
-	font-weight: 500;
-	color: var(--l2-foreground);
-}
-
-.select {
-	min-width: 160px;
-}
-
-.input {
-	min-width: 160px;
-}

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

@@ -1,45 +0,0 @@
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import { useVariableSelection } from './useVariableSelection';
-import VariableSelector from './VariableSelector';
-import styles from './VariablesBar.module.scss';
-
-interface VariablesBarProps {
-	dashboard: DashboardtypesGettableDashboardV2DTO;
-}
-
-/**
- * Runtime variable selector bar shown above the panels. Renders one control per
- * dashboard variable; selections live in the store + URL (never the spec).
- */
-function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
-	const { variables, dependencyData, selection, setSelection } =
-		useVariableSelection(dashboard);
-
-	if (variables.length === 0) {
-		return null;
-	}
-
-	return (
-		<div className={styles.bar} data-testid="dashboard-variables-bar">
-			{variables.map((variable) => (
-				<VariableSelector
-					key={variable.name}
-					variable={variable}
-					variables={variables}
-					parents={dependencyData.parentGraph[variable.name] ?? []}
-					selections={selection}
-					selection={
-						selection[variable.name] ?? {
-							value: variable.multiSelect ? [] : '',
-							allSelected: false,
-						}
-					}
-					onChange={(next): void => setSelection(variable.name, next)}
-				/>
-			))}
-		</div>
-	);
-}
-
-export default VariablesBar;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/dynamicFilter.ts

@@ -1,56 +0,0 @@
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-import type { VariableSelectionMap } from './selectionTypes';
-
-function formatQueryValue(val: string): string {
-	const num = Number(val);
-	if (!Number.isNaN(num) && Number.isFinite(num)) {
-		return val;
-	}
-	return `'${val.replace(/'/g, "\\'")}'`;
-}
-
-function buildQueryPart(attribute: string, values: string[]): string {
-	const formatted = values.map(formatQueryValue);
-	if (formatted.length === 1) {
-		return `${attribute} = ${formatted[0]}`;
-	}
-	return `${attribute} IN [${formatted.join(', ')}]`;
-}
-
-/**
- * Builds a filter expression from the OTHER dynamic variables' current
- * selections (e.g. `k8s.namespace.name IN ['prod'] AND service = 'api'`), so a
- * dynamic variable's option list is scoped by its sibling selections. Variables
- * in the ALL state, with no selection, or non-dynamic are skipped. Ported from
- * the V1 dynamic-variable runtime.
- */
-export function buildExistingDynamicVariableQuery(
-	variables: VariableFormModel[],
-	selections: VariableSelectionMap,
-	currentName: string,
-): string {
-	const parts: string[] = [];
-	variables.forEach((variable) => {
-		if (
-			variable.name === currentName ||
-			variable.type !== 'DYNAMIC' ||
-			!variable.dynamicAttribute
-		) {
-			return;
-		}
-		const selection = selections[variable.name];
-		if (!selection || selection.allSelected) {
-			return;
-		}
-		const raw = Array.isArray(selection.value)
-			? selection.value
-			: [selection.value];
-		const valid = raw
-			.filter((v) => v !== null && v !== undefined && v !== '')
-			.map((v) => String(v));
-		if (valid.length > 0) {
-			parts.push(buildQueryPart(variable.dynamicAttribute, valid));
-		}
-	});
-	return parts.join(' AND ');
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectionTypes.ts

@@ -1,16 +0,0 @@
-/** A user-selected variable value at runtime (not persisted to the spec). */
-export type SelectedVariableValue =
-	| string
-	| number
-	| boolean
-	| (string | number | boolean)[]
-	| null;
-
-export interface VariableSelection {
-	value: SelectedVariableValue;
-	/** True when every option is selected ("ALL"); for dynamic vars value may be null. */
-	allSelected: boolean;
-}
-
-/** Selected values for a dashboard's variables, keyed by variable name. */
-export type VariableSelectionMap = Record<string, VariableSelection>;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectionUtils.ts

@@ -1,31 +0,0 @@
-import type {
-	SelectedVariableValue,
-	VariableSelection,
-	VariableSelectionMap,
-} from './selectionTypes';
-
-/** A selection counts as resolved (usable as a parent value) when it's non-empty. */
-export function isResolved(selection?: VariableSelection): boolean {
-	if (!selection) {
-		return false;
-	}
-	if (selection.allSelected) {
-		return true;
-	}
-	const { value } = selection;
-	if (Array.isArray(value)) {
-		return value.length > 0;
-	}
-	return value !== '' && value !== null && value !== undefined;
-}
-
-/** Flatten the selection map into the `{ name: value }` payload a query expects. */
-export function selectionToPayload(
-	selection: VariableSelectionMap,
-): Record<string, SelectedVariableValue> {
-	const payload: Record<string, SelectedVariableValue> = {};
-	Object.entries(selection).forEach(([name, sel]) => {
-		payload[name] = sel.value;
-	});
-	return payload;
-}

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

@@ -1,79 +0,0 @@
-import { useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
-import sortValues from 'lib/dashboardVariables/sortVariableValues';
-import type { AppState } from 'store/reducers';
-import type { GlobalReducer } from 'types/reducer/globalTime';
-
-import type { VariableFormModel } from '../../DashboardSettings/Variables/variableModel';
-import { buildExistingDynamicVariableQuery } from '../dynamicFilter';
-import type {
-	VariableSelection,
-	VariableSelectionMap,
-} from '../selectionTypes';
-import { useAutoSelect } from '../useAutoSelect';
-import ValueSelector from './ValueSelector';
-
-interface DynamicSelectorProps {
-	variable: VariableFormModel;
-	/** All variables + current selections, to scope options by sibling dynamics. */
-	variables: VariableFormModel[];
-	selections: VariableSelectionMap;
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-}
-
-/**
- * Dynamic-variable options sourced from live telemetry field values for the
- * chosen signal + attribute, scoped by the other dynamic variables' selections
- * (so e.g. `pod` narrows to the chosen `namespace`).
- */
-function DynamicSelector({
-	variable,
-	variables,
-	selections,
-	selection,
-	onChange,
-}: DynamicSelectorProps): JSX.Element {
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const existingQuery = useMemo(
-		() => buildExistingDynamicVariableQuery(variables, selections, variable.name),
-		[variables, selections, variable.name],
-	);
-
-	const { data, isFetching } = useGetFieldValues({
-		signal: variable.dynamicSignal,
-		name: variable.dynamicAttribute,
-		startUnixMilli: minTime,
-		endUnixMilli: maxTime,
-		existingQuery: existingQuery || undefined,
-		enabled: !!variable.dynamicAttribute,
-	});
-
-	const options = useMemo(() => {
-		const payload = data?.data;
-		const values =
-			payload?.normalizedValues ?? payload?.values?.StringValues ?? [];
-		return sortValues(values, variable.sort).map(String);
-	}, [data, variable.sort]);
-
-	useAutoSelect(variable, options, selection, onChange);
-
-	return (
-		<ValueSelector
-			options={options}
-			multiSelect={variable.multiSelect}
-			showAllOption={variable.showAllOption}
-			loading={isFetching}
-			selection={selection}
-			onChange={onChange}
-			testId={`variable-select-${variable.name}`}
-		/>
-	);
-}
-
-export default DynamicSelector;

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

@@ -1,89 +0,0 @@
-import { useMemo } from 'react';
-import { useQuery } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import sortValues from 'lib/dashboardVariables/sortVariableValues';
-import type { AppState } from 'store/reducers';
-import type { GlobalReducer } from 'types/reducer/globalTime';
-
-import type { VariableFormModel } from '../../DashboardSettings/Variables/variableModel';
-import type {
-	VariableSelection,
-	VariableSelectionMap,
-} from '../selectionTypes';
-import { isResolved, selectionToPayload } from '../selectionUtils';
-import { useAutoSelect } from '../useAutoSelect';
-import ValueSelector from './ValueSelector';
-
-interface QuerySelectorProps {
-	variable: VariableFormModel;
-	/** Names this variable's query references; it waits until they're resolved. */
-	parents: string[];
-	/** All current selections, fed to the query as `{ name: value }`. */
-	selections: VariableSelectionMap;
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-}
-
-/**
- * Query-driven options. Dependency orchestration is declarative: the query is
- * `enabled` only once every parent is resolved, and the parent values are in the
- * query key — so it refetches automatically when a parent changes (and a cyclic
- * dependency is simply never enabled).
- */
-function QuerySelector({
-	variable,
-	parents,
-	selections,
-	selection,
-	onChange,
-}: QuerySelectorProps): JSX.Element {
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-	const payload = useMemo(() => selectionToPayload(selections), [selections]);
-	const enabled = parents.every((parent) => isResolved(selections[parent]));
-
-	const { data, isFetching } = useQuery(
-		[
-			'dashboard-variable',
-			variable.name,
-			variable.queryValue,
-			payload,
-			minTime,
-			maxTime,
-		],
-		() =>
-			dashboardVariablesQuery({
-				query: variable.queryValue,
-				variables: payload,
-			}),
-		{ enabled, refetchOnWindowFocus: false },
-	);
-
-	const options = useMemo(() => {
-		if (!data || data.statusCode !== 200 || !data.payload) {
-			return [] as string[];
-		}
-		return sortValues(data.payload.variableValues ?? [], variable.sort).map(
-			String,
-		);
-	}, [data, variable.sort]);
-
-	useAutoSelect(variable, options, selection, onChange);
-
-	return (
-		<ValueSelector
-			options={options}
-			multiSelect={variable.multiSelect}
-			showAllOption={variable.showAllOption}
-			loading={isFetching}
-			selection={selection}
-			onChange={onChange}
-			testId={`variable-select-${variable.name}`}
-		/>
-	);
-}
-
-export default QuerySelector;

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

@@ -1,31 +0,0 @@
-import { Input } from '@signozhq/ui/input';
-
-import type { VariableSelection } from '../selectionTypes';
-import styles from '../VariablesBar.module.scss';
-
-interface TextSelectorProps {
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-	testId?: string;
-}
-
-/** Free-text variable input. */
-function TextSelector({
-	selection,
-	onChange,
-	testId,
-}: TextSelectorProps): JSX.Element {
-	return (
-		<Input
-			className={styles.input}
-			value={typeof selection.value === 'string' ? selection.value : ''}
-			placeholder="Enter a value"
-			onChange={(e): void =>
-				onChange({ value: e.target.value, allSelected: false })
-			}
-			testId={testId}
-		/>
-	);
-}
-
-export default TextSelector;

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

@@ -1,94 +0,0 @@
-import { useMemo } from 'react';
-import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
-import type { OptionData } from 'components/NewSelect/types';
-import { ALL_SELECT_VALUE } from 'container/DashboardContainer/utils';
-
-import type { VariableSelection } from '../selectionTypes';
-import styles from '../VariablesBar.module.scss';
-
-interface ValueSelectorProps {
-	options: string[];
-	multiSelect: boolean;
-	showAllOption: boolean;
-	loading?: boolean;
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-	testId?: string;
-}
-
-/**
- * Single/multi value picker for Custom/Query/Dynamic variables. Reuses the
- * shared NewSelect components, which provide search, the "ALL" option and
- * apply-on-close batching (so multi-select edits don't cascade per toggle).
- */
-function ValueSelector({
-	options,
-	multiSelect,
-	showAllOption,
-	loading,
-	selection,
-	onChange,
-	testId,
-}: ValueSelectorProps): JSX.Element {
-	const optionData = useMemo<OptionData[]>(
-		() => options.map((option) => ({ label: option, value: option })),
-		[options],
-	);
-
-	if (multiSelect) {
-		const value = selection.allSelected
-			? ALL_SELECT_VALUE
-			: (Array.isArray(selection.value) ? selection.value : []).map(String);
-		return (
-			<CustomMultiSelect
-				className={styles.select}
-				data-testid={testId}
-				options={optionData}
-				value={value}
-				loading={loading}
-				showSearch
-				placeholder="Select value"
-				enableAllSelection={showAllOption}
-				onChange={(next): void => {
-					const values = Array.isArray(next)
-						? next.map(String)
-						: next
-							? [String(next)]
-							: [];
-					if (values.length === 0) {
-						onChange({ value: [], allSelected: false });
-						return;
-					}
-					// CustomMultiSelect emits the full value set when ALL is picked.
-					const isAll =
-						showAllOption &&
-						options.length > 0 &&
-						options.every((option) => values.includes(option));
-					onChange({ value: values, allSelected: isAll });
-				}}
-				onClear={(): void => onChange({ value: [], allSelected: false })}
-			/>
-		);
-	}
-
-	return (
-		<CustomSelect
-			className={styles.select}
-			data-testid={testId}
-			options={optionData}
-			value={
-				selection.value == null || Array.isArray(selection.value)
-					? undefined
-					: String(selection.value)
-			}
-			loading={loading}
-			showSearch
-			placeholder="Select value"
-			onChange={(next): void =>
-				onChange({ value: next == null ? '' : String(next), allSelected: false })
-			}
-		/>
-	);
-}
-
-export default ValueSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/useAutoSelect.ts

@@ -1,41 +0,0 @@
-import { useEffect } from 'react';
-
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-import type { VariableSelection } from './selectionTypes';
-
-/**
- * When fetched options arrive and the current selection isn't one of them,
- * auto-pick the variable's default (if present in the options) or the first
- * option — so dependent children always have a usable parent value.
- */
-export function useAutoSelect(
-	variable: VariableFormModel,
-	options: string[],
-	selection: VariableSelection,
-	onChange: (selection: VariableSelection) => void,
-): void {
-	useEffect(() => {
-		if (options.length === 0 || selection.allSelected) {
-			return;
-		}
-		const current = selection.value;
-		const isValid = Array.isArray(current)
-			? current.length > 0 && current.every((c) => options.includes(String(c)))
-			: current !== '' &&
-				current !== null &&
-				current !== undefined &&
-				options.includes(String(current));
-		if (isValid) {
-			return;
-		}
-		const fallback = (variable.defaultValue as { value?: string } | undefined)
-			?.value;
-		const initial =
-			fallback && options.includes(fallback) ? fallback : options[0];
-		onChange({
-			value: variable.multiSelect ? [initial] : initial,
-			allSelected: false,
-		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [options]);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/useVariableSelection.ts

@@ -1,116 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { parseAsJson, useQueryState } from 'nuqs';
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import { dtoToFormModel } from '../DashboardSettings/Variables/variableAdapters';
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-import { selectVariableValues } from '../store/slices/variableSelectionSlice';
-import { useDashboardStore } from '../store/useDashboardStore';
-import type {
-	SelectedVariableValue,
-	VariableSelection,
-	VariableSelectionMap,
-} from './selectionTypes';
-import {
-	computeVariableDependencies,
-	type VariableDependencyData,
-} from './variableDependencies';
-
-/** URL sentinel for an "ALL values selected" state (matches V1). */
-export const ALL_SELECTED = '__ALL__';
-
-/** `?variables=` holds `{ [name]: value }` (ALL encoded as the sentinel). */
-const variablesUrlParser = parseAsJson<Record<string, SelectedVariableValue>>(
-	(v) =>
-		typeof v === 'object' && v !== null
-			? (v as Record<string, SelectedVariableValue>)
-			: null,
-);
-
-function defaultSelection(model: VariableFormModel): VariableSelection {
-	const def = (
-		model.defaultValue as { value?: SelectedVariableValue } | undefined
-	)?.value;
-	if (def !== undefined && def !== null && def !== '') {
-		return { value: def, allSelected: false };
-	}
-	return { value: model.multiSelect ? [] : '', allSelected: false };
-}
-
-function fromUrlValue(raw: SelectedVariableValue): VariableSelection {
-	return raw === ALL_SELECTED
-		? { value: null, allSelected: true }
-		: { value: raw, allSelected: false };
-}
-
-interface UseVariableSelection {
-	variables: VariableFormModel[];
-	dependencyData: VariableDependencyData;
-	selection: VariableSelectionMap;
-	setSelection: (name: string, selection: VariableSelection) => void;
-}
-
-/**
- * Runtime variable selection: derives the variable list from the spec, seeds
- * each value from URL → localStorage(store) → default, and persists changes to
- * both the store and the URL. Never writes to the dashboard spec.
- */
-export function useVariableSelection(
-	dashboard: DashboardtypesGettableDashboardV2DTO,
-): UseVariableSelection {
-	const dashboardId = dashboard.id ?? '';
-
-	const variables = useMemo(
-		() => (dashboard.spec?.variables ?? []).map(dtoToFormModel),
-		[dashboard.spec?.variables],
-	);
-	const dependencyData = useMemo(
-		() => computeVariableDependencies(variables),
-		[variables],
-	);
-
-	const selection = useDashboardStore(selectVariableValues(dashboardId));
-	const setVariableValue = useDashboardStore((s) => s.setVariableValue);
-	const setVariableValues = useDashboardStore((s) => s.setVariableValues);
-
-	const [urlValues, setUrlValues] = useQueryState(
-		'variables',
-		variablesUrlParser.withOptions({ history: 'replace' }),
-	);
-
-	// Seed selections for this dashboard: URL wins, then persisted store, then default.
-	useEffect(() => {
-		if (!dashboardId || variables.length === 0) {
-			return;
-		}
-		// `selection` here is the persisted (localStorage) map on mount — the
-		// effect deliberately doesn't depend on it, so seeding runs once per set.
-		const stored = selection;
-		const seeded: VariableSelectionMap = {};
-		variables.forEach((variable) => {
-			const urlValue = urlValues?.[variable.name];
-			if (urlValue !== undefined) {
-				seeded[variable.name] = fromUrlValue(urlValue);
-			} else if (stored[variable.name]) {
-				seeded[variable.name] = stored[variable.name];
-			} else {
-				seeded[variable.name] = defaultSelection(variable);
-			}
-		});
-		setVariableValues(dashboardId, seeded);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dashboardId, variables]);
-
-	const setSelection = useCallback(
-		(name: string, next: VariableSelection): void => {
-			setVariableValue(dashboardId, name, next);
-			void setUrlValues((prev) => ({
-				...(prev ?? {}),
-				[name]: next.allSelected ? ALL_SELECTED : next.value,
-			}));
-		},
-		[dashboardId, setVariableValue, setUrlValues],
-	);
-
-	return { variables, dependencyData, selection, setSelection };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/variableDependencies.ts

@@ -1,199 +0,0 @@
-import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
-
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-
-/**
- * Inter-variable dependency graph for runtime selection. A QUERY variable
- * "depends on" another variable when its query text references that variable
- * (`{{.name}}`, `{{name}}`, `$name`, `[[name]]`). When a variable's value
- * changes, its dependent QUERY variables must refetch. Ported from the V1
- * dashboard-variables runtime; operates on the V2 flat variable model.
- */
-
-export type VariableGraph = Record<string, string[]>;
-
-export interface VariableDependencyData {
-	/** Topological order of variables (parents before children). */
-	order: string[];
-	/** Direct children (dependents) of each variable. */
-	graph: VariableGraph;
-	/** Direct parents of each variable. */
-	parentGraph: VariableGraph;
-	/** All transitive descendants of each variable (precomputed). */
-	transitiveDescendants: VariableGraph;
-	hasCycle: boolean;
-	cycleNodes?: string[];
-}
-
-/** Names of QUERY variables whose query references `variableName`. */
-function getDependents(
-	variableName: string,
-	variables: VariableFormModel[],
-): string[] {
-	return variables
-		.filter(
-			(v) =>
-				v.type === 'QUERY' &&
-				!!v.name &&
-				textContainsVariableReference(v.queryValue || '', variableName),
-		)
-		.map((v) => v.name);
-}
-
-/** variable name → its direct dependents (children). */
-export function buildDependencies(
-	variables: VariableFormModel[],
-): VariableGraph {
-	const graph: VariableGraph = {};
-	variables.forEach((v) => {
-		if (v.name) {
-			graph[v.name] = getDependents(v.name, variables);
-		}
-	});
-	return graph;
-}
-
-/** Invert a child graph into a parent graph. */
-export function buildParentGraph(graph: VariableGraph): VariableGraph {
-	const parents: VariableGraph = {};
-	Object.keys(graph).forEach((node) => {
-		parents[node] = parents[node] ?? [];
-	});
-	Object.entries(graph).forEach(([node, children]) => {
-		children.forEach((child) => {
-			parents[child] = parents[child] ?? [];
-			parents[child].push(node);
-		});
-	});
-	return parents;
-}
-
-function collectCyclePath(
-	graph: VariableGraph,
-	start: string,
-	end: string,
-): string[] {
-	const path: string[] = [];
-	let current = start;
-	const findParent = (node: string): string | undefined =>
-		Object.keys(graph).find((key) => graph[key]?.includes(node));
-	while (current !== end) {
-		const parent = findParent(current);
-		if (!parent) {
-			break;
-		}
-		path.push(parent);
-		current = parent;
-	}
-	return [start, ...path];
-}
-
-function detectCycle(
-	graph: VariableGraph,
-	node: string,
-	visited: Set<string>,
-	recStack: Set<string>,
-): string[] | null {
-	if (!visited.has(node)) {
-		visited.add(node);
-		recStack.add(node);
-		let cycleNodes: string[] | null = null;
-		(graph[node] || []).some((neighbor) => {
-			if (!visited.has(neighbor)) {
-				const found = detectCycle(graph, neighbor, visited, recStack);
-				if (found) {
-					cycleNodes = found;
-					return true;
-				}
-			} else if (recStack.has(neighbor)) {
-				cycleNodes = collectCyclePath(graph, node, neighbor);
-				return true;
-			}
-			return false;
-		});
-		if (cycleNodes) {
-			return cycleNodes;
-		}
-	}
-	recStack.delete(node);
-	return null;
-}
-
-/** Build the full dependency data (topo order, parents, transitive descendants, cycle info). */
-export function buildDependencyData(
-	dependencies: VariableGraph,
-): VariableDependencyData {
-	const inDegree: Record<string, number> = {};
-	const adjList: VariableGraph = {};
-
-	Object.keys(dependencies).forEach((node) => {
-		inDegree[node] = inDegree[node] ?? 0;
-		adjList[node] = adjList[node] ?? [];
-		(dependencies[node] || []).forEach((child) => {
-			inDegree[child] = inDegree[child] ?? 0;
-			inDegree[child] += 1;
-			adjList[node].push(child);
-		});
-	});
-
-	const visited = new Set<string>();
-	const recStack = new Set<string>();
-	let cycleNodes: string[] | undefined;
-	Object.keys(dependencies).some((node) => {
-		if (!visited.has(node)) {
-			const found = detectCycle(dependencies, node, visited, recStack);
-			if (found) {
-				cycleNodes = found;
-				return true;
-			}
-		}
-		return false;
-	});
-
-	// Topological sort (Kahn's algorithm).
-	const queue = Object.keys(inDegree).filter((n) => inDegree[n] === 0);
-	const order: string[] = [];
-	while (queue.length > 0) {
-		const current = queue.shift();
-		if (current === undefined) {
-			break;
-		}
-		order.push(current);
-		(adjList[current] || []).forEach((neighbor) => {
-			inDegree[neighbor] -= 1;
-			if (inDegree[neighbor] === 0) {
-				queue.push(neighbor);
-			}
-		});
-	}
-
-	const hasCycle = order.length !== Object.keys(dependencies).length;
-
-	// Transitive descendants: walk topo order in reverse.
-	const transitiveDescendants: VariableGraph = {};
-	for (let i = order.length - 1; i >= 0; i--) {
-		const node = order[i];
-		const desc = new Set<string>();
-		(adjList[node] || []).forEach((child) => {
-			desc.add(child);
-			(transitiveDescendants[child] || []).forEach((d) => desc.add(d));
-		});
-		transitiveDescendants[node] = Array.from(desc);
-	}
-
-	return {
-		order,
-		graph: adjList,
-		parentGraph: buildParentGraph(adjList),
-		transitiveDescendants,
-		hasCycle,
-		cycleNodes,
-	};
-}
-
-/** Compute the full dependency data straight from the variable list. */
-export function computeVariableDependencies(
-	variables: VariableFormModel[],
-): VariableDependencyData {
-	return buildDependencyData(buildDependencies(variables));
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.module.scss

@@ -0,0 +1,57 @@
+.dashboardBreadcrumbs {
+	width: 100%;
+	height: 48px;
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	max-width: 80%;
+	padding-left: 8px;
+
+	.linkToPreviousPage {
+		// Collapse the design-system Button's fixed-height/padding box so it hugs
+		// the label like inline text (the breadcrumb is text, not a chunky button).
+		--button-height: auto;
+		--button-padding: 0;
+		--button-gap: 4px;
+		color: var(--l2-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		letter-spacing: -0.07px;
+	}
+
+	.currentPage {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 0px 2px;
+		border-radius: 2px;
+		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
+		color: var(--bg-robin-400);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		height: 20px;
+
+		max-width: calc(100% - 120px);
+
+		span {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.currentPage:hover {
+		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
+		color: var(--bg-robin-300);
+	}
+
+	.dashboardIconImage {
+		height: 14px;
+		width: 14px;
+	}
+}

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

@@ -0,0 +1,63 @@
+import { useCallback } from 'react';
+import { LayoutGrid } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import getSessionStorageApi from 'api/browser/sessionstorage/get';
+import ROUTES from 'constants/routes';
+import { DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY } from 'hooks/dashboard/useDashboardsListQueryParams';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+
+import styles from './DashboardBreadcrumbs.module.scss';
+
+interface DashboardBreadcrumbsProps {
+	title: string;
+	image: string;
+}
+
+function DashboardBreadcrumbs({
+	title,
+	image,
+}: DashboardBreadcrumbsProps): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+
+	const goToListPage = useCallback(() => {
+		const dashboardsListQueryParamsString = getSessionStorageApi(
+			DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY,
+		);
+
+		if (dashboardsListQueryParamsString) {
+			safeNavigate({
+				pathname: ROUTES.ALL_DASHBOARD,
+				search: `?${dashboardsListQueryParamsString}`,
+			});
+		} else {
+			safeNavigate(ROUTES.ALL_DASHBOARD);
+		}
+	}, [safeNavigate]);
+
+	return (
+		<div className={styles.dashboardBreadcrumbs}>
+			<Button
+				variant="ghost"
+				color="secondary"
+				prefix={<LayoutGrid size={14} />}
+				onClick={goToListPage}
+				className={styles.linkToPreviousPage}
+				testId="dashboard-breadcrumb-list"
+			>
+				Dashboard
+			</Button>
+			<div>/</div>
+			<div className={styles.currentPage}>
+				<img
+					src={image}
+					alt="dashboard-icon"
+					className={styles.dashboardIconImage}
+				/>
+				<Typography.Text>{title}</Typography.Text>
+			</div>
+		</div>
+	);
+}
+
+export default DashboardBreadcrumbs;

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardHeader.module.scss

@@ -0,0 +1,9 @@
+.dashboardHeader {
+	border-bottom: 1px solid var(--l1-border);
+	display: flex;
+	justify-content: space-between;
+	gap: 16px;
+	align-items: center;
+	padding: 0 8px;
+	box-sizing: border-box;
+}

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

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+
+import DashboardBreadcrumbs from './DashboardBreadcrumbs';
+
+import styles from './DashboardHeader.module.scss';
+
+interface DashboardHeaderProps {
+	title: string;
+	image: string;
+}
+
+function DashboardHeader({ title, image }: DashboardHeaderProps): JSX.Element {
+	return (
+		<div className={styles.dashboardHeader}>
+			<DashboardBreadcrumbs title={title} image={image} />
+			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
+		</div>
+	);
+}
+
+export default memo(DashboardHeader);

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardPageHeader/DashboardPageBreadcrumbs.tsx

@@ -1,53 +0,0 @@
-import { useMemo } from 'react';
-import { LayoutGrid } from '@signozhq/icons';
-import getSessionStorageApi from 'api/browser/sessionstorage/get';
-import ROUTES from 'constants/routes';
-import { DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY } from 'hooks/dashboard/useDashboardsListQueryParams';
-
-import {
-	Breadcrumb,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbList,
-	BreadcrumbSeparator,
-} from '@signozhq/ui/breadcrumb';
-
-interface DashboardPageBreadcrumbsProps {
-	title: string;
-	image: string;
-}
-
-function DashboardPageBreadcrumbs({
-	title,
-	image,
-}: DashboardPageBreadcrumbsProps): JSX.Element {
-	const dashboardPageLink = useMemo(() => {
-		const dashboardsListQueryParamsString = getSessionStorageApi(
-			DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY,
-		);
-
-		return dashboardsListQueryParamsString
-			? `${ROUTES.ALL_DASHBOARD}?${dashboardsListQueryParamsString}`
-			: ROUTES.ALL_DASHBOARD;
-	}, []);
-
-	return (
-		<Breadcrumb>
-			<BreadcrumbList>
-				<BreadcrumbItem>
-					<BreadcrumbLink icon={<LayoutGrid size={14} />} href={dashboardPageLink}>
-						Dashboard
-					</BreadcrumbLink>
-				</BreadcrumbItem>
-				<BreadcrumbSeparator>/</BreadcrumbSeparator>
-				<BreadcrumbItem>
-					<BreadcrumbLink icon={<img src={image} alt="dashboard-icon" />}>
-						{title}
-					</BreadcrumbLink>
-				</BreadcrumbItem>
-			</BreadcrumbList>
-		</Breadcrumb>
-	);
-}
-
-export default DashboardPageBreadcrumbs;

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardPageHeader/DashboardPageHeader.module.scss

@@ -1,9 +0,0 @@
-.dashboardPageHeader {
-	border-bottom: 1px solid var(--l2-border);
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding-left: 14px;
-	height: 48px;
-	width: 100%;
-}

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

@@ -1,25 +0,0 @@
-import { memo } from 'react';
-import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-
-import DashboardPageBreadcrumbs from './DashboardPageBreadcrumbs';
-
-import styles from './DashboardPageHeader.module.scss';
-
-interface DashboardPageHeaderProps {
-	title: string;
-	image: string;
-}
-
-function DashboardPageHeader({
-	title,
-	image,
-}: DashboardPageHeaderProps): JSX.Element {
-	return (
-		<div className={styles.dashboardPageHeader}>
-			<DashboardPageBreadcrumbs title={title} image={image} />
-			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
-		</div>
-	);
-}
-
-export default memo(DashboardPageHeader);

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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
@@ -6,12 +6,10 @@ import PanelTypeSelectionModal from 'container/DashboardContainer/PanelTypeSelec
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useAppContext } from 'providers/App/App';
 
-import DashboardPageToolbar from './DashboardPageToolbar';
+import DashboardDescription from './DashboardDescription';
 import PanelsAndSectionsLayout from './PanelsAndSectionsLayout';
 import { useDashboardStore } from './store/useDashboardStore';
 import styles from './DashboardContainer.module.scss';
-import DashboardPageHeader from './components/DashboardPageHeader/DashboardPageHeader';
-import { Base64Icons } from './DashboardSettings/Overview/utils';
 
 interface DashboardContainerProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
@@ -22,49 +20,32 @@ function DashboardContainer({
 	dashboard,
 	refetch,
 }: DashboardContainerProps): JSX.Element {
-	useEffect(() => {
-		document.title = dashboard.name;
-	}, [dashboard.name]);
-
 	const fullScreenHandle = useFullScreenHandle();
 
 	const { user } = useAppContext();
-	const [editDashboardPermission] = useComponentPermission(
-		['edit_dashboard'],
-		user.role,
-	);
+	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: !dashboard.locked && editDashboardPermission,
-			refetch,
-		});
-	}, [
-		dashboard.id,
-		dashboard.locked,
-		editDashboardPermission,
-		refetch,
-		setEditContext,
-	]);
+		setEditContext({ dashboardId: dashboard.id ?? '', isEditable, refetch });
+	}, [dashboard.id, isEditable, refetch, setEditContext]);
 
-	const spec = dashboard.spec;
-	const image = dashboard.image || Base64Icons[0];
-	const name = spec.display.name;
+	const { spec } = dashboard;
+	const layouts = useMemo(() => spec?.layouts ?? [], [spec?.layouts]);
+	const panels = useMemo(() => spec?.panels ?? {}, [spec?.panels]);
 
 	return (
 		<FullScreen handle={fullScreenHandle}>
 			<div className={styles.container}>
-				<DashboardPageHeader title={name} image={image} />
-				<DashboardPageToolbar
+				<DashboardDescription
 					dashboard={dashboard}
 					handle={fullScreenHandle}
 					refetch={refetch}
 				/>
-				<PanelsAndSectionsLayout layouts={spec.layouts} panels={spec.panels} />
+				<PanelsAndSectionsLayout layouts={layouts} panels={panels} />
 			</div>
 			{/* Shared panel-type picker (V1 component): opened from any "New Panel"
 			    trigger; navigates to the widget editor route on selection. */}

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

@@ -13,7 +13,7 @@ import type { GridItem } from './utils';
  * 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/Overview and DashboardDescription).
+ * patches in DashboardSettings/General and DashboardDescription).
  */
 
 const { add, replace, remove } = DashboardtypesPatchOpDTO;

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

@@ -1,55 +0,0 @@
-import type { StateCreator } from 'zustand';
-
-import type {
-	VariableSelection,
-	VariableSelectionMap,
-} from '../../VariablesBar/selectionTypes';
-import type { DashboardStore } from '../useDashboardStore';
-
-/**
- * Runtime variable selection — the values the user picks in the variable bar.
- * Keyed by dashboardId → variable name. Frontend-only and persisted to
- * localStorage (mirrored to the URL by the bar for shareable links); it is
- * deliberately NOT part of the dashboard spec, so selecting a value never
- * patches the dashboard.
- */
-export interface VariableSelectionSlice {
-	variableValues: Record<string, VariableSelectionMap>;
-	setVariableValue: (
-		dashboardId: string,
-		name: string,
-		selection: VariableSelection,
-	) => void;
-	/** Bulk set (used to seed from URL/localStorage/defaults on load). */
-	setVariableValues: (dashboardId: string, values: VariableSelectionMap) => void;
-}
-
-export const createVariableSelectionSlice: StateCreator<
-	DashboardStore,
-	[['zustand/persist', unknown]],
-	[],
-	VariableSelectionSlice
-> = (set, get) => ({
-	variableValues: {},
-	setVariableValue: (dashboardId, name, selection): void => {
-		const { variableValues } = get();
-		set({
-			variableValues: {
-				...variableValues,
-				[dashboardId]: { ...variableValues[dashboardId], [name]: selection },
-			},
-		});
-	},
-	setVariableValues: (dashboardId, values): void => {
-		const { variableValues } = get();
-		set({
-			variableValues: { ...variableValues, [dashboardId]: values },
-		});
-	},
-});
-
-/** Selector: the selection map for a dashboard (empty if none). */
-export const selectVariableValues =
-	(dashboardId: string) =>
-	(state: DashboardStore): VariableSelectionMap =>
-		state.variableValues[dashboardId] ?? {};

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

@@ -9,36 +9,25 @@ import {
 	createCollapseSlice,
 	type CollapseSlice,
 } from './slices/collapseSlice';
-import {
-	createVariableSelectionSlice,
-	type VariableSelectionSlice,
-} from './slices/variableSelectionSlice';
 
-export type DashboardStore = EditContextSlice &
-	CollapseSlice &
-	VariableSelectionSlice;
+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). Slices:
+ * 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).
- * - variable-selection: runtime variable values (frontend-only, persisted).
  */
 export const useDashboardStore = create<DashboardStore>()(
 	persist(
 		(...a) => ({
 			...createEditContextSlice(...a),
 			...createCollapseSlice(...a),
-			...createVariableSelectionSlice(...a),
 		}),
 		{
 			name: '@signoz/dashboard-v2',
-			// Persist UI-only state (context incl. the refetch fn is transient).
-			partialize: (state) => ({
-				collapsed: state.collapsed,
-				variableValues: state.variableValues,
-			}),
+			// Persist only the collapse map — context (incl. the refetch fn) is transient.
+			partialize: (state) => ({ collapsed: state.collapsed }),
 		},
 	),
 );

frontend/src/pages/DashboardPageV2/DashboardPageV2.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Typography } from '@signozhq/ui/typography';
@@ -15,6 +16,13 @@ function DashboardPageV2(): JSX.Element {
 	});
 
 	const dashboard = data?.data;
+	const name = dashboard?.spec?.display?.name;
+
+	useEffect(() => {
+		if (name) {
+			document.title = name;
+		}
+	}, [name]);
 
 	if (isLoading) {
 		return <Spinner tip="Loading dashboard..." />;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/TraceFlamegraph.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { Skeleton } from 'antd';
-import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
+import useGetTraceFlamegraphV3 from 'hooks/trace/useGetTraceFlamegraphV3';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
@@ -53,6 +53,9 @@ function TraceFlamegraph({
 	);
 
 	const previewFields = useTraceStore((s) => s.previewFields);
+	// Gate the fetch until prefs load, else selectFields (in the query key)
+	// repopulates and triggers a second fetch.
+	const userPrefsReady = useTraceStore((s) => s.userPreferences !== null);
 
 	// Color-by fields baseline + user-picked preview fields. De-duped by `name`,
 	// color-by entries first so their canonical metadata wins on collision.
@@ -70,17 +73,14 @@ function TraceFlamegraph({
 		data,
 		isFetching,
 		error: fetchError,
-	} = useGetTraceFlamegraph({
+	} = useGetTraceFlamegraphV3({
 		traceId,
 		selectedSpanId: selectedSpanIdForFetch,
-		limit: FLAMEGRAPH_SPAN_LIMIT,
 		selectFields: flamegraphSelectFields,
+		enabled: !!traceId && userPrefsReady,
 	});
 
-	const spans = useMemo(
-		() => data?.payload?.spans || [],
-		[data?.payload?.spans],
-	);
+	const spans = useMemo(() => data?.spans || [], [data?.spans]);
 
 	const {
 		layout,
@@ -99,8 +99,8 @@ function TraceFlamegraph({
 						setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
 						onSpanClick={handleSpanClick}
 						traceMetadata={{
-							startTime: data?.payload?.startTimestampMillis || 0,
-							endTime: data?.payload?.endTimestampMillis || 0,
+							startTime: data?.startTimestampMillis || 0,
+							endTime: data?.endTimestampMillis || 0,
 						}}
 						filteredSpanIds={filteredSpanIds}
 						isFilterActive={isFilterActive}
@@ -124,7 +124,7 @@ function TraceFlamegraph({
 		if (fetchError || workerError) {
 			return <Error error={(fetchError || workerError) as any} />;
 		}
-		if (data?.payload?.spans && data.payload.spans.length === 0) {
+		if (data?.spans && data.spans.length === 0) {
 			return <div>No data found for trace {traceId}</div>;
 		}
 		return (
@@ -134,17 +134,17 @@ function TraceFlamegraph({
 				setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
 				onSpanClick={handleSpanClick}
 				traceMetadata={{
-					startTime: data?.payload?.startTimestampMillis || 0,
-					endTime: data?.payload?.endTimestampMillis || 0,
+					startTime: data?.startTimestampMillis || 0,
+					endTime: data?.endTimestampMillis || 0,
 				}}
 				filteredSpanIds={filteredSpanIds}
 				isFilterActive={isFilterActive}
 			/>
 		);
 	}, [
-		data?.payload?.endTimestampMillis,
-		data?.payload?.startTimestampMillis,
-		data?.payload?.spans,
+		data?.endTimestampMillis,
+		data?.startTimestampMillis,
+		data?.spans,
 		fetchError,
 		filteredSpanIds,
 		firstSpanAtFetchLevel,

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/TraceFlamegraph.test.tsx

@@ -1,12 +1,12 @@
 import { render } from '@testing-library/react';
-import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
+import useGetTraceFlamegraphV3 from 'hooks/trace/useGetTraceFlamegraphV3';
 import { AllTheProviders } from 'tests/test-utils';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
 import { FLAMEGRAPH_SPAN_LIMIT } from '../constants';
 import TraceFlamegraph from '../TraceFlamegraph';
 
-jest.mock('hooks/trace/useGetTraceFlamegraph');
+jest.mock('hooks/trace/useGetTraceFlamegraphV3');
 
 // Short-circuit the worker so the test doesn't depend on layout computation.
 jest.mock('../hooks/useVisualLayoutWorker', () => ({
@@ -17,9 +17,8 @@ jest.mock('../hooks/useVisualLayoutWorker', () => ({
 	}),
 }));
 
-const mockUseGetTraceFlamegraph = useGetTraceFlamegraph as jest.MockedFunction<
-	typeof useGetTraceFlamegraph
->;
+const mockUseGetTraceFlamegraph =
+	useGetTraceFlamegraphV3 as jest.MockedFunction<typeof useGetTraceFlamegraphV3>;
 
 function renderFlamegraph(props: {
 	selectedSpan: SpanV3 | undefined;
@@ -45,7 +44,7 @@ describe('TraceFlamegraph - selectedSpanId pass-through', () => {
 	beforeEach(() => {
 		mockUseGetTraceFlamegraph.mockReset();
 		mockUseGetTraceFlamegraph.mockReturnValue({
-			data: { payload: { spans: [] } },
+			data: { spans: [] },
 			isFetching: false,
 			error: null,
 		} as never);

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/computeVisualLayout.test.ts

@@ -1,4 +1,4 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 import {
 	computeVisualLayout,
@@ -14,12 +14,12 @@ function makeSpan(
 ): FlamegraphSpan {
 	return {
 		parentSpanId: '',
-		traceId: 'trace-1',
 		hasError: false,
-		serviceName: 'svc',
 		name: 'op',
 		level: 0,
 		event: [],
+		resource: {},
+		attributes: {},
 		...overrides,
 	};
 }

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/testUtils.ts

@@ -1,4 +1,4 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 /** Minimal FlamegraphSpan for unit tests */
 export const MOCK_SPAN: FlamegraphSpan = {
@@ -6,12 +6,12 @@ export const MOCK_SPAN: FlamegraphSpan = {
 	durationNano: 50_000_000, // 50ms
 	spanId: 'span-1',
 	parentSpanId: '',
-	traceId: 'trace-1',
 	hasError: false,
-	serviceName: 'test-service',
 	name: 'test-span',
 	level: 0,
 	event: [],
+	resource: {},
+	attributes: {},
 };
 
 /** Nested spans structure for findSpanById tests */

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.presentation.test.ts

@@ -65,37 +65,25 @@ describe('Presentation / Styling Utils', () => {
 	describe('getFlamegraphSpanGroupValue', () => {
 		it('returns resource[field.name] when present', () => {
 			const value = getFlamegraphSpanGroupValue(
-				{
-					serviceName: 'legacy',
-					resource: { 'service.name': 'svc-from-resource' },
-				},
+				{ resource: { 'service.name': 'svc-from-resource' } },
 				SERVICE_FIELD,
 			);
 			expect(value).toBe('svc-from-resource');
 		});
 
-		it('falls back to top-level serviceName for service.name when resource is empty', () => {
-			const value = getFlamegraphSpanGroupValue(
-				{ serviceName: 'svc-legacy', resource: {} },
-				SERVICE_FIELD,
-			);
-			expect(value).toBe('svc-legacy');
+		it('returns "unknown" for service.name when resource is empty', () => {
+			const value = getFlamegraphSpanGroupValue({ resource: {} }, SERVICE_FIELD);
+			expect(value).toBe('unknown');
 		});
 
 		it('returns "unknown" for non-service fields when resource is missing', () => {
-			const value = getFlamegraphSpanGroupValue(
-				{ serviceName: 'svc', resource: {} },
-				HOST_FIELD,
-			);
+			const value = getFlamegraphSpanGroupValue({ resource: {} }, HOST_FIELD);
 			expect(value).toBe('unknown');
 		});
 
 		it('reads host.name from resource when present', () => {
 			const value = getFlamegraphSpanGroupValue(
-				{
-					serviceName: 'svc',
-					resource: { 'host.name': 'host-1' },
-				},
+				{ resource: { 'host.name': 'host-1' } },
 				HOST_FIELD,
 			);
 			expect(value).toBe('host-1');

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/computeVisualLayout.ts

@@ -1,11 +1,10 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 export interface ConnectorLine {
 	parentRow: number;
 	childRow: number;
 	timestampMs: number;
-	serviceName: string;
 	// Snapshot of the child span's resource so draw-time can resolve the
 	// `colorByField` group value without crossing the worker boundary.
 	resource?: Record<string, string>;
@@ -159,24 +158,8 @@ export function computeVisualLayout(spans: FlamegraphSpan[][]): VisualLayout {
 		}
 	}
 
-	// Extract parentSpanId — the field may be missing at runtime when the API
-	// returns `references` instead.  Fall back to the first CHILD_OF reference.
 	function getParentId(span: FlamegraphSpan): string {
-		if (span.parentSpanId) {
-			return span.parentSpanId;
-		}
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		const refs = (span as any).references as
-			| Array<{ spanId?: string; refType?: string }>
-			| undefined;
-		if (refs) {
-			for (const ref of refs) {
-				if (ref.refType === 'CHILD_OF' && ref.spanId) {
-					return ref.spanId;
-				}
-			}
-		}
-		return '';
+		return span.parentSpanId || '';
 	}
 
 	// Build children map and identify roots
@@ -480,7 +463,6 @@ export function computeVisualLayout(spans: FlamegraphSpan[][]): VisualLayout {
 				parentRow,
 				childRow,
 				timestampMs: child.timestamp,
-				serviceName: child.serviceName,
 				resource: child.resource,
 			});
 		}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDraw.ts

@@ -1,7 +1,7 @@
 import React, { RefObject, useCallback, useMemo, useRef } from 'react';
 import { generateColorPair } from 'pages/TraceDetailsV3/utils/generateColorPair';
 import { useTraceStore } from 'pages/TraceDetailsV3/stores/traceStore';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
 import { ConnectorLine } from '../computeVisualLayout';
@@ -200,7 +200,7 @@ function drawConnectorLines(args: DrawConnectorLinesArgs): void {
 		}
 
 		const groupValue = getFlamegraphSpanGroupValue(
-			{ serviceName: conn.serviceName, resource: conn.resource },
+			{ resource: conn.resource },
 			colorByField,
 		);
 		const pair = generateColorPair(groupValue);

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts

@@ -11,10 +11,9 @@ import {
 import { useTraceStore } from 'pages/TraceDetailsV3/stores/traceStore';
 import { RESERVED_PREVIEW_KEYS } from 'pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard';
 import { getSpanAttribute } from 'pages/TraceDetailsV3/utils';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
-import { EventRect, SpanRect } from '../types';
-import { ITraceMetadata } from '../types';
+import { EventRect, ITraceMetadata, SpanRect } from '../types';
 import {
 	getFlamegraphServiceName,
 	getFlamegraphSpanGroupValue,
@@ -200,7 +199,7 @@ export function useFlamegraphHover(
 
 			if (eventRect) {
 				const { event, span } = eventRect;
-				const eventTimeMs = event.timeUnixNano / 1e6;
+				const eventTimeMs = (event.timeUnixNano ?? 0) / 1e6;
 				setHoveredEventKey(`${span.spanId}-${event.name}-${event.timeUnixNano}`);
 				setHoveredSpanId(span.spanId);
 				setTooltipContent({
@@ -220,10 +219,10 @@ export function useFlamegraphHover(
 						return isDarkMode ? pair.color : pair.colorDark;
 					})(),
 					event: {
-						name: event.name,
+						name: event.name ?? '',
 						timeOffsetMs: eventTimeMs - span.timestamp,
-						isError: event.isError,
-						attributeMap: event.attributeMap || {},
+						isError: event.isError ?? false,
+						attributeMap: (event.attributeMap as Record<string, string>) ?? {},
 					},
 				});
 				updateCursor(canvas, eventRect.span);

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useScrollToSpan.ts

@@ -5,7 +5,7 @@ import {
 	SetStateAction,
 	useEffect,
 } from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 import { MIN_VISIBLE_SPAN_MS } from '../constants';
 import { ITraceMetadata } from '../types';

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useVisualLayoutWorker.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 import { computeVisualLayout, VisualLayout } from '../computeVisualLayout';
 import { LayoutWorkerResponse } from '../visualLayoutWorkerTypes';

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/types.ts

@@ -1,5 +1,8 @@
+import {
+	SpantypesEventDTO as FlamegraphEvent,
+	SpantypesFlamegraphSpanDTO as FlamegraphSpan,
+} from 'api/generated/services/sigNoz.schemas';
 import { Dispatch, SetStateAction } from 'react';
-import { Event, FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
 
 import { VisualLayout } from './computeVisualLayout';
 
@@ -28,7 +31,7 @@ export interface SpanRect {
 }
 
 export interface EventRect {
-	event: Event;
+	event: FlamegraphEvent;
 	span: FlamegraphSpan;
 	cx: number;
 	cy: number;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/utils.ts

@@ -7,7 +7,7 @@ import {
 	generateColorPair,
 	RESERVED_ERROR,
 } from 'pages/TraceDetailsV3/utils/generateColorPair';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
 import {
@@ -74,34 +74,25 @@ export function getFlamegraphRowMetrics(
 
 /**
  * Resolve the displayed service.name for a flamegraph span. Used by tooltips
- * (service identity, independent of the active colour-by field). Prefers
- * `resource['service.name']` with legacy top-level `serviceName` fallback.
+ * (service identity, independent of the active colour-by field). Reads
+ * `resource['service.name']`.
  */
 export function getFlamegraphServiceName(
-	span: Pick<FlamegraphSpan, 'serviceName' | 'resource' | 'attributes'>,
+	span: Partial<Pick<FlamegraphSpan, 'resource' | 'attributes'>>,
 ): string {
-	return getSpanAttribute(span, 'service.name') || span.serviceName || '';
+	return getSpanAttribute(span, 'service.name') || '';
 }
 
 /**
  * Resolve the value used to bucket a flamegraph span by colour for the given
- * field. Prefers `resource[field.name]` (new contract from `selectFields`).
- * For `service.name`, falls back to the legacy top-level `serviceName` when
- * resource is empty (backward-compat with backends that haven't shipped
- * `selectFields` yet). For other fields, falls back to `'unknown'`.
+ * field. Prefers `resource[field.name]` (contract from `selectFields`), falling
+ * back to `'unknown'`.
  */
 export function getFlamegraphSpanGroupValue(
-	span: Pick<FlamegraphSpan, 'serviceName' | 'resource' | 'attributes'>,
+	span: Partial<Pick<FlamegraphSpan, 'resource' | 'attributes'>>,
 	field: TelemetryFieldKey,
 ): string {
-	const fromAttribute = getSpanAttribute(span, field.name);
-	if (fromAttribute) {
-		return fromAttribute;
-	}
-	if (field.name === 'service.name') {
-		return span.serviceName || 'unknown';
-	}
-	return 'unknown';
+	return getSpanAttribute(span, field.name) || 'unknown';
 }
 
 interface GetSpanColorArgs {
@@ -296,7 +287,7 @@ export function drawSpanBar(args: DrawSpanBarArgs): void {
 			return;
 		}
 
-		const eventTimeMs = event.timeUnixNano / 1e6;
+		const eventTimeMs = (event.timeUnixNano ?? 0) / 1e6;
 		const eventOffsetPercent =
 			((eventTimeMs - span.timestamp) / spanDurationMs) * 100;
 		const clampedOffset = clamp(eventOffsetPercent, 1, 99);
@@ -306,7 +297,11 @@ export function drawSpanBar(args: DrawSpanBarArgs): void {
 		// Event dots derive from the effective bar color so they track the
 		// light/dark variant the bar is rendered with.
 		const parentBarColor = isDarkMode ? color : colorDark;
-		const dotColor = getEventDotColor(parentBarColor, event.isError, isDarkMode);
+		const dotColor = getEventDotColor(
+			parentBarColor,
+			event.isError ?? false,
+			isDarkMode,
+		);
 		const eventKey = `${span.spanId}-${event.name}-${event.timeUnixNano}`;
 		const isEventHovered = hoveredEventKey === eventKey;
 		const dotSize = isEventHovered

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/visualLayoutWorkerTypes.ts

@@ -1,4 +1,4 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 import { VisualLayout } from './computeVisualLayout';
 

pkg/modules/inframonitoring/implinframonitoring/module.go

@@ -10,7 +10,9 @@ import (
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/inframonitoringtypes"
+	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
@@ -48,6 +50,8 @@ func NewModule(
 }
 
 func (m *module) ListHosts(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableHosts) (*inframonitoringtypes.Hosts, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListHosts")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -161,6 +165,8 @@ func (m *module) ListHosts(ctx context.Context, orgID valuer.UUID, req *inframon
 }
 
 func (m *module) ListPods(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostablePods) (*inframonitoringtypes.Pods, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListPods")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -244,6 +250,8 @@ func (m *module) ListPods(ctx context.Context, orgID valuer.UUID, req *inframoni
 }
 
 func (m *module) ListNodes(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableNodes) (*inframonitoringtypes.Nodes, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListNodes")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -332,6 +340,8 @@ func (m *module) ListNodes(ctx context.Context, orgID valuer.UUID, req *inframon
 }
 
 func (m *module) ListNamespaces(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableNamespaces) (*inframonitoringtypes.Namespaces, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListNamespaces")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -414,6 +424,8 @@ func (m *module) ListNamespaces(ctx context.Context, orgID valuer.UUID, req *inf
 }
 
 func (m *module) ListClusters(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableClusters) (*inframonitoringtypes.Clusters, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListClusters")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -503,6 +515,8 @@ func (m *module) ListClusters(ctx context.Context, orgID valuer.UUID, req *infra
 }
 
 func (m *module) ListVolumes(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableVolumes) (*inframonitoringtypes.Volumes, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListVolumes")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -586,6 +600,8 @@ func (m *module) ListVolumes(ctx context.Context, orgID valuer.UUID, req *infram
 }
 
 func (m *module) ListDeployments(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableDeployments) (*inframonitoringtypes.Deployments, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListDeployments")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -674,6 +690,8 @@ func (m *module) ListDeployments(ctx context.Context, orgID valuer.UUID, req *in
 }
 
 func (m *module) ListStatefulSets(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableStatefulSets) (*inframonitoringtypes.StatefulSets, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListStatefulSets")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -764,6 +782,8 @@ func (m *module) ListStatefulSets(ctx context.Context, orgID valuer.UUID, req *i
 }
 
 func (m *module) ListJobs(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableJobs) (*inframonitoringtypes.Jobs, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListJobs")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -854,6 +874,8 @@ func (m *module) ListJobs(ctx context.Context, orgID valuer.UUID, req *inframoni
 }
 
 func (m *module) ListDaemonSets(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableDaemonSets) (*inframonitoringtypes.DaemonSets, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListDaemonSets")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -942,3 +964,12 @@ func (m *module) ListDaemonSets(ctx context.Context, orgID valuer.UUID, req *inf
 
 	return resp, nil
 }
+
+func (m *module) withInfraMonitoringContext(ctx context.Context, functionName string) context.Context {
+	comments := map[string]string{
+		instrumentationtypes.TelemetrySignal:  telemetrytypes.SignalMetrics.StringValue(),
+		instrumentationtypes.CodeNamespace:    "infra-monitoring",
+		instrumentationtypes.CodeFunctionName: functionName,
+	}
+	return ctxtypes.NewContextWithCommentVals(ctx, comments)
+}

pkg/modules/tracedetail/impltracedetail/module.go

@@ -182,7 +182,7 @@ func (m *module) getFullFlamegraph(ctx context.Context, traceID string, summary
 		return nil, spantypes.ErrTraceNotFound
 	}
 	flamegraphTrace := spantypes.NewFlamegraphTraceFromStorable(fullSpans, selectFields)
-	return spantypes.NewGettableFlamegraphTrace(flamegraphTrace.GetAllLevels(), summary.Start.UnixMilli(), summary.End.UnixMilli(), false), nil
+	return spantypes.NewGettableFlamegraphTrace(flamegraphTrace.GetAllLevels(), summary.Start, summary.End, false), nil
 }
 
 // getWindowedFlamegraph returns a window of a max levels and max sampled spans per level around the selected span.
@@ -209,10 +209,6 @@ func (m *module) getWindowedFlamegraph(ctx context.Context, traceID, selectedSpa
 		return nil, err
 	}
 
-	return spantypes.NewGettableFlamegraphTrace(
-		flamegraphTrace.EnrichSelectedSpans(selectedSpans, fullSpans, selectFields),
-		summary.Start.UnixMilli(),
-		summary.End.UnixMilli(),
-		true,
-	), nil
+	enrichedSpans := flamegraphTrace.EnrichSelectedSpans(selectedSpans, fullSpans, selectFields)
+	return spantypes.NewGettableFlamegraphTrace(enrichedSpans, summary.Start, summary.End, true), nil
 }

pkg/types/spantypes/flamegraph_span.go

@@ -1,6 +1,8 @@
 package spantypes
 
 import (
+	"time"
+
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
@@ -37,11 +39,17 @@ type GettableFlamegraphTrace struct {
 	HasMore              bool                `json:"hasMore" required:"true"`
 }
 
-func NewGettableFlamegraphTrace(spans [][]*FlamegraphSpan, startMs, endMs int64, hasMore bool) *GettableFlamegraphTrace {
+func NewGettableFlamegraphTrace(spans [][]*FlamegraphSpan, start, end time.Time, hasMore bool) *GettableFlamegraphTrace {
+	// convert timestamp to millisecond since client expect that
+	for _, level := range spans {
+		for _, span := range level {
+			span.Timestamp /= 1_000_000
+		}
+	}
 	return &GettableFlamegraphTrace{
 		Spans:                spans,
-		StartTimestampMillis: startMs,
-		EndTimestampMillis:   endMs,
+		StartTimestampMillis: start.UnixMilli(),
+		EndTimestampMillis:   end.UnixMilli(),
 		HasMore:              hasMore,
 	}
 }

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

@@ -9,6 +9,28 @@ from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
 from fixtures.types import Operation, SigNoz
 
 BASE_URL = "/api/v2/dashboards"
+# v1 list returns every dashboard regardless of schema. v2 list converts each row
+# to the perses schema and 501s if any stored dashboard isn't perses-schema, so
+# listing for cleanup against a shared DB must go through v1.
+V1_BASE_URL = "/api/v1/dashboards"
+
+
+def _wipe_all_dashboards(signoz: SigNoz, token: str) -> None:
+    response = requests.get(
+        signoz.self.host_configs["8080"].get(V1_BASE_URL),
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert response.status_code == HTTPStatus.OK, response.text
+    for dashboard in response.json()["data"]:
+        metadata = (dashboard.get("data") or {}).get("metadata") or {}
+        base = BASE_URL if metadata.get("schemaVersion") == "v6" else V1_BASE_URL
+        del_res = requests.delete(
+            signoz.self.host_configs["8080"].get(f"{base}/{dashboard['id']}"),
+            headers={"Authorization": f"Bearer {token}"},
+            timeout=5,
+        )
+        assert del_res.status_code == HTTPStatus.NO_CONTENT, del_res.text
 
 
 # ─── failure cases (create no dashboards) ────────────────────────────────────
@@ -258,18 +280,7 @@ def test_dashboard_v2_lifecycle(  # pylint: disable=too-many-locals,too-many-sta
     # runs, so start from a clean slate: delete every dashboard (which also clears
     # pins via the delete cascade). This test then owns the whole dashboard space
     # and asserts on global counts.
-    existing = requests.get(
-        signoz.self.host_configs["8080"].get(BASE_URL),
-        params={"limit": 200},
-        headers={"Authorization": f"Bearer {token}"},
-        timeout=5,
-    ).json()["data"]["dashboards"]
-    for dashboard in existing:
-        requests.delete(
-            signoz.self.host_configs["8080"].get(f"{BASE_URL}/{dashboard['id']}"),
-            headers={"Authorization": f"Bearer {token}"},
-            timeout=5,
-        )
+    _wipe_all_dashboards(signoz, token)
 
     dashboard_requests = [
         (
@@ -687,18 +698,7 @@ def test_dashboard_v2_pin_limit(
 
     # Wipe the dashboard space (see lifecycle) so the per-user pin cap this test
     # asserts against starts empty — deleting dashboards clears their pins.
-    existing = requests.get(
-        signoz.self.host_configs["8080"].get(BASE_URL),
-        params={"limit": 200},
-        headers={"Authorization": f"Bearer {token}"},
-        timeout=5,
-    ).json()["data"]["dashboards"]
-    for dashboard in existing:
-        requests.delete(
-            signoz.self.host_configs["8080"].get(f"{BASE_URL}/{dashboard['id']}"),
-            headers={"Authorization": f"Bearer {token}"},
-            timeout=5,
-        )
+    _wipe_all_dashboards(signoz, token)
 
     ids: list[str] = []
     for i in range(max_pinned + 1):
@@ -785,18 +785,7 @@ def test_dashboard_v2_like_escaping(
 
     # Wipe the dashboard space (see lifecycle) so the filter assertions run
     # against only the dashboards this test creates.
-    existing = requests.get(
-        signoz.self.host_configs["8080"].get(BASE_URL),
-        params={"limit": 200},
-        headers={"Authorization": f"Bearer {token}"},
-        timeout=5,
-    ).json()["data"]["dashboards"]
-    for dashboard in existing:
-        requests.delete(
-            signoz.self.host_configs["8080"].get(f"{BASE_URL}/{dashboard['id']}"),
-            headers={"Authorization": f"Bearer {token}"},
-            timeout=5,
-        )
+    _wipe_all_dashboards(signoz, token)
 
     dashboard_requests = [
         ("esc-pct", "Cost 50% Report"),