chore(openapi): regenerate spec for span scope

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.claude/skills/signoz-page-story/references/controls.md

@@ -46,9 +46,9 @@ One endpoint feeding several widgets stays one handler that reads the request. `
 
 ```ts
 rest.get(
-	'http://localhost/api/v2/saved_views',
+	'http://localhost/api/v1/explorer/views',
 	response.json((req) =>
-		savedViews(values.savedViews, req.url.searchParams.get('source') ?? 'logs'),
+		savedViews(values.savedViews, req.url.searchParams.get('sourcePage') ?? 'logs'),
 	),
 ),
 ```

docs/contributing/tests/e2e.md

@@ -93,9 +93,9 @@ tests/
     │   └── auth.ts
     ├── helpers/               # function helpers + the constants they share with tests
     │   ├── auth.ts
-    │   └── logs-explorer.ts
+    │   └── dashboards.ts
     ├── testdata/              # static data files (JSON) used by helpers and tests
-    │   └── traces/large-trace.json   # (example)
+    │   └── apm-metrics.json   # (example)
     ├── tests/                 # Playwright .spec.ts files, one dir per feature area
     │   └── alerts/
     │       └── alerts.spec.ts # (example)
@@ -110,8 +110,8 @@ tests/
 These two folders look similar but mean different things:
 
 - **`fixtures/`** holds *Playwright test fixtures* (created via `test.extend({...})`). By the canonical definition, a fixture is "a consistent, predefined set of data, objects, or environmental conditions used to ensure tests run in a stable state" — i.e. setup/teardown that runs *automatically* around each test or worker. `auth.ts` matches: it extends Playwright's `test` with an `authedPage` that's logged-in before every test runs and torn down after. If the only thing in this folder ever is `auth.ts`, that's fine — fixtures are a deliberately small surface.
-- **`helpers/`** holds plain function helpers that you call *explicitly* from a test or hook — they don't extend Playwright's `test`. This covers both behaviour helpers (e.g. `gotoLogsExplorer(page)`) and the constants those helpers and the tests both refer to (e.g. `LINKED_ROW_CLASS`). Constants live next to the helpers that use them so a single import line in a test covers both.
-- **`testdata/`** holds static data files (typically JSON / YAML) consumed by the helpers — for example, `traces/large-trace.json`, a real trace the trace-details helpers seed.
+- **`helpers/`** holds plain function helpers that you call *explicitly* from a test or hook — they don't extend Playwright's `test`. This covers both behaviour helpers (e.g. `gotoDashboardsList(page)`) and the constants those helpers and the tests both refer to (e.g. `SEARCH_PLACEHOLDER`). Constants live next to the helpers that use them so a single import line in a test covers both.
+- **`testdata/`** holds static data files (typically JSON / YAML) consumed by the helpers — for example, `apm-metrics.json`, a real dashboard payload uploaded through the UI by an importer helper.
 
 Rule of thumb: if it's a `test.extend` fixture, put it in `fixtures/`. If it's a function you call explicitly (or a constant the function uses), put it in `helpers/`. If it's a static file the helpers read, put it in `testdata/`.
 
@@ -128,7 +128,7 @@ test('TC-09 RouteTab switches the url', async ({ routing }) => {
 });
 ```
 
-- `driver(name, build, dispose?)` adds a test-scoped fixture built on `authedPage`. `dispose` runs after the test on the same page, so a driver can delete what it seeded.
+- `driver(name, build)` adds a test-scoped fixture built on `authedPage`.
 - `seeded(name, open, close)` adds a worker-scoped seed. `open` and `close` run on a throwaway admin page.
 - A driver reuses helpers by calling them, never by reaching for another fixture.
 - `drivers/` is AI-owned: coding agents generate and maintain it with the specs, and `.gitattributes` collapses it in diffs.
@@ -187,7 +187,7 @@ Each spec follows these principles:
     });
     ```
     This is faster and more reliable than a multi-step UI seed. Reach for the UI flow only when the test's *purpose* is asserting that flow.
-6. **Reusable static data lives in `tests/e2e/testdata/`.** For example, `traces/large-trace.json` is a real trace that `loadLargeTrace` (in `helpers/trace-details.ts`) seeds for the trace-details tests.
+6. **Reusable static data lives in `tests/e2e/testdata/`.** For example, `apm-metrics.json` is a real dashboard payload that `importApmMetricsDashboardViaUI` (in `helpers/dashboards.ts`) uploads through the actual Import JSON UI flow to seed a richly-tagged dashboard for search/list tests.
 
 ## How to write an E2E test?
 

frontend/.storybook/preview.tsx

@@ -140,7 +140,7 @@ const preview: Preview = {
 						'Services',
 						['List', 'Detail', 'Top Level Operations', 'Service Map'],
 						'Logs',
-						['Explorer', 'Live Tail', 'Pipelines', 'Settings'],
+						['Explorer', 'Live Tail', 'Saved Views', 'Pipelines', 'Settings'],
 						'Traces',
 						['Explorer', 'Trace Details', 'Funnel Details'],
 						'Metrics',

frontend/public/locales/en-GB/explorer.json

@@ -0,0 +1,3 @@
+{
+    "name_of_the_view": "Name of the view"
+}

frontend/public/locales/en-GB/titles.json

@@ -47,6 +47,7 @@
 	"INFRASTRUCTURE_MONITORING_HOSTS": "SigNoz | Infra Monitoring",
 	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
+	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
 	"MEMBERS_SETTINGS": "SigNoz | Members",

frontend/public/locales/en/explorer.json

@@ -0,0 +1,4 @@
+{
+    "name_of_the_view": "Name of the view",
+    "delete_confirm_message": "Are you sure you want to delete {{viewName}} view? Deleting a view is irreversible and cannot be undone."
+}

frontend/public/locales/en/titles.json

@@ -50,6 +50,8 @@
 	"WORKSPACE_SUSPENDED": "SigNoz | Workspace Suspended",
 	"WORKSPACE_ACCESS_RESTRICTED": "SigNoz | Workspace Access Restricted",
 	"SUPPORT": "SigNoz | Support",
+	"LOGS_SAVE_VIEWS": "SigNoz | Logs Saved Views",
+	"TRACES_SAVE_VIEWS": "SigNoz | Traces Saved Views",
 	"TRACES_FUNNELS": "SigNoz | Traces Funnels",
 	"DEFAULT": "Open source Observability Platform | SigNoz",
 	"SHORTCUTS": "SigNoz | Shortcuts",
@@ -64,8 +66,10 @@
 	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
 	"METRICS_EXPLORER": "SigNoz | Metrics Explorer",
 	"METRICS_EXPLORER_EXPLORER": "SigNoz | Metrics Explorer",
+	"METRICS_EXPLORER_VIEWS": "SigNoz | Metrics Explorer",
 	"API_MONITORING": "SigNoz | External APIs",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
+	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
 	"MEMBERS_SETTINGS": "SigNoz | Members",

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -303,10 +303,10 @@ describe('PrivateRoute', () => {
 		it.each([
 			['/logs-save-views', ROUTES.LOGS_EXPLORER],
 			['/traces-save-views', ROUTES.TRACES_EXPLORER],
-			['/logs/saved-views', ROUTES.LOGS_EXPLORER],
-			['/traces/saved-views', ROUTES.TRACES_EXPLORER],
-			['/metrics-explorer/views', ROUTES.METRICS_EXPLORER_EXPLORER],
-			['/meter/explorer/views', ROUTES.METER_EXPLORER],
+			[ROUTES.LOGS_SAVE_VIEWS, ROUTES.LOGS_EXPLORER],
+			[ROUTES.TRACES_SAVE_VIEWS, ROUTES.TRACES_EXPLORER],
+			[ROUTES.METRICS_EXPLORER_VIEWS, ROUTES.METRICS_EXPLORER_EXPLORER],
+			[ROUTES.METER_EXPLORER_VIEWS, ROUTES.METER_EXPLORER],
 		])('should redirect the old views route %s to %s', (from, to) => {
 			renderPrivateRoute({ initialRoute: from });
 

frontend/src/AppRoutes/index.tsx

@@ -18,6 +18,7 @@ import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -65,6 +66,7 @@ function App(): JSX.Element {
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const isSavedViewEnabled = useSavedViewEnabled();
 	const chatSupport = useChatSupport();
 
 	const { hostname } = window.location;
@@ -254,8 +256,18 @@ function App(): JSX.Element {
 
 	useEffect(() => {
 		// The bottom strip carries Support, so the floating bubble goes entirely.
-		window.Pylon?.('hideChatBubble');
-	}, [pathname]);
+		if (
+			isSavedViewEnabled ||
+			pathname === ROUTES.ONBOARDING ||
+			pathname.startsWith('/public/dashboard/') ||
+			pathname === '/ai-assistant' ||
+			pathname.startsWith('/ai-assistant/')
+		) {
+			window.Pylon?.('hideChatBubble');
+		} else {
+			window.Pylon?.('showChatBubble');
+		}
+	}, [pathname, isSavedViewEnabled]);
 
 	// Identity for the Pylon widget. Whether this user gets Pylon at all is
 	// `useChatSupport`'s call — this only fills in who they are.

frontend/src/AppRoutes/pageComponents.ts

@@ -26,6 +26,10 @@ export const ServiceMapPage = Loadable(
 	() => import(/* webpackChunkName: "ServiceMapPage" */ 'modules/Servicemap'),
 );
 
+export const LogsSaveViews = Loadable(
+	() => import(/* webpackChunkName: "LogsSaveViews" */ 'pages/LogsModulePage'), // TODO: Add a wrapper so that the same component can be used in traces
+);
+
 export const TracesExplorer = Loadable(
 	() =>
 		import(
@@ -33,6 +37,11 @@ export const TracesExplorer = Loadable(
 		),
 );
 
+export const TracesSaveViews = Loadable(
+	() =>
+		import(/* webpackChunkName: "Traces Save Views" */ 'pages/TracesModulePage'),
+);
+
 export const TracesFunnels = Loadable(
 	() =>
 		import(/* webpackChunkName: "Traces Funnels" */ 'pages/TracesModulePage'),

frontend/src/AppRoutes/routes.ts

@@ -26,6 +26,7 @@ import {
 	Login,
 	Logs,
 	LogsIndexToFields,
+	LogsSaveViews,
 	MessagingQueuesMainPage,
 	MeterExplorerPage,
 	MetricsExplorer,
@@ -47,6 +48,7 @@ import {
 	TracesExplorer,
 	TracesFunnelDetails,
 	TracesFunnels,
+	TracesSaveViews,
 	UnAuthorized,
 	UsageExplorerPage,
 	WorkspaceAccessRestricted,
@@ -118,6 +120,13 @@ const routes: AppRoutes[] = [
 		exact: true,
 		key: 'SERVICE_MAP',
 	},
+	{
+		path: ROUTES.LOGS_SAVE_VIEWS,
+		component: LogsSaveViews,
+		isPrivate: true,
+		exact: true,
+		key: 'LOGS_SAVE_VIEWS',
+	},
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
@@ -209,6 +218,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'TRACES_EXPLORER',
 	},
+	{
+		path: ROUTES.TRACES_SAVE_VIEWS,
+		exact: true,
+		component: TracesSaveViews,
+		isPrivate: true,
+		key: 'TRACES_SAVE_VIEWS',
+	},
 	{
 		path: ROUTES.TRACES_FUNNELS,
 		exact: true,
@@ -398,6 +414,13 @@ const routes: AppRoutes[] = [
 		key: 'METRICS_EXPLORER_EXPLORER',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.METRICS_EXPLORER_VIEWS,
+		exact: true,
+		component: MetricsExplorer,
+		key: 'METRICS_EXPLORER_VIEWS',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
 		exact: true,
@@ -420,6 +443,13 @@ const routes: AppRoutes[] = [
 		key: 'METER_EXPLORER',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.METER_EXPLORER_VIEWS,
+		exact: true,
+		component: MeterExplorerPage,
+		key: 'METER_EXPLORER_VIEWS',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.API_MONITORING,
 		exact: true,

frontend/src/api/saveView/deleteView.ts

@@ -0,0 +1,5 @@
+import axios from 'api';
+import { DeleteViewPayloadProps } from 'types/api/saveViews/types';
+
+export const deleteView = (uuid: string): Promise<DeleteViewPayloadProps> =>
+	axios.delete(`/explorer/views/${uuid}`);

frontend/src/api/saveView/getAllViews.ts

@@ -0,0 +1,9 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import { AllViewsProps } from 'types/api/saveViews/types';
+import { DataSource } from 'types/common/queryBuilder';
+
+export const getAllViews = (
+	sourcepage: DataSource | 'meter',
+): Promise<AxiosResponse<AllViewsProps>> =>
+	axios.get(`/explorer/views?sourcePage=${sourcepage}`);

frontend/src/api/saveView/getViewById.ts

@@ -0,0 +1,24 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import { ViewProps } from 'types/api/saveViews/types';
+
+/**
+ * Fetches a single saved view by ID (`GET /api/v1/explorer/views/{viewId}`).
+ *
+ * Hand-maintained alongside the other `api/saveView/*` clients — explorer views
+ * are not in `docs/api/openapi.yml`, so Orval does not generate a hook here
+ * (unlike e.g. `useGetChannelByID` under `api/generated/services/channels`).
+ *
+ * Used by the AI assistant "Open view" action to load `compositeQuery` and
+ * navigate to the correct explorer without listing every view per source page.
+ * See `container/AIAssistant/components/ActionsSection/utils/openSavedView.ts`.
+ */
+export interface GetViewByIdProps {
+	status: string;
+	data: ViewProps;
+}
+
+export const getViewById = (
+	viewKey: string,
+): Promise<AxiosResponse<GetViewByIdProps>> =>
+	axios.get(`/explorer/views/${viewKey}`);

frontend/src/api/saveView/saveView.ts

@@ -0,0 +1,16 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import { SaveViewPayloadProps, SaveViewProps } from 'types/api/saveViews/types';
+
+export const saveView = ({
+	compositeQuery,
+	sourcePage,
+	viewName,
+	extraData,
+}: SaveViewProps): Promise<AxiosResponse<SaveViewPayloadProps>> =>
+	axios.post('/explorer/views', {
+		name: viewName,
+		sourcePage,
+		compositeQuery,
+		extraData,
+	});

frontend/src/api/saveView/updateView.ts

@@ -0,0 +1,19 @@
+import axios from 'api';
+import {
+	UpdateViewPayloadProps,
+	UpdateViewProps,
+} from 'types/api/saveViews/types';
+
+export const updateView = ({
+	compositeQuery,
+	viewName,
+	extraData,
+	sourcePage,
+	viewKey,
+}: UpdateViewProps): Promise<UpdateViewPayloadProps> =>
+	axios.put(`/explorer/views/${viewKey}`, {
+		name: viewName,
+		compositeQuery,
+		extraData,
+		sourcePage,
+	});

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Button } from 'antd';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import logEvent from 'api/common/logEvent';
+import { MessageSquareText } from '@signozhq/icons';
+
+export default function ChatSupportGateway(): JSX.Element {
+	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
+		useState(false);
+	const { pathname } = useLocation();
+
+	return (
+		<>
+			<div className="chat-support-gateway">
+				<Button
+					className="chat-support-gateway-btn"
+					onClick={(): void => {
+						logEvent('Disabled Chat Support: Clicked', {
+							source: `chat support icon`,
+							page: pathname,
+						});
+
+						setIsAddCreditCardModalOpen(true);
+					}}
+				>
+					<MessageSquareText size={24} />
+				</Button>
+			</div>
+
+			<AddCreditCardModal
+				open={isAddCreditCardModalOpen}
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+				onAddCreditCard={(): void => {
+					logEvent('Add Credit card modal: Clicked', {
+						source: `chat support icon`,
+						page: pathname,
+					});
+				}}
+			/>
+		</>
+	);
+}

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -0,0 +1,252 @@
+import { useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { Button, Col, Popover, Row, Select, Space } from 'antd';
+import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
+import { Typography } from '@signozhq/ui/typography';
+import axios from 'axios';
+import TextToolTip from 'components/TextToolTip';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { useOptionsMenu } from 'container/OptionsMenu';
+import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useDeleteView } from 'hooks/saveViews/useDeleteView';
+import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
+import { useUpdateView } from 'hooks/saveViews/useUpdateView';
+import useErrorNotification from 'hooks/useErrorNotification';
+import { useNotifications } from 'hooks/useNotifications';
+import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
+import { DataSource, StringOperators } from 'types/common/queryBuilder';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { ExploreHeaderToolTip, SaveButtonText } from './constants';
+import MenuItemGenerator from './MenuItemGenerator';
+import SaveViewWithName from './SaveViewWithName';
+import {
+	DropDownOverlay,
+	ExplorerCardHeadContainer,
+	OffSetCol,
+} from './styles';
+import { ExplorerCardProps } from './types';
+import { deleteViewHandler } from './utils';
+import { Ellipsis, Save, Share2, Trash2 } from '@signozhq/icons';
+
+function ExplorerCard({
+	sourcepage,
+	children,
+}: ExplorerCardProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const [, setCopyUrl] = useCopyToClipboard();
+	const { notifications } = useNotifications();
+
+	const onCopyUrlHandler = (): void => {
+		setCopyUrl(window.location.href);
+		notifications.success({
+			message: 'Copied to clipboard',
+		});
+	};
+
+	const {
+		currentQuery,
+		panelType,
+		redirectWithQueryBuilderData,
+		updateAllQueriesOperators,
+		isStagedQueryUpdated,
+	} = useQueryBuilder();
+
+	const {
+		data: viewsData,
+		isLoading,
+		error,
+		isRefetching,
+		refetch: refetchAllView,
+	} = useGetAllViews(sourcepage);
+
+	useErrorNotification(error);
+
+	const handleOpenChange = (newOpen = false): void => {
+		setIsOpen(newOpen);
+	};
+
+	const { viewName, viewKey } = useGetSavedViewParams();
+
+	const { options } = useOptionsMenu({
+		storageKey:
+			sourcepage === DataSource.TRACES
+				? LOCALSTORAGE.TRACES_LIST_OPTIONS
+				: LOCALSTORAGE.LOGS_LIST_OPTIONS,
+		dataSource: sourcepage,
+		aggregateOperator: StringOperators.NOOP,
+	});
+
+	const isQueryUpdated = isStagedQueryUpdated(
+		viewsData?.data?.data,
+		viewKey,
+		options,
+	);
+
+	const { mutateAsync: updateViewAsync } = useUpdateView({
+		compositeQuery: mapCompositeQueryFromQuery(currentQuery, panelType),
+		viewKey,
+		extraData: '',
+		sourcePage: sourcepage,
+		viewName,
+	});
+
+	const { mutateAsync: deleteViewAsync } = useDeleteView(viewKey);
+
+	const showErrorNotification = (err: Error): void => {
+		notifications.error({
+			message: axios.isAxiosError(err) ? err.message : SOMETHING_WENT_WRONG,
+		});
+	};
+
+	const onDeleteHandler = (): void =>
+		deleteViewHandler({
+			deleteViewAsync,
+			notifications,
+			panelType,
+			redirectWithQueryBuilderData,
+			refetchAllView,
+			viewId: viewKey,
+			viewKey,
+			updateAllQueriesOperators,
+			sourcePage: sourcepage,
+		});
+
+	const onUpdateQueryHandler = (): void => {
+		updateViewAsync(
+			{
+				compositeQuery: mapCompositeQueryFromQuery(currentQuery, panelType),
+				viewKey,
+				extraData: '',
+				sourcePage: sourcepage,
+				viewName,
+			},
+			{
+				onSuccess: () => {
+					notifications.success({
+						message: 'View Updated Successfully',
+					});
+					refetchAllView();
+				},
+				onError: (err) => {
+					showErrorNotification(err);
+				},
+			},
+		);
+	};
+
+	const moreOptionItems: DropdownItemType[] = [
+		{
+			type: 'item',
+			value: 'delete',
+			label: <Typography.Text strong>Delete</Typography.Text>,
+			onClick: onDeleteHandler,
+			prefix: <Trash2 size="md" />,
+		},
+	];
+
+	const saveButtonType = isQueryUpdated ? 'default' : 'primary';
+	const saveButtonIcon = isQueryUpdated ? null : <Save size="md" />;
+
+	const showSaveView = false;
+
+	return (
+		<>
+			{showSaveView && (
+				<ExplorerCardHeadContainer size="small">
+					<Row align="middle">
+						<Col span={6}>
+							<Space>
+								<Typography>Query Builder</Typography>
+								<TextToolTip
+									url={ExploreHeaderToolTip.url}
+									text={ExploreHeaderToolTip.text}
+									useFilledIcon={false}
+								/>
+							</Space>
+						</Col>
+						<OffSetCol span={18}>
+							<Space size="large">
+								{viewsData?.data.data && viewsData?.data.data.length && (
+									<Space>
+										<Select
+											getPopupContainer={popupContainer}
+											loading={isLoading || isRefetching}
+											showSearch
+											placeholder="Select a view"
+											dropdownStyle={DropDownOverlay}
+											dropdownMatchSelectWidth={false}
+											optionLabelProp="value"
+											value={viewName || undefined}
+										>
+											{viewsData?.data.data.map((view) => (
+												<Select.Option key={view.id} value={view.name}>
+													<MenuItemGenerator
+														viewName={view.name}
+														viewKey={viewKey}
+														createdBy={view.createdBy}
+														uuid={view.id}
+														refetchAllView={refetchAllView}
+														viewData={viewsData.data.data}
+														sourcePage={sourcepage}
+													/>
+												</Select.Option>
+											))}
+										</Select>
+									</Space>
+								)}
+								{isQueryUpdated && (
+									<Button type="primary" icon={<Save />} onClick={onUpdateQueryHandler}>
+										Save changes
+									</Button>
+								)}
+								<Popover
+									getPopupContainer={popupContainer}
+									placement="bottomLeft"
+									trigger="click"
+									content={
+										<SaveViewWithName
+											sourcePage={sourcepage}
+											handlePopOverClose={handleOpenChange}
+											refetchAllView={refetchAllView}
+										/>
+									}
+									showArrow={false}
+									open={isOpen}
+									onOpenChange={handleOpenChange}
+								>
+									<Button
+										type={saveButtonType}
+										icon={saveButtonIcon}
+										data-testid="traces-save-view-action"
+									>
+										{isQueryUpdated
+											? SaveButtonText.SAVE_AS_NEW_VIEW
+											: SaveButtonText.SAVE_VIEW}
+									</Button>
+								</Popover>
+								<Share2 onClick={onCopyUrlHandler} size="md" />
+								{viewKey && (
+									<Dropdown
+										items={moreOptionItems}
+										nativeButton
+										align="end"
+										side="bottom"
+									>
+										<Button type="text" size="small" icon={<Ellipsis size="md" />} />
+									</Dropdown>
+								)}
+							</Space>
+						</OffSetCol>
+					</Row>
+				</ExplorerCardHeadContainer>
+			)}
+
+			<div>{children}</div>
+		</>
+	);
+}
+
+export default ExplorerCard;

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -0,0 +1,103 @@
+import { MouseEvent, useCallback } from 'react';
+import { Trash2 } from '@signozhq/icons';
+import { Col, Row, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useDeleteView } from 'hooks/saveViews/useDeleteView';
+import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
+import { useNotifications } from 'hooks/useNotifications';
+
+import { MenuItemContainer } from './styles';
+import { MenuItemLabelGeneratorProps } from './types';
+import {
+	deleteViewHandler,
+	getViewDetailsUsingViewKey,
+	trimViewName,
+} from './utils';
+
+function MenuItemGenerator({
+	viewName,
+	viewKey,
+	createdBy,
+	uuid,
+	viewData,
+	refetchAllView,
+	sourcePage,
+}: MenuItemLabelGeneratorProps): JSX.Element {
+	const { panelType, redirectWithQueryBuilderData, updateAllQueriesOperators } =
+		useQueryBuilder();
+	const { handleExplorerTabChange } = useHandleExplorerTabChange();
+
+	const { notifications } = useNotifications();
+
+	const { mutateAsync: deleteViewAsync } = useDeleteView(uuid);
+
+	const onDeleteHandler = (event: MouseEvent<SVGSVGElement>): void => {
+		event.stopPropagation();
+		deleteViewHandler({
+			deleteViewAsync,
+			notifications,
+			panelType,
+			redirectWithQueryBuilderData,
+			refetchAllView,
+			viewId: uuid,
+			viewKey,
+			updateAllQueriesOperators,
+			sourcePage,
+		});
+	};
+
+	const onMenuItemSelectHandler = useCallback(
+		({ key }: { key: string }): void => {
+			const currentViewDetails = getViewDetailsUsingViewKey(key, viewData);
+			if (!currentViewDetails) {
+				return;
+			}
+			const { query, name, id, panelType: currentPanelType } = currentViewDetails;
+
+			handleExplorerTabChange(currentPanelType, {
+				query,
+				viewName: name,
+				viewKey: id,
+			});
+		},
+		[viewData, handleExplorerTabChange],
+	);
+
+	const onLabelClickHandler = (): void => {
+		onMenuItemSelectHandler({
+			key: uuid,
+		});
+	};
+
+	const newViewName = trimViewName(viewName);
+
+	return (
+		<MenuItemContainer onClick={onLabelClickHandler}>
+			<Row justify="space-between">
+				<Col span={22}>
+					<Row>
+						<Tooltip title={viewName}>
+							<Typography.Text strong>{newViewName}</Typography.Text>
+						</Tooltip>
+					</Row>
+					<Row>
+						<Typography.Text color="muted">Created by {createdBy}</Typography.Text>
+					</Row>
+				</Col>
+				<Col span={2}>
+					<Typography.Link>
+						<Trash2
+							role="img"
+							aria-label="Delete view"
+							onClick={onDeleteHandler}
+							size="md"
+						/>
+					</Typography.Link>
+				</Col>
+			</Row>
+		</MenuItemContainer>
+	);
+}
+
+export default MenuItemGenerator;

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -0,0 +1,79 @@
+import { useTranslation } from 'react-i18next';
+import { Input } from '@signozhq/ui/input';
+import { Card, Form } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSaveView } from 'hooks/saveViews/useSaveView';
+import { useNotifications } from 'hooks/useNotifications';
+import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
+
+import { SaveButton } from './styles';
+import { SaveViewFormProps, SaveViewWithNameProps } from './types';
+import { saveViewHandler } from './utils';
+
+function SaveViewWithName({
+	sourcePage,
+	handlePopOverClose,
+	refetchAllView,
+}: SaveViewWithNameProps): JSX.Element {
+	const [form] = Form.useForm<SaveViewFormProps>();
+	const { t } = useTranslation(['explorer']);
+	const { currentQuery, panelType, redirectWithQueryBuilderData } =
+		useQueryBuilder();
+	const { notifications } = useNotifications();
+	const compositeQuery = mapCompositeQueryFromQuery(currentQuery, panelType);
+
+	const { isLoading, mutateAsync: saveViewAsync } = useSaveView({
+		viewName: form.getFieldValue('viewName'),
+		compositeQuery,
+		sourcePage,
+		extraData: '',
+	});
+
+	const onSaveHandler = (): void => {
+		saveViewHandler({
+			compositeQuery,
+			handlePopOverClose,
+			extraData: '',
+			notifications,
+			panelType: panelType || PANEL_TYPES.LIST,
+			redirectWithQueryBuilderData,
+			refetchAllView,
+			saveViewAsync,
+			sourcePage,
+			viewName: form.getFieldValue('viewName'),
+			form,
+		});
+	};
+
+	return (
+		<Card>
+			<Typography>{t('name_of_the_view')}</Typography>
+			<Form form={form} onFinish={onSaveHandler} requiredMark>
+				<Form.Item
+					name={['viewName']}
+					required
+					rules={[
+						{
+							required: true,
+							message: 'Please enter view name',
+						},
+					]}
+				>
+					<Input placeholder="Enter Name" />
+				</Form.Item>
+				<SaveButton
+					htmlType="submit"
+					type="primary"
+					loading={isLoading}
+					data-testid="save-view-name-action-button"
+				>
+					Save
+				</SaveButton>
+			</Form>
+		</Card>
+	);
+}
+
+export default SaveViewWithName;

frontend/src/components/ExplorerCard/__mock__/viewData.ts

@@ -0,0 +1,32 @@
+import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
+import { ViewProps } from 'types/api/saveViews/types';
+import { DataSource } from 'types/common/queryBuilder';
+
+export const viewMockData: ViewProps[] = [
+	{
+		id: 'view1',
+		name: 'View 1',
+		createdBy: 'User 1',
+		category: 'category 1',
+		compositeQuery: {} as ICompositeMetricQuery,
+		createdAt: '2021-07-07T06:31:00.000Z',
+		updatedAt: '2021-07-07T06:33:00.000Z',
+		extraData: '',
+		sourcePage: DataSource.TRACES,
+		tags: [],
+		updatedBy: 'User 1',
+	},
+	{
+		id: 'view2',
+		name: 'View 2',
+		createdBy: 'User 2',
+		category: 'category 2',
+		compositeQuery: {} as ICompositeMetricQuery,
+		createdAt: '2021-07-07T06:30:00.000Z',
+		updatedAt: '2021-07-07T06:30:00.000Z',
+		extraData: '',
+		sourcePage: DataSource.TRACES,
+		tags: [],
+		updatedBy: 'User 2',
+	},
+];

frontend/src/components/ExplorerCard/constants.ts

@@ -0,0 +1,9 @@
+export const ExploreHeaderToolTip = {
+	url: 'https://signoz.io/docs/querying/overview/?utm_source=product&utm_medium=new-query-builder',
+	text: 'More details on how to use query builder',
+};
+
+export const SaveButtonText = {
+	SAVE_AS_NEW_VIEW: 'Save as new view',
+	SAVE_VIEW: 'Save view',
+};

frontend/src/components/ExplorerCard/styles.ts

@@ -0,0 +1,29 @@
+import { Button, Card, Col } from 'antd';
+import styled, { CSSProperties } from 'styled-components';
+
+export const ExplorerCardHeadContainer = styled(Card)`
+	margin: 1rem 0;
+	padding: 0;
+`;
+
+export const OffSetCol = styled(Col)`
+	text-align: right;
+`;
+
+export const SaveButton = styled(Button)`
+	&&& {
+		margin: 1rem 0;
+		width: 5rem;
+	}
+`;
+
+export const DropDownOverlay: CSSProperties = {
+	maxHeight: '20rem',
+	overflowY: 'auto',
+	width: '20rem',
+	padding: 0,
+};
+
+export const MenuItemContainer = styled(Card)`
+	padding: 0;
+`;

frontend/src/components/ExplorerCard/test/ExplorerCard.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { viewMockData } from '../__mock__/viewData';
+import ExplorerCard from '../ExplorerCard';
+
+const historyReplace = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.TRACES_EXPLORER}/`,
+	}),
+	useHistory: (): any => ({
+		...jest.requireActual('react-router-dom').useHistory(),
+		replace: historyReplace,
+	}),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: jest.fn(),
+	}),
+}));
+
+jest.mock('hooks/queryBuilder/useGetPanelTypesQueryParam', () => ({
+	useGetPanelTypesQueryParam: jest.fn(() => 'mockedPanelType'),
+}));
+
+jest.mock('hooks/saveViews/useGetAllViews', () => ({
+	useGetAllViews: jest.fn(() => ({
+		data: { data: { data: viewMockData } },
+		isLoading: false,
+		error: null,
+		isRefetching: false,
+		refetch: jest.fn(),
+	})),
+}));
+
+jest.mock('hooks/saveViews/useUpdateView', () => ({
+	useUpdateView: jest.fn(() => ({
+		mutateAsync: jest.fn(),
+	})),
+}));
+
+jest.mock('hooks/saveViews/useDeleteView', () => ({
+	useDeleteView: jest.fn(() => ({
+		mutateAsync: jest.fn(),
+	})),
+}));
+
+// Mock usePreferenceSync
+jest.mock('providers/preferences/sync/usePreferenceSync', () => ({
+	usePreferenceSync: (): any => ({
+		preferences: {
+			columns: [],
+			formatting: {
+				maxLines: 1,
+				format: 'table',
+				fontSize: 'small',
+				version: 1,
+			},
+		},
+		loading: false,
+		error: null,
+		updateColumns: jest.fn(),
+		updateFormatting: jest.fn(),
+	}),
+}));
+
+describe('ExplorerCard', () => {
+	it('renders a card with a title and a description', () => {
+		render(
+			<MockQueryClientProvider>
+				<PreferenceContextProvider>
+					<ExplorerCard sourcepage={DataSource.TRACES}>child</ExplorerCard>
+				</PreferenceContextProvider>
+			</MockQueryClientProvider>,
+		);
+		expect(screen.queryByText('Query Builder')).not.toBeInTheDocument();
+	});
+
+	it('renders a save view button', () => {
+		render(
+			<MockQueryClientProvider>
+				<PreferenceContextProvider>
+					<ExplorerCard sourcepage={DataSource.TRACES}>child</ExplorerCard>
+				</PreferenceContextProvider>
+			</MockQueryClientProvider>,
+		);
+		expect(screen.queryByText('Save view')).not.toBeInTheDocument();
+	});
+});

frontend/src/components/ExplorerCard/test/MenuItemGenerator.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { viewMockData } from '../__mock__/viewData';
+import MenuItemGenerator from '../MenuItemGenerator';
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.APPLICATION}/`,
+	}),
+}));
+
+jest.mock('antd', () => ({
+	...jest.requireActual('antd'),
+	useForm: jest.fn().mockReturnValue({
+		onFinish: jest.fn(),
+	}),
+}));
+
+describe('MenuItemGenerator', () => {
+	it('should render MenuItemGenerator component', () => {
+		const screen = render(
+			<MockQueryClientProvider>
+				<MenuItemGenerator
+					viewName={viewMockData[0].name}
+					viewKey={viewMockData[0].id}
+					createdBy={viewMockData[0].createdBy}
+					uuid={viewMockData[0].id}
+					refetchAllView={jest.fn()}
+					viewData={viewMockData}
+					sourcePage={DataSource.TRACES}
+				/>
+			</MockQueryClientProvider>,
+		);
+
+		expect(screen.getByText(viewMockData[0].name)).toBeInTheDocument();
+	});
+
+	it('should call onMenuItemSelectHandler on click of MenuItemGenerator', () => {
+		render(
+			<MockQueryClientProvider>
+				<MenuItemGenerator
+					viewName={viewMockData[0].name}
+					viewKey={viewMockData[0].id}
+					createdBy={viewMockData[0].createdBy}
+					uuid={viewMockData[0].id}
+					refetchAllView={jest.fn()}
+					viewData={viewMockData}
+					sourcePage={DataSource.TRACES}
+				/>
+			</MockQueryClientProvider>,
+		);
+
+		const spanElement = screen.getByRole('img', {
+			name: /delete view/i,
+		});
+
+		expect(spanElement).toBeInTheDocument();
+	});
+});

frontend/src/components/ExplorerCard/test/SaveViewWithName.test.tsx

@@ -0,0 +1,63 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { fireEvent, render } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import { DataSource } from 'types/common/queryBuilder';
+
+import SaveViewWithName from '../SaveViewWithName';
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.APPLICATION}/`,
+	}),
+}));
+
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			refetchOnWindowFocus: false,
+		},
+	},
+});
+
+jest.mock('hooks/queryBuilder/useGetPanelTypesQueryParam', () => ({
+	useGetPanelTypesQueryParam: jest.fn(() => 'mockedPanelType'),
+}));
+
+jest.mock('hooks/saveViews/useSaveView', () => ({
+	useSaveView: jest.fn(() => ({
+		mutateAsync: jest.fn(),
+	})),
+}));
+
+describe('SaveViewWithName', () => {
+	it('should render SaveViewWithName component', () => {
+		const screen = render(
+			<QueryClientProvider client={queryClient}>
+				<SaveViewWithName
+					sourcePage={DataSource.TRACES}
+					handlePopOverClose={jest.fn()}
+					refetchAllView={jest.fn()}
+				/>
+			</QueryClientProvider>,
+		);
+
+		expect(screen.getByText('Save')).toBeInTheDocument();
+	});
+
+	it('should call saveViewAsync on click of Save button', () => {
+		const screen = render(
+			<QueryClientProvider client={queryClient}>
+				<SaveViewWithName
+					sourcePage={DataSource.TRACES}
+					handlePopOverClose={jest.fn()}
+					refetchAllView={jest.fn()}
+				/>
+			</QueryClientProvider>,
+		);
+
+		fireEvent.click(screen.getByText('Save'));
+
+		expect(screen.getByText('Save')).toBeInTheDocument();
+	});
+});

frontend/src/components/ExplorerCard/types.ts

@@ -0,0 +1,92 @@
+import { UseMutateAsyncFunction } from 'react-query';
+import { FormInstance } from 'antd';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import { AxiosResponse } from 'axios';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { OptionsQuery } from 'container/OptionsMenu/types';
+import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	DeleteViewPayloadProps,
+	SaveViewPayloadProps,
+	SaveViewProps,
+	ViewProps,
+} from 'types/api/saveViews/types';
+import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
+
+export interface ExplorerCardProps {
+	sourcepage: DataSource;
+	children: React.ReactNode;
+}
+
+export type GetViewDetailsUsingViewKey = (
+	viewKey: string,
+	data: ViewProps[] | undefined,
+) =>
+	| {
+			query: Query;
+			name: string;
+			id: string;
+			panelType: PANEL_TYPES;
+			extraData?: string;
+	  }
+	| undefined;
+
+export interface IsQueryUpdatedInViewProps {
+	viewKey: string;
+	data: ViewProps[] | undefined;
+	stagedQuery: Query | null;
+	currentPanelType: PANEL_TYPES | null;
+	options: OptionsQuery;
+}
+
+export interface SaveViewWithNameProps {
+	sourcePage: ExplorerCardProps['sourcepage'];
+	handlePopOverClose: VoidFunction;
+	refetchAllView: VoidFunction;
+}
+
+export interface SaveViewFormProps {
+	viewName: string;
+}
+
+export interface MenuItemLabelGeneratorProps {
+	viewName: string;
+	viewKey: string;
+	createdBy: string;
+	uuid: string;
+	viewData: ViewProps[];
+	refetchAllView: VoidFunction;
+	sourcePage: ExplorerCardProps['sourcepage'];
+}
+
+export interface SaveViewHandlerProps {
+	viewName: string;
+	compositeQuery: ICompositeMetricQuery;
+	sourcePage: ExplorerCardProps['sourcepage'];
+	extraData: string;
+	panelType: PANEL_TYPES | null;
+	notifications: NotificationInstance;
+	refetchAllView: SaveViewWithNameProps['refetchAllView'];
+	saveViewAsync: UseMutateAsyncFunction<
+		AxiosResponse<SaveViewPayloadProps>,
+		Error,
+		SaveViewProps,
+		SaveViewPayloadProps
+	>;
+	handlePopOverClose: SaveViewWithNameProps['handlePopOverClose'];
+	redirectWithQueryBuilderData: QueryBuilderContextType['redirectWithQueryBuilderData'];
+	form: FormInstance<SaveViewFormProps>;
+}
+
+export interface DeleteViewHandlerProps {
+	deleteViewAsync: UseMutateAsyncFunction<DeleteViewPayloadProps, Error, string>;
+	refetchAllView: MenuItemLabelGeneratorProps['refetchAllView'];
+	redirectWithQueryBuilderData: QueryBuilderContextType['redirectWithQueryBuilderData'];
+	notifications: NotificationInstance;
+	panelType: PANEL_TYPES | null;
+	viewKey: string;
+	viewId: string;
+	updateAllQueriesOperators: QueryBuilderContextType['updateAllQueriesOperators'];
+	sourcePage: ExplorerCardProps['sourcepage'];
+}

frontend/src/components/ExplorerCard/utils.ts

@@ -0,0 +1,204 @@
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import axios from 'axios';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
+import isEqual from 'lodash-es/isEqual';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import {
+	DeleteViewHandlerProps,
+	GetViewDetailsUsingViewKey,
+	IsQueryUpdatedInViewProps,
+	SaveViewHandlerProps,
+} from './types';
+
+export const showErrorNotification = (
+	notifications: NotificationInstance,
+	err: Error,
+): void => {
+	notifications.error({
+		message: axios.isAxiosError(err) ? err.message : SOMETHING_WENT_WRONG,
+	});
+};
+
+export const getViewDetailsUsingViewKey: GetViewDetailsUsingViewKey = (
+	viewKey,
+	data,
+) => {
+	const selectedView = data?.find((view) => view.id === viewKey);
+	if (selectedView) {
+		const { compositeQuery, name, id, extraData } = selectedView;
+		const query = mapQueryDataFromApi(compositeQuery);
+		return { query, name, id, panelType: compositeQuery.panelType, extraData };
+	}
+	return undefined;
+};
+
+export const omitIdFromQuery = (query: Query | null): any => ({
+	...query,
+	builder: {
+		...query?.builder,
+		queryData: query?.builder.queryData.map((queryData) => {
+			const { id: _aggregateAttributeId, ...rest } =
+				queryData.aggregateAttribute || {};
+			const newAggregateAttribute = rest;
+			const newGroupByAttributes = queryData.groupBy.map((groupByAttribute) => {
+				const { id: _groupByAttributeId, ...rest } = groupByAttribute;
+				return rest;
+			});
+			const newItems = queryData.filters?.items?.map((item) => {
+				const { id: _itemId, ...newItem } = item;
+				if (item.key) {
+					const { id: _keyId, ...rest } = item.key;
+					return {
+						...newItem,
+						key: rest,
+					};
+				}
+				return newItem;
+			});
+			return {
+				...queryData,
+				aggregateAttribute: newAggregateAttribute,
+				groupBy: newGroupByAttributes,
+				filters: {
+					...queryData.filters,
+					items: newItems,
+				},
+				limit: queryData.limit ? queryData.limit : 0,
+				offset: queryData.offset ? queryData.offset : 0,
+				pageSize: queryData.pageSize ? queryData.pageSize : 0,
+			};
+		}),
+	},
+});
+
+export const isQueryUpdatedInView = ({
+	viewKey,
+	data,
+	stagedQuery,
+	currentPanelType,
+	options,
+}: IsQueryUpdatedInViewProps): boolean => {
+	const currentViewDetails = getViewDetailsUsingViewKey(viewKey, data);
+	if (!currentViewDetails) {
+		return false;
+	}
+	const { query, panelType, extraData } = currentViewDetails;
+
+	// Omitting id from aggregateAttribute and groupBy
+	const updatedCurrentQuery = omitIdFromQuery(stagedQuery);
+
+	if (
+		updatedCurrentQuery?.builder === undefined ||
+		updatedCurrentQuery.clickhouse_sql === undefined ||
+		updatedCurrentQuery.promql === undefined
+	) {
+		return false;
+	}
+	return (
+		panelType !== currentPanelType ||
+		!isEqual(query.builder, updatedCurrentQuery?.builder) ||
+		!isEqual(query.clickhouse_sql, updatedCurrentQuery?.clickhouse_sql) ||
+		!isEqual(query.promql, updatedCurrentQuery?.promql) ||
+		!isEqual(
+			options?.selectColumns,
+			extraData && JSON.parse(extraData)?.selectColumns,
+		) ||
+		(stagedQuery?.builder?.queryData?.[0]?.dataSource === DataSource.LOGS &&
+			(!isEqual(options?.format, extraData && JSON.parse(extraData)?.format) ||
+				!isEqual(options?.maxLines, extraData && JSON.parse(extraData)?.maxLines) ||
+				!isEqual(options?.fontSize, extraData && JSON.parse(extraData)?.fontSize)))
+	);
+};
+
+export const saveViewHandler = ({
+	saveViewAsync,
+	refetchAllView,
+	notifications,
+	handlePopOverClose,
+	viewName,
+	compositeQuery,
+	sourcePage,
+	extraData,
+	redirectWithQueryBuilderData,
+	panelType,
+	form,
+}: SaveViewHandlerProps): void => {
+	saveViewAsync(
+		{
+			viewName,
+			compositeQuery,
+			sourcePage,
+			extraData,
+		},
+		{
+			onSuccess: (data) => {
+				refetchAllView();
+				redirectWithQueryBuilderData(mapQueryDataFromApi(compositeQuery), {
+					[QueryParams.panelTypes]: panelType,
+					[QueryParams.viewName]: viewName,
+					[QueryParams.viewKey]: data.data.data,
+				});
+				notifications.success({
+					message: 'View Saved Successfully',
+				});
+			},
+			onError: (err) => {
+				showErrorNotification(notifications, err);
+			},
+			onSettled: () => {
+				handlePopOverClose();
+				form.resetFields();
+			},
+		},
+	);
+};
+
+export const deleteViewHandler = ({
+	deleteViewAsync,
+	refetchAllView,
+	redirectWithQueryBuilderData,
+	notifications,
+	panelType,
+	viewKey,
+	viewId,
+	updateAllQueriesOperators,
+	sourcePage,
+}: DeleteViewHandlerProps): void => {
+	deleteViewAsync(viewKey, {
+		onSuccess: () => {
+			if (viewId === viewKey) {
+				redirectWithQueryBuilderData(
+					updateAllQueriesOperators(
+						initialQueriesMap[sourcePage],
+						panelType || PANEL_TYPES.LIST,
+						sourcePage,
+					),
+					{
+						[QueryParams.viewName]: '',
+						[QueryParams.panelTypes]: panelType,
+						[QueryParams.viewKey]: '',
+					},
+				);
+			}
+			notifications.success({
+				message: 'View Deleted Successfully',
+			});
+			refetchAllView();
+		},
+		onError: (err) => {
+			showErrorNotification(notifications, err);
+		},
+	});
+};
+
+export const trimViewName = (viewName: string): string => {
+	if (viewName.length > 20) {
+		return `${viewName.substring(0, 20)}...`;
+	}
+	return viewName;
+};

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -1,5 +1,5 @@
 import { DrawerProps } from 'antd';
-import { ChangeViewFunctionType } from 'hooks/useHandleExplorerTabChange';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 

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

@@ -4,7 +4,7 @@ import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { ChangeViewFunctionType } from 'hooks/useHandleExplorerTabChange';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import {
 	getBodyDisplayString,
 	getSanitizedLogBody,

frontend/src/components/Logs/RawLogView/types.ts

@@ -1,6 +1,6 @@
 import { MouseEvent } from 'react';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
-import { ChangeViewFunctionType } from 'hooks/useHandleExplorerTabChange';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QueryV2.test.tsx

@@ -130,6 +130,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 			updateAllQueriesOperators,
 			updateQueriesData,
 			initQueryBuilderData: jest.fn(),
+			isStagedQueryUpdated: jest.fn(() => false),
 			isDefaultQuery: jest.fn(() => false),
 		} as unknown as QueryBuilderContextType;
 

frontend/src/components/QueryBuilderV2/__tests__/QueryBuilder.PrevQuery.test.tsx

@@ -136,6 +136,7 @@ describe('MetricsSelect - signal source switching (standalone)', () => {
 			updateAllQueriesOperators: ((q: any) => q) as any,
 			updateQueriesData: ((q: any) => q) as any,
 			initQueryBuilderData: jest.fn(),
+			isStagedQueryUpdated: jest.fn(() => false),
 			isDefaultQuery: jest.fn(() => false),
 		});
 	});
@@ -292,6 +293,7 @@ describe('DataSource change - Logs to Traces', () => {
 			updateAllQueriesOperators: ((q: any) => q) as any,
 			updateQueriesData: ((q: any) => q) as any,
 			initQueryBuilderData: jest.fn(),
+			isStagedQueryUpdated: jest.fn(() => false),
 			isDefaultQuery: jest.fn(() => false),
 		});
 	});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/constants.ts

@@ -1 +0,0 @@
-export const DEFAULT_VISIBLE_ITEMS_COUNT = 10;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxDisclosure.ts

@@ -2,9 +2,10 @@ import { useMemo, useState } from 'react';
 import { IQuickFiltersConfig } from 'components/QuickFilters/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 
-import { DEFAULT_VISIBLE_ITEMS_COUNT } from './constants';
 import { isKeyMatch } from './utils';
 
+const DEFAULT_VISIBLE_ITEMS_COUNT = 10;
+
 interface UseCheckboxDisclosureProps {
 	filter: IQuickFiltersConfig;
 	activeQueryIndex: number;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.module.scss

@@ -6,6 +6,44 @@
 	border-bottom: 1px solid var(--l1-border);
 }
 
+.sectionActions {
+	width: 0;
+	overflow: hidden;
+	opacity: 0;
+	transform: translateX(4px);
+	pointer-events: none;
+	transition:
+		opacity 0.16s ease,
+		transform 0.16s ease,
+		width 0s linear 0.16s;
+}
+
+.checkboxFilter:hover .sectionActions,
+.sectionActions.sectionActionsPinned {
+	width: auto;
+	opacity: 1;
+	transform: translateX(0);
+	pointer-events: auto;
+	transition:
+		opacity 0.16s ease,
+		transform 0.16s ease;
+}
+
+.sectionActionsPinned .sectionActionHoverOnly {
+	opacity: 0;
+	transform: translateX(4px);
+	pointer-events: none;
+	transition:
+		opacity 0.16s ease,
+		transform 0.16s ease;
+}
+
+.checkboxFilter:hover .sectionActionsPinned .sectionActionHoverOnly {
+	opacity: 1;
+	transform: translateX(0);
+	pointer-events: auto;
+}
+
 .search {
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.testUtils.tsx

@@ -11,7 +11,6 @@ import {
 	QuickFiltersSource,
 } from '../../../types';
 import CheckboxFilterV2 from './CheckboxFilterV2';
-import { DEFAULT_VISIBLE_ITEMS_COUNT } from '../constants';
 
 export const DEFAULT_FILTER: IQuickFiltersConfig = {
 	type: FiltersType.CHECKBOX,
@@ -31,13 +30,6 @@ export const DEFAULT_USE_FIELD_APIS: QuickFilterCheckboxUseFieldApis = {
 	existingQuery: null,
 };
 
-// Enough extra values to push a section past the count that shows its search box.
-// Named to sort last, so a test's own values stay within the first page.
-export const EXTRA_VALUES = Array.from(
-	{ length: DEFAULT_VISIBLE_ITEMS_COUNT },
-	(_, index) => `zz-extra-value-${index + 1}`,
-);
-
 export function mockFieldsValuesAPI(response: {
 	relatedValues?: (string | null)[];
 	stringValues?: (string | null)[];

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Input } from '@signozhq/ui/input';
 import { Skeleton } from 'antd';
+import classNames from 'classnames';
 import { Typography } from '@signozhq/ui/typography';
 import { LoaderCircle } from '@signozhq/icons';
 import {
@@ -16,7 +17,6 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { NON_SELECTED_OPERATORS } from '../checkboxFilterQuery';
 import useActiveQueryIndex from 'components/QuickFilters/hooks/useActiveQueryIndex';
-import { DEFAULT_VISIBLE_ITEMS_COUNT } from '../constants';
 import useCheckboxDisclosure from '../useCheckboxDisclosure';
 import useCheckboxFilterActions from '../useCheckboxFilterActions';
 import useCheckboxFilterState from '../useCheckboxFilterState';
@@ -45,8 +45,14 @@ export default function CheckboxFilterV2(
 	const { source, filter, onFilterChange, onQuickFilterChange, useFieldApis } =
 		props;
 	const [searchText, setSearchText] = useState<string>('');
+	const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);
 	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
 
+	const handleToggleSearch = (): void => {
+		setIsSearchOpen((prev) => !prev);
+		setSearchText('');
+	};
+
 	const { currentQuery } = useQueryBuilder();
 	const activeQueryIndex = useActiveQueryIndex(source);
 
@@ -115,14 +121,6 @@ export default function CheckboxFilterV2(
 		setSearchText(args[0] as string);
 	}, DEBOUNCE_DELAY);
 
-	const handleToggleOpen = (): void => {
-		if (isOpen) {
-			setSearchTextDebounced.cancel();
-			setSearchText('');
-		}
-		onToggleOpen();
-	};
-
 	const currentFilterOp = useMemo(() => {
 		const filterSync = currentQuery?.builder.queryData?.[
 			activeQueryIndex
@@ -168,22 +166,19 @@ export default function CheckboxFilterV2(
 		relatedExclusions,
 	});
 
-	// Kept while a search is typed, so narrowing the list does not remove the box,
-	// and while a refetch still shows the previous, narrowed results.
-	const wasSearchShown = useRef(false);
-	const isSearchShown =
-		searchText !== '' ||
-		totalCount > DEFAULT_VISIBLE_ITEMS_COUNT ||
-		(isFetching && wasSearchShown.current);
-	wasSearchShown.current = isSearchShown;
-
 	return (
 		<div className={styles.checkboxFilter} data-testid="checkbox-filter-v2">
 			<CheckboxFilterV2Header
 				title={filter.title}
 				isOpen={isOpen}
-				canReset={isSomeFilterPresentForCurrentAttribute}
-				onToggleOpen={handleToggleOpen}
+				actionsClassName={classNames(styles.sectionActions, {
+					[styles.sectionActionsPinned]: isSearchOpen,
+				})}
+				resetActionClassName={
+					isSearchOpen ? styles.sectionActionHoverOnly : undefined
+				}
+				onToggleOpen={onToggleOpen}
+				onToggleSearch={handleToggleSearch}
 				onClear={onClear}
 			/>
 			{isOpen && isLoading && !hasLoadedOnce.current && (
@@ -193,9 +188,10 @@ export default function CheckboxFilterV2(
 			)}
 			{isOpen && (!isLoading || hasLoadedOnce.current) && (
 				<>
-					{isSearchShown && (
+					{isSearchOpen && (
 						<section className={styles.search}>
 							<Input
+								autoFocus
 								placeholder="Filter values"
 								onChange={(e): void => setSearchTextDebounced(e.target.value)}
 								disabled={isFilterDisabled}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.tsx

@@ -1,25 +1,31 @@
 import { useState } from 'react';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import { ChevronDown, ChevronRight, Undo2 } from '@signozhq/icons';
+import { ChevronDown, ChevronRight, Search, Undo2 } from '@signozhq/icons';
 
 import { SectionActionButton } from '../../shared/SectionActionButton/SectionActionButton';
 
+import classNames from 'classnames';
+
 import styles from './CheckboxFilterV2Header.module.scss';
 
 interface CheckboxFilterHeaderProps {
 	title: string;
 	isOpen: boolean;
-	canReset: boolean;
+	actionsClassName?: string;
+	resetActionClassName?: string;
 	onToggleOpen: () => void;
+	onToggleSearch: () => void;
 	onClear: () => void;
 }
 
 export function CheckboxFilterV2Header({
 	title,
 	isOpen,
-	canReset,
+	actionsClassName,
+	resetActionClassName,
 	onToggleOpen,
+	onToggleSearch,
 	onClear,
 }: CheckboxFilterHeaderProps): JSX.Element {
 	const [isTitleTruncated, setIsTitleTruncated] = useState(false);
@@ -58,14 +64,21 @@ export function CheckboxFilterV2Header({
 				)}
 				<Tooltip title={isTitleTruncated ? title : undefined}>{titleText}</Tooltip>
 			</section>
-			{isOpen && canReset && (
-				<section className={styles.rightAction}>
+			{isOpen && (
+				<section className={classNames(styles.rightAction, actionsClassName)}>
 					<SectionActionButton
 						icon={<Undo2 size={14} />}
+						className={resetActionClassName}
 						tooltip="Reset"
 						onClick={onClear}
 						testId="checkbox-filter-clear-all"
 					/>
+					<SectionActionButton
+						icon={<Search size={14} />}
+						tooltip="Search"
+						onClick={onToggleSearch}
+						testId="checkbox-filter-search-toggle"
+					/>
 				</section>
 			)}
 		</section>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.interactions.test.tsx

@@ -10,7 +10,6 @@ import {
 	buildQueryBuilderOverrides,
 	DEFAULT_FILTER,
 	DEFAULT_USE_FIELD_APIS,
-	EXTRA_VALUES,
 	getFilterFromCall,
 	mockFieldsValuesAPI,
 	renderWithFilter,
@@ -50,7 +49,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 					const values =
 						searchTextReceived === ''
-							? ['production', 'staging', 'development', ...EXTRA_VALUES]
+							? ['production', 'staging', 'development']
 							: ['production'];
 
 					return res(
@@ -80,6 +79,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			await screen.findByTestId('checkbox-value-row-production');
 			expect(screen.getByTestId('checkbox-value-row-staging')).toBeInTheDocument();
 
+			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 
@@ -92,41 +92,6 @@ describe('CheckboxFilterV2 - interactions', () => {
 					screen.queryByTestId('checkbox-value-row-staging'),
 				).not.toBeInTheDocument();
 			});
-			expect(screen.getByTestId('checkbox-filter-search')).toBeInTheDocument();
-		});
-
-		it('shows no search box when every value fits', async () => {
-			mockFieldsValuesAPI({ stringValues: EXTRA_VALUES });
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId(`checkbox-value-row-${EXTRA_VALUES[0]}`);
-
-			expect(
-				screen.queryByTestId('checkbox-filter-search'),
-			).not.toBeInTheDocument();
-		});
-
-		it('shows the search box once there are more values than fit', async () => {
-			mockFieldsValuesAPI({ stringValues: ['production', ...EXTRA_VALUES] });
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await expect(
-				screen.findByTestId('checkbox-filter-search'),
-			).resolves.toBeInTheDocument();
 		});
 
 		it('filters values via search while preserving existingQuery context', async () => {
@@ -146,7 +111,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 								data: {
 									values: {
 										relatedValues: ['production'],
-										stringValues: ['staging', 'development', ...EXTRA_VALUES],
+										stringValues: ['staging', 'development'],
 										numberValues: [],
 									},
 								},
@@ -198,6 +163,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			// Related values now appear in "Related" section (no badge, uses divider instead)
 			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
 
+			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 
@@ -225,10 +191,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 							data: {
 								values: {
 									relatedValues: [],
-									stringValues:
-										searchText === ''
-											? ['prod', 'staging', ...EXTRA_VALUES]
-											: ['prod-match'],
+									stringValues: searchText === '' ? ['prod', 'staging'] : ['prod-match'],
 									numberValues: [],
 								},
 							},
@@ -250,6 +213,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-prod');
 
+			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 
@@ -275,8 +239,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 							data: {
 								values: {
 									relatedValues: [],
-									stringValues:
-										searchText === '' ? ['prod', 'staging', ...EXTRA_VALUES] : [],
+									stringValues: searchText === '' ? ['prod', 'staging'] : [],
 									numberValues: [],
 								},
 							},
@@ -295,6 +258,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-prod');
 
+			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'xyz-no-match');
 
@@ -371,9 +335,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 					const relatedValues =
 						searchText === '' ? ['pod-a-v1', 'pod-b-v1', 'pod-c-v1'] : ['pod-a-v1']; // filtered to match 'pod-a'
 					const stringValues =
-						searchText === ''
-							? ['pod-a-v2', 'pod-b-v2', 'pod-c-v2', ...EXTRA_VALUES]
-							: ['pod-a-v2']; // filtered to match 'pod-a'
+						searchText === '' ? ['pod-a-v2', 'pod-b-v2', 'pod-c-v2'] : ['pod-a-v2']; // filtered to match 'pod-a'
 
 					return res(
 						ctx.status(200),
@@ -404,6 +366,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-pod-a-v1');
 
+			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'pod-a');
 
@@ -538,56 +501,6 @@ describe('CheckboxFilterV2 - interactions', () => {
 			expect(header).toHaveAttribute('data-state', 'open');
 			await screen.findByTestId('checkbox-value-row-production');
 		});
-
-		it('clears the search when the filter is collapsed', async () => {
-			const user = userEvent.setup();
-			const values = Array.from(
-				{ length: 12 },
-				(_, i) => `value-${String(i).padStart(2, '0')}`,
-			);
-
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					const searchText = req.url.searchParams.get('searchText') || '';
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									relatedValues: [],
-									stringValues: values.filter((value) => value.includes(searchText)),
-									numberValues: [],
-								},
-							},
-						}),
-					);
-				}),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-value-00');
-			await user.type(screen.getByTestId('checkbox-filter-search'), '11');
-			await waitFor(() =>
-				expect(
-					screen.queryByTestId('checkbox-value-row-value-00'),
-				).not.toBeInTheDocument(),
-			);
-
-			const header = screen.getByTestId('checkbox-filter-header');
-			await user.click(header);
-			await user.click(header);
-
-			await screen.findByTestId('checkbox-value-row-value-00');
-			expect(screen.getByTestId('checkbox-filter-search')).toHaveValue('');
-		});
 	});
 
 	describe('show more functionality', () => {
@@ -683,7 +596,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
 		});
 
-		it('hides reset when the section has no filter applied', async () => {
+		it('shows the reset action when expanded even with no active filter', async () => {
 			mockFieldsValuesAPI({
 				stringValues: ['production'],
 			});
@@ -698,9 +611,45 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-production');
 
-			expect(
-				screen.queryByTestId('checkbox-filter-clear-all'),
-			).not.toBeInTheDocument();
+			// Reset is always available on an expanded section now (hover-gated via
+			// CSS), not conditional on an active filter.
+			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
+		});
+
+		it('does not dispatch on clear when the key has no filter', async () => {
+			const user = userEvent.setup();
+			const onFilterChange = jest.fn();
+
+			mockFieldsValuesAPI({
+				stringValues: ['production'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+					onFilterChange={onFilterChange}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: { items: [], op: 'AND' },
+									filter: { expression: '' },
+								},
+							],
+						},
+					}),
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
+
+			expect(onFilterChange).not.toHaveBeenCalled();
 		});
 
 		it('calls onFilterChange when clear clicked', async () => {

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.states.test.tsx

@@ -9,7 +9,6 @@ import CheckboxFilterV2 from '../CheckboxFilterV2';
 import {
 	DEFAULT_FILTER,
 	DEFAULT_USE_FIELD_APIS,
-	EXTRA_VALUES,
 	mockFieldsValuesAPI,
 	mockFieldsValuesAPILoading,
 	setupServer,
@@ -90,7 +89,7 @@ describe('CheckboxFilterV2 - states', () => {
 								data: {
 									values: {
 										relatedValues: [],
-										stringValues: ['production', 'staging', ...EXTRA_VALUES],
+										stringValues: ['production', 'staging'],
 										numberValues: [],
 									},
 								},
@@ -111,6 +110,7 @@ describe('CheckboxFilterV2 - states', () => {
 
 			await screen.findByTestId('checkbox-value-row-production');
 
+			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
 			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2Header.test.tsx

@@ -7,8 +7,8 @@ describe('CheckboxFilterV2Header', () => {
 	const defaultProps = {
 		title: 'Environment',
 		isOpen: false,
-		canReset: true,
 		onToggleOpen: jest.fn(),
+		onToggleSearch: jest.fn(),
 		onClear: jest.fn(),
 	};
 
@@ -30,9 +30,12 @@ describe('CheckboxFilterV2Header', () => {
 			expect(header).toHaveAttribute('data-state', 'closed');
 		});
 
-		it('does not render reset when collapsed', () => {
+		it('does not render the section actions when collapsed', () => {
 			render(<CheckboxFilterV2Header {...defaultProps} isOpen={false} />);
 
+			expect(
+				screen.queryByTestId('checkbox-filter-search-toggle'),
+			).not.toBeInTheDocument();
 			expect(
 				screen.queryByTestId('checkbox-filter-clear-all'),
 			).not.toBeInTheDocument();
@@ -47,18 +50,13 @@ describe('CheckboxFilterV2Header', () => {
 			expect(header).toHaveAttribute('data-state', 'open');
 		});
 
-		it('renders reset when the section has a filter applied', () => {
+		it('renders both search and reset actions when expanded', () => {
 			render(<CheckboxFilterV2Header {...defaultProps} isOpen />);
 
-			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
-		});
-
-		it('hides reset when there is nothing to reset', () => {
-			render(<CheckboxFilterV2Header {...defaultProps} isOpen canReset={false} />);
-
 			expect(
-				screen.queryByTestId('checkbox-filter-clear-all'),
-			).not.toBeInTheDocument();
+				screen.getByTestId('checkbox-filter-search-toggle'),
+			).toBeInTheDocument();
+			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
 		});
 	});
 
@@ -101,6 +99,25 @@ describe('CheckboxFilterV2Header', () => {
 			expect(onToggleOpen).toHaveBeenCalledTimes(1);
 		});
 
+		it('calls onToggleSearch on search click without toggling open', async () => {
+			const user = userEvent.setup();
+			const onToggleSearch = jest.fn();
+			const onToggleOpen = jest.fn();
+			render(
+				<CheckboxFilterV2Header
+					{...defaultProps}
+					isOpen
+					onToggleSearch={onToggleSearch}
+					onToggleOpen={onToggleOpen}
+				/>,
+			);
+
+			await user.click(screen.getByTestId('checkbox-filter-search-toggle'));
+
+			expect(onToggleSearch).toHaveBeenCalledTimes(1);
+			expect(onToggleOpen).not.toHaveBeenCalled();
+		});
+
 		it('calls onClear on reset click without toggling open', async () => {
 			const user = userEvent.setup();
 			const onClear = jest.fn();

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -5,10 +5,10 @@ import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import SavedViewsHeader from 'container/SavedViews/SavedViewsHeader';
 import SavedViewsPanel from 'container/SavedViews/SavedViewsPanel';
 import SavedViewsRestore from 'container/SavedViews/SavedViewsRestore';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 
 import QuickFilters from '../QuickFilters';
 import { SIDEBAR_TOOLTIP_DELAY_MS } from './constants';
-import { useCloseOnOutsidePress } from './useCloseOnOutsidePress';
 
 import styles from './QuickFiltersLayout.module.scss';
 
@@ -49,9 +49,10 @@ function QuickFiltersLayout({
 	children,
 }: QuickFiltersLayoutProps): JSX.Element {
 	const [isViewsListOpen, setIsViewsListOpen] = useState(false);
+	const isSavedViewEnabled = useSavedViewEnabled();
 
 	const hasQuickFilters = !!quickFilterProps;
-	const hasSavedViews = !!savedViewProps;
+	const hasSavedViews = !!savedViewProps && isSavedViewEnabled;
 
 	const showSidebar = showFilters && (hasQuickFilters || hasSavedViews);
 
@@ -60,20 +61,12 @@ function QuickFiltersLayout({
 
 	const isSliding = hasQuickFilters && isViewsListOpen;
 
-	const openViews = (): void => setIsViewsListOpen(true);
-	const toggleViews = (): void => setIsViewsListOpen((isOpen) => !isOpen);
-	const closeViews = (): void => setIsViewsListOpen(false);
-	const markSidebarPress = useCloseOnOutsidePress(
-		showSidebar && isSliding,
-		closeViews,
-	);
-
 	const savedViewsHeader = hasSavedViews ? (
 		<SavedViewsHeader
 			{...savedViewProps}
-			onOpenViews={isViewsListVisible ? undefined : openViews}
-			isViewsOpen={isViewsListOpen}
-			onToggleViews={isViewsListPinned ? undefined : toggleViews}
+			onOpenViews={
+				isViewsListVisible ? undefined : (): void => setIsViewsListOpen(true)
+			}
 			onCollapse={hasQuickFilters ? undefined : onToggleFilters}
 		/>
 	) : undefined;
@@ -84,7 +77,6 @@ function QuickFiltersLayout({
 			{showSidebar && (
 				<aside
 					className={cx(styles.sidebar, { [styles.isStatic]: !hasQuickFilters })}
-					onPointerDownCapture={markSidebarPress}
 					data-testid="quick-filters-layout-filters"
 				>
 					<TooltipProvider delay={SIDEBAR_TOOLTIP_DELAY_MS}>
@@ -106,7 +98,9 @@ function QuickFiltersLayout({
 							{hasSavedViews && isViewsListVisible && (
 								<SavedViewsPanel
 									{...savedViewProps}
-									onClose={isViewsListPinned ? undefined : closeViews}
+									onClose={
+										isViewsListPinned ? undefined : (): void => setIsViewsListOpen(false)
+									}
 								/>
 							)}
 						</div>

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@signozhq/ui/button';
 import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import { QuickFiltersSource } from '../../types';
@@ -19,6 +20,10 @@ jest.mock('../QuickFiltersLayout.module.scss', () => ({
 	},
 }));
 
+jest.mock('hooks/useSavedViewEnabled', () => ({
+	useSavedViewEnabled: jest.fn(() => true),
+}));
+
 jest.mock('container/SavedViews/SavedViewsRestore', () => ({
 	__esModule: true,
 	default: ({ source }: { source: string }): JSX.Element => (
@@ -66,6 +71,10 @@ const drawer = (): HTMLElement =>
 	screen.getByTestId('quick-filters-layout-drawer');
 
 describe('QuickFiltersLayout', () => {
+	beforeEach(() => {
+		jest.mocked(useSavedViewEnabled).mockReturnValue(true);
+	});
+
 	it('renders QuickFilters with the given props inside the filters pane', () => {
 		render(
 			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
@@ -140,6 +149,35 @@ describe('QuickFiltersLayout', () => {
 	});
 
 	describe('saved views', () => {
+		it('ignores savedViewProps while the flag is off', () => {
+			jest.mocked(useSavedViewEnabled).mockReturnValue(false);
+			const { unmount } = render(
+				<QuickFiltersLayout
+					showFilters
+					quickFilterProps={quickFilterProps}
+					savedViewProps={savedViewProps}
+				>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+
+			expect(screen.getByTestId('quick-filters')).toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-header')).not.toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
+
+			// Saved views only, so nothing is left to show.
+			unmount();
+			render(
+				<QuickFiltersLayout showFilters savedViewProps={savedViewProps}>
+					<div>content</div>
+				</QuickFiltersLayout>,
+			);
+			expect(
+				screen.queryByTestId('quick-filters-layout-filters'),
+			).not.toBeInTheDocument();
+			expect(screen.queryByTestId('saved-views-restore')).not.toBeInTheDocument();
+		});
+
 		it('opens the panel from the header and slides the quick filters drawer, keeping the same QuickFilters node', async () => {
 			render(
 				<QuickFiltersLayout
@@ -180,62 +218,6 @@ describe('QuickFiltersLayout', () => {
 			expect(screen.getByTestId('saved-views-open')).toBeInTheDocument();
 		});
 
-		it('opens and closes the panel from the view name', async () => {
-			render(
-				<QuickFiltersLayout
-					showFilters
-					quickFilterProps={quickFilterProps}
-					savedViewProps={savedViewProps}
-				>
-					<div>content</div>
-				</QuickFiltersLayout>,
-			);
-			const user = userEvent.setup();
-			const toggle = await screen.findByTestId('saved-views-name-toggle');
-
-			expect(toggle).toHaveAttribute('aria-expanded', 'false');
-			await user.click(toggle);
-
-			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
-			expect(drawer()).toHaveClass('isOpen');
-			expect(toggle).toHaveAttribute('aria-expanded', 'true');
-
-			await user.click(toggle);
-
-			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
-			expect(drawer()).not.toHaveClass('isOpen');
-		});
-
-		it('closes the panel on a click outside the sidebar, not inside it', async () => {
-			render(
-				<>
-					<button type="button" data-testid="page-tab">
-						Pipelines
-					</button>
-					<QuickFiltersLayout
-						showFilters
-						quickFilterProps={quickFilterProps}
-						savedViewProps={savedViewProps}
-					>
-						<div data-testid="page-content">content</div>
-					</QuickFiltersLayout>
-				</>,
-			);
-			const user = userEvent.setup();
-
-			await user.click(await screen.findByTestId('saved-views-name-toggle'));
-			await user.click(screen.getByTestId('saved-views-panel-header'));
-			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
-
-			await user.click(screen.getByTestId('page-tab'));
-			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
-			expect(drawer()).not.toHaveClass('isOpen');
-
-			await user.click(await screen.findByTestId('saved-views-name-toggle'));
-			await user.click(screen.getByTestId('page-content'));
-			expect(screen.queryByTestId('saved-views-panel')).not.toBeInTheDocument();
-		});
-
 		it('hands the source to the header and the panel', async () => {
 			render(
 				<QuickFiltersLayout
@@ -276,9 +258,6 @@ describe('QuickFiltersLayout', () => {
 			expect(screen.getByTestId('saved-views-header')).toBeInTheDocument();
 			expect(screen.getByTestId('saved-views-panel')).toBeInTheDocument();
 			expect(screen.queryByTestId('saved-views-open')).not.toBeInTheDocument();
-			expect(
-				screen.queryByTestId('saved-views-name-toggle'),
-			).not.toBeInTheDocument();
 			expect(
 				screen.queryByTestId('saved-views-panel-header'),
 			).not.toBeInTheDocument();

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/useCloseOnOutsidePress.test.tsx

@@ -1,63 +0,0 @@
-import { createPortal } from 'react-dom';
-import { render, screen, userEvent } from 'tests/test-utils';
-
-import { useCloseOnOutsidePress } from '../useCloseOnOutsidePress';
-
-function Harness({
-	enabled,
-	onClose,
-}: {
-	enabled: boolean;
-	onClose: () => void;
-}): JSX.Element {
-	const markInside = useCloseOnOutsidePress(enabled, onClose);
-
-	return (
-		<>
-			<div onPointerDownCapture={markInside}>
-				<button type="button" data-testid="inside">
-					inside
-				</button>
-				{createPortal(
-					<button type="button" data-testid="portal">
-						menu item
-					</button>,
-					document.body,
-				)}
-			</div>
-			<button type="button" data-testid="outside">
-				outside
-			</button>
-		</>
-	);
-}
-
-describe('useCloseOnOutsidePress', () => {
-	it('closes on a press outside', async () => {
-		const onClose: jest.MockedFunction<() => void> = jest.fn();
-		render(<Harness enabled onClose={onClose} />);
-
-		await userEvent.click(screen.getByTestId('outside'));
-
-		expect(onClose).toHaveBeenCalledTimes(1);
-	});
-
-	it('stays open on a press inside, including a portal rendered from inside', async () => {
-		const onClose: jest.MockedFunction<() => void> = jest.fn();
-		render(<Harness enabled onClose={onClose} />);
-
-		await userEvent.click(screen.getByTestId('inside'));
-		await userEvent.click(screen.getByTestId('portal'));
-
-		expect(onClose).not.toHaveBeenCalled();
-	});
-
-	it('does nothing while disabled', async () => {
-		const onClose: jest.MockedFunction<() => void> = jest.fn();
-		render(<Harness enabled={false} onClose={onClose} />);
-
-		await userEvent.click(screen.getByTestId('outside'));
-
-		expect(onClose).not.toHaveBeenCalled();
-	});
-});

frontend/src/components/QuickFilters/QuickFiltersLayout/useCloseOnOutsidePress.ts

@@ -1,39 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-/**
- * Calls `onClose` on any press outside the element given the returned handler as
- * `onPointerDownCapture`. Menus and dialogs rendered in portals still count as
- * inside: React events follow the component tree, so their presses reach the
- * handler before the document listener runs.
- */
-export function useCloseOnOutsidePress(
-	enabled: boolean,
-	onClose: () => void,
-): () => void {
-	const isPressInside = useRef(false);
-	const onCloseRef = useRef(onClose);
-	onCloseRef.current = onClose;
-
-	useEffect(() => {
-		if (!enabled) {
-			return undefined;
-		}
-		isPressInside.current = false;
-
-		const handlePointerDown = (): void => {
-			if (isPressInside.current) {
-				isPressInside.current = false;
-				return;
-			}
-			onCloseRef.current();
-		};
-
-		document.addEventListener('pointerdown', handlePointerDown);
-		return (): void =>
-			document.removeEventListener('pointerdown', handlePointerDown);
-	}, [enabled]);
-
-	return useCallback((): void => {
-		isPressInside.current = true;
-	}, []);
-}

frontend/src/constants/localStorage.ts

@@ -21,6 +21,7 @@ export enum LOCALSTORAGE {
 	CHAT_SUPPORT = 'CHAT_SUPPORT',
 	IS_IDENTIFIED_USER = 'IS_IDENTIFIED_USER',
 	DASHBOARD_VARIABLES = 'DASHBOARD_VARIABLES',
+	SHOW_EXPLORER_TOOLBAR = 'SHOW_EXPLORER_TOOLBAR',
 	PINNED_ATTRIBUTES = 'PINNED_ATTRIBUTES',
 	THEME_ANALYTICS_V1 = 'THEME_ANALYTICS_V1',
 	LAST_USED_SAVED_VIEWS = 'LAST_USED_SAVED_VIEWS',
@@ -46,4 +47,5 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
+	SAVED_VIEW_ENABLED = 'SAVED_VIEW_ENABLED',
 }

frontend/src/constants/routes.ts

@@ -50,6 +50,8 @@ const ROUTES = {
 	ROLE_EDIT: '/settings/roles/:roleId/edit',
 	MEMBERS_SETTINGS: '/settings/members',
 	SUPPORT: '/support',
+	LOGS_SAVE_VIEWS: '/logs/saved-views',
+	TRACES_SAVE_VIEWS: '/traces/saved-views',
 	TRACES_FUNNELS: '/traces/funnels',
 	TRACES_FUNNELS_DETAIL: '/traces/funnels/:funnelId',
 	WORKSPACE_LOCKED: '/workspace-locked',
@@ -67,6 +69,7 @@ const ROUTES = {
 	MESSAGING_QUEUES_OVERVIEW: '/messaging-queues/overview',
 	METRICS_EXPLORER: '/metrics-explorer/summary',
 	METRICS_EXPLORER_EXPLORER: '/metrics-explorer/explorer',
+	METRICS_EXPLORER_VIEWS: '/metrics-explorer/views',
 	METRICS_EXPLORER_VOLUME_CONTROL: '/metrics-explorer/volume-control',
 	API_MONITORING_BASE: '/api-monitoring',
 	API_MONITORING: '/api-monitoring/explorer',
@@ -74,6 +77,7 @@ const ROUTES = {
 	WORKSPACE_ACCESS_RESTRICTED: '/workspace-access-restricted',
 	METER: '/meter',
 	METER_EXPLORER: '/meter/explorer',
+	METER_EXPLORER_VIEWS: '/meter/explorer/views',
 	HOME_PAGE: '/',
 	PUBLIC_DASHBOARD: '/public/dashboard/:dashboardId',
 	SERVICE_ACCOUNTS_SETTINGS: '/settings/service-accounts',

frontend/src/container/AIAssistant/AIAssistantTrigger/AIAssistantTrigger.module.scss

@@ -0,0 +1,15 @@
+.trigger {
+	position: absolute;
+	bottom: 24px;
+	right: 24px;
+	z-index: 10;
+	transition: transform 0.15s;
+
+	&:hover {
+		transform: scale(1.08);
+	}
+
+	&:active {
+		transform: scale(0.96);
+	}
+}

frontend/src/container/AIAssistant/AIAssistantTrigger/AIAssistantTrigger.tsx

@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+import { matchPath, useLocation } from 'react-router-dom';
+import { Button } from '@signozhq/ui/button';
+import { Tooltip } from '@signozhq/ui/tooltip';
+import logEvent from 'api/common/logEvent';
+import ROUTES from 'constants/routes';
+import Noz from 'components/Noz/Noz';
+import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
+
+import { AIAssistantEvents, AIAssistantOpenSource } from '../events';
+import { normalizePage } from '../hooks/useAIAssistantAnalyticsContext';
+import {
+	openAIAssistant,
+	useAIAssistantStore,
+} from '../store/useAIAssistantStore';
+
+import styles from './AIAssistantTrigger.module.scss';
+
+/**
+ * Floating action button anchored to the bottom-right of the content area.
+ * Hidden when the panel is already open or when on the full-screen AI Assistant page.
+ */
+export default function AIAssistantTrigger(): JSX.Element | null {
+	const { pathname } = useLocation();
+	const isDrawerOpen = useAIAssistantStore((s) => s.isDrawerOpen);
+	const isModalOpen = useAIAssistantStore((s) => s.isModalOpen);
+
+	const isFullScreenPage = !!matchPath(pathname, {
+		path: ROUTES.AI_ASSISTANT,
+		exact: true,
+	});
+
+	const handleOpen = useCallback((): void => {
+		void logEvent(AIAssistantEvents.Opened, {
+			source: AIAssistantOpenSource.Icon,
+			currentPage: normalizePage(pathname),
+		});
+		openAIAssistant();
+	}, [pathname]);
+
+	if (isDrawerOpen || isModalOpen || isFullScreenPage) {
+		return null;
+	}
+
+	return (
+		<div className={`${styles.trigger} noz-wave`}>
+			<Tooltip title={NOZ_TOOLTIP_TITLE}>
+				<Button
+					size="md"
+					variant="solid"
+					color="primary"
+					icon
+					onClick={handleOpen}
+					aria-label="Open Noz"
+				>
+					<Noz size={24} />
+				</Button>
+			</Tooltip>
+		</div>
+	);
+}

frontend/src/container/AIAssistant/AIAssistantTrigger/index.ts

@@ -0,0 +1,2 @@
+export * from './AIAssistantTrigger';
+export { default } from './AIAssistantTrigger';

frontend/src/container/AIAssistant/__tests__/resolvePageType.test.ts

@@ -102,7 +102,7 @@ describe('resolvePageType', () => {
 		expect(resolvePageType(ROUTES.METRICS_EXPLORER_EXPLORER, '')).toBe(
 			PageTypeDTO.metrics_explorer,
 		);
-		expect(resolvePageType('/metrics-explorer/views', '')).toBe(
+		expect(resolvePageType(ROUTES.METRICS_EXPLORER_VIEWS, '')).toBe(
 			PageTypeDTO.metrics_explorer,
 		);
 	});

frontend/src/container/AIAssistant/components/ActionsSection/utils/__tests__/openSavedView.test.ts

@@ -235,6 +235,7 @@ describe('buildExplorerNavigationUrl', () => {
 			{ queryType: 'builder' } as never,
 			{
 				[QueryParams.panelTypes]: PANEL_TYPES.LIST,
+				[QueryParams.viewName]: 'My view',
 				[QueryParams.viewKey]: 'view-1',
 			},
 		);
@@ -258,7 +259,7 @@ describe('openSavedView', () => {
 		expect(pushedUrl).toContain(ROUTES.LOGS_EXPLORER);
 		const params = new URLSearchParams(pushedUrl.split('?')[1]);
 		expect(params.get(QueryParams.viewKey)).toBe('"view-logs"');
-		expect(params.get(QueryParams.viewName)).toBeNull();
+		expect(params.get(QueryParams.viewName)).toBe('"View view-logs"');
 		expect(params.get(QueryParams.panelTypes)).toBe('"list"');
 	});
 

frontend/src/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts

@@ -9,7 +9,7 @@ import { SavedViewSourcePage } from 'container/SavedViews/types';
 import { findSavedView } from 'container/SavedViews/utils/findSavedView';
 import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
 import { toSavedViewSource } from 'container/SavedViews/utils/toSavedViewSource';
-import { SOURCEPAGE_VS_ROUTES } from 'container/SavedViews/constants';
+import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import { DataSource } from 'types/common/queryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { History } from 'history';
@@ -108,6 +108,7 @@ export function openSavedView(
 	const query = getSavedViewQuery(view);
 	const url = buildExplorerNavigationUrl(route, query, {
 		[QueryParams.panelTypes]: view.spec.panelType as unknown as PANEL_TYPES,
+		[QueryParams.viewName]: view.spec.displayName,
 		[QueryParams.viewKey]: view.id,
 	});
 	history.push(url);

frontend/src/container/AIAssistant/getAutoContexts.ts

@@ -13,7 +13,7 @@ import { matchPath } from 'react-router-dom';
  *
  * **URL-only.** All inputs come from `pathname` + `search`; we never reach
  * into Redux / context. SigNoz already encodes most page state into the URL
- * (`compositeQuery`, `startTime`/`endTime`, `viewKey`,
+ * (`compositeQuery`, `startTime`/`endTime`, `viewName`/`viewKey`,
  * `variables`, `expandedWidgetId`, `activeLogId`, …), so URL parsing is
  * sufficient. Anything not in the URL is simply omitted from `metadata` —
  * the server applies its own defaults.
@@ -288,7 +288,7 @@ export function getAutoContexts(
 
 	// ── Metrics ───────────────────────────────────────────────────────────────
 
-	// Metrics explorer — `/metrics-explorer` and sub-routes (summary, explorer).
+	// Metrics explorer — `/metrics-explorer` and sub-routes (summary, explorer, views).
 	if (
 		matchPath(pathname, { path: ROUTES.METRICS_EXPLORER_BASE, exact: false })
 	) {
@@ -361,6 +361,10 @@ function collectSharedMetadata(
 	if (viewKey) {
 		out.savedViewId = viewKey;
 	}
+	const viewName = params.get(QueryParams.viewName);
+	if (viewName) {
+		out.savedViewName = viewName;
+	}
 	const variablesRaw = params.get(QueryParams.variables);
 	if (variablesRaw) {
 		try {

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx

@@ -334,7 +334,6 @@ function AnomalyAlertEvaluationView({
 										<Checkbox
 											color="primary"
 											key={seriesKey}
-											testId="anomaly-series-option"
 											name="series"
 											value={selectedSeries === seriesKey}
 											onChange={(): void => handleSeriesChange(seriesKey)}

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -72,6 +72,40 @@
 	}
 }
 
+.chat-support-gateway {
+	position: fixed;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: calc(20px + var(--bottom-strip-height, 0px));
+	right: 20px;
+	z-index: 1000;
+
+	.chat-support-gateway-btn {
+		max-width: 48px;
+		width: 48px;
+		max-height: 48px;
+		height: 48px;
+		padding: 12px;
+		border-radius: 50%;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		background-color: #f25733;
+		border: none;
+
+		&:hover {
+			color: white !important;
+			border-color: white !important;
+		}
+
+		.chat-support-gateway-btn-icon {
+			fill: white;
+		}
+	}
+}
+
 .add-credit-card-btn,
 .cancel-btn {
 	display: inline-flex;

frontend/src/container/AppLayout/index.tsx

@@ -28,6 +28,7 @@ import getUserLatestVersion from 'api/v1/version/getLatestVersion';
 import { AxiosError } from 'axios';
 import cx from 'classnames';
 import ChangelogModal from 'components/ChangelogModal/ChangelogModal';
+import ChatSupportGateway from 'components/ChatSupportGateway/ChatSupportGateway';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
@@ -50,6 +51,8 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useNotifications } from 'hooks/useNotifications';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import useTabVisibility from 'hooks/useTabFocus';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
@@ -398,6 +401,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [pathname]);
 
 	const isToDisplayLayout = isLoggedIn;
+	const isSavedViewEnabled = useSavedViewEnabled();
 
 	const routeKey = useMemo(() => getRouteKey(pathname), [pathname]);
 	const pageTitle = t(routeKey);
@@ -485,6 +489,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		}
 	}, [isDarkMode]);
 
+	const chatSupport = useChatSupport();
+
 	// Listen for API warnings
 	const handleWarning = (
 		isSlow: boolean,
@@ -828,7 +834,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 							</LayoutContent>
 						</Sentry.ErrorBoundary>
 
-						{isToDisplayLayout && !renderFullScreen && <BottomStrip />}
+						{isSavedViewEnabled && isToDisplayLayout && !renderFullScreen && (
+							<BottomStrip />
+						)}
 					</div>
 
 					{isLoggedIn && isAIAssistantEnabled && (
@@ -839,6 +847,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					)}
 				</Flex>
 
+				{chatSupport === ChatSupportState.NeedsCard && !isSavedViewEnabled && (
+					<ChatSupportGateway />
+				)}
 				{showChangelogModal && changelog && (
 					<ChangelogModal changelog={changelog} onClose={toggleChangelogModal} />
 				)}

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

@@ -7,12 +7,11 @@ import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { ALERT_TYPE_URL_MAP } from './constants';
 
-// The setup guide button only exists in the classic form.
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string; search: string } => ({
 		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.ALERTS_NEW}`,
-		search: 'ruleType=anomaly_rule&showClassicCreateAlertsPage=true',
+		search: 'ruleType=anomaly_rule',
 	}),
 }));
 
@@ -21,7 +20,7 @@ jest.mock('react-router-dom-v5-compat', () => ({
 	useNavigationType: jest.fn(() => 'PUSH'),
 	useLocation: jest.fn(() => ({
 		pathname: '/alerts/new',
-		search: 'ruleType=anomaly_rule&showClassicCreateAlertsPage=true',
+		search: 'ruleType=anomaly_rule',
 		hash: '',
 		state: null,
 	})),

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

@@ -1,8 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import {
-	LicensePlatform,
-	LicenseResModel,
-} from 'types/api/licensesV3/getActive';
+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';
@@ -11,10 +8,6 @@ import SelectAlertType from '..';
 
 const useAppContextSpy = jest.spyOn(appHooks, 'useAppContext');
 
-const CLOUD_LICENSE = {
-	platform: LicensePlatform.CLOUD,
-} as LicenseResModel;
-
 describe('SelectAlertType', () => {
 	const mockOnSelect = jest.fn();
 
@@ -26,7 +19,15 @@ describe('SelectAlertType', () => {
 	it('should render all alert type options when anomaly detection is enabled', () => {
 		useAppContextSpy.mockReturnValue({
 			...getAppContextMockState({}),
-			activeLicense: CLOUD_LICENSE,
+			featureFlags: [
+				{
+					name: FeatureKeys.ANOMALY_DETECTION,
+					active: true,
+					usage: 0,
+					usage_limit: -1,
+					route: '',
+				},
+			],
 		});
 
 		render(<SelectAlertType onSelect={mockOnSelect} />);
@@ -38,19 +39,6 @@ describe('SelectAlertType', () => {
 		expect(screen.getByText('anomaly_based_alert')).toBeInTheDocument();
 	});
 
-	it('should offer the anomaly based alert on an enterprise self-hosted license', () => {
-		useAppContextSpy.mockReturnValue({
-			...getAppContextMockState({}),
-			activeLicense: {
-				platform: LicensePlatform.SELF_HOSTED,
-			} as LicenseResModel,
-		});
-
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-
-		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} />);
 
@@ -74,7 +62,15 @@ describe('SelectAlertType', () => {
 	it('should call onSelect with anomaly based alert type', () => {
 		useAppContextSpy.mockReturnValue({
 			...getAppContextMockState({}),
-			activeLicense: CLOUD_LICENSE,
+			featureFlags: [
+				{
+					name: FeatureKeys.ANOMALY_DETECTION,
+					active: true,
+					usage: 0,
+					usage_limit: -1,
+					route: '',
+				},
+			],
 		});
 
 		render(<SelectAlertType onSelect={mockOnSelect} />);

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -5,7 +5,8 @@ import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
-import { useIsAnomalyDetectionAvailable } from 'container/CreateAlertV2/useIsAnomalyDetectionAvailable';
+import { FeatureKeys } from 'constants/features';
+import { useAppContext } from 'providers/App/App';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
@@ -16,8 +17,11 @@ import { OptionType } from './types';
 
 function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 	const { t } = useTranslation(['alerts']);
+	const { featureFlags } = useAppContext();
 
-	const isAnomalyDetectionEnabled = useIsAnomalyDetectionAvailable();
+	const isAnomalyDetectionEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.ANOMALY_DETECTION)
+			?.active || false;
 
 	const optionList = getOptionList(t, isAnomalyDetectionEnabled);
 

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

@@ -1,8 +1,5 @@
 import { fireEvent, screen } from '@testing-library/react';
-import {
-	LicensePlatform,
-	LicenseResModel,
-} from 'types/api/licensesV3/getActive';
+import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
@@ -78,10 +75,6 @@ const useUrlQuerySpy = jest.spyOn(useUrlQueryHooks, 'default');
 const useSafeNavigateSpy = jest.spyOn(navigateHooks, 'useSafeNavigate');
 const useAppContextSpy = jest.spyOn(appHooks, 'useAppContext');
 
-const CLOUD_LICENSE = {
-	platform: LicensePlatform.CLOUD,
-} as LicenseResModel;
-
 const mockSetUrlQuery = jest.fn();
 const mockToString = jest.fn();
 const mockGetUrlQuery = jest.fn();
@@ -159,7 +152,7 @@ describe('CreateAlertRule', () => {
 		expect(screen.getByText(AlertTypes.METRICS_BASED_ALERT)).toBeInTheDocument();
 	});
 
-	it('should render new flow with the anomaly alert type when ruleType is anomaly_rule', () => {
+	it('should render classic flow when ruleType is anomaly_rule even if showClassicCreateAlertsPage is not true', () => {
 		mockGetUrlQuery.mockImplementation((key: string) => {
 			if (key === QueryParams.showClassicCreateAlertsPage) {
 				return 'false';
@@ -170,9 +163,8 @@ describe('CreateAlertRule', () => {
 			return null;
 		});
 		render(<CreateAlertRule />);
-		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(AlertTypes.ANOMALY_BASED_ALERT)).toBeInTheDocument();
-		expect(screen.queryByText(FORM_ALERT_RULES_TEXT)).not.toBeInTheDocument();
+		expect(screen.getByText(FORM_ALERT_RULES_TEXT)).toBeInTheDocument();
+		expect(screen.queryByText(CREATE_ALERT_V2_TEXT)).not.toBeInTheDocument();
 	});
 
 	it('should use alertType from URL when provided', () => {
@@ -280,7 +272,15 @@ describe('CreateAlertRule', () => {
 		it('should navigate with anomaly detection params for anomaly alert', () => {
 			useAppContextSpy.mockReturnValue({
 				...getAppContextMockState({}),
-				activeLicense: CLOUD_LICENSE,
+				featureFlags: [
+					{
+						name: FeatureKeys.ANOMALY_DETECTION,
+						active: true,
+						usage: 0,
+						usage_limit: -1,
+						route: '',
+					},
+				],
 			});
 
 			render(<CreateAlertRule />);

frontend/src/container/CreateAlertRule/index.tsx

@@ -41,7 +41,7 @@ function CreateRules(): JSX.Element {
 
 	useEffect(() => {
 		if (isTypeSelectionMode) {
-			void logEvent('Alert: New alert data source selection page visited', {});
+			logEvent('Alert: New alert data source selection page visited', {});
 		}
 	}, [isTypeSelectionMode]);
 
@@ -100,7 +100,10 @@ function CreateRules(): JSX.Element {
 			return <SelectAlertType onSelect={handleSelectType} />;
 		}
 
-		if (showClassicCreateAlertsPageFlag) {
+		if (
+			showClassicCreateAlertsPageFlag ||
+			alertType === AlertTypes.ANOMALY_BASED_ALERT
+		) {
 			return (
 				<FormAlertRules
 					alertType={alertType}

frontend/src/container/CreateAlertV2/AlertCondition/AlertCondition.module.scss

@@ -1,7 +0,0 @@
-:global(.ant-tooltip).tabTooltip {
-	max-width: 360px;
-}
-
-.switchNote {
-	margin-top: var(--spacing-4);
-}

frontend/src/container/CreateAlertV2/AlertCondition/AlertCondition.tsx

@@ -1,30 +1,20 @@
-import { ReactNode } from 'react';
 import { Button, Tooltip } from 'antd';
 import classNames from 'classnames';
-import { Activity, ChartLine } from '@signozhq/icons';
+import { ChartLine } from '@signozhq/icons';
 import { useChannelOptions } from 'hooks/notificationChannels/useChannelOptions';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { useCreateAlertState } from '../context';
 import AdvancedOptions from '../EvaluationSettings/AdvancedOptions';
 import Stepper from '../Stepper';
-import { useIsAnomalyDetectionAvailable } from '../useIsAnomalyDetectionAvailable';
 import AlertThreshold from './AlertThreshold';
 import AnomalyThreshold from './AnomalyThreshold';
-import {
-	ANOMALY_TAB_SWITCH_NOTE,
-	ANOMALY_TAB_TOOLTIP,
-	THRESHOLD_TAB_SWITCH_NOTE,
-	THRESHOLD_TAB_TOOLTIP,
-} from './constants';
-import { useAnomalyFunctionSync } from './useAnomalyFunctionSync';
+import { ANOMALY_TAB_TOOLTIP, THRESHOLD_TAB_TOOLTIP } from './constants';
 
-import styles from './AlertCondition.module.scss';
 import './styles.scss';
 
 function AlertCondition(): JSX.Element {
 	const { alertType, setAlertType } = useCreateAlertState();
-	useAnomalyFunctionSync();
 
 	const {
 		data: channels,
@@ -33,12 +23,9 @@ function AlertCondition(): JSX.Element {
 		refetch: refreshChannels,
 	} = useChannelOptions();
 
-	const isAnomalyDetectionEnabled = useIsAnomalyDetectionAvailable();
-
-	// Anomaly rules stay editable even without a cloud or enterprise license.
 	const showMultipleTabs =
 		alertType === AlertTypes.ANOMALY_BASED_ALERT ||
-		(isAnomalyDetectionEnabled && alertType === AlertTypes.METRICS_BASED_ALERT);
+		alertType === AlertTypes.METRICS_BASED_ALERT;
 
 	const tabs = [
 		{
@@ -46,15 +33,16 @@ function AlertCondition(): JSX.Element {
 			icon: <ChartLine size={14} data-testid="threshold-view" />,
 			value: AlertTypes.METRICS_BASED_ALERT,
 		},
-		...(showMultipleTabs
-			? [
-					{
-						label: 'Anomaly',
-						icon: <Activity size={14} data-testid="anomaly-view" />,
-						value: AlertTypes.ANOMALY_BASED_ALERT,
-					},
-				]
-			: []),
+		// Hide anomaly tab for now
+		// ...(showMultipleTabs
+		// 	? [
+		// 			{
+		// 				label: 'Anomaly',
+		// 				icon: <Activity size={14} data-testid="anomaly-view" />,
+		// 				value: AlertTypes.ANOMALY_BASED_ALERT,
+		// 			},
+		// 	  ]
+		// 	: []),
 	];
 
 	const handleAlertTypeChange = (value: AlertTypes): void => {
@@ -64,23 +52,11 @@ function AlertCondition(): JSX.Element {
 		setAlertType(value);
 	};
 
-	const getTabTooltip = (tab: { value: AlertTypes }): ReactNode => {
-		const isAnomalyTab = tab.value === AlertTypes.ANOMALY_BASED_ALERT;
-		const description = isAnomalyTab
-			? ANOMALY_TAB_TOOLTIP
-			: THRESHOLD_TAB_TOOLTIP;
-		if (tab.value === alertType) {
-			return description;
+	const getTabTooltip = (tab: { value: AlertTypes }): string => {
+		if (tab.value === AlertTypes.ANOMALY_BASED_ALERT) {
+			return ANOMALY_TAB_TOOLTIP;
 		}
-		const switchNote = isAnomalyTab
-			? ANOMALY_TAB_SWITCH_NOTE
-			: THRESHOLD_TAB_SWITCH_NOTE;
-		return (
-			<>
-				<div>{description}</div>
-				<div className={styles.switchNote}>{switchNote}</div>
-			</>
-		);
+		return THRESHOLD_TAB_TOOLTIP;
 	};
 
 	return (
@@ -89,11 +65,7 @@ function AlertCondition(): JSX.Element {
 			<div className="alert-condition">
 				<div className="alert-condition-tabs">
 					{tabs.map((tab) => (
-						<Tooltip
-							key={tab.value}
-							title={getTabTooltip(tab)}
-							overlayClassName={styles.tabTooltip}
-						>
+						<Tooltip key={tab.value} title={getTabTooltip(tab)}>
 							<Button
 								className={classNames('list-view-tab', 'explorer-view-option', {
 									'active-tab': alertType === tab.value,

frontend/src/container/CreateAlertV2/AlertCondition/AlertThreshold.tsx

@@ -1,14 +1,18 @@
 import { useEffect } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { Select, Tooltip } from 'antd';
+import { Button, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import classNames from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import getRandomColor from 'lib/getRandomColor';
 import { Plus } from '@signozhq/icons';
+import { v4 } from 'uuid';
 
 import { useCreateAlertState } from '../context';
 import {
 	INITIAL_EVALUATION_WINDOW_STATE,
+	INITIAL_INFO_THRESHOLD,
+	INITIAL_RANDOM_THRESHOLD,
+	INITIAL_WARNING_THRESHOLD,
 	THRESHOLD_MATCH_TYPE_OPTIONS,
 	THRESHOLD_OPERATOR_OPTIONS,
 } from '../context/constants';
@@ -19,8 +23,7 @@ import {
 import EvaluationSettings from '../EvaluationSettings/EvaluationSettings';
 import { normalizeMatchType, normalizeOperator } from '../utils';
 import ThresholdItem from './ThresholdItem';
-import { AnomalyAndThresholdProps } from './types';
-import { useThresholdList } from './useThresholdList';
+import { AnomalyAndThresholdProps, UpdateThreshold } from './types';
 import {
 	getCategoryByOptionId,
 	getCategorySelectOptionByName,
@@ -68,7 +71,42 @@ function AlertThreshold({
 		selectedCategory || '',
 	);
 
-	const { addThreshold, removeThreshold, updateThreshold } = useThresholdList();
+	const addThreshold = (): void => {
+		let newThreshold;
+		if (thresholdState.thresholds.length === 1) {
+			newThreshold = { ...INITIAL_WARNING_THRESHOLD, id: v4() };
+		} else if (thresholdState.thresholds.length === 2) {
+			newThreshold = { ...INITIAL_INFO_THRESHOLD, id: v4() };
+		} else {
+			newThreshold = {
+				...INITIAL_RANDOM_THRESHOLD,
+				id: v4(),
+				color: getRandomColor(),
+			};
+		}
+		setThresholdState({
+			type: 'SET_THRESHOLDS',
+			payload: [...thresholdState.thresholds, newThreshold],
+		});
+	};
+
+	const removeThreshold = (id: string): void => {
+		if (thresholdState.thresholds.length > 1) {
+			setThresholdState({
+				type: 'SET_THRESHOLDS',
+				payload: thresholdState.thresholds.filter((t) => t.id !== id),
+			});
+		}
+	};
+
+	const updateThreshold: UpdateThreshold = (id, field, value) => {
+		setThresholdState({
+			type: 'SET_THRESHOLDS',
+			payload: thresholdState.thresholds.map((t) =>
+				t.id === id ? { ...t, [field]: value } : t,
+			),
+		});
+	};
 
 	const onTooltipOpenChange = (open: boolean): void => {
 		// Stop propagation of click events on tooltip text to dropdown
@@ -256,12 +294,11 @@ function AlertThreshold({
 					/>
 				))}
 				<Button
-					variant="dashed"
-					color="secondary"
-					size="md"
-					prefix={<Plus size={14} />}
-					onClick={(): void => addThreshold()}
-					testId="add-threshold-button"
+					type="dashed"
+					icon={<Plus size={16} />}
+					onClick={addThreshold}
+					className="add-threshold-btn"
+					data-testid="add-threshold-button"
 				>
 					Add Threshold
 				</Button>

frontend/src/container/CreateAlertV2/AlertCondition/AnomalyThreshold.module.scss

@@ -1,13 +0,0 @@
-.querySelect {
-	width: 80px;
-}
-
-.algorithmSelect,
-.seasonalitySelect {
-	width: 140px;
-}
-
-.operatorSelect,
-.matchTypeSelect {
-	width: 180px;
-}

frontend/src/container/CreateAlertV2/AlertCondition/AnomalyThreshold.tsx

@@ -1,8 +1,8 @@
-import { Button } from '@signozhq/ui/button';
+import { useMemo } from 'react';
 import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { Plus } from '@signozhq/icons';
+import { useAppContext } from 'providers/App/App';
 
 import { useCreateAlertState } from '../context';
 import {
@@ -10,20 +10,19 @@ import {
 	ANOMALY_SEASONALITY_OPTIONS,
 	ANOMALY_THRESHOLD_MATCH_TYPE_OPTIONS,
 	ANOMALY_THRESHOLD_OPERATOR_OPTIONS,
-	INITIAL_ANOMALY_THRESHOLD,
+	ANOMALY_TIME_DURATION_OPTIONS,
 } from '../context/constants';
 import {
 	AlertThresholdMatchType,
 	AlertThresholdOperator,
 } from '../context/types';
-import EvaluationSettings from '../EvaluationSettings/EvaluationSettings';
 import { normalizeMatchType, normalizeOperator } from '../utils';
-import ThresholdItem from './ThresholdItem';
 import { AnomalyAndThresholdProps } from './types';
-import { useThresholdList } from './useThresholdList';
-import { getQueryNames, RoutingPolicyBanner } from './utils';
-
-import styles from './AnomalyThreshold.module.scss';
+import {
+	getQueryNames,
+	NotificationChannelsNotFoundContent,
+	RoutingPolicyBanner,
+} from './utils';
 
 function AnomalyThreshold({
 	channels,
@@ -31,6 +30,7 @@ function AnomalyThreshold({
 	isErrorChannels,
 	refreshChannels,
 }: AnomalyAndThresholdProps): JSX.Element {
+	const { user } = useAppContext();
 	const {
 		thresholdState,
 		setThresholdState,
@@ -42,13 +42,23 @@ function AnomalyThreshold({
 
 	const queryNames = getQueryNames(currentQuery);
 
-	const { addThreshold, removeThreshold, updateThreshold } = useThresholdList();
+	const deviationOptions = useMemo(() => {
+		const options = [];
+		for (let i = 1; i <= 7; i++) {
+			options.push({ label: i.toString(), value: i });
+		}
+		return options;
+	}, []);
 
-	const handleAddThreshold = (): void => {
-		addThreshold({
-			thresholdValue: Math.max(
-				1,
-				INITIAL_ANOMALY_THRESHOLD.thresholdValue - thresholdState.thresholds.length,
+	const updateThreshold = (
+		id: string,
+		field: string,
+		value: string | string[],
+	): void => {
+		setThresholdState({
+			type: 'SET_THRESHOLDS',
+			payload: thresholdState.thresholds.map((t) =>
+				t.id === id ? { ...t, [field]: value } : t,
 			),
 		});
 	};
@@ -59,12 +69,11 @@ function AnomalyThreshold({
 				{/* Sentence 1 */}
 				<div className="alert-condition-sentence">
 					<Typography.Text data-testid="notification-text" className="sentence-text">
-						Send a notification when
+						Send notification when the observed value for
 					</Typography.Text>
 					<Select
 						value={thresholdState.selectedQuery}
 						data-testid="query-select"
-						className={styles.querySelect}
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_SELECTED_QUERY',
@@ -73,16 +82,50 @@ function AnomalyThreshold({
 						}}
 						options={queryNames}
 					/>
+					<Typography.Text
+						data-testid="evaluation-window-text"
+						className="sentence-text"
+					>
+						during the last
+					</Typography.Text>
+					<Select
+						value={thresholdState.evaluationWindow}
+						data-testid="evaluation-window-select"
+						onChange={(value): void => {
+							setThresholdState({
+								type: 'SET_EVALUATION_WINDOW',
+								payload: value,
+							});
+						}}
+						options={ANOMALY_TIME_DURATION_OPTIONS}
+					/>
+				</div>
+				<div className="alert-condition-sentence">
+					{/* Sentence 2 */}
 					<Typography.Text data-testid="threshold-text" className="sentence-text">
 						is
 					</Typography.Text>
+					<Select
+						value={thresholdState.thresholds[0].thresholdValue}
+						data-testid="threshold-value-select"
+						onChange={(value): void => {
+							updateThreshold(
+								thresholdState.thresholds[0].id,
+								'thresholdValue',
+								value.toString(),
+							);
+						}}
+						options={deviationOptions}
+					/>
+					<Typography.Text data-testid="deviations-text" className="sentence-text">
+						deviations
+					</Typography.Text>
 					<Select
 						value={
 							(normalizeOperator(thresholdState.operator) ??
 								thresholdState.operator) as AlertThresholdOperator
 						}
 						data-testid="operator-select"
-						className={styles.operatorSelect}
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_OPERATOR',
@@ -95,7 +138,7 @@ function AnomalyThreshold({
 						data-testid="predicted-data-text"
 						className="sentence-text"
 					>
-						the prediction
+						the predicted data
 					</Typography.Text>
 					<Select
 						value={
@@ -103,7 +146,6 @@ function AnomalyThreshold({
 								thresholdState.matchType) as AlertThresholdMatchType
 						}
 						data-testid="match-type-select"
-						className={styles.matchTypeSelect}
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_MATCH_TYPE',
@@ -112,22 +154,15 @@ function AnomalyThreshold({
 						}}
 						options={ANOMALY_THRESHOLD_MATCH_TYPE_OPTIONS}
 					/>
-					<Typography.Text
-						data-testid="evaluation-window-text"
-						className="sentence-text"
-					>
-						during the <EvaluationSettings rollingOnly />
-					</Typography.Text>
 				</div>
+				{/* Sentence 3 */}
 				<div className="alert-condition-sentence">
-					{/* Sentence 2 */}
 					<Typography.Text data-testid="using-the-text" className="sentence-text">
 						using the
 					</Typography.Text>
 					<Select
 						value={thresholdState.algorithm}
 						data-testid="algorithm-select"
-						className={styles.algorithmSelect}
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_ALGORITHM',
@@ -145,7 +180,6 @@ function AnomalyThreshold({
 					<Select
 						value={thresholdState.seasonality}
 						data-testid="seasonality-select"
-						className={styles.seasonalitySelect}
 						onChange={(value): void => {
 							setThresholdState({
 								type: 'SET_SEASONALITY',
@@ -154,39 +188,52 @@ function AnomalyThreshold({
 						}}
 						options={ANOMALY_SEASONALITY_OPTIONS}
 					/>
-					<Typography.Text data-testid="seasonality-text" className="sentence-text">
-						seasonality
-					</Typography.Text>
+					{notificationSettings.routingPolicies ? (
+						<>
+							<Typography.Text
+								data-testid="seasonality-text"
+								className="sentence-text"
+							>
+								seasonality to
+							</Typography.Text>
+							<Select
+								value={thresholdState.thresholds[0].channels}
+								onChange={(value): void =>
+									updateThreshold(thresholdState.thresholds[0].id, 'channels', value)
+								}
+								style={{ width: 350 }}
+								options={channels.map((channel) => ({
+									value: channel.id,
+									label: channel.name,
+								}))}
+								mode="multiple"
+								placeholder="Select notification channels"
+								showSearch
+								maxTagCount={2}
+								maxTagPlaceholder={(omittedValues): string =>
+									`+${omittedValues.length} more`
+								}
+								maxTagTextLength={10}
+								filterOption={(input, option): boolean =>
+									option?.label?.toLowerCase().includes(input.toLowerCase()) || false
+								}
+								status={isErrorChannels ? 'error' : undefined}
+								disabled={isLoadingChannels}
+								notFoundContent={
+									<NotificationChannelsNotFoundContent
+										user={user}
+										refreshChannels={refreshChannels}
+									/>
+								}
+							/>
+						</>
+					) : (
+						<Typography.Text data-testid="seasonality-text" className="sentence-text">
+							seasonality
+						</Typography.Text>
+					)}
 				</div>
 			</div>
-			{/* Sentence 3 */}
-			<div className="thresholds-section">
-				{thresholdState.thresholds.map((threshold, index) => (
-					<ThresholdItem
-						key={threshold.id}
-						threshold={threshold}
-						updateThreshold={updateThreshold}
-						removeThreshold={removeThreshold}
-						showRemoveButton={index !== 0 && thresholdState.thresholds.length > 1}
-						channels={channels}
-						isLoadingChannels={isLoadingChannels}
-						units={[]}
-						isErrorChannels={isErrorChannels}
-						refreshChannels={refreshChannels}
-						isAnomaly
-					/>
-				))}
-				<Button
-					variant="dashed"
-					color="secondary"
-					size="md"
-					prefix={<Plus size={14} />}
-					onClick={handleAddThreshold}
-					testId="add-threshold-button"
-				>
-					Add Threshold
-				</Button>
-			</div>
 			<RoutingPolicyBanner
 				notificationSettings={notificationSettings}
 				setNotificationSettings={setNotificationSettings}

frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx

@@ -21,7 +21,6 @@ function ThresholdItem({
 	isErrorChannels,
 	refreshChannels,
 	isLoadingChannels,
-	isAnomaly = false,
 }: ThresholdItemProps): JSX.Element {
 	const { user } = useAppContext();
 	const { thresholdState, notificationSettings } = useCreateAlertState();
@@ -105,16 +104,10 @@ function ThresholdItem({
 						style={{ width: 200 }}
 						data-testid="threshold-name-input"
 					/>
-					{isAnomaly ? (
-						<Typography.Text className="sentence-text">at</Typography.Text>
-					) : (
-						<>
-							<Typography.Text className="sentence-text">on value</Typography.Text>
-							<Typography.Text className="sentence-text highlighted-text">
-								{getOperatorSymbol()}
-							</Typography.Text>
-						</>
-					)}
+					<Typography.Text className="sentence-text">on value</Typography.Text>
+					<Typography.Text className="sentence-text highlighted-text">
+						{getOperatorSymbol()}
+					</Typography.Text>
 					<Input
 						placeholder="Enter threshold value"
 						value={threshold.thresholdValue}
@@ -125,11 +118,7 @@ function ThresholdItem({
 						type="number"
 						data-testid="threshold-value-input"
 					/>
-					{isAnomaly ? (
-						<Typography.Text className="sentence-text">deviations</Typography.Text>
-					) : (
-						yAxisUnitSelect
-					)}
+					{yAxisUnitSelect}
 					{!notificationSettings.routingPolicies && (
 						<>
 							<Typography.Text className="sentence-text">send to</Typography.Text>

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

@@ -1,7 +1,7 @@
-import { IAppContext } from 'providers/App/types';
-import { render, screen, userEvent } from 'tests/test-utils';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
-import { QueryBuilderContextType } from 'types/common/queryBuilder';
 
 import { CreateAlertProvider } from '../../context';
 import AlertCondition from '../AlertCondition';
@@ -65,55 +65,54 @@ jest.mock('../AnomalyThreshold', () => ({
 	},
 }));
 
-const mockHandleSetQueryData: jest.MockedFunction<
-	QueryBuilderContextType['handleSetQueryData']
-> = jest.fn();
-const mockRedirectWithQueryBuilderData: jest.MockedFunction<
-	QueryBuilderContextType['redirectWithQueryBuilderData']
-> = jest.fn();
-const mockCurrentQuery = {
-	dataSource: 'METRICS',
-	queryName: 'A',
-	builder: {
-		queryData: [{ dataSource: 'METRICS' }],
-		queryFormulas: [],
-	},
-};
-
 // Mock useQueryBuilder hook
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): unknown => ({
-		currentQuery: mockCurrentQuery,
-		redirectWithQueryBuilderData: mockRedirectWithQueryBuilderData,
-		handleSetQueryData: mockHandleSetQueryData,
+	useQueryBuilder: (): {
+		currentQuery: {
+			builder: { queryData: unknown[]; queryFormulas: unknown[] };
+			dataSource: string;
+			queryName: string;
+		};
+		redirectWithQueryBuilderData: () => void;
+	} => ({
+		currentQuery: {
+			dataSource: 'METRICS',
+			queryName: 'A',
+			builder: {
+				queryData: [{ dataSource: 'METRICS' }],
+				queryFormulas: [],
+			},
+		},
+		redirectWithQueryBuilderData: jest.fn(),
 	}),
 }));
 
+const createTestQueryClient = (): QueryClient =>
+	new QueryClient({
+		defaultOptions: {
+			queries: {
+				retry: false,
+			},
+		},
+	});
+
 const renderAlertCondition = (
 	alertType?: string,
-	appContextOverrides?: Partial<IAppContext>,
-): ReturnType<typeof render> =>
-	render(
-		<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
-			<AlertCondition />
-		</CreateAlertProvider>,
-		undefined,
-		{
-			initialRoute: alertType ? `/?alertType=${alertType}` : '/',
-			appContextOverrides,
-		},
+): ReturnType<typeof render> => {
+	const queryClient = createTestQueryClient();
+	const initialEntries = alertType ? [`/?alertType=${alertType}`] : undefined;
+	return render(
+		<MemoryRouter initialEntries={initialEntries}>
+			<QueryClientProvider client={queryClient}>
+				<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
+					<AlertCondition />
+				</CreateAlertProvider>
+			</QueryClientProvider>
+		</MemoryRouter>,
 	);
-
-const clickText = async (text: string): Promise<void> => {
-	const user = userEvent.setup({ pointerEventsCheck: 0 });
-	await user.click(screen.getByText(text));
 };
 
 describe('AlertCondition', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
 	it('renders the stepper with correct step number and label', () => {
 		renderAlertCondition();
 		expect(screen.getByTestId(STEPPER_TEST_ID)).toHaveTextContent(
@@ -126,9 +125,10 @@ describe('AlertCondition', () => {
 
 		// Verify default alertType is METRICS_BASED_ALERT (shows AlertThreshold component)
 		expect(screen.getByTestId(ALERT_THRESHOLD_TEST_ID)).toBeInTheDocument();
-		expect(
-			screen.queryByTestId(ANOMALY_THRESHOLD_TEST_ID),
-		).not.toBeInTheDocument();
+		// TODO: uncomment this when anomaly tab is implemented
+		// expect(
+		// 	screen.queryByTestId(ANOMALY_THRESHOLD_TEST_ID),
+		// ).not.toBeInTheDocument();
 
 		// Verify threshold tab is active by default
 		const thresholdTab = screen.getByText(THRESHOLD_TAB_TEXT);
@@ -136,7 +136,8 @@ describe('AlertCondition', () => {
 
 		// Verify both tabs are visible (METRICS_BASED_ALERT supports multiple tabs)
 		expect(screen.getByText(THRESHOLD_TAB_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(ANOMALY_TAB_TEXT)).toBeInTheDocument();
+		// TODO: uncomment this when anomaly tab is implemented
+		// expect(screen.getByText(ANOMALY_TAB_TEXT)).toBeInTheDocument();
 	});
 
 	it('renders threshold tab by default', () => {
@@ -151,7 +152,8 @@ describe('AlertCondition', () => {
 		).not.toBeInTheDocument();
 	});
 
-	it('renders anomaly tab when alert type supports multiple tabs', () => {
+	// TODO: Unskip this when anomaly tab is implemented
+	it.skip('renders anomaly tab when alert type supports multiple tabs', () => {
 		renderAlertCondition();
 		expect(screen.getByText(ANOMALY_TAB_TEXT)).toBeInTheDocument();
 		expect(screen.getByTestId(ANOMALY_VIEW_TEST_ID)).toBeInTheDocument();
@@ -165,47 +167,36 @@ describe('AlertCondition', () => {
 		).not.toBeInTheDocument();
 	});
 
-	it('warns in the tab tooltip that switching changes what gets saved', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		renderAlertCondition();
-
-		await user.hover(screen.getByText(ANOMALY_TAB_TEXT));
-		await expect(
-			screen.findByText(/saves this as an anomaly-based alert/),
-		).resolves.toBeInTheDocument();
-
-		await user.click(screen.getByText(ANOMALY_TAB_TEXT));
-		await user.hover(screen.getByText(THRESHOLD_TAB_TEXT));
-		await expect(
-			screen.findByText(/saves this as a metrics-based alert/),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('shows AnomalyThreshold component when alert type is anomaly based', async () => {
+	// TODO: Unskip this when anomaly tab is implemented
+	it.skip('shows AnomalyThreshold component when alert type is anomaly based', () => {
 		renderAlertCondition();
 
 		// Click on anomaly tab to switch to anomaly-based alert
-		await clickText(ANOMALY_TAB_TEXT);
+		const anomalyTab = screen.getByText(ANOMALY_TAB_TEXT);
+		fireEvent.click(anomalyTab);
 
 		expect(screen.getByTestId(ANOMALY_THRESHOLD_TEST_ID)).toBeInTheDocument();
 		expect(screen.queryByTestId(ALERT_THRESHOLD_TEST_ID)).not.toBeInTheDocument();
 	});
 
-	it('switches between threshold and anomaly tabs', async () => {
+	// TODO: Unskip this when anomaly tab is implemented
+	it.skip('switches between threshold and anomaly tabs', () => {
 		renderAlertCondition();
 
 		// Initially shows threshold component
 		expect(screen.getByTestId(ALERT_THRESHOLD_TEST_ID)).toBeInTheDocument();
 
 		// Click anomaly tab
-		await clickText(ANOMALY_TAB_TEXT);
+		const anomalyTab = screen.getByText(ANOMALY_TAB_TEXT);
+		fireEvent.click(anomalyTab);
 
 		// Should show anomaly component
 		expect(screen.getByTestId(ANOMALY_THRESHOLD_TEST_ID)).toBeInTheDocument();
 		expect(screen.queryByTestId(ALERT_THRESHOLD_TEST_ID)).not.toBeInTheDocument();
 
 		// Click threshold tab
-		await clickText(THRESHOLD_TAB_TEXT);
+		const thresholdTab = screen.getByText(THRESHOLD_TAB_TEXT);
+		fireEvent.click(thresholdTab);
 
 		// Should show threshold component again
 		expect(screen.getByTestId(ALERT_THRESHOLD_TEST_ID)).toBeInTheDocument();
@@ -214,40 +205,8 @@ describe('AlertCondition', () => {
 		).not.toBeInTheDocument();
 	});
 
-	it('adds the anomaly function with the default z-score when switching to anomaly', async () => {
-		renderAlertCondition();
-		expect(mockHandleSetQueryData).not.toHaveBeenCalled();
-
-		await clickText(ANOMALY_TAB_TEXT);
-
-		expect(mockHandleSetQueryData).toHaveBeenCalledWith(
-			0,
-			expect.objectContaining({
-				functions: [
-					{
-						name: 'anomaly',
-						args: [],
-						namedArgs: { z_score_threshold: 3, seasonality: 'hourly' },
-					},
-				],
-			}),
-		);
-	});
-
-	it('keeps the current query when switching between threshold and anomaly', async () => {
-		renderAlertCondition();
-
-		await clickText(ANOMALY_TAB_TEXT);
-
-		expect(mockRedirectWithQueryBuilderData).toHaveBeenCalledWith(
-			mockCurrentQuery,
-			{ alertType: AlertTypes.ANOMALY_BASED_ALERT, ruleType: 'anomaly_rule' },
-			undefined,
-			true,
-		);
-	});
-
-	it('applies active tab styling correctly', async () => {
+	// TODO: Unskip this when anomaly tab is implemented
+	it.skip('applies active tab styling correctly', () => {
 		renderAlertCondition();
 
 		const thresholdTab = screen.getByText(THRESHOLD_TAB_TEXT);
@@ -258,7 +217,7 @@ describe('AlertCondition', () => {
 		expect(anomalyTab.closest(ACTIVE_TAB_CLASS)).not.toBeInTheDocument();
 
 		// Click anomaly tab
-		await clickText(ANOMALY_TAB_TEXT);
+		fireEvent.click(anomalyTab);
 
 		// Anomaly tab should be active now
 		expect(anomalyTab.closest(ACTIVE_TAB_CLASS)).toBeInTheDocument();
@@ -268,17 +227,11 @@ describe('AlertCondition', () => {
 	it('shows multiple tabs for METRICS_BASED_ALERT', () => {
 		renderAlertCondition('METRIC_BASED_ALERT');
 
+		// TODO: uncomment this when anomaly tab is implemented
 		expect(screen.getByText(THRESHOLD_TAB_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(ANOMALY_TAB_TEXT)).toBeInTheDocument();
+		// expect(screen.getByText(ANOMALY_TAB_TEXT)).toBeInTheDocument();
 		expect(screen.getByTestId(THRESHOLD_VIEW_TEST_ID)).toBeInTheDocument();
-		expect(screen.getByTestId(ANOMALY_VIEW_TEST_ID)).toBeInTheDocument();
-	});
-
-	it('hides the anomaly tab for METRICS_BASED_ALERT on the community edition', () => {
-		renderAlertCondition('METRIC_BASED_ALERT', { activeLicense: null });
-
-		expect(screen.getByText(THRESHOLD_TAB_TEXT)).toBeInTheDocument();
-		expect(screen.queryByText(ANOMALY_TAB_TEXT)).not.toBeInTheDocument();
+		// expect(screen.getByTestId(ANOMALY_VIEW_TEST_ID)).toBeInTheDocument();
 	});
 
 	it('shows multiple tabs for ANOMALY_BASED_ALERT', () => {
@@ -286,8 +239,9 @@ describe('AlertCondition', () => {
 
 		expect(screen.getByText(THRESHOLD_TAB_TEXT)).toBeInTheDocument();
 		expect(screen.getByTestId(THRESHOLD_VIEW_TEST_ID)).toBeInTheDocument();
-		expect(screen.getByText(ANOMALY_TAB_TEXT)).toBeInTheDocument();
-		expect(screen.getByTestId(ANOMALY_VIEW_TEST_ID)).toBeInTheDocument();
+		// TODO: uncomment this when anomaly tab is implemented
+		// expect(screen.getByText(ANOMALY_TAB_TEXT)).toBeInTheDocument();
+		// expect(screen.getByTestId(ANOMALY_VIEW_TEST_ID)).toBeInTheDocument();
 	});
 
 	it('shows only threshold tab for LOGS_BASED_ALERT', () => {

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/AnomalyThreshold.test.tsx

@@ -1,11 +1,13 @@
+import { render, screen } from '@testing-library/react';
 import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
-import { render, screen, userEvent, within } from 'tests/test-utils';
-import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
+import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
+import * as appHooks from 'providers/App/App';
 
 import * as context from '../../context';
-import { AlertThresholdMatchType } from '../../context/types';
 import AnomalyThreshold from '../AnomalyThreshold';
 
+jest.spyOn(appHooks, 'useAppContext').mockReturnValue(getAppContextMockState());
+
 jest.mock('uplot', () => {
 	const paths = {
 		spline: jest.fn(),
@@ -20,11 +22,12 @@ jest.mock('uplot', () => {
 
 const mockSetAlertState = jest.fn();
 const mockSetThresholdState = jest.fn();
-const mockContextState = createMockAlertContextState({
-	setThresholdState: mockSetThresholdState,
-	setAlertState: mockSetAlertState,
-});
-const useCreateAlertStateSpy = jest.spyOn(context, 'useCreateAlertState');
+jest.spyOn(context, 'useCreateAlertState').mockReturnValue(
+	createMockAlertContextState({
+		setThresholdState: mockSetThresholdState,
+		setAlertState: mockSetAlertState,
+	}),
+);
 
 // Mock useQueryBuilder hook
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
@@ -49,12 +52,10 @@ jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	}),
 }));
 
-const channels: ChannelOption[] = [{ id: '1', name: 'slack-alerts' }];
-
 const renderAnomalyThreshold = (): ReturnType<typeof render> =>
 	render(
 		<AnomalyThreshold
-			channels={channels}
+			channels={[]}
 			isLoadingChannels={false}
 			isErrorChannels={false}
 			refreshChannels={jest.fn()}
@@ -64,117 +65,31 @@ const renderAnomalyThreshold = (): ReturnType<typeof render> =>
 describe('AnomalyThreshold', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		useCreateAlertStateSpy.mockReturnValue(mockContextState);
 	});
 
-	const pickOption = async (testId: string, title: string): Promise<void> => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		await user.click(within(screen.getByTestId(testId)).getByRole('combobox'));
-		await user.click(await screen.findByTitle(title));
-	};
-
-	it('renders the condition sentence in the same order as threshold alerts', () => {
+	it('renders the first condition sentence', () => {
 		renderAnomalyThreshold();
-		expect(screen.getByTestId('notification-text')).toHaveTextContent(
-			'Send a notification when',
-		);
-		expect(screen.getByTestId('query-select')).toBeInTheDocument();
+		expect(screen.getByTestId('notification-text')).toBeInTheDocument();
+		expect(screen.getByTestId('evaluation-window-text')).toBeInTheDocument();
+		expect(screen.getByTestId('evaluation-window-select')).toBeInTheDocument();
+	});
+
+	it('renders the second condition sentence', () => {
+		renderAnomalyThreshold();
+		expect(screen.getByTestId('threshold-text')).toBeInTheDocument();
+		expect(screen.getByTestId('threshold-value-select')).toBeInTheDocument();
+		expect(screen.getByTestId('deviations-text')).toBeInTheDocument();
 		expect(screen.getByTestId('operator-select')).toBeInTheDocument();
-		expect(screen.getByTestId('predicted-data-text')).toHaveTextContent(
-			'the prediction',
-		);
+		expect(screen.getByTestId('predicted-data-text')).toBeInTheDocument();
 		expect(screen.getByTestId('match-type-select')).toBeInTheDocument();
-		expect(screen.getByTestId('evaluation-settings-button')).toHaveTextContent(
-			'Rolling',
-		);
 	});
 
-	it('renders the algorithm and seasonality sentence', () => {
+	it('renders the third condition sentence', () => {
 		renderAnomalyThreshold();
+		expect(screen.getByTestId('using-the-text')).toBeInTheDocument();
 		expect(screen.getByTestId('algorithm-select')).toBeInTheDocument();
+		expect(screen.getByTestId('algorithm-with-text')).toBeInTheDocument();
 		expect(screen.getByTestId('seasonality-select')).toBeInTheDocument();
-		expect(screen.getByTestId('seasonality-text')).toHaveTextContent(
-			'seasonality',
-		);
-	});
-
-	it('renames the severity from its threshold row', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		renderAnomalyThreshold();
-		await user.type(screen.getByTestId('threshold-name-input'), 'x');
-		expect(mockSetThresholdState).toHaveBeenCalledWith({
-			type: 'SET_THRESHOLDS',
-			payload: [expect.objectContaining({ label: 'criticalx' })],
-		});
-	});
-
-	it('takes a typed deviation', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		useCreateAlertStateSpy.mockReturnValue({
-			...mockContextState,
-			thresholdState: {
-				...mockContextState.thresholdState,
-				thresholds: [
-					{
-						...mockContextState.thresholdState.thresholds[0],
-						thresholdValue: '' as unknown as number,
-					},
-				],
-			},
-		});
-		renderAnomalyThreshold();
-		await user.type(screen.getByTestId('threshold-value-input'), '4');
-		expect(mockSetThresholdState).toHaveBeenCalledWith({
-			type: 'SET_THRESHOLDS',
-			payload: [expect.objectContaining({ thresholdValue: '4' })],
-		});
-	});
-
-	it.each([
-		['ON AVERAGE', AlertThresholdMatchType.ON_AVERAGE],
-		['LAST', AlertThresholdMatchType.LAST],
-	])('offers the %s match type', async (title, matchType) => {
-		renderAnomalyThreshold();
-		await pickOption('match-type-select', title);
-		expect(mockSetThresholdState).toHaveBeenCalledWith({
-			type: 'SET_MATCH_TYPE',
-			payload: matchType,
-		});
-	});
-
-	it('picks channels by name when routing policies are off', async () => {
-		renderAnomalyThreshold();
-		await pickOption('threshold-notification-channel-select', 'slack-alerts');
-		expect(mockSetThresholdState).toHaveBeenCalledWith({
-			type: 'SET_THRESHOLDS',
-			payload: [expect.objectContaining({ channels: ['slack-alerts'] })],
-		});
-	});
-
-	it('adds the next severity one deviation lower', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		renderAnomalyThreshold();
-		await user.click(screen.getByTestId('add-threshold-button'));
-		expect(mockSetThresholdState).toHaveBeenCalledWith({
-			type: 'SET_THRESHOLDS',
-			payload: [
-				mockContextState.thresholdState.thresholds[0],
-				expect.objectContaining({ label: 'warning', thresholdValue: 2 }),
-			],
-		});
-	});
-
-	it('hides the channel picker when routing policies are on', () => {
-		useCreateAlertStateSpy.mockReturnValue({
-			...mockContextState,
-			notificationSettings: {
-				...mockContextState.notificationSettings,
-				routingPolicies: true,
-			},
-		});
-		renderAnomalyThreshold();
-		expect(
-			screen.queryByTestId('threshold-notification-channel-select'),
-		).not.toBeInTheDocument();
+		expect(screen.getByTestId('seasonality-text')).toBeInTheDocument();
 	});
 });

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/ThresholdItem.test.tsx

@@ -149,14 +149,6 @@ describe('ThresholdItem', () => {
 		expect(valueInput).toHaveValue(100);
 	});
 
-	it('asks for deviations instead of a unit for anomaly alerts', () => {
-		renderThresholdItem({ isAnomaly: true });
-
-		expect(screen.getByText('deviations')).toBeInTheDocument();
-		expect(screen.queryByText('on value')).not.toBeInTheDocument();
-		expect(screen.queryByTestId('threshold-unit-select')).not.toBeInTheDocument();
-	});
-
 	it('renders unit selector with correct value', () => {
 		renderThresholdItem();
 

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/utils.test.ts

@@ -1,58 +0,0 @@
-import { QueryFunction } from 'types/api/v5/queryRange';
-
-import { INITIAL_CRITICAL_THRESHOLD } from '../../context/constants';
-import { Threshold } from '../../context/types';
-
-import { getSmallestDeviation, syncAnomalyFunction } from '../utils';
-
-const timeShift: QueryFunction = { name: 'timeShift', args: [{ value: 3600 }] };
-const anomaly = (
-	zScoreThreshold: number,
-	seasonality: string,
-): QueryFunction => ({
-	name: 'anomaly',
-	args: [],
-	namedArgs: { z_score_threshold: zScoreThreshold, seasonality },
-});
-
-describe('syncAnomalyFunction', () => {
-	it('adds the anomaly function after the existing functions', () => {
-		expect(
-			syncAnomalyFunction([timeShift], {
-				z_score_threshold: 3,
-				seasonality: 'daily',
-			}),
-		).toStrictEqual([timeShift, anomaly(3, 'daily')]);
-	});
-
-	it('replaces stale args and gives the same result when run again', () => {
-		const namedArgs = { z_score_threshold: 5, seasonality: 'weekly' };
-		const synced = syncAnomalyFunction(
-			[anomaly(3, 'hourly'), timeShift],
-			namedArgs,
-		);
-		expect(synced).toStrictEqual([timeShift, anomaly(5, 'weekly')]);
-		expect(syncAnomalyFunction(synced, namedArgs)).toStrictEqual(synced);
-	});
-
-	it('removes the anomaly function when no args are given', () => {
-		expect(
-			syncAnomalyFunction([anomaly(3, 'daily'), timeShift], undefined),
-		).toStrictEqual([timeShift]);
-	});
-});
-
-describe('getSmallestDeviation', () => {
-	it.each([
-		[[3, 2], 2],
-		[['2.5', 4], 2.5],
-		[[3, '', 0], 3],
-		[[''], 0],
-	])('picks the smallest valid deviation from %p', (values, expected) => {
-		const thresholds = values.map(
-			(thresholdValue) =>
-				({ ...INITIAL_CRITICAL_THRESHOLD, thresholdValue }) as Threshold,
-		);
-		expect(getSmallestDeviation(thresholds)).toBe(expected);
-	});
-});

frontend/src/container/CreateAlertV2/AlertCondition/constants.ts

@@ -4,11 +4,5 @@ export const THRESHOLD_TAB_TOOLTIP =
 export const ANOMALY_TAB_TOOLTIP =
 	'An alert is triggered whenever the metric deviates from an expected pattern.';
 
-export const THRESHOLD_TAB_SWITCH_NOTE =
-	'Switching keeps your query but saves this as a metrics-based alert, not an anomaly alert.';
-
-export const ANOMALY_TAB_SWITCH_NOTE =
-	'Switching keeps your query but saves this as an anomaly-based alert. Anomaly detection works on Query Builder metric queries only.';
-
 export const ROUTING_POLICIES_ROUTE =
 	'/alerts?tab=Configuration&subTab=routing-policies';

frontend/src/container/CreateAlertV2/AlertCondition/styles.scss

@@ -90,6 +90,8 @@
 			}
 
 			.ant-select {
+				width: 240px;
+
 				.ant-select-selector {
 					background-color: var(--l2-background);
 					border: 1px solid var(--l1-border);
@@ -253,6 +255,28 @@
 				}
 			}
 		}
+
+		.add-threshold-btn {
+			margin-top: 8px;
+			border: 1px dashed var(--l1-border);
+			color: var(--l2-foreground);
+			background-color: transparent;
+			border-radius: 4px;
+			height: 32px;
+			padding: 0 16px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			&:hover {
+				border-color: var(--l1-border);
+				color: var(--l1-foreground);
+			}
+
+			.anticon {
+				margin-right: 8px;
+			}
+		}
 	}
 
 	.routing-policies-info-banner {
@@ -290,6 +314,14 @@
 	}
 }
 
+.anomaly-threshold-container {
+	.ant-select {
+		.ant-select-selector {
+			min-width: 150px;
+		}
+	}
+}
+
 .condensed-alert-threshold-container,
 .condensed-anomaly-threshold-container {
 	width: 100%;

frontend/src/container/CreateAlertV2/AlertCondition/types.ts

@@ -26,13 +26,6 @@ export interface ThresholdItemProps {
 	units: DefaultOptionType[];
 	isErrorChannels: boolean;
 	refreshChannels: () => void;
-	isAnomaly?: boolean;
-}
-
-export interface ThresholdList {
-	addThreshold: (overrides?: Partial<Threshold>) => void;
-	removeThreshold: (thresholdId: string) => void;
-	updateThreshold: UpdateThreshold;
 }
 
 export interface AnomalyAndThresholdProps {

frontend/src/container/CreateAlertV2/AlertCondition/useAnomalyFunctionSync.ts

@@ -1,36 +0,0 @@
-import { useEffect } from 'react';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { isEqual } from 'lodash-es';
-import { AlertTypes } from 'types/api/alerts/alertTypes';
-
-import { useCreateAlertState } from '../context';
-import { getSmallestDeviation, syncAnomalyFunction } from './utils';
-
-// These args only drive the preview; the rule reads the threshold target and condition.seasonality.
-export function useAnomalyFunctionSync(): void {
-	const { alertType, thresholdState } = useCreateAlertState();
-	const { currentQuery, handleSetQueryData } = useQueryBuilder();
-
-	const isAnomalyAlert = alertType === AlertTypes.ANOMALY_BASED_ALERT;
-	const zScoreThreshold = getSmallestDeviation(thresholdState.thresholds);
-	const { seasonality } = thresholdState;
-
-	useEffect(() => {
-		const namedArgs = isAnomalyAlert
-			? { z_score_threshold: zScoreThreshold, seasonality }
-			: undefined;
-		currentQuery.builder.queryData.forEach((queryData, index) => {
-			const currentFunctions = queryData.functions || [];
-			const functions = syncAnomalyFunction(currentFunctions, namedArgs);
-			if (!isEqual(functions, currentFunctions)) {
-				handleSetQueryData(index, { ...queryData, functions });
-			}
-		});
-	}, [
-		currentQuery.builder.queryData,
-		isAnomalyAlert,
-		zScoreThreshold,
-		seasonality,
-		handleSetQueryData,
-	]);
-}

frontend/src/container/CreateAlertV2/AlertCondition/useThresholdList.ts

@@ -1,53 +0,0 @@
-import getRandomColor from 'lib/getRandomColor';
-import { v4 } from 'uuid';
-
-import { useCreateAlertState } from '../context';
-import {
-	INITIAL_INFO_THRESHOLD,
-	INITIAL_RANDOM_THRESHOLD,
-	INITIAL_WARNING_THRESHOLD,
-} from '../context/constants';
-import { Threshold } from '../context/types';
-import { ThresholdList, UpdateThreshold } from './types';
-
-export function useThresholdList(): ThresholdList {
-	const { thresholdState, setThresholdState } = useCreateAlertState();
-	const { thresholds } = thresholdState;
-
-	const addThreshold = (overrides?: Partial<Threshold>): void => {
-		let newThreshold;
-		if (thresholds.length === 1) {
-			newThreshold = { ...INITIAL_WARNING_THRESHOLD, id: v4() };
-		} else if (thresholds.length === 2) {
-			newThreshold = { ...INITIAL_INFO_THRESHOLD, id: v4() };
-		} else {
-			newThreshold = {
-				...INITIAL_RANDOM_THRESHOLD,
-				id: v4(),
-				color: getRandomColor(),
-			};
-		}
-		setThresholdState({
-			type: 'SET_THRESHOLDS',
-			payload: [...thresholds, { ...newThreshold, ...overrides }],
-		});
-	};
-
-	const removeThreshold = (id: string): void => {
-		if (thresholds.length > 1) {
-			setThresholdState({
-				type: 'SET_THRESHOLDS',
-				payload: thresholds.filter((t) => t.id !== id),
-			});
-		}
-	};
-
-	const updateThreshold: UpdateThreshold = (id, field, value) => {
-		setThresholdState({
-			type: 'SET_THRESHOLDS',
-			payload: thresholds.map((t) => (t.id === id ? { ...t, [field]: value } : t)),
-		});
-	};
-
-	return { addThreshold, removeThreshold, updateThreshold };
-}

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -15,13 +15,11 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { ArrowRight } from '@signozhq/icons';
 import { IUser } from 'providers/App/types';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryFunction } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { USER_ROLES } from 'types/roles';
 import { openInNewTab } from 'utils/navigation';
 
 import { ROUTING_POLICIES_ROUTE } from './constants';
-import { Threshold } from '../context/types';
 import { RoutingPolicyBannerProps } from './types';
 
 export function getQueryNames(currentQuery: Query): BaseOptionType[] {
@@ -45,24 +43,6 @@ export function getQueryNames(currentQuery: Query): BaseOptionType[] {
 	return queryConfig[currentQuery.queryType]?.() || [];
 }
 
-export function getSmallestDeviation(thresholds: Threshold[]): number {
-	const deviations = thresholds
-		.map(({ thresholdValue }) => Number(thresholdValue))
-		.filter((deviation) => deviation > 0);
-	return deviations.length > 0 ? Math.min(...deviations) : 0;
-}
-
-export function syncAnomalyFunction(
-	functions: QueryFunction[],
-	namedArgs: QueryFunction['namedArgs'],
-): QueryFunction[] {
-	const otherFunctions = functions.filter(({ name }) => name !== 'anomaly');
-	if (!namedArgs) {
-		return otherFunctions;
-	}
-	return [...otherFunctions, { name: 'anomaly', args: [], namedArgs }];
-}
-
 export function getCategoryByOptionId(id: string): string | undefined {
 	const categories = getYAxisCategories(YAxisSource.ALERTS);
 	return categories.find((category) =>
@@ -243,22 +223,17 @@ function TooltipExample({
 	thresholdValue: number;
 	matchType: AlertThresholdMatchType;
 }): JSX.Element {
-	const pointsLabel =
-		matchType === AlertThresholdMatchType.IN_TOTAL
-			? 'error counts'
-			: 'data points';
 	return (
 		<div className="tooltip-example">
 			<strong>Example:</strong>
 			<br />
-			<span className="translate-safe">
-				{`Say, For a 5-minute window (configured in Evaluation settings), 1 min aggregation interval (set up in query) → 5 ${pointsLabel}: [${dataPoints.join(', ')}]`}
-			</span>
-			<br />
-			<span className="translate-safe">
-				{`With threshold ${operatorSymbol} ${thresholdValue}: `}
-			</span>
-			{children}
+			Say, For a 5-minute window (configured in Evaluation settings), 1 min
+			aggregation interval (set up in query) → 5{' '}
+			{matchType === AlertThresholdMatchType.IN_TOTAL
+				? 'error counts'
+				: 'data points'}
+			: [{dataPoints.join(', ')}]<br />
+			With threshold {operatorSymbol} {thresholdValue}: {children}
 		</div>
 	);
 }

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationSettings.tsx

@@ -4,14 +4,11 @@ import { ChevronDown, ChevronUp } from '@signozhq/icons';
 
 import { useCreateAlertState } from '../context';
 import EvaluationWindowPopover from './EvaluationWindowPopover';
-import { IEvaluationSettingsProps } from './types';
 import { getEvaluationWindowTypeText, getTimeframeText } from './utils';
 
 import './styles.scss';
 
-function EvaluationSettings({
-	rollingOnly = false,
-}: IEvaluationSettingsProps): JSX.Element {
+function EvaluationSettings(): JSX.Element {
 	const { evaluationWindow, setEvaluationWindow } = useCreateAlertState();
 
 	const [isEvaluationWindowPopoverOpen, setIsEvaluationWindowPopoverOpen] =
@@ -27,7 +24,6 @@ function EvaluationSettings({
 				<EvaluationWindowPopover
 					evaluationWindow={evaluationWindow}
 					setEvaluationWindow={setEvaluationWindow}
-					rollingOnly={rollingOnly}
 				/>
 			}
 			trigger="click"

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx

@@ -20,12 +20,7 @@ import { useKeyboardNavigationForEvaluationWindowPopover } from './useKeyboardNa
 function EvaluationWindowPopover({
 	evaluationWindow,
 	setEvaluationWindow,
-	rollingOnly = false,
 }: IEvaluationWindowPopoverProps): JSX.Element {
-	const windowTypeOptions = rollingOnly
-		? EVALUATION_WINDOW_TYPE.filter((option) => option.value === 'rolling')
-		: EVALUATION_WINDOW_TYPE;
-
 	const { containerRef, firstItemRef } =
 		useKeyboardNavigationForEvaluationWindowPopover({
 			onSelect: (value: string, sectionId: string): void => {
@@ -141,7 +136,7 @@ function EvaluationWindowPopover({
 			<div className="evaluation-window-content">
 				{renderEvaluationWindowContent(
 					'EVALUATION WINDOW',
-					windowTypeOptions,
+					EVALUATION_WINDOW_TYPE,
 					evaluationWindow.windowType,
 					(value: string): void =>
 						setEvaluationWindow({

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/EvaluationWindowPopover.test.tsx

@@ -39,18 +39,6 @@ describe('EvaluationWindowPopover', () => {
 		expect(screen.getByText(EVALUATION_WINDOW_TEXT)).toBeInTheDocument();
 	});
 
-	it('offers only rolling windows when rollingOnly is set', () => {
-		render(
-			<EvaluationWindowPopover
-				evaluationWindow={mockEvaluationWindow}
-				setEvaluationWindow={mockSetEvaluationWindow}
-				rollingOnly
-			/>,
-		);
-		expect(screen.getByText('Rolling')).toBeInTheDocument();
-		expect(screen.queryByText('Cumulative')).not.toBeInTheDocument();
-	});
-
 	it('should render all window type options with rolling selected', () => {
 		render(
 			<EvaluationWindowPopover

frontend/src/container/CreateAlertV2/EvaluationSettings/types.ts

@@ -31,14 +31,9 @@ export enum CumulativeWindowTimeframes {
 	CURRENT_MONTH = 'currentMonth',
 }
 
-export interface IEvaluationSettingsProps {
-	rollingOnly?: boolean;
-}
-
 export interface IEvaluationWindowPopoverProps {
 	evaluationWindow: EvaluationWindowState;
 	setEvaluationWindow: Dispatch<EvaluationWindowAction>;
-	rollingOnly?: boolean;
 }
 
 export interface IEvaluationWindowDetailsProps {

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

@@ -13,7 +13,10 @@ import APIError from 'types/api/error';
 import { isModifierKeyPressed } from 'utils/app';
 
 import { useCreateAlertState } from '../context';
-import { buildCreateAlertRulePayload, validateCreateAlertState } from './utils';
+import {
+	buildCreateThresholdAlertRulePayload,
+	validateCreateAlertState,
+} from './utils';
 
 import './styles.scss';
 import {
@@ -81,7 +84,7 @@ function Footer(): JSX.Element {
 	);
 
 	const handleTestNotification = useCallback((): void => {
-		const payload = buildCreateAlertRulePayload({
+		const payload = buildCreateThresholdAlertRulePayload({
 			alertType,
 			basicAlertState,
 			thresholdState,
@@ -114,12 +117,11 @@ function Footer(): JSX.Element {
 		notificationSettings,
 		currentQuery,
 		testAlertRule,
-		handleApiError,
 	]);
 
 	const queryClient = useQueryClient();
 	const handleSaveAlert = useCallback((): void => {
-		const payload = buildCreateAlertRulePayload({
+		const payload = buildCreateThresholdAlertRulePayload({
 			alertType,
 			basicAlertState,
 			thresholdState,
@@ -171,7 +173,6 @@ function Footer(): JSX.Element {
 		createAlertRule,
 		safeNavigate,
 		handleApiError,
-		queryClient,
 	]);
 
 	const isSavingAlertRule = isCreatingAlertRule || isUpdatingAlertRule;

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

@@ -48,6 +48,7 @@ const mockAlertContextState = createMockAlertContextState({
 		selectedQuery: 'A',
 		operator: AlertThresholdOperator.ABOVE_BELOW,
 		matchType: AlertThresholdMatchType.AT_LEAST_ONCE,
+		evaluationWindow: '5m0s',
 		algorithm: 'standard',
 		seasonality: 'hourly',
 		thresholds: [

frontend/src/container/CreateAlertV2/Footer/__tests__/utils.test.ts

@@ -9,10 +9,8 @@ import {
 } from 'container/CreateAlertV2/context/constants';
 import {
 	AdvancedOptionsState,
-	AlertThresholdOperator,
 	EvaluationWindowState,
 	NotificationSettingsState,
-	Seasonality,
 } from 'container/CreateAlertV2/context/types';
 import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
@@ -20,7 +18,6 @@ import { EQueryType } from 'types/common/dashboard';
 
 import { BuildCreateAlertRulePayloadArgs } from '../types';
 import {
-	buildCreateAlertRulePayload,
 	buildCreateThresholdAlertRulePayload,
 	getAlertOnAbsentProps,
 	getEnforceMinimumDatapointsProps,
@@ -99,33 +96,6 @@ describe('Footer utils', () => {
 			);
 		});
 
-		it.each([
-			['', 'Please enter a deviation greater than 0'],
-			[0, 'Please enter a deviation greater than 0'],
-			[-2, 'Please enter a deviation greater than 0'],
-			['2.5', null],
-		])('when the anomaly deviation is %p', (thresholdValue, expected) => {
-			const currentArgs: BuildCreateAlertRulePayloadArgs = {
-				...args,
-				alertType: AlertTypes.ANOMALY_BASED_ALERT,
-				basicAlertState: { ...args.basicAlertState, name: 'test name' },
-				thresholdState: {
-					...args.thresholdState,
-					thresholds: [
-						{
-							...args.thresholdState.thresholds[0],
-							thresholdValue: thresholdValue as number,
-						},
-					],
-				},
-				notificationSettings: {
-					...args.notificationSettings,
-					routingPolicies: true,
-				},
-			};
-			expect(validateCreateAlertState(currentArgs)).toBe(expected);
-		});
-
 		it('when threshold channels are not provided but routing policies are enabled', () => {
 			const currentArgs: BuildCreateAlertRulePayloadArgs = {
 				...args,
@@ -603,93 +573,4 @@ describe('Footer utils', () => {
 			},
 		);
 	});
-
-	describe('buildCreateAlertRulePayload', () => {
-		const mockCreateAlertContextState = createMockAlertContextState();
-		const thresholdState = mockCreateAlertContextState.thresholdState;
-		const anomalyArgs: BuildCreateAlertRulePayloadArgs = {
-			basicAlertState: mockCreateAlertContextState.alertState,
-			thresholdState: {
-				...thresholdState,
-				seasonality: Seasonality.DAILY,
-				thresholds: [
-					{ ...thresholdState.thresholds[0], thresholdValue: 3, unit: 'ms' },
-				],
-			},
-			advancedOptions: mockCreateAlertContextState.advancedOptions,
-			evaluationWindow: {
-				...mockCreateAlertContextState.evaluationWindow,
-				windowType: 'rolling',
-				timeframe: '1h0m0s',
-			},
-			notificationSettings: mockCreateAlertContextState.notificationSettings,
-			query: initialQueriesMap.metrics,
-			alertType: AlertTypes.ANOMALY_BASED_ALERT,
-		};
-
-		it('builds a v2alpha1 anomaly rule with a rolling window', () => {
-			const props = buildCreateAlertRulePayload(anomalyArgs);
-			expect(props.ruleType).toBe('anomaly_rule');
-			expect(props.alertType).toBe(AlertTypes.METRICS_BASED_ALERT);
-			expect(props.schemaVersion).toBe('v2alpha1');
-			expect(props.condition.algorithm).toBe('standard');
-			expect(props.condition.seasonality).toBe('daily');
-			expect(props.condition.thresholds?.spec[0]).toMatchObject({
-				target: 3,
-				targetUnit: '',
-			});
-			expect(props.evaluation).toStrictEqual({
-				kind: 'rolling',
-				spec: { evalWindow: '1h0m0s', frequency: '1m' },
-			});
-		});
-
-		it.each([
-			[AlertThresholdOperator.IS_BELOW, -3],
-			['2', -3],
-			[AlertThresholdOperator.IS_ABOVE, 3],
-			[AlertThresholdOperator.ABOVE_BELOW, 3],
-		])('signs the z-score target for operator %s', (operator, target) => {
-			const props = buildCreateAlertRulePayload({
-				...anomalyArgs,
-				thresholdState: { ...anomalyArgs.thresholdState, operator },
-			});
-			expect(props.condition.thresholds?.spec[0].target).toBe(target);
-			expect(props.condition.thresholds?.spec[0].op).toBe(operator);
-		});
-
-		it('signs every anomaly severity the same way', () => {
-			const props = buildCreateAlertRulePayload({
-				...anomalyArgs,
-				thresholdState: {
-					...anomalyArgs.thresholdState,
-					operator: AlertThresholdOperator.IS_BELOW,
-					thresholds: [
-						{ ...anomalyArgs.thresholdState.thresholds[0], thresholdValue: 3 },
-						{
-							...anomalyArgs.thresholdState.thresholds[0],
-							id: 'warning',
-							label: 'warning',
-							thresholdValue: 2,
-						},
-					],
-				},
-			});
-			expect(
-				props.condition.thresholds?.spec.map(({ name, target }) => [name, target]),
-			).toStrictEqual([
-				['critical', -3],
-				['warning', -2],
-			]);
-		});
-
-		it('builds a threshold rule for other alert types', () => {
-			const props = buildCreateAlertRulePayload({
-				...anomalyArgs,
-				alertType: AlertTypes.METRICS_BASED_ALERT,
-			});
-			expect(props.ruleType).toBe('threshold_rule');
-			expect(props.condition.seasonality).toBeUndefined();
-		});
-	});
 });

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

@@ -2,7 +2,6 @@ import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { AlertDetectionTypes } from 'container/FormAlertRules';
 import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
-import { AlertTypes } from 'types/api/alerts/alertTypes';
 import {
 	BasicThreshold,
 	PostableAlertRuleV2,
@@ -10,10 +9,8 @@ import {
 import { EQueryType } from 'types/common/dashboard';
 import { compositeQueryToQueryEnvelope } from 'utils/compositeQueryToQueryEnvelope';
 
-import { normalizeOperator } from '../context/conditionNormalizers';
 import {
 	AdvancedOptionsState,
-	AlertThresholdOperator,
 	EvaluationWindowState,
 	NotificationSettingsState,
 } from '../context/types';
@@ -34,8 +31,7 @@ export function getFormattedTimeValue(timeValue: number, unit: string): string {
 export function validateCreateAlertState(
 	args: BuildCreateAlertRulePayloadArgs,
 ): string | null {
-	const { alertType, basicAlertState, thresholdState, notificationSettings } =
-		args;
+	const { basicAlertState, thresholdState, notificationSettings } = args;
 
 	// Validate alert name
 	if (!basicAlertState.name) {
@@ -48,12 +44,6 @@ export function validateCreateAlertState(
 		if (!threshold.label) {
 			return 'Please enter a label for each threshold';
 		}
-		if (
-			alertType === AlertTypes.ANOMALY_BASED_ALERT &&
-			!(Number(threshold.thresholdValue) > 0)
-		) {
-			return 'Please enter a deviation greater than 0';
-		}
 		// this runs during render, so a throw here takes down the whole page
 		if (!notificationSettings.routingPolicies && !threshold.channels?.length) {
 			return 'Please select at least one channel for each threshold or enable routing policies';
@@ -299,43 +289,56 @@ export function buildCreateThresholdAlertRulePayload(
 }
 
 // Build Create Anomaly Alert Rule Payload
+// TODO: Update this function before enabling anomaly alert rule creation
 export function buildCreateAnomalyAlertRulePayload(
 	args: BuildCreateAlertRulePayloadArgs,
 ): PostableAlertRuleV2 {
-	const { thresholdState } = args;
-	const payload = buildCreateThresholdAlertRulePayload(args);
+	const {
+		alertType,
+		basicAlertState,
+		query,
+		notificationSettings,
+		evaluationWindow,
+		advancedOptions,
+	} = args;
 
-	// Targets are literal z-scores: "below N deviations" fires under -N.
-	// A target unit would rescale the z-score, so it is always cleared.
-	const sign =
-		normalizeOperator(thresholdState.operator) === AlertThresholdOperator.IS_BELOW
-			? -1
-			: 1;
-	const thresholds: BasicThreshold[] = (
-		payload.condition.thresholds?.spec || []
-	).map((threshold) => ({
-		...threshold,
-		target: sign * Math.abs(threshold.target),
-		targetUnit: '',
-	}));
+	const compositeQuery = compositeQueryToQueryEnvelope({
+		builderQueries: {
+			...mapQueryDataToApi(query.builder.queryData, 'queryName').data,
+			...mapQueryDataToApi(query.builder.queryFormulas, 'queryName').data,
+		},
+		promQueries: mapQueryDataToApi(query.promql, 'name').data,
+		chQueries: mapQueryDataToApi(query.clickhouse_sql, 'name').data,
+		queryType: query.queryType,
+		panelType: PANEL_TYPES.TIME_SERIES,
+		unit: basicAlertState.yAxisUnit,
+	});
+
+	const alertOnAbsentProps = getAlertOnAbsentProps(advancedOptions);
+	const enforceMinimumDatapointsProps =
+		getEnforceMinimumDatapointsProps(advancedOptions);
+	const evaluationProps = getEvaluationProps(evaluationWindow, advancedOptions);
+	const notificationSettingsProps =
+		getNotificationSettingsProps(notificationSettings);
 
 	return {
-		...payload,
+		alert: basicAlertState.name,
 		ruleType: AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
-		alertType: AlertTypes.METRICS_BASED_ALERT,
+		alertType,
 		condition: {
-			...payload.condition,
-			thresholds: { kind: 'basic', spec: thresholds },
-			algorithm: thresholdState.algorithm,
-			seasonality: thresholdState.seasonality,
+			compositeQuery,
+			...alertOnAbsentProps,
+			...enforceMinimumDatapointsProps,
 		},
+		labels: basicAlertState.labels,
+		annotations: {
+			description: notificationSettings.description,
+			summary: notificationSettings.description,
+		},
+		notificationSettings: notificationSettingsProps,
+		evaluation: evaluationProps,
+		version: '',
+		schemaVersion: '',
+		source: window?.location.toString(),
 	};
 }
-
-export function buildCreateAlertRulePayload(
-	args: BuildCreateAlertRulePayloadArgs,
-): PostableAlertRuleV2 {
-	return args.alertType === AlertTypes.ANOMALY_BASED_ALERT
-		? buildCreateAnomalyAlertRulePayload(args)
-		: buildCreateThresholdAlertRulePayload(args);
-}

frontend/src/container/CreateAlertV2/QuerySection/QuerySection.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { Button } from 'antd';
 import classNames from 'classnames';
@@ -74,23 +74,20 @@ function QuerySection(): JSX.Element {
 	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
 	const [isCancelled, setIsCancelled] = useState(false);
 
-	const handleFetchingStateChange = useCallback((isFetching: boolean): void => {
-		setIsLoadingQueries(isFetching);
-		if (isFetching) {
+	useEffect(() => {
+		if (isLoadingQueries) {
 			setIsCancelled(false);
 		}
-	}, []);
+	}, [isLoadingQueries]);
 
 	const handleCancelQuery = useCallback(() => {
-		void queryClient.cancelQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
+		queryClient.cancelQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
 		setIsCancelled(true);
 	}, [queryClient]);
 
 	const runQueryHandler = useCallback(() => {
 		setIsCancelled(false);
-		void queryClient.invalidateQueries([
-			REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW,
-		]);
+		queryClient.invalidateQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
 		// Reset the source param when the query is changed
 		// Then manually run the query
 		if (source === YAxisSource.DASHBOARDS && didQueryChange) {
@@ -132,11 +129,6 @@ function QuerySection(): JSX.Element {
 		},
 	];
 
-	const isAnomalyDetection = alertType === AlertTypes.ANOMALY_BASED_ALERT;
-	const activeTab = isAnomalyDetection
-		? AlertTypes.METRICS_BASED_ALERT
-		: alertType;
-
 	return (
 		<div className="query-section">
 			<Stepper stepNumber={1} label="Define the query" />
@@ -144,7 +136,7 @@ function QuerySection(): JSX.Element {
 				alertDef={alertDef}
 				source={source}
 				isCancelled={isCancelled}
-				onFetchingStateChange={handleFetchingStateChange}
+				onFetchingStateChange={setIsLoadingQueries}
 			/>
 			<div className="query-section-tabs">
 				<div className="query-section-query-actions">
@@ -152,12 +144,9 @@ function QuerySection(): JSX.Element {
 						<Button
 							key={tab.value}
 							className={classNames('list-view-tab', 'explorer-view-option', {
-								'active-tab': activeTab === tab.value,
+								'active-tab': alertType === tab.value,
 							})}
 							onClick={(): void => {
-								if (isAnomalyDetection && tab.value === activeTab) {
-									return;
-								}
 								setAlertType(tab.value as AlertTypes);
 							}}
 						>
@@ -176,7 +165,6 @@ function QuerySection(): JSX.Element {
 				handleCancelQuery={handleCancelQuery}
 				alertDef={alertDef}
 				panelType={PANEL_TYPES.TIME_SERIES}
-				isAnomalyDetection={isAnomalyDetection}
 				key={currentQuery.queryType}
 				ruleId=""
 				hideTitle

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

@@ -61,12 +61,10 @@ jest.mock(
 			alertType,
 			panelType,
 			setQueryCategory,
-			isAnomalyDetection,
 		}: any): JSX.Element {
 			return (
 				<div data-testid="query-section-component">
 					<div data-testid="query-category">{queryCategory}</div>
-					<div data-testid="is-anomaly-detection">{String(isAnomalyDetection)}</div>
 					<div data-testid="alert-type">{alertType}</div>
 					<div data-testid="panel-type">{panelType}</div>
 					<button
@@ -129,11 +127,11 @@ const queryClient = new QueryClient({
 		},
 	},
 });
-const renderQuerySection = (search = ''): ReturnType<typeof render> =>
+const renderQuerySection = (): ReturnType<typeof render> =>
 	render(
 		<Provider store={store}>
 			<QueryClientProvider client={queryClient}>
-				<MemoryRouter initialEntries={[`/alerts/new${search}`]}>
+				<MemoryRouter>
 					<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
 						<QuerySection />
 					</CreateAlertProvider>
@@ -203,27 +201,6 @@ describe('QuerySection', () => {
 		expect(metricsTab).toHaveClass(ACTIVE_TAB_CLASS);
 	});
 
-	it('keeps Metrics active and restricts query types for anomaly alerts', () => {
-		renderQuerySection(`?${QueryParams.ruleType}=anomaly_rule`);
-
-		expect(screen.getByText(METRICS_TEXT).closest('button')).toHaveClass(
-			ACTIVE_TAB_CLASS,
-		);
-		expect(screen.getByTestId('is-anomaly-detection')).toHaveTextContent('true');
-	});
-
-	it('stays on the anomaly alert when its active Metrics tab is clicked', async () => {
-		const user = userEvent.setup();
-		renderQuerySection(`?${QueryParams.ruleType}=anomaly_rule`);
-
-		await user.click(screen.getByText(METRICS_TEXT));
-
-		expect(
-			mockUseQueryBuilder.redirectWithQueryBuilderData,
-		).not.toHaveBeenCalled();
-		expect(screen.getByTestId('is-anomaly-detection')).toHaveTextContent('true');
-	});
-
 	it('handles alert type change when clicking on different tabs', async () => {
 		const user = userEvent.setup();
 		renderQuerySection();

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

@@ -1,6 +1,5 @@
 import { Color } from '@signozhq/design-tokens';
 import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
-import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { PostableAlertRuleV2 } from 'types/api/alerts/alertTypesV2';
 
 import { defaultPostableAlertRuleV2 } from '../constants';
@@ -12,7 +11,6 @@ import {
 import {
 	getAdvancedOptionsStateFromAlertDef,
 	getColorForThreshold,
-	getAlertTypeFromAlertDef,
 	getCreateAlertLocalStateFromAlertDef,
 	getEvaluationWindowStateFromAlertDef,
 	getNotificationSettingsStateFromAlertDef,
@@ -273,7 +271,7 @@ describe('CreateAlertV2 utils', () => {
 		});
 	});
 
-	it('getThresholdStateFromAlertDef maps thresholds, query, operator and match type', () => {
+	describe('getThresholdStateFromAlertDef', () => {
 		const args: PostableAlertRuleV2 = {
 			...defaultPostableAlertRuleV2,
 			annotations: {
@@ -318,81 +316,6 @@ describe('CreateAlertV2 utils', () => {
 		});
 	});
 
-	describe('getThresholdStateFromAlertDef for anomaly rules', () => {
-		const anomalyDef: PostableAlertRuleV2 = {
-			...defaultPostableAlertRuleV2,
-			ruleType: 'anomaly_rule',
-			condition: {
-				...defaultPostableAlertRuleV2.condition,
-				algorithm: 'standard',
-				seasonality: 'weekly',
-				thresholds: {
-					kind: 'basic',
-					spec: [
-						{
-							name: 'critical',
-							target: -3,
-							targetUnit: '',
-							channels: ['email'],
-							matchType: AlertThresholdMatchType.ALL_THE_TIME,
-							op: AlertThresholdOperator.IS_BELOW,
-						},
-					],
-				},
-			},
-			evaluation: {
-				kind: 'rolling',
-				spec: { evalWindow: '1h0m0s', frequency: '1m' },
-			},
-		};
-
-		it('shows deviations unsigned and restores the anomaly settings', () => {
-			expect(getThresholdStateFromAlertDef(anomalyDef)).toMatchObject({
-				operator: AlertThresholdOperator.IS_BELOW,
-				thresholds: [{ thresholdValue: 3 }],
-				algorithm: 'standard',
-				seasonality: 'weekly',
-			});
-		});
-
-		it('loads the anomaly window into the shared evaluation window', () => {
-			expect(getEvaluationWindowStateFromAlertDef(anomalyDef)).toMatchObject({
-				windowType: 'rolling',
-				timeframe: '1h0m0s',
-			});
-		});
-
-		it('keeps signed targets for threshold rules', () => {
-			const state = getThresholdStateFromAlertDef({
-				...anomalyDef,
-				ruleType: 'threshold_rule',
-			});
-			expect(state.thresholds[0].thresholdValue).toBe(-3);
-		});
-	});
-
-	describe('getAlertTypeFromAlertDef', () => {
-		it('maps anomaly rules to the anomaly alert type', () => {
-			expect(
-				getAlertTypeFromAlertDef({
-					...defaultPostableAlertRuleV2,
-					alertType: AlertTypes.METRICS_BASED_ALERT,
-					ruleType: 'anomaly_rule',
-				}),
-			).toBe(AlertTypes.ANOMALY_BASED_ALERT);
-		});
-
-		it('keeps the stored alert type for other rules', () => {
-			expect(
-				getAlertTypeFromAlertDef({
-					...defaultPostableAlertRuleV2,
-					alertType: AlertTypes.LOGS_BASED_ALERT,
-					ruleType: 'threshold_rule',
-				}),
-			).toBe(AlertTypes.LOGS_BASED_ALERT);
-		});
-	});
-
 	describe('getThresholdStateFromAlertDef null channels', () => {
 		it('falls back to an empty array so downstream consumers never see null', () => {
 			const def: PostableAlertRuleV2 = {

frontend/src/container/CreateAlertV2/context/__tests__/CreateAlertProvider.prefill.test.tsx

@@ -1,5 +1,6 @@
-import { useHistory } from 'react-router-dom';
-import { render, screen, userEvent } from 'tests/test-utils';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { MemoryRouter, useHistory } from 'react-router-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { INITIAL_CREATE_ALERT_STATE } from '../constants';
@@ -40,20 +41,20 @@ function Probe(): JSX.Element {
 }
 
 function renderWithSearch(search: string): void {
+	const queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
 	render(
-		<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
-			<Probe />
-		</CreateAlertProvider>,
-		undefined,
-		{ initialRoute: `/alerts/new${search}` },
+		<MemoryRouter initialEntries={[`/alerts/new${search}`]}>
+			<QueryClientProvider client={queryClient}>
+				<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
+					<Probe />
+				</CreateAlertProvider>
+			</QueryClientProvider>
+		</MemoryRouter>,
 	);
 }
 
-const clickTestId = async (testId: string): Promise<void> => {
-	const user = userEvent.setup({ pointerEventsCheck: 0 });
-	await user.click(screen.getByTestId(testId));
-};
-
 function serializeThreshold(thresholdValue: number): string {
 	return encodeURIComponent(
 		JSON.stringify([
@@ -96,13 +97,6 @@ describe('CreateAlertProvider — URL-declared prefill (issue #5291)', () => {
 		expect(screen.getByTestId('window-type')).toHaveTextContent('rolling');
 	});
 
-	it('starts new anomaly alerts at 3 deviations', () => {
-		renderWithSearch(`?ruleType=anomaly_rule`);
-
-		expect(screen.getByTestId('threshold-count')).toHaveTextContent('1');
-		expect(screen.getByTestId('threshold-value')).toHaveTextContent('3');
-	});
-
 	it('applies the meter evaluation window when the preset is declared', () => {
 		// Ingestion-style prefill: explicit in_total + meter preset.
 		renderWithSearch(
@@ -120,17 +114,17 @@ describe('CreateAlertProvider — URL-declared prefill (issue #5291)', () => {
 // Reproduces the #12137 regression: on the alert overview page the query builder
 // rewrites location.search after the alert loads, which used to re-run the prefill
 // effect and RESET the loaded threshold back to 0.
-function SearchMutator({
-	to = '/alerts/overview?compositeQuery=normalized&ruleId=r1',
-}: {
-	to?: string;
-}): JSX.Element {
+function SearchMutator(): JSX.Element {
 	const routerHistory = useHistory();
 	return (
 		<button
 			type="button"
 			data-testid="mutate-search"
-			onClick={(): void => routerHistory.replace(to)}
+			onClick={(): void =>
+				routerHistory.replace(
+					'/alerts/overview?compositeQuery=normalized&ruleId=r1',
+				)
+			}
 		>
 			change search
 		</button>
@@ -138,7 +132,7 @@ function SearchMutator({
 }
 
 describe('CreateAlertProvider — edit mode ignores URL prefill', () => {
-	it('keeps loaded thresholds when the query builder rewrites location.search', async () => {
+	it('keeps loaded thresholds when the query builder rewrites location.search', () => {
 		const initialAlertState = {
 			...INITIAL_CREATE_ALERT_STATE,
 			threshold: {
@@ -153,158 +147,30 @@ describe('CreateAlertProvider — edit mode ignores URL prefill', () => {
 			},
 		};
 
+		const queryClient = new QueryClient({
+			defaultOptions: { queries: { retry: false } },
+		});
 		render(
-			<CreateAlertProvider
-				initialAlertType={AlertTypes.METRICS_BASED_ALERT}
-				isEditMode
-				ruleId="r1"
-				initialAlertState={initialAlertState}
-			>
-				<Probe />
-				<SearchMutator />
-			</CreateAlertProvider>,
-			undefined,
-			{ initialRoute: '/alerts/overview?ruleId=r1' },
+			<MemoryRouter initialEntries={['/alerts/overview?ruleId=r1']}>
+				<QueryClientProvider client={queryClient}>
+					<CreateAlertProvider
+						initialAlertType={AlertTypes.METRICS_BASED_ALERT}
+						isEditMode
+						ruleId="r1"
+						initialAlertState={initialAlertState}
+					>
+						<Probe />
+						<SearchMutator />
+					</CreateAlertProvider>
+				</QueryClientProvider>
+			</MemoryRouter>,
 		);
 
 		expect(screen.getByTestId('threshold-value')).toHaveTextContent('245');
 
 		// Simulate the query builder normalizing the query into the URL post-load.
-		await clickTestId('mutate-search');
+		fireEvent.click(screen.getByTestId('mutate-search'));
 
 		expect(screen.getByTestId('threshold-value')).toHaveTextContent('245');
 	});
 });
-
-function ThresholdSetter(): JSX.Element {
-	const { thresholdState, setThresholdState } = useCreateAlertState();
-	return (
-		<button
-			type="button"
-			data-testid="set-threshold"
-			onClick={(): void =>
-				setThresholdState({
-					type: 'SET_THRESHOLDS',
-					payload: [{ ...thresholdState.thresholds[0], thresholdValue: 245 }],
-				})
-			}
-		>
-			set threshold
-		</button>
-	);
-}
-
-describe('CreateAlertProvider — create mode', () => {
-	it('keeps edited thresholds when running the query rewrites location.search', async () => {
-		render(
-			<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
-				<Probe />
-				<ThresholdSetter />
-				<SearchMutator to="/alerts/new?alertType=METRIC_BASED_ALERT&compositeQuery=ran" />
-			</CreateAlertProvider>,
-			undefined,
-			{ initialRoute: '/alerts/new?alertType=METRIC_BASED_ALERT' },
-		);
-
-		await clickTestId('set-threshold');
-		expect(screen.getByTestId('threshold-value')).toHaveTextContent('245');
-
-		await clickTestId('mutate-search');
-
-		expect(screen.getByTestId('threshold-value')).toHaveTextContent('245');
-	});
-});
-
-function AnomalySwitcher(): JSX.Element {
-	const { setAlertType } = useCreateAlertState();
-	return (
-		<button
-			type="button"
-			data-testid="switch-to-anomaly"
-			onClick={(): void => setAlertType(AlertTypes.ANOMALY_BASED_ALERT)}
-		>
-			switch to anomaly
-		</button>
-	);
-}
-
-describe('CreateAlertProvider — edit mode type switch', () => {
-	it('starts the anomaly condition at 3 deviations instead of the loaded threshold', async () => {
-		const initialAlertState = {
-			...INITIAL_CREATE_ALERT_STATE,
-			threshold: {
-				...INITIAL_CREATE_ALERT_STATE.threshold,
-				thresholds: [
-					{
-						...INITIAL_CREATE_ALERT_STATE.threshold.thresholds[0],
-						thresholdValue: 500,
-					},
-				],
-			},
-		};
-		render(
-			<CreateAlertProvider
-				initialAlertType={AlertTypes.METRICS_BASED_ALERT}
-				isEditMode
-				ruleId="r1"
-				initialAlertState={initialAlertState}
-			>
-				<Probe />
-				<AnomalySwitcher />
-			</CreateAlertProvider>,
-			undefined,
-			{ initialRoute: '/alerts/overview?ruleId=r1' },
-		);
-		expect(screen.getByTestId('threshold-value')).toHaveTextContent('500');
-
-		await clickTestId('switch-to-anomaly');
-
-		expect(screen.getByTestId('threshold-value')).toHaveTextContent('3');
-	});
-
-	it('keeps the meter preset from bringing back a cumulative window for anomaly', async () => {
-		render(
-			<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
-				<Probe />
-				<AnomalySwitcher />
-			</CreateAlertProvider>,
-			undefined,
-			{
-				initialRoute: '/alerts/new?matchType=in_total&evaluationWindowPreset=meter',
-			},
-		);
-		expect(screen.getByTestId('window-type')).toHaveTextContent('cumulative');
-
-		await clickTestId('switch-to-anomaly');
-
-		expect(screen.getByTestId('window-type')).toHaveTextContent('rolling');
-	});
-
-	it('moves a cumulative window back to rolling when switching to anomaly', async () => {
-		render(
-			<CreateAlertProvider
-				initialAlertType={AlertTypes.METRICS_BASED_ALERT}
-				isEditMode
-				ruleId="r1"
-				initialAlertState={{
-					...INITIAL_CREATE_ALERT_STATE,
-					evaluationWindow: {
-						...INITIAL_CREATE_ALERT_STATE.evaluationWindow,
-						windowType: 'cumulative',
-						timeframe: 'currentHour',
-					},
-				}}
-			>
-				<Probe />
-				<AnomalySwitcher />
-			</CreateAlertProvider>,
-			undefined,
-			{ initialRoute: '/alerts/overview?ruleId=r1' },
-		);
-		expect(screen.getByTestId('window-type')).toHaveTextContent('cumulative');
-
-		await clickTestId('switch-to-anomaly');
-
-		expect(screen.getByTestId('window-type')).toHaveTextContent('rolling');
-	});
-});

frontend/src/container/CreateAlertV2/context/__tests__/utils.test.tsx

@@ -27,6 +27,7 @@ import {
 	EvaluationWindowState,
 	NotificationSettingsState,
 	Seasonality,
+	TimeDuration,
 } from '../types';
 import {
 	advancedOptionsReducer,
@@ -265,6 +266,7 @@ describe('CreateAlertV2 Context Utils', () => {
 				selectedQuery: 'B',
 				operator: AlertThresholdOperator.IS_BELOW,
 				matchType: AlertThresholdMatchType.ALL_THE_TIME,
+				evaluationWindow: TimeDuration.TEN_MINUTES,
 				algorithm: Algorithm.STANDARD,
 				seasonality: Seasonality.DAILY,
 				thresholds: [],
@@ -278,6 +280,7 @@ describe('CreateAlertV2 Context Utils', () => {
 				selectedQuery: 'C',
 				operator: AlertThresholdOperator.IS_EQUAL_TO,
 				matchType: AlertThresholdMatchType.ON_AVERAGE,
+				evaluationWindow: TimeDuration.ONE_HOUR,
 				algorithm: Algorithm.STANDARD,
 				seasonality: Seasonality.WEEKLY,
 				thresholds: [],

frontend/src/container/CreateAlertV2/context/constants.ts

@@ -16,6 +16,7 @@ import {
 	NotificationSettingsState,
 	Seasonality,
 	Threshold,
+	TimeDuration,
 } from './types';
 
 export const INITIAL_ALERT_STATE: AlertState = {
@@ -34,11 +35,6 @@ export const INITIAL_CRITICAL_THRESHOLD: Threshold = {
 	color: Color.BG_SAKURA_500,
 };
 
-export const INITIAL_ANOMALY_THRESHOLD: Threshold = {
-	...INITIAL_CRITICAL_THRESHOLD,
-	thresholdValue: 3,
-};
-
 export const INITIAL_WARNING_THRESHOLD: Threshold = {
 	id: v4(),
 	label: 'warning',
@@ -73,6 +69,7 @@ export const INITIAL_ALERT_THRESHOLD_STATE: AlertThresholdState = {
 	selectedQuery: 'A',
 	operator: AlertThresholdOperator.IS_ABOVE,
 	matchType: AlertThresholdMatchType.AT_LEAST_ONCE,
+	evaluationWindow: TimeDuration.FIVE_MINUTES,
 	algorithm: Algorithm.STANDARD,
 	seasonality: Seasonality.HOURLY,
 	thresholds: [INITIAL_CRITICAL_THRESHOLD],
@@ -139,8 +136,8 @@ export const THRESHOLD_OPERATOR_OPTIONS = [
 ];
 
 export const ANOMALY_THRESHOLD_OPERATOR_OPTIONS = [
-	{ value: AlertThresholdOperator.IS_ABOVE, label: 'ABOVE' },
-	{ value: AlertThresholdOperator.IS_BELOW, label: 'BELOW' },
+	{ value: AlertThresholdOperator.IS_ABOVE, label: 'IS ABOVE' },
+	{ value: AlertThresholdOperator.IS_BELOW, label: 'IS BELOW' },
 	{ value: AlertThresholdOperator.ABOVE_BELOW, label: 'ABOVE/BELOW' },
 ];
 
@@ -155,8 +152,16 @@ export const THRESHOLD_MATCH_TYPE_OPTIONS = [
 export const ANOMALY_THRESHOLD_MATCH_TYPE_OPTIONS = [
 	{ value: AlertThresholdMatchType.AT_LEAST_ONCE, label: 'AT LEAST ONCE' },
 	{ value: AlertThresholdMatchType.ALL_THE_TIME, label: 'ALL THE TIME' },
-	{ value: AlertThresholdMatchType.ON_AVERAGE, label: 'ON AVERAGE' },
-	{ value: AlertThresholdMatchType.LAST, label: 'LAST' },
+];
+
+export const ANOMALY_TIME_DURATION_OPTIONS = [
+	{ value: TimeDuration.FIVE_MINUTES, label: '5 minutes' },
+	{ value: TimeDuration.TEN_MINUTES, label: '10 minutes' },
+	{ value: TimeDuration.FIFTEEN_MINUTES, label: '15 minutes' },
+	{ value: TimeDuration.ONE_HOUR, label: '1 hour' },
+	{ value: TimeDuration.THREE_HOURS, label: '3 hours' },
+	{ value: TimeDuration.FOUR_HOURS, label: '4 hours' },
+	{ value: TimeDuration.TWENTY_FOUR_HOURS, label: '24 hours' },
 ];
 
 export const ANOMALY_ALGORITHM_OPTIONS = [

frontend/src/container/CreateAlertV2/context/index.tsx

@@ -22,14 +22,9 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
-import {
-	INITIAL_ANOMALY_THRESHOLD,
-	INITIAL_CREATE_ALERT_STATE,
-	INITIAL_EVALUATION_WINDOW_STATE,
-} from './constants';
+import { INITIAL_CREATE_ALERT_STATE } from './constants';
 import {
 	EvaluationWindowPreset,
-	pickAlertPrefillParams,
 	resolveUrlAlertPrefill,
 } from './resolveUrlAlertPrefill';
 import {
@@ -134,10 +129,9 @@ export function CreateAlertProvider(
 	const ruleNameFromURL = queryParams.get(QueryParams.ruleName);
 	const yAxisUnitFromURL = queryParams.get(QueryParams.yAxisUnit);
 	// Prefill declared in the URL; applied verbatim, agnostic of the producer.
-	const prefillParams = pickAlertPrefillParams(location.search);
 	const urlPrefill = useMemo(
-		() => resolveUrlAlertPrefill(new URLSearchParams(prefillParams)),
-		[prefillParams],
+		() => resolveUrlAlertPrefill(new URLSearchParams(location.search)),
+		[location.search],
 	);
 
 	const [alertType, setAlertType] = useState<AlertTypes>(() => {
@@ -147,41 +141,14 @@ export function CreateAlertProvider(
 		return getInitialAlertTypeFromURL(queryParams, currentQuery);
 	});
 
-	const resetThresholdState = useCallback((type: AlertTypes): void => {
-		setCreateAlertState({
-			slice: CreateAlertSlice.THRESHOLD,
-			action: {
-				type: 'RESET',
-			},
-		});
-
-		if (type === AlertTypes.ANOMALY_BASED_ALERT) {
-			setCreateAlertState({
-				slice: CreateAlertSlice.THRESHOLD,
-				action: {
-					type: 'SET_THRESHOLDS',
-					payload: [INITIAL_ANOMALY_THRESHOLD],
-				},
-			});
-		}
-	}, []);
-
 	const handleAlertTypeChange = useCallback(
 		(value: AlertTypes): void => {
-			// Threshold and anomaly alerts share the metric query, so switching keeps it.
-			const metricAlertTypes = [
-				AlertTypes.METRICS_BASED_ALERT,
-				AlertTypes.ANOMALY_BASED_ALERT,
-			];
-			const keepsQuery =
-				value !== alertType &&
-				metricAlertTypes.includes(value) &&
-				metricAlertTypes.includes(alertType);
-			const queryToRedirect = keepsQuery
-				? currentQuery
-				: mapQueryDataFromApi(buildInitialAlertDef(value).condition.compositeQuery);
+			const queryToRedirect = buildInitialAlertDef(value);
+			const currentQueryToRedirect = mapQueryDataFromApi(
+				queryToRedirect.condition.compositeQuery,
+			);
 			redirectWithQueryBuilderData(
-				queryToRedirect,
+				currentQueryToRedirect,
 				{
 					[QueryParams.alertType]: value,
 					[QueryParams.ruleType]:
@@ -193,28 +160,8 @@ export function CreateAlertProvider(
 				true,
 			);
 			setAlertType(value);
-			if (isEditMode && keepsQuery) {
-				resetThresholdState(value);
-			}
-			if (
-				value === AlertTypes.ANOMALY_BASED_ALERT &&
-				createAlertState.evaluationWindow.windowType !== 'rolling'
-			) {
-				setEvaluationWindow({
-					type: 'SET_INITIAL_STATE',
-					payload: INITIAL_EVALUATION_WINDOW_STATE,
-				});
-			}
 		},
-		[
-			alertType,
-			createAlertState.evaluationWindow.windowType,
-			currentQuery,
-			isEditMode,
-			redirectWithQueryBuilderData,
-			resetThresholdState,
-			setEvaluationWindow,
-		],
+		[redirectWithQueryBuilderData],
 	);
 
 	const ruleNameAppliedRef = useRef(false);
@@ -229,7 +176,12 @@ export function CreateAlertProvider(
 			return;
 		}
 
-		resetThresholdState(alertType);
+		setCreateAlertState({
+			slice: CreateAlertSlice.THRESHOLD,
+			action: {
+				type: 'RESET',
+			},
+		});
 
 		if (urlPrefill.thresholds) {
 			setCreateAlertState({
@@ -261,10 +213,7 @@ export function CreateAlertProvider(
 			});
 		}
 
-		if (
-			urlPrefill.evaluationWindowPreset === EvaluationWindowPreset.METER &&
-			alertType !== AlertTypes.ANOMALY_BASED_ALERT
-		) {
+		if (urlPrefill.evaluationWindowPreset === EvaluationWindowPreset.METER) {
 			setCreateAlertState({
 				slice: CreateAlertSlice.EVALUATION_WINDOW,
 				action: {
@@ -294,14 +243,7 @@ export function CreateAlertProvider(
 				},
 			});
 		}
-	}, [
-		alertType,
-		urlPrefill,
-		ruleNameFromURL,
-		yAxisUnitFromURL,
-		isEditMode,
-		resetThresholdState,
-	]);
+	}, [alertType, urlPrefill, ruleNameFromURL, yAxisUnitFromURL, isEditMode]);
 
 	useEffect(() => {
 		if (isEditMode && initialAlertState) {

frontend/src/container/CreateAlertV2/context/resolveUrlAlertPrefill.ts

@@ -7,13 +7,6 @@ import {
 	Threshold,
 } from './types';
 
-const PREFILL_PARAMS = [
-	QueryParams.thresholds,
-	QueryParams.matchType,
-	QueryParams.compareOp,
-	QueryParams.evaluationWindowPreset,
-];
-
 export enum EvaluationWindowPreset {
 	METER = 'meter',
 }
@@ -46,18 +39,6 @@ function parseEvaluationWindowPreset(
 		: undefined;
 }
 
-export function pickAlertPrefillParams(search: string): string {
-	const params = new URLSearchParams(search);
-	const prefillParams = new URLSearchParams();
-	PREFILL_PARAMS.forEach((key) => {
-		const value = params.get(key);
-		if (value !== null) {
-			prefillParams.set(key, value);
-		}
-	});
-	return prefillParams.toString();
-}
-
 /** URL → declarative prefill plan; the consumer applies it without knowing the producer. */
 export function resolveUrlAlertPrefill(
 	params: URLSearchParams,

frontend/src/container/CreateAlertV2/context/types.ts

@@ -119,11 +119,23 @@ export interface AlertThresholdState {
 	// canonical enum value.
 	operator: AlertThresholdOperator | string;
 	matchType: AlertThresholdMatchType | string;
+	evaluationWindow: string;
 	algorithm: string;
 	seasonality: string;
 	thresholds: Threshold[];
 }
 
+export enum TimeDuration {
+	ONE_MINUTE = '1m0s',
+	FIVE_MINUTES = '5m0s',
+	TEN_MINUTES = '10m0s',
+	FIFTEEN_MINUTES = '15m0s',
+	ONE_HOUR = '1h0m0s',
+	THREE_HOURS = '3h0m0s',
+	FOUR_HOURS = '4h0m0s',
+	TWENTY_FOUR_HOURS = '24h0m0s',
+}
+
 export enum Algorithm {
 	STANDARD = 'standard',
 }
@@ -138,6 +150,7 @@ export type AlertThresholdAction =
 	| { type: 'SET_SELECTED_QUERY'; payload: string }
 	| { type: 'SET_OPERATOR'; payload: AlertThresholdOperator }
 	| { type: 'SET_MATCH_TYPE'; payload: AlertThresholdMatchType }
+	| { type: 'SET_EVALUATION_WINDOW'; payload: string }
 	| { type: 'SET_ALGORITHM'; payload: string }
 	| { type: 'SET_SEASONALITY'; payload: string }
 	| { type: 'SET_THRESHOLDS'; payload: Threshold[] }

frontend/src/container/CreateAlertV2/context/utils.tsx

@@ -124,10 +124,6 @@ export const alertThresholdReducer = (
 			return { ...state, operator: action.payload };
 		case 'SET_MATCH_TYPE':
 			return { ...state, matchType: action.payload };
-		case 'SET_ALGORITHM':
-			return { ...state, algorithm: action.payload };
-		case 'SET_SEASONALITY':
-			return { ...state, seasonality: action.payload };
 		case 'SET_THRESHOLDS':
 			return { ...state, thresholds: action.payload };
 		case 'RESET':

frontend/src/container/CreateAlertV2/useIsAnomalyDetectionAvailable.ts

@@ -1,6 +0,0 @@
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-
-export const useIsAnomalyDetectionAvailable = (): boolean => {
-	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
-	return isCloudUser || isEnterpriseSelfHostedUser;
-};