[APM] Fit service map to container (#56336) (#56463)

* Set the height of the service map dynamically * Move the loading overlay from the outside to the inside of the Cytoscape container * Remove the EUI spacer from the Home and ServiceDetailTabs components and add it to the individual components that use them
elastic · Jan 31, 2020 · 4dbe14d · 4dbe14d
1 parent 0e15c37
commit 4dbe14d
Show file tree

Hide file tree

Showing 13 changed files with 227 additions and 169 deletions.
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
@@ -95,39 +95,42 @@ const ErrorGroupOverview: React.FC = () => {
   }
 
   return (
-    <EuiFlexGroup>
-      <EuiFlexItem grow={1}>
-        <LocalUIFilters {...localUIFiltersConfig} />
-      </EuiFlexItem>
-      <EuiFlexItem grow={7}>
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiPanel>
-              <ErrorDistribution
-                distribution={errorDistributionData}
-                title={i18n.translate(
-                  'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
-                  {
-                    defaultMessage: 'Error occurrences'
-                  }
-                )}
-              />
-            </EuiPanel>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+    <>
+      <EuiSpacer />
+      <EuiFlexGroup>
+        <EuiFlexItem grow={1}>
+          <LocalUIFilters {...localUIFiltersConfig} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={7}>
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiPanel>
+                <ErrorDistribution
+                  distribution={errorDistributionData}
+                  title={i18n.translate(
+                    'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
+                    {
+                      defaultMessage: 'Error occurrences'
+                    }
+                  )}
+                />
+              </EuiPanel>
+            </EuiFlexItem>
+          </EuiFlexGroup>
 
-        <EuiSpacer size="s" />
-
-        <EuiPanel>
-          <EuiTitle size="xs">
-            <h3>Errors</h3>
-          </EuiTitle>
           <EuiSpacer size="s" />
 
-          <ErrorGroupList items={errorGroupListData} />
-        </EuiPanel>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+          <EuiPanel>
+            <EuiTitle size="xs">
+              <h3>Errors</h3>
+            </EuiTitle>
+            <EuiSpacer size="s" />
+
+            <ErrorGroupList items={errorGroupListData} />
+          </EuiPanel>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
   );
 };
 

diff --git a/x-pack/legacy/plugins/apm/public/components/app/Home/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/Home/index.tsx
@@ -5,27 +5,26 @@
  */
 
 import {
+  EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiTitle,
-  EuiButtonEmpty,
   EuiTabs,
-  EuiSpacer
+  EuiTitle
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { $ElementType } from 'utility-types';
+import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
 import { ApmHeader } from '../../shared/ApmHeader';
-import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink';
-import { ServiceOverview } from '../ServiceOverview';
-import { TraceOverview } from '../TraceOverview';
-import { ServiceOverviewLink } from '../../shared/Links/apm/ServiceOverviewLink';
-import { TraceOverviewLink } from '../../shared/Links/apm/TraceOverviewLink';
 import { EuiTabLink } from '../../shared/EuiTabLink';
-import { SettingsLink } from '../../shared/Links/apm/SettingsLink';
 import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
+import { ServiceOverviewLink } from '../../shared/Links/apm/ServiceOverviewLink';
+import { SettingsLink } from '../../shared/Links/apm/SettingsLink';
+import { TraceOverviewLink } from '../../shared/Links/apm/TraceOverviewLink';
+import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink';
 import { ServiceMap } from '../ServiceMap';
-import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
+import { ServiceOverview } from '../ServiceOverview';
+import { TraceOverview } from '../TraceOverview';
 
 function getHomeTabs({
   serviceMapEnabled = false
@@ -116,7 +115,6 @@ export function Home({ tab }: Props) {
           </EuiTabLink>
         ))}
       </EuiTabs>
-      <EuiSpacer />
       {selectedTab.render()}
     </div>
   );

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
@@ -4,24 +4,24 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiTabs } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { EuiTabs, EuiSpacer } from '@elastic/eui';
-import { ErrorGroupOverview } from '../ErrorGroupOverview';
-import { TransactionOverview } from '../TransactionOverview';
-import { ServiceMetrics } from '../ServiceMetrics';
-import { isRumAgentName, isJavaAgentName } from '../../../../common/agent_name';
-import { EuiTabLink } from '../../shared/EuiTabLink';
+import { isJavaAgentName, isRumAgentName } from '../../../../common/agent_name';
+import { useAgentName } from '../../../hooks/useAgentName';
+import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
 import { useUrlParams } from '../../../hooks/useUrlParams';
-import { TransactionOverviewLink } from '../../shared/Links/apm/TransactionOverviewLink';
+import { EuiTabLink } from '../../shared/EuiTabLink';
 import { ErrorOverviewLink } from '../../shared/Links/apm/ErrorOverviewLink';
 import { MetricOverviewLink } from '../../shared/Links/apm/MetricOverviewLink';
+import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
 import { ServiceNodeOverviewLink } from '../../shared/Links/apm/ServiceNodeOverviewLink';
-import { ServiceNodeOverview } from '../ServiceNodeOverview';
-import { useAgentName } from '../../../hooks/useAgentName';
+import { TransactionOverviewLink } from '../../shared/Links/apm/TransactionOverviewLink';
+import { ErrorGroupOverview } from '../ErrorGroupOverview';
 import { ServiceMap } from '../ServiceMap';
-import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
-import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
+import { ServiceMetrics } from '../ServiceMetrics';
+import { ServiceNodeOverview } from '../ServiceNodeOverview';
+import { TransactionOverview } from '../TransactionOverview';
 
 interface Props {
   tab: 'transactions' | 'errors' | 'metrics' | 'nodes' | 'service-map';
@@ -124,7 +124,6 @@ export function ServiceDetailTabs({ tab }: Props) {
           </EuiTabLink>
         ))}
       </EuiTabs>
-      <EuiSpacer />
       {selectedTab ? selectedTab.render() : null}
     </>
   );

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx
@@ -25,6 +25,7 @@ export const CytoscapeContext = createContext<cytoscape.Core | undefined>(
 interface CytoscapeProps {
   children?: ReactNode;
   elements: cytoscape.ElementDefinition[];
+  height: number;
   serviceName?: string;
   style?: CSSProperties;
 }
@@ -54,11 +55,16 @@ function useCytoscape(options: cytoscape.CytoscapeOptions) {
 export function Cytoscape({
   children,
   elements,
+  height,
   serviceName,
   style
 }: CytoscapeProps) {
   const [ref, cy] = useCytoscape({ ...cytoscapeOptions, elements });
 
+  // Add the height to the div style. The height is a separate prop because it
+  // is required and can trigger rendering when changed.
+  const divStyle = { ...style, height };
+
   // Trigger a custom "data" event when data changes
   useEffect(() => {
     if (cy) {
@@ -108,7 +114,7 @@ export function Cytoscape({
 
   return (
     <CytoscapeContext.Provider value={cy}>
-      <div ref={ref} style={style}>
+      <div ref={ref} style={divStyle}>
         {children}
       </div>
     </CytoscapeContext.Provider>

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/LoadingOverlay.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/LoadingOverlay.tsx
@@ -31,16 +31,11 @@ const ProgressBarContainer = styled.div`
 `;
 
 interface Props {
-  children: React.ReactNode;
   isLoading: boolean;
   percentageLoaded: number;
 }
 
-export const LoadingOverlay = ({
-  children,
-  isLoading,
-  percentageLoaded
-}: Props) => (
+export const LoadingOverlay = ({ isLoading, percentageLoaded }: Props) => (
   <Container>
     {isLoading && (
       <Overlay>
@@ -61,6 +56,5 @@ export const LoadingOverlay = ({
         </EuiText>
       </Overlay>
     )}
-    {children}
   </Container>
 );
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
@@ -30,13 +30,13 @@ import { getCytoscapeElements } from './get_cytoscape_elements';
 import { LoadingOverlay } from './LoadingOverlay';
 import { PlatinumLicensePrompt } from './PlatinumLicensePrompt';
 import { Popover } from './Popover';
+import { useRefHeight } from './useRefHeight';
 
 interface ServiceMapProps {
   serviceName?: string;
 }
 
 const cytoscapeDivStyle = {
-  height: '85vh',
   background: `linear-gradient(
   90deg,
   ${theme.euiPageBackgroundColor}
@@ -52,7 +52,8 @@ linear-gradient(
 center,
 ${theme.euiColorLightShade}`,
   backgroundSize: `${theme.euiSizeL} ${theme.euiSizeL}`,
-  margin: `-${theme.gutterTypes.gutterLarge}`
+  margin: `-${theme.gutterTypes.gutterLarge}`,
+  marginTop: 0
 };
 
 const MAX_REQUESTS = 5;
@@ -198,17 +199,27 @@ export function ServiceMap({ serviceName }: ServiceMapProps) {
     license?.isActive &&
     (license?.type === 'platinum' || license?.type === 'trial');
 
+  const [wrapperRef, height] = useRefHeight();
+
   return isValidPlatinumLicense ? (
-    <LoadingOverlay isLoading={isLoading} percentageLoaded={percentageLoaded}>
+    <div
+      style={{ height: height - parseInt(theme.gutterTypes.gutterLarge, 10) }}
+      ref={wrapperRef}
+    >
       <Cytoscape
         elements={renderedElements.current}
         serviceName={serviceName}
+        height={height}
         style={cytoscapeDivStyle}
       >
+        <LoadingOverlay
+          isLoading={isLoading}
+          percentageLoaded={percentageLoaded}
+        />
         <Controls />
         <Popover focusedServiceName={serviceName} />
       </Cytoscape>
-    </LoadingOverlay>
+    </div>
   ) : (
     <PlatinumLicensePrompt />
   );

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/useRefHeight.ts b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/useRefHeight.ts
@@ -0,0 +1,20 @@
+/*
+ * 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 { MutableRefObject, useRef } from 'react';
+import { useWindowSize } from 'react-use';
+
+export function useRefHeight(): [
+  MutableRefObject<HTMLDivElement | null>,
+  number
+] {
+  const ref = useRef<HTMLDivElement>(null);
+  const windowHeight = useWindowSize().height;
+  const topOffset = ref.current?.getBoundingClientRect()?.top ?? 0;
+
+  const height = ref.current ? windowHeight - topOffset : 0;
+
+  return [ref, height];
+}
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMetrics/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMetrics/index.tsx
@@ -43,24 +43,27 @@ export function ServiceMetrics({ agentName }: ServiceMetricsProps) {
   );
 
   return (
-    <EuiFlexGroup>
-      <EuiFlexItem grow={1}>
-        <LocalUIFilters {...localFiltersConfig} />
-      </EuiFlexItem>
-      <EuiFlexItem grow={7}>
-        <ChartsSyncContextProvider>
-          <EuiFlexGrid columns={2} gutterSize="s">
-            {data.charts.map(chart => (
-              <EuiFlexItem key={chart.key}>
-                <EuiPanel>
-                  <MetricsChart start={start} end={end} chart={chart} />
-                </EuiPanel>
-              </EuiFlexItem>
-            ))}
-          </EuiFlexGrid>
-          <EuiSpacer size="xxl" />
-        </ChartsSyncContextProvider>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <>
+      <EuiSpacer />
+      <EuiFlexGroup>
+        <EuiFlexItem grow={1}>
+          <LocalUIFilters {...localFiltersConfig} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={7}>
+          <ChartsSyncContextProvider>
+            <EuiFlexGrid columns={2} gutterSize="s">
+              {data.charts.map(chart => (
+                <EuiFlexItem key={chart.key}>
+                  <EuiPanel>
+                    <MetricsChart start={start} end={end} chart={chart} />
+                  </EuiPanel>
+                </EuiFlexItem>
+              ))}
+            </EuiFlexGrid>
+            <EuiSpacer size="xxl" />
+          </ChartsSyncContextProvider>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
   );
 }