From f7b20665305b5210cf8b59e893b13e6658baec68 Mon Sep 17 00:00:00 2001
From: Kate Patticha <aikaterini.patticha@elastic.co>
Date: Thu, 28 Apr 2022 13:13:07 +0200
Subject: [PATCH] Show service group icon when there are service groups

---
 .../templates/service_group_template.tsx      | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 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 51a8f03c74a6e..2142220d69cae 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';
@@ -60,8 +61,18 @@ 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');
+      }
+    },
+    []
+  );
+
   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 +85,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 }} />