GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-15 18:25:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: alerts page threshold only number is allowed (#2816)

Browse Source
This commit is contained in:
Palash Gupta 2023-06-05 12:42:38 +05:30 committed by GitHub
parent 9091b9b82c
commit d2cdf401b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/container/FormAlertRules/RuleOptions.tsx
View File

@ -1,4 +1,4 @@
import { Form, Select, Typography } from 'antd'; import { Form, InputNumber, InputNumberProps, Select, Typography } from 'antd';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { import {
AlertDef, AlertDef,
@ -8,12 +8,7 @@ import {
} from 'types/api/alerts/def'; } from 'types/api/alerts/def';
import { EQueryType } from 'types/common/dashboard'; import { EQueryType } from 'types/common/dashboard';
import { import { FormContainer, InlineSelect, StepHeading } from './styles';
FormContainer,
InlineSelect,
StepHeading,
ThresholdInput,
} from './styles';
const { Option } = Select; const { Option } = Select;
const FormItem = Form.Item; const FormItem = Form.Item;
@ -126,6 +121,18 @@ function RuleOptions({
</FormItem> </FormItem>
); );
const onChange: InputNumberProps['onChange'] = (value): void => {
setAlertDef({
...alertDef,
condition: {
...alertDef.condition,
op: alertDef.condition?.op || defaultCompareOp,
matchType: alertDef.condition?.matchType || defaultMatchType,
target: Number(value) || 0,
},
});
};
return ( return (
<> <>
<StepHeading>{t('alert_form_step2')}</StepHeading> <StepHeading>{t('alert_form_step2')}</StepHeading>
@ -133,24 +140,12 @@ function RuleOptions({
{queryCategory === EQueryType.PROM {queryCategory === EQueryType.PROM
? renderPromRuleOptions() ? renderPromRuleOptions()
: renderThresholdRuleOpts()} : renderThresholdRuleOpts()}
<div style={{ display: 'flex', alignItems: 'center' }}> <InputNumber
<ThresholdInput addonBefore={t('field_threshold')}
controls={false} value={alertDef?.condition?.target}
addonBefore={t('field_threshold')} onChange={onChange}
value={alertDef?.condition?.target} type="number"
onChange={(value: number | unknown): void => { />
setAlertDef({
...alertDef,
condition: {
...alertDef.condition,
op: alertDef.condition?.op || defaultCompareOp,
matchType: alertDef.condition?.matchType || defaultMatchType,
target: value as number,
},
});
}}
/>
</div>
</FormContainer> </FormContainer>
</> </>
); );

28
frontend/src/container/FormAlertRules/styles.ts
View File

@ -1,14 +1,4 @@
import { import { Button, Card, Col, Form, Input, Row, Select, Typography } from 'antd';
Button,
Card,
Col,
Form,
Input,
InputNumber,
Row,
Select,
Typography,
} from 'antd';
import styled from 'styled-components'; import styled from 'styled-components';
const { TextArea } = Input; const { TextArea } = Input;
@ -88,22 +78,6 @@ export const FormContainer = styled(Card)`
border-radius: 4px; border-radius: 4px;
`; `;
export const ThresholdInput = styled(InputNumber)`
& > div {
display: flex;
align-items: center;
& > .ant-input-number-group-addon {
width: 130px;
border: 0;
background: transparent;
}
& > .ant-input-number {
width: 50%;
margin-left: 1em;
}
}
`;
export const TextareaMedium = styled(TextArea)` export const TextareaMedium = styled(TextArea)`
width: 70%; width: 70%;
`; `;