import React , { useMemo , useState , useCallback } from 'react' ; import { EuiIcon , EuiFlexItem , EuiCard , EuiFlexGroup } from '@elastic/eui' ; import { AlertingExampleComponentParams } from '../application' ; import { ALERTING_EXAMPLE_APP_ID } from '../../common/constants' ; export const CreateAlert = ( { triggersActionsUi , } ) => { const [ alertFlyoutVisible , setAlertFlyoutVisibility ] = useState < boolean > ( false ) ; const onCloseAlertFlyout = useCallback ( ( ) => setAlertFlyoutVisibility ( false ) , [ setAlertFlyoutVisibility ] ) ; const AddAlertFlyout = useMemo ( ( ) => triggersActionsUi . getAddAlertFlyout ( { consumer : ALERTING_EXAMPLE_APP_ID , onClose : onCloseAlertFlyout , } ) , [ onCloseAlertFlyout ] ) ; return ( < EuiFlexGroup > < EuiFlexItem grow = { false } > < EuiCard icon = { < EuiIcon size = "xxl" type = { `bell` } />} title={`Create Rule`} description="Create a new Rule based on one of our example Rule Types ." onClick={() => setAlertFlyoutVisibility(true)}/ > < /EuiFlexItem> < EuiFlexItem > { alertFlyoutVisible && AddAlertFlyout } < /EuiFlexItem> < /EuiFlexGroup>); } ;