From 26352d52c50d1ca3ea65c4e2b01cfe535b5f99ad Mon Sep 17 00:00:00 2001 From: Nathan L Smith Date: Wed, 18 Mar 2020 12:20:43 -0500 Subject: [PATCH] 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 Co-authored-by: Oliver Gupte Co-authored-by: Oliver Gupte --- .../app/ServiceMap/EmptyBanner.test.tsx | 62 +++++++++ .../components/app/ServiceMap/EmptyBanner.tsx | 71 +++++++--- .../app/ServiceMap/icons/dot-net.svg | 126 +----------------- .../components/app/ServiceMap/index.tsx | 4 +- 4 files changed, 116 insertions(+), 147 deletions(-) create mode 100644 x-pack/legacy/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx new file mode 100644 index 0000000000000..d61dea80666a0 --- /dev/null +++ b/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 }) => ( + + {children} + +); + +describe('EmptyBanner', () => { + describe('when cy is undefined', () => { + it('renders null', () => { + const noCytoscapeWrapper: FunctionComponent = ({ children }) => ( + + + {children} + + + ); + const component = render(, { + wrapper: noCytoscapeWrapper + }); + + expect(component.container.children).toHaveLength(0); + }); + }); + + describe('with no nodes', () => { + it('renders null', () => { + const component = render(, { + wrapper + }); + + expect(component.container.children).toHaveLength(0); + }); + }); + + describe('with one node', () => { + it('does not render null', async () => { + const component = render(, { wrapper }); + + await act(async () => { + cy.add({ data: { id: 'test id' } }); + await wait(() => { + expect(component.container.children.length).toBeGreaterThan(0); + }); + }); + }); + }); +}); diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/EmptyBanner.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/EmptyBanner.tsx index 418430e37b21e..464bf166eb80f 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/EmptyBanner.tsx +++ b/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 ( - - {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." - })}{' '} - - {i18n.translate('xpack.apm.serviceMap.emptyBanner.docsLink', { - defaultMessage: 'Learn more in the docs' + + - + > + {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." + })}{' '} + + {i18n.translate('xpack.apm.serviceMap.emptyBanner.docsLink', { + defaultMessage: 'Learn more in the docs' + })} + + + ); } diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons/dot-net.svg b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons/dot-net.svg index 9f7427f0e1001..da7f1a8fde45d 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons/dot-net.svg +++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons/dot-net.svg @@ -1,127 +1,3 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx index 7bbb77a49c84b..1b0486d7d6def 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx +++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx @@ -182,9 +182,7 @@ export function ServiceMap({ serviceName }: ServiceMapProps) { style={cytoscapeDivStyle} > - {serviceName && renderedElements.current.length === 1 && ( - - )} + {serviceName && }