import React , { useState , useEffect } from 'react' ; import { EuiLink , EuiIconTip , EuiText , EuiPopoverFooter , EuiButton , EuiSpacer } from '@elastic/eui' ; import { FormattedMessage } from '@osd/i18n/react' ; import { DiscoverFieldBucket } from './discover_field_bucket' ; import { getWarnings } from './lib/get_warnings' ; import { triggerVisualizeActions , isFieldVisualizable , getVisualizeHref , } from './lib/visualize_trigger_utils' ; import { Bucket , FieldDetails } from './types' ; import { IndexPatternField , IndexPattern } from '../../../../../data/public' ; import './discover_field_details.scss' ; interface DiscoverFieldDetailsProps { field : IndexPatternField ; indexPattern : IndexPattern ; details : FieldDetails ; onAddFilter : ( field : IndexPatternField | string , value : string , type : '+' | '-' ) => void ; } export function DiscoverFieldDetails ( { field , indexPattern , details , onAddFilter , } ) { const warnings = getWarnings ( field ) ; const [ showVisualizeLink , setShowVisualizeLink ] = useState < boolean > ( false ) ; const [ visualizeLink , setVisualizeLink ] = useState < string > ( '' ) ; useEffect ( ( ) => { isFieldVisualizable ( field , indexPattern . id , details . columns ) . then ( ( flag ) => { setShowVisualizeLink ( flag ) ; getVisualizeHref ( field , indexPattern . id , details . columns ) . then ( ( uri ) => { if ( uri ) setVisualizeLink ( uri ) ; } , ( ) => { setVisualizeLink ( '' ) ; } ) ; } , ( ) => { setShowVisualizeLink ( false ) ; } ) ; } , [ field , indexPattern . id , details . columns ] ) ; const handleVisualizeLinkClick = ( event ) => { event . preventDefault ( ) ; triggerVisualizeActions ( field , indexPattern . id , details . columns ) ; } ; return ( < > < div className = "dscFieldDetails" > { details . error && < EuiText size = "xs" > { details . error } < /EuiText>} { ! details . error && ( < div style = { { marginTop : '4px' } } > { details . buckets . map ( ( bucket , idx ) => ( < DiscoverFieldBucket key = { `bucket${ idx }` } bucket = { bucket } field = { field } onAddFilter = { onAddFilter } / > ) ) } < /div>)} { showVisualizeLink && ( < > < EuiSpacer size = "xs" / > { } < EuiButton onClick = { ( e ) => handleVisualizeLinkClick ( e ) } href = { visualizeLink } size = "s" className = "dscFieldDetails__visualizeBtn" data - test - subj = { `fieldVisualize-${ field . name }` } > < FormattedMessage id = "discover.fieldChooser.detailViews.visualizeLinkText" defaultMessage = "Visualize" / > < /EuiButton> { warnings . length > 0 && ( < EuiIconTip type = "alert" color = "warning" content = { warnings . join ( ' ' ) } / > ) } < />)} < /div> { ! details . error && ( < EuiPopoverFooter > < EuiText size = "xs" textAlign = "center" > { ! indexPattern . metaFields . includes ( field . name ) && ! field . scripted ? ( < EuiLink onClick = { ( ) => onAddFilter ( '_exists_' , field . name , '+' ) } > < FormattedMessage id = "discover.fieldChooser.detailViews.existsText" defaultMessage = "Exists in" / > { ' ' } { details . exists } < /EuiLink>) : (<span>{details.exists}</span > ) } { ' ' } / {details.total}{' '} < FormattedMessage id = "discover.fieldChooser.detailViews.recordsText" defaultMessage = "records" / > < /EuiText> < /EuiPopoverFooter>)} < />); }