import { EuiPageHeaderProps } from '@elastic/eui' ; import React from 'react' ; import { useLocation } from 'react-router-dom' ; import { useKibana , KibanaPageTemplateProps , } from '../../../../../../../src/plugins/kibana_react/public' ; import { EnvironmentsContextProvider } from '../../../context/environments_context/environments_context' ; import { useFetcher } from '../../../hooks/use_fetcher' ; import { ApmPluginStartDeps } from '../../../plugin' ; import { ApmEnvironmentFilter } from '../../shared/environment_filter' ; import { getNoDataConfig } from './no_data_config' ; const bypassNoDataScreenPaths = [ '/settings' ] ; export function ApmMainTemplate ( { pageTitle , pageHeader , children , environmentFilter = true , ... pageTemplateProps } ) { const location = useLocation ( ) ; const { services } = useKibana < ApmPluginStartDeps > ( ) ; const { http , docLinks , observability } = services ; const basePath = http ?. basePath . get ( ) ; const ObservabilityPageTemplate = observability . navigation . PageTemplate ; const { data } = useFetcher ( ( callApmApi ) => { return callApmApi ( { endpoint : 'GET /internal/apm/has_data' } ) ; } , [ ] ) ; const noDataConfig = getNoDataConfig ( { basePath , docsLink : docLinks ! . links . observability . guide , hasData : data ?. hasData , } ) ; const shouldBypassNoDataScreen = bypassNoDataScreenPaths . some ( ( path ) => location . pathname . includes ( path ) ) ; const rightSideItems = environmentFilter ? [ < ApmEnvironmentFilter />] : []; const pageTemplate = ( < ObservabilityPageTemplate noDataConfig = { shouldBypassNoDataScreen ? undefined : noDataConfig } pageHeader = { { pageTitle , rightSideItems , ... pageHeader , } } { ... pageTemplateProps } > { children } < /ObservabilityPageTemplate>); if ( environmentFilter ) { return ( < EnvironmentsContextProvider > { pageTemplate } < /EnvironmentsContextProvider>); } return pageTemplate ; }