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>
This commit is contained in:
Rajat Dabade 2023-11-01 22:47:27 +05:30 committed by GitHub
parent 0400d5378b
commit 092d164d55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 25 additions and 21 deletions

View File

@ -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';

View File

@ -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,

View File

@ -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}

View File

@ -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}
/>
);

View File

@ -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}

View File

@ -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,