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

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

@@ -12,6 +12,7 @@ import {
   EuiFlexItem,
   EuiFormControlLayout,
   EuiText,
+  EuiButtonGroup,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { isEmpty, sortBy } from 'lodash';
@@ -21,11 +22,56 @@ import { ServiceGroupsListItems } from './service_groups_list';
 import { Sort } from './sort';
 import { RefreshServiceGroupsSubscriber } from '../refresh_service_groups_subscriber';
 import { getDateRange } from '../../../../context/url_params_context/helpers';
+import { RedirectTo } from '../../../routing/redirect_to';
+import { ServiceGroupsTour } from '../service_groups_tour';
+import { useServiceGroupsTour } from '../use_service_groups_tour';
 
 export type ServiceGroupsSortType = 'recently_added' | 'alphabetical';
 
 export function ServiceGroupsList() {
+  const { tourEnabled, dismissTour } = useServiceGroupsTour(
+    'serviceGroupsAllServices'
+  );
+  const buttonGroupOptions = {
+    allServices: {
+      id: 'allServices',
+      label: (
+        <ServiceGroupsTour
+          tourEnabled={tourEnabled}
+          dismissTour={dismissTour}
+          title={i18n.translate(
+            'xpack.apm.serviceGroups.tour.serviceGroups.title',
+            { defaultMessage: 'View all services' }
+          )}
+          content={i18n.translate(
+            'xpack.apm.serviceGroups.tour.serviceGroups.content',
+            {
+              defaultMessage:
+                "Now that you've created a service group, you can go back and view all services here.",
+            }
+          )}
+        >
+          <>
+            {i18n.translate('xpack.apm.serviceGroups.buttonGroup.allServices', {
+              defaultMessage: 'All services',
+            })}
+          </>
+        </ServiceGroupsTour>
+      ),
+    },
+    serviceGroups: {
+      id: 'serviceGroups',
+      label: i18n.translate(
+        'xpack.apm.serviceGroups.buttonGroup.serviceGroups',
+        { defaultMessage: 'Service groups' }
+      ),
+    },
+  };
+
   const [filter, setFilter] = useState('');
+  const [buttonGroupSelection, setButtonGroupSelection] = useState(
+    buttonGroupOptions.serviceGroups.id
+  );
 
   const [apmServiceGroupsSortType, setServiceGroupsSortType] =
     useState<ServiceGroupsSortType>('recently_added');
@@ -40,24 +86,15 @@ export function ServiceGroupsList() {
   );
 
   const { start, end } = useMemo(
-    () =>
-      getDateRange({
-        rangeFrom: 'now-24h',
-        rangeTo: 'now',
-      }),
+    () => getDateRange({ rangeFrom: 'now-24h', rangeTo: 'now' }),
     []
   );
 
   const { data: servicesCountData = { servicesCounts: {} } } = useFetcher(
     (callApmApi) => {
       if (start && end) {
         return callApmApi('GET /internal/apm/service_groups/services_count', {
-          params: {
-            query: {
-              start,
-              end,
-            },
-          },
+          params: { query: { start, end } },
         });
       }
     },
@@ -91,7 +128,6 @@ export function ServiceGroupsList() {
   }, []);
 
   if (isLoading) {
-    // return null;
     return (
       <EuiEmptyPrompt
         icon={<EuiLoadingLogo logo="logoObservability" size="xl" />}
@@ -106,9 +142,31 @@ export function ServiceGroupsList() {
     );
   }
 
+  if (buttonGroupSelection === buttonGroupOptions.allServices.id) {
+    return <RedirectTo pathname={'/services'} />;
+  }
+
   return (
     <RefreshServiceGroupsSubscriber onRefresh={refetch}>
       <EuiFlexGroup direction="column" gutterSize="m">
+        <EuiFlexItem>
+          <EuiButtonGroup
+            color="primary"
+            options={[
+              buttonGroupOptions.allServices,
+              buttonGroupOptions.serviceGroups,
+            ]}
+            idSelected={buttonGroupSelection}
+            onChange={(id) => {
+              dismissTour();
+              setButtonGroupSelection(id);
+            }}
+            legend={i18n.translate(
+              'xpack.apm.servicesGroups.buttonGroup.legend',
+              { defaultMessage: 'View all services or service groups' }
+            )}
+          />
+        </EuiFlexItem>
         <EuiFlexItem>
           <EuiFlexGroup direction="row" gutterSize="s" alignItems="center">
             <EuiFlexItem>
@@ -127,9 +185,7 @@ export function ServiceGroupsList() {
                   onChange={(e) => setFilter(e.target.value)}
                   placeholder={i18n.translate(
                     'xpack.apm.servicesGroups.filter',
-                    {
-                      defaultMessage: 'Filter groups',
-                    }
+                    { defaultMessage: 'Filter groups' }
                   )}
                 />
               </EuiFormControlLayout>
@@ -151,7 +207,7 @@ export function ServiceGroupsList() {
                     {i18n.translate('xpack.apm.serviceGroups.groupsCount', {
                       defaultMessage:
                         '{servicesCount} {servicesCount, plural, =0 {group} one {group} other {groups}}',
-                      values: { servicesCount: filteredItems.length + 1 },
+                      values: { servicesCount: filteredItems.length },
                     })}
                   </EuiText>
                 </EuiFlexItem>

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

@@ -18,15 +18,12 @@ import {
   ServiceGroup,
   SERVICE_GROUP_COLOR_DEFAULT,
 } from '../../../../../common/service_groups';
-import { ServiceGroupsTour } from '../service_groups_tour';
-import { useServiceGroupsTour } from '../use_service_groups_tour';
 
 interface Props {
   serviceGroup: ServiceGroup;
   hideServiceCount?: boolean;
   onClick?: () => void;
   href?: string;
-  withTour?: boolean;
   servicesCount?: number;
 }
 
@@ -35,11 +32,8 @@ export function ServiceGroupsCard({
   hideServiceCount = false,
   onClick,
   href,
-  withTour,
   servicesCount,
 }: Props) {
-  const { tourEnabled, dismissTour } = useServiceGroupsTour('serviceGroupCard');
-
   const cardProps: EuiCardProps = {
     style: { width: 286 },
     icon: (
@@ -81,45 +75,10 @@ export function ServiceGroupsCard({
         )}
       </EuiFlexGroup>
     ),
-    onClick: () => {
-      dismissTour();
-      if (onClick) {
-        onClick();
-      }
-    },
+    onClick,
     href,
   };
 
-  if (withTour) {
-    return (
-      <EuiFlexItem key={serviceGroup.groupName}>
-        <EuiCard
-          layout="vertical"
-          {...cardProps}
-          description={
-            <ServiceGroupsTour
-              tourEnabled={tourEnabled}
-              dismissTour={dismissTour}
-              title={i18n.translate(
-                'xpack.apm.serviceGroups.tour.serviceGroups.title',
-                { defaultMessage: 'All services group' }
-              )}
-              content={i18n.translate(
-                'xpack.apm.serviceGroups.tour.serviceGroups.content',
-                {
-                  defaultMessage:
-                    "Now that you've created a service group, your All services inventory has moved here. This group cannot be edited or removed.",
-                }
-              )}
-            >
-              <>{cardProps.description}</>
-            </ServiceGroupsTour>
-          }
-        />
-      </EuiFlexItem>
-    );
-  }
-
   return (
     <EuiFlexItem key={serviceGroup.groupName}>
       <EuiCard layout="vertical" {...cardProps} />

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

@@ -5,11 +5,9 @@
  * 2.0.
  */
 import { EuiFlexGrid } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { SavedServiceGroup } from '../../../../../common/service_groups';
 import { ServiceGroupsCard } from './service_group_card';
-import { SERVICE_GROUP_COLOR_DEFAULT } from '../../../../../common/service_groups';
 import { useApmRouter } from '../../../../hooks/use_apm_router';
 import { useApmParams } from '../../../../hooks/use_apm_params';
 import { useDefaultEnvironment } from '../../../../hooks/use_default_environment';
@@ -42,30 +40,6 @@ export function ServiceGroupsListItems({ items, servicesCounts }: Props) {
           })}
         />
       ))}
-      <ServiceGroupsCard
-        withTour
-        serviceGroup={{
-          groupName: i18n.translate(
-            'xpack.apm.serviceGroups.list.allServices.name',
-            { defaultMessage: 'All services' }
-          ),
-          kuery: 'service.name : *',
-          description: i18n.translate(
-            'xpack.apm.serviceGroups.list.allServices.description',
-            { defaultMessage: 'View all services' }
-          ),
-          color: SERVICE_GROUP_COLOR_DEFAULT,
-        }}
-        hideServiceCount
-        href={router.link('/services', {
-          query: {
-            ...query,
-            serviceGroup: '',
-            environment,
-            kuery: '',
-          },
-        })}
-      />
     </EuiFlexGrid>
   );
 }

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

@@ -11,7 +11,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
 import { ElasticDocsLink } from '../../shared/links/elastic_docs_link';
 
-export type TourType = 'createGroup' | 'editGroup' | 'serviceGroupCard';
+export type TourType = 'createGroup' | 'editGroup' | 'serviceGroupsAllServices';
 
 interface Props {
   title: string;
@@ -63,7 +63,7 @@ export function ServiceGroupsTour({
       step={1}
       stepsTotal={1}
       title={title}
-      anchorPosition="leftUp"
+      anchorPosition="upLeft"
       footerAction={
         <EuiButtonEmpty color="text" size="xs" onClick={dismissTour}>
           {i18n.translate('xpack.apm.serviceGroups.tour.dismiss', {

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

@@ -11,7 +11,7 @@ import { TourType } from './service_groups_tour';
 const INITIAL_STATE: Record<TourType, boolean> = {
   createGroup: true,
   editGroup: true,
-  serviceGroupCard: true,
+  serviceGroupsAllServices: true,
 };
 
 export function useServiceGroupsTour(type: TourType) {

x-pack/plugins/translations/translations/fr-FR.json

@@ -7510,6 +7510,8 @@
     "xpack.apm.serviceGroup.serviceInventory": "Inventory",
     "xpack.apm.serviceGroup.serviceMap": "Carte des services",
     "xpack.apm.serviceGroups.breadcrumb.title": "Services",
+    "xpack.apm.serviceGroups.buttonGroup.allServices": "Tous les services",
+    "xpack.apm.serviceGroups.buttonGroup.serviceGroups": "Groupes de services",
     "xpack.apm.serviceGroups.cardsList.emptyDescription": "Aucune description disponible",
     "xpack.apm.serviceGroups.createGroupLabel": "Créer un groupe",
     "xpack.apm.serviceGroups.createSuccess.toast.text": "Votre groupe est maintenant visible dans la nouvelle vue Services pour les groupes.",
@@ -7528,8 +7530,6 @@
     "xpack.apm.serviceGroups.groupDetailsForm.invalidColorError": "Veuillez fournir une valeur de couleur valide",
     "xpack.apm.serviceGroups.groupDetailsForm.name": "Nom",
     "xpack.apm.serviceGroups.groupDetailsForm.selectServices": "Sélectionner des services",
-    "xpack.apm.serviceGroups.list.allServices.description": "Afficher tous les services",
-    "xpack.apm.serviceGroups.list.allServices.name": "Tous les services",
     "xpack.apm.serviceGroups.list.sort.alphabetical": "Alphabétique",
     "xpack.apm.serviceGroups.list.sort.recentlyAdded": "Récemment ajouté",
     "xpack.apm.serviceGroups.selectServicesForm.cancel": "Annuler",
@@ -7550,8 +7550,6 @@
     "xpack.apm.serviceGroups.tour.dismiss": "Rejeter",
     "xpack.apm.serviceGroups.tour.editGroups.content": "Utilisez l'option de modification pour changer le nom, la requête ou les détails de ce groupe de services.",
     "xpack.apm.serviceGroups.tour.editGroups.title": "Modifier ce groupe de services",
-    "xpack.apm.serviceGroups.tour.serviceGroups.content": "Maintenant que vous avez créé un groupe de services, votre inventaire Tous les services a été déplacé ici. Ce groupe ne peut être ni modifié ni retiré.",
-    "xpack.apm.serviceGroups.tour.serviceGroups.title": "Groupe Tous les services",
     "xpack.apm.serviceHealthStatus.critical": "Critique",
     "xpack.apm.serviceHealthStatus.healthy": "Intègre",
     "xpack.apm.serviceHealthStatus.unknown": "Inconnu",

x-pack/plugins/translations/translations/ja-JP.json

@@ -7497,6 +7497,8 @@
     "xpack.apm.serviceGroup.serviceInventory": "インベントリ",
     "xpack.apm.serviceGroup.serviceMap": "サービスマップ",
     "xpack.apm.serviceGroups.breadcrumb.title": "サービス",
+    "xpack.apm.serviceGroups.buttonGroup.allServices": "すべてのサービス",
+    "xpack.apm.serviceGroups.buttonGroup.serviceGroups": "サービスグループ",
     "xpack.apm.serviceGroups.cardsList.emptyDescription": "説明がありません",
     "xpack.apm.serviceGroups.createGroupLabel": "グループを作成",
     "xpack.apm.serviceGroups.createSuccess.toast.text": "グループは、グループの新しいサービスビューに表示されます。",
@@ -7515,8 +7517,6 @@
     "xpack.apm.serviceGroups.groupDetailsForm.invalidColorError": "有効な色値を指定してください",
     "xpack.apm.serviceGroups.groupDetailsForm.name": "名前",
     "xpack.apm.serviceGroups.groupDetailsForm.selectServices": "サービスを選択",
-    "xpack.apm.serviceGroups.list.allServices.description": "すべてのサービスを表示",
-    "xpack.apm.serviceGroups.list.allServices.name": "すべてのサービス",
     "xpack.apm.serviceGroups.list.sort.alphabetical": "アルファベット順",
     "xpack.apm.serviceGroups.list.sort.recentlyAdded": "最近追加された項目",
     "xpack.apm.serviceGroups.selectServicesForm.cancel": "キャンセル",
@@ -7537,8 +7537,6 @@
     "xpack.apm.serviceGroups.tour.dismiss": "閉じる",
     "xpack.apm.serviceGroups.tour.editGroups.content": "編集オプションを使用して、名前、クエリ、このサービスグループの詳細を変更します。",
     "xpack.apm.serviceGroups.tour.editGroups.title": "このサービスグループを編集",
-    "xpack.apm.serviceGroups.tour.serviceGroups.content": "サービスグループが作成されたため、すべてのサービスインベントリがここに移動されました。このグループは編集または削除できません。",
-    "xpack.apm.serviceGroups.tour.serviceGroups.title": "すべてのサービスグループ",
     "xpack.apm.serviceHealthStatus.critical": "重大",
     "xpack.apm.serviceHealthStatus.healthy": "正常",
     "xpack.apm.serviceHealthStatus.unknown": "不明",

x-pack/plugins/translations/translations/zh-CN.json

@@ -7514,6 +7514,8 @@
     "xpack.apm.serviceGroup.serviceInventory": "库存",
     "xpack.apm.serviceGroup.serviceMap": "服务地图",
     "xpack.apm.serviceGroups.breadcrumb.title": "服务",
+    "xpack.apm.serviceGroups.buttonGroup.allServices": "所有服务",
+    "xpack.apm.serviceGroups.buttonGroup.serviceGroups": "服务组",
     "xpack.apm.serviceGroups.cardsList.emptyDescription": "描述不可用",
     "xpack.apm.serviceGroups.createGroupLabel": "创建组",
     "xpack.apm.serviceGroups.createSuccess.toast.text": "您的组当前在组的新服务视图中可见。",
@@ -7532,8 +7534,6 @@
     "xpack.apm.serviceGroups.groupDetailsForm.invalidColorError": "请提供有效的颜色值",
     "xpack.apm.serviceGroups.groupDetailsForm.name": "名称",
     "xpack.apm.serviceGroups.groupDetailsForm.selectServices": "选择服务",
-    "xpack.apm.serviceGroups.list.allServices.description": "查看所有服务",
-    "xpack.apm.serviceGroups.list.allServices.name": "所有服务",
     "xpack.apm.serviceGroups.list.sort.alphabetical": "按字母顺序",
     "xpack.apm.serviceGroups.list.sort.recentlyAdded": "最近添加",
     "xpack.apm.serviceGroups.selectServicesForm.cancel": "取消",
@@ -7554,8 +7554,6 @@
     "xpack.apm.serviceGroups.tour.dismiss": "关闭",
     "xpack.apm.serviceGroups.tour.editGroups.content": "使用编辑选项更改此服务组的名称、查询或详情。",
     "xpack.apm.serviceGroups.tour.editGroups.title": "编辑此服务组",
-    "xpack.apm.serviceGroups.tour.serviceGroups.content": "既然您已创建服务组，您的所有服务库存已移到此处。无法编辑或移除该组。",
-    "xpack.apm.serviceGroups.tour.serviceGroups.title": "所有服务组",
     "xpack.apm.serviceHealthStatus.critical": "紧急",
     "xpack.apm.serviceHealthStatus.healthy": "运行正常",
     "xpack.apm.serviceHealthStatus.unknown": "未知",