Fixes to service map single node banner (#60072) (#60515)

* Fixes to service map single node banner

* Make the banner 95% width so it takes up the full width
* Check the actual count of cytoscape nodes to determine whether or not to show the banner
* Make the Cytoscape component able to take a function as children so we can access the cytoscape instance directly
* Update the .NET icon

* rework

* Update x-pack/legacy/plugins/apm/public/components/app/ServiceMap/EmptyBanner.tsx

Co-Authored-By: Oliver Gupte <[email protected]>

Co-authored-by: Oliver Gupte <[email protected]>

Co-authored-by: Oliver Gupte <[email protected]>

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

@@ -0,0 +1,62 @@
+/*
+ * 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 { act, render, wait } from '@testing-library/react';
+import cytoscape from 'cytoscape';
+import React, { FunctionComponent } from 'react';
+import { MockApmPluginContextWrapper } from '../../../utils/testHelpers';
+import { CytoscapeContext } from './Cytoscape';
+import { EmptyBanner } from './EmptyBanner';
+
+const cy = cytoscape({});
+
+const wrapper: FunctionComponent = ({ children }) => (
+  <MockApmPluginContextWrapper>
+    <CytoscapeContext.Provider value={cy}>{children}</CytoscapeContext.Provider>
+  </MockApmPluginContextWrapper>
+);
+
+describe('EmptyBanner', () => {
+  describe('when cy is undefined', () => {
+    it('renders null', () => {
+      const noCytoscapeWrapper: FunctionComponent = ({ children }) => (
+        <MockApmPluginContextWrapper>
+          <CytoscapeContext.Provider value={undefined}>
+            {children}
+          </CytoscapeContext.Provider>
+        </MockApmPluginContextWrapper>
+      );
+      const component = render(<EmptyBanner />, {
+        wrapper: noCytoscapeWrapper
+      });
+
+      expect(component.container.children).toHaveLength(0);
+    });
+  });
+
+  describe('with no nodes', () => {
+    it('renders null', () => {
+      const component = render(<EmptyBanner />, {
+        wrapper
+      });
+
+      expect(component.container.children).toHaveLength(0);
+    });
+  });
+
+  describe('with one node', () => {
+    it('does not render null', async () => {
+      const component = render(<EmptyBanner />, { wrapper });
+
+      await act(async () => {
+        cy.add({ data: { id: 'test id' } });
+        await wait(() => {
+          expect(component.container.children.length).toBeGreaterThan(0);
+        });
+      });
+    });
+  });
+});

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

@@ -7,37 +7,70 @@
 import { EuiCallOut } from '@elastic/eui';
 import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
+import { CytoscapeContext } from './Cytoscape';
 
-const EmptyBannerCallOut = styled(EuiCallOut)`
+const EmptyBannerContainer = styled.div`
   margin: ${lightTheme.gutterTypes.gutterSmall};
   /* Add some extra margin so it displays to the right of the controls. */
-  margin-left: calc(
-    ${lightTheme.gutterTypes.gutterLarge} +
-      ${lightTheme.gutterTypes.gutterExtraLarge}
+  left: calc(
+    ${lightTheme.gutterTypes.gutterExtraLarge} +
+      ${lightTheme.gutterTypes.gutterSmall}
   );
   position: absolute;
   z-index: 1;
 `;
 
 export function EmptyBanner() {
+  const cy = useContext(CytoscapeContext);
+  const [nodeCount, setNodeCount] = useState(0);
+
+  useEffect(() => {
+    const handler: cytoscape.EventHandler = event =>
+      setNodeCount(event.cy.nodes().length);
+
+    if (cy) {
+      cy.on('add remove', 'node', handler);
+    }
+
+    return () => {
+      if (cy) {
+        cy.removeListener('add remove', 'node', handler);
+      }
+    };
+  }, [cy]);
+
+  // Only show if there's a single node.
+  if (!cy || nodeCount !== 1) {
+    return null;
+  }
+
+  // Since we're absolutely positioned, we need to get the full width and
+  // subtract the space for controls and margins.
+  const width =
+    cy.width() -
+    parseInt(lightTheme.gutterTypes.gutterExtraLarge, 10) -
+    parseInt(lightTheme.gutterTypes.gutterLarge, 10);
+
   return (
-    <EmptyBannerCallOut
-      title={i18n.translate('xpack.apm.serviceMap.emptyBanner.title', {
-        defaultMessage: "Looks like there's only a single service."
-      })}
-    >
-      {i18n.translate('xpack.apm.serviceMap.emptyBanner.message', {
-        defaultMessage:
-          "We will map out connected services and external requests if we can detect them. Please make sure you're running the latest version of the APM agent."
-      })}{' '}
-      <ElasticDocsLink section="/apm/get-started" path="/agents.html">
-        {i18n.translate('xpack.apm.serviceMap.emptyBanner.docsLink', {
-          defaultMessage: 'Learn more in the docs'
+    <EmptyBannerContainer style={{ width }}>
+      <EuiCallOut
+        title={i18n.translate('xpack.apm.serviceMap.emptyBanner.title', {
+          defaultMessage: "Looks like there's only a single service."
         })}
-      </ElasticDocsLink>
-    </EmptyBannerCallOut>
+      >
+        {i18n.translate('xpack.apm.serviceMap.emptyBanner.message', {
+          defaultMessage:
+            "We will map out connected services and external requests if we can detect them. Please make sure you're running the latest version of the APM agent."
+        })}{' '}
+        <ElasticDocsLink section="/apm/get-started" path="/agents.html">
+          {i18n.translate('xpack.apm.serviceMap.emptyBanner.docsLink', {
+            defaultMessage: 'Learn more in the docs'
+          })}
+        </ElasticDocsLink>
+      </EuiCallOut>
+    </EmptyBannerContainer>
   );
 }

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

@@ -182,9 +182,7 @@ export function ServiceMap({ serviceName }: ServiceMapProps) {
         style={cytoscapeDivStyle}
       >
         <Controls />
-        {serviceName && renderedElements.current.length === 1 && (
-          <EmptyBanner />
-        )}
+        {serviceName && <EmptyBanner />}
         <Popover focusedServiceName={serviceName} />
       </Cytoscape>
     </div>