GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 06:26:03 +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 {
AlertDef,
@ -8,12 +8,7 @@ import {
} from 'types/api/alerts/def';
import { EQueryType } from 'types/common/dashboard';
import {
FormContainer,
InlineSelect,
StepHeading,
ThresholdInput,
} from './styles';
import { FormContainer, InlineSelect, StepHeading } from './styles';
const { Option } = Select;
const FormItem = Form.Item;
@ -126,6 +121,18 @@ function RuleOptions({
</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 (
<>
<StepHeading>{t('alert_form_step2')}</StepHeading>
@ -133,24 +140,12 @@ function RuleOptions({
{queryCategory === EQueryType.PROM
? renderPromRuleOptions()
: renderThresholdRuleOpts()}
<div style={{ display: 'flex', alignItems: 'center' }}>
<ThresholdInput
controls={false}
addonBefore={t('field_threshold')}
value={alertDef?.condition?.target}
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>
<InputNumber
addonBefore={t('field_threshold')}
value={alertDef?.condition?.target}
onChange={onChange}
type="number"
/>
</FormContainer>
</>
);

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

@ -1,14 +1,4 @@
import {
Button,
Card,
Col,
Form,
Input,
InputNumber,
Row,
Select,
Typography,
} from 'antd';
import { Button, Card, Col, Form, Input, Row, Select, Typography } from 'antd';
import styled from 'styled-components';
const { TextArea } = Input;
@ -88,22 +78,6 @@ export const FormContainer = styled(Card)`
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)`
width: 70%;
`;