[7.x] [APM] Make client-side routes static (#52574) (#53479)

* [APM] Make client-side routes static Turn `getRoutes` back into `routes` so we can just import it. Checking for the service map being enabled isn't really necessary since we don't have any links to those routes and the backend routes are already flagged.
2025-04-24 17:59:23 -04:00 · 2019-12-18 09:02:32 -06:00 · 2019-12-18 09:02:32 -06:00 · 19c5778683
commit 19c5778683
parent 71330e7bfd
4 changed files with 193 additions and 209 deletions
--- a/x-pack/legacy/plugins/apm/public/components/app/Main/UpdateBreadcrumbs.test.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/Main/UpdateBreadcrumbs.test.tsx
@ -7,15 +7,14 @@
 import { mount } from 'enzyme';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { UpdateBreadcrumbs } from './UpdateBreadcrumbs';
-import { getRoutes } from './route_config';
-import {
-  MockApmPluginContextWrapper,
-  mockApmPluginContextValue
-} from '../../../utils/testHelpers';
 import { ApmPluginContextValue } from '../../../context/ApmPluginContext';
+import {
+  mockApmPluginContextValue,
+  MockApmPluginContextWrapper
+} from '../../../utils/testHelpers';
+import { routes } from './route_config';
+import { UpdateBreadcrumbs } from './UpdateBreadcrumbs';

-const routes = getRoutes({ serviceMapEnabled: true });
 const setBreadcrumbs = jest.fn();

 function expectBreadcrumbToMatchSnapshot(route: string, params = '') {
--- a/x-pack/legacy/plugins/apm/public/components/app/Main/route_config/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/Main/route_config/index.tsx
@ -42,187 +42,175 @@ const renderAsRedirectTo = (to: string) => {
  );
 };

-export function getRoutes({
-  serviceMapEnabled
-}: {
-  serviceMapEnabled: boolean;
-}): BreadcrumbRoute[] {
-  const routes: BreadcrumbRoute[] = [
-    {
-      exact: true,
-      path: '/',
-      render: renderAsRedirectTo('/services'),
-      breadcrumb: 'APM',
-      name: RouteName.HOME
-    },
-    {
-      exact: true,
-      path: '/services',
-      component: () => <Home tab="services" />,
-      breadcrumb: i18n.translate('xpack.apm.breadcrumb.servicesTitle', {
-        defaultMessage: 'Services'
-      }),
-      name: RouteName.SERVICES
-    },
-    {
-      exact: true,
-      path: '/traces',
-      component: () => <Home tab="traces" />,
-      breadcrumb: i18n.translate('xpack.apm.breadcrumb.tracesTitle', {
-        defaultMessage: 'Traces'
-      }),
-      name: RouteName.TRACES
-    },
-    {
-      exact: true,
-      path: '/settings',
-      render: renderAsRedirectTo('/settings/agent-configuration'),
-      breadcrumb: i18n.translate('xpack.apm.breadcrumb.listSettingsTitle', {
-        defaultMessage: 'Settings'
-      }),
-      name: RouteName.SETTINGS
-    },
-    {
-      exact: true,
-      path: '/settings/apm-indices',
-      component: () => (
-        <Settings>
-          <ApmIndices />
-        </Settings>
-      ),
-      breadcrumb: i18n.translate('xpack.apm.breadcrumb.settings.indicesTitle', {
-        defaultMessage: 'Indices'
-      }),
-      name: RouteName.INDICES
-    },
-    {
-      exact: true,
-      path: '/settings/agent-configuration',
-      component: () => (
-        <Settings>
-          <AgentConfigurations />
-        </Settings>
-      ),
-      breadcrumb: i18n.translate(
-        'xpack.apm.breadcrumb.settings.agentConfigurationTitle',
-        {
-          defaultMessage: 'Agent Configuration'
-        }
-      ),
-      name: RouteName.AGENT_CONFIGURATION
-    },
-    {
-      exact: true,
-      path: '/services/:serviceName',
-      breadcrumb: ({ match }) => match.params.serviceName,
-      render: (props: RouteComponentProps<RouteParams>) =>
-        renderAsRedirectTo(
-          `/services/${props.match.params.serviceName}/transactions`
-        )(props),
-      name: RouteName.SERVICE
-    },
-    // errors
-    {
-      exact: true,
-      path: '/services/:serviceName/errors/:groupId',
-      component: ErrorGroupDetails,
-      breadcrumb: ({ match }) => match.params.groupId,
-      name: RouteName.ERROR
-    },
-    {
-      exact: true,
-      path: '/services/:serviceName/errors',
-      component: () => <ServiceDetails tab="errors" />,
-      breadcrumb: i18n.translate('xpack.apm.breadcrumb.errorsTitle', {
-        defaultMessage: 'Errors'
-      }),
-      name: RouteName.ERRORS
-    },
-    // transactions
-    {
-      exact: true,
-      path: '/services/:serviceName/transactions',
-      component: () => <ServiceDetails tab="transactions" />,
-      breadcrumb: i18n.translate('xpack.apm.breadcrumb.transactionsTitle', {
-        defaultMessage: 'Transactions'
-      }),
-      name: RouteName.TRANSACTIONS
-    },
-    // metrics
-    {
-      exact: true,
-      path: '/services/:serviceName/metrics',
-      component: () => <ServiceDetails tab="metrics" />,
-      breadcrumb: metricsBreadcrumb,
-      name: RouteName.METRICS
-    },
-    // service nodes, only enabled for java agents for now
-    {
-      exact: true,
-      path: '/services/:serviceName/nodes',
-      component: () => <ServiceDetails tab="nodes" />,
-      breadcrumb: i18n.translate('xpack.apm.breadcrumb.nodesTitle', {
-        defaultMessage: 'JVMs'
-      }),
-      name: RouteName.SERVICE_NODES
-    },
-    // node metrics
-    {
-      exact: true,
-      path: '/services/:serviceName/nodes/:serviceNodeName/metrics',
-      component: () => <ServiceNodeMetrics />,
-      breadcrumb: ({ location }) => {
-        const { serviceNodeName } = resolveUrlParams(location, {});
-
-        if (serviceNodeName === SERVICE_NODE_NAME_MISSING) {
-          return UNIDENTIFIED_SERVICE_NODES_LABEL;
-        }
-
-        return serviceNodeName || '';
-      },
-      name: RouteName.SERVICE_NODE_METRICS
-    },
-    {
-      exact: true,
-      path: '/services/:serviceName/transactions/view',
-      component: TransactionDetails,
-      breadcrumb: ({ location }) => {
-        const query = toQuery(location.search);
-        return query.transactionName as string;
-      },
-      name: RouteName.TRANSACTION_NAME
-    },
-    {
-      exact: true,
-      path: '/link-to/trace/:traceId',
-      component: TraceLink,
-      breadcrumb: null,
-      name: RouteName.LINK_TO_TRACE
-    }
-  ];
-
-  if (serviceMapEnabled) {
-    routes.push(
+export const routes: BreadcrumbRoute[] = [
+  {
+    exact: true,
+    path: '/',
+    render: renderAsRedirectTo('/services'),
+    breadcrumb: 'APM',
+    name: RouteName.HOME
+  },
+  {
+    exact: true,
+    path: '/services',
+    component: () => <Home tab="services" />,
+    breadcrumb: i18n.translate('xpack.apm.breadcrumb.servicesTitle', {
+      defaultMessage: 'Services'
+    }),
+    name: RouteName.SERVICES
+  },
+  {
+    exact: true,
+    path: '/traces',
+    component: () => <Home tab="traces" />,
+    breadcrumb: i18n.translate('xpack.apm.breadcrumb.tracesTitle', {
+      defaultMessage: 'Traces'
+    }),
+    name: RouteName.TRACES
+  },
+  {
+    exact: true,
+    path: '/settings',
+    render: renderAsRedirectTo('/settings/agent-configuration'),
+    breadcrumb: i18n.translate('xpack.apm.breadcrumb.listSettingsTitle', {
+      defaultMessage: 'Settings'
+    }),
+    name: RouteName.SETTINGS
+  },
+  {
+    exact: true,
+    path: '/settings/apm-indices',
+    component: () => (
+      <Settings>
+        <ApmIndices />
+      </Settings>
+    ),
+    breadcrumb: i18n.translate('xpack.apm.breadcrumb.settings.indicesTitle', {
+      defaultMessage: 'Indices'
+    }),
+    name: RouteName.INDICES
+  },
+  {
+    exact: true,
+    path: '/settings/agent-configuration',
+    component: () => (
+      <Settings>
+        <AgentConfigurations />
+      </Settings>
+    ),
+    breadcrumb: i18n.translate(
+      'xpack.apm.breadcrumb.settings.agentConfigurationTitle',
      {
-        exact: true,
-        path: '/service-map',
-        component: () => <Home tab="service-map" />,
-        breadcrumb: i18n.translate('xpack.apm.breadcrumb.serviceMapTitle', {
-          defaultMessage: 'Service Map'
-        }),
-        name: RouteName.SERVICE_MAP
-      },
-      {
-        exact: true,
-        path: '/services/:serviceName/service-map',
-        component: () => <ServiceDetails tab="service-map" />,
-        breadcrumb: i18n.translate('xpack.apm.breadcrumb.serviceMapTitle', {
-          defaultMessage: 'Service Map'
-        }),
-        name: RouteName.SINGLE_SERVICE_MAP
+        defaultMessage: 'Agent Configuration'
      }
-    );
-  }
+    ),
+    name: RouteName.AGENT_CONFIGURATION
+  },
+  {
+    exact: true,
+    path: '/services/:serviceName',
+    breadcrumb: ({ match }) => match.params.serviceName,
+    render: (props: RouteComponentProps<RouteParams>) =>
+      renderAsRedirectTo(
+        `/services/${props.match.params.serviceName}/transactions`
+      )(props),
+    name: RouteName.SERVICE
+  },
+  // errors
+  {
+    exact: true,
+    path: '/services/:serviceName/errors/:groupId',
+    component: ErrorGroupDetails,
+    breadcrumb: ({ match }) => match.params.groupId,
+    name: RouteName.ERROR
+  },
+  {
+    exact: true,
+    path: '/services/:serviceName/errors',
+    component: () => <ServiceDetails tab="errors" />,
+    breadcrumb: i18n.translate('xpack.apm.breadcrumb.errorsTitle', {
+      defaultMessage: 'Errors'
+    }),
+    name: RouteName.ERRORS
+  },
+  // transactions
+  {
+    exact: true,
+    path: '/services/:serviceName/transactions',
+    component: () => <ServiceDetails tab="transactions" />,
+    breadcrumb: i18n.translate('xpack.apm.breadcrumb.transactionsTitle', {
+      defaultMessage: 'Transactions'
+    }),
+    name: RouteName.TRANSACTIONS
+  },
+  // metrics
+  {
+    exact: true,
+    path: '/services/:serviceName/metrics',
+    component: () => <ServiceDetails tab="metrics" />,
+    breadcrumb: metricsBreadcrumb,
+    name: RouteName.METRICS
+  },
+  // service nodes, only enabled for java agents for now
+  {
+    exact: true,
+    path: '/services/:serviceName/nodes',
+    component: () => <ServiceDetails tab="nodes" />,
+    breadcrumb: i18n.translate('xpack.apm.breadcrumb.nodesTitle', {
+      defaultMessage: 'JVMs'
+    }),
+    name: RouteName.SERVICE_NODES
+  },
+  // node metrics
+  {
+    exact: true,
+    path: '/services/:serviceName/nodes/:serviceNodeName/metrics',
+    component: () => <ServiceNodeMetrics />,
+    breadcrumb: ({ location }) => {
+      const { serviceNodeName } = resolveUrlParams(location, {});

-  return routes;
-}
+      if (serviceNodeName === SERVICE_NODE_NAME_MISSING) {
+        return UNIDENTIFIED_SERVICE_NODES_LABEL;
+      }
+
+      return serviceNodeName || '';
+    },
+    name: RouteName.SERVICE_NODE_METRICS
+  },
+  {
+    exact: true,
+    path: '/services/:serviceName/transactions/view',
+    component: TransactionDetails,
+    breadcrumb: ({ location }) => {
+      const query = toQuery(location.search);
+      return query.transactionName as string;
+    },
+    name: RouteName.TRANSACTION_NAME
+  },
+  {
+    exact: true,
+    path: '/link-to/trace/:traceId',
+    component: TraceLink,
+    breadcrumb: null,
+    name: RouteName.LINK_TO_TRACE
+  },
+
+  {
+    exact: true,
+    path: '/service-map',
+    component: () => <Home tab="service-map" />,
+    breadcrumb: i18n.translate('xpack.apm.breadcrumb.serviceMapTitle', {
+      defaultMessage: 'Service Map'
+    }),
+    name: RouteName.SERVICE_MAP
+  },
+  {
+    exact: true,
+    path: '/services/:serviceName/service-map',
+    component: () => <ServiceDetails tab="service-map" />,
+    breadcrumb: i18n.translate('xpack.apm.breadcrumb.serviceMapTitle', {
+      defaultMessage: 'Service Map'
+    }),
+    name: RouteName.SINGLE_SERVICE_MAP
+  }
+];
--- a/x-pack/legacy/plugins/apm/public/components/app/TraceLink/test/TraceLink.test.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TraceLink/test/TraceLink.test.tsx
@ -3,28 +3,28 @@
 * 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 { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
-import * as urlParamsHooks from '../../../../hooks/useUrlParams';
-import * as hooks from '../../../../hooks/useFetcher';
+import React from 'react';
 import { TraceLink } from '../';
+import * as hooks from '../../../../hooks/useFetcher';
+import * as urlParamsHooks from '../../../../hooks/useUrlParams';
 import { MockApmPluginContextWrapper } from '../../../../utils/testHelpers';
-import * as routeConfig from '../../Main/route_config';
-import { BreadcrumbRoute } from '../../Main/ProvideBreadcrumbs';

 const renderOptions = { wrapper: MockApmPluginContextWrapper };

-jest.spyOn(routeConfig, 'getRoutes').mockReturnValue([
-  {
-    path: '/services/:serviceName/transactions/view',
-    name: 'transaction_name'
-  },
-  {
-    path: '/traces',
-    name: 'traces'
-  }
-] as BreadcrumbRoute[]);
+jest.mock('../../Main/route_config', () => ({
+  routes: [
+    {
+      path: '/services/:serviceName/transactions/view',
+      name: 'transaction_name'
+    },
+    {
+      path: '/traces',
+      name: 'traces'
+    }
+  ]
+}));

 describe('TraceLink', () => {
  afterAll(() => {
--- a/x-pack/legacy/plugins/apm/public/new-platform/plugin.tsx
+++ b/x-pack/legacy/plugins/apm/public/new-platform/plugin.tsx
@ -25,7 +25,7 @@ import { px, unit, units } from '../style/variables';
 import { LoadingIndicatorProvider } from '../context/LoadingIndicatorContext';
 import { LicenseProvider } from '../context/LicenseContext';
 import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs';
-import { getRoutes } from '../components/app/Main/route_config';
+import { routes } from '../components/app/Main/route_config';
 import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
 import { MatchedRouteProvider } from '../context/MatchedRouteContext';
 import { createStaticIndexPattern } from '../services/rest/index_pattern';
@ -34,7 +34,6 @@ import { setReadonlyBadge } from './updateBadge';
 import { featureCatalogueEntry } from './featureCatalogueEntry';
 import { getConfigFromInjectedMetadata } from './getConfigFromInjectedMetadata';
 import { toggleAppLinkInNav } from './toggleAppLinkInNav';
-import { BreadcrumbRoute } from '../components/app/Main/ProvideBreadcrumbs';
 import { ApmPluginContext } from '../context/ApmPluginContext';

 export const REACT_APP_ROOT_ID = 'react-apm-root';
@ -45,7 +44,7 @@ const MainContainer = styled.main`
  height: 100%;
 `;

-const App = ({ routes }: { routes: BreadcrumbRoute[] }) => {
+const App = () => {
  return (
    <MainContainer data-test-subj="apmMainContainer">
      <UpdateBreadcrumbs routes={routes} />
@ -115,8 +114,6 @@ export class ApmPlugin
    // Until then we use a shim to get it from legacy metadata:
    const packageInfo = metadata as PackageInfo;

-    const routes = getRoutes(config);
-
    // render APM feedback link in global help menu
    setHelpExtension(core);
    setReadonlyBadge(core);
@ -138,7 +135,7 @@ export class ApmPlugin
                <UrlParamsProvider>
                  <LoadingIndicatorProvider>
                    <LicenseProvider>
-                      <App routes={routes} />
+                      <App />
                    </LicenseProvider>
                  </LoadingIndicatorProvider>
                </UrlParamsProvider>