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 7ff2bc9. * Add dependencies Co-authored-by: Kibana Machine <[email protected]>
elastic · May 20, 2022 · 2e51140 · 2e51140
1 parent 24cbb32
commit 2e51140
Showing 1 changed file with 38 additions and 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
@@ -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 }} />