diff --git a/x-pack/plugins/apm/public/components/app/Main/Breadcrumbs.js b/x-pack/plugins/apm/public/components/app/Main/Breadcrumbs.js deleted file mode 100644 index 74870aef9e8601a..000000000000000 --- a/x-pack/plugins/apm/public/components/app/Main/Breadcrumbs.js +++ /dev/null @@ -1,80 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; -import { withBreadcrumbs } from 'react-router-breadcrumbs-hoc'; -import { flatten, capitalize } from 'lodash'; -import chrome from 'ui/chrome'; -import { toQuery } from '../../shared/Links/url_helpers'; -import { routes } from './routeConfig'; - -class Breadcrumbs extends React.Component { - updateHeaderBreadcrumbs() { - const { _g = '', kuery = '' } = toQuery(this.props.location.search); - const breadcrumbs = this.props.breadcrumbs.map(({ breadcrumb, match }) => ({ - text: breadcrumb, - href: `#${match.url}?_g=${_g}&kuery=${kuery}` - })); - - chrome.breadcrumbs.set(breadcrumbs); - } - - componentDidMount() { - this.updateHeaderBreadcrumbs(); - } - - componentDidUpdate() { - this.updateHeaderBreadcrumbs(); - } - - render() { - const { breadcrumbs, location, showPluginBreadcrumbs } = this.props; - const { _g = '', kuery = '' } = toQuery(location.search); - - // If we don't display plugin breadcrumbs, render null, but continue - // to push updates to header. - if (!showPluginBreadcrumbs) { - return null; - } - - return ( -
- {breadcrumbs.map(({ breadcrumb, path, match }, i) => { - const isLast = i === breadcrumbs.length - 1; - return ( -
- {isLast ? ( - { - if (node && document.title !== node.textContent) { - document.title = capitalize(node.textContent); - } - }} - > - {breadcrumb} - - ) : ( - - {breadcrumb} - - )} -
- ); - })} -
- ); - } -} - -const flatRoutes = flatten( - routes.map(route => (route.switch ? route.routes : route)) -); - -export default withBreadcrumbs(flatRoutes)(Breadcrumbs); diff --git a/x-pack/plugins/apm/public/components/app/Main/UpdateBreadcrumbs.ts b/x-pack/plugins/apm/public/components/app/Main/UpdateBreadcrumbs.ts new file mode 100644 index 000000000000000..1c408b89e36a34a --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/Main/UpdateBreadcrumbs.ts @@ -0,0 +1,58 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { Location } from 'history'; +import { flatten } from 'lodash'; +import React from 'react'; +// @ts-ignore +import { withBreadcrumbs } from 'react-router-breadcrumbs-hoc'; +import chrome from 'ui/chrome'; +import { toQuery } from '../../shared/Links/url_helpers'; +import { isSwitchSet, routes } from './routeConfig'; + +interface Props { + location: Location; + breadcrumbs: Array<{ + breadcrumb: any; + match: { + url: string; + }; + }>; +} + +class UpdateBreadcrumbsComponent extends React.Component { + public updateHeaderBreadcrumbs() { + const { _g = '', kuery = '' } = toQuery(this.props.location.search); + const breadcrumbs = this.props.breadcrumbs.map(({ breadcrumb, match }) => ({ + text: breadcrumb, + href: `#${match.url}?_g=${_g}&kuery=${kuery}` + })); + + chrome.breadcrumbs.set(breadcrumbs); + } + + public componentDidMount() { + this.updateHeaderBreadcrumbs(); + } + + public componentDidUpdate() { + this.updateHeaderBreadcrumbs(); + } + + public render() { + return null; + } +} + +const flatRoutes = flatten( + routes.map(route => (isSwitchSet(route) ? route.routes : route)) +); + +const UpdateBreadcrumbs = withBreadcrumbs(flatRoutes)( + UpdateBreadcrumbsComponent +); + +export { UpdateBreadcrumbs }; diff --git a/x-pack/plugins/apm/public/components/app/Main/index.js b/x-pack/plugins/apm/public/components/app/Main/index.js index f08a59ec020feb8..5b36072b3450fd4 100644 --- a/x-pack/plugins/apm/public/components/app/Main/index.js +++ b/x-pack/plugins/apm/public/components/app/Main/index.js @@ -11,6 +11,7 @@ import { routes } from './routeConfig'; import ScrollToTopOnPathChange from './ScrollToTopOnPathChange'; import { px, units, unit, topNavHeight } from '../../../style/variables'; import ConnectRouterToRedux from '../../shared/ConnectRouterToRedux'; +import { UpdateBreadcrumbs } from './UpdateBreadcrumbs'; const MainContainer = styled.div` min-width: ${px(unit * 50)}; @@ -21,6 +22,7 @@ const MainContainer = styled.div` export default function Main() { return ( + {routes.map((route, i) => { diff --git a/x-pack/plugins/apm/public/components/app/Main/routeConfig.tsx b/x-pack/plugins/apm/public/components/app/Main/routeConfig.tsx index bc59dd934fa0878..512e4db2e4d42f6 100644 --- a/x-pack/plugins/apm/public/components/app/Main/routeConfig.tsx +++ b/x-pack/plugins/apm/public/components/app/Main/routeConfig.tsx @@ -6,7 +6,7 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; -import { Redirect, RouteComponentProps } from 'react-router-dom'; +import { Redirect, RouteComponentProps, RouteProps } from 'react-router-dom'; import { legacyDecodeURIComponent } from 'x-pack/plugins/apm/public/components/shared/Links/url_helpers'; import { StringMap } from '../../../../typings/common'; // @ts-ignore @@ -25,6 +25,25 @@ interface RouteParams { serviceName: string; } +type BreadcrumbFunction = (args: BreadcrumbArgs) => string | null; + +interface Route extends RouteProps { + switch?: never; + breadcrumb: string | BreadcrumbFunction | null; +} + +interface SwitchSet { + switch: true; + routes: Route[]; +} + +type RoutesConfig = Array; + +// this function is used to tell TS what type the route is based on route.switch +export function isSwitchSet(route: Route | SwitchSet): route is SwitchSet { + return Boolean(route.switch); +} + const renderAsRedirectTo = (to: string) => { return ({ location }: RouteComponentProps) => ( { ); }; -export const routes = [ +export const routes: RoutesConfig = [ { exact: true, path: '/', diff --git a/x-pack/plugins/apm/public/index.js b/x-pack/plugins/apm/public/index.js index 77a91e3eae43cdd..74b246fab9488d0 100644 --- a/x-pack/plugins/apm/public/index.js +++ b/x-pack/plugins/apm/public/index.js @@ -18,7 +18,6 @@ import './style/global_overrides.css'; import template from './templates/index.html'; import Main from './components/app/Main'; -import Breadcrumbs from './components/app/Main/Breadcrumbs'; import { initTimepicker } from './utils/timepicker'; import configureStore from './store/config/configureStore'; @@ -33,17 +32,6 @@ chrome.setRootTemplate(template); const store = configureStore(); initTimepicker(history, store.dispatch).then(() => { - const showPluginBreadcrumbs = !chrome - .getUiSettingsClient() - .get('k7design', false); - - ReactDOM.render( - - - , - document.getElementById('react-apm-breadcrumbs') - ); - ReactDOM.render( diff --git a/x-pack/plugins/apm/public/templates/index.html b/x-pack/plugins/apm/public/templates/index.html index af514d69098b8af..b38dee3e344aa52 100644 --- a/x-pack/plugins/apm/public/templates/index.html +++ b/x-pack/plugins/apm/public/templates/index.html @@ -1,11 +1,5 @@ -
- -
-
-
-
-
- +
+
diff --git a/x-pack/plugins/apm/public/utils/timepicker/index.js b/x-pack/plugins/apm/public/utils/timepicker/index.js index 505682d177db53c..b0c35cd43eb6578 100644 --- a/x-pack/plugins/apm/public/utils/timepicker/index.js +++ b/x-pack/plugins/apm/public/utils/timepicker/index.js @@ -15,7 +15,7 @@ let currentInterval; // hack to wait for angular template to be ready const waitForAngularReady = new Promise(resolve => { const checkInterval = setInterval(() => { - const hasElm = !!document.querySelector('#react-apm-breadcrumbs'); + const hasElm = !!document.querySelector('#kibana-angular-template'); if (hasElm) { clearInterval(checkInterval); resolve();