import React , { useCallback , useMemo } from 'react' ; import { useKibana } from '../../../../../../../src/plugins/kibana_react/public' ; import { AlertType , APM_SERVER_FEATURE_ID , } from '../../../../common/alert_types' ; import { getInitialAlertValues } from '../get_initial_alert_values' ; import { ApmPluginStartDeps } from '../../../plugin' ; import { useServiceName } from '../../../hooks/use_service_name' ; import { useApmParams } from '../../../hooks/use_apm_params' ; import { AlertMetadata } from '../helper' ; import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values' ; import { useTimeRange } from '../../../hooks/use_time_range' ; interface Props { addFlyoutVisible : boolean ; setAddFlyoutVisibility : React . Dispatch < React . SetStateAction < boolean > > ; alertType : AlertType | null ; } export function AlertingFlyout ( props ) { const { addFlyoutVisible , setAddFlyoutVisibility , alertType } = props ; const serviceName = useServiceName ( ) ; const { query } = useApmParams ( '/*' ) ; const rangeFrom = 'rangeFrom' in query ? query . rangeFrom : undefined ; const rangeTo = 'rangeTo' in query ? query . rangeTo : undefined ; const { start , end } = useTimeRange ( { rangeFrom , rangeTo , optional : true } ) ; const environment = 'environment' in query ? query . environment : ENVIRONMENT_ALL . value ; const transactionType = 'transactionType' in query ? query . transactionType : undefined ; const { services } = useKibana < ApmPluginStartDeps > ( ) ; const initialValues = getInitialAlertValues ( alertType , serviceName ) ; const onCloseAddFlyout = useCallback ( ( ) => setAddFlyoutVisibility ( false ) , [ setAddFlyoutVisibility ] ) ; const addAlertFlyout = useMemo ( ( ) => alertType && services . triggersActionsUi . getAddAlertFlyout ( { consumer : APM_SERVER_FEATURE_ID , onClose : onCloseAddFlyout , alertTypeId : alertType , canChangeTrigger : false , initialValues , metadata : { environment , serviceName , ... ( alertType === AlertType . ErrorCount ? { } : { transactionType } ) , start , end , } as AlertMetadata , } ) , [ alertType , environment , onCloseAddFlyout , services . triggersActionsUi , serviceName , transactionType , environment , start , end , ] ) ; return < > { addFlyoutVisible && addAlertFlyout } < />; }