import React , { useState , useEffect , Fragment } from 'react' ; import { EuiFlexGroup , EuiFlexItem , EuiPopover , EuiFieldNumber , EuiPopoverTitle , EuiSelect , EuiCallOut , EuiExpression , EuiTextColor , } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { flatten } from 'lodash' ; import { ALERTING_EXAMPLE_APP_ID , Craft , Operator } from '../../common/constants' ; import { SanitizedAlert } from '../../../../plugins/alerting/common' ; import { PluginSetupContract as AlertingSetup } from '../../../../plugins/alerting/public' ; import { RuleTypeModel } from '../../../../plugins/triggers_actions_ui/public' ; export function registerNavigation ( alerting ) { alerting . registerNavigation ( ALERTING_EXAMPLE_APP_ID , 'example.people-in-space' , ( alert ) => `/astros/${ alert . id }` ) ; } interface PeopleinSpaceParamsProps { ruleParams : { outerSpaceCapacity ? : number ; craft ? : string ; op ? : string ; } ; setRuleParams : ( property : string , value : any ) => void ; errors : { [ key ] : string [ ] ; } ; } function isValueInEnum ( enumeratin , value ) { return ! ! Object . values ( enumeratin ) . find ( ( enumVal ) => enumVal === value ) ; } export function getAlertType ( ) { return { id : 'example.people-in-space' , description : 'Alert when people are in space right now' , iconClass : 'globe' , documentationUrl : null , ruleParamsExpression : PeopleinSpaceExpression , validate : ( alertParams ) => { const { outerSpaceCapacity , craft , op } = alertParams ; const validationResult = { errors : { outerSpaceCapacity : new Array < string > ( ) , craft : new Array < string > ( ) , } , } ; if ( ! isValueInEnum ( Craft , craft ) ) { validationResult . errors . craft . push ( i18n . translate ( 'AlertingExample.addAlert.error.invalidCraft' , { defaultMessage : 'You must choose one of the following Craft: {crafts}' , values : { crafts : Object . values ( Craft ) . join ( ', ' ) , } , } ) ) ; } if ( ! ( typeof outerSpaceCapacity === 'number' && outerSpaceCapacity >= 0 ) ) { validationResult . errors . outerSpaceCapacity . push ( i18n . translate ( 'AlertingExample.addAlert.error.invalidOuterSpaceCapacity' , { defaultMessage : 'outerSpaceCapacity must be a number greater than or equal to zero.' , } ) ) ; } if ( ! isValueInEnum ( Operator , op ) ) { validationResult . errors . outerSpaceCapacity . push ( i18n . translate ( 'AlertingExample.addAlert.error.invalidCraft' , { defaultMessage : 'You must choose one of the following Operator: {crafts}' , values : { crafts : Object . values ( Operator ) . join ( ', ' ) , } , } ) ) ; } return validationResult ; } , requiresAppContext : false , } ; } export const PeopleinSpaceExpression = ( { ruleParams , setRuleParams , errors , } ) => { const { outerSpaceCapacity = 0 , craft = Craft . OuterSpace , op = Operator . AreAbove } = ruleParams ; useEffect ( ( ) => { if ( outerSpaceCapacity !== ruleParams . outerSpaceCapacity ) { setRuleParams ( 'outerSpaceCapacity' , outerSpaceCapacity ) ; } if ( craft !== ruleParams . craft ) { setRuleParams ( 'craft' , craft ) ; } if ( op !== ruleParams . op ) { setRuleParams ( 'op' , op ) ; } } , [ ruleParams , craft , op , outerSpaceCapacity , setRuleParams ] ) ; const [ craftTrigger , setCraftTrigger ] = useState < { craft : string ; isOpen : boolean ; } > ( { craft , isOpen : false , } ) ; const [ outerSpaceCapacityTrigger , setOuterSpaceCapacity ] = useState < { outerSpaceCapacity : number ; op : string ; isOpen : boolean ; } > ( { outerSpaceCapacity , op , isOpen : false , } ) ; const errorsCallout = flatten ( Object . entries ( errors ) . map ( ( [ field , errs ] , fieldIndex ) => errs . map ( ( e , index ) => ( < p key = { `astros-error-${ fieldIndex }-${ index }` } > < EuiTextColor color = "accent" > { field } : < /EuiTextColor>`: ${errs}` < /p>)))); return ( < Fragment > { errorsCallout . length ? ( < EuiCallOut title = "Sorry, there was an error" color = "danger" iconType = "alert" > { errorsCallout } < /EuiCallOut>) : (<Fragment / > ) } < EuiFlexGroup gutterSize = "s" > < EuiFlexItem grow = { false } > < EuiPopover id = "craft" button = { < EuiExpression description = "When the People in" value = { craftTrigger . craft } isActive = { craftTrigger . isOpen } onClick = { ( ) => { setCraftTrigger ( { ... craftTrigger , isOpen : true , } ) ; } } />} isOpen={craftTrigger.isOpen} closePopover={() => { setCraftTrigger ( { ... craftTrigger , isOpen : false , } ) ; } } ownFocus panelPaddingSize = "s" anchorPosition = "downLeft" > < div style = { { zIndex : 200 } } > < EuiPopoverTitle > When the People in < /EuiPopoverTitle> < EuiSelect compressed value = { craftTrigger . craft } onChange = { ( event ) => { setRuleParams ( 'craft' , event . target . value ) ; setCraftTrigger ( { craft : event . target . value , isOpen : false , } ) ; } } options = { [ { value : Craft . OuterSpace , text : 'Outer Space' } , { value : Craft . ISS , text : 'the International Space Station' } , ] } / > < /div> < /EuiPopover> < /EuiFlexItem> < EuiFlexItem grow = { false } > < EuiPopover id = "outerSpaceCapacity" button = { < EuiExpression description = { outerSpaceCapacityTrigger . op } value = { outerSpaceCapacityTrigger . outerSpaceCapacity } isActive = { outerSpaceCapacityTrigger . isOpen } onClick = { ( ) => { setOuterSpaceCapacity ( { ... outerSpaceCapacityTrigger , isOpen : true , } ) ; } } />} isOpen={outerSpaceCapacityTrigger.isOpen} closePopover={() => { setOuterSpaceCapacity ( { ... outerSpaceCapacityTrigger , isOpen : false , } ) ; } } ownFocus panelPaddingSize = "s" anchorPosition = "downLeft" > < div style = { { zIndex : 200 } } > < EuiFlexGroup gutterSize = "s" > < EuiFlexItem grow = { false } style = { { width : 150 } } > < EuiSelect compressed value = { outerSpaceCapacityTrigger . op } onChange = { ( event ) => { setRuleParams ( 'op' , event . target . value ) ; setOuterSpaceCapacity ( { ... outerSpaceCapacityTrigger , op : event . target . value , isOpen : false , } ) ; } } options = { [ { value : Operator . AreAbove , text : 'Are above' } , { value : Operator . AreBelow , text : 'Are below' } , { value : Operator . AreExactly , text : 'Are exactly' } , ] } / > < /EuiFlexItem> < EuiFlexItem grow = { false } style = { { width : 100 } } > < EuiFieldNumber compressed value = { outerSpaceCapacityTrigger . outerSpaceCapacity } onChange = { ( event ) => { setRuleParams ( 'outerSpaceCapacity' , event . target . valueAsNumber ) ; setOuterSpaceCapacity ( { ... outerSpaceCapacityTrigger , outerSpaceCapacity : event . target . valueAsNumber , isOpen : false , } ) ; } } /> < /EuiFlexItem> < /EuiFlexGroup> < /div> < /EuiPopover> < /EuiFlexItem> < /EuiFlexGroup> < /Fragment>); } ;