Removes APM custom breadcrumbs, leaves only chrome.breadcrumbs.set

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<Props> {
+  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 };

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 (
     <MainContainer>
+      <UpdateBreadcrumbs />
       <Route component={ConnectRouterToRedux} />
       <Route component={ScrollToTopOnPathChange} />
       {routes.map((route, i) => {

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<Route | SwitchSet>;
+
+// 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<RouteParams>) => (
     <Redirect
@@ -36,7 +55,7 @@ const renderAsRedirectTo = (to: string) => {
   );
 };
 
-export const routes = [
+export const routes: RoutesConfig = [
   {
     exact: true,
     path: '/',

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(
-    <Router history={history}>
-      <Breadcrumbs showPluginBreadcrumbs={showPluginBreadcrumbs} />
-    </Router>,
-    document.getElementById('react-apm-breadcrumbs')
-  );
-
   ReactDOM.render(
     <I18nProvider>
       <Provider store={store}>

x-pack/plugins/apm/public/templates/index.html

@@ -1,11 +1,5 @@
-<div ng-controller="TimePickerController">
-    <kbn-top-nav name="apm" config="topNavMenu">
-        <div data-transclude-slots>
-            <div data-transclude-slot="topLeftCorner">
-                <div id="react-apm-breadcrumbs"></div>
-            </div>
-        </div>
-    </kbn-top-nav>
+<div ng-controller="TimePickerController" id="kibana-angular-template">
+  <kbn-top-nav name="apm" config="topNavMenu"></kbn-top-nav>
 </div>
 
 <div id="react-apm-root" style="overflow-x: auto;"></div>

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();