Revert "Remove additional request and display icon only for the servi…

…ce groups"

This reverts commit 7ff2bc9.

x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx

@@ -11,6 +11,7 @@ import {
   EuiFlexItem,
   EuiButtonIcon,
   EuiLoadingContent,
+  EuiLoadingSpinner,
 } from '@elastic/eui';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
@@ -19,7 +20,7 @@ import {
   KibanaPageTemplateProps,
 } from '@kbn/kibana-react-plugin/public';
 import { enableServiceGroups } from '@kbn/observability-plugin/public';
-import { useFetcher } from '../../../hooks/use_fetcher';
+import { useFetcher, FETCH_STATUS } from '../../../hooks/use_fetcher';
 import { ApmPluginStartDeps } from '../../../plugin';
 import { useApmRouter } from '../../../hooks/use_apm_router';
 import { useAnyOfApmParams } from '../../../hooks/use_apm_params';
@@ -60,8 +61,19 @@ 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: '' },
   });
@@ -74,7 +86,12 @@ export function ServiceGroupTemplate({
       justifyContent="flexStart"
       responsive={false}
     >
-      {serviceGroupId && (
+      {serviceGroupsStatus === FETCH_STATUS.LOADING && (
+        <EuiFlexItem grow={false}>
+          <EuiLoadingSpinner size="l" />
+        </EuiFlexItem>
+      )}
+      {(serviceGroupId || hasServiceGroups) && (
         <EuiFlexItem grow={false}>
           <EuiButtonIcon
             iconType="layers"