import React , { memo } from 'react' ; import { Route , Router , Switch } from 'react-router-dom' ; import { EuiPageBody } from '@elastic/eui' ; import { AppMountParameters , ChromeBreadcrumb , ScopedHistory } from 'opensearch-dashboards/public' ; import { ManagementAppWrapper } from '../management_app_wrapper' ; import { ManagementLandingPage } from '../landing' ; import { ManagementAppDependencies } from './management_app' ; import { ManagementSection } from '../../utils' ; interface ManagementRouterProps { history : AppMountParameters [ 'history' ] ; dependencies : ManagementAppDependencies ; setBreadcrumbs : ( crumbs ? : ChromeBreadcrumb [ ] , appHistory ? : ScopedHistory ) => void ; onAppMounted : ( id : string ) => void ; sections : ManagementSection [ ] ; } export const ManagementRouter = memo ( ( { dependencies , history , setBreadcrumbs , onAppMounted , sections } ) => ( < Router history = { history } > < EuiPageBody restrictWidth = { false } className = "mgtPage__body" > < Switch > { sections . map ( ( section ) => section . getAppsEnabled ( ) . map ( ( app ) => ( < Route path = { `${ app . basePath }` } component = { ( ) => ( < ManagementAppWrapper app = { app } setBreadcrumbs = { setBreadcrumbs } onAppMounted = { onAppMounted } history = { history } / > ) } />)))} < Route path = { '/' } component = { ( ) => ( < ManagementLandingPage version = { dependencies . opensearchDashboardsVersion } setBreadcrumbs = { setBreadcrumbs } / > ) } /> < /Switch> < /EuiPageBody> < /Router>));