fix: update alias in order by of the query

Since group by is faster is enough no. of threads are used

.github/CODEOWNERS

@@ -169,22 +169,3 @@ go.mod @therealpandey
 ## Dashboard V2
 /frontend/src/pages/DashboardPageV2/ @SigNoz/pulse-frontend
 /frontend/src/pages/DashboardsListPageV2/ @SigNoz/pulse-frontend
-
-## Infrastructure Monitoring
-/frontend/src/pages/InfrastructureMonitoring/ @SigNoz/pulse-frontend
-/frontend/src/container/InfraMonitoringHosts/ @SigNoz/pulse-frontend
-/frontend/src/container/InfraMonitoringK8s/ @SigNoz/pulse-frontend
-
-## Alerts
-/frontend/src/pages/AlertList/ @SigNoz/pulse-frontend
-/frontend/src/pages/AlertDetails/ @SigNoz/pulse-frontend
-/frontend/src/pages/CreateAlert/ @SigNoz/pulse-frontend
-/frontend/src/pages/EditRules/ @SigNoz/pulse-frontend
-/frontend/src/container/AlertHistory/ @SigNoz/pulse-frontend
-/frontend/src/container/CreateAlertRule/ @SigNoz/pulse-frontend
-/frontend/src/container/CreateAlertV2/ @SigNoz/pulse-frontend
-/frontend/src/container/EditAlertV2/ @SigNoz/pulse-frontend
-/frontend/src/container/FormAlertRules/ @SigNoz/pulse-frontend
-/frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
-/frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
-/frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend

conf/example.yaml

@@ -440,6 +440,17 @@ tracedetail:
     max_depth_to_auto_expand: 5
     # Threshold below which all spans are returned without windowing.
     max_limit_to_select_all_spans: 10000
+  flamegraph:
+    # Maximum number of BFS depth levels included in a windowed response.
+    max_selected_levels: 50
+    # Maximum spans per level before sampling is applied.
+    max_spans_per_level: 100
+    # Number of highest-latency spans always included when sampling a level.
+    sampling_top_latency_count: 5
+    # Number of timestamp buckets used for uniform sampling within a level.
+    sampling_bucket_count: 50
+    # Threshold below which all spans are returned without windowing or sampling.
+    select_all_spans_limit: 100000
 
 ##################### Authz #################################
 authz:

docs/api/openapi.yml

@@ -6516,6 +6516,61 @@ components:
       - attribute
       - resource
       type: string
+    SpantypesFlamegraphSpan:
+      properties:
+        attributes:
+          additionalProperties: {}
+          type: object
+        durationNano:
+          minimum: 0
+          type: integer
+        event:
+          items:
+            $ref: '#/components/schemas/SpantypesEvent'
+          type: array
+        hasError:
+          type: boolean
+        level:
+          format: int64
+          type: integer
+        name:
+          type: string
+        parentSpanId:
+          type: string
+        resource:
+          additionalProperties:
+            type: string
+          type: object
+        spanId:
+          type: string
+        timestamp:
+          minimum: 0
+          type: integer
+      required:
+      - event
+      type: object
+    SpantypesGettableFlamegraphTrace:
+      properties:
+        endTimestampMillis:
+          format: int64
+          type: integer
+        hasMore:
+          type: boolean
+        spans:
+          items:
+            items:
+              $ref: '#/components/schemas/SpantypesFlamegraphSpan'
+            type: array
+          type: array
+        startTimestampMillis:
+          format: int64
+          type: integer
+      required:
+      - spans
+      - startTimestampMillis
+      - endTimestampMillis
+      - hasMore
+      type: object
     SpantypesGettableSpanMapperGroups:
       properties:
         items:
@@ -6581,6 +6636,15 @@ components:
         traceId:
           type: string
       type: object
+    SpantypesPostableFlamegraph:
+      properties:
+        selectFields:
+          items:
+            $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+          type: array
+        selectedSpanId:
+          type: string
+      type: object
     SpantypesPostableSpanMapper:
       properties:
         config:
@@ -20027,6 +20091,75 @@ paths:
       summary: Put profile in Zeus for a deployment.
       tags:
       - zeus
+  /api/v3/traces/{traceID}/flamegraph:
+    post:
+      deprecated: false
+      description: Returns the flamegraph view of spans for a given trace ID.
+      operationId: GetFlamegraph
+      parameters:
+      - in: path
+        name: traceID
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SpantypesPostableFlamegraph'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableFlamegraphTrace'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get flamegraph view for a trace
+      tags:
+      - tracedetail
   /api/v3/traces/{traceID}/waterfall:
     post:
       deprecated: false

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -7675,6 +7675,77 @@ export enum SpantypesFieldContextDTO {
 	attribute = 'attribute',
 	resource = 'resource',
 }
+export type SpantypesFlamegraphSpanDTOAttributes = { [key: string]: unknown };
+
+export type SpantypesFlamegraphSpanDTOResource = { [key: string]: string };
+
+export interface SpantypesFlamegraphSpanDTO {
+	/**
+	 * @type object
+	 */
+	attributes?: SpantypesFlamegraphSpanDTOAttributes;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	durationNano?: number;
+	/**
+	 * @type array
+	 */
+	event: SpantypesEventDTO[];
+	/**
+	 * @type boolean
+	 */
+	hasError?: boolean;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	level?: number;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	parentSpanId?: string;
+	/**
+	 * @type object
+	 */
+	resource?: SpantypesFlamegraphSpanDTOResource;
+	/**
+	 * @type string
+	 */
+	spanId?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	timestamp?: number;
+}
+
+export interface SpantypesGettableFlamegraphTraceDTO {
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	endTimestampMillis: number;
+	/**
+	 * @type boolean
+	 */
+	hasMore: boolean;
+	/**
+	 * @type array
+	 */
+	spans: SpantypesFlamegraphSpanDTO[][];
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	startTimestampMillis: number;
+}
+
 export type SpantypesSpanMapperGroupConditionDTOAnyOf = {
 	/**
 	 * @type array,null
@@ -7976,6 +8047,17 @@ export interface SpantypesGettableWaterfallTraceDTO {
 	uncollapsedSpans?: string[] | null;
 }
 
+export interface SpantypesPostableFlamegraphDTO {
+	/**
+	 * @type array
+	 */
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
+	/**
+	 * @type string
+	 */
+	selectedSpanId?: string;
+}
+
 export enum SpantypesSpanMapperOperationDTO {
 	move = 'move',
 	copy = 'copy',
@@ -10277,6 +10359,17 @@ export type GetHosts200 = {
 	status: string;
 };
 
+export type GetFlamegraphPathParameters = {
+	traceID: string;
+};
+export type GetFlamegraph200 = {
+	data: SpantypesGettableFlamegraphTraceDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetWaterfallPathParameters = {
 	traceID: string;
 };

frontend/src/api/generated/services/tracedetail/index.ts

@@ -12,6 +12,8 @@ import type {
 } from 'react-query';
 
 import type {
+	GetFlamegraph200,
+	GetFlamegraphPathParameters,
 	GetTraceAggregations200,
 	GetTraceAggregationsPathParameters,
 	GetWaterfall200,
@@ -19,6 +21,7 @@ import type {
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
+	SpantypesPostableFlamegraphDTO,
 	SpantypesPostableTraceAggregationsDTO,
 	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
@@ -126,6 +129,105 @@ export const useGetTraceAggregations = <
 > => {
 	return useMutation(getGetTraceAggregationsMutationOptions(options));
 };
+/**
+ * Returns the flamegraph view of spans for a given trace ID.
+ * @summary Get flamegraph view for a trace
+ */
+export const getFlamegraph = (
+	{ traceID }: GetFlamegraphPathParameters,
+	spantypesPostableFlamegraphDTO?: BodyType<SpantypesPostableFlamegraphDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetFlamegraph200>({
+		url: `/api/v3/traces/${traceID}/flamegraph`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: spantypesPostableFlamegraphDTO,
+		signal,
+	});
+};
+
+export const getGetFlamegraphMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getFlamegraph>>,
+		TError,
+		{
+			pathParams: GetFlamegraphPathParameters;
+			data?: BodyType<SpantypesPostableFlamegraphDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof getFlamegraph>>,
+	TError,
+	{
+		pathParams: GetFlamegraphPathParameters;
+		data?: BodyType<SpantypesPostableFlamegraphDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['getFlamegraph'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof getFlamegraph>>,
+		{
+			pathParams: GetFlamegraphPathParameters;
+			data?: BodyType<SpantypesPostableFlamegraphDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return getFlamegraph(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type GetFlamegraphMutationResult = NonNullable<
+	Awaited<ReturnType<typeof getFlamegraph>>
+>;
+export type GetFlamegraphMutationBody =
+	| BodyType<SpantypesPostableFlamegraphDTO>
+	| undefined;
+export type GetFlamegraphMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get flamegraph view for a trace
+ */
+export const useGetFlamegraph = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getFlamegraph>>,
+		TError,
+		{
+			pathParams: GetFlamegraphPathParameters;
+			data?: BodyType<SpantypesPostableFlamegraphDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof getFlamegraph>>,
+	TError,
+	{
+		pathParams: GetFlamegraphPathParameters;
+		data?: BodyType<SpantypesPostableFlamegraphDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getGetFlamegraphMutationOptions(options));
+};
 /**
  * Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination
  * @summary Get waterfall view for a trace

frontend/src/api/index.ts

@@ -120,8 +120,7 @@ export const interceptorRejected = async (
 				!(
 					response.config.url === '/sessions' && response.config.method === 'delete'
 				) &&
-				response.config.url !== '/authz/check' &&
-				response.config.url !== '/api/v2/reset_password_tokens/verify'
+				response.config.url !== '/authz/check'
 			) {
 				try {
 					const accessToken = getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN);

frontend/src/assets/Icons/solid-x-circle.svg

@@ -0,0 +1 @@
+<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0_4062_7291)" stroke-width="1.167" stroke-linecap="round" stroke-linejoin="round"><path d="M7 12.833A5.833 5.833 0 107 1.167a5.833 5.833 0 000 11.666z" fill="#E5484D" stroke="#E5484D"/><path d="M8.75 5.25l-3.5 3.5M5.25 5.25l3.5 3.5" stroke="#121317"/></g><defs><clipPath id="prefix__clip0_4062_7291"><path fill="#fff" d="M0 0h14v14H0z"/></clipPath></defs></svg>

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -196,11 +196,7 @@ function Footer(): JSX.Element {
 			</Button>
 		);
 		if (alertValidationMessage) {
-			button = (
-				<Tooltip title={alertValidationMessage}>
-					<span>{button}</span>
-				</Tooltip>
-			);
+			button = <Tooltip title={alertValidationMessage}>{button}</Tooltip>;
 		}
 		return button;
 	}, [
@@ -228,11 +224,7 @@ function Footer(): JSX.Element {
 			</Button>
 		);
 		if (alertValidationMessage) {
-			button = (
-				<Tooltip title={alertValidationMessage}>
-					<span>{button}</span>
-				</Tooltip>
-			);
+			button = <Tooltip title={alertValidationMessage}>{button}</Tooltip>;
 		}
 		return button;
 	}, [

frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/SettingsDrawer/SettingsDrawer.styles.scss

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

frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/SettingsDrawer/index.tsx

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

frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/index.tsx

@@ -1,395 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { FullScreenHandle } from 'react-full-screen';
-import { useTranslation } from 'react-i18next';
-import { useCopyToClipboard } from 'react-use';
-import {
-	Check,
-	ClipboardCopy,
-	Ellipsis,
-	FileJson,
-	Fullscreen,
-	Globe,
-	LockKeyhole,
-	PenLine,
-	Plus,
-	X,
-} from '@signozhq/icons';
-import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
-import { toast } from '@signozhq/ui/sonner';
-import { Typography } from '@signozhq/ui/typography';
-import logEvent from 'api/common/logEvent';
-import {
-	lockDashboardV2,
-	patchDashboardV2,
-	unlockDashboardV2,
-} from 'api/generated/services/dashboard';
-import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
-import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
-import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import useComponentPermission from 'hooks/useComponentPermission';
-import { isEmpty } from 'lodash-es';
-import { useAppContext } from 'providers/App/App';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-import { USER_ROLES } from 'types/roles';
-
-import { Base64Icons } from '../../DashboardContainer/DashboardSettings/General/utils';
-import DashboardSettingsV2 from '../DashboardSettings';
-import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
-import SettingsDrawer from './SettingsDrawer';
-
-import '../../DashboardContainer/DashboardDescription/Description.styles.scss';
-
-import type { V2Dashboard } from '../utils';
-
-interface DashboardDescriptionV2Props {
-	dashboard: V2Dashboard | undefined;
-	handle: FullScreenHandle;
-	onRefetch: () => void;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function DashboardDescriptionV2(props: DashboardDescriptionV2Props): JSX.Element {
-	const { dashboard, handle, onRefetch } = props;
-
-	const id = dashboard?.id ?? '';
-	const isDashboardLocked = !!dashboard?.locked;
-
-	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
-		useState<boolean>(false);
-
-	const title = dashboard?.spec?.display?.name ?? '';
-	const description = dashboard?.spec?.display?.description ?? '';
-	const image = dashboard?.image || Base64Icons[0];
-	const tags = useMemo(
-		() =>
-			(dashboard?.tags ?? []).map((t) =>
-				t.key === t.value ? t.key : `${t.key}:${t.value}`,
-			),
-		[dashboard?.tags],
-	);
-
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-
-	const { user } = useAppContext();
-	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
-	const [isDashboardSettingsOpen, setIsDashbordSettingsOpen] =
-		useState<boolean>(false);
-	const [isRenameDashboardOpen, setIsRenameDashboardOpen] =
-		useState<boolean>(false);
-
-	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 { showErrorModal } = useErrorModal();
-	const { t } = useTranslation(['dashboard', 'common']);
-
-	const [isRenameLoading, setIsRenameLoading] = useState<boolean>(false);
-
-	useEffect(() => {
-		if (dashboard) {setUpdatedTitle(title);}
-	}, [dashboard, title]);
-
-	const handleLockDashboardToggle = async (): Promise<void> => {
-		if (!id) {return;}
-		setIsDashbordSettingsOpen(false);
-		try {
-			if (isDashboardLocked) {
-				await unlockDashboardV2({ id });
-				toast.success('Dashboard unlocked');
-			} else {
-				await lockDashboardV2({ id });
-				toast.success('Dashboard locked');
-			}
-			onRefetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		}
-	};
-
-	const onNameChangeHandler = async (): Promise<void> => {
-		const trimmed = updatedTitle.trim();
-		if (!id || !trimmed || trimmed === title) {
-			setIsRenameDashboardOpen(false);
-			return;
-		}
-		try {
-			setIsRenameLoading(true);
-			const patch: DashboardtypesJSONPatchOperationDTO[] = [
-				{
-					op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-					path: '/spec/display/name',
-					value: trimmed,
-				},
-			];
-			await patchDashboardV2({ id }, patch);
-			toast.success('Dashboard renamed successfully');
-			setIsRenameDashboardOpen(false);
-			onRefetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-			setIsRenameDashboardOpen(true);
-		} finally {
-			setIsRenameLoading(false);
-		}
-	};
-
-	const onEmptyWidgetHandler = (): void => {
-		logEvent('Dashboard Detail V2: Add new panel clicked', {
-			dashboardId: id,
-		});
-		toast.info('V2 panel editor coming next');
-	};
-
-	const [state, setCopy] = useCopyToClipboard();
-
-	useEffect(() => {
-		if (state.error) {
-			toast.error(t('something_went_wrong', { ns: 'common' }));
-		}
-		if (state.value) {
-			toast.success(t('success', { ns: 'common' }));
-		}
-	}, [state.error, state.value, t]);
-
-	const dashboardDataJSON = (): string =>
-		JSON.stringify(dashboard ?? {}, null, 2);
-
-	const exportJSON = (): void => {
-		const blob = new Blob([dashboardDataJSON()], { type: 'application/json' });
-		const url = URL.createObjectURL(blob);
-		const link = document.createElement('a');
-		link.href = url;
-		link.download = `${title || 'dashboard'}.json`;
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-		URL.revokeObjectURL(url);
-	};
-
-	const onConfigureClick = (): void => {
-		setIsSettingsDrawerOpen(true);
-	};
-
-	const onSettingsDrawerClose = (): void => {
-		setIsSettingsDrawerOpen(false);
-	};
-
-	return (
-		<Card className="dashboard-description-container">
-			<DashboardHeader title={title} image={image} />
-			<section className="dashboard-details">
-				<div className="left-section">
-					<img src={image} alt="dashboard-img" className="dashboard-img" />
-					<Tooltip title={title.length > 30 ? title : ''}>
-						<Typography.Text
-							className="dashboard-title"
-							data-testid="dashboard-title"
-						>
-							{title}
-						</Typography.Text>
-					</Tooltip>
-
-					{isPublicDashboard && (
-						<Tooltip title="This dashboard is publicly accessible">
-							<Globe size={14} className="public-dashboard-icon" />
-						</Tooltip>
-					)}
-
-					{isDashboardLocked && (
-						<Tooltip title="This dashboard is locked">
-							<LockKeyhole size={14} className="lock-dashboard-icon" />
-						</Tooltip>
-					)}
-				</div>
-				<div className="right-section">
-					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-					<Popover
-						open={isDashboardSettingsOpen}
-						arrow={false}
-						onOpenChange={(visible): void => setIsDashbordSettingsOpen(visible)}
-						rootClassName="dashboard-settings"
-						content={
-							<div className="menu-content">
-								<section className="section-1">
-									{(isAuthor || user.role === USER_ROLES.ADMIN) && (
-										<Tooltip
-											title={
-												dashboard?.createdBy === 'integration' &&
-												'Dashboards created by integrations cannot be unlocked'
-											}
-										>
-											<Button
-												type="text"
-												icon={<LockKeyhole size={14} />}
-												disabled={dashboard?.createdBy === 'integration'}
-												onClick={handleLockDashboardToggle}
-												data-testid="lock-unlock-dashboard"
-											>
-												{isDashboardLocked ? 'Unlock Dashboard' : 'Lock Dashboard'}
-											</Button>
-										</Tooltip>
-									)}
-
-									{!isDashboardLocked && editDashboard && (
-										<Button
-											type="text"
-											icon={<PenLine size={14} />}
-											onClick={(): void => {
-												setIsRenameDashboardOpen(true);
-												setIsDashbordSettingsOpen(false);
-											}}
-										>
-											Rename
-										</Button>
-									)}
-
-									<Button
-										type="text"
-										icon={<Fullscreen size={14} />}
-										onClick={handle.enter}
-									>
-										Full screen
-									</Button>
-								</section>
-								<section className="section-2">
-									<Button
-										type="text"
-										icon={<FileJson size={14} />}
-										onClick={(): void => {
-											exportJSON();
-											setIsDashbordSettingsOpen(false);
-										}}
-									>
-										Export JSON
-									</Button>
-									<Button
-										type="text"
-										icon={<ClipboardCopy size={14} />}
-										onClick={(): void => {
-											setCopy(dashboardDataJSON());
-											setIsDashbordSettingsOpen(false);
-										}}
-									>
-										Copy as JSON
-									</Button>
-								</section>
-								<section className="delete-dashboard">
-									<DeleteButton
-										createdBy={dashboard?.createdBy || ''}
-										name={title}
-										id={id}
-										isLocked={isDashboardLocked}
-										routeToListPage
-									/>
-								</section>
-							</div>
-						}
-						trigger="click"
-						placement="bottomRight"
-					>
-						<Button
-							icon={<Ellipsis size={14} />}
-							type="text"
-							className="icons"
-							data-testid="options"
-						/>
-					</Popover>
-					{!isDashboardLocked && editDashboard && (
-						<>
-							<Button
-								type="text"
-								className="configure-button"
-								icon={<ConfigureIcon />}
-								data-testid="show-drawer"
-								onClick={onConfigureClick}
-							>
-								Configure
-							</Button>
-							<SettingsDrawer
-								drawerTitle="Dashboard Configuration"
-								isOpen={isSettingsDrawerOpen}
-								onClose={onSettingsDrawerClose}
-							>
-								<DashboardSettingsV2
-									dashboard={dashboard}
-									onRefetch={onRefetch}
-								/>
-							</SettingsDrawer>
-						</>
-					)}
-					{!isDashboardLocked && addPanelPermission && (
-						<Button
-							className="add-panel-btn"
-							onClick={onEmptyWidgetHandler}
-							icon={<Plus size="md" />}
-							type="primary"
-							data-testid="add-panel-header"
-						>
-							New Panel
-						</Button>
-					)}
-				</div>
-			</section>
-			{tags.length > 0 && (
-				<div className="dashboard-tags">
-					{tags.map((tag) => (
-						<Tag key={tag} className="tag">
-							{tag}
-						</Tag>
-					))}
-				</div>
-			)}
-			{!isEmpty(description) && (
-				<section className="dashboard-description-section">{description}</section>
-			)}
-
-			<Modal
-				open={isRenameDashboardOpen}
-				title="Rename Dashboard"
-				onOk={onNameChangeHandler}
-				onCancel={(): void => {
-					setIsRenameDashboardOpen(false);
-				}}
-				rootClassName="rename-dashboard"
-				footer={
-					<div className="dashboard-rename">
-						<Button
-							type="primary"
-							icon={<Check size={14} />}
-							className="rename-btn"
-							onClick={onNameChangeHandler}
-							disabled={isRenameLoading}
-						>
-							Rename Dashboard
-						</Button>
-						<Button
-							type="text"
-							icon={<X size={14} />}
-							className="cancel-btn"
-							onClick={(): void => setIsRenameDashboardOpen(false)}
-						>
-							Cancel
-						</Button>
-					</div>
-				}
-			>
-				<div className="dashboard-content">
-					<Typography.Text className="name-text">Enter a new name</Typography.Text>
-					<Input
-						data-testid="dashboard-name"
-						className="dashboard-name-input"
-						value={updatedTitle}
-						onChange={(e): void => setUpdatedTitle(e.target.value)}
-					/>
-				</div>
-			</Modal>
-		</Card>
-	);
-}
-
-export default DashboardDescriptionV2;

frontend/src/container/DashboardContainerV2/DashboardSettings/General/GeneralSettings.module.scss

@@ -1,227 +0,0 @@
-.overviewContent {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.overviewSettings {
-	border-radius: 3px;
-	border: 1px solid var(--l1-border);
-	padding: 16px !important;
-}
-
-.crossPanelSyncGroup {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.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 {
-	margin: '16px 0';
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}
-
-.saveBtn {
-	margin: 0px !important;
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}

frontend/src/container/DashboardContainerV2/DashboardSettings/General/index.tsx

@@ -1,363 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Radio to @signozhq/ui/radio-group
-import { Col, Input, Radio, Select, Space, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
-import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
-import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
-import {
-	DashboardCursorSync,
-	SyncTooltipFilterMode,
-} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { isEqual } from 'lodash-es';
-import { Check, ExternalLink, SolidInfoCircle, X } from '@signozhq/icons';
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type {
-	DashboardtypesJSONPatchOperationDTO,
-	TagtypesPostableTagDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { toast } from '@signozhq/ui/sonner';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import styles from './GeneralSettings.module.scss';
-import { Button } from './styles';
-import { Base64Icons } from './utils';
-import logEvent from 'api/common/logEvent';
-import { Events } from 'constants/events';
-import { getAbsoluteUrl } from 'utils/basePath';
-
-import type { V2Dashboard } from '../../utils';
-
-const { Option } = Select;
-
-interface Props {
-	dashboard: V2Dashboard | undefined;
-	onRefetch: () => void;
-}
-
-// Convert V2 tags ({key, value}[]) into "key:value" strings for the V1
-// AddTags component (which expects string[]), and back on save.
-//
-// V2 tags require both `key` and `value` to be non-empty server-side
-// (returns `tag_invalid_value` otherwise). To preserve the V1 single-word
-// tag UX, a string with no ':' is round-tripped as `{key: x, value: x}` and
-// collapsed back to just `x` for display.
-function tagsToStrings(tags: TagtypesPostableTagDTO[]): string[] {
-	return tags.map((t) => (t.key === t.value ? t.key : `${t.key}:${t.value}`));
-}
-
-function stringsToTags(tagStrings: string[]): TagtypesPostableTagDTO[] {
-	return tagStrings
-		.map((s) => {
-			const trimmed = s.trim();
-			const idx = trimmed.indexOf(':');
-			if (idx === -1) {
-				return { key: trimmed, value: trimmed };
-			}
-			const key = trimmed.slice(0, idx).trim();
-			const value = trimmed.slice(idx + 1).trim();
-			return { key, value: value || key };
-		})
-		.filter((t) => t.key.length > 0);
-}
-
-function GeneralDashboardSettingsV2({
-	dashboard,
-	onRefetch,
-}: Props): JSX.Element {
-	const id = dashboard?.id ?? '';
-
-	const [cursorSyncMode, setCursorSyncMode] = useDashboardCursorSyncMode(id);
-	const [syncTooltipFilterMode, setSyncTooltipFilterMode] =
-		useSyncTooltipFilterMode(id);
-
-	const title = dashboard?.spec?.display?.name ?? '';
-	const description = dashboard?.spec?.display?.description ?? '';
-	const image = dashboard?.image || Base64Icons[0];
-	const tagsAsStrings = useMemo(
-		() => tagsToStrings(dashboard?.tags ?? []),
-		[dashboard?.tags],
-	);
-
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-	const [updatedTags, setUpdatedTags] = useState<string[]>(tagsAsStrings);
-	const [updatedDescription, setUpdatedDescription] =
-		useState<string>(description);
-	const [updatedImage, setUpdatedImage] = useState<string>(image);
-	const [isSaving, setIsSaving] = useState<boolean>(false);
-	const [numberOfUnsavedChanges, setNumberOfUnsavedChanges] =
-		useState<number>(0);
-
-	const { t } = useTranslation('common');
-	const { showErrorModal } = useErrorModal();
-
-	// Sync state when dashboard refetches after a save
-	useEffect(() => {
-		setUpdatedTitle(title);
-		setUpdatedDescription(description);
-		setUpdatedImage(image);
-		setUpdatedTags(tagsAsStrings);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dashboard?.updatedAt]);
-
-	const buildPatch = (): DashboardtypesJSONPatchOperationDTO[] => {
-		const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-		const replace = (
-			path: string,
-			value: unknown,
-		): DashboardtypesJSONPatchOperationDTO => ({
-			op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-			path,
-			value,
-		});
-
-		if (updatedTitle !== title) {
-			ops.push(replace('/spec/display/name', updatedTitle));
-		}
-		if (updatedDescription !== description) {
-			ops.push(replace('/spec/display/description', updatedDescription));
-		}
-		if (updatedImage !== image) {
-			ops.push(replace('/image', updatedImage));
-		}
-		if (!isEqual(updatedTags, tagsAsStrings)) {
-			ops.push(replace('/tags', stringsToTags(updatedTags)));
-		}
-		return ops;
-	};
-
-	const onSaveHandler = async (): Promise<void> => {
-		if (!id) {
-			return;
-		}
-		const ops = buildPatch();
-		if (ops.length === 0) {
-			return;
-		}
-
-		try {
-			setIsSaving(true);
-			await patchDashboardV2({ id }, ops);
-			toast.success('Dashboard updated');
-			onRefetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		} finally {
-			setIsSaving(false);
-		}
-	};
-
-	useEffect(() => {
-		let n = 0;
-		const initialValues = [title, description, tagsAsStrings, image];
-		const updatedValues = [
-			updatedTitle,
-			updatedDescription,
-			updatedTags,
-			updatedImage,
-		];
-		initialValues.forEach((val, index) => {
-			if (!isEqual(val, updatedValues[index])) {
-				n += 1;
-			}
-		});
-		setNumberOfUnsavedChanges(n);
-	}, [
-		description,
-		image,
-		tagsAsStrings,
-		title,
-		updatedDescription,
-		updatedImage,
-		updatedTags,
-		updatedTitle,
-	]);
-
-	const discardHandler = (): void => {
-		setUpdatedTitle(title);
-		setUpdatedImage(image);
-		setUpdatedTags(tagsAsStrings);
-		setUpdatedDescription(description);
-	};
-
-	return (
-		<div className={styles.overviewContent}>
-			<Col className={styles.overviewSettings}>
-				<Space
-					direction="vertical"
-					style={{
-						width: '100%',
-						display: 'flex',
-						flexDirection: 'column',
-						gap: '21px',
-					}}
-				>
-					<div>
-						<Typography className={styles.dashboardName}>Dashboard Name</Typography>
-						<section className={styles.nameIconInput}>
-							<Select
-								defaultActiveFirstOption
-								data-testid="dashboard-image"
-								suffixIcon={null}
-								rootClassName={styles.dashboardImageInput}
-								value={updatedImage}
-								onChange={(value: string): void => setUpdatedImage(value)}
-							>
-								{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={updatedTitle}
-								onChange={(e): void => setUpdatedTitle(e.target.value)}
-							/>
-						</section>
-					</div>
-
-					<div>
-						<Typography className={styles.dashboardName}>Description</Typography>
-						<Input.TextArea
-							data-testid="dashboard-desc"
-							rows={6}
-							value={updatedDescription}
-							className={styles.descriptionTextArea}
-							onChange={(e): void => setUpdatedDescription(e.target.value)}
-						/>
-					</div>
-					<div>
-						<Typography className={styles.dashboardName}>Tags</Typography>
-						<AddTags tags={updatedTags} setTags={setUpdatedTags} />
-					</div>
-				</Space>
-			</Col>
-			<Col className={`${styles.overviewSettings} ${styles.crossPanelSyncGroup}`}>
-				<div className={styles.crossPanelSyncSectionHeader}>
-					<Typography.Text className={styles.crossPanelSyncSectionTitle}>
-						Cross-Panel Sync
-					</Typography.Text>
-					<Tooltip
-						title={
-							<div className={styles.crossPanelSyncTooltipContent}>
-								<strong className={styles.crossPanelSyncTooltipTitle}>
-									Cross-Panel Sync
-								</strong>
-								<span className={styles.crossPanelSyncTooltipDescription}>
-									Sync crosshair and tooltip across all the dashboard panels
-								</span>
-								<a
-									href="https://signoz.io/docs/dashboards/interactivity/#cross-panel-sync"
-									target="_blank"
-									rel="noopener noreferrer"
-									className={styles.crossPanelSyncTooltipDocLink}
-								>
-									Learn more
-									<ExternalLink size={12} />
-								</a>
-							</div>
-						}
-						placement="top"
-						mouseEnterDelay={0.5}
-					>
-						<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
-					</Tooltip>
-				</div>
-				<div className={styles.crossPanelSyncRow}>
-					<div className={styles.crossPanelSyncInfo}>
-						<Typography.Text className={styles.crossPanelSyncTitle}>
-							Sync Mode
-						</Typography.Text>
-						<Typography.Text className={styles.crossPanelSyncDescription}>
-							Sync crosshair and tooltip across all the dashboard panels
-						</Typography.Text>
-					</div>
-					<Radio.Group
-						value={cursorSyncMode}
-						onChange={(e): void => {
-							setCursorSyncMode(e.target.value as DashboardCursorSync);
-						}}
-					>
-						<Radio.Button value={DashboardCursorSync.None}>No Sync</Radio.Button>
-						<Radio.Button value={DashboardCursorSync.Crosshair}>
-							Crosshair
-						</Radio.Button>
-						<Radio.Button value={DashboardCursorSync.Tooltip}>Tooltip</Radio.Button>
-					</Radio.Group>
-				</div>
-				{cursorSyncMode === DashboardCursorSync.Tooltip && (
-					<div className={styles.crossPanelSyncRow}>
-						<div className={styles.crossPanelSyncInfo}>
-							<Typography.Text className={styles.crossPanelSyncTitle}>
-								Synced Tooltip Series
-							</Typography.Text>
-							<Typography.Text className={styles.crossPanelSyncDescription}>
-								Show only series that intersect on group-by, or every series with the
-								matching ones highlighted
-							</Typography.Text>
-						</div>
-						<Radio.Group
-							value={syncTooltipFilterMode}
-							onChange={(e): void => {
-								logEvent(Events.TOOLTIP_SYNC_MODE_CHANGED, {
-									path: getAbsoluteUrl(window.location.pathname),
-									mode: e.target.value,
-								});
-								setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
-							}}
-						>
-							<Radio.Button value={SyncTooltipFilterMode.All}>All</Radio.Button>
-							<Radio.Button value={SyncTooltipFilterMode.Filtered}>
-								Filtered
-							</Radio.Button>
-						</Radio.Group>
-					</div>
-				)}
-			</Col>
-			{numberOfUnsavedChanges > 0 && (
-				<div className={styles.overviewSettingsFooter}>
-					<div className={styles.unsaved}>
-						<div className={styles.unsavedDot} />
-						<Typography.Text className={styles.unsavedChanges}>
-							{numberOfUnsavedChanges} unsaved change
-							{numberOfUnsavedChanges > 1 && 's'}
-						</Typography.Text>
-					</div>
-					<div className={styles.footerActionBtns}>
-						<Button
-							disabled={isSaving}
-							icon={<X size={14} />}
-							onClick={discardHandler}
-							type="text"
-							className={styles.discardBtn}
-						>
-							Discard
-						</Button>
-						<Button
-							style={{ margin: '16px 0' }}
-							disabled={isSaving}
-							loading={isSaving}
-							icon={<Check size={14} />}
-							data-testid="save-dashboard-config"
-							onClick={onSaveHandler}
-							type="primary"
-							className={styles.saveBtn}
-						>
-							{t('save')}
-						</Button>
-					</div>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default GeneralDashboardSettingsV2;

frontend/src/container/DashboardContainerV2/DashboardSettings/General/styles.ts

@@ -1,20 +0,0 @@
-import { Button as ButtonComponent, Drawer } from 'antd';
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	margin-top: 0.5rem;
-`;
-
-export const Button = styled(ButtonComponent)`
-	&&& {
-		display: flex;
-		align-items: center;
-	}
-`;
-
-export const DrawerContainer = styled(Drawer)`
-	.ant-drawer-header {
-		padding: 0;
-		border: none;
-	}
-`;

frontend/src/container/DashboardContainerV2/DashboardSettings/index.tsx

@@ -1,67 +0,0 @@
-import { Button, Empty, Tabs } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { Braces, Globe, Table } from '@signozhq/icons';
-
-import '../../DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss';
-
-import GeneralDashboardSettingsV2 from './General';
-import type { V2Dashboard } from '../utils';
-
-interface Props {
-	dashboard: V2Dashboard | undefined;
-	onRefetch: () => void;
-}
-
-function Placeholder({ message }: { message: string }): JSX.Element {
-	return (
-		<div style={{ padding: 24 }}>
-			<Empty
-				image={Empty.PRESENTED_IMAGE_SIMPLE}
-				description={<Typography.Text>{message}</Typography.Text>}
-			/>
-		</div>
-	);
-}
-
-function DashboardSettingsV2({ dashboard, onRefetch }: Props): JSX.Element {
-	const items = [
-		{
-			label: (
-				<Button type="text" icon={<Table size={14} />}>
-					General
-				</Button>
-			),
-			key: 'general',
-			children: (
-				<GeneralDashboardSettingsV2
-					dashboard={dashboard}
-					onRefetch={onRefetch}
-				/>
-			),
-		},
-		{
-			label: (
-				<Button type="text" icon={<Braces size={14} />}>
-					Variables
-				</Button>
-			),
-			key: 'variables',
-			children: <Placeholder message="V2 dashboard variables coming next." />,
-		},
-		{
-			label: (
-				<Button type="text" icon={<Globe size={14} />}>
-					Publish
-				</Button>
-			),
-			key: 'public-dashboard',
-			children: (
-				<Placeholder message="V2 public dashboard publishing coming next." />
-			),
-		},
-	];
-
-	return <Tabs items={items} />;
-}
-
-export default DashboardSettingsV2;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/PanelV2.tsx

@@ -1,97 +0,0 @@
-import { useMemo } from 'react';
-import { Tag, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { EllipsisVertical } from '@signozhq/icons';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-
-interface Props {
-	panel: DashboardtypesPanelDTO | undefined;
-	panelId: string;
-}
-
-function PanelV2({ panel, panelId }: Props): JSX.Element {
-	const name = panel?.spec?.display?.name || `Panel ${panelId.slice(0, 6)}`;
-	const description = panel?.spec?.display?.description;
-	const kind = panel?.spec?.plugin?.kind?.replace(/^signoz\//, '') ?? 'unknown';
-	const queryCount = panel?.spec?.queries?.length ?? 0;
-
-	const headerTitle = useMemo(() => {
-		if (!description) {return name;}
-		return (
-			<Tooltip title={description}>
-				<span>{name}</span>
-			</Tooltip>
-		);
-	}, [name, description]);
-
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				height: '100%',
-				width: '100%',
-				background: 'var(--bg-ink-400, #0b0c0e)',
-				border: '1px solid var(--bg-slate-400, #1d212d)',
-				borderRadius: 4,
-				overflow: 'hidden',
-			}}
-		>
-			<div
-				className="drag-handle"
-				style={{
-					display: 'flex',
-					alignItems: 'center',
-					justifyContent: 'space-between',
-					padding: '8px 12px',
-					borderBottom: '1px solid var(--bg-slate-400, #1d212d)',
-					cursor: 'grab',
-				}}
-			>
-				<div
-					style={{
-						display: 'flex',
-						alignItems: 'center',
-						gap: 8,
-						minWidth: 0,
-					}}
-				>
-					<Typography.Text
-						style={{
-							margin: 0,
-							whiteSpace: 'nowrap',
-							overflow: 'hidden',
-							textOverflow: 'ellipsis',
-						}}
-					>
-						{headerTitle}
-					</Typography.Text>
-					<Tag style={{ marginInlineEnd: 0 }}>{kind}</Tag>
-				</div>
-				<EllipsisVertical size={14} />
-			</div>
-
-			<div
-				style={{
-					flex: 1,
-					display: 'flex',
-					alignItems: 'center',
-					justifyContent: 'center',
-					padding: 12,
-					color: 'var(--bg-vanilla-400, #8993ae)',
-					fontSize: 12,
-					textAlign: 'center',
-				}}
-			>
-				<div>
-					<div style={{ marginBottom: 6 }}>{kind} panel</div>
-					<div>
-						{queryCount} {queryCount === 1 ? 'query' : 'queries'} · chart rendering coming next
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default PanelV2;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section.tsx

@@ -1,95 +0,0 @@
-import { useMemo, useState } from 'react';
-import GridLayout, { WidthProvider, type Layout } from 'react-grid-layout';
-import { Button } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-
-import type { DashboardSectionV2 } from '../utils';
-import PanelV2 from './PanelV2';
-
-const ResponsiveGridLayout = WidthProvider(GridLayout);
-
-interface Props {
-	section: DashboardSectionV2;
-}
-
-function SectionGrid({ items }: { items: DashboardSectionV2['items'] }): JSX.Element {
-	const rglLayout = useMemo<Layout[]>(
-		() =>
-			items.map((item) => ({
-				i: item.id,
-				x: item.x,
-				y: item.y,
-				w: item.width,
-				h: item.height,
-			})),
-		[items],
-	);
-
-	return (
-		<ResponsiveGridLayout
-			cols={12}
-			rowHeight={45}
-			autoSize
-			useCSSTransforms
-			layout={rglLayout}
-			draggableHandle=".drag-handle"
-			isDraggable={false}
-			isResizable={false}
-			margin={[8, 8]}
-		>
-			{items.map((item) => (
-				<div key={item.id}>
-					<PanelV2 panel={item.panel} panelId={item.id} />
-				</div>
-			))}
-		</ResponsiveGridLayout>
-	);
-}
-
-function Section({ section }: Props): JSX.Element {
-	// Local toggle override — initial state from layout spec; user can
-	// expand/collapse without persisting.
-	const [open, setOpen] = useState<boolean>(section.open);
-
-	if (!section.title) {
-		// Untitled section — render just the grid (no header chrome).
-		return <SectionGrid items={section.items} />;
-	}
-
-	return (
-		<div
-			style={{
-				marginBottom: 12,
-				border: '1px solid var(--bg-slate-500)',
-				borderRadius: 4,
-			}}
-			data-testid={`dashboard-section-${section.id}`}
-		>
-			<Button
-				type="text"
-				onClick={(): void => setOpen((v) => !v)}
-				icon={open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-				style={{
-					width: '100%',
-					justifyContent: 'flex-start',
-					padding: '8px 12px',
-					borderBottom: open ? '1px solid var(--bg-slate-500)' : 'none',
-				}}
-				data-testid={`dashboard-section-toggle-${section.id}`}
-			>
-				<Typography.Text style={{ marginLeft: 4 }}>
-					{section.title}
-				</Typography.Text>
-				{section.repeatVariable ? (
-					<Typography.Text style={{ marginLeft: 8, opacity: 0.6 }}>
-						(repeats per ${section.repeatVariable})
-					</Typography.Text>
-				) : null}
-			</Button>
-			{open ? <SectionGrid items={section.items} /> : null}
-		</div>
-	);
-}
-
-export default Section;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/index.tsx

@@ -1,51 +0,0 @@
-import { useMemo } from 'react';
-
-import { Empty } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import type {
-	DashboardtypesLayoutDTO,
-	DashboardtypesPanelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { layoutsToSections } from '../utils';
-import Section from './Section';
-
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
-
-interface Props {
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined;
-}
-
-function GridCardLayoutV2({ layouts, panels }: Props): JSX.Element {
-	const sections = useMemo(() => layoutsToSections(layouts, panels), [
-		layouts,
-		panels,
-	]);
-
-	const isEmpty = sections.length === 0 || sections.every((s) => s.items.length === 0);
-
-	if (isEmpty) {
-		return (
-			<div style={{ padding: 48, textAlign: 'center' }}>
-				<Empty
-					image={Empty.PRESENTED_IMAGE_SIMPLE}
-					description={
-						<Typography.Text>No panels in this dashboard yet</Typography.Text>
-					}
-				/>
-			</div>
-		);
-	}
-
-	return (
-		<>
-			{sections.map((section) => (
-				<Section key={section.id} section={section} />
-			))}
-		</>
-	);
-}
-
-export default GridCardLayoutV2;

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardBreadcrumbs.styles.scss

@@ -1,63 +0,0 @@
-.dashboard-breadcrumbs {
-	width: 100%;
-	height: 48px;
-	display: flex;
-	gap: 6px;
-	align-items: center;
-	max-width: 80%;
-
-	.dashboard-btn {
-		display: flex;
-		align-items: center;
-		color: var(--l2-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-		padding: 0px;
-		height: 20px;
-	}
-
-	.dashboard-btn:hover {
-		background-color: unset;
-	}
-
-	.id-btn {
-		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;
-		}
-
-		.ant-btn-icon {
-			margin-inline-end: 4px;
-		}
-	}
-	.id-btn:hover {
-		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
-		color: var(--bg-robin-300);
-	}
-
-	.dashboard-icon-image {
-		height: 14px;
-		width: 14px;
-	}
-}

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,58 +0,0 @@
-import { useCallback } from 'react';
-import { Button } from 'antd';
-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 { LayoutGrid } from '@signozhq/icons';
-
-import { Base64Icons } from '../../../DashboardContainer/DashboardSettings/General/utils';
-
-import './DashboardBreadcrumbs.styles.scss';
-
-interface Props {
-	title: string;
-	image?: string;
-}
-
-function DashboardBreadcrumbs({ title, image }: Props): 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="dashboard-breadcrumbs">
-			<Button
-				type="text"
-				icon={<LayoutGrid size={14} />}
-				className="dashboard-btn"
-				onClick={goToListPage}
-			>
-				Dashboard /
-			</Button>
-			<Button type="text" className="id-btn dashboard-name-btn">
-				<img
-					src={image || Base64Icons[0]}
-					alt="dashboard-icon"
-					className="dashboard-icon-image"
-				/>
-				{title}
-			</Button>
-		</div>
-	);
-}
-
-export default DashboardBreadcrumbs;

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardHeader.styles.scss

@@ -1,9 +0,0 @@
-.dashboard-header {
-	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/container/DashboardContainerV2/components/DashboardHeader/DashboardHeader.tsx

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

frontend/src/container/DashboardContainerV2/index.tsx

@@ -1,35 +0,0 @@
-import { FullScreen, useFullScreenHandle } from 'react-full-screen';
-
-import DashboardDescriptionV2 from './DashboardDescriptionV2';
-import GridCardLayoutV2 from './GridCardLayoutV2';
-import type { V2Dashboard } from './utils';
-
-interface Props {
-	dashboard: V2Dashboard | undefined;
-	onRefetch: () => void;
-}
-
-function DashboardContainerV2({ dashboard, onRefetch }: Props): JSX.Element {
-	const fullScreenHandle = useFullScreenHandle();
-	const spec = dashboard?.spec;
-
-	return (
-		<FullScreen handle={fullScreenHandle}>
-			<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-				<DashboardDescriptionV2
-					dashboard={dashboard}
-					handle={fullScreenHandle}
-					onRefetch={onRefetch}
-				/>
-				<div style={{ flex: 1, padding: '12px 24px', overflow: 'auto' }}>
-					<GridCardLayoutV2
-						layouts={spec?.layouts}
-						panels={spec?.panels ?? undefined}
-					/>
-				</div>
-			</div>
-		</FullScreen>
-	);
-}
-
-export default DashboardContainerV2;

frontend/src/container/DashboardContainerV2/utils.ts

@@ -1,111 +0,0 @@
-import type {
-	DashboardtypesGettableDashboardV2DTO,
-	DashboardtypesLayoutDTO,
-	DashboardtypesPanelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-export type V2Dashboard = DashboardtypesGettableDashboardV2DTO;
-
-export interface GridItemV2 {
-	id: string;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	panel: DashboardtypesPanelDTO | undefined;
-}
-
-const PANEL_REF_PREFIX = '#/spec/panels/';
-
-export function extractPanelIdFromRef(ref: string | undefined): string | null {
-	if (!ref) {return null;}
-	if (!ref.startsWith(PANEL_REF_PREFIX)) {return null;}
-	return ref.slice(PANEL_REF_PREFIX.length);
-}
-
-export function flattenGridLayout(
-	layouts: DashboardtypesLayoutDTO[] | undefined | null,
-	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined,
-): GridItemV2[] {
-	if (!layouts?.length) {return [];}
-
-	const items: GridItemV2[] = [];
-	layouts.forEach((layoutEnvelope) => {
-		if (layoutEnvelope?.kind !== 'Grid') {return;}
-		const gridItems = layoutEnvelope.spec?.items ?? [];
-		gridItems.forEach((item) => {
-			const id = extractPanelIdFromRef(item.content?.$ref);
-			if (!id) {return;}
-			items.push({
-				id,
-				x: item.x ?? 0,
-				y: item.y ?? 0,
-				width: item.width ?? 6,
-				height: item.height ?? 6,
-				panel: panels?.[id],
-			});
-		});
-	});
-
-	return items;
-}
-
-/**
- * A section corresponds to one entry in `spec.layouts`. If the Grid has a
- * `display.title`, it renders with a collapsible header; otherwise it is a
- * "default" untitled section (visually just the grid).
- */
-export interface DashboardSectionV2 {
-	id: string;
-	title: string | undefined;
-	open: boolean;
-	items: GridItemV2[];
-	repeatVariable: string | undefined;
-}
-
-export function layoutsToSections(
-	layouts: DashboardtypesLayoutDTO[] | undefined | null,
-	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined,
-): DashboardSectionV2[] {
-	if (!layouts?.length) {return [];}
-
-	return layouts
-		.map((layoutEnvelope, idx) => {
-			if (layoutEnvelope?.kind !== 'Grid') {return null;}
-			const spec = layoutEnvelope.spec;
-			const items: GridItemV2[] = (spec?.items ?? [])
-				.map((item) => {
-					const id = extractPanelIdFromRef(item.content?.$ref);
-					if (!id) {return null;}
-					return {
-						id,
-						x: item.x ?? 0,
-						y: item.y ?? 0,
-						width: item.width ?? 6,
-						height: item.height ?? 6,
-						panel: panels?.[id],
-					};
-				})
-				.filter((it): it is GridItemV2 => it !== null);
-
-			const title = spec?.display?.title;
-			// `open` defaults to true when no collapse field is set (the section
-			// is expanded by default).
-			const open = spec?.display?.collapse?.open !== false;
-
-			return {
-				id: `section-${idx}`,
-				title,
-				open,
-				items,
-				repeatVariable: spec?.repeatVariable,
-			};
-		})
-		.filter((s): s is DashboardSectionV2 => s !== null);
-}
-
-export function getPanelKindLabel(panel: DashboardtypesPanelDTO | undefined): string {
-	const kind = panel?.spec?.plugin?.kind;
-	if (!kind) {return 'unknown';}
-	return kind.replace(/^signoz\//, '');
-}

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -9,6 +9,8 @@ import { useOptionsMenu } from 'container/OptionsMenu';
 import { ArrowUp10, Minus } from '@signozhq/icons';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
+import QueryStatus from './QueryStatus';
+
 function LogsActionsContainer({
 	listQuery,
 	selectedPanelType,
@@ -16,6 +18,10 @@ function LogsActionsContainer({
 	handleToggleFrequencyChart,
 	orderBy,
 	setOrderBy,
+	isFetching,
+	isLoading,
+	isError,
+	isSuccess,
 }: {
 	listQuery: any;
 	selectedPanelType: PANEL_TYPES;
@@ -23,6 +29,10 @@ function LogsActionsContainer({
 	handleToggleFrequencyChart: () => void;
 	orderBy: string;
 	setOrderBy: (value: string) => void;
+	isFetching: boolean;
+	isLoading: boolean;
+	isError: boolean;
+	isSuccess: boolean;
 }): JSX.Element {
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@@ -96,6 +106,17 @@ function LogsActionsContainer({
 							</div>
 						</>
 					)}
+
+					{(selectedPanelType === PANEL_TYPES.TIME_SERIES ||
+						selectedPanelType === PANEL_TYPES.TABLE) && (
+						<div className="query-stats">
+							<QueryStatus
+								loading={isLoading || isFetching}
+								error={isError}
+								success={isSuccess}
+							/>
+						</div>
+					)}
 				</div>
 			</div>
 		</div>

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -155,6 +155,40 @@
 				}
 			}
 
+			.query-stats {
+				display: flex;
+				align-items: center;
+				gap: 12px;
+
+				align-self: flex-end;
+
+				.rows {
+					color: var(--l2-foreground);
+					font-family: 'Geist Mono';
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 18px; /* 150% */
+					letter-spacing: 0.36px;
+				}
+
+				.divider {
+					width: 1px;
+					height: 14px;
+					background: var(--l3-background);
+				}
+
+				.time {
+					color: var(--l2-foreground);
+					font-family: 'Geist Mono';
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 18px; /* 150% */
+					letter-spacing: 0.36px;
+				}
+			}
+
 			.ant-btn {
 				border: none;
 			}

frontend/src/container/LogsExplorerViews/QueryStatus.styles.scss

@@ -0,0 +1,4 @@
+.query-status {
+	display: flex;
+	align-items: center;
+}

frontend/src/container/LogsExplorerViews/QueryStatus.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { LoaderCircle, CircleCheck } from '@signozhq/icons';
+import { Spin } from 'antd';
+
+import solidXCircleUrl from '@/assets/Icons/solid-x-circle.svg';
+
+import './QueryStatus.styles.scss';
+
+interface IQueryStatusProps {
+	loading: boolean;
+	error: boolean;
+	success: boolean;
+}
+
+export default function QueryStatus(
+	props: IQueryStatusProps,
+): React.ReactElement {
+	const { loading, error, success } = props;
+
+	const content = useMemo((): React.ReactElement => {
+		if (loading) {
+			return (
+				<Spin
+					spinning
+					size="small"
+					indicator={<LoaderCircle className="animate-spin" size="md" />}
+				/>
+			);
+		}
+		if (error) {
+			return (
+				<img
+					src={solidXCircleUrl}
+					alt="header"
+					className="error"
+					style={{ height: '14px', width: '14px' }}
+				/>
+			);
+		}
+		if (success) {
+			return (
+				<CircleCheck className="success" size={14} fill={Color.BG_ROBIN_500} />
+			);
+		}
+		return <div />;
+	}, [error, loading, success]);
+	return <div className="query-status">{content}</div>;
+}

frontend/src/container/LogsExplorerViews/index.tsx

@@ -160,7 +160,7 @@ function LogsExplorerViewsContainer({
 		'custom',
 	);
 
-	const { data, isLoading, isFetching, isError, error } =
+	const { data, isLoading, isFetching, isError, isSuccess, error } =
 		useGetExplorerQueryRange(
 			requestData,
 			selectedPanelType,
@@ -437,6 +437,10 @@ function LogsExplorerViewsContainer({
 						handleToggleFrequencyChart={handleToggleFrequencyChart}
 						orderBy={orderBy}
 						setOrderBy={setOrderBy}
+						isFetching={isFetching}
+						isLoading={isLoading}
+						isError={isError}
+						isSuccess={isSuccess}
 					/>
 				)}
 

frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx

@@ -59,7 +59,7 @@ function AllAttributes({
 	);
 
 	const attributes = useMemo(
-		() => attributesData?.data?.attributes ?? [],
+		() => attributesData?.data.attributes ?? [],
 		[attributesData],
 	);
 

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx

@@ -56,7 +56,7 @@ function MetricDetails({
 	);
 
 	const metadata = useMemo(() => {
-		if (!metricMetadataResponse?.data) {
+		if (!metricMetadataResponse) {
 			return null;
 		}
 		const { type, description, unit, temporality, isMonotonic } =

frontend/src/container/ResetPassword/ResetPassword.styles.scss

@@ -21,10 +21,6 @@
 			justify-content: center;
 			margin-bottom: 8px;
 			color: var(--semantic-primary-foreground);
-
-			&--error {
-				color: var(--destructive);
-			}
 		}
 
 		.reset-password-header-title {

frontend/src/container/ResetPassword/TokenError.tsx

@@ -1,67 +0,0 @@
-import { CircleAlert } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-import AuthError from 'components/AuthError/AuthError';
-import AuthPageContainer from 'components/AuthPageContainer';
-import APIError from 'types/api/error';
-
-import './ResetPassword.styles.scss';
-
-interface TokenErrorContent {
-	title: string;
-	subtitle: string;
-}
-
-function getErrorContent(error?: APIError): TokenErrorContent {
-	const code = error?.getErrorCode();
-
-	if (code === 'reset_password_token_expired') {
-		return {
-			title: 'Reset Password token is expired',
-			subtitle:
-				'Password reset links are single-use and expire after a set period. Please request a new password reset link.',
-		};
-	}
-
-	if (code === 'reset_password_token_not_found') {
-		return {
-			title: 'Invalid Reset Link',
-			subtitle:
-				'This reset password link is invalid or has already been used. Please request a new password reset link.',
-		};
-	}
-
-	return {
-		title: 'Reset Link Unavailable',
-		subtitle:
-			'We could not validate your reset password link. Please request a new one.',
-	};
-}
-
-interface TokenErrorProps {
-	error?: APIError;
-}
-
-function TokenError({ error }: TokenErrorProps): JSX.Element {
-	const { title, subtitle } = getErrorContent(error);
-
-	return (
-		<AuthPageContainer>
-			<div className="reset-password-card reset-password-card--centered">
-				<div className="reset-password-header">
-					<div className="reset-password-header-icon reset-password-header-icon--error">
-						<CircleAlert size={32} />
-					</div>
-					<Typography.Title level={4} className="reset-password-header-title">
-						{title}
-					</Typography.Title>
-					<Typography.Text className="reset-password-header-subtitle">
-						{subtitle}
-					</Typography.Text>
-				</div>
-				{error && <AuthError error={error} />}
-			</div>
-		</AuthPageContainer>
-	);
-}
-
-export default TokenError;

frontend/src/container/ResetPassword/__tests__/ResetPassword.test.tsx

@@ -1,3 +1,4 @@
+import { Logout } from 'api/utils';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { rest, server } from 'mocks-server/server';
@@ -16,6 +17,10 @@ jest.mock('lib/history', () => ({
 	},
 }));
 
+jest.mock('api/utils', () => ({
+	Logout: jest.fn(),
+}));
+
 const mockSuccessNotification = jest.fn();
 const mockErrorNotification = jest.fn();
 
@@ -65,6 +70,17 @@ describe('ResetPassword Component', () => {
 			).toBeInTheDocument();
 			expect(screen.getByText(/signoz 1\.0\.0/i)).toBeInTheDocument();
 		});
+
+		it('redirects to login when token is missing', () => {
+			window.history.pushState({}, '', '/password-reset');
+
+			render(<ResetPassword version="1.0.0" />, undefined, {
+				initialRoute: '/password-reset',
+			});
+
+			expect(Logout).toHaveBeenCalled();
+			expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
+		});
 	});
 
 	describe('Form Validation', () => {

frontend/src/container/ResetPassword/index.tsx

@@ -1,10 +1,11 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-use';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
 import { Form, Input as AntdInput } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Logout } from 'api/utils';
 import resetPasswordApi from 'api/v1/factor_password/resetPassword';
 import AuthError from 'components/AuthError/AuthError';
 import AuthPageContainer from 'components/AuthPageContainer';
@@ -37,6 +38,13 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 	const { notifications } = useNotifications();
 
 	const [form] = Form.useForm<FormValues>();
+	useEffect(() => {
+		if (!token) {
+			Logout();
+			history.push(ROUTES.LOGIN);
+		}
+	}, [token]);
+
 	const handleFormSubmit: () => Promise<void> = async () => {
 		try {
 			setLoading(true);

frontend/src/pages/DashboardPageV2/DashboardPageV2.tsx

@@ -1,47 +1,5 @@
-import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { Typography } from '@signozhq/ui/typography';
-import { useGetDashboardV2 } from 'api/generated/services/dashboard';
-import Spinner from 'components/Spinner';
-import DashboardContainerV2 from 'container/DashboardContainerV2';
-
 function DashboardPageV2(): JSX.Element {
-	const { dashboardId } = useParams<{ dashboardId: string }>();
-
-	const { data, isLoading, isError, error, refetch } = useGetDashboardV2({
-		id: dashboardId,
-	});
-
-	const dashboard = data?.data;
-	const name = dashboard?.spec?.display?.name;
-
-	useEffect(() => {
-		if (name) {
-			document.title = name;
-		}
-	}, [name]);
-
-	if (isLoading) {
-		return <Spinner tip="Loading dashboard..." />;
-	}
-
-	if (isError) {
-		return (
-			<div style={{ padding: 24 }}>
-				<Typography.Title>Failed to load dashboard</Typography.Title>
-				<Typography.Text>{(error as Error)?.message}</Typography.Text>
-			</div>
-		);
-	}
-
-	return (
-		<DashboardContainerV2
-			dashboard={dashboard}
-			onRefetch={(): void => {
-				refetch();
-			}}
-		/>
-	);
+	return <>DashboardPageV2</>;
 }
 
 export default DashboardPageV2;

frontend/src/pages/ResetPassword/__tests__/ResetPasswordPage.test.tsx

@@ -1,155 +0,0 @@
-import { Logout } from 'api/utils';
-import ROUTES from 'constants/routes';
-import history from 'lib/history';
-import { createErrorResponse, rest, server } from 'mocks-server/server';
-import { render, screen, waitFor } from 'tests/test-utils';
-
-import ResetPassword from '../index';
-
-jest.mock('lib/history', () => ({
-	__esModule: true,
-	default: {
-		push: jest.fn(),
-		location: { search: '' },
-	},
-}));
-
-jest.mock('api/utils', () => ({
-	Logout: jest.fn().mockResolvedValue(undefined),
-}));
-
-const VERIFY_TOKEN_ENDPOINT = '*/api/v2/reset_password_tokens/verify';
-const VERSION_ENDPOINT = '*/version';
-
-const mockHistoryPush = history.push as jest.MockedFunction<
-	typeof history.push
->;
-
-const successVerifyResponse = {
-	data: { id: 'token-id', token: 'valid-token' },
-};
-
-const successVersionResponse = {
-	version: '0.0.1',
-	ee: 'Y',
-	setupCompleted: true,
-};
-
-describe('ResetPassword Page', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		server.use(
-			rest.get(VERSION_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(successVersionResponse)),
-			),
-		);
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	describe('Token validation on page load', () => {
-		it('shows spinner then form when token is valid', async () => {
-			server.use(
-				rest.post(VERIFY_TOKEN_ENDPOINT, (_, res, ctx) =>
-					res(ctx.delay(50), ctx.status(200), ctx.json(successVerifyResponse)),
-				),
-			);
-
-			window.history.pushState({}, '', '/password-reset?token=valid-token');
-			render(<ResetPassword />, undefined, {
-				initialRoute: '/password-reset?token=valid-token',
-			});
-
-			// Loading state: spinner visible, form and error absent
-			expect(screen.getByRole('img', { name: /loading/i })).toBeInTheDocument();
-			expect(screen.queryByTestId('password')).not.toBeInTheDocument();
-			expect(
-				screen.queryByText(/reset password token is expired/i),
-			).not.toBeInTheDocument();
-
-			// After verification resolves: form is shown
-			await waitFor(() => {
-				expect(screen.getByTestId('password')).toBeInTheDocument();
-			});
-			expect(screen.getByTestId('confirmPassword')).toBeInTheDocument();
-		});
-
-		it('shows "Invalid Reset Link" when token is not found (404)', async () => {
-			server.use(
-				rest.post(
-					VERIFY_TOKEN_ENDPOINT,
-					createErrorResponse(
-						404,
-						'reset_password_token_not_found',
-						'reset password token does not exist',
-					),
-				),
-			);
-
-			window.history.pushState({}, '', '/password-reset?token=invalid-token');
-			render(<ResetPassword />, undefined, {
-				initialRoute: '/password-reset?token=invalid-token',
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText(/invalid reset link/i)).toBeInTheDocument();
-			});
-
-			expect(
-				screen.getByText(/invalid or has already been used/i),
-			).toBeInTheDocument();
-			expect(
-				screen.getByText(/reset password token does not exist/i),
-			).toBeInTheDocument();
-		});
-
-		it('shows "token is expired" when token is expired (401) without redirecting to login', async () => {
-			server.use(
-				rest.post(
-					VERIFY_TOKEN_ENDPOINT,
-					createErrorResponse(
-						401,
-						'reset_password_token_expired',
-						'reset password token has expired',
-					),
-				),
-			);
-
-			window.history.pushState({}, '', '/password-reset?token=expired-token');
-			render(<ResetPassword />, undefined, {
-				initialRoute: '/password-reset?token=expired-token',
-			});
-
-			await waitFor(() => {
-				expect(
-					screen.getByText(/reset password token is expired/i),
-				).toBeInTheDocument();
-			});
-
-			expect(
-				screen.getByText(/single-use and expire after a set period/i),
-			).toBeInTheDocument();
-			expect(
-				screen.getByText(/reset password token has expired/i),
-			).toBeInTheDocument();
-			// 401 from this endpoint must NOT trigger logout/redirect
-			expect(mockHistoryPush).not.toHaveBeenCalledWith(ROUTES.LOGIN);
-			expect(Logout).not.toHaveBeenCalled();
-		});
-
-		it('redirects to login when no token is in the URL', async () => {
-			window.history.pushState({}, '', '/password-reset');
-			render(<ResetPassword />, undefined, {
-				initialRoute: '/password-reset',
-			});
-
-			await waitFor(() => {
-				expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
-			});
-
-			expect(Logout).toHaveBeenCalled();
-		});
-	});
-});

frontend/src/pages/ResetPassword/index.tsx

@@ -1,17 +1,8 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { useQuery } from 'react-query';
-import { useLocation } from 'react-use';
-import { AxiosError } from 'axios';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import getUserVersion from 'api/v1/version/get';
-import { verifyResetPasswordToken } from 'api/generated/services/users';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { Logout } from 'api/utils';
 import Spinner from 'components/Spinner';
 import ResetPasswordContainer from 'container/ResetPassword';
-import TokenError from 'container/ResetPassword/TokenError';
-import ROUTES from 'constants/routes';
-import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
@@ -19,65 +10,24 @@ import APIError from 'types/api/error';
 function ResetPassword(): JSX.Element {
 	const { user, isLoggedIn } = useAppContext();
 	const { showErrorModal } = useErrorModal();
-	const { search } = useLocation();
-	const params = new URLSearchParams(search || '');
-	const token = params.get('token') || '';
 
-	useEffect(() => {
-		if (!token) {
-			void Logout();
-			history.push(ROUTES.LOGIN);
-		}
-	}, [token]);
-
-	const {
-		data: versionData,
-		isLoading: isVersionLoading,
-		error: versionError,
-	} = useQuery({
+	const { data, isLoading, error } = useQuery({
 		queryFn: getUserVersion,
 		queryKey: ['getUserVersion', user?.accessJwt],
 		enabled: !isLoggedIn,
 	});
 
-	const {
-		isLoading: isVerifying,
-		isError: isTokenError,
-		error: tokenError,
-	} = useQuery<
-		Awaited<ReturnType<typeof verifyResetPasswordToken>>,
-		AxiosError<RenderErrorResponseDTO>
-	>({
-		queryFn: () => verifyResetPasswordToken({ token }),
-		queryKey: ['verifyResetPasswordToken', token],
-		enabled: !!token,
-		retry: false,
-	});
-
-	const tokenApiError = useMemo(
-		() => convertToApiError(tokenError),
-		[tokenError],
-	);
-
 	useEffect(() => {
-		if (versionError) {
-			showErrorModal(versionError as APIError);
+		if (error) {
+			showErrorModal(error as APIError);
 		}
-	}, [versionError, showErrorModal]);
+	}, [error, showErrorModal]);
 
-	if (!token) {
+	if (isLoading) {
 		return <Spinner tip="Loading..." />;
 	}
 
-	if (isVersionLoading || isVerifying) {
-		return <Spinner tip="Validating your reset password token..." />;
-	}
-
-	if (isTokenError) {
-		return <TokenError error={tokenApiError} />;
-	}
-
-	return <ResetPasswordContainer version={versionData?.data.version || ''} />;
+	return <ResetPasswordContainer version={data?.data.version || ''} />;
 }
 
 export default ResetPassword;

pkg/apiserver/signozapiserver/tracedetail.go

@@ -67,5 +67,24 @@ func (provider *provider) addTraceDetailRoutes(router *mux.Router) error {
 		return err
 	}
 
+	if err := router.Handle("/api/v3/traces/{traceID}/flamegraph", handler.New(
+		provider.authzMiddleware.ViewAccess(provider.traceDetailHandler.GetFlamegraph),
+		handler.OpenAPIDef{
+			ID:                  "GetFlamegraph",
+			Tags:                []string{"tracedetail"},
+			Summary:             "Get flamegraph view for a trace",
+			Description:         "Returns the flamegraph view of spans for a given trace ID.",
+			Request:             new(spantypes.PostableFlamegraph),
+			RequestContentType:  "application/json",
+			Response:            new(spantypes.GettableFlamegraphTrace),
+			ResponseContentType: "application/json",
+			SuccessStatusCode:   http.StatusOK,
+			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+		},
+	)).Methods(http.MethodPost).GetError(); err != nil {
+		return err
+	}
+
 	return nil
 }

pkg/modules/tracedetail/config.go

@@ -6,7 +6,16 @@ import (
 )
 
 type Config struct {
-	Waterfall WaterfallConfig `mapstructure:"waterfall"`
+	Waterfall  WaterfallConfig  `mapstructure:"waterfall"`
+	Flamegraph FlamegraphConfig `mapstructure:"flamegraph"`
+}
+
+type FlamegraphConfig struct {
+	MaxSelectedLevels            int  `mapstructure:"max_selected_levels"`
+	MaxSpansPerLevel             int  `mapstructure:"max_spans_per_level"`
+	SamplingTopLatencySpansCount int  `mapstructure:"sampling_top_latency_count"`
+	SamplingBucketCount          int  `mapstructure:"sampling_bucket_count"`
+	SelectAllSpansLimit          uint `mapstructure:"select_all_spans_limit"`
 }
 
 type WaterfallConfig struct {
@@ -29,6 +38,13 @@ func newConfig() factory.Config {
 			MaxDepthToAutoExpand:     5,
 			MaxLimitToSelectAllSpans: 10_000,
 		},
+		Flamegraph: FlamegraphConfig{
+			MaxSelectedLevels:            50,
+			MaxSpansPerLevel:             100,
+			SamplingTopLatencySpansCount: 5,
+			SamplingBucketCount:          50,
+			SelectAllSpansLimit:          100_000,
+		},
 	}
 }
 
@@ -45,5 +61,25 @@ func (c Config) Validate() error {
 		return errors.NewInvalidInputf(errors.CodeInvalidInput,
 			"tracedetail.waterfall.max_limit_to_select_all_spans must be positive")
 	}
+	if c.Flamegraph.MaxSelectedLevels <= 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput,
+			"tracedetail.flamegraph.level_limit must be positive, got %d", c.Flamegraph.MaxSelectedLevels)
+	}
+	if c.Flamegraph.MaxSpansPerLevel <= 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput,
+			"tracedetail.flamegraph.spans_per_level must be positive, got %d", c.Flamegraph.MaxSpansPerLevel)
+	}
+	if c.Flamegraph.SamplingTopLatencySpansCount < 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput,
+			"tracedetail.flamegraph.top_latency_count cannot be negative, got %d", c.Flamegraph.SamplingTopLatencySpansCount)
+	}
+	if c.Flamegraph.SamplingBucketCount <= 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput,
+			"tracedetail.flamegraph.bucket_count must be positive, got %d", c.Flamegraph.SamplingBucketCount)
+	}
+	if c.Flamegraph.SelectAllSpansLimit == 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput,
+			"tracedetail.flamegraph.max_limit_to_select_all_spans must be positive")
+	}
 	return nil
 }

pkg/modules/tracedetail/impltracedetail/handler.go

@@ -80,3 +80,19 @@ func (h *handler) GetTraceAggregations(rw http.ResponseWriter, r *http.Request)
 
 	render.Success(rw, http.StatusOK, result)
 }
+
+func (h *handler) GetFlamegraph(rw http.ResponseWriter, r *http.Request) {
+	req := new(spantypes.PostableFlamegraph)
+	if err := binding.JSON.BindBody(r.Body, req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	result, err := h.module.GetFlamegraph(r.Context(), mux.Vars(r)["traceID"], req.SelectedSpanID, req.SelectFields)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, result)
+}

pkg/modules/tracedetail/impltracedetail/module.go

@@ -7,6 +7,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/modules/tracedetail"
 	"github.com/SigNoz/signoz/pkg/types/spantypes"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
 type module struct {
@@ -148,6 +149,17 @@ func (m *module) GetTraceAggregations(ctx context.Context, traceID string, req *
 	return &spantypes.GettableTraceAggregations{Aggregations: results}, nil
 }
 
+func (m *module) GetFlamegraph(ctx context.Context, traceID string, selectedSpanID string, selectFields []telemetrytypes.TelemetryFieldKey) (*spantypes.GettableFlamegraphTrace, error) {
+	summary, err := m.store.GetTraceSummary(ctx, traceID)
+	if err != nil {
+		return nil, err
+	}
+	if summary.NumSpans <= uint64(m.config.Flamegraph.SelectAllSpansLimit) {
+		return m.getFullFlamegraph(ctx, traceID, summary, selectFields)
+	}
+	return m.getWindowedFlamegraph(ctx, traceID, selectedSpanID, summary, selectFields)
+}
+
 // getWindowedWaterfall builds the waterfall tree with minimal data and then returns only a window of full spans.
 func (m *module) getWindowedWaterfall(ctx context.Context, traceID, selectedSpanID string, uncollapsedSpans []string, start, end time.Time) (*spantypes.GettableWaterfallTrace, error) {
 	// Step 1: minimal fetch → build full tree → select visible window
@@ -188,3 +200,47 @@ func (m *module) getWindowedWaterfall(ctx context.Context, traceID, selectedSpan
 		waterfallTrace, selectedSpans, uncollapsedSpans, false, nil,
 	), nil
 }
+
+func (m *module) getFullFlamegraph(ctx context.Context, traceID string, summary *spantypes.TraceSummary, selectFields []telemetrytypes.TelemetryFieldKey) (*spantypes.GettableFlamegraphTrace, error) {
+	fullSpans, err := m.store.GetFlamegraphSpans(ctx, traceID, summary.Start, summary.End, nil)
+	if err != nil {
+		return nil, err
+	}
+	if len(fullSpans) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+	flamegraphTrace := spantypes.NewFlamegraphTraceFromStorable(fullSpans, selectFields)
+	return spantypes.NewGettableFlamegraphTrace(flamegraphTrace.GetAllLevels(), summary.Start.UnixMilli(), summary.End.UnixMilli(), false), nil
+}
+
+// getWindowedFlamegraph returns a window of a max levels and max sampled spans per level around the selected span.
+func (m *module) getWindowedFlamegraph(ctx context.Context, traceID, selectedSpanID string, summary *spantypes.TraceSummary, selectFields []telemetrytypes.TelemetryFieldKey) (*spantypes.GettableFlamegraphTrace, error) {
+	minimalSpans, err := m.store.GetMinimalSpans(ctx, traceID, summary.Start, summary.End)
+	if err != nil {
+		return nil, err
+	}
+	if len(minimalSpans) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+
+	flamegraphTrace := spantypes.NewFlamegraphTraceFromMinimal(minimalSpans)
+	minimalSpans = nil //nolint:ineffassign,wastedassign // release backing array before further db calls
+
+	cfg := m.config.Flamegraph
+	selectedSpans := flamegraphTrace.GetSelectedLevels(selectedSpanID, cfg.MaxSelectedLevels, cfg.MaxSpansPerLevel, cfg.SamplingTopLatencySpansCount, cfg.SamplingBucketCount)
+	if len(selectedSpans) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+
+	fullSpans, err := m.store.GetFlamegraphSpans(ctx, traceID, summary.Start, summary.End, spantypes.FlamegraphWindowSpanIDs(selectedSpans))
+	if err != nil {
+		return nil, err
+	}
+
+	return spantypes.NewGettableFlamegraphTrace(
+		flamegraphTrace.EnrichSelectedSpans(selectedSpans, fullSpans, selectFields),
+		summary.Start.UnixMilli(),
+		summary.End.UnixMilli(),
+		true,
+	), nil
+}

pkg/modules/tracedetail/impltracedetail/store.go

@@ -154,6 +154,46 @@ func (s *traceStore) GetTraceSpansByIDs(ctx context.Context, traceID string, sta
 	return spans, nil
 }
 
+func (s *traceStore) GetFlamegraphSpans(ctx context.Context, traceID string, start, end time.Time, spanIDs []string) ([]spantypes.StorableSpan, error) {
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select(
+		"span_id",
+		"any(parent_span_id) AS parent_span_id",
+		"any(timestamp) AS timestamp",
+		"any(duration_nano) AS duration_nano",
+		"any(has_error) AS has_error",
+		"any(name) AS name",
+		"any(events) AS events",
+		"any(attributes_string) AS attributes_string",
+		"any(attributes_number) AS attributes_number",
+		"any(attributes_bool) AS attributes_bool",
+		"any(resources_string) AS resources_string",
+	)
+	sb.From(fmt.Sprintf("%s.%s", spantypes.TraceDB, spantypes.TraceTable))
+	conditions := []string{
+		sb.E("trace_id", traceID),
+		sb.GE("ts_bucket_start", start.Unix()-1800),
+		sb.LE("ts_bucket_start", end.Unix()),
+	}
+	if len(spanIDs) > 0 {
+		ids := make([]any, len(spanIDs))
+		for i, id := range spanIDs {
+			ids[i] = id
+		}
+		conditions = append(conditions, sb.In("span_id", ids...))
+	}
+	sb.Where(conditions...)
+	sb.GroupBy("span_id")
+	sb.OrderBy("timestamp ASC", "name ASC")
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+
+	var spans []spantypes.StorableSpan
+	if err := s.telemetryStore.ClickhouseDB().Select(ctx, &spans, query, args...); err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "error querying flamegraph spans")
+	}
+	return spans, nil
+}
+
 func (s *traceStore) GetSpanCountByField(ctx context.Context, traceID string, summary *spantypes.TraceSummary, fieldKey telemetrytypes.TelemetryFieldKey) (map[string]uint64, error) {
 	fieldExpr, err := buildFieldExpr(fieldKey)
 	if err != nil {

pkg/modules/tracedetail/tracedetail.go

@@ -5,6 +5,7 @@ import (
 	"net/http"
 
 	"github.com/SigNoz/signoz/pkg/types/spantypes"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
 // Handler exposes HTTP handlers for trace detail APIs.
@@ -12,6 +13,7 @@ type Handler interface {
 	GetWaterfall(http.ResponseWriter, *http.Request)
 	GetWaterfallV4(http.ResponseWriter, *http.Request)
 	GetTraceAggregations(http.ResponseWriter, *http.Request)
+	GetFlamegraph(http.ResponseWriter, *http.Request)
 }
 
 // Module defines the business logic for trace detail operations.
@@ -19,4 +21,5 @@ type Module interface {
 	GetWaterfall(ctx context.Context, traceID string, req *spantypes.PostableWaterfall) (*spantypes.GettableWaterfallTrace, error)
 	GetWaterfallV4(ctx context.Context, traceID string, selectedSpanID string, uncollapsedSpans []string, selectAllLimit uint) (*spantypes.GettableWaterfallTrace, error)
 	GetTraceAggregations(ctx context.Context, traceID string, req *spantypes.PostableTraceAggregations) (*spantypes.GettableTraceAggregations, error)
+	GetFlamegraph(ctx context.Context, traceID string, selectedSpanID string, selectFields []telemetrytypes.TelemetryFieldKey) (*spantypes.GettableFlamegraphTrace, error)
 }

pkg/telemetrytraces/statement_builder.go

@@ -124,10 +124,8 @@ func (b *traceQueryStatementBuilder) Build(
 		-------------------------------- End of tech debt ----------------------------
 	*/
 
-	for _, action := range adjustTraceKeys(keys, &query, requestType) {
-		// TODO: change to debug level once we are confident about the behavior
-		b.logger.InfoContext(ctx, "key adjustment action", slog.String("action", action))
-	}
+	query = b.adjustKeys(ctx, keys, query, requestType)
+
 	// Create SQL builder
 	q := sqlbuilder.NewSelectBuilder()
 
@@ -195,30 +193,24 @@ func getKeySelectors(query qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation])
 	return keySelectors
 }
 
-// mergeDeprecatedTraceKeys prepends deprecated intrinsic/calculated trace field
-// definitions to the keys map. We do this during statement building, not at
-// metadata fetch time, because:
-//  1. Filter expressions that reference deprecated columns must continue to
-//     resolve — otherwise they fail with "key not found".
-//  2. Doing it at metadata fetch time would also surface deprecated keys in
-//     autocomplete suggestions, which we don't want.
-//  3. We prepend (not append) so the intrinsic/calculated entry wins ordering
-//     in the multi_if SQL expression.
-func mergeDeprecatedTraceKeys(keys map[string][]*telemetrytypes.TelemetryFieldKey) {
+func (b *traceQueryStatementBuilder) adjustKeys(ctx context.Context, keys map[string][]*telemetrytypes.TelemetryFieldKey, query qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation], requestType qbtypes.RequestType) qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation] {
+
+	// add deprecated fields only during statement building
+	// why?
+	// 1. to not fail filter expression that use deprecated cols
+	// 2. this could have been moved to metadata fetching itself, however, that
+	// would mean, they also show up in suggestions we we don't want to do
+	// 3. reason for not doing a simple append is to keep intrinsic/calculated field first so that it gets
+	// priority in multi_if sql expression
 	for fieldKeyName, fieldKey := range IntrinsicFieldsDeprecated {
 		keys[fieldKeyName] = append([]*telemetrytypes.TelemetryFieldKey{&fieldKey}, keys[fieldKeyName]...)
 	}
 	for fieldKeyName, fieldKey := range CalculatedFieldsDeprecated {
 		keys[fieldKeyName] = append([]*telemetrytypes.TelemetryFieldKey{&fieldKey}, keys[fieldKeyName]...)
 	}
-}
-
-func adjustTraceKeys(keys map[string][]*telemetrytypes.TelemetryFieldKey, query *qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation], requestType qbtypes.RequestType) []string {
-
-	mergeDeprecatedTraceKeys(keys)
 
 	// Adjust keys for alias expressions in aggregations
-	actions := querybuilder.AdjustKeysForAliasExpressions(query, requestType)
+	actions := querybuilder.AdjustKeysForAliasExpressions(&query, requestType)
 
 	/*
 		Check if user is using multiple contexts or data types for same field name
@@ -236,7 +228,7 @@ func adjustTraceKeys(keys map[string][]*telemetrytypes.TelemetryFieldKey, query
 		and make it just http.status_code and remove the duplicate entry.
 	*/
 
-	actions = append(actions, querybuilder.AdjustDuplicateKeys(query)...)
+	actions = append(actions, querybuilder.AdjustDuplicateKeys(&query)...)
 
 	/*
 		Now adjust each key to have correct context and data type
@@ -244,20 +236,24 @@ func adjustTraceKeys(keys map[string][]*telemetrytypes.TelemetryFieldKey, query
 		Reason for doing this is to not create an unexpected behavior for users
 	*/
 	for idx := range query.SelectFields {
-		actions = append(actions, adjustTraceKey(&query.SelectFields[idx], keys)...)
+		actions = append(actions, b.adjustKey(&query.SelectFields[idx], keys)...)
 	}
 	for idx := range query.GroupBy {
-		actions = append(actions, adjustTraceKey(&query.GroupBy[idx].TelemetryFieldKey, keys)...)
+		actions = append(actions, b.adjustKey(&query.GroupBy[idx].TelemetryFieldKey, keys)...)
 	}
 	for idx := range query.Order {
-		actions = append(actions, adjustTraceKey(&query.Order[idx].Key.TelemetryFieldKey, keys)...)
+		actions = append(actions, b.adjustKey(&query.Order[idx].Key.TelemetryFieldKey, keys)...)
 	}
 
-	return actions
+	for _, action := range actions {
+		// TODO: change to debug level once we are confident about the behavior
+		b.logger.InfoContext(ctx, "key adjustment action", slog.String("action", action))
+	}
+
+	return query
 }
 
-// adjustTraceKey resolves a single TelemetryFieldKey against the keys map.
-func adjustTraceKey(key *telemetrytypes.TelemetryFieldKey, keys map[string][]*telemetrytypes.TelemetryFieldKey) []string {
+func (b *traceQueryStatementBuilder) adjustKey(key *telemetrytypes.TelemetryFieldKey, keys map[string][]*telemetrytypes.TelemetryFieldKey) []string {
 
 	// for recording actions taken
 	actions := []string{}

pkg/telemetrytraces/stmt_builder_test.go

@@ -1125,13 +1125,28 @@ func TestAdjustKey(t *testing.T) {
 		},
 	}
 
+	fm := NewFieldMapper()
+	cb := NewConditionBuilder(fm)
+	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
+	fl := flaggertest.New(t)
+	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
+	statementBuilder := NewTraceQueryStatementBuilder(
+		instrumentationtest.New().ToProviderSettings(),
+		mockMetadataStore,
+		fm,
+		cb,
+		aggExprRewriter,
+		nil,
+		fl,
+	)
+
 	for _, c := range cases {
 		t.Run(c.name, func(t *testing.T) {
 			// Create a copy of the input key to avoid modifying the original
 			key := c.inputKey
 
 			// Call adjustKey
-			adjustTraceKey(&key, c.keysMap)
+			statementBuilder.adjustKey(&key, c.keysMap)
 
 			// Verify the key was adjusted as expected
 			require.Equal(t, c.expectedKey.Name, key.Name, "key name should match")
@@ -1384,6 +1399,21 @@ func TestAdjustKeys(t *testing.T) {
 		},
 	}
 
+	fm := NewFieldMapper()
+	cb := NewConditionBuilder(fm)
+	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
+	fl := flaggertest.New(t)
+	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
+	statementBuilder := NewTraceQueryStatementBuilder(
+		instrumentationtest.New().ToProviderSettings(),
+		mockMetadataStore,
+		fm,
+		cb,
+		aggExprRewriter,
+		nil,
+		fl,
+	)
+
 	for _, c := range cases {
 		t.Run(c.name, func(t *testing.T) {
 			// Create a deep copy of the keys map to avoid modifying the original
@@ -1394,7 +1424,7 @@ func TestAdjustKeys(t *testing.T) {
 			}
 
 			// Call adjustKeys
-			adjustTraceKeys(keysMapCopy, &c.query, qbtypes.RequestTypeScalar)
+			c.query = statementBuilder.adjustKeys(context.Background(), keysMapCopy, c.query, qbtypes.RequestTypeScalar)
 
 			// Verify select fields were adjusted
 			if c.expectedSelectFields != nil {

pkg/telemetrytraces/trace_operator_cte_builder.go

@@ -216,13 +216,6 @@ func (b *traceOperatorCTEBuilder) buildQueryCTE(ctx context.Context, queryName s
 	}
 	b.stmtBuilder.logger.DebugContext(ctx, "Retrieved keys for query", slog.String("query_name", queryName), slog.Int("keys_count", len(keys)))
 
-	// The CTE only selects spans matching the filter. Aggregations, group by
-	// and order by run later in buildFinalQuery, so RequestTypeRaw is fine here.
-	for _, action := range adjustTraceKeys(keys, query, qbtypes.RequestTypeRaw) {
-		// TODO: change to debug level once we are confident about the behavior
-		b.stmtBuilder.logger.InfoContext(ctx, "key adjustment action", slog.String("action", action))
-	}
-
 	// Build resource filter CTE for this specific query
 	resourceFilterCTEName := fmt.Sprintf("__resource_filter_%s", cteName)
 	resourceStmt, err := b.buildResourceFilterCTE(ctx, *query)
@@ -424,28 +417,21 @@ func (b *traceOperatorCTEBuilder) buildNotCTE(leftCTE, rightCTE string) (string,
 }
 
 func (b *traceOperatorCTEBuilder) buildFinalQuery(ctx context.Context, selectFromCTE string, requestType qbtypes.RequestType) (*qbtypes.Statement, error) {
-	keySelectors := b.getKeySelectors()
-	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
-	if err != nil {
-		return nil, err
-	}
-	b.adjustOperatorKeys(ctx, keys, requestType)
-
 	switch requestType {
 	case qbtypes.RequestTypeRaw:
-		return b.buildListQuery(ctx, selectFromCTE, keys)
+		return b.buildListQuery(ctx, selectFromCTE)
 	case qbtypes.RequestTypeTimeSeries:
-		return b.buildTimeSeriesQuery(ctx, selectFromCTE, keys)
+		return b.buildTimeSeriesQuery(ctx, selectFromCTE)
 	case qbtypes.RequestTypeTrace:
-		return b.buildTraceQuery(ctx, selectFromCTE, keys)
+		return b.buildTraceQuery(ctx, selectFromCTE)
 	case qbtypes.RequestTypeScalar:
-		return b.buildScalarQuery(ctx, selectFromCTE, keys)
+		return b.buildScalarQuery(ctx, selectFromCTE)
 	default:
 		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "unsupported request type: %s", requestType)
 	}
 }
 
-func (b *traceOperatorCTEBuilder) buildListQuery(ctx context.Context, selectFromCTE string, keys map[string][]*telemetrytypes.TelemetryFieldKey) (*qbtypes.Statement, error) {
+func (b *traceOperatorCTEBuilder) buildListQuery(ctx context.Context, selectFromCTE string) (*qbtypes.Statement, error) {
 	sb := sqlbuilder.NewSelectBuilder()
 
 	// Select core fields
@@ -467,6 +453,22 @@ func (b *traceOperatorCTEBuilder) buildListQuery(ctx context.Context, selectFrom
 		"parent_span_id": true,
 	}
 
+	// Get keys for selectFields
+	keySelectors := b.getKeySelectors()
+	for _, field := range b.operator.SelectFields {
+		keySelectors = append(keySelectors, &telemetrytypes.FieldKeySelector{
+			Name:          field.Name,
+			Signal:        telemetrytypes.SignalTraces,
+			FieldContext:  field.FieldContext,
+			FieldDataType: field.FieldDataType,
+		})
+	}
+
+	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
+	if err != nil {
+		return nil, err
+	}
+
 	// Add selectFields using ColumnExpressionFor since we now have all base table columns
 	for _, field := range b.operator.SelectFields {
 		if selectedFields[field.Name] {
@@ -516,44 +518,6 @@ func (b *traceOperatorCTEBuilder) buildListQuery(ctx context.Context, selectFrom
 	}, nil
 }
 
-// adjustOperatorKeys runs the same key adjustments as adjustTraceKeys, but on
-// the operator's own fields. The operator has a different struct shape than
-// QueryBuilderQuery, so we copy the relevant fields into a temp query, run
-// the shared helpers, and copy the results back.
-func (b *traceOperatorCTEBuilder) adjustOperatorKeys(ctx context.Context, keys map[string][]*telemetrytypes.TelemetryFieldKey, requestType qbtypes.RequestType) {
-	mergeDeprecatedTraceKeys(keys)
-
-	tmp := qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
-		Aggregations: b.operator.Aggregations,
-		SelectFields: b.operator.SelectFields,
-		GroupBy:      b.operator.GroupBy,
-		Order:        b.operator.Order,
-	}
-
-	actions := querybuilder.AdjustKeysForAliasExpressions(&tmp, requestType)
-	actions = append(actions, querybuilder.AdjustDuplicateKeys(&tmp)...)
-
-	for idx := range tmp.SelectFields {
-		actions = append(actions, adjustTraceKey(&tmp.SelectFields[idx], keys)...)
-	}
-	for idx := range tmp.GroupBy {
-		actions = append(actions, adjustTraceKey(&tmp.GroupBy[idx].TelemetryFieldKey, keys)...)
-	}
-	for idx := range tmp.Order {
-		actions = append(actions, adjustTraceKey(&tmp.Order[idx].Key.TelemetryFieldKey, keys)...)
-	}
-
-	// Copy back the slices the helpers can rewrite.
-	b.operator.Aggregations = tmp.Aggregations
-	b.operator.SelectFields = tmp.SelectFields
-	b.operator.GroupBy = tmp.GroupBy
-	b.operator.Order = tmp.Order
-
-	for _, action := range actions {
-		b.stmtBuilder.logger.InfoContext(ctx, "key adjustment action", slog.String("action", action))
-	}
-}
-
 func (b *traceOperatorCTEBuilder) getKeySelectors() []*telemetrytypes.FieldKeySelector {
 	var keySelectors []*telemetrytypes.FieldKeySelector
 
@@ -581,15 +545,6 @@ func (b *traceOperatorCTEBuilder) getKeySelectors() []*telemetrytypes.FieldKeySe
 		})
 	}
 
-	for _, sf := range b.operator.SelectFields {
-		keySelectors = append(keySelectors, &telemetrytypes.FieldKeySelector{
-			Name:          sf.Name,
-			Signal:        telemetrytypes.SignalTraces,
-			FieldContext:  sf.FieldContext,
-			FieldDataType: sf.FieldDataType,
-		})
-	}
-
 	for i := range keySelectors {
 		keySelectors[i].Signal = telemetrytypes.SignalTraces
 	}
@@ -597,7 +552,7 @@ func (b *traceOperatorCTEBuilder) getKeySelectors() []*telemetrytypes.FieldKeySe
 	return keySelectors
 }
 
-func (b *traceOperatorCTEBuilder) buildTimeSeriesQuery(ctx context.Context, selectFromCTE string, keys map[string][]*telemetrytypes.TelemetryFieldKey) (*qbtypes.Statement, error) {
+func (b *traceOperatorCTEBuilder) buildTimeSeriesQuery(ctx context.Context, selectFromCTE string) (*qbtypes.Statement, error) {
 	sb := sqlbuilder.NewSelectBuilder()
 
 	sb.Select(fmt.Sprintf(
@@ -605,6 +560,12 @@ func (b *traceOperatorCTEBuilder) buildTimeSeriesQuery(ctx context.Context, sele
 		int64(b.operator.StepInterval.Seconds()),
 	))
 
+	keySelectors := b.getKeySelectors()
+	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
+	if err != nil {
+		return nil, err
+	}
+
 	var allGroupByArgs []any
 
 	for _, gb := range b.operator.GroupBy {
@@ -683,7 +644,8 @@ func (b *traceOperatorCTEBuilder) buildTimeSeriesQuery(ctx context.Context, sele
 	combinedArgs := append(allGroupByArgs, allAggChArgs...)
 
 	// Add HAVING clause if specified
-	if err := b.addHavingClause(sb); err != nil {
+	err = b.addHavingClause(sb)
+	if err != nil {
 		return nil, err
 	}
 
@@ -710,11 +672,17 @@ func (b *traceOperatorCTEBuilder) buildTraceSummaryCTE(selectFromCTE string) {
 	b.addCTE("trace_summary", sql, args, []string{"all_spans", selectFromCTE})
 }
 
-func (b *traceOperatorCTEBuilder) buildTraceQuery(ctx context.Context, selectFromCTE string, keys map[string][]*telemetrytypes.TelemetryFieldKey) (*qbtypes.Statement, error) {
+func (b *traceOperatorCTEBuilder) buildTraceQuery(ctx context.Context, selectFromCTE string) (*qbtypes.Statement, error) {
 	b.buildTraceSummaryCTE(selectFromCTE)
 
 	sb := sqlbuilder.NewSelectBuilder()
 
+	keySelectors := b.getKeySelectors()
+	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
+	if err != nil {
+		return nil, err
+	}
+
 	var allGroupByArgs []any
 
 	for _, gb := range b.operator.GroupBy {
@@ -796,7 +764,8 @@ func (b *traceOperatorCTEBuilder) buildTraceQuery(ctx context.Context, selectFro
 		sb.GroupBy(groupByKeys...)
 	}
 
-	if err := b.addHavingClause(sb); err != nil {
+	err = b.addHavingClause(sb)
+	if err != nil {
 		return nil, err
 	}
 
@@ -852,9 +821,15 @@ func (b *traceOperatorCTEBuilder) buildTraceQuery(ctx context.Context, selectFro
 	}, nil
 }
 
-func (b *traceOperatorCTEBuilder) buildScalarQuery(ctx context.Context, selectFromCTE string, keys map[string][]*telemetrytypes.TelemetryFieldKey) (*qbtypes.Statement, error) {
+func (b *traceOperatorCTEBuilder) buildScalarQuery(ctx context.Context, selectFromCTE string) (*qbtypes.Statement, error) {
 	sb := sqlbuilder.NewSelectBuilder()
 
+	keySelectors := b.getKeySelectors()
+	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
+	if err != nil {
+		return nil, err
+	}
+
 	var allGroupByArgs []any
 
 	for _, gb := range b.operator.GroupBy {
@@ -936,7 +911,8 @@ func (b *traceOperatorCTEBuilder) buildScalarQuery(ctx context.Context, selectFr
 	combinedArgs := append(allGroupByArgs, allAggChArgs...)
 
 	// Add HAVING clause if specified
-	if err := b.addHavingClause(sb); err != nil {
+	err = b.addHavingClause(sb)
+	if err != nil {
 		return nil, err
 	}
 

pkg/telemetrytraces/trace_operator_cte_builder_test.go

@@ -14,24 +14,6 @@ import (
 	"github.com/stretchr/testify/require"
 )
 
-func newTestTraceOperatorStatementBuilder(t *testing.T) *traceOperatorStatementBuilder {
-	t.Helper()
-	fm := NewFieldMapper()
-	cb := NewConditionBuilder(fm)
-	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
-	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
-	fl := flaggertest.New(t)
-	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
-	traceStmtBuilder := NewTraceQueryStatementBuilder(
-		instrumentationtest.New().ToProviderSettings(),
-		mockMetadataStore, fm, cb, aggExprRewriter, nil, fl,
-	)
-	return NewTraceOperatorStatementBuilder(
-		instrumentationtest.New().ToProviderSettings(),
-		mockMetadataStore, fm, cb, traceStmtBuilder, aggExprRewriter, fl,
-	)
-}
-
 func TestTraceOperatorStatementBuilder(t *testing.T) {
 	cases := []struct {
 		name           string
@@ -481,7 +463,32 @@ func TestTraceOperatorStatementBuilder(t *testing.T) {
 		},
 	}
 
-	statementBuilder := newTestTraceOperatorStatementBuilder(t)
+	fm := NewFieldMapper()
+	cb := NewConditionBuilder(fm)
+	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
+	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
+	fl := flaggertest.New(t)
+	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
+
+	traceStmtBuilder := NewTraceQueryStatementBuilder(
+		instrumentationtest.New().ToProviderSettings(),
+		mockMetadataStore,
+		fm,
+		cb,
+		aggExprRewriter,
+		nil,
+		fl,
+	)
+
+	statementBuilder := NewTraceOperatorStatementBuilder(
+		instrumentationtest.New().ToProviderSettings(),
+		mockMetadataStore,
+		fm,
+		cb,
+		traceStmtBuilder,
+		aggExprRewriter,
+		fl,
+	)
 
 	for _, c := range cases {
 		t.Run(c.name, func(t *testing.T) {
@@ -572,7 +579,32 @@ func TestTraceOperatorStatementBuilderErrors(t *testing.T) {
 		},
 	}
 
-	statementBuilder := newTestTraceOperatorStatementBuilder(t)
+	fm := NewFieldMapper()
+	cb := NewConditionBuilder(fm)
+	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
+	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
+	fl := flaggertest.New(t)
+	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
+
+	traceStmtBuilder := NewTraceQueryStatementBuilder(
+		instrumentationtest.New().ToProviderSettings(),
+		mockMetadataStore,
+		fm,
+		cb,
+		aggExprRewriter,
+		nil,
+		fl,
+	)
+
+	statementBuilder := NewTraceOperatorStatementBuilder(
+		instrumentationtest.New().ToProviderSettings(),
+		mockMetadataStore,
+		fm,
+		cb,
+		traceStmtBuilder,
+		aggExprRewriter,
+		fl,
+	)
 
 	for _, c := range cases {
 		t.Run(c.name, func(t *testing.T) {
@@ -594,142 +626,3 @@ func TestTraceOperatorStatementBuilderErrors(t *testing.T) {
 		})
 	}
 }
-
-func TestTraceOperatorStatementBuilderAdjustsKeys(t *testing.T) {
-	cases := []struct {
-		name          string
-		requestType   qbtypes.RequestType
-		operator      qbtypes.QueryBuilderTraceOperator
-		builderFilter string
-		wantSQL       string
-		wantArgs      []any
-	}{
-		{
-			name:        "deprecated duration filter in referenced builder query",
-			requestType: qbtypes.RequestTypeRaw,
-			operator: qbtypes.QueryBuilderTraceOperator{
-				Expression: "A",
-				Limit:      10,
-			},
-			builderFilter: "durationNano = '3s'",
-			wantSQL:       "duration_nano = ?",
-			wantArgs:      []any{int64(3000000000)},
-		},
-		{
-			name:        "context-prefixed aggregation alias in order by",
-			requestType: qbtypes.RequestTypeScalar,
-			operator: qbtypes.QueryBuilderTraceOperator{
-				Expression: "A",
-				Aggregations: []qbtypes.TraceAggregation{
-					{
-						Expression: "count()",
-						Alias:      "span.count_",
-					},
-				},
-				Order: []qbtypes.OrderBy{
-					{
-						Key: qbtypes.OrderByKey{
-							TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-								Name:         "count_",
-								FieldContext: telemetrytypes.FieldContextSpan,
-							},
-						},
-						Direction: qbtypes.OrderDirectionDesc,
-					},
-				},
-			},
-			wantSQL: "ORDER BY __result_0 desc",
-		},
-	}
-
-	statementBuilder := newTestTraceOperatorStatementBuilder(t)
-
-	for _, c := range cases {
-		t.Run(c.name, func(t *testing.T) {
-			err := c.operator.ParseExpression()
-			require.NoError(t, err)
-
-			filter := c.builderFilter
-			if filter == "" {
-				filter = "service.name = 'frontend'"
-			}
-
-			q, err := statementBuilder.Build(
-				context.Background(),
-				1747947419000,
-				1747983448000,
-				c.requestType,
-				c.operator,
-				&qbtypes.CompositeQuery{
-					Queries: []qbtypes.QueryEnvelope{
-						{
-							Type: qbtypes.QueryTypeBuilder,
-							Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
-								Name:   "A",
-								Signal: telemetrytypes.SignalTraces,
-								Filter: &qbtypes.Filter{Expression: filter},
-							},
-						},
-					},
-				},
-			)
-
-			require.NoError(t, err)
-			require.Contains(t, q.Query, c.wantSQL)
-			for _, arg := range c.wantArgs {
-				require.Contains(t, q.Args, arg)
-			}
-		})
-	}
-}
-
-// TestTraceOperatorStatementBuilderDeduplicatesKeys checks that a trace
-// operator with the same field name listed twice in GroupBy (once with a
-// context, once without) ends up with a single column in the outer SELECT
-// and a single entry in GROUP BY.
-func TestTraceOperatorStatementBuilderDeduplicatesKeys(t *testing.T) {
-	statementBuilder := newTestTraceOperatorStatementBuilder(t)
-
-	operator := qbtypes.QueryBuilderTraceOperator{
-		Expression: "A",
-		Aggregations: []qbtypes.TraceAggregation{
-			{Expression: "count()"},
-		},
-		GroupBy: []qbtypes.GroupByKey{
-			{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-				Name:         "http.method",
-				FieldContext: telemetrytypes.FieldContextAttribute,
-			}},
-			// Same name, no context — should be merged with the entry above.
-			{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-				Name: "http.method",
-			}},
-		},
-	}
-	require.NoError(t, operator.ParseExpression())
-
-	q, err := statementBuilder.Build(
-		context.Background(),
-		1747947419000,
-		1747983448000,
-		qbtypes.RequestTypeScalar,
-		operator,
-		&qbtypes.CompositeQuery{
-			Queries: []qbtypes.QueryEnvelope{
-				{
-					Type: qbtypes.QueryTypeBuilder,
-					Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
-						Name:   "A",
-						Signal: telemetrytypes.SignalTraces,
-						Filter: &qbtypes.Filter{Expression: "service.name = 'frontend'"},
-					},
-				},
-			},
-		},
-	)
-
-	require.NoError(t, err)
-
-	require.Contains(t, q.Query,
-		"SELECT toString(multiIf(mapContains(attributes_string, 'http.method') = ?, attributes_string['http.method'], NULL)) AS `http.method`, count() AS __result_0 FROM A GROUP BY `http.method` ORDER BY __result_0 DESC")
-}

pkg/types/spantypes/flamegraph_span.go

@@ -0,0 +1,95 @@
+package spantypes
+
+import (
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+type FlamegraphSpan struct {
+	SpanID       string            `json:"spanId"`
+	ParentSpanID string            `json:"parentSpanId"`
+	Timestamp    uint64            `json:"timestamp"`
+	DurationNano uint64            `json:"durationNano"`
+	HasError     bool              `json:"hasError"`
+	Name         string            `json:"name"`
+	Level        int64             `json:"level"`
+	Events       []Event           `json:"event" required:"true" nullable:"false"`
+	Attributes   map[string]any    `json:"attributes,omitempty"`
+	Resource     map[string]string `json:"resource,omitempty"`
+	Children     []*FlamegraphSpan `json:"-"` // internal tree use only
+}
+
+// FlamegraphLevel groups span IDs at a single level within the selected window.
+type FlamegraphLevel struct {
+	Level   int64
+	SpanIDs []string
+}
+
+type PostableFlamegraph struct {
+	SelectedSpanID string                             `json:"selectedSpanId"`
+	SelectFields   []telemetrytypes.TelemetryFieldKey `json:"selectFields,omitempty"`
+}
+
+// GettableFlamegraphTrace is the response for the v3 flamegraph API.
+type GettableFlamegraphTrace struct {
+	Spans                [][]*FlamegraphSpan `json:"spans" required:"true" nullable:"false"`
+	StartTimestampMillis int64               `json:"startTimestampMillis" required:"true"`
+	EndTimestampMillis   int64               `json:"endTimestampMillis" required:"true"`
+	HasMore              bool                `json:"hasMore" required:"true"`
+}
+
+func NewGettableFlamegraphTrace(spans [][]*FlamegraphSpan, startMs, endMs int64, hasMore bool) *GettableFlamegraphTrace {
+	return &GettableFlamegraphTrace{
+		Spans:                spans,
+		StartTimestampMillis: startMs,
+		EndTimestampMillis:   endMs,
+		HasMore:              hasMore,
+	}
+}
+
+func NewFlamegraphSpanFromStorable(s *StorableSpan, level int64, selectFields []telemetrytypes.TelemetryFieldKey) *FlamegraphSpan {
+	span := &FlamegraphSpan{
+		SpanID:       s.SpanID,
+		ParentSpanID: s.ParentSpanID,
+		Timestamp:    uint64(s.StartTime.UnixNano()),
+		DurationNano: s.DurationNano,
+		HasError:     s.HasError,
+		Name:         s.Name,
+		Level:        level,
+		Events:       s.UnmarshalledEvents(),
+	}
+	if len(selectFields) == 0 {
+		return span
+	}
+	for _, field := range selectFields {
+		switch field.FieldContext {
+		case telemetrytypes.FieldContextResource:
+			if v, ok := s.ResourcesString[field.Name]; ok && v != "" {
+				if span.Resource == nil {
+					span.Resource = make(map[string]string)
+				}
+				span.Resource[field.Name] = v
+			}
+		case telemetrytypes.FieldContextAttribute:
+			if v := s.AttributeValue(field.Name); v != nil {
+				if span.Attributes == nil {
+					span.Attributes = make(map[string]any)
+				}
+				span.Attributes[field.Name] = v
+			}
+		}
+	}
+	return span
+}
+
+// FlamegraphWindowSpanIDs collects all span IDs from a level window into a flat slice.
+func FlamegraphWindowSpanIDs(window []FlamegraphLevel) []string {
+	total := 0
+	for _, lvl := range window {
+		total += len(lvl.SpanIDs)
+	}
+	ids := make([]string, 0, total)
+	for _, lvl := range window {
+		ids = append(ids, lvl.SpanIDs...)
+	}
+	return ids
+}

pkg/types/spantypes/flamegraph_trace.go

@@ -0,0 +1,117 @@
+package spantypes
+
+import (
+	"sort"
+
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+// FlamegraphTrace holds the level wise tree built from minimal spans.
+type FlamegraphTrace struct {
+	roots     []*FlamegraphSpan
+	nodeByID  map[string]*FlamegraphSpan
+	startTime uint64
+	endTime   uint64
+}
+
+func NewFlamegraphTraceFromMinimal(spans []MinimalSpan) *FlamegraphTrace {
+	t := &FlamegraphTrace{
+		nodeByID: make(map[string]*FlamegraphSpan, len(spans)),
+	}
+	for i := range spans {
+		node := spans[i].ToFlamegraphSpan()
+		t.updateTimeRange(node.Timestamp, node.DurationNano)
+		t.nodeByID[node.SpanID] = node
+	}
+	t.buildSpanTree()
+	return t
+}
+
+func NewFlamegraphTraceFromStorable(spans []StorableSpan, selectFields []telemetrytypes.TelemetryFieldKey) *FlamegraphTrace {
+	t := &FlamegraphTrace{
+		nodeByID: make(map[string]*FlamegraphSpan, len(spans)),
+	}
+	for i := range spans {
+		node := NewFlamegraphSpanFromStorable(&spans[i], 0, selectFields) // level is set later by BFS
+		t.updateTimeRange(node.Timestamp, node.DurationNano)
+		t.nodeByID[node.SpanID] = node
+	}
+	t.buildSpanTree()
+	return t
+}
+
+func (t *FlamegraphTrace) GetAllLevels() [][]*FlamegraphSpan {
+	return nil
+}
+
+// GetSelectedLevels returns the window of levels around selectedSpanID with sampling applied to dense levels.
+func (t *FlamegraphTrace) GetSelectedLevels(selectedSpanID string, levelLimit, spansPerLevel, topLatencyCount, bucketCount int) []FlamegraphLevel {
+	return nil
+}
+
+func (t *FlamegraphTrace) EnrichSelectedSpans(selectedSpans []FlamegraphLevel, fullSpans []StorableSpan, selectFields []telemetrytypes.TelemetryFieldKey) [][]*FlamegraphSpan {
+	fullByID := make(map[string]*StorableSpan, len(fullSpans))
+	for i := range fullSpans {
+		fullByID[fullSpans[i].SpanID] = &fullSpans[i]
+	}
+
+	result := make([][]*FlamegraphSpan, len(selectedSpans))
+	for i, lvl := range selectedSpans {
+		result[i] = make([]*FlamegraphSpan, 0, len(lvl.SpanIDs))
+		for _, spanID := range lvl.SpanIDs {
+			if full, ok := fullByID[spanID]; ok {
+				result[i] = append(result[i], NewFlamegraphSpanFromStorable(full, lvl.Level, selectFields))
+			} else if lean, ok := t.nodeByID[spanID]; ok {
+				result[i] = append(result[i], lean)
+			}
+		}
+	}
+	return result
+}
+
+func (t *FlamegraphTrace) updateTimeRange(timestamp, durationNano uint64) {
+	if t.startTime == 0 || timestamp < t.startTime {
+		t.startTime = timestamp
+	}
+	if end := timestamp + durationNano; end > t.endTime {
+		t.endTime = end
+	}
+}
+
+func (t *FlamegraphTrace) buildSpanTree() {
+	for _, node := range t.nodeByID {
+		if node.ParentSpanID != "" {
+			if parent, ok := t.nodeByID[node.ParentSpanID]; ok {
+				parent.Children = append(parent.Children, node)
+			} else {
+				missing := &FlamegraphSpan{
+					SpanID:       node.ParentSpanID,
+					Name:         "Missing Span",
+					Timestamp:    node.Timestamp,
+					DurationNano: node.DurationNano,
+					Children:     []*FlamegraphSpan{node},
+				}
+				t.nodeByID[missing.SpanID] = missing
+				t.roots = append(t.roots, missing)
+			}
+		} else if flamegraphSpanIndex(t.roots, node.SpanID) == -1 {
+			t.roots = append(t.roots, node)
+		}
+	}
+
+	sort.Slice(t.roots, func(i, j int) bool {
+		if t.roots[i].Timestamp == t.roots[j].Timestamp {
+			return t.roots[i].SpanID < t.roots[j].SpanID
+		}
+		return t.roots[i].Timestamp < t.roots[j].Timestamp
+	})
+}
+
+func flamegraphSpanIndex(spans []*FlamegraphSpan, spanID string) int {
+	for i, s := range spans {
+		if s != nil && s.SpanID == spanID {
+			return i
+		}
+	}
+	return -1
+}

pkg/types/spantypes/store.go

@@ -30,6 +30,7 @@ type TraceStore interface {
 	GetTraceSpans(ctx context.Context, traceID string, summary *TraceSummary) ([]StorableSpan, error)
 	GetMinimalSpans(ctx context.Context, traceID string, start, end time.Time) ([]MinimalSpan, error)
 	GetTraceSpansByIDs(ctx context.Context, traceID string, start, end time.Time, spanIDs []string) ([]StorableSpan, error)
+	GetFlamegraphSpans(ctx context.Context, traceID string, start, end time.Time, spanIDs []string) ([]StorableSpan, error)
 
 	GetSpanCountByField(ctx context.Context, traceID string, summary *TraceSummary, fieldKey telemetrytypes.TelemetryFieldKey) (map[string]uint64, error)
 	GetSpanDurationByField(ctx context.Context, traceID string, summary *TraceSummary, fieldKey telemetrytypes.TelemetryFieldKey) (map[string]uint64, error)

pkg/types/spantypes/waterfall_span.go

@@ -164,6 +164,17 @@ func (item *MinimalSpan) ToWaterfallSpan(traceID string) *WaterfallSpan {
 	}
 }
 
+func (item *MinimalSpan) ToFlamegraphSpan() *FlamegraphSpan {
+	return &FlamegraphSpan{
+		SpanID:       item.SpanID,
+		ParentSpanID: item.ParentSpanID,
+		Timestamp:    uint64(item.StartTime.UnixNano()),
+		DurationNano: item.DurationNano,
+		HasError:     item.HasError,
+		Children:     make([]*FlamegraphSpan, 0),
+	}
+}
+
 // NewMissingWaterfallSpan creates a synthetic placeholder span for a parent that has no recorded data.
 func NewMissingWaterfallSpan(spanID, traceID string, timeUnixNano, durationNano uint64) *WaterfallSpan {
 	return &WaterfallSpan{
@@ -267,6 +278,19 @@ func (ws *WaterfallSpan) getPathToSelectedSpanID(selectedSpanID string) ([]strin
 	return nil, false
 }
 
+func (item *StorableSpan) AttributeValue(name string) any {
+	if v, ok := item.AttributesString[name]; ok {
+		return v
+	}
+	if v, ok := item.AttributesNumber[name]; ok {
+		return v
+	}
+	if v, ok := item.AttributesBool[name]; ok {
+		return v
+	}
+	return nil
+}
+
 func (item *StorableSpan) Attributes() map[string]any {
 	attributes := make(map[string]any, len(item.AttributesString)+len(item.AttributesNumber)+len(item.AttributesBool))
 	for k, v := range item.AttributesString {

tests/fixtures/querier.py

@@ -459,57 +459,6 @@ def find_named_result(
     )
 
 
-def assert_scalar_value(
-    response: requests.Response,
-    name: str,
-    expected: Any,
-    *,
-    row: int = 0,
-    col: int = 0,
-) -> None:
-    """Assert that the named scalar result has `expected` at data[row][col]."""
-    result = find_named_result(response.json()["data"]["data"]["results"], name)
-    assert result is not None, f"no result for query {name}"
-    assert result["data"][row][col] == expected, f"expected {expected} at [{row}][{col}], got {result['data'][row][col]}"
-
-
-def assert_grouped_scalar(
-    response: requests.Response,
-    name: str,
-    *,
-    expected_groups: int,
-    expected_columns: int,
-    last_col_value: Any | None = None,
-) -> None:
-    """Assert grouped scalar result has the expected column count and group count.
-    If `last_col_value` is set and there is exactly one group, also assert the
-    last column of that single row equals it (a common aggregation-value check)."""
-    result = find_named_result(response.json()["data"]["data"]["results"], name)
-    assert result is not None, f"no result for query {name}"
-    columns = result["columns"]
-    rows = result["data"]
-    assert len(columns) == expected_columns, f"expected {expected_columns} columns, got {len(columns)}: {columns}"
-    assert len(rows) == expected_groups, f"expected {expected_groups} groups, got {len(rows)}: {rows}"
-    if last_col_value is not None and expected_groups == 1:
-        assert rows[0][-1] == last_col_value, f"expected last col {last_col_value}, got row {rows[0]}"
-
-
-def assert_raw_row_subset(
-    response: requests.Response,
-    name: str,
-    expected: dict[str, Any],
-    *,
-    row: int = 0,
-) -> None:
-    """Assert that the named raw result's rows[row]['data'] is a superset of `expected`."""
-    result = find_named_result(response.json()["data"]["data"]["results"], name)
-    assert result is not None, f"no result for query {name}"
-    rows = result["rows"]
-    assert rows is not None, f"no rows for query {name}"
-    data = rows[row]["data"]
-    assert expected.items() <= data.items(), f"expected subset {expected}, got data {data}"
-
-
 def build_scalar_query(
     name: str,
     signal: str,

tests/integration/tests/querier/15_trace_operator.py

@@ -25,22 +25,13 @@ returnSpansFrom="A"
 from collections.abc import Callable
 from datetime import UTC, datetime, timedelta
 from http import HTTPStatus
-from typing import Any
 
 import pytest
 import requests
 
 from fixtures import types
 from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
-from fixtures.querier import (
-    assert_grouped_scalar,
-    assert_raw_row_subset,
-    assert_scalar_value,
-    format_timestamp,
-    generate_traces_with_corrupt_metadata,
-    get_rows,
-    make_query_request,
-)
+from fixtures.querier import get_rows
 from fixtures.traces import TraceIdGenerator, Traces, TracesKind, TracesStatusCode
 
 
@@ -443,173 +434,3 @@ def test_trace_operator(
     )
     assert response.status_code == HTTPStatus.OK, f"HTTP {response.status_code}: {response.text}"
     assert case["validate"](response), f"validation failed: {response.json()}"
-
-
-def _expected_trace_subset(trace: Traces) -> dict[str, Any]:
-    return {
-        "duration_nano": trace.duration_nano,
-        "name": trace.name,
-        "parent_span_id": trace.parent_span_id,
-        "span_id": trace.span_id,
-        "timestamp": format_timestamp(trace.timestamp),
-        "trace_id": trace.trace_id,
-    }
-
-
-@pytest.mark.parametrize(
-    "payload_factory,request_type,assert_result",
-    [
-        # Case 1: CTE filter uses the deprecated intrinsic field `durationNano`.
-        pytest.param(
-            lambda traces: [
-                {
-                    "type": "builder_query",
-                    "spec": {
-                        "name": "A",
-                        "signal": "traces",
-                        "filter": {"expression": 'durationNano = "3s"'},
-                    },
-                },
-                {
-                    "type": "builder_query",
-                    "spec": {
-                        "name": "B",
-                        "signal": "traces",
-                        "filter": {"expression": 'durationNano = "5s"'},
-                    },
-                },
-                {
-                    "type": "builder_trace_operator",
-                    "spec": {
-                        "name": "C",
-                        "expression": "A => B",
-                        "limit": 1,
-                    },
-                },
-            ],
-            "raw",
-            lambda response, traces: assert_raw_row_subset(response, "C", _expected_trace_subset(traces[0])),
-            id="deprecated-intrinsic-filter",
-        ),
-        # Case 2: CTE filter uses the deprecated calculated field `responseStatusCode`.
-        pytest.param(
-            lambda traces: [
-                {
-                    "type": "builder_query",
-                    "spec": {
-                        "name": "A",
-                        "signal": "traces",
-                        "filter": {"expression": 'responseStatusCode = "200"'},
-                    },
-                },
-                {
-                    "type": "builder_query",
-                    "spec": {
-                        "name": "B",
-                        "signal": "traces",
-                        "filter": {"expression": 'durationNano = "5s"'},
-                    },
-                },
-                {
-                    "type": "builder_trace_operator",
-                    "spec": {
-                        "name": "C",
-                        "expression": "A => B",
-                        "limit": 1,
-                    },
-                },
-            ],
-            "raw",
-            lambda response, traces: assert_raw_row_subset(response, "C", _expected_trace_subset(traces[0])),
-            id="deprecated-calculated-filter",
-        ),
-        # Case 3: order by uses `count_` with fieldContext `span`, which has
-        # to be rewritten to the aggregation alias `span.count_`.
-        pytest.param(
-            lambda traces: [
-                {
-                    "type": "builder_query",
-                    "spec": {
-                        "name": "A",
-                        "signal": "traces",
-                        "aggregations": [{"expression": "count()"}],
-                    },
-                },
-                {
-                    "type": "builder_trace_operator",
-                    "spec": {
-                        "name": "C",
-                        "expression": "A",
-                        "aggregations": [{"expression": "count()", "alias": "span.count_"}],
-                        "order": [{"key": {"name": "count_", "fieldContext": "span"}, "direction": "desc"}],
-                    },
-                },
-            ],
-            "scalar",
-            lambda response, traces: assert_scalar_value(response, "C", len(traces)),
-            id="context-prefixed-aggregation-alias-order",
-        ),
-        # Case 4: group by lists `cloud.provider` twice (once with a resource
-        # context, once without).
-        pytest.param(
-            lambda traces: [
-                {
-                    "type": "builder_query",
-                    "spec": {
-                        "name": "A",
-                        "signal": "traces",
-                        "disabled": True,
-                        "aggregations": [{"expression": "count()"}],
-                    },
-                },
-                {
-                    "type": "builder_trace_operator",
-                    "spec": {
-                        "name": "C",
-                        "expression": "A",
-                        "aggregations": [{"expression": "count()"}],
-                        "groupBy": [
-                            {"name": "cloud.provider", "fieldContext": "resource"},
-                            {"name": "cloud.provider"},
-                        ],
-                    },
-                },
-            ],
-            "scalar",
-            lambda response, traces: assert_grouped_scalar(response, "C", expected_groups=1, expected_columns=2, last_col_value=len(traces)),
-            id="duplicate-group-by-deduplicated",
-        ),
-    ],
-)
-def test_trace_operator_with_adjusted_keys(
-    signoz: types.SigNoz,
-    create_user_admin: None,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-    insert_traces: Callable[[list[Traces]], None],
-    payload_factory: Callable[[list[Traces]], list[dict[str, Any]]],
-    request_type: str,
-    assert_result: Callable[[requests.Response, list[Traces]], None],
-) -> None:
-    """
-    Trace operators build a CTE per referenced builder query and an outer
-    query on top. Both layers need the same key adjustment as regular trace
-    queries, otherwise deprecated keys and context-prefixed aliases don't
-    resolve.
-    """
-    traces = generate_traces_with_corrupt_metadata()
-    insert_traces(traces)
-    payload = payload_factory(traces)
-
-    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    response = make_query_request(
-        signoz,
-        token,
-        start_ms=int((datetime.now(tz=UTC) - timedelta(minutes=5)).timestamp() * 1000),
-        end_ms=int(datetime.now(tz=UTC).timestamp() * 1000),
-        request_type=request_type,
-        queries=payload,
-    )
-
-    assert response.status_code == HTTPStatus.OK, response.text
-    assert_result(response, traces)