chore: replace antd badge with signozhq badge (#11377)

* chore: replace antd badge with signozhq badge

* chore: add badge to banned components

docs/api/openapi.yml

@@ -2342,6 +2342,8 @@ components:
           type: boolean
         org_id:
           type: string
+        source:
+          $ref: '#/components/schemas/DashboardtypesSource'
         updatedAt:
           format: date-time
           type: string
@@ -2371,6 +2373,12 @@ components:
         timeRangeEnabled:
           type: boolean
       type: object
+    DashboardtypesSource:
+      enum:
+      - user
+      - system
+      - integration
+      type: object
     DashboardtypesStorableDashboardData:
       additionalProperties: {}
       type: object

ee/modules/dashboard/impldashboard/module.go

@@ -49,6 +49,14 @@ func (module *module) CreatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
+	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
+	if err != nil {
+		return err
+	}
+	if err := dashboard.ErrIfNotPublishable(); err != nil {
+		return err
+	}
+
 	storablePublicDashboard, err := module.store.GetPublic(ctx, publicDashboard.DashboardID.StringValue())
 	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
 		return err
@@ -129,6 +137,14 @@ func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
+	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
+	if err != nil {
+		return err
+	}
+	if err := dashboard.ErrIfNotPublishable(); err != nil {
+		return err
+	}
+
 	return module.store.UpdatePublic(ctx, dashboardtypes.NewStorablePublicDashboardFromPublicDashboard(publicDashboard))
 }
 
@@ -138,6 +154,10 @@ func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.U
 		return err
 	}
 
+	if err := dashboard.ErrIfNotDeletable(); err != nil {
+		return err
+	}
+
 	if dashboard.Locked {
 		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "dashboard is locked, please unlock the dashboard to be delete it")
 	}
@@ -168,6 +188,14 @@ func (module *module) DeletePublic(ctx context.Context, orgID valuer.UUID, dashb
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
+	dashboard, err := module.Get(ctx, orgID, dashboardID)
+	if err != nil {
+		return err
+	}
+	if err := dashboard.ErrIfNotPublishable(); err != nil {
+		return err
+	}
+
 	err = module.store.DeletePublic(ctx, dashboardID.StringValue())
 	if err != nil {
 		return err

frontend/plugins/rules/no-antd-components.mjs

@@ -15,6 +15,7 @@
 
 const BANNED_COMPONENTS = {
 	Typography: 'Use @signozhq/ui Typography instead of antd Typography.',
+	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
 };
 
 export default {

frontend/src/AppRoutes/pageComponents.ts

@@ -47,7 +47,6 @@ export const TracesFunnels = Loadable(
 		import(/* webpackChunkName: "Traces Funnels" */ 'pages/TracesModulePage'),
 );
 export const TracesFunnelDetails = Loadable(
-	// eslint-disable-next-line sonarjs/no-identical-functions
 	() =>
 		import(
 			/* webpackChunkName: "Traces Funnel Details" */ 'pages/TracesModulePage'
@@ -313,13 +312,6 @@ export const PublicDashboardPage = Loadable(
 		),
 );
 
-export const AlertTypeSelectionPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "Alert Type Selection Page" */ 'pages/AlertTypeSelection'
-		),
-);
-
 export const MeterExplorerPage = Loadable(
 	() =>
 		import(/* webpackChunkName: "Meter Explorer Page" */ 'pages/MeterExplorer'),

frontend/src/AppRoutes/routes.ts

@@ -5,7 +5,6 @@ import {
 	AIAssistantPage,
 	AlertHistory,
 	AlertOverview,
-	AlertTypeSelectionPage,
 	AllAlertChannels,
 	AllErrors,
 	ApiMonitoring,
@@ -213,13 +212,6 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'LIST_ALL_ALERT',
 	},
-	{
-		path: ROUTES.ALERT_TYPE_SELECTION,
-		exact: true,
-		component: AlertTypeSelectionPage,
-		isPrivate: true,
-		key: 'ALERT_TYPE_SELECTION',
-	},
 	{
 		path: ROUTES.ALERTS_NEW,
 		exact: true,
@@ -533,18 +525,6 @@ export const LIST_LICENSES: AppRoutes = {
 	key: 'LIST_LICENSES',
 };
 
-export const oldRoutes = [
-	'/pipelines',
-	'/logs-explorer',
-	'/logs-explorer/live',
-	'/logs-save-views',
-	'/traces-save-views',
-	'/settings/access-tokens',
-	'/settings/api-keys',
-	'/messaging-queues',
-	'/alerts/edit',
-];
-
 export const oldNewRoutesMapping: Record<string, string> = {
 	'/pipelines': '/logs/pipelines',
 	'/logs-explorer': '/logs/logs-explorer',
@@ -555,7 +535,9 @@ export const oldNewRoutesMapping: Record<string, string> = {
 	'/settings/api-keys': '/settings/service-accounts',
 	'/messaging-queues': '/messaging-queues/overview',
 	'/alerts/edit': '/alerts/overview',
+	'/alerts/type-selection': '/alerts/new',
 };
+export const oldRoutes = Object.keys(oldNewRoutesMapping);
 
 export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [
 	ROUTES.WORKSPACE_LOCKED,

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

@@ -2999,6 +2999,11 @@ export interface CoretypesPatchableObjectsDTO {
 	deletions: CoretypesObjectGroupDTO[] | null;
 }
 
+export enum DashboardtypesSourceDTO {
+	user = 'user',
+	system = 'system',
+	integration = 'integration',
+}
 export interface DashboardtypesDashboardDTO {
 	/**
 	 * @type string
@@ -3022,6 +3027,7 @@ export interface DashboardtypesDashboardDTO {
 	 * @type string
 	 */
 	org_id?: string;
+	source?: DashboardtypesSourceDTO;
 	/**
 	 * @type string
 	 * @format date-time

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss

@@ -0,0 +1,17 @@
+.breadcrumb {
+	padding-left: 16px;
+
+	ol {
+		align-items: center;
+	}
+
+	:global(.ant-breadcrumb-separator) {
+		color: var(--muted-foreground);
+	}
+}
+
+.divider {
+	border-color: var(--l1-border);
+	margin: 16px 0;
+	margin-top: 10px;
+}

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.tsx

@@ -0,0 +1,32 @@
+import { Breadcrumb, Divider } from 'antd';
+
+import styles from './AlertBreadcrumb.module.scss';
+import BreadcrumbItem, { BreadcrumbItemConfig } from './BreadcrumbItem';
+
+export interface AlertBreadcrumbProps {
+	items: BreadcrumbItemConfig[];
+	className?: string;
+	showDivider?: boolean;
+}
+
+function AlertBreadcrumb({
+	items,
+	className,
+	showDivider = true,
+}: AlertBreadcrumbProps): JSX.Element {
+	const breadcrumbItems = items.map((item) => ({
+		title: <BreadcrumbItem {...item} />,
+	}));
+
+	return (
+		<>
+			<Breadcrumb
+				className={`${styles.breadcrumb} ${className || ''}`}
+				items={breadcrumbItems}
+			/>
+			{showDivider && <Divider className={styles.divider} />}
+		</>
+	);
+}
+
+export default AlertBreadcrumb;

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.module.scss

@@ -0,0 +1,9 @@
+.item {
+	--button-padding: 0;
+	--button-font-size: var(--periscope-font-size-base);
+}
+
+.itemLast {
+	color: var(--muted-foreground);
+	font-size: var(--periscope-font-size-base);
+}

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx

@@ -0,0 +1,45 @@
+import { Button } from '@signozhq/ui/button';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { isModifierKeyPressed } from 'utils/app';
+
+import styles from './BreadcrumbItem.module.scss';
+
+export type BreadcrumbItemConfig =
+	| {
+			title: string | null;
+			route?: string;
+	  }
+	| {
+			title: string | null;
+			isLast?: true;
+	  };
+
+function BreadcrumbItem({
+	title,
+	...props
+}: BreadcrumbItemConfig): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+
+	if ('isLast' in props) {
+		return <div className={styles.itemLast}>{title}</div>;
+	}
+
+	return (
+		<Button
+			variant="ghost"
+			color="secondary"
+			className={styles.item}
+			onClick={(e: React.MouseEvent): void => {
+				if (!('route' in props) || !props.route) {
+					return;
+				}
+
+				safeNavigate(props.route, { newTab: isModifierKeyPressed(e) });
+			}}
+		>
+			{title}
+		</Button>
+	);
+}
+
+export default BreadcrumbItem;

frontend/src/components/AlertBreadcrumb/index.tsx

@@ -0,0 +1,6 @@
+export { default } from './AlertBreadcrumb';
+export {
+	default as BreadcrumbItem,
+	type BreadcrumbItemConfig,
+} from './BreadcrumbItem';
+export type { AlertBreadcrumbProps } from './AlertBreadcrumb';

frontend/src/components/InputNumber/InputNumber.styles.scss

@@ -1,12 +0,0 @@
-/* Hide native browser spinners for our number input, matching antd defaults. */
-.signoz-input-number {
-	&::-webkit-outer-spin-button,
-	&::-webkit-inner-spin-button {
-		-webkit-appearance: none;
-		margin: 0;
-	}
-
-	&[type='number'] {
-		-moz-appearance: textfield;
-	}
-}

frontend/src/components/InputNumber/InputNumber.tsx

@@ -1,130 +0,0 @@
-import './InputNumber.styles.scss';
-
-import {
-	ChangeEvent,
-	CSSProperties,
-	FocusEventHandler,
-	forwardRef,
-	KeyboardEventHandler,
-	ReactNode,
-} from 'react';
-import { Input } from '@signozhq/ui/input';
-import cx from 'classnames';
-
-export type InputNumberProps = {
-	value?: number | null;
-	defaultValue?: number | null;
-	onChange?: (value: number | null) => void;
-	min?: number;
-	max?: number;
-	step?: number;
-	/** When set, values emitted via onChange are rounded to this many decimals. */
-	precision?: number;
-	placeholder?: string;
-	disabled?: boolean;
-	prefix?: ReactNode;
-	suffix?: ReactNode;
-	className?: string;
-	rootClassName?: string;
-	style?: CSSProperties;
-	id?: string;
-	name?: string;
-	testId?: string;
-	autoFocus?: boolean;
-	onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
-	onBlur?: FocusEventHandler<HTMLInputElement>;
-	onFocus?: FocusEventHandler<HTMLInputElement>;
-	'aria-label'?: string;
-	'data-testid'?: string;
-};
-
-const toInputValue = (value: number | null | undefined): string | undefined => {
-	if (value === null || value === undefined || Number.isNaN(value)) {
-		return '';
-	}
-	return String(value);
-};
-
-const parseValue = (raw: string, precision?: number): number | null => {
-	if (raw === '' || raw === '-') {
-		return null;
-	}
-	const parsed = Number(raw);
-	if (Number.isNaN(parsed)) {
-		return null;
-	}
-	if (precision === undefined) {
-		return parsed;
-	}
-	const factor = 10 ** precision;
-	return Math.round(parsed * factor) / factor;
-};
-
-const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
-	(
-		{
-			value,
-			defaultValue,
-			onChange,
-			min,
-			max,
-			step,
-			precision,
-			placeholder,
-			disabled,
-			prefix,
-			suffix,
-			className,
-			rootClassName,
-			style,
-			id,
-			name,
-			testId,
-			autoFocus,
-			onKeyDown,
-			onBlur,
-			onFocus,
-			'aria-label': ariaLabel,
-			'data-testid': dataTestId,
-		},
-		ref,
-	): JSX.Element => {
-		const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-			onChange?.(parseValue(event.target.value, precision));
-		};
-
-		return (
-			<Input
-				ref={ref}
-				type="number"
-				value={value === undefined ? undefined : toInputValue(value)}
-				defaultValue={
-					defaultValue === undefined ? undefined : toInputValue(defaultValue)
-				}
-				onChange={handleChange}
-				min={min}
-				max={max}
-				step={step}
-				placeholder={placeholder}
-				disabled={disabled}
-				prefix={prefix}
-				suffix={suffix}
-				className={cx('signoz-input-number', className)}
-				containerClassName={cx('signoz-input-number-container', rootClassName)}
-				style={style}
-				id={id}
-				name={name}
-				testId={testId ?? dataTestId}
-				autoFocus={autoFocus}
-				onKeyDown={onKeyDown}
-				onBlur={onBlur}
-				onFocus={onFocus}
-				aria-label={ariaLabel}
-			/>
-		);
-	},
-);
-
-InputNumber.displayName = 'InputNumber';
-
-export default InputNumber;

frontend/src/components/InputNumber/index.ts

@@ -1,2 +0,0 @@
-export { default } from './InputNumber';
-export type { InputNumberProps } from './InputNumber';

frontend/src/components/LogDetail/index.tsx

@@ -50,6 +50,7 @@ import {
 import { JsonView } from 'periscope/components/JsonView';
 import { useAppContext } from 'providers/App/App';
 import { AppState } from 'store/reducers';
+import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -217,20 +218,17 @@ function LogDetailInner({
 
 	const logBody = useMemo(() => {
 		if (!isBodyJsonQueryEnabled) {
-			return log?.body || '';
+			return (log?.body as string) ?? '';
 		}
-
-		try {
-			const json = JSON.parse(log?.body || '');
-
-			if (typeof json?.message === 'string' && json.message !== '') {
-				return json.message;
-			}
-
-			return log?.body || '';
-		} catch {
-			return log?.body || '';
+		// Feature enabled: body is always a map; message is always a string
+		const bodyObj = log?.body as ILogBody;
+		if (!bodyObj) {
+			return '';
 		}
+		if (bodyObj.message) {
+			return bodyObj.message;
+		}
+		return JSON.stringify(bodyObj);
 	}, [isBodyJsonQueryEnabled, log?.body]);
 
 	const htmlBody = useMemo(

frontend/src/components/Logs/RawLogView/index.tsx

@@ -9,7 +9,10 @@ import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import {
+	getBodyDisplayString,
+	getSanitizedLogBody,
+} from 'container/LogDetailedView/utils';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -99,7 +102,7 @@ function RawLogView({
 		// Check if body is selected
 		const showBody = selectedFields.some((field) => field.name === 'body');
 		if (showBody) {
-			parts.push(`${attributesText} ${data.body}`);
+			parts.push(`${attributesText} ${getBodyDisplayString(data.body)}`);
 		} else {
 			parts.push(attributesText);
 		}

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -2,7 +2,10 @@ import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import {
+	getBodyDisplayString,
+	getSanitizedLogBody,
+} from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
@@ -87,7 +90,7 @@ export function useLogsTableColumns({
 			? {
 					id: 'body',
 					header: 'Body',
-					accessorFn: (log): string => log.body,
+					accessorFn: (log): string => getBodyDisplayString(log.body),
 					canBeHidden: false,
 					width: { default: '100%', min: 300 },
 					cell: ({ value, isActive }): ReactElement => (

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,9 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Input, Popover, Tooltip } from 'antd';
+import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
-import InputNumber from 'components/InputNumber';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
 import useDebouncedFn from 'hooks/useDebouncedFunction';

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -626,6 +626,10 @@ function TanStackTableInner<TData>(
 										onChange={(value): void => {
 											setLimit(+value);
 											pagination.onLimitChange?.(+value);
+											if (page !== 1) {
+												setPage(1);
+												pagination.onPageChange?.(1);
+											}
 										}}
 										items={paginationPageSizeItems}
 									/>

frontend/src/components/TanStackTableView/__tests__/TanStackTableView.test.tsx

@@ -401,6 +401,62 @@ describe('TanStackTableView Integration', () => {
 				expect(onLimitChange).toHaveBeenCalledWith(20);
 			});
 		});
+
+		it('resets page to 1 when limit changes', async () => {
+			const user = userEvent.setup();
+			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+			const onPageChange = jest.fn();
+
+			renderTanStackTable({
+				props: {
+					pagination: { total: 100, defaultPage: 1, defaultLimit: 10, onPageChange },
+					enableQueryParams: true,
+				},
+				onUrlUpdate,
+			});
+
+			await waitFor(() => {
+				expect(screen.getByRole('navigation')).toBeInTheDocument();
+			});
+
+			// Navigate to page 2
+			const nav = screen.getByRole('navigation');
+			const page2 = Array.from(nav.querySelectorAll('button')).find(
+				(btn) => btn.textContent?.trim() === '2',
+			);
+			if (!page2) {
+				throw new Error('Page 2 button not found in pagination');
+			}
+			await user.click(page2);
+
+			await waitFor(() => {
+				const lastPage = onUrlUpdate.mock.calls
+					.map((call) => call[0].searchParams.get('page'))
+					.filter(Boolean)
+					.pop();
+				expect(lastPage).toBe('2');
+			});
+
+			// Change page size
+			const comboboxTrigger = document.querySelector(
+				'button[aria-haspopup="dialog"]',
+			) as HTMLElement;
+			await user.click(comboboxTrigger);
+
+			const option20 = await screen.findByRole('option', { name: '20' });
+			await user.click(option20);
+
+			// Verify page reset to 1 (nuqs removes default values from URL)
+			await waitFor(() => {
+				const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1];
+				const lastPage = lastCall[0].searchParams.get('page');
+				expect(lastPage === '1' || lastPage === null).toBe(true);
+				expect(lastCall[0].searchParams.get('limit')).toBe('20');
+			});
+
+			// Verify onPageChange callback was called with 1
+			expect(onPageChange).toHaveBeenCalledWith(1);
+		});
 	});
 
 	describe('sorting', () => {

frontend/src/constants/routes.ts

@@ -29,7 +29,6 @@ const ROUTES = {
 	ALERTS_NEW: '/alerts/new',
 	ALERT_HISTORY: '/alerts/history',
 	ALERT_OVERVIEW: '/alerts/overview',
-	ALERT_TYPE_SELECTION: '/alerts/type-selection',
 	ALL_CHANNELS: '/settings/channels',
 	CHANNELS_NEW: '/settings/channels/new',
 	CHANNELS_EDIT: '/settings/channels/edit/:channelId',

frontend/src/container/CreateAlertRule/AlertRuleDocumentationRedirection.test.tsx

@@ -1,12 +1,23 @@
 import ROUTES from 'constants/routes';
 import * as usePrefillAlertConditions from 'container/FormAlertRules/usePrefillAlertConditions';
-import AlertTypeSelectionPage from 'pages/AlertTypeSelection';
 import CreateAlertPage from 'pages/CreateAlert';
 import { act, fireEvent, render } from 'tests/test-utils';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { ALERT_TYPE_TO_TITLE, ALERT_TYPE_URL_MAP } from './constants';
 
+jest.mock('react-router-dom-v5-compat', () => ({
+	...jest.requireActual('react-router-dom-v5-compat'),
+	useNavigationType: jest.fn(() => 'PUSH'),
+	useLocation: jest.fn(() => ({
+		pathname: '/alerts/new',
+		search: '',
+		hash: '',
+		state: null,
+	})),
+	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
+}));
+
 jest
 	.spyOn(usePrefillAlertConditions, 'usePrefillAlertConditions')
 	.mockReturnValue({
@@ -54,20 +65,13 @@ describe('Alert rule documentation redirection', () => {
 		window.open = mockWindowOpen;
 	});
 
-	jest.mock('react-router-dom', () => ({
-		...jest.requireActual('react-router-dom'),
-		useLocation: (): { pathname: string } => ({
-			pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.ALERT_TYPE_SELECTION}`,
-		}),
-	}));
-
 	beforeEach(() => {
 		act(() => {
 			renderResult = render(
-				<AlertTypeSelectionPage />,
+				<CreateAlertPage />,
 				{},
 				{
-					initialRoute: ROUTES.ALERT_TYPE_SELECTION,
+					initialRoute: ROUTES.ALERTS_NEW,
 				},
 			);
 		});

frontend/src/container/CreateAlertRule/AnomalyAlertDocumentationRedirection.test.tsx

@@ -15,6 +15,18 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));
 
+jest.mock('react-router-dom-v5-compat', () => ({
+	...jest.requireActual('react-router-dom-v5-compat'),
+	useNavigationType: jest.fn(() => 'PUSH'),
+	useLocation: jest.fn(() => ({
+		pathname: '/alerts/new',
+		search: 'ruleType=anomaly_rule',
+		hash: '',
+		state: null,
+	})),
+	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
+}));
+
 window.ResizeObserver =
 	window.ResizeObserver ||
 	jest.fn().mockImplementation(() => ({

frontend/src/container/CreateAlertRule/CreateAlertRule.styles.scss

@@ -0,0 +1,75 @@
+.create-alert-tabs {
+	&__extra {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+	}
+}
+
+.create-alert-wrapper {
+	margin-top: 10px;
+
+	.divider {
+		border-color: var(--l1-border);
+		margin: 16px 0;
+	}
+
+	.breadcrumb-divider {
+		margin-top: 10px;
+	}
+}
+
+.create-alert__breadcrumb {
+	padding-left: 16px;
+
+	ol {
+		align-items: center;
+	}
+
+	.breadcrumb-item {
+		color: var(--l2-foreground);
+		font-size: 14px;
+		line-height: 20px;
+		letter-spacing: 0.25px;
+		padding: 0;
+	}
+
+	.ant-breadcrumb-separator,
+	.breadcrumb-item--last {
+		color: var(--muted-foreground);
+		font-family: 'Geist Mono';
+	}
+}
+
+.alerts-container {
+	.top-level-tab.periscope-tab {
+		padding: 2px 0;
+	}
+
+	.ant-tabs {
+		&-nav {
+			padding: 0 8px;
+			margin-bottom: 0 !important;
+
+			&::before {
+				border-bottom: 1px solid var(--l1-border) !important;
+			}
+		}
+
+		&-tab {
+			&[data-node-key='TriggeredAlerts'] {
+				margin-left: 16px;
+			}
+
+			&:not(:first-of-type) {
+				margin-left: 24px !important;
+			}
+
+			[aria-selected='false'] {
+				.periscope-tab {
+					color: var(--l2-foreground);
+				}
+			}
+		}
+	}
+}

frontend/src/container/CreateAlertRule/SelectAlertType/__tests__/SelectAlertType.test.tsx

@@ -0,0 +1,111 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { FeatureKeys } from 'constants/features';
+import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
+import * as appHooks from 'providers/App/App';
+import { AlertTypes } from 'types/api/alerts/alertTypes';
+
+import SelectAlertType from '..';
+
+const useAppContextSpy = jest.spyOn(appHooks, 'useAppContext');
+
+describe('SelectAlertType', () => {
+	const mockOnSelect = jest.fn();
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		useAppContextSpy.mockReturnValue(getAppContextMockState());
+	});
+
+	it('should render all alert type options when anomaly detection is enabled', () => {
+		useAppContextSpy.mockReturnValue({
+			...getAppContextMockState({}),
+			featureFlags: [
+				{
+					name: FeatureKeys.ANOMALY_DETECTION,
+					active: true,
+					usage: 0,
+					usage_limit: -1,
+					route: '',
+				},
+			],
+		});
+
+		render(<SelectAlertType onSelect={mockOnSelect} />);
+
+		expect(screen.getByText('metric_based_alert')).toBeInTheDocument();
+		expect(screen.getByText('log_based_alert')).toBeInTheDocument();
+		expect(screen.getByText('traces_based_alert')).toBeInTheDocument();
+		expect(screen.getByText('exceptions_based_alert')).toBeInTheDocument();
+		expect(screen.getByText('anomaly_based_alert')).toBeInTheDocument();
+	});
+
+	it('should render all alert type options except anomaly based alert when anomaly detection is disabled', () => {
+		render(<SelectAlertType onSelect={mockOnSelect} />);
+
+		expect(screen.getByText('metric_based_alert')).toBeInTheDocument();
+		expect(screen.getByText('log_based_alert')).toBeInTheDocument();
+		expect(screen.getByText('traces_based_alert')).toBeInTheDocument();
+		expect(screen.getByText('exceptions_based_alert')).toBeInTheDocument();
+		expect(screen.queryByText('anomaly_based_alert')).not.toBeInTheDocument();
+	});
+
+	it('should call onSelect with metrics based alert type', () => {
+		render(<SelectAlertType onSelect={mockOnSelect} />);
+		fireEvent.click(screen.getByText('metric_based_alert'));
+
+		expect(mockOnSelect).toHaveBeenCalledWith(
+			AlertTypes.METRICS_BASED_ALERT,
+			false,
+		);
+	});
+
+	it('should call onSelect with anomaly based alert type', () => {
+		useAppContextSpy.mockReturnValue({
+			...getAppContextMockState({}),
+			featureFlags: [
+				{
+					name: FeatureKeys.ANOMALY_DETECTION,
+					active: true,
+					usage: 0,
+					usage_limit: -1,
+					route: '',
+				},
+			],
+		});
+
+		render(<SelectAlertType onSelect={mockOnSelect} />);
+		fireEvent.click(screen.getByText('anomaly_based_alert'));
+
+		expect(mockOnSelect).toHaveBeenCalledWith(
+			AlertTypes.ANOMALY_BASED_ALERT,
+			false,
+		);
+	});
+
+	it('should call onSelect with log based alert type', () => {
+		render(<SelectAlertType onSelect={mockOnSelect} />);
+		fireEvent.click(screen.getByText('log_based_alert'));
+
+		expect(mockOnSelect).toHaveBeenCalledWith(AlertTypes.LOGS_BASED_ALERT, false);
+	});
+
+	it('should call onSelect with traces based alert type', () => {
+		render(<SelectAlertType onSelect={mockOnSelect} />);
+		fireEvent.click(screen.getByText('traces_based_alert'));
+
+		expect(mockOnSelect).toHaveBeenCalledWith(
+			AlertTypes.TRACES_BASED_ALERT,
+			false,
+		);
+	});
+
+	it('should call onSelect with exceptions based alert type', () => {
+		render(<SelectAlertType onSelect={mockOnSelect} />);
+		fireEvent.click(screen.getByText('exceptions_based_alert'));
+
+		expect(mockOnSelect).toHaveBeenCalledWith(
+			AlertTypes.EXCEPTIONS_BASED_ALERT,
+			false,
+		);
+	});
+});

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

@@ -1,13 +1,37 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
+import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap } from 'constants/queryBuilder';
+import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
 import * as useCompositeQueryParamHooks from 'hooks/queryBuilder/useGetCompositeQueryParam';
+import * as navigateHooks from 'hooks/useSafeNavigate';
 import * as useUrlQueryHooks from 'hooks/useUrlQuery';
+import * as appHooks from 'providers/App/App';
+import { render } from 'tests/test-utils';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { DataSource } from 'types/common/queryBuilder';
 
 import CreateAlertRule from '../index';
 
+jest.mock('react-router-dom-v5-compat', () => ({
+	...jest.requireActual('react-router-dom-v5-compat'),
+	useNavigationType: jest.fn(() => 'PUSH'),
+	useLocation: jest.fn(() => ({
+		pathname: '/alerts/new',
+		search: '',
+		hash: '',
+		state: null,
+	})),
+	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
+}));
+
+jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
+	__esModule: true,
+	default: function MockDateTimeSelector(): JSX.Element {
+		return <div data-testid="datetime-selector">Mock DateTime Selector</div>;
+	},
+}));
+
 jest.mock('container/FormAlertRules', () => ({
 	__esModule: true,
 	default: function MockFormAlertRules({
@@ -48,10 +72,14 @@ const useCompositeQueryParamSpy = jest.spyOn(
 	'useGetCompositeQueryParam',
 );
 const useUrlQuerySpy = jest.spyOn(useUrlQueryHooks, 'default');
+const useSafeNavigateSpy = jest.spyOn(navigateHooks, 'useSafeNavigate');
+const useAppContextSpy = jest.spyOn(appHooks, 'useAppContext');
 
 const mockSetUrlQuery = jest.fn();
 const mockToString = jest.fn();
 const mockGetUrlQuery = jest.fn();
+const mockSafeNavigate = jest.fn();
+const mockDeleteUrlQuery = jest.fn();
 
 const FORM_ALERT_RULES_TEXT = 'Form Alert Rules';
 const CREATE_ALERT_V2_TEXT = 'Create Alert V2';
@@ -63,8 +91,13 @@ describe('CreateAlertRule', () => {
 			set: mockSetUrlQuery,
 			toString: mockToString,
 			get: mockGetUrlQuery,
+			delete: mockDeleteUrlQuery,
 		} as Partial<URLSearchParams> as URLSearchParams);
 		useCompositeQueryParamSpy.mockReturnValue(initialQueriesMap.metrics);
+		useSafeNavigateSpy.mockReturnValue({
+			safeNavigate: mockSafeNavigate,
+		});
+		useAppContextSpy.mockReturnValue(getAppContextMockState());
 	});
 
 	it('should render classic flow when showClassicCreateAlertsPage is true', () => {
@@ -72,18 +105,53 @@ describe('CreateAlertRule', () => {
 			if (key === QueryParams.showClassicCreateAlertsPage) {
 				return 'true';
 			}
+			if (key === QueryParams.alertType) {
+				return AlertTypes.METRICS_BASED_ALERT;
+			}
 			return null;
 		});
 		render(<CreateAlertRule />);
 		expect(screen.getByText(FORM_ALERT_RULES_TEXT)).toBeInTheDocument();
 	});
 
-	it('should render new flow by default', () => {
-		mockGetUrlQuery.mockReturnValue(null);
+	it('should render new flow when alertType is provided', () => {
+		mockGetUrlQuery.mockImplementation((key: string) => {
+			if (key === QueryParams.alertType) {
+				return AlertTypes.METRICS_BASED_ALERT;
+			}
+			return null;
+		});
 		render(<CreateAlertRule />);
 		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
 	});
 
+	it('should render type selection when no alertType in URL and no compositeQuery', () => {
+		mockGetUrlQuery.mockReturnValue(null);
+		useCompositeQueryParamSpy.mockReturnValue(null);
+		render(<CreateAlertRule />);
+		expect(screen.queryByText(FORM_ALERT_RULES_TEXT)).not.toBeInTheDocument();
+		expect(screen.queryByText(CREATE_ALERT_V2_TEXT)).not.toBeInTheDocument();
+	});
+
+	it('should skip type selection and render alert form when compositeQuery is present', () => {
+		mockGetUrlQuery.mockReturnValue(null);
+		useCompositeQueryParamSpy.mockReturnValue({
+			...initialQueriesMap.metrics,
+			builder: {
+				...initialQueriesMap.metrics.builder,
+				queryData: [
+					{
+						...initialQueriesMap.metrics.builder.queryData[0],
+						dataSource: DataSource.METRICS,
+					},
+				],
+			},
+		});
+		render(<CreateAlertRule />);
+		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
+		expect(screen.getByText(AlertTypes.METRICS_BASED_ALERT)).toBeInTheDocument();
+	});
+
 	it('should render classic flow when ruleType is anomaly_rule even if showClassicCreateAlertsPage is not true', () => {
 		mockGetUrlQuery.mockImplementation((key: string) => {
 			if (key === QueryParams.showClassicCreateAlertsPage) {
@@ -111,8 +179,13 @@ describe('CreateAlertRule', () => {
 		expect(screen.getByText(AlertTypes.LOGS_BASED_ALERT)).toBeInTheDocument();
 	});
 
-	it('should use alertType from compositeQuery dataSource when alertType is not in URL', () => {
-		mockGetUrlQuery.mockReturnValue(null);
+	it('should use alertType from URL over compositeQuery dataSource', () => {
+		mockGetUrlQuery.mockImplementation((key: string) => {
+			if (key === QueryParams.alertType) {
+				return AlertTypes.LOGS_BASED_ALERT;
+			}
+			return null;
+		});
 		useCompositeQueryParamSpy.mockReturnValue({
 			...initialQueriesMap.metrics,
 			builder: {
@@ -127,14 +200,123 @@ describe('CreateAlertRule', () => {
 		});
 		render(<CreateAlertRule />);
 		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(AlertTypes.TRACES_BASED_ALERT)).toBeInTheDocument();
+		expect(screen.getByText(AlertTypes.LOGS_BASED_ALERT)).toBeInTheDocument();
 	});
 
-	it('should default to METRICS_BASED_ALERT when no alertType and no compositeQuery', () => {
-		mockGetUrlQuery.mockReturnValue(null);
-		useCompositeQueryParamSpy.mockReturnValue(null);
-		render(<CreateAlertRule />);
-		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(AlertTypes.METRICS_BASED_ALERT)).toBeInTheDocument();
+	describe('handleSelectType navigation', () => {
+		beforeEach(() => {
+			mockGetUrlQuery.mockReturnValue(null);
+			useCompositeQueryParamSpy.mockReturnValue(null);
+		});
+
+		it('should navigate with threshold alert params for metrics alert', () => {
+			render(<CreateAlertRule />);
+			fireEvent.click(screen.getByText('metric_based_alert'));
+
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.ruleType,
+				'threshold_rule',
+			);
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.alertType,
+				AlertTypes.METRICS_BASED_ALERT,
+			);
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
+
+		it('should navigate with threshold alert params for logs alert', () => {
+			render(<CreateAlertRule />);
+			fireEvent.click(screen.getByText('log_based_alert'));
+
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.ruleType,
+				'threshold_rule',
+			);
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.alertType,
+				AlertTypes.LOGS_BASED_ALERT,
+			);
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
+
+		it('should navigate with threshold alert params for traces alert', () => {
+			render(<CreateAlertRule />);
+			fireEvent.click(screen.getByText('traces_based_alert'));
+
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.ruleType,
+				'threshold_rule',
+			);
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.alertType,
+				AlertTypes.TRACES_BASED_ALERT,
+			);
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
+
+		it('should navigate with threshold alert params for exceptions alert', () => {
+			render(<CreateAlertRule />);
+			fireEvent.click(screen.getByText('exceptions_based_alert'));
+
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.ruleType,
+				'threshold_rule',
+			);
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.alertType,
+				AlertTypes.EXCEPTIONS_BASED_ALERT,
+			);
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
+
+		it('should navigate with anomaly detection params for anomaly alert', () => {
+			useAppContextSpy.mockReturnValue({
+				...getAppContextMockState({}),
+				featureFlags: [
+					{
+						name: FeatureKeys.ANOMALY_DETECTION,
+						active: true,
+						usage: 0,
+						usage_limit: -1,
+						route: '',
+					},
+				],
+			});
+
+			render(<CreateAlertRule />);
+			fireEvent.click(screen.getByText('anomaly_based_alert'));
+
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.ruleType,
+				'anomaly_rule',
+			);
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.alertType,
+				AlertTypes.METRICS_BASED_ALERT,
+			);
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
+
+		it('should navigate even when showClassicCreateAlertsPage flag is present', () => {
+			mockGetUrlQuery.mockImplementation((key: string) => {
+				if (key === QueryParams.showClassicCreateAlertsPage) {
+					return 'true';
+				}
+				return null;
+			});
+
+			render(<CreateAlertRule />);
+			fireEvent.click(screen.getByText('metric_based_alert'));
+
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.ruleType,
+				'threshold_rule',
+			);
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.alertType,
+				AlertTypes.METRICS_BASED_ALERT,
+			);
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
 	});
 });

frontend/src/container/CreateAlertRule/defaults.ts

@@ -208,3 +208,11 @@ export const ALERTS_VALUES_MAP: Record<AlertTypes, AlertDef> = {
 	[AlertTypes.TRACES_BASED_ALERT]: traceAlertDefaults,
 	[AlertTypes.EXCEPTIONS_BASED_ALERT]: exceptionAlertDefaults,
 };
+
+export const ALERT_TYPE_BREADCRUMB_TITLE: Record<AlertTypes, string> = {
+	[AlertTypes.ANOMALY_BASED_ALERT]: 'Anomaly-Based Alert',
+	[AlertTypes.METRICS_BASED_ALERT]: 'Metric-Based Alert',
+	[AlertTypes.LOGS_BASED_ALERT]: 'Log-Based Alert',
+	[AlertTypes.TRACES_BASED_ALERT]: 'Traces-Based Alert',
+	[AlertTypes.EXCEPTIONS_BASED_ALERT]: 'Exceptions-Based Alert',
+};

frontend/src/container/CreateAlertRule/index.tsx

@@ -1,21 +1,34 @@
-import { useMemo } from 'react';
-import { Form } from 'antd';
+import { useCallback, useEffect, useMemo } from 'react';
+import { Form, Tabs, TabsProps } from 'antd';
+import logEvent from 'api/common/logEvent';
+import ConfigureIcon from 'assets/AlertHistory/ConfigureIcon';
+import AlertBreadcrumb from 'components/AlertBreadcrumb';
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
 import CreateAlertV2 from 'container/CreateAlertV2';
 import FormAlertRules, { AlertDetectionTypes } from 'container/FormAlertRules';
+import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { AlertListTabs } from 'pages/AlertList/types';
+import { GalleryVerticalEnd, Pyramid } from '@signozhq/icons';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { AlertDef } from 'types/api/alerts/def';
 
 import { ALERT_TYPE_VS_SOURCE_MAPPING } from './config';
-import { ALERTS_VALUES_MAP } from './defaults';
+import { ALERTS_VALUES_MAP, ALERT_TYPE_BREADCRUMB_TITLE } from './defaults';
+import SelectAlertType from './SelectAlertType';
+
+import './CreateAlertRule.styles.scss';
 
 function CreateRules(): JSX.Element {
 	const [formInstance] = Form.useForm();
 	const compositeQuery = useGetCompositeQueryParam();
 	const queryParams = useUrlQuery();
+	const { safeNavigate } = useSafeNavigate();
 
 	const ruleTypeFromURL = queryParams.get(QueryParams.ruleType);
 	const alertTypeFromURL = queryParams.get(QueryParams.alertType);
@@ -23,6 +36,15 @@ function CreateRules(): JSX.Element {
 	const showClassicCreateAlertsPageFlag =
 		queryParams.get(QueryParams.showClassicCreateAlertsPage) === 'true';
 
+	const isTypeSelectionMode =
+		!alertTypeFromURL && !ruleTypeFromURL && !compositeQuery;
+
+	useEffect(() => {
+		if (isTypeSelectionMode) {
+			logEvent('Alert: New alert data source selection page visited', {});
+		}
+	}, [isTypeSelectionMode]);
+
 	const alertType = useMemo(() => {
 		if (ruleTypeFromURL === AlertDetectionTypes.ANOMALY_DETECTION_ALERT) {
 			return AlertTypes.ANOMALY_BASED_ALERT;
@@ -45,22 +67,142 @@ function CreateRules(): JSX.Element {
 		[alertType, version],
 	);
 
-	// Load old alerts flow always for anomaly based alerts and when showClassicCreateAlertsPage is true
-	if (
-		showClassicCreateAlertsPageFlag ||
-		alertType === AlertTypes.ANOMALY_BASED_ALERT
-	) {
-		return (
-			<FormAlertRules
-				alertType={alertType}
-				formInstance={formInstance}
-				initialValue={initialAlertValue}
-				ruleId=""
-			/>
-		);
-	}
+	const handleTabChange = useCallback(
+		(tab: string): void => {
+			queryParams.set('tab', tab);
+			queryParams.delete('subTab');
+			queryParams.delete('search');
+			safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${queryParams.toString()}`);
+		},
+		[safeNavigate, queryParams],
+	);
 
-	return <CreateAlertV2 alertType={alertType} />;
+	const handleSelectType = useCallback(
+		(type: AlertTypes, newTab?: boolean): void => {
+			if (type === AlertTypes.ANOMALY_BASED_ALERT) {
+				queryParams.set(
+					QueryParams.ruleType,
+					AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
+				);
+				queryParams.set(QueryParams.alertType, AlertTypes.METRICS_BASED_ALERT);
+			} else {
+				queryParams.set(QueryParams.ruleType, AlertDetectionTypes.THRESHOLD_ALERT);
+				queryParams.set(QueryParams.alertType, type);
+			}
+
+			safeNavigate(`${ROUTES.ALERTS_NEW}?${queryParams.toString()}`, { newTab });
+		},
+		[queryParams, safeNavigate],
+	);
+
+	const alertContent = useMemo(() => {
+		if (isTypeSelectionMode) {
+			return <SelectAlertType onSelect={handleSelectType} />;
+		}
+
+		if (
+			showClassicCreateAlertsPageFlag ||
+			alertType === AlertTypes.ANOMALY_BASED_ALERT
+		) {
+			return (
+				<FormAlertRules
+					alertType={alertType}
+					formInstance={formInstance}
+					initialValue={initialAlertValue}
+					ruleId=""
+				/>
+			);
+		}
+		return <CreateAlertV2 alertType={alertType} />;
+	}, [
+		isTypeSelectionMode,
+		handleSelectType,
+		showClassicCreateAlertsPageFlag,
+		alertType,
+		formInstance,
+		initialAlertValue,
+	]);
+
+	const items: TabsProps['items'] = [
+		{
+			label: (
+				<div className="periscope-tab top-level-tab">
+					<GalleryVerticalEnd size={14} />
+					Triggered Alerts
+				</div>
+			),
+			key: AlertListTabs.TRIGGERED_ALERTS,
+			children: null,
+		},
+		{
+			label: (
+				<div className="periscope-tab top-level-tab">
+					<Pyramid size={14} />
+					Alert Rules
+				</div>
+			),
+			key: AlertListTabs.ALERT_RULES,
+			children: (
+				<div className="create-alert-wrapper">
+					<AlertBreadcrumb
+						className="create-alert__breadcrumb"
+						items={
+							isTypeSelectionMode
+								? [
+										{
+											title: 'Alert Rules',
+											route: `${ROUTES.LIST_ALL_ALERT}?tab=${AlertListTabs.ALERT_RULES}`,
+										},
+										{ title: 'Select Alert Type', isLast: true },
+									]
+								: [
+										{
+											title: 'Alert Rules',
+											route: `${ROUTES.LIST_ALL_ALERT}?tab=${AlertListTabs.ALERT_RULES}`,
+										},
+										{ title: 'Select Alert Type', route: ROUTES.ALERTS_NEW },
+										{
+											title: ALERT_TYPE_BREADCRUMB_TITLE[alertType],
+											isLast: true,
+										},
+									]
+						}
+					/>
+					{alertContent}
+				</div>
+			),
+		},
+		{
+			label: (
+				<div className="periscope-tab top-level-tab">
+					<ConfigureIcon width={14} height={14} />
+					Configuration
+				</div>
+			),
+			key: AlertListTabs.CONFIGURATION,
+			children: null,
+		},
+	];
+
+	return (
+		<Tabs
+			destroyInactiveTabPane
+			items={items}
+			activeKey={AlertListTabs.ALERT_RULES}
+			onChange={handleTabChange}
+			className="alerts-container create-alert-tabs"
+			tabBarExtraContent={
+				<div className="create-alert-tabs__extra">
+					<DateTimeSelector showAutoRefresh />
+					<HeaderRightSection
+						enableAnnouncements={false}
+						enableShare
+						enableFeedback
+					/>
+				</div>
+			}
+		/>
+	);
 }
 
 export default CreateRules;

frontend/src/container/CreateAlertV2/CreateAlertHeader/CreateAlertHeader.tsx

@@ -9,6 +9,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RotateCcw } from '@signozhq/icons';
+import { useAlertRuleOptional } from 'providers/Alert';
 import { Labels } from 'types/api/alerts/def';
 
 import { useCreateAlertState } from '../context';
@@ -18,6 +19,7 @@ import './styles.scss';
 
 function CreateAlertHeader(): JSX.Element {
 	const { alertState, setAlertState, isEditMode } = useCreateAlertState();
+	const alertRuleContext = useAlertRuleOptional();
 
 	const { currentQuery } = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
@@ -74,9 +76,13 @@ function CreateAlertHeader(): JSX.Element {
 				<Input
 					type="text"
 					value={alertState.name}
-					onChange={(e): void =>
-						setAlertState({ type: 'SET_ALERT_NAME', payload: e.target.value })
-					}
+					onChange={(e): void => {
+						const newName = e.target.value;
+						setAlertState({ type: 'SET_ALERT_NAME', payload: newName });
+						if (isEditMode && alertRuleContext?.setAlertRuleName) {
+							alertRuleContext.setAlertRuleName(newName);
+						}
+					}}
 					className="alert-header__input title"
 					placeholder="Enter alert rule name"
 					data-testid="alert-name-input"

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

@@ -20,6 +20,11 @@ import {
 } from './utils';
 
 import './styles.scss';
+import {
+	invalidateGetRuleByID,
+	invalidateListRules,
+} from 'api/generated/services/rules';
+import { useQueryClient } from 'react-query';
 
 function Footer(): JSX.Element {
 	const {
@@ -115,6 +120,7 @@ function Footer(): JSX.Element {
 		testAlertRule,
 	]);
 
+	const queryClient = useQueryClient();
 	const handleSaveAlert = useCallback((): void => {
 		const payload = buildCreateThresholdAlertRulePayload({
 			alertType,
@@ -133,6 +139,9 @@ function Footer(): JSX.Element {
 				},
 				{
 					onSuccess: () => {
+						void invalidateGetRuleByID(queryClient, { id: ruleId });
+						void invalidateListRules(queryClient);
+
 						toast.success('Alert rule updated successfully');
 						safeNavigate('/alerts');
 					},

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

@@ -7,6 +7,7 @@ import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationS
 
 import * as createAlertState from '../../context';
 import Footer from '../Footer';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 
 // Mock the hooks used by Footer component
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
@@ -64,6 +65,12 @@ const mockAlertContextState = createMockAlertContextState({
 	},
 });
 
+const WrappedFooter = (): JSX.Element => (
+	<MockQueryClientProvider>
+		<Footer />
+	</MockQueryClientProvider>
+);
+
 jest
 	.spyOn(createAlertState, 'useCreateAlertState')
 	.mockReturnValue(mockAlertContextState);
@@ -97,20 +104,20 @@ describe('Footer', () => {
 	});
 
 	it('should render the component with 3 buttons', () => {
-		render(<Footer />);
+		render(<WrappedFooter />);
 		expect(screen.getByText(SAVE_ALERT_RULE_TEXT)).toBeInTheDocument();
 		expect(screen.getByText(TEST_NOTIFICATION_TEXT)).toBeInTheDocument();
 		expect(screen.getByText(DISCARD_TEXT)).toBeInTheDocument();
 	});
 
 	it('discard action works correctly', () => {
-		render(<Footer />);
+		render(<WrappedFooter />);
 		fireEvent.click(screen.getByText(DISCARD_TEXT));
 		expect(mockDiscardAlertRule).toHaveBeenCalled();
 	});
 
 	it('save alert rule action works correctly', () => {
-		render(<Footer />);
+		render(<WrappedFooter />);
 		fireEvent.click(screen.getByText(SAVE_ALERT_RULE_TEXT));
 		expect(mockCreateAlertRule).toHaveBeenCalled();
 	});
@@ -120,13 +127,13 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isEditMode: true,
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 		fireEvent.click(screen.getByText(SAVE_ALERT_RULE_TEXT));
 		expect(mockUpdateAlertRule).toHaveBeenCalled();
 	});
 
 	it('test notification action works correctly', () => {
-		render(<Footer />);
+		render(<WrappedFooter />);
 		fireEvent.click(screen.getByText(TEST_NOTIFICATION_TEXT));
 		expect(mockTestAlertRule).toHaveBeenCalled();
 	});
@@ -136,7 +143,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isCreatingAlertRule: true,
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		expect(
 			screen.getByRole('button', { name: /save alert rule/i }),
@@ -152,7 +159,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isUpdatingAlertRule: true,
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		// Target the button elements directly instead of the text spans inside them
 		expect(
@@ -169,7 +176,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isTestingAlertRule: true,
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		// Target the button elements directly instead of the text spans inside them
 		expect(
@@ -189,7 +196,7 @@ describe('Footer', () => {
 				name: '',
 			},
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		expect(
 			screen.getByRole('button', { name: /save alert rule/i }),
@@ -217,7 +224,7 @@ describe('Footer', () => {
 			},
 		});
 
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		expect(
 			screen.getByRole('button', { name: /save alert rule/i }),
@@ -245,7 +252,7 @@ describe('Footer', () => {
 			},
 		});
 
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		expect(
 			screen.getByRole('button', { name: /save alert rule/i }),
@@ -261,7 +268,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isTestingAlertRule: true,
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		// When testing alert rule, the play icon is replaced with a loader icon
 		expect(
@@ -276,7 +283,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isUpdatingAlertRule: true,
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		// When updating alert rule, the check icon is replaced with a loader icon
 		expect(
@@ -291,7 +298,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isCreatingAlertRule: true,
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		// When creating alert rule, the check icon is replaced with a loader icon
 		expect(

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -3,13 +3,14 @@ import {
 	Checkbox,
 	Collapse,
 	Form,
+	InputNumber,
+	InputNumberProps,
 	Select,
 	SelectProps,
 	Space,
 } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
-import InputNumber from 'components/InputNumber';
 import {
 	getCategoryByOptionId,
 	getCategorySelectOptionByName,
@@ -288,7 +289,7 @@ function RuleOptions({
 		</Form.Item>
 	);
 
-	const onChange = (value: number | null): void => {
+	const onChange: InputNumberProps['onChange'] = (value): void => {
 		setAlertDef({
 			...alertDef,
 			condition: {
@@ -390,9 +391,11 @@ function RuleOptions({
 						<Space direction="horizontal" align="center">
 							<Form.Item noStyle>
 								<InputNumber
-									prefix={t('field_threshold')}
+									addonBefore={t('field_threshold')}
 									value={alertDef?.condition?.target}
 									onChange={onChange}
+									type="number"
+									onWheel={(e): void => e.currentTarget.blur()}
 								/>
 							</Form.Item>
 
@@ -452,6 +455,8 @@ function RuleOptions({
 														},
 													});
 												}}
+												type="number"
+												onWheel={(e): void => e.currentTarget.blur()}
 											/>
 										</Form.Item>
 										<Typography.Text>{t('text_for')}</Typography.Text>
@@ -489,6 +494,8 @@ function RuleOptions({
 														},
 													});
 												}}
+												type="number"
+												onWheel={(e): void => e.currentTarget.blur()}
 											/>
 										</Form.Item>
 										<Typography.Text>{t('text_num_points')}</Typography.Text>

frontend/src/container/FormAlertRules/index.tsx

@@ -38,6 +38,7 @@ import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/map
 import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
 import { isEmpty, isEqual } from 'lodash-es';
 import Tabs2 from 'periscope/components/Tabs2';
+import { useAlertRuleOptional } from 'providers/Alert';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { AppState } from 'store/reducers';
@@ -92,7 +93,6 @@ const ALERT_SETUP_GUIDE_URLS: Record<AlertTypes, string> = {
 		'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 };
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function FormAlertRules({
 	alertType,
 	formInstance,
@@ -160,6 +160,32 @@ function FormAlertRules({
 	const [alertDef, setAlertDef] = useState<AlertDef>(initialValue);
 	const [yAxisUnit, setYAxisUnit] = useState<string>(currentQuery.unit || '');
 
+	const alertRuleContext = useAlertRuleOptional();
+	const providerAlertName = alertRuleContext?.alertRuleName;
+	useEffect(() => {
+		if (providerAlertName) {
+			setAlertDef((prev) => {
+				if (prev.alert === providerAlertName) {
+					return prev;
+				}
+				return { ...prev, alert: providerAlertName };
+			});
+			formInstance.setFieldsValue({ alert: providerAlertName });
+		}
+	}, [providerAlertName, formInstance]);
+
+	// Wrap setAlertDef to sync alert name to provider when user types
+	const handleSetAlertDef = useCallback(
+		(newDef: AlertDef) => {
+			setAlertDef(newDef);
+			// Sync alert name change to provider for header display
+			if (newDef.alert !== alertDef.alert && alertRuleContext?.setAlertRuleName) {
+				alertRuleContext.setAlertRuleName(newDef.alert);
+			}
+		},
+		[alertDef.alert, alertRuleContext],
+	);
+
 	const alertTypeFromURL = urlQuery.get(QueryParams.ruleType);
 
 	const [detectionMethod, setDetectionMethod] = useState<string | null>(null);
@@ -680,7 +706,7 @@ function FormAlertRules({
 	const renderBasicInfo = (): JSX.Element => (
 		<BasicInfo
 			alertDef={alertDef}
-			setAlertDef={setAlertDef}
+			setAlertDef={handleSetAlertDef}
 			isNewRule={isNewRule}
 		/>
 	);

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -11,6 +11,7 @@ import {
 	DatePicker,
 	Form,
 	Input,
+	InputNumber,
 	Modal,
 	Row,
 	Select,
@@ -22,7 +23,6 @@ import {
 	Tooltip,
 } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import InputNumber from 'components/InputNumber';
 import type { NotificationInstance } from 'antd/es/notification/interface';
 import type { CollapseProps } from 'antd/lib';
 import {
@@ -1212,7 +1212,7 @@ function MultiIngestionSettings(): JSX.Element {
 																						<Form.Item name="dailyLimit" key="dailyLimit">
 																							<InputNumber
 																								disabled={!activeSignal?.config?.day?.enabled}
-																								suffix={
+																								addonAfter={
 																									<Select defaultValue="GiB" disabled>
 																										<Option value="TiB">TiB</Option>
 																										<Option value="GiB">GiB</Option>
@@ -1235,7 +1235,7 @@ function MultiIngestionSettings(): JSX.Element {
 																						<Form.Item name="dailyCount" key="dailyCount">
 																							<InputNumber
 																								placeholder="Enter max # of samples/day"
-																								suffix={
+																								addonAfter={
 																									<Form.Item
 																										name="dailyCountUnit"
 																										noStyle
@@ -1302,7 +1302,7 @@ function MultiIngestionSettings(): JSX.Element {
 																						<Form.Item name="secondsLimit" key="secondsLimit">
 																							<InputNumber
 																								disabled={!activeSignal?.config?.second?.enabled}
-																								suffix={
+																								addonAfter={
 																									<Select defaultValue="GiB" disabled>
 																										<Option value="TiB">TiB</Option>
 																										<Option value="GiB">GiB</Option>
@@ -1325,7 +1325,7 @@ function MultiIngestionSettings(): JSX.Element {
 																						<Form.Item name="secondsCount" key="secondsCount">
 																							<InputNumber
 																								placeholder="Enter max # of samples/s"
-																								suffix={
+																								addonAfter={
 																									<Form.Item
 																										name="secondsCountUnit"
 																										noStyle

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -111,7 +111,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				number: allAlertRules?.length,
 				layout: 'new',
 			});
-			safeNavigate(ROUTES.ALERT_TYPE_SELECTION, {
+			safeNavigate(ROUTES.ALERTS_NEW, {
 				newTab: isModifierKeyPressed(e),
 			});
 		},

frontend/src/container/LogDetailedView/Overview.tsx

@@ -14,7 +14,7 @@ import { ILog } from 'types/api/logs/log';
 
 import { ActionItemProps } from './ActionItem';
 import TableView from './TableView';
-import { removeEscapeCharacters } from './utils';
+import { getBodyDisplayString, removeEscapeCharacters } from './utils';
 
 import './Overview.styles.scss';
 
@@ -112,7 +112,7 @@ function Overview({
 						children: (
 							<div className="logs-body-content">
 								<MEditor
-									value={removeEscapeCharacters(logData.body)}
+									value={removeEscapeCharacters(getBodyDisplayString(logData.body))}
 									language="json"
 									options={options}
 									onChange={(): void => {}}

frontend/src/container/LogDetailedView/TableView.tsx

@@ -106,10 +106,20 @@ function TableView({
 		isListViewPanel,
 	]);
 
-	const flattenLogData: Record<string, string> | null = useMemo(
-		() => (logData ? flattenObject(logData) : null),
-		[logData],
-	);
+	// When USE_JSON_BODY is enabled, body arrives as a pre-parsed object. Serialize it
+	// back to a string so flattenObject keeps `body` as a single table row instead of
+	// recursively expanding it into dotted sub-keys (body.message, body.foo.bar, …),
+	// which would break the tree view in BodyContent that relies on record.field === 'body'.
+	const flattenLogData: Record<string, string> | null = useMemo(() => {
+		if (!logData) {
+			return null;
+		}
+		const normalizedLog =
+			typeof logData.body === 'object' && logData.body !== null
+				? { ...logData, body: JSON.stringify(logData.body) }
+				: logData;
+		return flattenObject(normalizedLog);
+	}, [logData]);
 
 	const handleClick = (
 		operator: string,

frontend/src/container/LogDetailedView/TableView/useAsyncJSONProcessing.ts

@@ -10,7 +10,7 @@ const MAX_BODY_BYTES = 100 * 1024; // 100 KB
 
 // Hook for async JSON processing
 const useAsyncJSONProcessing = (
-	value: string,
+	value: string | Record<string, unknown>,
 	shouldProcess: boolean,
 	handleChangeSelectedView?: ChangeViewFunctionType,
 ): {
@@ -40,11 +40,17 @@ const useAsyncJSONProcessing = (
 			return (): void => {};
 		}
 
-		// Avoid processing if the json is too large
-		const byteSize = new Blob([value]).size;
-		if (byteSize > MAX_BODY_BYTES) {
-			return (): void => {};
-		}
+		// When value is already a parsed object skip the size check and JSON parsing
+		const parseBody = (): Record<string, unknown> | null => {
+			if (typeof value === 'object' && value !== null) {
+				return value as Record<string, unknown>;
+			}
+			const byteSize = new Blob([value as string]).size;
+			if (byteSize > MAX_BODY_BYTES) {
+				return null;
+			}
+			return recursiveParseJSON(value as string);
+		};
 
 		processingRef.current = true;
 		setJsonState({ isLoading: true, treeData: null, error: null });
@@ -53,8 +59,8 @@ const useAsyncJSONProcessing = (
 		const processAsync = (): void => {
 			setTimeout(() => {
 				try {
-					const parsedBody = recursiveParseJSON(value);
-					if (!isEmpty(parsedBody)) {
+					const parsedBody = parseBody();
+					if (parsedBody && !isEmpty(parsedBody)) {
 						const treeData = jsonToDataNodes(parsedBody, {
 							isBodyJsonQueryEnabled,
 							handleChangeSelectedView,
@@ -82,8 +88,8 @@ const useAsyncJSONProcessing = (
 					// eslint-disable-next-line sonarjs/no-identical-functions
 					(): void => {
 						try {
-							const parsedBody = recursiveParseJSON(value);
-							if (!isEmpty(parsedBody)) {
+							const parsedBody = parseBody();
+							if (parsedBody && !isEmpty(parsedBody)) {
 								const treeData = jsonToDataNodes(parsedBody, {
 									isBodyJsonQueryEnabled,
 									handleChangeSelectedView,

frontend/src/container/LogDetailedView/utils.tsx

@@ -4,7 +4,11 @@ import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import dompurify from 'dompurify';
 import { uniqueId } from 'lodash-es';
-import { ILog, ILogAggregateAttributesResources } from 'types/api/logs/log';
+import {
+	ILog,
+	ILogAggregateAttributesResources,
+	ILogBody,
+} from 'types/api/logs/log';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { FORBID_DOM_PURIFY_ATTR, FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
@@ -433,3 +437,8 @@ export const getSanitizedLogBody = (
 		return '{}';
 	}
 };
+
+// Returns a plain string for display contexts (Monaco editor, table cells, raw log row).
+export function getBodyDisplayString(body: string | ILogBody): string {
+	return typeof body === 'string' ? body : JSON.stringify(body as ILogBody);
+}

frontend/src/container/NewExplorerCTA/NewExplorerCTA.styles.scss

@@ -1,17 +1,5 @@
-.new-explorer-cta {
-	display: flex;
+.new-explorer-cta-with-badge {
+	display: inline-flex;
 	align-items: center;
-	color: var(--muted-foreground);
-
-	/* Bifrost (Ancient)/Content/sm */
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px; /* 142.857% */
-	letter-spacing: -0.07px;
-
-	.ant-btn-icon {
-		margin-inline-end: 0px;
-	}
+	gap: 6px;
 }

frontend/src/container/NewExplorerCTA/config.ts

@@ -1,9 +1,5 @@
 import ROUTES from 'constants/routes';
 
-export const RIBBON_STYLES = {
-	top: '-0.75rem',
-};
-
 export const buttonText: Record<string, string> = {
 	[ROUTES.LOGS_EXPLORER]: 'Old Explorer',
 	[ROUTES.TRACE]: 'New Explorer',

frontend/src/container/NewExplorerCTA/index.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Badge, Button } from 'antd';
+import { Button } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Undo } from '@signozhq/icons';
 import { isModifierKeyPressed } from 'utils/app';
 
-import { buttonText, RIBBON_STYLES } from './config';
+import { buttonText } from './config';
 
 import './NewExplorerCTA.styles.scss';
 
@@ -70,9 +71,12 @@ function NewExplorerCTA(): JSX.Element | null {
 	}
 
 	return (
-		<Badge.Ribbon style={RIBBON_STYLES} text="New">
+		<span className="new-explorer-cta-with-badge">
 			{button}
-		</Badge.Ribbon>
+			<Badge color="robin" variant="default">
+				New
+			</Badge>
+		</span>
 	);
 }
 

frontend/src/container/NewWidget/RightContainer/SettingSections/AxesSection/AxesSection.tsx

@@ -1,8 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
-import { Select } from 'antd';
+import { InputNumber, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { Axis3D, ChartLine, Spline } from '@signozhq/icons';
-import InputNumber from 'components/InputNumber';
 
 import SettingsSection from '../../components/SettingsSection/SettingsSection';
 
@@ -49,6 +48,7 @@ export default function AxesSection({
 					<section className="container">
 						<Typography.Text className="text">Soft Min</Typography.Text>
 						<InputNumber
+							type="number"
 							value={softMin}
 							onChange={softMinHandler}
 							rootClassName="input"
@@ -58,6 +58,7 @@ export default function AxesSection({
 						<Typography.Text className="text">Soft Max</Typography.Text>
 						<InputNumber
 							value={softMax}
+							type="number"
 							rootClassName="input"
 							onChange={softMaxHandler}
 						/>

frontend/src/container/NewWidget/RightContainer/SettingSections/HistogramBucketsSection/HistogramBucketsSection.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
-import { Switch } from 'antd';
+import { InputNumber, Switch } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import InputNumber from 'components/InputNumber';
 
 import SettingsSection from '../../components/SettingsSection/SettingsSection';
 
@@ -32,6 +31,7 @@ export default function HistogramBucketsSection({
 				</Typography.Text>
 				<InputNumber
 					value={bucketCount || null}
+					type="number"
 					min={0}
 					rootClassName="bucket-input"
 					placeholder="Default: 30"
@@ -44,6 +44,7 @@ export default function HistogramBucketsSection({
 				</Typography.Text>
 				<InputNumber
 					value={bucketWidth || null}
+					type="number"
 					precision={2}
 					placeholder="Default: Auto"
 					step={0.1}

frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useMemo, useRef, useState } from 'react';
 import { useDrag, useDrop, XYCoord } from 'react-dnd';
-import { Button, Input, Select, Space } from 'antd';
-import InputNumber from 'components/InputNumber';
+import { Button, Input, InputNumber, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';

frontend/src/container/OptionsMenu/MaxLinesField/index.tsx

@@ -14,7 +14,12 @@ function MaxLinesField({ config }: MaxLinesFieldProps): JSX.Element | null {
 	return (
 		<MaxLinesFieldWrapper>
 			<FieldTitle>{t('options_menu.maxLines')}</FieldTitle>
-			<MaxLinesInput value={config.value} onChange={config.onChange} />
+			<MaxLinesInput
+				controls
+				size="small"
+				value={config.value}
+				onChange={config.onChange}
+			/>
 		</MaxLinesFieldWrapper>
 	);
 }

frontend/src/container/OptionsMenu/MaxLinesField/styles.ts

@@ -1,4 +1,4 @@
-import InputNumber from 'components/InputNumber';
+import { InputNumber } from 'antd';
 import styled from 'styled-components';
 
 export const MaxLinesFieldWrapper = styled.div`

frontend/src/container/OptionsMenu/types.ts

@@ -1,6 +1,5 @@
-import { RadioProps, SelectProps } from 'antd';
+import { InputNumberProps, RadioProps, SelectProps } from 'antd';
 import { TelemetryFieldKey } from 'api/v5/v5';
-import type { InputNumberProps } from 'components/InputNumber';
 import { LogViewMode } from 'container/LogsTable';
 
 export enum FontSize {

frontend/src/container/PipelinePage/PipelineListsView/Preview/components/LogsList/index.tsx

@@ -2,6 +2,7 @@ import { Expand } from '@signozhq/icons';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { getBodyDisplayString } from 'container/LogDetailedView/utils';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useTimezone } from 'providers/Timezone';
 import { ILog } from 'types/api/logs/log';
@@ -26,7 +27,9 @@ function LogsList({ logs }: LogsListProps): JSX.Element {
 							DATE_TIME_FORMATS.UTC_MONTH_SHORT,
 						)}
 					</div>
-					<div className="logs-preview-list-item-body">{log.body}</div>
+					<div className="logs-preview-list-item-body">
+						{getBodyDisplayString(log.body)}
+					</div>
 					<div
 						className="logs-preview-list-item-expand"
 						onClick={makeLogDetailsHandler(log)}

frontend/src/container/QueryBuilder/filters/AggregateEveryFilter/index.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import InputNumber from 'components/InputNumber';
+import { InputNumber, InputNumberProps } from 'antd';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -15,9 +15,9 @@ function AggregateEveryFilter({
 		[query.dataSource],
 	);
 
-	const onChangeHandler = (value: number | null): void => {
-		if (value !== null && value >= 0) {
-			onChange(value);
+	const onChangeHandler: InputNumberProps<number>['onChange'] = (event) => {
+		if (event && event >= 0) {
+			onChange(event);
 		}
 	};
 

frontend/src/container/QueryBuilder/filters/Formula/Limit/Limit.tsx

@@ -1,4 +1,4 @@
-import InputNumber from 'components/InputNumber';
+import { InputNumber } from 'antd';
 
 import { selectStyle } from '../../QueryBuilderSearch/config';
 import { handleKeyDownLimitFilter } from '../../utils';
@@ -8,6 +8,7 @@ function LimitFilter({ onChange, formula }: LimitFilterProps): JSX.Element {
 	return (
 		<InputNumber
 			min={1}
+			type="number"
 			value={formula.limit}
 			style={selectStyle}
 			onChange={onChange}

frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx

@@ -1,4 +1,4 @@
-import InputNumber from 'components/InputNumber';
+import { InputNumber } from 'antd';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -13,6 +13,7 @@ function LimitFilter({ onChange, query }: LimitFilterProps): JSX.Element {
 	return (
 		<InputNumber
 			min={1}
+			type="number"
 			value={query.limit}
 			style={selectStyle}
 			disabled={isDisabled}

frontend/src/container/TopNav/index.tsx

@@ -33,14 +33,12 @@ function TopNav(): JSX.Element | null {
 		[location.pathname],
 	);
 
-	const isNewAlertsLandingPage = useMemo(
-		() =>
-			matchPath(location.pathname, { path: ROUTES.ALERTS_NEW, exact: true }) &&
-			!location.search,
-		[location.pathname, location.search],
+	const isAlertCreationPage = useMemo(
+		() => matchPath(location.pathname, { path: ROUTES.ALERTS_NEW, exact: true }),
+		[location.pathname],
 	);
 
-	if (isSignUpPage || isDisabled || isRouteToSkip || isNewAlertsLandingPage) {
+	if (isSignUpPage || isDisabled || isRouteToSkip || isAlertCreationPage) {
 		return null;
 	}
 

frontend/src/pages/AlertDetails/AlertDetails.styles.scss

@@ -41,7 +41,6 @@
 }
 
 .alert-details {
-	margin-top: 10px;
 	.divider {
 		border-color: var(--l1-border);
 		margin: 16px 0;

frontend/src/pages/AlertDetails/AlertDetails.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Breadcrumb, Button, Divider } from 'antd';
+import { Divider } from 'antd';
 import logEvent from 'api/common/logEvent';
 import classNames from 'classnames';
+import AlertBreadcrumb from 'components/AlertBreadcrumb';
 import { Filters } from 'components/AlertDetailsFilters/Filters';
 import RouteTab from 'components/RouteTab';
 import Spinner from 'components/Spinner';
@@ -10,13 +11,12 @@ import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { CreateAlertProvider } from 'container/CreateAlertV2/context';
 import { getCreateAlertLocalStateFromAlertDef } from 'container/CreateAlertV2/utils';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
+import { useAlertRule } from 'providers/Alert';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { NEW_ALERT_SCHEMA_VERSION } from 'types/api/alerts/alertTypesV2';
 import { fromRuleDTOToPostableRuleV2 } from 'types/api/alerts/convert';
-import { isModifierKeyPressed } from 'utils/app';
 
 import AlertHeader from './AlertHeader/AlertHeader';
 import AlertNotFound from './AlertNotFound';
@@ -24,42 +24,11 @@ import { useGetAlertRuleDetails, useRouteTabUtils } from './hooks';
 
 import './AlertDetails.styles.scss';
 
-function BreadCrumbItem({
-	title,
-	isLast,
-	route,
-}: {
-	title: string | null;
-	isLast?: boolean;
-	route?: string;
-}): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-	if (isLast) {
-		return <div className="breadcrumb-item breadcrumb-item--last">{title}</div>;
-	}
-	const handleNavigate = (e: React.MouseEvent): void => {
-		if (!route) {
-			return;
-		}
-		safeNavigate(ROUTES.LIST_ALL_ALERT, { newTab: isModifierKeyPressed(e) });
-	};
-
-	return (
-		<Button type="text" className="breadcrumb-item" onClick={handleNavigate}>
-			{title}
-		</Button>
-	);
-}
-
-BreadCrumbItem.defaultProps = {
-	isLast: false,
-	route: '',
-};
-
 function AlertDetails(): JSX.Element {
 	const { pathname } = useLocation();
 	const { routes } = useRouteTabUtils();
 	const params = useUrlQuery();
+	const { alertRuleName } = useAlertRule();
 
 	const { isLoading, isError, ruleId, isValidRuleId, alertDetailsResponse } =
 		useGetAlertRuleDetails();
@@ -69,7 +38,7 @@ function AlertDetails(): JSX.Element {
 	}, [params]);
 
 	const getDocumentTitle = useMemo(() => {
-		const alertTitle = alertDetailsResponse?.data?.alert;
+		const alertTitle = alertRuleName ?? alertDetailsResponse?.data?.alert;
 		if (alertTitle) {
 			return alertTitle;
 		}
@@ -80,7 +49,7 @@ function AlertDetails(): JSX.Element {
 			return document.title;
 		}
 		return 'Alert Not Found';
-	}, [alertDetailsResponse?.data?.alert, isTestAlert, isLoading]);
+	}, [alertRuleName, alertDetailsResponse?.data?.alert, isTestAlert, isLoading]);
 
 	useEffect(() => {
 		document.title = getDocumentTitle;
@@ -126,20 +95,13 @@ function AlertDetails(): JSX.Element {
 			<div
 				className={classNames('alert-details', { 'alert-details-v2': isV2Alert })}
 			>
-				<Breadcrumb
+				<AlertBreadcrumb
 					className="alert-details__breadcrumb"
 					items={[
-						{
-							title: (
-								<BreadCrumbItem title="Alert Rules" route={ROUTES.LIST_ALL_ALERT} />
-							),
-						},
-						{
-							title: <BreadCrumbItem title={ruleId} isLast />,
-						},
+						{ title: 'Alert Rules', route: ROUTES.LIST_ALL_ALERT },
+						{ title: ruleId, isLast: true },
 					]}
 				/>
-				<Divider className="divider breadcrumb-divider" />
 
 				{alertRuleDetails && <AlertHeader alertDetails={alertRuleDetails} />}
 				<Divider className="divider" />

frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx

@@ -33,13 +33,12 @@ const menuItemStyleV2: CSSProperties = {
 function AlertActionButtons({
 	ruleId,
 	alertDetails,
-	setUpdatedName,
 }: {
 	ruleId: string;
 	alertDetails: AlertHeaderProps['alertDetails'];
-	setUpdatedName: (name: string) => void;
 }): JSX.Element {
-	const { alertRuleState, setAlertRuleState } = useAlertRule();
+	const { alertRuleState, setAlertRuleState, alertRuleName, setAlertRuleName } =
+		useAlertRule();
 	const [intermediateName, setIntermediateName] = useState<string>(
 		alertDetails.alert,
 	);
@@ -53,7 +52,7 @@ function AlertActionButtons({
 	const { handleAlertDelete } = useAlertRuleDelete({ ruleId });
 	const { handleAlertUpdate, isLoading } = useAlertRuleUpdate({
 		alertDetails: alertDetails as unknown as AlertDef,
-		setUpdatedName,
+		setAlertRuleName,
 		intermediateName,
 	});
 
@@ -113,6 +112,12 @@ function AlertActionButtons({
 		}
 	}, [setAlertRuleState, alertRuleState, alertDetails.state]);
 
+	useEffect(() => {
+		if (alertRuleName !== undefined) {
+			setIntermediateName(alertRuleName);
+		}
+	}, [alertRuleName]);
+
 	// on unmount remove the alert state
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect(() => (): void => setAlertRuleState(undefined), []);

frontend/src/pages/AlertDetails/AlertHeader/AlertHeader.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
 import CreateAlertV2Header from 'container/CreateAlertV2/CreateAlertHeader';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
@@ -20,8 +20,17 @@ export type AlertHeaderProps = {
 };
 function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 	const { state, alert: alertName, labels } = alertDetails;
-	const { alertRuleState } = useAlertRule();
-	const [updatedName, setUpdatedName] = useState(alertName);
+	const { alertRuleState, alertRuleName, setAlertRuleName } = useAlertRule();
+
+	useEffect(() => {
+		if (alertRuleName === undefined && alertName) {
+			setAlertRuleName(alertName);
+		}
+	}, [alertRuleName, alertName, setAlertRuleName]);
+
+	useEffect(() => (): void => setAlertRuleName(undefined), [setAlertRuleName]);
+
+	const displayName = alertRuleName ?? alertName;
 
 	const labelsWithoutSeverity = useMemo(() => {
 		if (labels) {
@@ -40,7 +49,7 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 				<div className="alert-title-wrapper">
 					<AlertState state={alertRuleState ?? state ?? ''} />
 					<div className="alert-title">
-						<LineClampedText text={updatedName || alertName} />
+						<LineClampedText text={displayName || ''} />
 					</div>
 				</div>
 			</div>
@@ -64,7 +73,6 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 				<AlertActionButtons
 					alertDetails={alertDetails}
 					ruleId={alertDetails?.id || ''}
-					setUpdatedName={setUpdatedName}
 				/>
 			</div>
 		</div>

frontend/src/pages/AlertDetails/hooks.tsx

@@ -12,7 +12,9 @@ import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	createRule,
 	deleteRuleByID,
+	getGetRuleByIDQueryKey,
 	invalidateGetRuleByID,
+	invalidateListRules,
 	updateRuleByID,
 	useGetRuleByID,
 	useListRules,
@@ -490,11 +492,11 @@ export const useAlertRuleDuplicate = ({
 };
 export const useAlertRuleUpdate = ({
 	alertDetails,
-	setUpdatedName,
+	setAlertRuleName,
 	intermediateName,
 }: {
 	alertDetails: AlertDef;
-	setUpdatedName: (name: string) => void;
+	setAlertRuleName: (name: string | undefined) => void;
 	intermediateName: string;
 }): {
 	handleAlertUpdate: () => void;
@@ -502,17 +504,29 @@ export const useAlertRuleUpdate = ({
 } => {
 	const { notifications } = useNotifications();
 	const { showErrorModal } = useErrorModal();
+	const queryClient = useQueryClient();
 
 	const { mutate: updateAlertRule, isLoading } = useMutation(
 		[REACT_QUERY_KEY.UPDATE_ALERT_RULE, alertDetails.id],
 		(args: { data: AlertDef; id: string }) =>
 			updateRuleByID({ id: args.id }, toPostableRuleDTOFromAlertDef(args.data)),
 		{
-			onMutate: () => setUpdatedName(intermediateName),
-			onSuccess: () =>
-				notifications.success({ message: 'Alert renamed successfully' }),
+			onMutate: () => setAlertRuleName(intermediateName),
+			onSuccess: () => {
+				const ruleId = alertDetails.id || '';
+				const ruleQueryKey = getGetRuleByIDQueryKey({ id: ruleId });
+				const existingRule = queryClient.getQueryData<GetRuleByID200>(ruleQueryKey);
+				if (existingRule) {
+					queryClient.setQueryData<GetRuleByID200>(ruleQueryKey, {
+						...existingRule,
+						data: { ...existingRule.data, alert: intermediateName },
+					});
+				}
+				void invalidateListRules(queryClient);
+				notifications.success({ message: 'Alert renamed successfully' });
+			},
 			onError: (error) => {
-				setUpdatedName(alertDetails.alert);
+				setAlertRuleName(alertDetails.alert);
 				showErrorModal(
 					convertToApiError(error as AxiosError<RenderErrorResponseDTO>) as APIError,
 				);
@@ -551,7 +565,6 @@ export const useAlertRuleDelete = ({
 
 				history.push(ROUTES.LIST_ALL_ALERT);
 			},
-			// eslint-disable-next-line sonarjs/no-identical-functions
 			onError: (error) =>
 				showErrorModal(
 					convertToApiError(error as AxiosError<RenderErrorResponseDTO>) as APIError,

frontend/src/pages/AlertList/AlertList.styles.scss

@@ -1,15 +1,44 @@
 .alerts-container {
-	.ant-tabs-nav {
-		padding: 0 8px;
+	.top-level-tab.periscope-tab {
+		padding: 2px 0;
+	}
+
+	.ant-tabs {
+		&-nav {
+			padding: 0 8px;
+			margin-bottom: 0 !important;
+
+			&::before {
+				border-bottom: 1px solid var(--l1-border) !important;
+			}
+		}
+
+		&-tab {
+			&[data-node-key='TriggeredAlerts'] {
+				margin-left: 16px;
+			}
+
+			&:not(:first-of-type) {
+				margin-left: 24px !important;
+			}
+
+			[aria-selected='false'] {
+				.periscope-tab {
+					color: var(--l2-foreground);
+				}
+			}
+		}
 	}
 
 	.configuration-tabs {
-		margin-top: -16px;
-
 		.ant-tabs-nav {
 			.ant-tabs-nav-wrap {
 				padding: 0 8px;
 			}
 		}
 	}
+
+	.alert-rules-container {
+		margin-top: 10px;
+	}
 }

frontend/src/pages/AlertTypeSelection/AlertTypeSelection.tsx

@@ -1,56 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { Row } from 'antd';
-import logEvent from 'api/common/logEvent';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import SelectAlertType from 'container/CreateAlertRule/SelectAlertType';
-import { AlertDetectionTypes } from 'container/FormAlertRules';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { AlertTypes } from 'types/api/alerts/alertTypes';
-
-function AlertTypeSelectionPage(): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-	const queryParams = useUrlQuery();
-
-	useEffect(() => {
-		logEvent('Alert: New alert data source selection page visited', {});
-	}, []);
-
-	const handleSelectType = useCallback(
-		(type: AlertTypes, newTab?: boolean): void => {
-			// For anamoly based alert, we need to set the ruleType to anomaly_rule
-			// and alertType to metrics_based_alert
-			if (type === AlertTypes.ANOMALY_BASED_ALERT) {
-				queryParams.set(
-					QueryParams.ruleType,
-					AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
-				);
-				queryParams.set(QueryParams.alertType, AlertTypes.METRICS_BASED_ALERT);
-				// For other alerts, we need to set the ruleType to threshold_rule
-				// and alertType to the selected type
-			} else {
-				queryParams.set(QueryParams.ruleType, AlertDetectionTypes.THRESHOLD_ALERT);
-				queryParams.set(QueryParams.alertType, type);
-			}
-
-			const showClassicCreateAlertsPageFlag = queryParams.get(
-				QueryParams.showClassicCreateAlertsPage,
-			);
-			if (showClassicCreateAlertsPageFlag === 'true') {
-				queryParams.set(QueryParams.showClassicCreateAlertsPage, 'true');
-			}
-
-			safeNavigate(`${ROUTES.ALERTS_NEW}?${queryParams.toString()}`, { newTab });
-		},
-		[queryParams, safeNavigate],
-	);
-
-	return (
-		<Row wrap={false}>
-			<SelectAlertType onSelect={handleSelectType} />
-		</Row>
-	);
-}
-
-export default AlertTypeSelectionPage;

frontend/src/pages/AlertTypeSelection/__tests__/AlertTypeSelection.test.tsx

@@ -1,189 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { FeatureKeys } from 'constants/features';
-import { QueryParams } from 'constants/query';
-import { AlertDetectionTypes } from 'container/FormAlertRules';
-import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
-import * as navigateHooks from 'hooks/useSafeNavigate';
-import * as useUrlQueryHooks from 'hooks/useUrlQuery';
-import * as appHooks from 'providers/App/App';
-import { AlertTypes } from 'types/api/alerts/alertTypes';
-
-import AlertTypeSelection from '../AlertTypeSelection';
-
-const useUrlQuerySpy = jest.spyOn(useUrlQueryHooks, 'default');
-const useSafeNavigateSpy = jest.spyOn(navigateHooks, 'useSafeNavigate');
-const useAppContextSpy = jest.spyOn(appHooks, 'useAppContext');
-
-const mockSetUrlQuery = jest.fn();
-const mockSafeNavigate = jest.fn();
-const mockToString = jest.fn();
-const mockGetUrlQuery = jest.fn();
-
-describe('AlertTypeSelection', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		useAppContextSpy.mockReturnValue(getAppContextMockState());
-		useUrlQuerySpy.mockReturnValue({
-			set: mockSetUrlQuery,
-			toString: mockToString,
-			get: mockGetUrlQuery,
-		} as Partial<URLSearchParams> as URLSearchParams);
-		useSafeNavigateSpy.mockReturnValue({
-			safeNavigate: mockSafeNavigate,
-		});
-	});
-
-	it('should render all alert type options when anomaly detection is enabled', () => {
-		useAppContextSpy.mockReturnValue({
-			...getAppContextMockState({}),
-			featureFlags: [
-				{
-					name: FeatureKeys.ANOMALY_DETECTION,
-					active: true,
-					usage: 0,
-					usage_limit: -1,
-					route: '',
-				},
-			],
-		});
-
-		render(<AlertTypeSelection />);
-
-		expect(screen.getByText('metric_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('log_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('traces_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('exceptions_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('anomaly_based_alert')).toBeInTheDocument();
-	});
-
-	it('should render all alert type options except anomaly based alert when anomaly detection is disabled', () => {
-		render(<AlertTypeSelection />);
-
-		expect(screen.getByText('metric_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('log_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('traces_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('exceptions_based_alert')).toBeInTheDocument();
-		expect(screen.queryByText('anomaly_based_alert')).not.toBeInTheDocument();
-	});
-
-	it('should navigate to metrics based alert with correct params', () => {
-		render(<AlertTypeSelection />);
-		fireEvent.click(screen.getByText('metric_based_alert'));
-
-		expect(mockSetUrlQuery).toHaveBeenCalledTimes(2);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.ruleType,
-			AlertDetectionTypes.THRESHOLD_ALERT,
-		);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.alertType,
-			AlertTypes.METRICS_BASED_ALERT,
-		);
-		expect(mockSafeNavigate).toHaveBeenCalled();
-	});
-
-	it('should navigate to anomaly based alert with correct params', () => {
-		useAppContextSpy.mockReturnValue({
-			...getAppContextMockState({}),
-			featureFlags: [
-				{
-					name: FeatureKeys.ANOMALY_DETECTION,
-					active: true,
-					usage: 0,
-					usage_limit: -1,
-					route: '',
-				},
-			],
-		});
-
-		render(<AlertTypeSelection />);
-		fireEvent.click(screen.getByText('anomaly_based_alert'));
-
-		expect(mockSetUrlQuery).toHaveBeenCalledTimes(2);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.ruleType,
-			AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
-		);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.alertType,
-			AlertTypes.METRICS_BASED_ALERT,
-		);
-		expect(mockSafeNavigate).toHaveBeenCalled();
-	});
-
-	it('should navigate to log based alert with correct params', () => {
-		render(<AlertTypeSelection />);
-		fireEvent.click(screen.getByText('log_based_alert'));
-
-		expect(mockSetUrlQuery).toHaveBeenCalledTimes(2);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.ruleType,
-			AlertDetectionTypes.THRESHOLD_ALERT,
-		);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.alertType,
-			AlertTypes.LOGS_BASED_ALERT,
-		);
-		expect(mockSafeNavigate).toHaveBeenCalled();
-	});
-
-	it('should navigate to traces based alert with correct params', () => {
-		render(<AlertTypeSelection />);
-		fireEvent.click(screen.getByText('traces_based_alert'));
-		expect(mockSetUrlQuery).toHaveBeenCalledTimes(2);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.ruleType,
-			AlertDetectionTypes.THRESHOLD_ALERT,
-		);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.alertType,
-			AlertTypes.TRACES_BASED_ALERT,
-		);
-		expect(mockSafeNavigate).toHaveBeenCalled();
-	});
-
-	it('should navigate to exceptions based alert with correct params', () => {
-		render(<AlertTypeSelection />);
-		fireEvent.click(screen.getByText('exceptions_based_alert'));
-		expect(mockSetUrlQuery).toHaveBeenCalledTimes(2);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.ruleType,
-			AlertDetectionTypes.THRESHOLD_ALERT,
-		);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.alertType,
-			AlertTypes.EXCEPTIONS_BASED_ALERT,
-		);
-		expect(mockSafeNavigate).toHaveBeenCalled();
-	});
-
-	it('should navigate to classic create alerts page with correct params if showClassicCreateAlertsPage is true', () => {
-		useUrlQuerySpy.mockReturnValue({
-			set: mockSetUrlQuery,
-			toString: mockToString,
-			get: mockGetUrlQuery.mockImplementation((key: string) => {
-				if (key === QueryParams.showClassicCreateAlertsPage) {
-					return 'true';
-				}
-				return null;
-			}),
-		} as Partial<URLSearchParams> as URLSearchParams);
-
-		render(<AlertTypeSelection />);
-		fireEvent.click(screen.getByText('metric_based_alert'));
-		expect(mockSetUrlQuery).toHaveBeenCalledTimes(3);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.ruleType,
-			AlertDetectionTypes.THRESHOLD_ALERT,
-		);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.alertType,
-			AlertTypes.METRICS_BASED_ALERT,
-		);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.showClassicCreateAlertsPage,
-			'true',
-		);
-		expect(mockSafeNavigate).toHaveBeenCalled();
-	});
-});

frontend/src/pages/AlertTypeSelection/index.tsx

@@ -1,3 +0,0 @@
-import AlertTypeSelectionPage from './AlertTypeSelection';
-
-export default AlertTypeSelectionPage;

frontend/src/pages/Logs/PopoverContent.tsx

@@ -1,6 +1,5 @@
-import { Row, Space } from 'antd';
+import { InputNumber, Row, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import InputNumber from 'components/InputNumber';
 
 interface PopoverContentProps {
 	linesPerRow: number;

frontend/src/pages/MetricsApplication/ApDex/ApDexSettings.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { X } from '@signozhq/icons';
-import { Card } from 'antd';
-import InputNumber from 'components/InputNumber';
+import { Card, InputNumber } from 'antd';
 import Spinner from 'components/Spinner';
 import TextToolTip from 'components/TextToolTip';
 import {

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx

@@ -526,7 +526,7 @@ function SpanDetailsPanel({
 
 	const PANEL_WIDTH = 500;
 	const PANEL_MARGIN_RIGHT = 20;
-	const PANEL_MARGIN_TOP = 25;
+	const PANEL_MARGIN_TOP = 50;
 	const PANEL_MARGIN_BOTTOM = 25;
 
 	const content = (

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -580,10 +580,9 @@ function Success(props: ISuccessProps): JSX.Element {
 					}
 					return next;
 				});
+				return;
 			}
-			// Backend mode: trigger API call (current behavior)
-			// keeping this for both mode to support scroll to view to function well.
-			// interestedspan would not make api call in frontend mode so it is safe to use for both mode.
+			// Backend mode: trigger refetch via interestedSpanId
 			setInterestedSpanId({
 				spanId,
 				isUncollapsed: !collapse,
@@ -782,19 +781,26 @@ function Success(props: ISuccessProps): JSX.Element {
 		[],
 	);
 
+	// Backend mode: scroll + select to the interestedSpanId target. `spans` in
+	// deps so we retry once a refetch lands (chevron / pagination / deep-link).
 	useEffect(() => {
-		if (interestedSpanId.spanId !== '') {
-			const idx = spans.findIndex(
-				(span) => span.span_id === interestedSpanId.spanId,
-			);
-			if (idx !== -1) {
-				scrollSpanIntoView(spans[idx], spans);
-				setSelectedSpan(spans[idx]);
-			}
-		} else {
-			setSelectedSpan((prev) => prev ?? spans[0]);
+		if (isFullDataLoaded || interestedSpanId.spanId === '') {
+			return;
 		}
-	}, [interestedSpanId, setSelectedSpan, spans, scrollSpanIntoView]);
+		const idx = spans.findIndex(
+			(span) => span.span_id === interestedSpanId.spanId,
+		);
+		if (idx !== -1) {
+			scrollSpanIntoView(spans[idx], spans);
+			setSelectedSpan(spans[idx]);
+		}
+	}, [
+		interestedSpanId,
+		setSelectedSpan,
+		spans,
+		scrollSpanIntoView,
+		isFullDataLoaded,
+	]);
 
 	// Covers URL-driven navigation to an already-loaded span (flamegraph /
 	// filter / browser back) that the interestedSpanId-keyed effect doesn't see.

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/__tests__/UnifiedSpanClick.test.tsx

@@ -199,10 +199,12 @@ const mockSpans = [
 	createMockSpan('span-3', 1),
 ];
 
-// Shared TestComponent for all tests
+// Shared TestComponent for all tests. Default selectedSpan to the root mirrors
+// what TraceDetailsV3's deep-link one-shot effect does when there's no spanId
+// in the URL — Success no longer owns that default itself.
 function TestComponent(): JSX.Element {
 	const [selectedSpan, setSelectedSpan] = React.useState<SpanV3 | undefined>(
-		undefined,
+		mockSpans[0],
 	);
 
 	return (

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -75,6 +75,7 @@ function TraceDetailsV3(): JSX.Element {
 	});
 
 	const allSpansRef = useRef<SpanV3[]>([]);
+	const deepLinkResolvedRef = useRef(false);
 
 	// Refetch only when the URL target isn't already loaded. Keeps row clicks
 	// and other in-window URL navigation from triggering a backend window slide.
@@ -175,12 +176,36 @@ function TraceDetailsV3(): JSX.Element {
 		}
 	}, [traceData, isFullDataLoaded]);
 
-	// Frontend mode: auto-expand ancestors of the selected span so it becomes visible
+	// Tracks whether we've already done the initial URL→selectedSpan handoff
+	//Lets `interestedSpanId` stay purely as the refetch trigger in frontend mode.
 	useEffect(() => {
-		if (!isFullDataLoaded || !interestedSpanId.spanId || allSpans.length === 0) {
+		if (deepLinkResolvedRef.current) {
 			return;
 		}
-		const ancestors = getAncestorSpanIds(allSpans, interestedSpanId.spanId);
+		if (allSpans.length === 0) {
+			return;
+		}
+		if (selectedSpanId) {
+			const span = allSpans.find((s) => s.span_id === selectedSpanId);
+			if (!span) {
+				// Span not in the current window — wait for more data (backend
+				// pagination) before marking resolved.
+				return;
+			}
+			setSelectedSpan(span);
+		} else {
+			setSelectedSpan((prev) => prev ?? allSpans[0]);
+		}
+		deepLinkResolvedRef.current = true;
+	}, [selectedSpanId, allSpans]);
+
+	// Frontend mode: auto-expand ancestors of the URL-targeted span so it's
+	// visible. Keyed on URL `spanId`(selectedSpanId).
+	useEffect(() => {
+		if (!isFullDataLoaded || !selectedSpanId || allSpans.length === 0) {
+			return;
+		}
+		const ancestors = getAncestorSpanIds(allSpans, selectedSpanId);
 		if (ancestors.size === 0) {
 			return;
 		}
@@ -203,7 +228,7 @@ function TraceDetailsV3(): JSX.Element {
 			}
 			return next;
 		});
-	}, [isFullDataLoaded, interestedSpanId.spanId, allSpans]);
+	}, [isFullDataLoaded, selectedSpanId, allSpans]);
 
 	const [activeKeys, setActiveKeys] = useState<string[]>(['flame', 'waterfall']);
 
@@ -217,7 +242,7 @@ function TraceDetailsV3(): JSX.Element {
 		() =>
 			(getLocalStorageKey(
 				LOCALSTORAGE.TRACE_DETAILS_SPAN_DETAILS_POSITION,
-			) as SpanDetailVariant) || SpanDetailVariant.DOCKED,
+			) as SpanDetailVariant) || SpanDetailVariant.DIALOG,
 	);
 
 	const handleVariantChange = useCallback(

frontend/src/providers/Alert.tsx

@@ -9,6 +9,8 @@ import React, {
 interface AlertRuleContextType {
 	alertRuleState: string | undefined;
 	setAlertRuleState: React.Dispatch<React.SetStateAction<string | undefined>>;
+	alertRuleName: string | undefined;
+	setAlertRuleName: React.Dispatch<React.SetStateAction<string | undefined>>;
 }
 
 const AlertRuleContext = createContext<AlertRuleContextType | undefined>(
@@ -23,13 +25,18 @@ function AlertRuleProvider({
 	const [alertRuleState, setAlertRuleState] = useState<string | undefined>(
 		undefined,
 	);
+	const [alertRuleName, setAlertRuleName] = useState<string | undefined>(
+		undefined,
+	);
 
 	const value = React.useMemo(
 		() => ({
 			alertRuleState,
 			setAlertRuleState,
+			alertRuleName,
+			setAlertRuleName,
 		}),
-		[alertRuleState],
+		[alertRuleState, alertRuleName],
 	);
 
 	return (
@@ -47,4 +54,7 @@ export const useAlertRule = (): AlertRuleContextType => {
 	return context;
 };
 
+export const useAlertRuleOptional = (): AlertRuleContextType | undefined =>
+	useContext(AlertRuleContext);
+
 export default AlertRuleProvider;

frontend/src/types/api/logs/log.ts

@@ -1,3 +1,8 @@
+export interface ILogBody {
+	message?: string | null;
+	[key: string]: unknown;
+}
+
 export interface ILog {
 	date: string;
 	timestamp: number | string;
@@ -8,7 +13,7 @@ export interface ILog {
 	traceFlags: number;
 	severityText: string;
 	severityNumber: number;
-	body: string;
+	body: string | ILogBody;
 	resources_string: Record<string, never>;
 	scope_string: Record<string, never>;
 	attributesString: Record<string, never>;

frontend/src/utils/permission/index.ts

@@ -132,7 +132,6 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	METER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	METER_EXPLORER_VIEWS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	PUBLIC_DASHBOARD: ['ADMIN', 'EDITOR', 'VIEWER'],
-	ALERT_TYPE_SELECTION: ['ADMIN', 'EDITOR'],
 	AI_ASSISTANT: ['ADMIN', 'EDITOR', 'VIEWER'],
 	AI_ASSISTANT_ICON_PREVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
 	MCP_SERVER: ['ADMIN', 'EDITOR', 'VIEWER'],

pkg/modules/dashboard/impldashboard/module.go

@@ -38,7 +38,7 @@ func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, an
 }
 
 func (module *module) Create(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, postableDashboard dashboardtypes.PostableDashboard) (*dashboardtypes.Dashboard, error) {
-	dashboard, err := dashboardtypes.NewDashboard(orgID, createdBy, postableDashboard)
+	dashboard, err := dashboardtypes.NewDashboard(orgID, createdBy, dashboardtypes.SourceUser, postableDashboard)
 	if err != nil {
 		return nil, err
 	}
@@ -72,7 +72,16 @@ func (module *module) List(ctx context.Context, orgID valuer.UUID) ([]*dashboard
 		return nil, err
 	}
 
-	return dashboardtypes.NewDashboardsFromStorableDashboards(storableDashboards), nil
+	// system dashboards are hidden from the listing endpoint but still gettable by id.
+	filtered := make([]*dashboardtypes.StorableDashboard, 0, len(storableDashboards))
+	for _, storable := range storableDashboards {
+		if storable.Source == dashboardtypes.SourceSystem {
+			continue
+		}
+		filtered = append(filtered, storable)
+	}
+
+	return dashboardtypes.NewDashboardsFromStorableDashboards(filtered), nil
 }
 
 func (module *module) Update(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatableDashboard dashboardtypes.UpdatableDashboard, diff int) (*dashboardtypes.Dashboard, error) {
@@ -81,6 +90,10 @@ func (module *module) Update(ctx context.Context, orgID valuer.UUID, id valuer.U
 		return nil, err
 	}
 
+	if err := dashboard.ErrIfNotMutable(); err != nil {
+		return nil, err
+	}
+
 	err = dashboard.Update(ctx, updatableDashboard, updatedBy, diff)
 	if err != nil {
 		return nil, err
@@ -105,6 +118,10 @@ func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valu
 		return err
 	}
 
+	if err := dashboard.ErrIfNotLockable(); err != nil {
+		return err
+	}
+
 	err = dashboard.LockUnlock(lock, isAdmin, updatedBy)
 	if err != nil {
 		return err
@@ -128,6 +145,10 @@ func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.U
 		return err
 	}
 
+	if err := dashboard.ErrIfNotDeletable(); err != nil {
+		return err
+	}
+
 	if dashboard.Locked {
 		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "dashboard is locked, please unlock the dashboard to be delete it")
 	}

pkg/modules/inframonitoring/implinframonitoring/module.go

@@ -231,7 +231,7 @@ func (m *module) ListPods(ctx context.Context, orgID valuer.UUID, req *inframoni
 		return nil, err
 	}
 
-	phaseCounts, err := m.getPerGroupPodPhaseCounts(ctx, req, pageGroups)
+	phaseCounts, err := m.getPerGroupPodPhaseCounts(ctx, req.Start, req.End, req.Filter, req.GroupBy, pageGroups)
 	if err != nil {
 		return nil, err
 	}
@@ -314,19 +314,12 @@ func (m *module) ListNodes(ctx context.Context, orgID valuer.UUID, req *inframon
 		return nil, err
 	}
 
-	nodeConditionCounts, err := m.getPerGroupNodeConditionCounts(ctx, req, pageGroups)
+	nodeConditionCounts, err := m.getPerGroupNodeConditionCounts(ctx, req.Start, req.End, req.Filter, req.GroupBy, pageGroups)
 	if err != nil {
 		return nil, err
 	}
 
-	// Reuse the pods phase-counts CTE function via a temp struct — it reads only
-	// Start/End/Filter/GroupBy from PostablePods.
-	podPhaseCounts, err := m.getPerGroupPodPhaseCounts(ctx, &inframonitoringtypes.PostablePods{
-		Start:   req.Start,
-		End:     req.End,
-		Filter:  req.Filter,
-		GroupBy: req.GroupBy,
-	}, pageGroups)
+	podPhaseCounts, err := m.getPerGroupPodPhaseCounts(ctx, req.Start, req.End, req.Filter, req.GroupBy, pageGroups)
 	if err != nil {
 		return nil, err
 	}
@@ -409,14 +402,7 @@ func (m *module) ListNamespaces(ctx context.Context, orgID valuer.UUID, req *inf
 		return nil, err
 	}
 
-	// Reuse the pods phase-counts CTE function via a temp struct — it reads only
-	// Start/End/Filter/GroupBy from PostablePods.
-	phaseCounts, err := m.getPerGroupPodPhaseCounts(ctx, &inframonitoringtypes.PostablePods{
-		Start:   req.Start,
-		End:     req.End,
-		Filter:  req.Filter,
-		GroupBy: req.GroupBy,
-	}, pageGroups)
+	phaseCounts, err := m.getPerGroupPodPhaseCounts(ctx, req.Start, req.End, req.Filter, req.GroupBy, pageGroups)
 	if err != nil {
 		return nil, err
 	}
@@ -498,27 +484,14 @@ func (m *module) ListClusters(ctx context.Context, orgID valuer.UUID, req *infra
 		return nil, err
 	}
 
-	// Reuse the nodes condition-counts CTE function via a temp struct — it reads only
-	// Start/End/Filter/GroupBy from PostableNodes. With default groupBy
-	// [k8s.cluster.name], counts are bucketed per cluster; with a custom groupBy,
-	// they aggregate across clusters in that group.
-	nodeConditionCountsMap, err := m.getPerGroupNodeConditionCounts(ctx, &inframonitoringtypes.PostableNodes{
-		Start:   req.Start,
-		End:     req.End,
-		Filter:  req.Filter,
-		GroupBy: req.GroupBy,
-	}, pageGroups)
+	// With default groupBy [k8s.cluster.name], counts are bucketed per cluster;
+	// with a custom groupBy, they aggregate across clusters in that group.
+	nodeConditionCountsMap, err := m.getPerGroupNodeConditionCounts(ctx, req.Start, req.End, req.Filter, req.GroupBy, pageGroups)
 	if err != nil {
 		return nil, err
 	}
 
-	// Same pattern for pod phase counts via PostablePods shim.
-	podPhaseCountsMap, err := m.getPerGroupPodPhaseCounts(ctx, &inframonitoringtypes.PostablePods{
-		Start:   req.Start,
-		End:     req.End,
-		Filter:  req.Filter,
-		GroupBy: req.GroupBy,
-	}, pageGroups)
+	podPhaseCountsMap, err := m.getPerGroupPodPhaseCounts(ctx, req.Start, req.End, req.Filter, req.GroupBy, pageGroups)
 	if err != nil {
 		return nil, err
 	}
@@ -689,14 +662,7 @@ func (m *module) ListDeployments(ctx context.Context, orgID valuer.UUID, req *in
 		return nil, err
 	}
 
-	// Reuse the pods phase-counts CTE function via a temp struct — it reads only
-	// Start/End/Filter/GroupBy from PostablePods.
-	phaseCounts, err := m.getPerGroupPodPhaseCounts(ctx, &inframonitoringtypes.PostablePods{
-		Start:   req.Start,
-		End:     req.End,
-		Filter:  req.Filter,
-		GroupBy: req.GroupBy,
-	}, pageGroups)
+	phaseCounts, err := m.getPerGroupPodPhaseCounts(ctx, req.Start, req.End, req.Filter, req.GroupBy, pageGroups)
 	if err != nil {
 		return nil, err
 	}
@@ -784,16 +750,9 @@ func (m *module) ListStatefulSets(ctx context.Context, orgID valuer.UUID, req *i
 		return nil, err
 	}
 
-	// Reuse the pods phase-counts CTE function via a temp struct — it reads only
-	// Start/End/Filter/GroupBy from PostablePods. Pods owned by a StatefulSet carry
-	// k8s.statefulset.name as a resource attribute, so default-groupBy gives
-	// per-statefulset phase counts automatically.
-	phaseCounts, err := m.getPerGroupPodPhaseCounts(ctx, &inframonitoringtypes.PostablePods{
-		Start:   req.Start,
-		End:     req.End,
-		Filter:  req.Filter,
-		GroupBy: req.GroupBy,
-	}, pageGroups)
+	// Pods owned by a StatefulSet carry k8s.statefulset.name as a resource attribute,
+	// so default-groupBy gives per-statefulset phase counts automatically.
+	phaseCounts, err := m.getPerGroupPodPhaseCounts(ctx, req.Start, req.End, req.Filter, req.GroupBy, pageGroups)
 	if err != nil {
 		return nil, err
 	}
@@ -881,16 +840,9 @@ func (m *module) ListJobs(ctx context.Context, orgID valuer.UUID, req *inframoni
 		return nil, err
 	}
 
-	// Reuse the pods phase-counts CTE function via a temp struct — it reads only
-	// Start/End/Filter/GroupBy from PostablePods. Pods owned by a Job carry
-	// k8s.job.name as a resource attribute, so default-groupBy gives
-	// per-job phase counts automatically.
-	phaseCounts, err := m.getPerGroupPodPhaseCounts(ctx, &inframonitoringtypes.PostablePods{
-		Start:   req.Start,
-		End:     req.End,
-		Filter:  req.Filter,
-		GroupBy: req.GroupBy,
-	}, pageGroups)
+	// Pods owned by a Job carry k8s.job.name as a resource attribute, so default-groupBy
+	// gives per-job phase counts automatically.
+	phaseCounts, err := m.getPerGroupPodPhaseCounts(ctx, req.Start, req.End, req.Filter, req.GroupBy, pageGroups)
 	if err != nil {
 		return nil, err
 	}
@@ -978,16 +930,9 @@ func (m *module) ListDaemonSets(ctx context.Context, orgID valuer.UUID, req *inf
 		return nil, err
 	}
 
-	// Reuse the pods phase-counts CTE function via a temp struct — it reads only
-	// Start/End/Filter/GroupBy from PostablePods. Pods owned by a DaemonSet carry
-	// k8s.daemonset.name as a resource attribute, so default-groupBy gives
-	// per-daemonset phase counts automatically.
-	phaseCounts, err := m.getPerGroupPodPhaseCounts(ctx, &inframonitoringtypes.PostablePods{
-		Start:   req.Start,
-		End:     req.End,
-		Filter:  req.Filter,
-		GroupBy: req.GroupBy,
-	}, pageGroups)
+	// Pods owned by a DaemonSet carry k8s.daemonset.name as a resource attribute,
+	// so default-groupBy gives per-daemonset phase counts automatically.
+	phaseCounts, err := m.getPerGroupPodPhaseCounts(ctx, req.Start, req.End, req.Filter, req.GroupBy, pageGroups)
 	if err != nil {
 		return nil, err
 	}

pkg/modules/inframonitoring/implinframonitoring/nodes.go

@@ -170,27 +170,29 @@ func (m *module) getNodesTableMetadata(ctx context.Context, req *inframonitoring
 // Groups absent from the result map have implicit zero counts (caller default).
 func (m *module) getPerGroupNodeConditionCounts(
 	ctx context.Context,
-	req *inframonitoringtypes.PostableNodes,
+	start, end int64,
+	filter *qbtypes.Filter,
+	groupBy []qbtypes.GroupByKey,
 	pageGroups []map[string]string,
 ) (map[string]nodeConditionCounts, error) {
-	if len(pageGroups) == 0 || len(req.GroupBy) == 0 {
+	if len(pageGroups) == 0 || len(groupBy) == 0 {
 		return map[string]nodeConditionCounts{}, nil
 	}
 
-	// Merged filter expression (user filter + page-groups IN clauses).
-	reqFilterExpr := ""
-	if req.Filter != nil {
-		reqFilterExpr = req.Filter.Expression
+	// Merge user filter with page-groups IN clauses.
+	userFilterExpr := ""
+	if filter != nil {
+		userFilterExpr = filter.Expression
 	}
 	pageGroupsFilterExpr := buildPageGroupsFilterExpr(pageGroups)
-	filterExpr := mergeFilterExpressions(reqFilterExpr, pageGroupsFilterExpr)
+	mergedFilterExpr := mergeFilterExpressions(userFilterExpr, pageGroupsFilterExpr)
 
 	// Resolve tables. Same convention as pods.
 	adjustedStart, adjustedEnd, _, localTimeSeriesTable := telemetrymetrics.WhichTSTableToUse(
-		uint64(req.Start), uint64(req.End), nil,
+		uint64(start), uint64(end), nil,
 	)
 	samplesTable := telemetrymetrics.WhichSamplesTableToUse(
-		uint64(req.Start), uint64(req.End),
+		uint64(start), uint64(end),
 		metrictypes.UnspecifiedType, metrictypes.TimeAggregationUnspecified, nil,
 	)
 	valueCol := telemetrymetrics.ValueColumnForSamplesTable(samplesTable)
@@ -201,7 +203,7 @@ func (m *module) getPerGroupNodeConditionCounts(
 		"fingerprint",
 		fmt.Sprintf("JSONExtractString(labels, %s) AS node_name", timeSeriesFPs.Var(nodeNameAttrKey)),
 	}
-	for _, key := range req.GroupBy {
+	for _, key := range groupBy {
 		timeSeriesFPsSelectCols = append(timeSeriesFPsSelectCols,
 			fmt.Sprintf("JSONExtractString(labels, %s) AS %s", timeSeriesFPs.Var(key.Name), quoteIdentifier(key.Name)),
 		)
@@ -213,8 +215,8 @@ func (m *module) getPerGroupNodeConditionCounts(
 		timeSeriesFPs.GE("unix_milli", adjustedStart),
 		timeSeriesFPs.L("unix_milli", adjustedEnd),
 	)
-	if filterExpr != "" {
-		filterClause, err := m.buildFilterClause(ctx, &qbtypes.Filter{Expression: filterExpr}, req.Start, req.End)
+	if mergedFilterExpr != "" {
+		filterClause, err := m.buildFilterClause(ctx, &qbtypes.Filter{Expression: mergedFilterExpr}, start, end)
 		if err != nil {
 			return nil, err
 		}
@@ -223,7 +225,7 @@ func (m *module) getPerGroupNodeConditionCounts(
 		}
 	}
 	timeSeriesFPsGroupBy := []string{"fingerprint", "node_name"}
-	for _, key := range req.GroupBy {
+	for _, key := range groupBy {
 		timeSeriesFPsGroupBy = append(timeSeriesFPsGroupBy, quoteIdentifier(key.Name))
 	}
 	timeSeriesFPs.GroupBy(timeSeriesFPsGroupBy...)
@@ -233,7 +235,7 @@ func (m *module) getPerGroupNodeConditionCounts(
 	latestConditionPerNode := sqlbuilder.NewSelectBuilder()
 	latestConditionPerNodeSelectCols := []string{"tsfp.node_name AS node_name"}
 	latestConditionPerNodeGroupBy := []string{"node_name"}
-	for _, key := range req.GroupBy {
+	for _, key := range groupBy {
 		col := quoteIdentifier(key.Name)
 		latestConditionPerNodeSelectCols = append(latestConditionPerNodeSelectCols, fmt.Sprintf("tsfp.%s AS %s", col, col))
 		latestConditionPerNodeGroupBy = append(latestConditionPerNodeGroupBy, col)
@@ -248,17 +250,17 @@ func (m *module) getPerGroupNodeConditionCounts(
 	))
 	latestConditionPerNode.Where(
 		latestConditionPerNode.E("samples.metric_name", nodeConditionMetricName),
-		latestConditionPerNode.GE("samples.unix_milli", req.Start),
-		latestConditionPerNode.L("samples.unix_milli", req.End),
+		latestConditionPerNode.GE("samples.unix_milli", start),
+		latestConditionPerNode.L("samples.unix_milli", end),
 		"tsfp.node_name != ''",
 	)
 	latestConditionPerNode.GroupBy(latestConditionPerNodeGroupBy...)
 	latestConditionPerNodeSQL, latestConditionPerNodeArgs := latestConditionPerNode.BuildWithFlavor(sqlbuilder.ClickHouse)
 
 	// ----- countNodesPerCondition (outer SELECT) -----
-	countNodesPerConditionSelectCols := make([]string, 0, len(req.GroupBy)+2)
-	countNodesPerConditionGroupBy := make([]string, 0, len(req.GroupBy))
-	for _, key := range req.GroupBy {
+	countNodesPerConditionSelectCols := make([]string, 0, len(groupBy)+2)
+	countNodesPerConditionGroupBy := make([]string, 0, len(groupBy))
+	for _, key := range groupBy {
 		col := quoteIdentifier(key.Name)
 		countNodesPerConditionSelectCols = append(countNodesPerConditionSelectCols, col)
 		countNodesPerConditionGroupBy = append(countNodesPerConditionGroupBy, col)
@@ -289,8 +291,8 @@ func (m *module) getPerGroupNodeConditionCounts(
 
 	result := make(map[string]nodeConditionCounts)
 	for rows.Next() {
-		groupVals := make([]string, len(req.GroupBy))
-		scanPtrs := make([]any, 0, len(req.GroupBy)+2)
+		groupVals := make([]string, len(groupBy))
+		scanPtrs := make([]any, 0, len(groupBy)+2)
 		for i := range groupVals {
 			scanPtrs = append(scanPtrs, &groupVals[i])
 		}

pkg/modules/inframonitoring/implinframonitoring/pods.go

@@ -189,27 +189,29 @@ func (m *module) getPodsTableMetadata(ctx context.Context, req *inframonitoringt
 // Groups absent from the result map have implicit zero counts (caller default).
 func (m *module) getPerGroupPodPhaseCounts(
 	ctx context.Context,
-	req *inframonitoringtypes.PostablePods,
+	start, end int64,
+	filter *qbtypes.Filter,
+	groupBy []qbtypes.GroupByKey,
 	pageGroups []map[string]string,
 ) (map[string]podPhaseCounts, error) {
-	if len(pageGroups) == 0 || len(req.GroupBy) == 0 {
+	if len(pageGroups) == 0 || len(groupBy) == 0 {
 		return map[string]podPhaseCounts{}, nil
 	}
 
-	// Merged filter expression (user filter + page-groups IN clauses).
-	reqFilterExpr := ""
-	if req.Filter != nil {
-		reqFilterExpr = req.Filter.Expression
+	// Merge user filter with page-groups IN clauses.
+	userFilterExpr := ""
+	if filter != nil {
+		userFilterExpr = filter.Expression
 	}
 	pageGroupsFilterExpr := buildPageGroupsFilterExpr(pageGroups)
-	filterExpr := mergeFilterExpressions(reqFilterExpr, pageGroupsFilterExpr)
+	mergedFilterExpr := mergeFilterExpressions(userFilterExpr, pageGroupsFilterExpr)
 
 	// Resolve tables. Same convention as hosts (distributed names from helpers).
 	adjustedStart, adjustedEnd, _, localTimeSeriesTable := telemetrymetrics.WhichTSTableToUse(
-		uint64(req.Start), uint64(req.End), nil,
+		uint64(start), uint64(end), nil,
 	)
 	samplesTable := telemetrymetrics.WhichSamplesTableToUse(
-		uint64(req.Start), uint64(req.End),
+		uint64(start), uint64(end),
 		metrictypes.UnspecifiedType, metrictypes.TimeAggregationUnspecified, nil,
 	)
 	valueCol := telemetrymetrics.ValueColumnForSamplesTable(samplesTable)
@@ -220,7 +222,7 @@ func (m *module) getPerGroupPodPhaseCounts(
 		"fingerprint",
 		fmt.Sprintf("JSONExtractString(labels, %s) AS pod_uid", timeSeriesFPs.Var(podUIDAttrKey)),
 	}
-	for _, key := range req.GroupBy {
+	for _, key := range groupBy {
 		timeSeriesFPsSelectCols = append(timeSeriesFPsSelectCols,
 			fmt.Sprintf("JSONExtractString(labels, %s) AS %s", timeSeriesFPs.Var(key.Name), quoteIdentifier(key.Name)),
 		)
@@ -232,8 +234,8 @@ func (m *module) getPerGroupPodPhaseCounts(
 		timeSeriesFPs.GE("unix_milli", adjustedStart),
 		timeSeriesFPs.L("unix_milli", adjustedEnd),
 	)
-	if filterExpr != "" {
-		filterClause, err := m.buildFilterClause(ctx, &qbtypes.Filter{Expression: filterExpr}, req.Start, req.End)
+	if mergedFilterExpr != "" {
+		filterClause, err := m.buildFilterClause(ctx, &qbtypes.Filter{Expression: mergedFilterExpr}, start, end)
 		if err != nil {
 			return nil, err
 		}
@@ -242,7 +244,7 @@ func (m *module) getPerGroupPodPhaseCounts(
 		}
 	}
 	timeSeriesFPsGroupBy := []string{"fingerprint", "pod_uid"}
-	for _, key := range req.GroupBy {
+	for _, key := range groupBy {
 		timeSeriesFPsGroupBy = append(timeSeriesFPsGroupBy, quoteIdentifier(key.Name))
 	}
 	timeSeriesFPs.GroupBy(timeSeriesFPsGroupBy...)
@@ -251,7 +253,7 @@ func (m *module) getPerGroupPodPhaseCounts(
 	latestPhasePerPod := sqlbuilder.NewSelectBuilder()
 	latestPhasePerPodSelectCols := []string{"tsfp.pod_uid AS pod_uid"}
 	latestPhasePerPodGroupBy := []string{"pod_uid"}
-	for _, key := range req.GroupBy {
+	for _, key := range groupBy {
 		col := quoteIdentifier(key.Name)
 		latestPhasePerPodSelectCols = append(latestPhasePerPodSelectCols, fmt.Sprintf("tsfp.%s AS %s", col, col))
 		latestPhasePerPodGroupBy = append(latestPhasePerPodGroupBy, col)
@@ -266,17 +268,17 @@ func (m *module) getPerGroupPodPhaseCounts(
 	))
 	latestPhasePerPod.Where(
 		latestPhasePerPod.E("samples.metric_name", podPhaseMetricName),
-		latestPhasePerPod.GE("samples.unix_milli", req.Start),
-		latestPhasePerPod.L("samples.unix_milli", req.End),
+		latestPhasePerPod.GE("samples.unix_milli", start),
+		latestPhasePerPod.L("samples.unix_milli", end),
 		"tsfp.pod_uid != ''",
 	)
 	latestPhasePerPod.GroupBy(latestPhasePerPodGroupBy...)
 	latestPhasePerPodSQL, latestPhasePerPodArgs := latestPhasePerPod.BuildWithFlavor(sqlbuilder.ClickHouse)
 
 	// ----- countPodsPerPhase (outer SELECT) -----
-	countPodsPerPhaseSelectCols := make([]string, 0, len(req.GroupBy)+5)
-	countPodsPerPhaseGroupBy := make([]string, 0, len(req.GroupBy))
-	for _, key := range req.GroupBy {
+	countPodsPerPhaseSelectCols := make([]string, 0, len(groupBy)+5)
+	countPodsPerPhaseGroupBy := make([]string, 0, len(groupBy))
+	for _, key := range groupBy {
 		col := quoteIdentifier(key.Name)
 		countPodsPerPhaseSelectCols = append(countPodsPerPhaseSelectCols, col)
 		countPodsPerPhaseGroupBy = append(countPodsPerPhaseGroupBy, col)
@@ -310,8 +312,8 @@ func (m *module) getPerGroupPodPhaseCounts(
 
 	result := make(map[string]podPhaseCounts)
 	for rows.Next() {
-		groupVals := make([]string, len(req.GroupBy))
-		scanPtrs := make([]any, 0, len(req.GroupBy)+5)
+		groupVals := make([]string, len(groupBy))
+		scanPtrs := make([]any, 0, len(groupBy)+5)
 		for i := range groupVals {
 			scanPtrs = append(scanPtrs, &groupVals[i])
 		}

pkg/query-service/app/integrations/manager.go

@@ -348,7 +348,8 @@ func (m *Manager) GetInstalledIntegrationDashboardById(
 						CreatedBy: author,
 						UpdatedBy: author,
 					},
-					OrgID: orgId,
+					OrgID:  orgId,
+					Source: dashboardtypes.SourceIntegration,
 				}, nil
 			}
 		}
@@ -387,7 +388,8 @@ func (m *Manager) GetDashboardsForInstalledIntegrations(
 							CreatedBy: author,
 							UpdatedBy: author,
 						},
-						OrgID: orgId,
+						OrgID:  orgId,
+						Source: dashboardtypes.SourceIntegration,
 					})
 				}
 			}

pkg/signoz/provider.go

@@ -204,6 +204,7 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewAddTagsFactory(sqlstore, sqlschema),
 		sqlmigration.NewAddRoleCRUDTuplesFactory(sqlstore),
 		sqlmigration.NewAddIntegrationDashboardFactory(sqlstore, sqlschema),
+		sqlmigration.NewAddSourceToDashboardFactory(sqlstore, sqlschema),
 	)
 }
 

pkg/sqlmigration/085_add_source_to_dashboard.go

@@ -0,0 +1,79 @@
+package sqlmigration
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/sqlschema"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/uptrace/bun"
+	"github.com/uptrace/bun/migrate"
+)
+
+type addSourceToDashboard struct {
+	sqlstore  sqlstore.SQLStore
+	sqlschema sqlschema.SQLSchema
+}
+
+func NewAddSourceToDashboardFactory(sqlstore sqlstore.SQLStore, sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
+	return factory.NewProviderFactory(
+		factory.MustNewName("add_source_to_dashboard"),
+		func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
+			return &addSourceToDashboard{sqlstore: sqlstore, sqlschema: sqlschema}, nil
+		},
+	)
+}
+
+func (migration *addSourceToDashboard) Register(migrations *migrate.Migrations) error {
+	return migrations.Register(migration.Up, migration.Down)
+}
+
+func (migration *addSourceToDashboard) Up(ctx context.Context, db *bun.DB) error {
+	// dashboard is referenced by public_dashboard and integration_dashboard;
+	// FK enforcement must be off for the SQLite recreate-table fallback.
+	if err := migration.sqlschema.ToggleFKEnforcement(ctx, db, false); err != nil {
+		return err
+	}
+
+	tx, err := db.BeginTx(ctx, nil)
+	if err != nil {
+		return err
+	}
+	defer func() {
+		_ = tx.Rollback()
+	}()
+
+	table, uniqueConstraints, err := migration.sqlschema.GetTable(ctx, sqlschema.TableName("dashboard"))
+	if err != nil {
+		return err
+	}
+
+	sourceColumn := &sqlschema.Column{
+		Name:     sqlschema.ColumnName("source"),
+		DataType: sqlschema.DataTypeText,
+		Nullable: false,
+	}
+
+	// backfill existing rows with 'user' before the NOT NULL flip.
+	sqls := migration.sqlschema.Operator().AddColumn(table, uniqueConstraints, sourceColumn, "user")
+
+	for _, sql := range sqls {
+		if _, err := tx.ExecContext(ctx, string(sql)); err != nil {
+			return err
+		}
+	}
+
+	if err := tx.Commit(); err != nil {
+		return err
+	}
+
+	if err := migration.sqlschema.ToggleFKEnforcement(ctx, db, true); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (migration *addSourceToDashboard) Down(context.Context, *bun.DB) error {
+	return nil
+}

pkg/types/cloudintegrationtypes/service.go

@@ -366,6 +366,7 @@ func GetDashboardsFromAssets(
 				CreatedBy: author,
 				UpdatedBy: author,
 			},
+			Source: dashboardtypes.SourceIntegration,
 		})
 	}
 

pkg/types/dashboardtypes/dashboard.go

@@ -19,6 +19,8 @@ var (
 	ErrCodeDashboardNotFound           = errors.MustNewCode("dashboard_not_found")
 	ErrCodeDashboardInvalidData        = errors.MustNewCode("dashboard_invalid_data")
 	ErrCodeDashboardInvalidWidgetQuery = errors.MustNewCode("dashboard_invalid_widget_query")
+	ErrCodeDashboardInvalidSource      = errors.MustNewCode("dashboard_invalid_source")
+	ErrCodeDashboardImmutable          = errors.MustNewCode("dashboard_immutable")
 )
 
 type StorableDashboard struct {
@@ -30,6 +32,7 @@ type StorableDashboard struct {
 	Data   StorableDashboardData `bun:"data,type:text,notnull"`
 	Locked bool                  `bun:"locked,notnull,default:false"`
 	OrgID  valuer.UUID           `bun:"org_id,notnull"`
+	Source Source                `bun:"source,type:text,notnull"`
 }
 
 type Dashboard struct {
@@ -40,6 +43,7 @@ type Dashboard struct {
 	Data   StorableDashboardData `json:"data"`
 	Locked bool                  `json:"locked"`
 	OrgID  valuer.UUID           `json:"org_id"`
+	Source Source                `json:"source"`
 }
 
 type LockUnlockDashboard struct {
@@ -64,6 +68,10 @@ func NewStorableDashboardFromDashboard(dashboard *Dashboard) (*StorableDashboard
 		return nil, errors.Wrapf(err, errors.TypeInvalidInput, errors.CodeInvalidInput, "id is not a valid uuid")
 	}
 
+	if !dashboard.Source.IsValid() {
+		return nil, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidSource, "invalid dashboard source %q, must be one of user, system, integration", dashboard.Source.StringValue())
+	}
+
 	return &StorableDashboard{
 		Identifiable: types.Identifiable{
 			ID: dashboardID,
@@ -79,10 +87,15 @@ func NewStorableDashboardFromDashboard(dashboard *Dashboard) (*StorableDashboard
 		OrgID:  dashboard.OrgID,
 		Data:   dashboard.Data,
 		Locked: dashboard.Locked,
+		Source: dashboard.Source,
 	}, nil
 }
 
-func NewDashboard(orgID valuer.UUID, createdBy string, storableDashboardData StorableDashboardData) (*Dashboard, error) {
+func NewDashboard(orgID valuer.UUID, createdBy string, source Source, storableDashboardData StorableDashboardData) (*Dashboard, error) {
+	if !source.IsValid() {
+		return nil, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidSource, "invalid dashboard source %q, must be one of user, system, integration", source.StringValue())
+	}
+
 	currentTime := time.Now()
 
 	return &Dashboard{
@@ -98,6 +111,7 @@ func NewDashboard(orgID valuer.UUID, createdBy string, storableDashboardData Sto
 		OrgID:  orgID,
 		Data:   storableDashboardData,
 		Locked: false,
+		Source: source,
 	}, nil
 }
 
@@ -115,6 +129,7 @@ func NewDashboardFromStorableDashboard(storableDashboard *StorableDashboard) *Da
 		OrgID:  storableDashboard.OrgID,
 		Data:   storableDashboard.Data,
 		Locked: storableDashboard.Locked,
+		Source: storableDashboard.Source,
 	}
 }
 
@@ -147,6 +162,7 @@ func NewGettableDashboardFromDashboard(dashboard *Dashboard) (*GettableDashboard
 		OrgID:         dashboard.OrgID,
 		Data:          dashboard.Data,
 		Locked:        dashboard.Locked,
+		Source:        dashboard.Source,
 	}, nil
 }
 
@@ -238,6 +254,43 @@ func (storableDashboardData *StorableDashboardData) GetWidgetIds() []string {
 	return widgetIds
 }
 
+func (dashboard *Dashboard) ErrIfNotMutable() error {
+	if dashboard.Source == SourceIntegration {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "integration dashboards cannot be modified")
+	}
+	return nil
+}
+
+func (dashboard *Dashboard) ErrIfNotDeletable() error {
+	if err := dashboard.ErrIfNotMutable(); err != nil {
+		return err
+	}
+	if dashboard.Source == SourceSystem {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "system dashboards cannot be deleted")
+	}
+	return nil
+}
+
+func (dashboard *Dashboard) ErrIfNotLockable() error {
+	if err := dashboard.ErrIfNotMutable(); err != nil {
+		return err
+	}
+	if dashboard.Source == SourceSystem {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "system dashboards cannot be locked or unlocked")
+	}
+	return nil
+}
+
+func (dashboard *Dashboard) ErrIfNotPublishable() error {
+	if err := dashboard.ErrIfNotMutable(); err != nil {
+		return err
+	}
+	if dashboard.Source == SourceSystem {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "system dashboards cannot be made public")
+	}
+	return nil
+}
+
 func (dashboard *Dashboard) CanUpdate(ctx context.Context, data StorableDashboardData, diff int) error {
 	if dashboard.Locked {
 		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "cannot update a locked dashboard, please unlock the dashboard to update")

pkg/types/dashboardtypes/dashboard_test.go

@@ -66,7 +66,7 @@ func TestCanUpdate_MultipleDeletions_ByDiff(t *testing.T) {
 			initial := StorableDashboardData{
 				"widgets": makeTestWidgets("a", "b", "c"),
 			}
-			d, err := NewDashboard(orgID, "tester", initial)
+			d, err := NewDashboard(orgID, "tester", SourceUser, initial)
 			assert.NoError(t, err)
 
 			updated := StorableDashboardData{

pkg/types/dashboardtypes/source.go

@@ -0,0 +1,60 @@
+package dashboardtypes
+
+import (
+	"database/sql/driver"
+	"slices"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type Source struct {
+	s valuer.String
+}
+
+var (
+	SourceUser        = Source{s: valuer.NewString("user")}
+	SourceSystem      = Source{s: valuer.NewString("system")}
+	SourceIntegration = Source{s: valuer.NewString("integration")}
+)
+
+func (Source) Enum() []any {
+	return []any{SourceUser, SourceSystem, SourceIntegration}
+}
+
+func (s Source) IsValid() bool {
+	return slices.ContainsFunc(s.Enum(), func(v any) bool { return v == s })
+}
+
+func (s Source) IsZero() bool { return s.s.IsZero() }
+
+func (s Source) String() string { return s.s.String() }
+
+func (s Source) StringValue() string { return s.s.StringValue() }
+
+func (s Source) Value() (driver.Value, error) {
+	if !s.IsValid() {
+		return nil, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidSource, "invalid dashboard source %q, must be one of user, system, integration", s.s.StringValue())
+	}
+	return s.s.Value()
+}
+
+func (s *Source) Scan(src any) error {
+	return s.s.Scan(src)
+}
+
+func (s Source) MarshalJSON() ([]byte, error) {
+	return s.s.MarshalJSON()
+}
+
+func (s *Source) UnmarshalJSON(data []byte) error {
+	return s.s.UnmarshalJSON(data)
+}
+
+func NewSource(source string) (Source, error) {
+	candidate := Source{s: valuer.NewString(source)}
+	if !candidate.IsValid() {
+		return Source{}, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidSource, "invalid dashboard source %q, must be one of user, system, integration", source)
+	}
+	return candidate, nil
+}

pkg/types/dashboardtypes/source_test.go

@@ -0,0 +1,71 @@
+package dashboardtypes
+
+import (
+	"testing"
+
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+func TestSourceEnum(t *testing.T) {
+	t.Run("valid sources round-trip through Value/Scan", func(t *testing.T) {
+		for _, src := range []Source{SourceUser, SourceSystem, SourceIntegration} {
+			val, err := src.Value()
+			require.NoError(t, err)
+
+			var got Source
+			require.NoError(t, got.Scan(val))
+			assert.Equal(t, src, got)
+		}
+	})
+
+	t.Run("invalid source is rejected by Value", func(t *testing.T) {
+		bogus := Source{s: valuer.NewString("hacker")}
+		_, err := bogus.Value()
+		assert.Error(t, err)
+	})
+
+	t.Run("Scan tolerates unknown strings, Value still rejects them", func(t *testing.T) {
+		var got Source
+		require.NoError(t, got.Scan("future_source"))
+		assert.Equal(t, "future_source", got.StringValue())
+		assert.False(t, got.IsValid())
+
+		_, err := got.Value()
+		assert.Error(t, err)
+	})
+
+	t.Run("NewSource validates input", func(t *testing.T) {
+		s, err := NewSource("USER")
+		require.NoError(t, err)
+		assert.Equal(t, SourceUser, s)
+
+		_, err = NewSource("nope")
+		assert.Error(t, err)
+	})
+}
+
+func TestErrIfNotMutable_BySource(t *testing.T) {
+	cases := []struct {
+		source      Source
+		mutable     bool
+		deletable   bool
+		lockable    bool
+		publishable bool
+	}{
+		{SourceUser, true, true, true, true},
+		{SourceSystem, true, false, false, false},
+		{SourceIntegration, false, false, false, false},
+	}
+
+	for _, tc := range cases {
+		t.Run(tc.source.StringValue(), func(t *testing.T) {
+			d := &Dashboard{Source: tc.source}
+			assert.Equal(t, tc.mutable, d.ErrIfNotMutable() == nil)
+			assert.Equal(t, tc.deletable, d.ErrIfNotDeletable() == nil)
+			assert.Equal(t, tc.lockable, d.ErrIfNotLockable() == nil)
+			assert.Equal(t, tc.publishable, d.ErrIfNotPublishable() == nil)
+		})
+	}
+}