Preserve state in latencymodalform

This commit is contained in:
“himanshu” 2021-01-23 10:05:12 +05:30
parent 5ed648bf0e
commit e98e3be33e
2 changed files with 15 additions and 13 deletions

View File

@ -3,20 +3,19 @@ import { Modal, Form, InputNumber, Col, Row } from "antd";
import { Store } from "antd/lib/form/interface"; import { Store } from "antd/lib/form/interface";
interface LatencyModalFormProps { interface LatencyModalFormProps {
visible: boolean;
onCreate: (values: Store) => void; //Store is defined in antd forms library onCreate: (values: Store) => void; //Store is defined in antd forms library
onCancel: () => void; onCancel: () => void;
latencyFilterValues: {min: string, max: string}
} }
const LatencyModalForm: React.FC<LatencyModalFormProps> = ({ const LatencyModalForm: React.FC<LatencyModalFormProps> = ({
visible,
onCreate, onCreate,
onCancel, onCancel,latencyFilterValues
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
return ( return (
<Modal <Modal
visible={visible} visible={true}
title="Chose min and max values of Latency" title="Chose min and max values of Latency"
okText="Apply" okText="Apply"
cancelText="Cancel" cancelText="Cancel"
@ -37,7 +36,7 @@ const LatencyModalForm: React.FC<LatencyModalFormProps> = ({
form={form} form={form}
layout="horizontal" layout="horizontal"
name="form_in_modal" name="form_in_modal"
initialValues={{ min: "100", max: "500" }} initialValues={latencyFilterValues}
> >
<Row> <Row>
{/* <Input.Group compact> */} {/* <Input.Group compact> */}

View File

@ -120,9 +120,9 @@ const _TraceFilter = (props: TraceFilterProps) => {
const [loading] = useState(false); const [loading] = useState(false);
const [tagKeyValueApplied, setTagKeyValueApplied] = useState([""]); const [tagKeyValueApplied, setTagKeyValueApplied] = useState([""]);
const [latencyFilterValues, setLatencyFilterValues] = useState({ const [latencyFilterValues, setLatencyFilterValues] = useState<{min: string, max: string}>({
min: "", min: "100",
max: "", max: "500",
}); });
const [form] = Form.useForm(); const [form] = Form.useForm();
@ -158,13 +158,16 @@ const _TraceFilter = (props: TraceFilterProps) => {
const onLatencyModalApply = (values: Store) => { const onLatencyModalApply = (values: Store) => {
setModalVisible(false); setModalVisible(false);
const { min, max}= values
props.updateTraceFilters({ props.updateTraceFilters({
...props.traceFilters, ...props.traceFilters,
latency: { latency: {
min: values.min ? (parseInt(values.min) * 1000000).toString() : "", min: min ? (parseInt(min) * 1000000).toString() : "",
max: values.max ? (parseInt(values.max) * 1000000).toString() : "", max: max ? (parseInt(max) * 1000000).toString() : "",
}, },
}); });
setLatencyFilterValues({min, max})
}; };
const onTagFormSubmit = (values: any) => { const onTagFormSubmit = (values: any) => {
@ -379,13 +382,13 @@ const _TraceFilter = (props: TraceFilterProps) => {
</FormItem> </FormItem>
</Form> </Form>
<LatencyModalForm {modalVisible && <LatencyModalForm
visible={modalVisible}
onCreate={onLatencyModalApply} onCreate={onLatencyModalApply}
latencyFilterValues={latencyFilterValues}
onCancel={() => { onCancel={() => {
setModalVisible(false); setModalVisible(false);
}} }}
/> />}
</div> </div>
); );
}; };