fix(dashboard-v2): keep new-panel Save enabled after running the query (#12311)

* fix(dashboard-v2): keep new-panel Save enabled after running the query

A new panel's Save button re-disabled after Stage & Run: the query-dirty
baseline was derived from the live draft.spec.queries, which the run commits
the current query into, so the baseline drifted onto the just-run query and
isQueryDirty flipped back to false. Freeze the seed used for the new-panel
baseline so a run can't reset it. Existing panels are unaffected (they anchor
to savedQueries).

* fix(dashboard-v2): always allow Save and surface the real save-failure message

Two follow-ups to the new-panel Save regression:

- Decouple the Save button from the dirty check so it is never disabled on
  account of "no changes"; Save is gated only by read-only / in-flight. The
  dirty flag still drives the discard-on-close confirmation.
- On a failed save, show the server's error message in the toast description
  instead of only the generic "Failed to save panel".

* feat(dashboard-v2): show the "Unsaved Changes" badge only when the panel is dirty

Gate the panel-editor header badge on isDirty so it appears only when there
are unsaved edits, and import Badge from the @signozhq/ui/badge subpath.

* chore: replaced toast with the error modal

* fix: dashboard delete calling v1 api

frontend/src/api/ErrorResponseHandlerForGeneratedAPIs.ts

@@ -2,6 +2,29 @@ import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import APIError from 'types/api/error';
 
+// The wire shape these handlers can actually rely on. The generated
+// RenderErrorResponseDTO marks code/message/url/errors as required, but the
+// server omits any of them even on valid errors (e.g. a 400 with just a
+// message), so a present `error` object is all the guard can guarantee.
+type ErrorEnvelope = {
+	error: {
+		code?: string;
+		message?: string;
+		url?: string;
+		errors?: { message?: string }[];
+	};
+};
+
+function isErrorEnvelope(data: unknown): data is ErrorEnvelope {
+	return (
+		typeof data === 'object' &&
+		data !== null &&
+		'error' in data &&
+		typeof (data as ErrorEnvelope).error === 'object' &&
+		(data as ErrorEnvelope).error !== null
+	);
+}
+
 // @deprecated Use convertToApiError instead
 export function ErrorResponseHandlerForGeneratedAPIs(
 	error: AxiosError<RenderErrorResponseDTO>,
@@ -10,15 +33,29 @@ export function ErrorResponseHandlerForGeneratedAPIs(
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
+		// The body isn't guaranteed to be an error envelope — e.g. a gateway 5xx
+		// with an HTML/empty body during a deploy. Verify the shape before reading
+		// it; otherwise synthesize a consistent error from the status.
+		const data: unknown = response.data;
+		if (isErrorEnvelope(data)) {
+			const { code, message, url, errors } = data.error;
+			throw new APIError({
+				httpStatusCode: response.status || 500,
+				error: {
+					code: code ?? '',
+					message: message ?? '',
+					url: url ?? '',
+					errors: (errors ?? []).map((e) => ({ message: e.message ?? '' })),
+				},
+			});
+		}
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: response.data.error.code,
-				message: response.data.error.message,
-				url: response.data.error.url ?? '',
-				errors: (response.data.error.errors ?? []).map((e) => ({
-					message: e.message ?? '',
-				})),
+				code: 'UPSTREAM_UNAVAILABLE',
+				message: error.message || 'Something went wrong',
+				url: '',
+				errors: [],
 			},
 		});
 	}
@@ -62,9 +99,7 @@ export function convertToApiError(
 	return new APIError({
 		httpStatusCode: response?.status || error.status || 500,
 		error: {
-			code:
-				errorData?.code ||
-				String(response?.status || error.code || 'unknown_error'),
+			code: errorData?.code || 'UPSTREAM_UNAVAILABLE',
 			message:
 				errorData?.message ||
 				response?.statusText ||

frontend/src/api/ErrorResponseHandlerV2.ts

@@ -2,19 +2,38 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
 
+function isErrorV2Resp(data: unknown): data is ErrorV2Resp {
+	return (
+		typeof data === 'object' &&
+		data !== null &&
+		'error' in data &&
+		typeof (data as ErrorV2Resp).error?.code === 'string'
+	);
+}
+
 // reference - https://axios-http.com/docs/handling_errors
 export function ErrorResponseHandlerV2(error: AxiosError<ErrorV2Resp>): never {
 	const { response, request } = error;
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
+		// response.data isn't guaranteed to be a V2 envelope (e.g. a gateway 5xx
+		// with an HTML/empty body during a deploy), so verify the shape first.
+		const data: unknown = response.data;
+		if (isErrorV2Resp(data)) {
+			const { code, message, url, errors } = data.error;
+			throw new APIError({
+				httpStatusCode: response.status || 500,
+				error: { code, message, url, errors },
+			});
+		}
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: response.data.error.code,
-				message: response.data.error.message,
-				url: response.data.error.url,
-				errors: response.data.error.errors,
+				code: 'UPSTREAM_UNAVAILABLE',
+				message: error.message || 'Something went wrong',
+				url: '',
+				errors: [],
 			},
 		});
 	}

frontend/src/api/__tests__/ErrorResponseHandlerV2.test.ts

@@ -0,0 +1,126 @@
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp } from 'types/api';
+import APIError from 'types/api/error';
+
+function asAxiosError(partial: Partial<AxiosError>): AxiosError<ErrorV2Resp> {
+	return partial as AxiosError<ErrorV2Resp>;
+}
+
+// ErrorResponseHandlerV2 always throws — capture the APIError so assertions stay
+// unconditional.
+function runHandler(error: AxiosError<ErrorV2Resp>): APIError {
+	try {
+		ErrorResponseHandlerV2(error);
+	} catch (thrown) {
+		return thrown as APIError;
+	}
+	throw new Error('expected ErrorResponseHandlerV2 to throw');
+}
+
+type ExpectedError = {
+	httpStatusCode: number;
+	code: string;
+	message: string;
+	errors: { message: string }[];
+};
+
+// One row per response shape the handler must normalize. New shapes (with
+// different bodies) can be added here without a new test block.
+const cases: {
+	name: string;
+	error: AxiosError<ErrorV2Resp>;
+	expected: ExpectedError;
+}[] = [
+	{
+		name: 'well-formed V2 error envelope',
+		error: asAxiosError({
+			message: 'Request failed with status code 400',
+			response: {
+				status: 400,
+				data: {
+					error: {
+						code: 'bad_request',
+						message: 'Invalid dashboard payload',
+						url: 'https://signoz.io/docs',
+						errors: [{ message: 'name is required' }, { message: 'name too long' }],
+					},
+				},
+			} as AxiosError['response'],
+		}),
+		expected: {
+			httpStatusCode: 400,
+			code: 'bad_request',
+			message: 'Invalid dashboard payload',
+			errors: [{ message: 'name is required' }, { message: 'name too long' }],
+		},
+	},
+	{
+		// Regression: during a deployment the gateway returns a 5xx with a
+		// non-envelope body. Reading response.data.error.code used to throw a
+		// TypeError from inside the handler itself. See engineering-pod#5760.
+		name: '5xx with a non-envelope HTML body',
+		error: asAxiosError({
+			message: 'Request failed with status code 503',
+			response: {
+				status: 503,
+				data: '<html><body>503 Service Temporarily Unavailable</body></html>',
+			} as AxiosError['response'],
+		}),
+		expected: {
+			httpStatusCode: 503,
+			code: 'UPSTREAM_UNAVAILABLE',
+			message: 'Request failed with status code 503',
+			errors: [],
+		},
+	},
+	{
+		name: '5xx with an empty body',
+		error: asAxiosError({
+			message: 'Request failed with status code 502',
+			response: {
+				status: 502,
+				data: undefined,
+			} as AxiosError['response'],
+		}),
+		expected: {
+			httpStatusCode: 502,
+			code: 'UPSTREAM_UNAVAILABLE',
+			message: 'Request failed with status code 502',
+			errors: [],
+		},
+	},
+	{
+		name: 'no response received (network error)',
+		error: asAxiosError({
+			message: 'Network Error',
+			code: 'ERR_NETWORK',
+			name: 'AxiosError',
+			request: {},
+		}),
+		expected: {
+			httpStatusCode: 500,
+			code: 'ERR_NETWORK',
+			message: 'Network Error',
+			errors: [],
+		},
+	},
+];
+
+describe('ErrorResponseHandlerV2', () => {
+	it.each(cases)(
+		'normalizes $name into a consistent APIError',
+		({ error, expected }) => {
+			const apiError = runHandler(error);
+
+			expect(apiError).toBeInstanceOf(APIError);
+			expect(apiError.getHttpStatusCode()).toBe(expected.httpStatusCode);
+			expect(apiError.getErrorCode()).toBe(expected.code);
+			expect(apiError.getErrorMessage()).toBe(expected.message);
+			// The sub-error messages feed several parts of the UI, so assert them.
+			expect(apiError.getErrorDetails().error.errors).toStrictEqual(
+				expected.errors,
+			);
+		},
+	);
+});

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -8,7 +8,6 @@ import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import {
 	FieldContext,
-	FieldDataType,
 	SignalType,
 	TelemetryFieldKey,
 } from 'types/api/v5/queryRange';
@@ -55,7 +54,7 @@ function OtherFields({
 				key: buildCompositeKey(attr.name, attr.fieldContext as string),
 				signal: attr.signal as SignalType,
 				fieldContext: attr.fieldContext as FieldContext,
-				fieldDataType: attr.fieldDataType as FieldDataType,
+				fieldDataType: attr.fieldDataType,
 			}),
 		);
 		const addedIds = new Set(

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -25,12 +25,12 @@ import CodeMirror, {
 } from '@uiw/react-codemirror';
 import { Button, Popover, Tooltip } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
 import { QueryBuilderKeys } from 'constants/queryBuilder';
 import { tracesAggregateOperatorOptions } from 'constants/queryBuilderOperators';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Info, TriangleAlert } from '@signozhq/icons';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { FieldDataType } from 'types/api/v5/queryRange';
 import { TracesAggregatorOperator } from 'types/common/queryBuilder';
 
 import { useQueryBuilderV2Context } from '../../QueryBuilderV2Context';
@@ -323,16 +323,16 @@ function QueryAggregationSelect({
 				TracesAggregatorOperator.RATE,
 			];
 
-			const fieldDataType =
+			const fieldDataType: FieldDataType | undefined =
 				functionContextForFetch &&
 				operatorsWithoutDataType.includes(functionContextForFetch)
 					? undefined
-					: QUERY_BUILDER_KEY_TYPES.NUMBER;
+					: 'number';
 
 			return getKeySuggestions({
 				signal: queryData.dataSource,
 				searchText: '',
-				fieldDataType: fieldDataType as QUERY_BUILDER_KEY_TYPES,
+				fieldDataType,
 			});
 		},
 		{

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

@@ -6,7 +6,7 @@ import { Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useGetMetricAlerts,
-	useGetMetricDashboards,
+	useGetMetricDashboardsV2,
 } from 'api/generated/services/metrics';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -38,7 +38,7 @@ function DashboardsAndAlertsPopover({
 		data: dashboardsData,
 		isLoading: isLoadingDashboards,
 		isError: isErrorDashboards,
-	} = useGetMetricDashboards(
+	} = useGetMetricDashboardsV2(
 		{
 			metricName,
 		},
@@ -55,7 +55,8 @@ function DashboardsAndAlertsPopover({
 
 	const dashboards = useMemo(() => {
 		const currentDashboards = dashboardsData?.data.dashboards ?? [];
-		// Remove duplicate dashboards
+		// The API returns one entry per referencing panel, so a dashboard repeats
+		// once per panel that uses the metric.
 		return currentDashboards.filter(
 			(dashboard, index, self) =>
 				index === self.findIndex((t) => t.dashboardId === dashboard.dashboardId),

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/DashboardsAndAlertsPopover.test.tsx

@@ -23,7 +23,7 @@ const useGetMetricAlertsMock = jest.spyOn(
 );
 const useGetMetricDashboardsMock = jest.spyOn(
 	metricsExplorerHooks,
-	'useGetMetricDashboards',
+	'useGetMetricDashboardsV2',
 );
 
 describe('DashboardsAndAlertsPopover', () => {
@@ -153,11 +153,15 @@ describe('DashboardsAndAlertsPopover', () => {
 		);
 	});
 
-	it('renders unique dashboards even when there are duplicates', async () => {
+	it('collapses multiple panels of the same dashboard into one entry', async () => {
 		useGetMetricDashboardsMock.mockReturnValue(
 			getMockDashboardsData({
 				data: {
-					dashboards: [MOCK_DASHBOARD_1, MOCK_DASHBOARD_2, MOCK_DASHBOARD_1],
+					dashboards: [
+						MOCK_DASHBOARD_1,
+						MOCK_DASHBOARD_2,
+						{ ...MOCK_DASHBOARD_1, panelId: '3', panelName: 'Panel 3' },
+					],
 				},
 			}),
 		);

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/testUtlls.ts

@@ -2,7 +2,7 @@ import * as metricsExplorerHooks from 'api/generated/services/metrics';
 import {
 	GetMetricAlerts200,
 	GetMetricAttributes200,
-	GetMetricDashboards200,
+	GetMetricDashboardsV2200,
 	GetMetricHighlights200,
 	GetMetricMetadata200,
 	MetrictypesTemporalityDTO,
@@ -40,14 +40,14 @@ export function getMockMetricHighlightsData(
 export const MOCK_DASHBOARD_1 = {
 	dashboardName: 'Dashboard 1',
 	dashboardId: '1',
-	widgetId: '1',
-	widgetName: 'Widget 1',
+	panelId: '1',
+	panelName: 'Panel 1',
 };
 export const MOCK_DASHBOARD_2 = {
 	dashboardName: 'Dashboard 2',
 	dashboardId: '2',
-	widgetId: '2',
-	widgetName: 'Widget 2',
+	panelId: '2',
+	panelName: 'Panel 2',
 };
 export const MOCK_ALERT_1 = {
 	alertName: 'Alert 1',
@@ -59,7 +59,7 @@ export const MOCK_ALERT_2 = {
 };
 
 export function getMockDashboardsData(
-	overrides?: Partial<GetMetricDashboards200>,
+	overrides?: Partial<GetMetricDashboardsV2200>,
 	{
 		isLoading = false,
 		isError = false,
@@ -67,7 +67,7 @@ export function getMockDashboardsData(
 		isLoading?: boolean;
 		isError?: boolean;
 	} = {},
-): ReturnType<typeof metricsExplorerHooks.useGetMetricDashboards> {
+): ReturnType<typeof metricsExplorerHooks.useGetMetricDashboardsV2> {
 	return {
 		data: {
 			data: {
@@ -79,7 +79,7 @@ export function getMockDashboardsData(
 
 		isLoading,
 		isError,
-	} as ReturnType<typeof metricsExplorerHooks.useGetMetricDashboards>;
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricDashboardsV2>;
 }
 
 export function getMockAlertsData(

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -113,7 +113,7 @@ const useOptionsMenu = ({
 					(suggestion) => ({
 						name: suggestion.name,
 						signal: suggestion.signal as SignalType,
-						fieldDataType: suggestion.fieldDataType as FieldDataType,
+						fieldDataType: suggestion.fieldDataType,
 						fieldContext: suggestion.fieldContext as FieldContext,
 					}),
 				);
@@ -192,7 +192,7 @@ const useOptionsMenu = ({
 				name: e.name,
 				signal: e.signal as SignalType,
 				fieldContext: e.fieldContext as FieldContext,
-				fieldDataType: e.fieldDataType as FieldDataType,
+				fieldDataType: e.fieldDataType,
 			}));
 		}
 		if (dataSource === DataSource.TRACES) {

frontend/src/container/QueryTable/Drilldown/BreakoutOptions.tsx

@@ -4,11 +4,11 @@ import { Input } from '@signozhq/ui/input';
 import { Skeleton } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
 import useDebounce from 'hooks/useDebounce';
 import { ContextMenu } from 'periscope/components/ContextMenu';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { MetricAggregation } from 'types/api/v5/queryRange';
+import { fieldDataTypeToDataType } from 'utils/fieldDataType';
 
 import { BreakoutOptionsProps } from './contextConfig';
 import { BreakoutAttributeType } from './types';
@@ -80,7 +80,7 @@ function BreakoutOptions({
 			keyArray.forEach((keyData) => {
 				transformedOptions.push({
 					key: keyData.name,
-					dataType: keyData.fieldDataType as QUERY_BUILDER_KEY_TYPES,
+					dataType: fieldDataTypeToDataType(keyData.fieldDataType),
 					type: '',
 				});
 			});

frontend/src/container/QueryTable/Drilldown/__tests__/Breakout.test.tsx

@@ -238,6 +238,10 @@ describe('TableDrilldown Breakout Functionality', () => {
 		expect(aggregateQueryData.groupBy).toHaveLength(1);
 		expect(aggregateQueryData.groupBy[0].key).toBe('deployment.environment');
 
+		// The picked field's type travels with it — dropping it leaves the breakout query
+		// untyped, so a drilldown on its result can't tell a number from a string.
+		expect(aggregateQueryData.groupBy[0].dataType).toBe('string');
+
 		// Verify that orderBy has been cleared (as per getBreakoutQuery logic)
 		expect(aggregateQueryData.orderBy).toStrictEqual([]);
 

frontend/src/container/QueryTable/Drilldown/tableDrilldownUtils.tsx

@@ -1,6 +1,5 @@
 import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
 import cloneDeep from 'lodash-es/cloneDeep';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { addFilterToSelectedQuery, FilterData } from './drilldownUtils';
@@ -89,7 +88,11 @@ export const getBreakoutQuery = (
 		.filter((item: IBuilderQuery) => item.queryName === aggregateData.queryName)
 		.map((item: IBuilderQuery) => ({
 			...item,
-			groupBy: [{ key: groupBy.key, type: groupBy.type } as BaseAutocompleteData],
+			// The picked field's type travels with it: dropped, the breakout query goes out
+			// untyped and a drilldown on its result can't tell a number from a string.
+			groupBy: [
+				{ key: groupBy.key, dataType: groupBy.dataType, type: groupBy.type },
+			],
 			orderBy: [],
 			legend: item.legend && groupBy.key ? `{{${groupBy.key}}}` : '',
 		}));

frontend/src/container/QueryTable/Drilldown/types.ts

@@ -1,6 +1,8 @@
 import { ReactNode } from 'react';
-import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 export type ContextMenuItem = ReactNode;
@@ -31,7 +33,8 @@ export interface AggregateContextMenuConfig {
 
 export interface BreakoutAttributeType {
 	key: string;
-	dataType: QUERY_BUILDER_KEY_TYPES;
+	/** The picked field's type, in the vocabulary the group-by it becomes is read with. */
+	dataType: DataTypes;
 	type: string;
 }
 

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

@@ -11,3 +11,9 @@
 	border: 1px solid var(--l3-border) !important;
 	box-shadow: none !important;
 }
+
+/* Highlights the dashboard name inside the delete-confirm title. */
+.deleteName {
+	color: var(--danger-background);
+	font-weight: var(--font-weight-medium);
+}

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

@@ -27,16 +27,13 @@ import logEvent from 'api/common/logEvent';
 import { cloneDashboardV2 } from 'api/generated/services/dashboard';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
-import { useDeleteDashboard } from 'hooks/dashboard/useDeleteDashboard';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import history from 'lib/history';
 import { DashboardDetailEvents } from 'pages/DashboardPageV2/constants/events';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 import { USER_ROLES } from 'types/roles';
 
-import ConfirmDeleteDialog from '../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
 import DisabledControlTooltip from '../../components/DisabledControlTooltip/DisabledControlTooltip';
 import DisabledMenuItemLabel from '../../components/DisabledMenuItemLabel/DisabledMenuItemLabel';
 import DashboardSettings from '../../DashboardSettings';
@@ -45,6 +42,7 @@ import SectionTitleModal from '../../PanelsAndSectionsLayout/Section/SectionTitl
 import JsonEditorDrawer from '../JsonEditorDrawer/JsonEditorDrawer';
 import SettingsDrawer from '../SettingsDrawer';
 import styles from './DashboardActions.module.scss';
+import { useDeleteDashboardAction } from './useDeleteDashboardAction';
 import { DASHBOARD_LOCKED_REASON } from '../../hooks/useDashboardEditGuard';
 import { useDashboardStore } from '../../store/useDashboardStore';
 
@@ -84,8 +82,12 @@ function DashboardActions({
 	const [isCloning, setIsCloning] = useState<boolean>(false);
 	const [isNewSectionOpen, setIsNewSectionOpen] = useState<boolean>(false);
 
-	const [isDeleteOpen, setIsDeleteOpen] = useState<boolean>(false);
-	const deleteDashboardMutation = useDeleteDashboard(dashboard.id);
+	const { contextHolder: deleteConfirmHolder, confirmDeleteDashboard } =
+		useDeleteDashboardAction({
+			dashboardId: dashboard.id,
+			dashboardName: title,
+			panelCount: Object.keys(dashboard.spec.panels).length,
+		});
 
 	// Open the settings drawer when something in the tree requests it (e.g. the
 	// variables bar's "Add variable" button).
@@ -132,19 +134,6 @@ function DashboardActions({
 		}
 	}, [dashboard.id, title, safeNavigate, showErrorModal]);
 
-	const handleConfirmDelete = useCallback((): void => {
-		deleteDashboardMutation.mutate(undefined, {
-			onSuccess: () => {
-				void logEvent(DashboardDetailEvents.Deleted, {
-					dashboardId: dashboard.id,
-					panelCount: Object.keys(dashboard.spec.panels).length,
-				});
-				setIsDeleteOpen(false);
-				history.replace(ROUTES.ALL_DASHBOARD);
-			},
-		});
-	}, [deleteDashboardMutation, dashboard.id, dashboard.spec.panels]);
-
 	const handleOpenSettings = useCallback((): void => {
 		void logEvent(DashboardDetailEvents.SettingsOpened, {
 			dashboardId: dashboard.id,
@@ -248,7 +237,7 @@ function DashboardActions({
 					icon: <Trash2 size={14} />,
 					danger: true,
 					disabled: isLocked,
-					onClick: (): void => setIsDeleteOpen(true),
+					onClick: confirmDeleteDashboard,
 				},
 			);
 		}
@@ -266,6 +255,7 @@ function DashboardActions({
 		handleClone,
 		onLockToggle,
 		handleEnterFullScreen,
+		confirmDeleteDashboard,
 	]);
 
 	return (
@@ -348,14 +338,7 @@ function DashboardActions({
 				isOpen={isJsonEditorOpen}
 				onClose={(): void => setIsJsonEditorOpen(false)}
 			/>
-			<ConfirmDeleteDialog
-				open={isDeleteOpen}
-				title={`Delete dashboard"?`}
-				description={`Are you sure you want to delete this dashboard - "${title}"? This action cannot be undone.`}
-				isLoading={deleteDashboardMutation.isLoading}
-				onConfirm={handleConfirmDelete}
-				onClose={(): void => setIsDeleteOpen(false)}
-			/>
+			{deleteConfirmHolder}
 			<SectionTitleModal
 				open={isNewSectionOpen}
 				heading="New section"

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

@@ -0,0 +1,89 @@
+import { type ReactNode, useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { toast } from '@signozhq/ui/sonner';
+import { Typography } from '@signozhq/ui/typography';
+import logEvent from 'api/common/logEvent';
+import {
+	invalidateListDashboardsForUserV2,
+	useDeleteDashboardV2,
+} from 'api/generated/services/dashboard';
+import { useDeleteConfirm } from 'components/DeleteConfirmModal/useDeleteConfirm';
+import ROUTES from 'constants/routes';
+import { useDashboardPreferencesStore } from 'hooks/dashboard/useDashboardPreference';
+import history from 'lib/history';
+import { DashboardDetailEvents } from 'pages/DashboardPageV2/constants/events';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import styles from './DashboardActions.module.scss';
+
+interface UseDeleteDashboardActionArgs {
+	dashboardId: string;
+	dashboardName: string;
+	panelCount: number;
+}
+
+interface UseDeleteDashboardAction {
+	/** Must be rendered in the calling component for the modal to appear. */
+	contextHolder: ReactNode;
+	confirmDeleteDashboard: () => void;
+}
+
+/**
+ * Deletes the open dashboard through the v2 endpoint behind the shared
+ * destructive confirmation, then drops its local preferences, refreshes the
+ * dashboard list cache and sends the user back to the list.
+ */
+export function useDeleteDashboardAction({
+	dashboardId,
+	dashboardName,
+	panelCount,
+}: UseDeleteDashboardActionArgs): UseDeleteDashboardAction {
+	const queryClient = useQueryClient();
+	const { showErrorModal } = useErrorModal();
+	const { contextHolder, confirmDelete } = useDeleteConfirm();
+	const removePreferences = useDashboardPreferencesStore(
+		(state) => state.removePreferences,
+	);
+
+	const { mutate: deleteDashboard } = useDeleteDashboardV2({
+		mutation: {
+			onSuccess: async (): Promise<void> => {
+				void logEvent(DashboardDetailEvents.Deleted, { dashboardId, panelCount });
+				removePreferences(dashboardId);
+				await invalidateListDashboardsForUserV2(queryClient);
+				toast.success('Dashboard deleted successfully');
+				history.replace(ROUTES.ALL_DASHBOARD);
+			},
+			onError: (error: unknown): void => {
+				showErrorModal(error as APIError);
+			},
+		},
+	});
+
+	const confirmDeleteDashboard = useCallback((): void => {
+		confirmDelete({
+			title: (
+				<Typography.Title level={5}>
+					Are you sure you want to delete the
+					<Typography.Text className={styles.deleteName}>
+						{' '}
+						{dashboardName}{' '}
+					</Typography.Text>
+					dashboard?
+				</Typography.Title>
+			),
+			content: 'This action cannot be undone.',
+			// Keeps the Delete button loading until the mutation settles, then closes.
+			onConfirm: () =>
+				new Promise<void>((resolve) => {
+					deleteDashboard(
+						{ pathParams: { id: dashboardId } },
+						{ onSettled: () => resolve() },
+					);
+				}),
+		});
+	}, [confirmDelete, dashboardName, deleteDashboard, dashboardId]);
+
+	return { contextHolder, confirmDeleteDashboard };
+}

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

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { SolidAlertTriangle, X } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { Divider } from '@signozhq/ui/divider';
@@ -13,6 +14,7 @@ import DisabledControlTooltip from '../../components/DisabledControlTooltip/Disa
 import styles from './Header.module.scss';
 
 interface HeaderProps {
+	/** Unsaved edits exist — shows the "Unsaved Changes" badge and gates the discard confirmation on close (not the Save button). */
 	isDirty: boolean;
 	isSaving: boolean;
 	showSwitchToView?: boolean;
@@ -66,6 +68,11 @@ function Header({
 				/>
 				<Divider type="vertical" />
 				<Typography.Text>Configure panel</Typography.Text>
+				{isDirty && (
+					<Badge color="warning" data-testid="panel-editor-v2-unsaved-badge">
+						Unsaved Changes
+					</Badge>
+				)}
 			</div>
 			<div className={styles.actions}>
 				<HeaderRightSection
@@ -88,7 +95,7 @@ function Header({
 						variant="solid"
 						color="primary"
 						data-testid="panel-editor-v2-save"
-						disabled={readOnly || !isDirty || isSaving}
+						disabled={readOnly || isSaving}
 						loading={!readOnly && isSaving}
 						onClick={readOnly ? undefined : onSave}
 					>

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

@@ -1,3 +1,4 @@
+import type { ComponentProps } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
@@ -23,7 +24,9 @@ jest.mock('api/common/logEvent', () => ({
 
 const mockUseIsAIAssistantEnabled = useIsAIAssistantEnabled as jest.Mock;
 
-function renderHeader(): void {
+function renderHeader(
+	props: Partial<ComponentProps<typeof Header>> = {},
+): void {
 	// AppLayout supplies the TooltipProvider in the app; the header is rendered bare here.
 	render(
 		<MemoryRouter>
@@ -33,6 +36,7 @@ function renderHeader(): void {
 					isSaving={false}
 					onSave={jest.fn()}
 					onClose={jest.fn()}
+					{...props}
 				/>
 			</TooltipProvider>
 		</MemoryRouter>,
@@ -66,4 +70,34 @@ describe('PanelEditor Header', () => {
 		).not.toBeInTheDocument();
 		expect(screen.getByTestId('panel-editor-v2-save')).toBeInTheDocument();
 	});
+
+	it('keeps Save enabled even when there are no unsaved edits', () => {
+		mockUseIsAIAssistantEnabled.mockReturnValue(false);
+
+		renderHeader({ isDirty: false });
+
+		expect(screen.getByTestId('panel-editor-v2-save')).toBeEnabled();
+	});
+
+	it('disables Save only while read-only or saving', () => {
+		mockUseIsAIAssistantEnabled.mockReturnValue(false);
+
+		renderHeader({ isDirty: true, readOnly: true, readOnlyReason: 'Locked' });
+
+		expect(screen.getByTestId('panel-editor-v2-save')).toBeDisabled();
+	});
+
+	it('shows the Unsaved Changes badge only when there are unsaved edits', () => {
+		mockUseIsAIAssistantEnabled.mockReturnValue(false);
+
+		renderHeader({ isDirty: false });
+		expect(
+			screen.queryByTestId('panel-editor-v2-unsaved-badge'),
+		).not.toBeInTheDocument();
+
+		renderHeader({ isDirty: true });
+		expect(
+			screen.getByTestId('panel-editor-v2-unsaved-badge'),
+		).toBeInTheDocument();
+	});
 });

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

@@ -1,5 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { toast } from '@signozhq/ui/sonner';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
@@ -100,6 +101,12 @@ jest.mock('@signozhq/ui/resizable', () => ({
 jest.mock('@signozhq/ui/sonner', () => ({
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
+const mockShowErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
+	useErrorModal: (): { showErrorModal: jest.Mock } => ({
+		showErrorModal: mockShowErrorModal,
+	}),
+}));
 
 // Children mocked to capture props (and expose a Save trigger / footer slot).
 const mockHeaderProps = jest.fn();
@@ -261,13 +268,13 @@ describe('PanelEditorContainer composition', () => {
 		);
 	});
 
-	it('keeps a query-less new panel unsaveable but still serializes its seed query', () => {
+	it('keeps a query-less new panel clean but still serializes its seed query', () => {
 		setup(makePanel('signoz/TimeSeriesPanel'), { isNew: true });
 
 		expect(mockUseQuerySync).toHaveBeenCalledWith(
 			expect.objectContaining({ alwaysSerializeQuery: true }),
 		);
-		// No query and no edits yet → nothing to save, so Save stays disabled.
+		// No query and no edits yet → not dirty, so closing won't prompt to discard.
 		expect(mockHeaderProps).toHaveBeenCalledWith(
 			expect.objectContaining({ isDirty: false }),
 		);
@@ -290,7 +297,7 @@ describe('PanelEditorContainer composition', () => {
 		);
 	});
 
-	it('marks a new panel that already has a query saveable (e.g. list auto-runs one)', () => {
+	it('marks a new panel that already has a query dirty (e.g. list auto-runs one)', () => {
 		const seededQuery = {
 			spec: { plugin: { kind: 'signoz/BuilderQuery', spec: { signal: 'logs' } } },
 		};
@@ -327,6 +334,24 @@ describe('PanelEditorContainer composition', () => {
 		expect(mockSave).toHaveBeenCalledWith(panel.spec);
 	});
 
+	it('surfaces a save failure through the error modal', async () => {
+		// The raw thrown value flows straight to the modal, which normalizes it to an
+		// APIError itself (that normalization is covered by ErrorModalProvider's tests).
+		const failure = {
+			response: {
+				status: 400,
+				data: { error: { code: 'INVALID', message: 'Panel name already exists' } },
+			},
+		};
+		mockSave.mockRejectedValueOnce(failure);
+		setup(makePanel('signoz/TimeSeriesPanel'));
+
+		await userEvent.click(screen.getByTestId('editor-save'));
+
+		await waitFor(() => expect(mockShowErrorModal).toHaveBeenCalledWith(failure));
+		expect(toast.error).not.toHaveBeenCalled();
+	});
+
 	it('marks the saved panel to be scrolled into view on the dashboard', async () => {
 		setup(makePanel('signoz/TimeSeriesPanel'));
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/__tests__/usePanelEditorQuerySync.integration.test.tsx

@@ -117,6 +117,49 @@ describe('usePanelEditorQuerySync (real query builder)', () => {
 		},
 	);
 
+	it('a NEW panel stays query-dirty after Stage & Run commits the edited query into the draft', async () => {
+		// Repro of the P0: new panel → edit → Run commits the query into the draft; the
+		// dirty baseline must not drift onto it, or Save re-disables.
+		const editedInUrl: Query = {
+			...initialQueriesMap[DataSource.METRICS],
+			id: 'edited-new-panel',
+			builder: {
+				...initialQueriesMap[DataSource.METRICS].builder,
+				queryData: [
+					{
+						...initialQueriesMap[DataSource.METRICS].builder.queryData[0],
+						legend: 'edited-legend',
+					},
+				],
+			},
+		};
+		const committed = toPerses(editedInUrl, panelType);
+
+		const { result, rerender } = renderHook(
+			({ draftQueries }: { draftQueries: DashboardtypesQueryDTO[] }) =>
+				usePanelEditorQuerySync({
+					draft: makePanel(draftQueries),
+					panelType,
+					setSpec: jest.fn(),
+					refetch: jest.fn(),
+					alwaysSerializeQuery: true,
+					signal: DataSource.METRICS as unknown as TelemetrytypesSignalDTO,
+					// savedQueries omitted — new panel.
+				}),
+			{
+				wrapper: makeUrlWrapper(editedInUrl),
+				initialProps: { draftQueries: [] as DashboardtypesQueryDTO[] },
+			},
+		);
+
+		// The edited query (from the URL) diverges from the seeded default → dirty.
+		await waitFor(() => expect(result.current.isQueryDirty).toBe(true));
+
+		// Stage & Run commits the edited query into the draft → must stay dirty.
+		rerender({ draftQueries: committed });
+		expect(result.current.isQueryDirty).toBe(true);
+	});
+
 	it('an untouched panel with a minimal/older stored query is NOT dirty (drift fix)', async () => {
 		// An older saved query carries only a few fields; the builder re-emits many more
 		// (source, stepInterval, filter, spaceAggregation, …). Comparing raw would read

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditorQuerySync.ts

@@ -79,6 +79,11 @@ export function usePanelEditorQuerySync({
 	// in-editor edit in the URL survives a refresh / browser Back-Forward.
 	useShareBuilderUrl({ defaultValue: seedQuery });
 
+	// Frozen seed for the new-panel dirty baseline: Stage & Run commits the live query
+	// into `draft.spec.queries`, so re-reading `seedQuery` would drift the baseline onto
+	// the run query and Save would re-disable right after a run.
+	const initialSeedRef = useRef(seedQuery);
+
 	// Commit the live query into the draft (what the preview fetches).
 	const commitQuery = useCallback(
 		(query: Query): boolean => {
@@ -152,16 +157,19 @@ export function usePanelEditorQuerySync({
 	// the V5 envelope level. Anchoring to `savedQueries` (not the builder-seed) keeps a
 	// handed-off / URL-restored edit reading as dirty; routing both sides through the same
 	// `fromPerses → toPerses` round-trip stops builder-added defaults (absent from an older
-	// stored query) reading an untouched panel as modified. New panel: fall back to seed.
+	// stored query) reading an untouched panel as modified. New panel: fall back to the
+	// frozen initial seed (see `initialSeedRef`).
 	const baselineEnvelopes = useMemo(
 		() =>
 			toQueryEnvelopes(
 				toPerses(
-					savedQueries ? fromPerses(savedQueries, panelType) : seedQuery,
+					savedQueries
+						? fromPerses(savedQueries, panelType)
+						: initialSeedRef.current,
 					panelType,
 				),
 			),
-		[savedQueries, seedQuery, panelType],
+		[savedQueries, panelType],
 	);
 	const isQueryDirty = useMemo(
 		() =>

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

@@ -19,6 +19,7 @@ import {
 	SectionKind,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 import { getBuilderQueries } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 
 import { getExecStats } from '../queryV5/v5ResponseData';
 import { usePanelInteractions } from '../PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions';
@@ -159,9 +160,10 @@ function PanelEditorContainer({
 		return section?.controls;
 	}, [panelDefinition]);
 
-	// New panels are savable once seeded with a query (List auto-seeds one). Read the
-	// seed `panel`, not the live `draft` — the staged-query sync commits the seed into
-	// the draft on open, which would falsely dirty an untouched query-less new panel.
+	// Unsaved-edits flag driving the discard confirmation on close (Save is always
+	// enabled). Read the seed `panel`, not the live `draft` — the staged-query sync
+	// commits the seed into the draft on open, which would falsely dirty an untouched
+	// query-less new panel.
 	const isDirty = useMemo(
 		() => isSpecDirty || isQueryDirty || (isNew && panel.spec.queries.length > 0),
 		[isSpecDirty, isQueryDirty, isNew, panel.spec.queries.length],
@@ -226,6 +228,7 @@ function PanelEditorContainer({
 	});
 
 	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
+	const { showErrorModal } = useErrorModal();
 
 	const onSave = useCallback(async (): Promise<void> => {
 		if (!isEditable) {
@@ -236,12 +239,22 @@ function PanelEditorContainer({
 			const savedPanelId = await save(buildSaveSpec(draft.spec));
 			// Reveal the saved panel once the dashboard re-renders.
 			setScrollTargetId(savedPanelId);
-			toast.success('Panel saved');
+			toast.success('Panel saved', {
+				position: 'top-center',
+			});
 			onSaved();
-		} catch {
-			toast.error('Failed to save panel');
+		} catch (err) {
+			showErrorModal(err);
 		}
-	}, [isEditable, save, buildSaveSpec, draft.spec, setScrollTargetId, onSaved]);
+	}, [
+		isEditable,
+		save,
+		buildSaveSpec,
+		draft.spec,
+		setScrollTargetId,
+		onSaved,
+		showErrorModal,
+	]);
 
 	// Leaving an existing panel's editor (without saving) still returns to it, so
 	// the dashboard lands on that panel rather than scrolled to the top. A new,

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

@@ -51,7 +51,7 @@ describe('panelStatusFromError', () => {
 
 	it('falls back to the error message when there is no structured body', () => {
 		expect(panelStatusFromError(new Error('boom'))).toStrictEqual({
-			code: 'unknown_error',
+			code: 'UPSTREAM_UNAVAILABLE',
 			message: 'boom',
 			docsUrl: undefined,
 			messages: [],

frontend/src/pages/DashboardsListPageV2/components/ActionsPopover/DeleteActionItem.tsx

@@ -12,13 +12,13 @@ import {
 	deleteDashboardV2,
 	invalidateListDashboardsForUserV2,
 } from 'api/generated/services/dashboard';
+import { useDeleteConfirm } from 'components/DeleteConfirmModal/useDeleteConfirm';
 import { DashboardListEvents } from 'pages/DashboardsListPageV2/constants/events';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 import { USER_ROLES } from 'types/roles';
 
-import { useDeleteConfirm } from '../DeleteConfirmModal/useDeleteConfirm';
 import styles from './ActionsPopover.module.scss';
 
 interface Props {

frontend/src/pages/DashboardsListPageV2/components/ViewsRail/ViewsRail.tsx

@@ -6,11 +6,11 @@ import { Typography } from '@signozhq/ui/typography';
 import { Bookmark, PenLine, Plus, Search, Trash2 } from '@signozhq/icons';
 import cx from 'classnames';
 
+import { useDeleteConfirm } from 'components/DeleteConfirmModal/useDeleteConfirm';
 import { DashboardListEvents } from 'pages/DashboardsListPageV2/constants/events';
 
 import type { SavedView } from '../../types';
 import { type BuiltinView } from '../../utils/views';
-import { useDeleteConfirm } from '../DeleteConfirmModal/useDeleteConfirm';
 import ViewNamePopover from './ViewNamePopover';
 
 import styles from './ViewsRail.module.scss';

frontend/src/types/api/querySuggestions/types.ts

@@ -1,4 +1,4 @@
-import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
+import { FieldDataType } from 'types/api/v5/queryRange';
 
 export interface QueryKeyDataSuggestionsProps {
 	label: string;
@@ -7,7 +7,12 @@ export interface QueryKeyDataSuggestionsProps {
 	apply?: string;
 	detail?: string;
 	fieldContext?: 'resource' | 'scope' | 'attribute' | 'span';
-	fieldDataType?: QUERY_BUILDER_KEY_TYPES;
+	/**
+	 * The field's type as the API reports it. Was declared as the antlr key-type enum
+	 * (`string | number | boolean`), which the endpoint never returns — every consumer cast it
+	 * back to `FieldDataType`.
+	 */
+	fieldDataType?: FieldDataType;
 	name: string;
 	signal: 'traces' | 'logs' | 'metrics';
 }
@@ -26,7 +31,7 @@ export interface QueryKeyRequestProps {
 	signal: 'traces' | 'logs' | 'metrics';
 	searchText: string;
 	fieldContext?: 'resource' | 'scope' | 'attribute' | 'span';
-	fieldDataType?: QUERY_BUILDER_KEY_TYPES;
+	fieldDataType?: FieldDataType;
 	metricName?: string;
 	metricNamespace?: string;
 	signalSource?: 'meter' | '';

frontend/src/utils/__tests__/fieldDataType.test.ts

@@ -0,0 +1,34 @@
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import type { FieldDataType } from 'types/api/v5/queryRange';
+
+import { fieldDataTypeToDataType } from '../fieldDataType';
+
+describe('fieldDataTypeToDataType', () => {
+	it('maps the reported numeric spellings onto the query-builder numerics', () => {
+		expect(fieldDataTypeToDataType('number')).toBe(DataTypes.Float64);
+		expect(fieldDataTypeToDataType('int64')).toBe(DataTypes.Int64);
+		expect(fieldDataTypeToDataType('float64')).toBe(DataTypes.Float64);
+	});
+
+	it('maps the list spellings onto the array types', () => {
+		expect(fieldDataTypeToDataType('[]string')).toBe(DataTypes.ArrayString);
+		expect(fieldDataTypeToDataType('[]bool')).toBe(DataTypes.ArrayBool);
+		expect(fieldDataTypeToDataType('[]int64')).toBe(DataTypes.ArrayInt64);
+		expect(fieldDataTypeToDataType('[]float64')).toBe(DataTypes.ArrayFloat64);
+		expect(fieldDataTypeToDataType('[]number')).toBe(DataTypes.ArrayFloat64);
+	});
+
+	it('passes through the spellings the two vocabularies share', () => {
+		expect(fieldDataTypeToDataType('string')).toBe(DataTypes.String);
+		expect(fieldDataTypeToDataType('bool')).toBe(DataTypes.bool);
+	});
+
+	it('returns EMPTY for empty, missing and not-yet-known types', () => {
+		expect(fieldDataTypeToDataType('')).toBe(DataTypes.EMPTY);
+		expect(fieldDataTypeToDataType(undefined)).toBe(DataTypes.EMPTY);
+		// The backend can store `[]json` / `[]dynamic`, which the API union doesn't list.
+		expect(fieldDataTypeToDataType('[]json' as FieldDataType)).toBe(
+			DataTypes.EMPTY,
+		);
+	});
+});

frontend/src/utils/errorUtils.ts

@@ -42,7 +42,12 @@ export function toAPIError(
 	try {
 		ErrorResponseHandlerForGeneratedAPIs(error);
 	} catch (apiError) {
-		if (apiError instanceof APIError) {
+		// UPSTREAM_UNAVAILABLE means the handler couldn't find a backend error code
+		// (non-envelope body); prefer the caller's context-specific defaultMessage.
+		if (
+			apiError instanceof APIError &&
+			apiError.getErrorCode() !== 'UPSTREAM_UNAVAILABLE'
+		) {
 			return apiError;
 		}
 	}

frontend/src/utils/fieldDataType.ts

@@ -0,0 +1,31 @@
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import type { FieldDataType } from 'types/api/v5/queryRange';
+
+/**
+ * The field metadata APIs and the query builder spell field types differently: the metadata
+ * collapses the numerics to `number` and writes lists as `[]string`, while `DataTypes` — which
+ * keys the operator and attribute-value lookups — uses `float64` and `array(string)`. Convert
+ * where a reported type becomes a query-builder one, so those lookups can't miss.
+ */
+const TO_DATA_TYPE: Record<FieldDataType, DataTypes> = {
+	'': DataTypes.EMPTY,
+	string: DataTypes.String,
+	bool: DataTypes.bool,
+	int64: DataTypes.Int64,
+	float64: DataTypes.Float64,
+	number: DataTypes.Float64,
+	'[]string': DataTypes.ArrayString,
+	'[]bool': DataTypes.ArrayBool,
+	'[]int64': DataTypes.ArrayInt64,
+	'[]float64': DataTypes.ArrayFloat64,
+	'[]number': DataTypes.ArrayFloat64,
+};
+
+/**
+ * Exhaustive over `FieldDataType`, so a type added to the API union fails to compile here
+ * rather than going missing at runtime. The fallback is for a spelling the union doesn't know
+ * yet — the backend can store `[]json` and `[]dynamic` — not for any of the cases above.
+ */
+export const fieldDataTypeToDataType = (
+	fieldDataType?: FieldDataType,
+): DataTypes => TO_DATA_TYPE[fieldDataType ?? ''] ?? DataTypes.EMPTY;

go.mod

@@ -4,7 +4,7 @@ go 1.25.7
 
 require (
 	dario.cat/mergo v1.0.2
-	github.com/AfterShip/clickhouse-sql-parser v0.4.16
+	github.com/AfterShip/clickhouse-sql-parser v0.5.2
 	github.com/ClickHouse/clickhouse-go/v2 v2.44.0
 	github.com/DATA-DOG/go-sqlmock v1.5.2
 	github.com/SigNoz/clickhouse-go-mock v0.14.0

go.sum

@@ -66,8 +66,8 @@ dario.cat/mergo v1.0.2/go.mod h1:E/hbnu0NxMFBjpMIE34DRGLWqDy0g5FuKDhCb31ngxA=
 dmitri.shuralyov.com/gpu/mtl v0.0.0-20190408044501-666a987793e9/go.mod h1:H6x//7gZCb22OMCxBHrMx7a5I7Hp++hsVxbQ4BYO7hU=
 filippo.io/edwards25519 v1.2.0 h1:crnVqOiS4jqYleHd9vaKZ+HKtHfllngJIiOpNpoJsjo=
 filippo.io/edwards25519 v1.2.0/go.mod h1:xzAOLCNug/yB62zG1bQ8uziwrIqIuxhctzJT18Q77mc=
-github.com/AfterShip/clickhouse-sql-parser v0.4.16 h1:gpl+wXclYUKT0p4+gBq22XeRYWwEoZ9f35vogqMvkLQ=
-github.com/AfterShip/clickhouse-sql-parser v0.4.16/go.mod h1:W0Z82wJWkJxz2RVun/RMwxue3g7ut47Xxl+SFqdJGus=
+github.com/AfterShip/clickhouse-sql-parser v0.5.2 h1:KCxdmvuVawVF4yl0ZS33q7olgmLZwvZG5BjWHp6o414=
+github.com/AfterShip/clickhouse-sql-parser v0.5.2/go.mod h1:Qi3qvPTfZb/aFwI5V4WFOahgjsLJa4MzVijIAfwOhDw=
 github.com/Azure/azure-sdk-for-go v68.0.0+incompatible h1:fcYLmCpyNYRnvJbPerq7U0hS+6+I79yEDJBqVNcqUzU=
 github.com/Azure/azure-sdk-for-go/sdk/azcore v1.21.0 h1:fou+2+WFTib47nS+nz/ozhEBnvU96bKHy6LjRsY4E28=
 github.com/Azure/azure-sdk-for-go/sdk/azcore v1.21.0/go.mod h1:t76Ruy8AHvUAC8GfMWJMa0ElSbuIcO03NLpynfbgsPA=

pkg/querybuilder/agg_rewrite.go

@@ -96,9 +96,9 @@ func (r *aggExprRewriter) Rewrite(
 	}
 
 	if visitor.isRate {
-		return fmt.Sprintf("%s/%d", sel.SelectItems[0].String(), rateInterval), visitor.chArgs, nil
+		return fmt.Sprintf("%s/%d", chparser.Format(sel.SelectItems[0]), rateInterval), visitor.chArgs, nil
 	}
-	return sel.SelectItems[0].String(), visitor.chArgs, nil
+	return chparser.Format(sel.SelectItems[0]), visitor.chArgs, nil
 }
 
 // RewriteMulti rewrites a slice of expressions.
@@ -207,7 +207,7 @@ func (v *exprVisitor) VisitFunctionExpr(fn *chparser.FunctionExpr) error {
 	// Handle *If functions with predicate + values
 	if aggFunc.FuncCombinator {
 		// Map the predicate (last argument)
-		origPred := args[len(args)-1].String()
+		origPred := chparser.Format(args[len(args)-1])
 		whereClause, err := PrepareWhereClause(
 			origPred,
 			FilterExprVisitorOpts{
@@ -242,7 +242,7 @@ func (v *exprVisitor) VisitFunctionExpr(fn *chparser.FunctionExpr) error {
 
 		// Map each value column argument
 		for i := 0; i < len(args)-1; i++ {
-			origVal := args[i].String()
+			origVal := chparser.Format(args[i])
 			fieldKey := telemetrytypes.GetFieldKeyFromKeyText(origVal)
 			expr, err := v.fieldMapper.ColumnExpressionFor(v.ctx, v.orgID, v.startNs, v.endNs, &fieldKey, dataType, v.fieldKeys)
 			if err != nil {
@@ -259,7 +259,7 @@ func (v *exprVisitor) VisitFunctionExpr(fn *chparser.FunctionExpr) error {
 	} else {
 		// Non-If functions: map every argument as a column/value
 		for i, arg := range args {
-			orig := arg.String()
+			orig := chparser.Format(arg)
 			fieldKey := telemetrytypes.GetFieldKeyFromKeyText(orig)
 			expr, err := v.fieldMapper.ColumnExpressionFor(v.ctx, v.orgID, v.startNs, v.endNs, &fieldKey, dataType, v.fieldKeys)
 			if err != nil {

pkg/queryparser/queryfilterextractor/clickhouse.go

@@ -316,17 +316,17 @@ func (e *ClickHouseFilterExtractor) extractColumnStrByExpr(expr clickhouse.Expr)
 	// FunctionExpr is a function call like "toDate(timestamp)"
 	case *clickhouse.FunctionExpr:
 		// For function expressions, return the complete function call string
-		return ex.String()
+		return clickhouse.Format(ex)
 	// ColumnExpr is a column expression like "m.region", "toDate(timestamp)"
 	case *clickhouse.ColumnExpr:
 		// ColumnExpr wraps another expression - extract the underlying expression
 		if ex.Expr != nil {
 			return e.extractColumnStrByExpr(ex.Expr)
 		}
-		return ex.String()
+		return clickhouse.Format(ex)
 	default:
 		// For other expression types, return the string representation
-		return expr.String()
+		return clickhouse.Format(expr)
 	}
 }
 
@@ -524,7 +524,7 @@ func (e *ClickHouseFilterExtractor) extractFullExpression(expr clickhouse.Expr)
 	if expr == nil {
 		return ""
 	}
-	return expr.String()
+	return clickhouse.Format(expr)
 }
 
 // isSimpleColumnReference checks if an expression is just a simple column reference
@@ -657,7 +657,7 @@ func (e *ClickHouseFilterExtractor) extractCTEName(cte *clickhouse.CTEStmt) stri
 	case *clickhouse.Ident:
 		return name.Name
 	default:
-		return cte.Expr.String()
+		return clickhouse.Format(cte.Expr)
 	}
 }
 

pkg/telemetrymetadata/stmt_parse.go

@@ -27,7 +27,7 @@ func (v *TelemetryFieldVisitor) VisitColumnDef(expr *parser.ColumnDef) error {
 	}
 
 	// Parse column name to extract context and data type
-	columnName := expr.Name.String()
+	columnName := parser.Format(expr.Name)
 
 	// Remove backticks if present
 	columnName = strings.TrimPrefix(columnName, "`")
@@ -75,7 +75,7 @@ func (v *TelemetryFieldVisitor) VisitColumnDef(expr *parser.ColumnDef) error {
 	// Extract field name from the DEFAULT expression
 	// The DEFAULT expression should be something like: resources_string['k8s.cluster.name']
 	// We need to extract the key inside the square brackets
-	defaultExprStr := expr.DefaultExpr.String()
+	defaultExprStr := parser.Format(expr.DefaultExpr)
 
 	// Look for the pattern: map['key']
 	startIdx := strings.Index(defaultExprStr, "['")

pkg/variables/clickhouse/processor.go

@@ -69,7 +69,7 @@ func (qp *QueryProcessor) ProcessQuery(query string, transformer FilterTransform
 	// Reconstruct the query
 	var resultBuilder strings.Builder
 	for _, stmt := range stmts {
-		resultBuilder.WriteString(stmt.String())
+		resultBuilder.WriteString(parser.Format(stmt))
 		resultBuilder.WriteString(";")
 	}
 

tests/integration/tests/querierlogs/11_aggregation_functions.py

@@ -20,12 +20,15 @@ from fixtures.querier import (
 # Numeric aggregation-function coverage for logs — the logs counterpart of
 # queriertraces/02_aggregation.py::test_traces_aggregate_functions. Logs querier
 # tests elsewhere only ever use count()/count_distinct(); here a grouped scalar
-# query computes sum / avg / min / max / p50 / p90 / p95 / p99 / countIf /
-# count_distinct over a numeric log attribute and asserts every value.
+# query computes sum / avg / min / max / p50 / p90 / p95 / p99 / countIf / rate /
+# rate_sum / count_distinct over a numeric log attribute and asserts every value.
 #
 # Log number attributes are stored as Float64, so aggregates come back as floats;
 # percentiles are matched with pytest.approx (ClickHouse quantile() and
 # numpy.percentile both linear-interpolate, but avoid ULP-level exact equality).
+#
+# The rate family divides by a window the caller does not otherwise see, so the
+# lookback is passed explicitly instead of taken from the request helper default.
 
 
 def test_logs_aggregate_functions(
@@ -41,11 +44,14 @@ def test_logs_aggregate_functions(
 
     Tests:
     A grouped scalar query computes count / sum / avg / min / max / p50 / p90 /
-    p95 / p99 over latency_ms, countIf over a numeric threshold, and
-    count_distinct over a string attribute — all matching values derived from the
-    inserted logs, ordered by count() desc.
+    p95 / p99 over latency_ms, countIf over a numeric threshold, rate and
+    rate_sum over the query window, and count_distinct over a string attribute —
+    all matching values derived from the inserted logs, ordered by count() desc.
     """
     now = datetime.now(tz=UTC).replace(second=0, microsecond=0)
+    # A scalar rate divides by the whole query window, so both sides agree on it.
+    lookback_minutes = 5
+    rate_interval_seconds = lookback_minutes * 60
     # (service, latency_ms, endpoint)
     specs = [
         ("svc-a", 10, "/x"),
@@ -80,12 +86,14 @@ def test_logs_aggregate_functions(
             build_aggregation("p95(latency_ms)", "p95_l"),
             build_aggregation("p99(latency_ms)", "p99_l"),
             build_aggregation("countIf(latency_ms >= 25)", "slow"),
+            build_aggregation("rate()", "rate_all"),
+            build_aggregation("rate_sum(latency_ms)", "rate_sum_l"),
             build_aggregation("count_distinct(endpoint)", "endpoints"),
         ],
         group_by=[build_group_by_field("service.name", "string", "resource")],
         order=[build_order_by("count()", "desc")],
     )
-    response = make_scalar_query_request(signoz, token, now, [query])
+    response = make_scalar_query_request(signoz, token, now, [query], lookback_minutes=lookback_minutes)
 
     assert response.status_code == HTTPStatus.OK, response.text
     data = get_scalar_table_data(response.json())
@@ -109,6 +117,12 @@ def test_logs_aggregate_functions(
             float(np.percentile(latencies, 95)),  # p95(latency_ms)
             float(np.percentile(latencies, 99)),  # p99(latency_ms)
             sum(1 for latency in latencies if latency >= 25),  # countIf(latency_ms >= 25)
+            # Response floats are rounded to 3 decimals at or above 1 and to 3
+            # significant figures below it (roundToNonZeroDecimals). Every other
+            # value here is exact; the rates are the only ones that repeat, and
+            # they stay below 1 for this fixture, so mirror the latter form.
+            float(f"{len(latencies) / rate_interval_seconds:.3g}"),  # rate()
+            float(f"{sum(latencies) / rate_interval_seconds:.3g}"),  # rate_sum(latency_ms)
             len(set(endpoints)),  # count_distinct(endpoint)
         ]
         assert by_service[service] == pytest.approx(expected), f"{service}: {by_service[service]} != {expected}"

tests/integration/tests/queriertraces/02_aggregation.py

@@ -150,12 +150,17 @@ def test_traces_aggregate_functions(
     Tests:
     A grouped scalar query computes count / sum / avg / min / max / p50 / p90 over
     duration_nano, countIf over the intrinsic status_code and the calculated
-    response_status_code, and avg over a numeric attribute — all matching values
-    derived from the inserted spans. Under the corrupt variant the same-named
-    colliding attributes must not change any of these.
+    response_status_code, rate and rate_sum over the query window, and avg over a
+    numeric attribute — all matching values derived from the inserted spans. Under
+    the corrupt variant the same-named colliding attributes must not change any of
+    these.
     """
     extra_attrs, extra_resources = trace_noise(noise)
     now = datetime.now(tz=UTC).replace(second=0, microsecond=0)
+    # A scalar rate divides by the whole query window, so both sides agree on it.
+    # Traces derives this separately from logs (telemetrytraces/statement_builder.go).
+    lookback_minutes = 5
+    rate_interval_seconds = lookback_minutes * 60
 
     def mk(service: str, dur_s: float, status: TracesStatusCode, rsc: str, latency: float) -> Traces:
         return Traces(
@@ -189,6 +194,8 @@ def test_traces_aggregate_functions(
         build_aggregation("p50(duration_nano)", "p50_d"),
         build_aggregation("p90(duration_nano)", "p90_d"),
         build_aggregation("countIf(status_code = 2)", "errs"),
+        build_aggregation("rate()", "rate_all"),
+        build_aggregation("rate_sum(duration_nano)", "rate_sum_d"),
         build_aggregation("avg(latency_ms)", "avg_lat"),
     ]
     query = build_traces_scalar_query(
@@ -196,7 +203,7 @@ def test_traces_aggregate_functions(
         group_by=[build_group_by_field("service.name", "string", "resource")],
         order=[build_order_by("count()", "desc")],
     )
-    response = make_scalar_query_request(signoz, token, now, [query])
+    response = make_scalar_query_request(signoz, token, now, [query], lookback_minutes=lookback_minutes)
 
     assert response.status_code == HTTPStatus.OK, response.text
     data = get_scalar_table_data(response.json())
@@ -214,6 +221,11 @@ def test_traces_aggregate_functions(
             float(np.percentile(durations, 50)),  # p50(duration_nano)
             float(np.percentile(durations, 90)),  # p90(duration_nano)
             sum(1 for s in group if int(s.status_code) == 2),  # countIf(status_code = 2)
+            # Response floats are rounded to 3 significant figures below 1 and to 3
+            # decimals at or above it (roundToNonZeroDecimals). The two rates land on
+            # either side of that boundary, so each mirrors its own form.
+            float(f"{len(group) / rate_interval_seconds:.3g}"),  # rate()
+            round(sum(durations) / rate_interval_seconds, 3),  # rate_sum(duration_nano)
             sum(latencies) / len(latencies),  # avg(latency_ms)
         )