From 2e51140d9c297abfd6394d61bff85aa0b93d9006 Mon Sep 17 00:00:00 2001
From: Katerina Patticha <aikaterini.patticha@elastic.co>
Date: Fri, 20 May 2022 15:34:29 +0200
Subject: [PATCH] Show service group icon only when there are service groups
 (#131138)

* Show service group icon when there are service groups

* Fix fix errors

* Remove additional request and display  icon only for the service groups

* Revert "Remove additional request and display  icon only for the service groups"

This reverts commit 7ff2bc97f48914a4487998e6e66370ad8beba506.

* Add dependencies

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../templates/service_group_template.tsx      | 56 +++++++++++++------
 1 file changed, 38 insertions(+), 18 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 bcf0b44814089..006b3cc67bd5e 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,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';
@@ -51,17 +52,29 @@ export function ServiceGroupTemplate({
     query: { serviceGroup: serviceGroupId },
   } = useAnyOfApmParams('/services', '/service-map');
 
-  const { data } = useFetcher((callApmApi) => {
-    if (serviceGroupId) {
-      return callApmApi('GET /internal/apm/service-group', {
-        params: { query: { serviceGroup: serviceGroupId } },
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { data } = useFetcher(
+    (callApmApi) => {
+      if (serviceGroupId) {
+        return callApmApi('GET /internal/apm/service-group', {
+          params: { query: { serviceGroup: serviceGroupId } },
+        });
+      }
+    },
+    [serviceGroupId]
+  );
+
+  const { data: serviceGroupsData, status: serviceGroupsStatus } = useFetcher(
+    (callApmApi) => {
+      if (!serviceGroupId && isServiceGroupsEnabled) {
+        return callApmApi('GET /internal/apm/service-groups');
+      }
+    },
+    [serviceGroupId, isServiceGroupsEnabled]
+  );
 
   const serviceGroupName = data?.serviceGroup.groupName;
   const loadingServiceGroupName = !!serviceGroupId && !serviceGroupName;
+  const hasServiceGroups = !!serviceGroupsData?.serviceGroups.length;
   const serviceGroupsLink = router.link('/service-groups', {
     query: { ...query, serviceGroup: '' },
   });
@@ -74,15 +87,22 @@ export function ServiceGroupTemplate({
       justifyContent="flexStart"
       responsive={false}
     >
-      <EuiFlexItem grow={false}>
-        <EuiButtonIcon
-          iconType="layers"
-          color="text"
-          aria-label="Go to service groups"
-          iconSize="xl"
-          href={serviceGroupsLink}
-        />
-      </EuiFlexItem>
+      {serviceGroupsStatus === FETCH_STATUS.LOADING && (
+        <EuiFlexItem grow={false}>
+          <EuiLoadingSpinner size="l" />
+        </EuiFlexItem>
+      )}
+      {(serviceGroupId || hasServiceGroups) && (
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            iconType="layers"
+            color="text"
+            aria-label="Go to service groups"
+            iconSize="xl"
+            href={serviceGroupsLink}
+          />
+        </EuiFlexItem>
+      )}
       <EuiFlexItem grow={false}>
         {loadingServiceGroupName ? (
           <EuiLoadingContent lines={2} style={{ width: 180, height: 40 }} />