import { Story } from '@storybook/react' ; import React , { ComponentType , useState } from 'react' ; import { RuleParams , TransactionDurationAlertTrigger } from '.' ; import { CoreStart } from '../../../../../../../src/core/public' ; import { createKibanaReactContext } from '../../../../../../../src/plugins/kibana_react/public' ; const KibanaReactContext = createKibanaReactContext ( { notifications : { toasts : { add : ( ) => { } } } , } as unknown as Partial < CoreStart > ) ; export default { title : 'alerting/TransactionDurationAlertTrigger' , component : TransactionDurationAlertTrigger , decorators : [ ( StoryComponent ) => { return ( < KibanaReactContext . Provider > < div style = { { width : 400 } } > < StoryComponent /> < /div> < /KibanaReactContext.Provider>); } , ] , } ; export const Example = ( ) => { const [ params , setParams ] = useState < RuleParams > ( { aggregationType : 'avg' as const , environment : 'testEnvironment' , serviceName : 'testServiceName' , threshold : 1500 , transactionType : 'testTransactionType' , windowSize : 5 , windowUnit : 'm' , } ) ; function setRuleParams ( property , value ) { setParams ( { ... params , [ property ] : value } ) ; } return ( < TransactionDurationAlertTrigger ruleParams = { params } setRuleParams = { setRuleParams } setRuleProperty = { ( ) => { } } />); } ;