Empty prompt and loading spinner for service map (#78382)

* Empty prompt for service map

To be shown when fetching returns no elements. Match the style of the license prompt.

* Add loading spinner

x-pack/plugins/apm/public/components/app/ServiceMap/empty_prompt.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiEmptyPrompt } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink';
+
+export function EmptyPrompt() {
+  return (
+    <EuiEmptyPrompt
+      iconType="eyeClosed"
+      iconColor="subdued"
+      title={
+        <h2>
+          {i18n.translate('xpack.apm.serviceMap.noServicesPromptTitle', {
+            defaultMessage: 'No services available',
+          })}
+        </h2>
+      }
+      body={
+        <p>
+          {i18n.translate('xpack.apm.serviceMap.noServicesPromptDescription', {
+            defaultMessage:
+              'We can’t find any services to map within the currently selected time range and environment. Please try another range or check the environment selected. If you don’t have any services, please use our setup instructions to get started.',
+          })}
+        </p>
+      }
+      actions={<SetupInstructionsLink buttonFill={true} />}
+    />
+  );
+}

x-pack/plugins/apm/public/components/app/ServiceMap/index.test.tsx

@@ -9,16 +9,30 @@ import { CoreStart } from 'kibana/public';
 import React, { ReactNode } from 'react';
 import { createKibanaReactContext } from 'src/plugins/kibana_react/public';
 import { License } from '../../../../../licensing/common/license';
+import { EuiThemeProvider } from '../../../../../observability/public';
+import { FETCH_STATUS } from '../../../../../observability/public/hooks/use_fetcher';
 import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext';
 import { LicenseContext } from '../../../context/LicenseContext';
+import * as useFetcherModule from '../../../hooks/useFetcher';
 import { ServiceMap } from './';
 
 const KibanaReactContext = createKibanaReactContext({
   usageCollection: { reportUiStats: () => {} },
 } as Partial<CoreStart>);
 
+const activeLicense = new License({
+  signature: 'active test signature',
+  license: {
+    expiryDateInMillis: 0,
+    mode: 'platinum',
+    status: 'active',
+    type: 'platinum',
+    uid: '1',
+  },
+});
+
 const expiredLicense = new License({
-  signature: 'test signature',
+  signature: 'expired test signature',
   license: {
     expiryDateInMillis: 0,
     mode: 'platinum',
@@ -28,26 +42,58 @@ const expiredLicense = new License({
   },
 });
 
-function Wrapper({ children }: { children?: ReactNode }) {
-  return (
-    <KibanaReactContext.Provider>
-      <LicenseContext.Provider value={expiredLicense}>
-        <MockApmPluginContextWrapper>{children}</MockApmPluginContextWrapper>
-      </LicenseContext.Provider>
-    </KibanaReactContext.Provider>
-  );
+function createWrapper(license: License | null) {
+  return ({ children }: { children?: ReactNode }) => {
+    return (
+      <EuiThemeProvider>
+        <KibanaReactContext.Provider>
+          <LicenseContext.Provider value={license || undefined}>
+            <MockApmPluginContextWrapper>
+              {children}
+            </MockApmPluginContextWrapper>
+          </LicenseContext.Provider>
+        </KibanaReactContext.Provider>
+      </EuiThemeProvider>
+    );
+  };
 }
 
 describe('ServiceMap', () => {
-  describe('with an inactive license', () => {
+  describe('with no license', () => {
+    it('renders null', async () => {
+      expect(
+        await render(<ServiceMap />, {
+          wrapper: createWrapper(null),
+        }).queryByTestId('ServiceMap')
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('with an expired license', () => {
     it('renders the license banner', async () => {
       expect(
-        (
+        await render(<ServiceMap />, {
+          wrapper: createWrapper(expiredLicense),
+        }).findAllByText(/Platinum/)
+      ).toHaveLength(1);
+    });
+  });
+
+  describe('with an active license', () => {
+    describe('with an empty response', () => {
+      it('renders the empty banner', async () => {
+        jest.spyOn(useFetcherModule, 'useFetcher').mockReturnValueOnce({
+          data: { elements: [] },
+          refetch: () => {},
+          status: FETCH_STATUS.SUCCESS,
+        });
+
+        expect(
           await render(<ServiceMap />, {
-            wrapper: Wrapper,
-          }).findAllByText(/Platinum/)
-        ).length
-      ).toBeGreaterThan(0);
+            wrapper: createWrapper(activeLicense),
+          }).findAllByText(/No services available/)
+        ).toHaveLength(1);
+      });
     });
   });
 });

x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx

@@ -4,14 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import React, { ReactNode } from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
 import {
   invalidLicenseMessage,
   isActivePlatinumLicense,
 } from '../../../../common/service_map';
-import { useFetcher } from '../../../hooks/useFetcher';
+import { FETCH_STATUS, useFetcher } from '../../../hooks/useFetcher';
 import { useLicense } from '../../../hooks/useLicense';
 import { useTheme } from '../../../hooks/useTheme';
 import { useUrlParams } from '../../../hooks/useUrlParams';
@@ -21,19 +21,47 @@ import { Controls } from './Controls';
 import { Cytoscape } from './Cytoscape';
 import { getCytoscapeDivStyle } from './cytoscapeOptions';
 import { EmptyBanner } from './EmptyBanner';
+import { EmptyPrompt } from './empty_prompt';
 import { Popover } from './Popover';
 import { useRefDimensions } from './useRefDimensions';
 
 interface ServiceMapProps {
   serviceName?: string;
 }
 
+function PromptContainer({ children }: { children: ReactNode }) {
+  return (
+    <EuiFlexGroup
+      alignItems="center"
+      justifyContent="spaceAround"
+      // Set the height to give it some top margin
+      style={{ height: '60vh' }}
+    >
+      <EuiFlexItem
+        grow={false}
+        style={{ width: 600, textAlign: 'center' as const }}
+      >
+        {children}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
+
+function LoadingSpinner() {
+  return (
+    <EuiLoadingSpinner
+      size="xl"
+      style={{ position: 'absolute', top: '50%', left: '50%' }}
+    />
+  );
+}
+
 export function ServiceMap({ serviceName }: ServiceMapProps) {
   const theme = useTheme();
   const license = useLicense();
   const { urlParams } = useUrlParams();
 
-  const { data = { elements: [] } } = useFetcher(() => {
+  const { data = { elements: [] }, status } = useFetcher(() => {
     // When we don't have a license or a valid license, don't make the request.
     if (!license || !isActivePlatinumLicense(license)) {
       return;
@@ -65,37 +93,41 @@ export function ServiceMap({ serviceName }: ServiceMapProps) {
     return null;
   }
 
-  return isActivePlatinumLicense(license) ? (
+  if (!isActivePlatinumLicense(license)) {
+    return (
+      <PromptContainer>
+        <LicensePrompt text={invalidLicenseMessage} />
+      </PromptContainer>
+    );
+  }
+
+  if (status === FETCH_STATUS.SUCCESS && data.elements.length === 0) {
+    return (
+      <PromptContainer>
+        <EmptyPrompt />
+      </PromptContainer>
+    );
+  }
+
+  return (
     <div
+      data-test-subj="ServiceMap"
       style={{
         height: height - parseInt(theme.eui.gutterTypes.gutterLarge, 10),
       }}
       ref={ref}
     >
       <Cytoscape
-        elements={data?.elements ?? []}
+        elements={data.elements}
         height={height}
         serviceName={serviceName}
         style={getCytoscapeDivStyle(theme)}
       >
         <Controls />
         {serviceName && <EmptyBanner />}
+        {status === FETCH_STATUS.LOADING && <LoadingSpinner />}
         <Popover focusedServiceName={serviceName} />
       </Cytoscape>
     </div>
-  ) : (
-    <EuiFlexGroup
-      alignItems="center"
-      justifyContent="spaceAround"
-      // Set the height to give it some top margin
-      style={{ height: '60vh' }}
-    >
-      <EuiFlexItem
-        grow={false}
-        style={{ width: 600, textAlign: 'center' as const }}
-      >
-        <LicensePrompt text={invalidLicenseMessage} />
-      </EuiFlexItem>
-    </EuiFlexGroup>
   );
 }