import { reduce } from 'lodash' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { EuiFlexGroup , EuiFlexItem , EuiTextColor , EuiComboBoxOptionOption } from '@elastic/eui' ; import React , { useCallback , useMemo } from 'react' ; import styled from 'styled-components' ; import { GetAgentPoliciesResponseItem } from '../../../../fleet/common' ; import { ComboBoxField , FieldHook } from '../../shared_imports' ; const AgentPolicyNameColumn = styled ( EuiFlexItem ) `
  max-width: ${ ( props ) => `${ ( ( props . grow as number ) / 9 ) * 100 }%` };
  overflow: hidden;
` ; const AgentPolicyDescriptionColumn = styled ( EuiFlexItem ) `
  max-width: ${ ( props ) => `${ ( ( props . grow as number ) / 9 ) * 100 }%` };
  overflow: hidden;
` ; type ComboBoxFieldProps = Parameters < typeof ComboBoxField > [ 0 ] ; type PolicyIdComboBoxFieldProps = Pick < ComboBoxFieldProps , 'euiFieldProps' > & { field : FieldHook < string [ ] > ; agentPoliciesById : Record < string , GetAgentPoliciesResponseItem > ; } ; const PolicyIdComboBoxFieldComponent = ( { euiFieldProps , field , agentPoliciesById , } ) => { const { value , setValue } = field ; const options = useMemo ( ( ) => Object . entries ( agentPoliciesById ) . map ( ( [ agentPolicyId , agentPolicy ] ) => ( { key : agentPolicyId , label : agentPolicy . name , } ) ) , [ agentPoliciesById ] ) ; const selectedOptions = useMemo ( ( ) => value . map ( ( policyId ) => ( { key : policyId , label : agentPoliciesById [ policyId ] ?. name ?? policyId , } ) ) , [ agentPoliciesById , value ] ) ; const onChange = useCallback ( ( newOptions ) => { setValue ( newOptions . map ( ( option ) => option . key || option . label ) ) ; } , [ setValue ] ) ; const renderOption = useCallback ( ( option ) => ( < EuiFlexGroup > < AgentPolicyNameColumn grow = { 2 } > < span className = "eui-textTruncate" > { ( option . key && agentPoliciesById [ option . key ] ?. name ) ?? option . label } < /span> < /AgentPolicyNameColumn> < AgentPolicyDescriptionColumn grow = { 5 } > < EuiTextColor className = "eui-textTruncate" color = "subdued" > { ( option . key && agentPoliciesById [ option . key ] . description ) ?? '' } < /EuiTextColor> < /AgentPolicyDescriptionColumn> < EuiFlexItem grow = { 2 } className = "eui-textRight" > < EuiTextColor color = "subdued" > < FormattedMessage id = "xpack.osquery.createScheduledQuery.agentPolicyAgentsCountText" defaultMessage = "{count, plural, one {# agent} other {# agents}} enrolled" values = { { count : ( option . key && agentPoliciesById [ option . key ] ?. agents ) ?? 0 , } } /> < /EuiTextColor> < /EuiFlexItem> < /EuiFlexGroup>), [agentPoliciesById]); const helpText = useMemo ( ( ) => { if ( ! value ?. length || ! value [ 0 ] . length || ! agentPoliciesById ) { return ; } const agentCount = reduce ( value , ( acc , policyId ) => { const agentPolicy = agentPoliciesById && agentPoliciesById [ policyId ] ; return acc + ( agentPolicy ?. agents ?? 0 ) ; } , 0 ) ; return ( < FormattedMessage id = "xpack.osquery.createScheduledQuery.agentPolicyAgentsCountText" defaultMessage = "{count, plural, one {# agent} other {# agents}} enrolled" values = { { count : agentCount , } } />); } , [ agentPoliciesById , value ] ) ; const mergedEuiFieldProps = useMemo ( ( ) => ( { onCreateOption : null , noSuggestions : false , isClearable : true , selectedOptions , options , renderOption , onChange , ... euiFieldProps , } ) , [ euiFieldProps , onChange , options , renderOption , selectedOptions ] ) ; return ( < ComboBoxField field = { field as FieldHook } fullWidth = { true } helpText = { helpText } euiFieldProps = { mergedEuiFieldProps } / > ) ; } ; export const PolicyIdComboBoxField = React . memo ( PolicyIdComboBoxFieldComponent ) ;