import { EuiContextMenu , EuiContextMenuPanelDescriptor , EuiHeaderLink , EuiPopover , } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import React , { useState } from 'react' ; import { IBasePath } from '../../../../../../../src/core/public' ; import { AlertType } from '../../../../common/alert_types' ; import { AlertingFlyout } from '../../alerting/alerting_flyout' ; const alertLabel = i18n . translate ( 'xpack.apm.home.alertsMenu.alerts' , { defaultMessage : 'Alerts and rules' , } ) ; const transactionDurationLabel = i18n . translate ( 'xpack.apm.home.alertsMenu.transactionDuration' , { defaultMessage : 'Latency' } ) ; const transactionErrorRateLabel = i18n . translate ( 'xpack.apm.home.alertsMenu.transactionErrorRate' , { defaultMessage : 'Failed transaction rate' } ) ; const errorCountLabel = i18n . translate ( 'xpack.apm.home.alertsMenu.errorCount' , { defaultMessage : 'Error count' , } ) ; const createThresholdAlertLabel = i18n . translate ( 'xpack.apm.home.alertsMenu.createThresholdAlert' , { defaultMessage : 'Create threshold rule' } ) ; const createAnomalyAlertAlertLabel = i18n . translate ( 'xpack.apm.home.alertsMenu.createAnomalyAlert' , { defaultMessage : 'Create anomaly rule' } ) ; const CREATE_TRANSACTION_DURATION_ALERT_PANEL_ID = 'create_transaction_duration_panel' ; const CREATE_TRANSACTION_ERROR_RATE_ALERT_PANEL_ID = 'create_transaction_error_rate_panel' ; const CREATE_ERROR_COUNT_ALERT_PANEL_ID = 'create_error_count_panel' ; interface Props { basePath : IBasePath ; canReadAlerts : boolean ; canSaveAlerts : boolean ; canReadAnomalies : boolean ; includeTransactionDuration : boolean ; } export function AlertingPopoverAndFlyout ( { basePath , canSaveAlerts , canReadAlerts , canReadAnomalies , includeTransactionDuration , } ) { const [ popoverOpen , setPopoverOpen ] = useState ( false ) ; const [ alertType , setAlertType ] = useState < AlertType | null > ( null ) ; const button = ( < EuiHeaderLink color = "text" iconType = "arrowDown" iconSide = "right" onClick = { ( ) => setPopoverOpen ( ( prevState ) => ! prevState ) } > { alertLabel } < /EuiHeaderLink>); const panels = [ { id : 0 , title : alertLabel , items : [ ... ( canSaveAlerts ? [ { name : transactionDurationLabel , panel : CREATE_TRANSACTION_DURATION_ALERT_PANEL_ID , } , { name : transactionErrorRateLabel , panel : CREATE_TRANSACTION_ERROR_RATE_ALERT_PANEL_ID , } , { name : errorCountLabel , panel : CREATE_ERROR_COUNT_ALERT_PANEL_ID , } , ] : [ ] ) , ... ( canReadAlerts ? [ { name : i18n . translate ( 'xpack.apm.home.alertsMenu.viewActiveAlerts' , { defaultMessage : 'Manage rules' } ) , href : basePath . prepend ( '/app/management/insightsAndAlerting/triggersActions/alerts' ) , icon : 'tableOfContents' , } , ] : [ ] ) , ] , } , { id : CREATE_TRANSACTION_DURATION_ALERT_PANEL_ID , title : transactionDurationLabel , items : [ ... ( includeTransactionDuration ? [ { name : createThresholdAlertLabel , onClick : ( ) => { setAlertType ( AlertType . TransactionDuration ) ; setPopoverOpen ( false ) ; } , } , ] : [ ] ) , ... ( canReadAnomalies ? [ { name : createAnomalyAlertAlertLabel , onClick : ( ) => { setAlertType ( AlertType . TransactionDurationAnomaly ) ; setPopoverOpen ( false ) ; } , } , ] : [ ] ) , ] , } , { id : CREATE_TRANSACTION_ERROR_RATE_ALERT_PANEL_ID , title : transactionErrorRateLabel , items : [ { name : createThresholdAlertLabel , onClick : ( ) => { setAlertType ( AlertType . TransactionErrorRate ) ; setPopoverOpen ( false ) ; } , } , ] , } , { id : CREATE_ERROR_COUNT_ALERT_PANEL_ID , title : errorCountLabel , items : [ { name : createThresholdAlertLabel , onClick : ( ) => { setAlertType ( AlertType . ErrorCount ) ; setPopoverOpen ( false ) ; } , } , ] , } , ] ; return ( < > < EuiPopover id = "integrations-menu" button = { button } isOpen = { popoverOpen } closePopover = { ( ) => setPopoverOpen ( false ) } panelPaddingSize = "none" anchorPosition = "downRight" > < EuiContextMenu initialPanelId = { 0 } panels = { panels } / > < /EuiPopover> < AlertingFlyout alertType = { alertType } addFlyoutVisible = { ! ! alertType } setAddFlyoutVisibility = { ( visible ) => { if ( ! visible ) { setAlertType ( null ) ; } } } /> < />); }