[APM] Visual improvements for new APM layout with left navigation (#1…

…01360)
elastic · Jun 7, 2021 · 999faec · 999faec
1 parent a4b4da3
commit 999faec
Show file tree

Hide file tree

Showing 15 changed files with 262 additions and 276 deletions.
diff --git a/src/plugins/kibana_react/public/app_links/redirect_app_link.tsx b/src/plugins/kibana_react/public/app_links/redirect_app_link.tsx
@@ -12,7 +12,7 @@ import useObservable from 'react-use/lib/useObservable';
 import { ApplicationStart } from 'src/core/public';
 import { createNavigateToUrlClickHandler } from './click_handler';
 
-interface RedirectCrossAppLinksProps {
+interface RedirectCrossAppLinksProps extends React.HTMLAttributes<HTMLDivElement> {
   application: ApplicationStart;
   className?: string;
   'data-test-subj'?: string;

diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx
@@ -10,7 +10,11 @@ import ReactDOM from 'react-dom';
 import 'react-vis/dist/style.css';
 import type { ObservabilityRuleTypeRegistry } from '../../../observability/public';
 import { ConfigSchema } from '../';
-import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
+import {
+  AppMountParameters,
+  CoreStart,
+  APP_WRAPPER_CLASS,
+} from '../../../../../src/core/public';
 import { ApmPluginSetupDeps, ApmPluginStartDeps } from '../plugin';
 import { createCallApmApi } from '../services/rest/createCallApmApi';
 import { createStaticIndexPattern } from '../services/rest/index_pattern';
@@ -58,6 +62,9 @@ export const renderApp = ({
     console.log('Error creating static index pattern', e);
   });
 
+  // add .kbnAppWrappers class to root element
+  element.classList.add(APP_WRAPPER_CLASS);
+
   ReactDOM.render(
     <ApmAppRoot
       apmPluginContextValue={apmPluginContextValue}

diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiPanel } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect } from 'react';
 import { toMountPoint } from '../../../../../../../src/plugins/kibana_react/public';
@@ -127,17 +127,15 @@ export function ServiceInventory() {
           </EuiFlexItem>
         )}
         <EuiFlexItem>
-          <EuiPanel hasShadow={false}>
-            <ServiceList
-              items={servicesData.items}
-              noItemsMessage={
-                <NoServicesMessage
-                  historicalDataFound={servicesData.hasHistoricalData}
-                  status={servicesStatus}
-                />
-              }
-            />
-          </EuiPanel>
+          <ServiceList
+            items={servicesData.items}
+            noItemsMessage={
+              <NoServicesMessage
+                historicalDataFound={servicesData.hasHistoricalData}
+                status={servicesStatus}
+              />
+            }
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
     </>

diff --git a/x-pack/plugins/apm/public/components/app/service_map/index.tsx b/x-pack/plugins/apm/public/components/app/service_map/index.tsx
@@ -5,7 +5,12 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiPanel,
+} from '@elastic/eui';
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { isActivePlatinumLicense } from '../../../../common/license_check';
 import { useTrackPageview } from '../../../../../observability/public';
@@ -97,6 +102,10 @@ export function ServiceMap({
 
   const { ref, height } = useRefDimensions();
 
+  // Temporary hack to work around bottom padding introduced by EuiPage
+  const PADDING_BOTTOM = 24;
+  const heightWithPadding = height - PADDING_BOTTOM;
+
   useTrackPageview({ app: 'apm', path: 'service_map' });
   useTrackPageview({ app: 'apm', path: 'service_map', delay: 15000 });
 
@@ -137,20 +146,25 @@ export function ServiceMap({
   return (
     <>
       <SearchBar showKueryBar={false} />
-
-      <div data-test-subj="ServiceMap" style={{ height }} ref={ref}>
-        <Cytoscape
-          elements={data.elements}
-          height={height}
-          serviceName={serviceName}
-          style={getCytoscapeDivStyle(theme, status)}
+      <EuiPanel paddingSize="none">
+        <div
+          data-test-subj="ServiceMap"
+          style={{ height: heightWithPadding }}
+          ref={ref}
         >
-          <Controls />
-          {serviceName && <EmptyBanner />}
-          {status === FETCH_STATUS.LOADING && <LoadingSpinner />}
-          <Popover focusedServiceName={serviceName} />
-        </Cytoscape>
-      </div>
+          <Cytoscape
+            elements={data.elements}
+            height={heightWithPadding}
+            serviceName={serviceName}
+            style={getCytoscapeDivStyle(theme, status)}
+          >
+            <Controls />
+            {serviceName && <EmptyBanner />}
+            {status === FETCH_STATUS.LOADING && <LoadingSpinner />}
+            <Popover focusedServiceName={serviceName} />
+          </Cytoscape>
+        </div>
+      </EuiPanel>
     </>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
@@ -39,13 +39,6 @@ const Truncate = euiStyled.span`
   ${truncate(px(unit * 12))}
 `;
 
-const MetadataFlexGroup = euiStyled(EuiFlexGroup)`
-  border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
-  margin-bottom: ${({ theme }) => theme.eui.paddingSizes.m};
-  padding: ${({ theme }) =>
-    `${theme.eui.paddingSizes.m} 0 0 ${theme.eui.paddingSizes.m}`};
-`;
-
 interface ServiceNodeMetricsProps {
   serviceName: string;
   serviceNodeName: string;
@@ -117,55 +110,60 @@ export function ServiceNodeMetrics({
           />
         </EuiCallOut>
       ) : (
-        <MetadataFlexGroup gutterSize="xl">
-          <EuiFlexItem grow={false}>
-            <EuiStat
-              titleSize="s"
-              description={i18n.translate(
-                'xpack.apm.serviceNodeMetrics.serviceName',
-                {
-                  defaultMessage: 'Service name',
+        <EuiPanel hasShadow={false}>
+          <EuiFlexGroup gutterSize="xl">
+            <EuiFlexItem grow={false}>
+              <EuiStat
+                titleSize="s"
+                description={i18n.translate(
+                  'xpack.apm.serviceNodeMetrics.serviceName',
+                  {
+                    defaultMessage: 'Service name',
+                  }
+                )}
+                title={
+                  <EuiToolTip content={serviceName}>
+                    <Truncate>{serviceName}</Truncate>
+                  </EuiToolTip>
+                }
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiStat
+                titleSize="s"
+                isLoading={isLoading}
+                description={i18n.translate(
+                  'xpack.apm.serviceNodeMetrics.host',
+                  {
+                    defaultMessage: 'Host',
+                  }
+                )}
+                title={
+                  <EuiToolTip content={host}>
+                    <Truncate>{host}</Truncate>
+                  </EuiToolTip>
                 }
-              )}
-              title={
-                <EuiToolTip content={serviceName}>
-                  <Truncate>{serviceName}</Truncate>
-                </EuiToolTip>
-              }
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiStat
-              titleSize="s"
-              isLoading={isLoading}
-              description={i18n.translate('xpack.apm.serviceNodeMetrics.host', {
-                defaultMessage: 'Host',
-              })}
-              title={
-                <EuiToolTip content={host}>
-                  <Truncate>{host}</Truncate>
-                </EuiToolTip>
-              }
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiStat
-              titleSize="s"
-              isLoading={isLoading}
-              description={i18n.translate(
-                'xpack.apm.serviceNodeMetrics.containerId',
-                {
-                  defaultMessage: 'Container ID',
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiStat
+                titleSize="s"
+                isLoading={isLoading}
+                description={i18n.translate(
+                  'xpack.apm.serviceNodeMetrics.containerId',
+                  {
+                    defaultMessage: 'Container ID',
+                  }
+                )}
+                title={
+                  <EuiToolTip content={containerId}>
+                    <Truncate>{containerId}</Truncate>
+                  </EuiToolTip>
                 }
-              )}
-              title={
-                <EuiToolTip content={containerId}>
-                  <Truncate>{containerId}</Truncate>
-                </EuiToolTip>
-              }
-            />
-          </EuiFlexItem>
-        </MetadataFlexGroup>
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
       )}
 
       {agentName && (

diff --git a/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx
@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiPanel, EuiToolTip } from '@elastic/eui';
+import { EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
@@ -142,18 +142,16 @@ function ServiceNodeOverview({ serviceName }: ServiceNodeOverviewProps) {
   ];
 
   return (
-    <EuiPanel hasShadow={false}>
-      <ManagedTable
-        noItemsMessage={i18n.translate('xpack.apm.jvmsTable.noJvmsLabel', {
-          defaultMessage: 'No JVMs were found',
-        })}
-        items={items}
-        columns={columns}
-        initialPageSize={INITIAL_PAGE_SIZE}
-        initialSortField={INITIAL_SORT_FIELD}
-        initialSortDirection={INITIAL_SORT_DIRECTION}
-      />
-    </EuiPanel>
+    <ManagedTable
+      noItemsMessage={i18n.translate('xpack.apm.jvmsTable.noJvmsLabel', {
+        defaultMessage: 'No JVMs were found',
+      })}
+      items={items}
+      columns={columns}
+      initialPageSize={INITIAL_PAGE_SIZE}
+      initialSortField={INITIAL_SORT_FIELD}
+      initialSortDirection={INITIAL_SORT_DIRECTION}
+    />
   );
 }
 

diff --git a/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx b/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { EuiPanel } from '@elastic/eui';
 import React from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
@@ -51,12 +50,10 @@ export function TraceOverview() {
     <>
       <SearchBar />
 
-      <EuiPanel hasShadow={false}>
-        <TraceList
-          items={data.items}
-          isLoading={status === FETCH_STATUS.LOADING}
-        />
-      </EuiPanel>
+      <TraceList
+        items={data.items}
+        isLoading={status === FETCH_STATUS.LOADING}
+      />
     </>
   );
 }