[APM] Makes service overview page default (#85786) (#85891)

* Closes #81948 by setting the default route for services to the service overview page also updates links to the general path which gets redirected according to user settings * fixes incorrect test names * Update x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx Co-authored-by: Cauê Marcondes <[email protected]> * fixes linting Co-authored-by: Cauê Marcondes <[email protected]> Co-authored-by: Cauê Marcondes <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Dec 15, 2020 · bcafd22 · bcafd22
1 parent 7d7ebb1
commit bcafd22
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 11 deletions.
diff --git a/x-pack/plugins/apm/e2e/cypress/integration/apm.feature b/x-pack/plugins/apm/e2e/cypress/integration/apm.feature
@@ -3,4 +3,4 @@ Feature: APM
   Scenario: Transaction duration charts
     Given a user browses the APM UI application
     When the user inspects the opbeans-node service
-    Then should redirect to correct path with correct params
+    Then should redirect to correct path
diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/apm.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/apm.ts
@@ -25,7 +25,6 @@ When(`the user inspects the opbeans-node service`, () => {
     .click({ force: true });
 });
 
-Then(`should redirect to correct path with correct params`, () => {
-  cy.url().should('contain', `/app/apm/services/opbeans-node/transactions`);
-  cy.url().should('contain', `transactionType=request`);
+Then(`should redirect to correct path`, () => {
+  cy.url().should('contain', `/app/apm/services/opbeans-node/overview`);
 });
diff --git a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx
@@ -27,6 +27,8 @@ import {
   CreateAgentConfigurationRouteHandler,
   EditAgentConfigurationRouteHandler,
 } from './route_handlers/agent_configuration';
+import { enableServiceOverview } from '../../../../../common/ui_settings_keys';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
 
 /**
  * Given a path, redirect to that location, preserving the search and maintaining
@@ -143,6 +145,17 @@ function SettingsCustomizeUI(props: RouteComponentProps<{}>) {
   );
 }
 
+function DefaultServicePageRouteHandler(
+  props: RouteComponentProps<{ serviceName: string }>
+) {
+  const { uiSettings } = useApmPluginContext().core;
+  const { serviceName } = props.match.params;
+  if (uiSettings.get(enableServiceOverview)) {
+    return renderAsRedirectTo(`/services/${serviceName}/overview`)(props);
+  }
+  return renderAsRedirectTo(`/services/${serviceName}/transactions`)(props);
+}
+
 /**
  * The array of route definitions to be used when the application
  * creates the routes.
@@ -217,10 +230,7 @@ export const routes: APMRouteDefinition[] = [
     exact: true,
     path: '/services/:serviceName',
     breadcrumb: ({ match }) => match.params.serviceName,
-    render: (props: RouteComponentProps<{ serviceName: string }>) =>
-      renderAsRedirectTo(
-        `/services/${props.match.params.serviceName}/transactions`
-      )(props),
+    component: DefaultServicePageRouteHandler,
   } as APMRouteDefinition<{ serviceName: string }>,
   {
     exact: true,

diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Buttons.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Buttons.tsx
@@ -29,7 +29,7 @@ export function Buttons({
 
   const detailsUrl = getAPMHref({
     basePath,
-    path: `/services/${selectedNodeServiceName}/transactions`,
+    path: `/services/${selectedNodeServiceName}`,
     query: urlParams,
   });
   const focusUrl = getAPMHref({

diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionOverviewLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/TransactionOverviewLink.tsx
@@ -31,7 +31,7 @@ export function TransactionOverviewLink({ serviceName, ...rest }: Props) {
 
   return (
     <APMLink
-      path={`/services/${serviceName}/transactions`}
+      path={`/services/${serviceName}`}
       query={pickKeys(urlParams as APMQueryParams, ...persistedFilters)}
       {...rest}
     />

diff --git a/x-pack/plugins/apm/server/ui_settings.ts b/x-pack/plugins/apm/server/ui_settings.ts
@@ -36,7 +36,7 @@ export const uiSettings: Record<string, UiSettingsParams<boolean>> = {
     name: i18n.translate('xpack.apm.enableServiceOverviewExperimentName', {
       defaultMessage: 'APM Service overview',
     }),
-    value: false,
+    value: true,
     description: i18n.translate(
       'xpack.apm.enableServiceOverviewExperimentDescription',
       {