import React , { FC , useContext , useState , useEffect } from 'react' ; import { EuiComboBox , EuiComboBoxOptionOption , EuiFormRow } from '@elastic/eui' ; import { JobCreatorContext } from '../../../job_creator_context' ; import { Field , Aggregation , AggFieldPair } from '../../../../../../../../../common/types/fields' ; export type Label = string ; export interface DropDownLabel { label : Label ; agg : Aggregation ; field : Field ; } export interface DropDownOption { label : Label ; options : DropDownLabel [ ] ; } export type DropDownProps = DropDownLabel [ ] | EuiComboBoxOptionOption [ ] ; interface Props { fields : Field [ ] ; changeHandler ( d ) : void ; selectedOptions : EuiComboBoxOptionOption [ ] ; removeOptions : AggFieldPair [ ] ; } export const AggSelect = ( { fields , changeHandler , selectedOptions , removeOptions } ) => { const { jobValidator , jobValidatorUpdated } = useContext ( JobCreatorContext ) ; const [ validation , setValidation ] = useState ( jobValidator . duplicateDetectors ) ; const removeLabels = removeOptions . map ( createLabel ) ; const options = fields . map ( ( f ) => { const aggOption = { label : f . name , options : [ ] } ; if ( typeof f . aggs !== 'undefined' ) { aggOption . options = f . aggs . filter ( ( a ) => a . dslName !== null ) . map ( ( a ) => ( { label : `${ a . title }(${ f . name })` , agg : a , field : f , } as DropDownLabel ) ) . filter ( ( o ) => removeLabels . includes ( o . label ) === false ) ; } return aggOption ; } ) ; useEffect ( ( ) => { setValidation ( jobValidator . duplicateDetectors ) ; } , [ jobValidatorUpdated ] ) ; return ( < EuiFormRow error = { validation . message } isInvalid = { validation . valid === false } data - test - subj = "mlJobWizardAggSelection" > < EuiComboBox singleSelection = { { asPlainText : true } } options = { options } selectedOptions = { selectedOptions } onChange = { changeHandler } isClearable = { false } isInvalid = { validation . valid === false } / > < /EuiFormRow>); } ; export function createLabel ( pair ) { return `${ pair . agg . title }(${ pair . field . name })` ; }