import { i18n } from '@kbn/i18n' ; import React , { useCallback } from 'react' ; import { EuiPage , EuiPageBody , EuiPageContent , EuiPageContentBody , EuiFlexGroup , EuiFlexItem , EuiSpacer , } from '@elastic/eui' ; import { SearchProfilerTabs , ProfileTree , HighlightDetailsFlyout , LicenseWarningNotice , ProfileLoadingPlaceholder , EmptyTreePlaceHolder , ProfileQueryEditor , } from './components' ; import { useAppContext , useProfilerActionContext , useProfilerReadContext } from './contexts' ; import { hasAggregations , hasSearch } from './lib' ; import { Targets } from './types' ; export const App = ( ) => { const { getLicenseStatus , notifications } = useAppContext ( ) ; const { activeTab , currentResponse , highlightDetails , pristine , profiling } = useProfilerReadContext ( ) ; const dispatch = useProfilerActionContext ( ) ; const handleProfileTreeError = ( e ) => { notifications . addError ( e , { title : i18n . translate ( 'xpack.searchProfiler.profileTreeErrorRenderTitle' , { defaultMessage : 'Profile data cannot be parsed.' , } ) , } ) ; } ; const setActiveTab = useCallback ( ( target ) => dispatch ( { type : 'setActiveTab' , value : target } ) , [ dispatch ] ) ; const onHighlight = useCallback ( ( value ) => dispatch ( { type : 'setHighlightDetails' , value } ) , [ dispatch ] ) ; const renderLicenseWarning = ( ) => { return ! getLicenseStatus ( ) . valid ? ( < > < LicenseWarningNotice /> < EuiSpacer size = "s" / > < />) : null; } ; const renderProfileTreeArea = ( ) => { if ( profiling ) { return < ProfileLoadingPlaceholder />; } if ( activeTab ) { return ( < ProfileTree onDataInitError = { handleProfileTreeError } onHighlight = { onHighlight } target = { activeTab } data = { currentResponse } / > ) ; } if ( getLicenseStatus ( ) . valid && pristine ) { return < EmptyTreePlaceHolder />; } return null ; } ; return ( < > < EuiPage className = "prfDevTool__page appRoot" > < EuiPageBody className = "prfDevTool__page__pageBody" > { renderLicenseWarning ( ) } < EuiPageContent className = "prfDevTool__page__pageBodyContent" > < EuiPageContentBody className = "prfDevTool__page__pageBodyContentBody" > < EuiFlexGroup responsive = { false } gutterSize = "s" direction = "row" className = "prfDevTool__page__bodyGroup" > < EuiFlexItem > < ProfileQueryEditor /> < /EuiFlexItem> < EuiFlexItem grow = { 3 } > < EuiFlexGroup className = "prfDevTool__main" gutterSize = "none" direction = "column" > < SearchProfilerTabs activeTab = { activeTab } activateTab = { setActiveTab } has = { { aggregations : Boolean ( currentResponse && hasAggregations ( currentResponse ) ) , searches : Boolean ( currentResponse && hasSearch ( currentResponse ) ) , } } /> { renderProfileTreeArea ( ) } < /EuiFlexGroup> < /EuiFlexItem> < /EuiFlexGroup> { highlightDetails ? ( < HighlightDetailsFlyout { ... highlightDetails } onClose = { ( ) => dispatch ( { type : 'setHighlightDetails' , value : null } ) } />) : null} < /EuiPageContentBody> < /EuiPageContent> < /EuiPageBody> < /EuiPage> < />); } ;