import React , { useMemo , useCallback } from 'react' ; import { findLast } from 'lodash' ; import { EuiSpacer } from '@elastic/eui' ; import { AggGroupNames , IAggConfig , IMetricAggType , search , TimeRange , } from '../../../../data/public' ; import { DefaultEditorAggGroup } from '../agg_group' ; import { EditorAction , addNewAgg , removeAgg , reorderAggs , setAggParamValue , changeAggType , toggleEnabledAgg , } from './state' ; import { AddSchema , ReorderAggs , DefaultEditorAggCommonProps } from '../agg_common_props' ; import { ISchemas } from '../../schemas' ; import { EditorVisState } from './state/reducers' ; export interface DefaultEditorDataTabProps { dispatch : React . Dispatch < EditorAction > ; formIsTouched : boolean ; isTabSelected : boolean ; metricAggs : IAggConfig [ ] ; schemas : ISchemas ; state : EditorVisState ; setTouched ( isTouched ) : void ; setValidity ( modelName , value ) : void ; setStateValue : DefaultEditorAggCommonProps [ 'setStateParamValue' ] ; timeRange : TimeRange ; } function DefaultEditorDataTab ( { dispatch , formIsTouched , metricAggs , schemas , state , setTouched , setValidity , setStateValue , timeRange , } ) { const lastParentPipelineAgg = useMemo ( ( ) => findLast ( metricAggs , ( { type } ) => type . subtype === search . aggs . parentPipelineType ) , [ metricAggs ] ) ; const lastParentPipelineAggTitle = lastParentPipelineAgg && ( lastParentPipelineAgg as IAggConfig ) . type . title ; const addSchema = useCallback ( ( schema ) => dispatch ( addNewAgg ( schema ) ) , [ dispatch ] ) ; const onAggRemove = useCallback ( ( aggId ) => dispatch ( removeAgg ( aggId , schemas . all || [ ] ) ) , [ dispatch , schemas ] ) ; const onReorderAggs = useCallback ( ( ... props ) => dispatch ( reorderAggs ( ... props ) ) , [ dispatch , ] ) ; const onAggParamValueChange = useCallback ( ( ... props ) => dispatch ( setAggParamValue ( ... props ) ) , [ dispatch ] ) ; const onAggTypeChange = useCallback ( ( ... props ) => dispatch ( changeAggType ( ... props ) ) , [ dispatch ] ) ; const onToggleEnableAgg = useCallback ( ( ... props ) => dispatch ( toggleEnabledAgg ( ... props ) ) , [ dispatch ] ) ; const commonProps = { addSchema , formIsTouched , lastParentPipelineAggTitle , metricAggs , state , reorderAggs : onReorderAggs , setAggParamValue : onAggParamValueChange , setStateParamValue : setStateValue , onAggTypeChange , onToggleEnableAgg , setValidity , setTouched , removeAgg : onAggRemove , } as any ; return ( < > < DefaultEditorAggGroup groupName = { AggGroupNames . Metrics } schemas = { schemas . metrics } { ... commonProps } /> < EuiSpacer size = "s" / > < DefaultEditorAggGroup groupName = { AggGroupNames . Buckets } schemas = { schemas . buckets } timeRange = { timeRange } { ... commonProps } /> < />); } export { DefaultEditorDataTab } ;