import { EuiSideNavItemType } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import React , { useMemo } from 'react' ; import { matchPath , useLocation } from 'react-router-dom' ; import useObservable from 'react-use/lib/useObservable' ; import type { Observable } from 'rxjs' ; import type { ApplicationStart } from '../../../../../../../src/core/public' ; import { KibanaPageTemplate , KibanaPageTemplateProps , } from '../../../../../../../src/plugins/kibana_react/public' ; import type { NavigationSection } from '../../../services/navigation_registry' ; import { NavNameWithBadge , hideBadge } from './nav_name_with_badge' ; export type WrappedPageTemplateProps = Pick < KibanaPageTemplateProps , 'children' | 'data-test-subj' | 'paddingSize' | 'pageBodyProps' | 'pageContentBodyProps' | 'pageContentProps' | 'pageHeader' | 'restrictWidth' | 'template' | 'isEmptyState' | 'noDataConfig' > & { showSolutionNav ? : boolean ; } ; export interface ObservabilityPageTemplateDependencies { currentAppId$ : Observable < string | undefined > ; getUrlForApp : ApplicationStart [ 'getUrlForApp' ] ; navigateToApp : ApplicationStart [ 'navigateToApp' ] ; navigationSections$ : Observable < NavigationSection [ ] > ; } export type ObservabilityPageTemplateProps = ObservabilityPageTemplateDependencies & WrappedPageTemplateProps ; export function ObservabilityPageTemplate ( { children , currentAppId$ , getUrlForApp , navigateToApp , navigationSections$ , showSolutionNav = true , ... pageTemplateProps } ) { const sections = useObservable ( navigationSections$ , [ ] ) ; const currentAppId = useObservable ( currentAppId$ , undefined ) ; const { pathname : currentPath } = useLocation ( ) ; const sideNavItems = useMemo < Array < EuiSideNavItemType < unknown > > > ( ( ) => sections . map ( ( { label , entries } , sectionIndex ) => ( { id : `${ sectionIndex }` , name : label , items : entries . map ( ( entry , entryIndex ) => { const href = getUrlForApp ( entry . app , { path : entry . path , } ) ; const isSelected = entry . app === currentAppId && matchPath ( currentPath , { path : entry . path , exact : ! ! entry . matchFullPath , strict : ! entry . ignoreTrailingSlash , } ) != null ; const badgeLocalStorageId = `observability.nav_item_badge_visible_${ entry . app }${ entry . path }` ; return { id : `${ sectionIndex }.${ entryIndex }` , name : entry . isNewFeature ? ( < NavNameWithBadge label = { entry . label } localStorageId = { badgeLocalStorageId } / > ) : ( entry . label ) , href , isSelected , onClick : ( event ) => { if ( entry . onClick ) { entry . onClick ( event ) ; } if ( entry . isNewFeature ) { hideBadge ( badgeLocalStorageId ) ; } if ( event . button !== 0 || event . defaultPrevented || event . metaKey || event . altKey || event . ctrlKey || event . shiftKey ) { return ; } event . preventDefault ( ) ; navigateToApp ( entry . app , { path : entry . path , } ) ; } , } ; } ) , } ) ) , [ currentAppId , currentPath , getUrlForApp , navigateToApp , sections ] ) ; return ( < KibanaPageTemplate restrictWidth = { false } { ... pageTemplateProps } solutionNav = { showSolutionNav ? { icon : 'logoObservability' , items : sideNavItems , name : sideNavTitle , } : undefined } > { children } < /KibanaPageTemplate>); } export default ObservabilityPageTemplate ; const sideNavTitle = i18n . translate ( 'xpack.observability.pageLayout.sideNavTitle' , { defaultMessage : 'Observability' , } ) ;