Add button to view full service map (#59394) (#60079)

Closes #59325. It does sometimes cause the map to not be centered when switching, which will be addressed in a separate PR as part of #59164. Also add a missing prop to the popover. It was causing the focus button there to never be disabled.
elastic · Mar 13, 2020 · 0e0801b · 0e0801b
1 parent bdd1f83
commit 0e0801b
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 34 deletions.
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Controls.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Controls.tsx
@@ -4,13 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButtonIcon, EuiPanel } from '@elastic/eui';
+import { EuiButtonIcon, EuiPanel, EuiToolTip } from '@elastic/eui';
 import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { CytoscapeContext } from './Cytoscape';
 import { animationOptions, nodeHeight } from './cytoscapeOptions';
+import { getAPMHref } from '../../shared/Links/apm/APMLink';
+import { useUrlParams } from '../../../hooks/useUrlParams';
+import { APMQueryParams } from '../../shared/Links/url_helpers';
 
 const ControlsContainer = styled('div')`
   left: ${theme.gutterTypes.gutterMedium};
@@ -28,7 +31,7 @@ const ZoomInButton = styled(Button)`
   margin-bottom: ${theme.paddingSizes.s};
 `;
 
-const ZoomPanel = styled(EuiPanel)`
+const Panel = styled(EuiPanel)`
   margin-bottom: ${theme.paddingSizes.s};
 `;
 
@@ -47,7 +50,8 @@ function doZoom(cy: cytoscape.Core | undefined, increment: number) {
 
 export function Controls() {
   const cy = useContext(CytoscapeContext);
-
+  const { urlParams } = useUrlParams();
+  const currentSearch = urlParams.kuery ?? '';
   const [zoom, setZoom] = useState((cy && cy.zoom()) || 1);
 
   useEffect(() => {
@@ -86,45 +90,73 @@ export function Controls() {
   const minZoom = cy.minZoom();
   const isMinZoom = zoom === minZoom;
   const increment = (maxZoom - minZoom) / steps;
+
+  const centerLabel = i18n.translate('xpack.apm.serviceMap.center', {
+    defaultMessage: 'Center'
+  });
+  const viewFullMapLabel = i18n.translate('xpack.apm.serviceMap.viewFullMap', {
+    defaultMessage: 'View full service map'
+  });
   const zoomInLabel = i18n.translate('xpack.apm.serviceMap.zoomIn', {
     defaultMessage: 'Zoom in'
   });
   const zoomOutLabel = i18n.translate('xpack.apm.serviceMap.zoomOut', {
     defaultMessage: 'Zoom out'
   });
-  const centerLabel = i18n.translate('xpack.apm.serviceMap.center', {
-    defaultMessage: 'Center'
-  });
+
+  const showViewFullMapButton = cy.nodes('.primary').length > 0;
 
   return (
     <ControlsContainer>
-      <ZoomPanel hasShadow={true} paddingSize="none">
-        <ZoomInButton
-          aria-label={zoomInLabel}
-          color="text"
-          disabled={isMaxZoom}
-          iconType="plusInCircleFilled"
-          onClick={zoomIn}
-          title={zoomInLabel}
-        />
-        <Button
-          aria-label={zoomOutLabel}
-          color="text"
-          disabled={isMinZoom}
-          iconType="minusInCircleFilled"
-          onClick={zoomOut}
-          title={zoomOutLabel}
-        />
-      </ZoomPanel>
-      <EuiPanel hasShadow={true} paddingSize="none">
-        <Button
-          aria-label={centerLabel}
-          color="text"
-          iconType="crosshairs"
-          onClick={center}
-          title={centerLabel}
-        />
-      </EuiPanel>
+      <Panel hasShadow={true} paddingSize="none">
+        <EuiToolTip anchorClassName="eui-displayInline" content={zoomInLabel}>
+          <ZoomInButton
+            aria-label={zoomInLabel}
+            color="text"
+            disabled={isMaxZoom}
+            iconType="plusInCircleFilled"
+            onClick={zoomIn}
+          />
+        </EuiToolTip>
+        <EuiToolTip anchorClassName="eui-displayInline" content={zoomOutLabel}>
+          <Button
+            aria-label={zoomOutLabel}
+            color="text"
+            disabled={isMinZoom}
+            iconType="minusInCircleFilled"
+            onClick={zoomOut}
+          />
+        </EuiToolTip>
+      </Panel>
+      <Panel hasShadow={true} paddingSize="none">
+        <EuiToolTip anchorClassName="eui-displayInline" content={centerLabel}>
+          <Button
+            aria-label={centerLabel}
+            color="text"
+            iconType="crosshairs"
+            onClick={center}
+          />
+        </EuiToolTip>
+      </Panel>
+      {showViewFullMapButton && (
+        <Panel hasShadow={true} paddingSize="none">
+          <EuiToolTip
+            anchorClassName="eui-displayInline"
+            content={viewFullMapLabel}
+          >
+            <Button
+              aria-label={viewFullMapLabel}
+              color="text"
+              href={getAPMHref(
+                '/service-map',
+                currentSearch,
+                urlParams as APMQueryParams
+              )}
+              iconType="apps"
+            />
+          </EuiToolTip>
+        </Panel>
+      )}
     </ControlsContainer>
   );
 }
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/index.tsx
@@ -96,11 +96,12 @@ export function Popover({ focusedServiceName }: PopoverProps) {
       style={popoverStyle}
     >
       <Contents
-        selectedNodeData={selectedNodeData}
         isService={isService}
         label={label}
         onFocusClick={deselect}
+        selectedNodeData={selectedNodeData}
         selectedNodeServiceName={selectedNodeServiceName}
+        focusedServiceName={focusedServiceName}
       />
     </EuiPopover>
   );