From 7ff2bc97f48914a4487998e6e66370ad8beba506 Mon Sep 17 00:00:00 2001
From: Kate Patticha <aikaterini.patticha@elastic.co>
Date: Wed, 11 May 2022 12:28:17 +0200
Subject: [PATCH] Remove additional request and display  icon only for the
 service groups

---
 .../templates/service_group_template.tsx      | 21 ++-----------------
 1 file changed, 2 insertions(+), 19 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx
index 9cfcf5ea3d102e..49c06215579848 100644
--- a/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx
+++ b/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx
@@ -11,7 +11,6 @@ import {
   EuiFlexItem,
   EuiButtonIcon,
   EuiLoadingContent,
-  EuiLoadingSpinner,
 } from '@elastic/eui';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
@@ -20,7 +19,7 @@ import {
   KibanaPageTemplateProps,
 } from '@kbn/kibana-react-plugin/public';
 import { enableServiceGroups } from '@kbn/observability-plugin/public';
-import { useFetcher, FETCH_STATUS } from '../../../hooks/use_fetcher';
+import { useFetcher } from '../../../hooks/use_fetcher';
 import { ApmPluginStartDeps } from '../../../plugin';
 import { useApmRouter } from '../../../hooks/use_apm_router';
 import { useAnyOfApmParams } from '../../../hooks/use_apm_params';
@@ -61,19 +60,8 @@ export function ServiceGroupTemplate({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const { data: serviceGroupsData, status: serviceGroupsStatus } = useFetcher(
-    (callApmApi) => {
-      if (!serviceGroupId && isServiceGroupsEnabled) {
-        return callApmApi('GET /internal/apm/service-groups');
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
   const serviceGroupName = data?.serviceGroup.groupName;
   const loadingServiceGroupName = !!serviceGroupId && !serviceGroupName;
-  const hasServiceGroups = !!serviceGroupsData?.serviceGroups.length;
   const serviceGroupsLink = router.link('/service-groups', {
     query: { ...query, serviceGroup: '' },
   });
@@ -86,12 +74,7 @@ export function ServiceGroupTemplate({
       justifyContent="flexStart"
       responsive={false}
     >
-      {serviceGroupsStatus === FETCH_STATUS.LOADING && (
-        <EuiFlexItem grow={false}>
-          <EuiLoadingSpinner size="l" />
-        </EuiFlexItem>
-      )}
-      {(serviceGroupId || hasServiceGroups) && (
+      {serviceGroupId && (
         <EuiFlexItem grow={false}>
           <EuiButtonIcon
             iconType="layers"