[APM] Adds button group to navigate to "All services"

x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/deep_links.cy.ts

@@ -14,6 +14,7 @@ describe('APM deep links', () => {
     cy.getByTestSubj('nav-search-input').type('APM');
     cy.contains('APM');
     cy.contains('APM / Services');
+    cy.contains('APM / Service groups');
     cy.contains('APM / Traces');
     cy.contains('APM / Service Map');
 
@@ -28,6 +29,11 @@ describe('APM deep links', () => {
     cy.contains('APM / Services').click({ force: true });
     cy.url().should('include', '/apm/services');
 
+    cy.getByTestSubj('nav-search-input').type('APM');
+    // navigates to service groups page
+    cy.contains('APM / Service groups').click({ force: true });
+    cy.url().should('include', '/apm/service-groups');
+
     cy.getByTestSubj('nav-search-input').type('APM');
     // navigates to traces page
     cy.contains('APM / Traces').click({ force: true });

x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/service_inventory/header_filters/header_filters.cy.ts

@@ -28,6 +28,7 @@ describe('Service inventory - header filters', () => {
         specialServiceName,
       })
     );
+    cy.dismissServiceGroupsTour();
   });
 
   after(() => {

x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts

@@ -125,6 +125,16 @@ Cypress.Commands.add(
   }
 );
 
+Cypress.Commands.add('dismissServiceGroupsTour', () => {
+  window.localStorage.setItem(
+    'apm.serviceGroupsTour',
+    JSON.stringify({
+      createGroup: false,
+      editGroup: false,
+    })
+  );
+});
+
 // A11y configuration
 
 const axeConfig = {

x-pack/plugins/apm/ftr_e2e/cypress/support/types.d.ts

@@ -23,5 +23,6 @@ declare namespace Cypress {
     }): void;
     updateAdvancedSettings(settings: Record<string, unknown>): void;
     getByTestSubj(selector: string): Chainable<JQuery<Element>>;
+    dismissServiceGroupsTour(): void;
   }
 }

x-pack/plugins/apm/public/components/app/service_groups/service_group_save/create_button.tsx

@@ -7,42 +7,42 @@
 import { EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { ServiceGroupsTour } from '../service_groups_tour';
-import { useServiceGroupsTour } from '../use_service_groups_tour';
+// import { ServiceGroupsTour } from '../service_groups_tour';
+// import { useServiceGroupsTour } from '../use_service_groups_tour';
 
 interface Props {
   onClick: () => void;
 }
 
 export function CreateButton({ onClick }: Props) {
-  const { tourEnabled, dismissTour } = useServiceGroupsTour('createGroup');
+  // const { tourEnabled, dismissTour } = useServiceGroupsTour('createGroup');
   return (
-    <ServiceGroupsTour
-      tourEnabled={tourEnabled}
-      dismissTour={dismissTour}
-      title={i18n.translate('xpack.apm.serviceGroups.tour.createGroups.title', {
-        defaultMessage: 'Introducing service groups',
-      })}
-      content={i18n.translate(
-        'xpack.apm.serviceGroups.tour.createGroups.content',
-        {
-          defaultMessage:
-            'Group services together to build curated inventory views that remove noise and simplify investigations across services. Groups are Kibana space-specific and available for any users with appropriate access.',
-        }
-      )}
+    // <ServiceGroupsTour
+    //   tourEnabled={tourEnabled}
+    //   dismissTour={dismissTour}
+    //   title={i18n.translate('xpack.apm.serviceGroups.tour.createGroups.title', {
+    //     defaultMessage: 'Introducing service groups',
+    //   })}
+    //   content={i18n.translate(
+    //     'xpack.apm.serviceGroups.tour.createGroups.content',
+    //     {
+    //       defaultMessage:
+    //         'Group services together to build curated inventory views that remove noise and simplify investigations across services. Groups are Kibana space-specific and available for any users with appropriate access.',
+    //     }
+    //   )}
+    // >
+    <EuiButton
+      iconType="plusInCircle"
+      data-test-subj="apmCreateServiceGroupButton"
+      onClick={() => {
+        // dismissTour();
+        onClick();
+      }}
     >
-      <EuiButton
-        iconType="plusInCircle"
-        data-test-subj="apmCreateServiceGroupButton"
-        onClick={() => {
-          dismissTour();
-          onClick();
-        }}
-      >
-        {i18n.translate('xpack.apm.serviceGroups.createGroupLabel', {
-          defaultMessage: 'Create group',
-        })}
-      </EuiButton>
-    </ServiceGroupsTour>
+      {i18n.translate('xpack.apm.serviceGroups.createGroupLabel', {
+        defaultMessage: 'Create group',
+      })}
+    </EuiButton>
+    // </ServiceGroupsTour>
   );
 }

x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { EuiButtonGroup } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { ServiceGroupsTour } from './service_groups_tour';
+import { useServiceGroupsTour } from './use_service_groups_tour';
+
+const buttonGroupOptions = {
+  allServices: {
+    option: {
+      id: 'allServices',
+      label: i18n.translate('xpack.apm.serviceGroups.buttonGroup.allServices', {
+        defaultMessage: 'All services',
+      }),
+    },
+    pathname: '/services',
+  },
+  serviceGroups: {
+    option: {
+      id: 'serviceGroups',
+      label: i18n.translate(
+        'xpack.apm.serviceGroups.buttonGroup.serviceGroups',
+        { defaultMessage: 'Service groups' }
+      ),
+    },
+    pathname: '/service-groups',
+  },
+};
+
+type SelectedNavButton = keyof typeof buttonGroupOptions;
+
+export function ServiceGroupsButtonGroup({
+  selectedNavButton,
+}: {
+  selectedNavButton: SelectedNavButton;
+}) {
+  const history = useHistory();
+  const { tourEnabled, dismissTour } = useServiceGroupsTour('createGroup');
+  return (
+    <ServiceGroupsTour
+      tourEnabled={tourEnabled}
+      dismissTour={dismissTour}
+      anchorPosition="leftUp"
+      title={i18n.translate('xpack.apm.serviceGroups.tour.createGroups.title', {
+        defaultMessage: 'Introducing service groups',
+      })}
+      content={i18n.translate(
+        'xpack.apm.serviceGroups.tour.createGroups.content',
+        {
+          defaultMessage:
+            'Group services together to build curated inventory views that remove noise and simplify investigations across services. Groups are Kibana space-specific and available for any users with appropriate access.',
+        }
+      )}
+    >
+      <EuiButtonGroup
+        color="primary"
+        options={[
+          buttonGroupOptions.allServices.option,
+          buttonGroupOptions.serviceGroups.option,
+        ]}
+        idSelected={selectedNavButton as string}
+        onChange={(id) => {
+          const { pathname } = buttonGroupOptions[id as SelectedNavButton];
+          history.push({ pathname });
+        }}
+        legend={i18n.translate('xpack.apm.servicesGroups.buttonGroup.legend', {
+          defaultMessage: 'View all services or service groups',
+        })}
+      />
+    </ServiceGroupsTour>
+  );
+}