import { EuiFlexGrid , EuiFlexItem , EuiSpacer } from '@elastic/eui' ; import React , { useEffect } from 'react' ; interface Props { setRuleParams : ( key : string , value : any ) => void ; setRuleProperty : ( key : string , value : any ) => void ; defaults : Record < string , any > ; fields : React . ReactNode [ ] ; chartPreview ? : React . ReactNode ; } export function ServiceAlertTrigger ( props ) { const { fields , setRuleParams , defaults , chartPreview } = props ; const params = { ... defaults , } ; useEffect ( ( ) => { Object . keys ( params ) . forEach ( ( key ) => { setRuleParams ( key , params [ key ] ) ; } ) ; } , [ ] ) ; return ( < > < EuiSpacer size = "l" / > < EuiFlexGrid gutterSize = "l" direction = "row" columns = { 2 } > { fields . map ( ( field , index ) => ( < EuiFlexItem grow = { false } key = { index } > { field } < /EuiFlexItem>))} < /EuiFlexGrid> { chartPreview } < EuiSpacer size = "m" / > < />); }