refactor: global time range downdown for alert edit page (#3751)

* refactor: global time range downdown for alert edit page

* refactor: respect global time range for alerts

* refactor: some ui fixes

* refactor: added global time range in alert new page

* fix: custom time selection in alert

* fix: the run query works

* refactor: remove the routes pipeline

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
Co-authored-by: Ankit Nayan <ankit@signoz.io>

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -2,6 +2,7 @@ import { Form, Select } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { AlertDef, Labels } from 'types/api/alerts/def';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import ChannelSelect from './ChannelSelect';
 import LabelSelect from './labels';
@@ -36,6 +37,7 @@ function BasicInfo({ alertDef, setAlertDef }: BasicInfoProps): JSX.Element {
 					name={['labels', 'severity']}
 				>
 					<SeveritySelect
+						getPopupContainer={popupContainer}
 						defaultValue="critical"
 						onChange={(value: unknown | string): void => {
 							const s = (value as string) || 'critical';

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -9,9 +9,12 @@ import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import getChartData from 'lib/getChartData';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
 import { AlertDef } from 'types/api/alerts/def';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
+import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { ChartContainer, FailedMessageContainer } from './styles';
 import { covertIntoDataFormats } from './utils';
@@ -41,6 +44,9 @@ function ChartPreview({
 }: ChartPreviewProps): JSX.Element | null {
 	const { t } = useTranslation('alerts');
 	const threshold = alertDef?.condition.target || 0;
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
 
 	const thresholdValue = covertIntoDataFormats({
 		value: threshold,
@@ -100,6 +106,8 @@ function ChartPreview({
 				'chartPreview',
 				userQueryKey || JSON.stringify(query),
 				selectedInterval,
+				minTime,
+				maxTime,
 			],
 			retry: false,
 			enabled: canQuery,

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -20,6 +20,7 @@ import {
 	defaultMatchType,
 } from 'types/api/alerts/def';
 import { EQueryType } from 'types/common/dashboard';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { FormContainer, InlineSelect, StepHeading } from './styles';
 
@@ -45,6 +46,7 @@ function RuleOptions({
 
 	const renderCompareOps = (): JSX.Element => (
 		<InlineSelect
+			getPopupContainer={popupContainer}
 			defaultValue={defaultCompareOp}
 			value={alertDef.condition?.op}
 			style={{ minWidth: '120px' }}
@@ -69,6 +71,7 @@ function RuleOptions({
 
 	const renderThresholdMatchOpts = (): JSX.Element => (
 		<InlineSelect
+			getPopupContainer={popupContainer}
 			defaultValue={defaultMatchType}
 			style={{ minWidth: '130px' }}
 			value={alertDef.condition?.matchType}
@@ -83,6 +86,7 @@ function RuleOptions({
 
 	const renderPromMatchOpts = (): JSX.Element => (
 		<InlineSelect
+			getPopupContainer={popupContainer}
 			defaultValue={defaultMatchType}
 			style={{ minWidth: '130px' }}
 			value={alertDef.condition?.matchType}
@@ -94,6 +98,7 @@ function RuleOptions({
 
 	const renderEvalWindows = (): JSX.Element => (
 		<InlineSelect
+			getPopupContainer={popupContainer}
 			defaultValue={defaultEvalWindow}
 			style={{ minWidth: '120px' }}
 			value={alertDef.evalWindow}
@@ -180,6 +185,7 @@ function RuleOptions({
 
 					<Form.Item>
 						<Select
+							getPopupContainer={popupContainer}
 							allowClear
 							showSearch
 							options={categorySelectOptions}

frontend/src/container/FormAlertRules/index.tsx

@@ -44,7 +44,6 @@ import {
 	StyledLeftContainer,
 } from './styles';
 import UserGuide from './UserGuide';
-import { getUpdatedStepInterval, toChartInterval } from './utils';
 
 function FormAlertRules({
 	alertType,
@@ -55,9 +54,10 @@ function FormAlertRules({
 	// init namespace for translations
 	const { t } = useTranslation('alerts');
 
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
+	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
 
 	const {
 		currentQuery,
@@ -354,16 +354,6 @@ function FormAlertRules({
 		<BasicInfo alertDef={alertDef} setAlertDef={setAlertDef} />
 	);
 
-	const updatedStagedQuery = useMemo((): Query | null => {
-		const newQuery: Query | null = stagedQuery;
-		if (newQuery) {
-			newQuery.builder.queryData[0].stepInterval = getUpdatedStepInterval(
-				alertDef.evalWindow,
-			);
-		}
-		return newQuery;
-	}, [alertDef.evalWindow, stagedQuery]);
-
 	const renderQBChartPreview = (): JSX.Element => (
 		<ChartPreview
 			headline={
@@ -373,10 +363,9 @@ function FormAlertRules({
 				/>
 			}
 			name=""
-			query={updatedStagedQuery}
-			selectedInterval={toChartInterval(alertDef.evalWindow)}
+			query={stagedQuery}
+			selectedInterval={globalSelectedInterval}
 			alertDef={alertDef}
-			allowSelectedIntervalForStepGen
 		/>
 	);
 
@@ -405,7 +394,7 @@ function FormAlertRules({
 			name="Chart Preview"
 			query={stagedQuery}
 			alertDef={alertDef}
-			selectedInterval={toChartInterval(alertDef.evalWindow)}
+			selectedInterval={globalSelectedInterval}
 		/>
 	);
 

frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/BuilderUnits.tsx

@@ -1,6 +1,7 @@
 import { Select, SelectProps, Space } from 'antd';
 import { getCategorySelectOptionByName } from 'container/NewWidget/RightContainer/alertFomatCategories';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { categoryToSupport } from './config';
 import { DefaultLabel, selectStyles } from './styles';
@@ -31,6 +32,7 @@ function BuilderUnitsFilter({
 		<Space>
 			<DefaultLabel>Y-axis unit</DefaultLabel>
 			<Select
+				getPopupContainer={popupContainer}
 				style={selectStyles}
 				onChange={onChangeHandler}
 				value={selectedValue}

frontend/src/container/TopNav/DateTimeSelection/config.ts

@@ -80,9 +80,6 @@ export const routesToSkip = [
 	ROUTES.ORG_SETTINGS,
 	ROUTES.INGESTION_SETTINGS,
 	ROUTES.ERROR_DETAIL,
-	ROUTES.ALERTS_NEW,
-	ROUTES.EDIT_ALERTS,
-	ROUTES.LIST_ALL_ALERT,
 	ROUTES.LOGS_PIPELINES,
 	ROUTES.BILLING,
 	ROUTES.SUPPORT,