import React , { useCallback , useEffect } from 'react' ; import { EuiFlexItem , EuiFormRow , EuiSelect } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { mlJobService } from '../../../services/job_service' ; import { getFunctionDescription , isMetricDetector } from '../../get_function_description' ; import { useToastNotificationService } from '../../../services/toast_notification_service' ; import { ML_JOB_AGGREGATION } from '../../../../../common/constants/aggregation_types' ; import type { CombinedJob } from '../../../../../common/types/anomaly_detection_jobs' ; const plotByFunctionOptions = [ { value : 'mean' , text : i18n . translate ( 'xpack.ml.timeSeriesExplorer.plotByAvgOptionLabel' , { defaultMessage : 'mean' , } ) , } , { value : 'min' , text : i18n . translate ( 'xpack.ml.timeSeriesExplorer.plotByMinOptionLabel' , { defaultMessage : 'min' , } ) , } , { value : 'max' , text : i18n . translate ( 'xpack.ml.timeSeriesExplorer.plotByMaxOptionLabel' , { defaultMessage : 'max' , } ) , } , ] ; export const PlotByFunctionControls = ( { functionDescription , setFunctionDescription , selectedDetectorIndex , selectedJobId , selectedEntities , entityControlsCount , } ) => { const toastNotificationService = useToastNotificationService ( ) ; const getFunctionDescriptionToPlot = useCallback ( async ( _selectedDetectorIndex , _selectedEntities , _selectedJobId , _selectedJob ) => { const functionToPlot = await getFunctionDescription ( { selectedDetectorIndex : _selectedDetectorIndex , selectedEntities : _selectedEntities , selectedJobId : _selectedJobId , selectedJob : _selectedJob , } , toastNotificationService ) ; setFunctionDescription ( functionToPlot ) ; } , [ setFunctionDescription , toastNotificationService ] ) ; useEffect ( ( ) => { if ( functionDescription !== undefined ) { return ; } const selectedJob = mlJobService . getJob ( selectedJobId ) ; const validEntities = entityControlsCount === 0 || ( entityControlsCount > 0 && selectedEntities !== undefined ) ; if ( validEntities && functionDescription === undefined && isMetricDetector ( selectedJob , selectedDetectorIndex ) ) { const detector = selectedJob . analysis_config . detectors [ selectedDetectorIndex ] ; if ( detector ?. function === ML_JOB_AGGREGATION . METRIC ) { getFunctionDescriptionToPlot ( selectedDetectorIndex , selectedEntities , selectedJobId , selectedJob ) ; } } } , [ setFunctionDescription , selectedDetectorIndex , selectedEntities , selectedJobId , functionDescription , entityControlsCount , ] ) ; if ( functionDescription === undefined ) return null ; return ( < EuiFlexItem grow = { false } > < EuiFormRow label = { i18n . translate ( 'xpack.ml.timeSeriesExplorer.metricPlotByOption' , { defaultMessage : 'Function' , } ) } > < EuiSelect options = { plotByFunctionOptions } value = { functionDescription } onChange = { ( e ) => setFunctionDescription ( e . target . value ) } aria - label = { i18n . translate ( 'xpack.ml.timeSeriesExplorer.metricPlotByOptionLabel' , { defaultMessage : 'Pick function to plot by (min, max, or average) if metric function' , } ) } /> < /EuiFormRow> < /EuiFlexItem>); } ;