APM header changes (#82870) (#83390)

- Make APM and UX headers size medium instead of large - Remove margin around APM main container - Make APM tabs condensed - Switch environment filter and date picker positions - Move search bar (kuery + date picker) below the tabs - Wrap pages in `EuiPage` components - Set a minimum width on the enironment selector so it doesn't collapse when loading - Don't show search bar on service map Fixes #81954.
elastic · Nov 16, 2020 · c80d770 · c80d770
1 parent 73685c7
commit c80d770
Show file tree

Hide file tree

Showing 40 changed files with 927 additions and 815 deletions.
diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx
@@ -33,11 +33,9 @@ import { ApmPluginSetupDeps } from '../plugin';
 import { createCallApmApi } from '../services/rest/createCallApmApi';
 import { createStaticIndexPattern } from '../services/rest/index_pattern';
 import { setHelpExtension } from '../setHelpExtension';
-import { px, units } from '../style/variables';
 import { setReadonlyBadge } from '../updateBadge';
 
 const MainContainer = styled.div`
-  padding: ${px(units.plus)};
   height: 100%;
 `;
 

diff --git a/x-pack/plugins/apm/public/components/app/Correlations/index.tsx b/x-pack/plugins/apm/public/components/app/Correlations/index.tsx
@@ -75,7 +75,7 @@ export function Correlations() {
 
   return (
     <>
-      <EuiTitle size="m">
+      <EuiTitle>
         <h2>Correlations</h2>
       </EuiTitle>
 

diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
@@ -8,6 +8,8 @@ import {
   EuiBadge,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiPage,
+  EuiPageBody,
   EuiPanel,
   EuiSpacer,
   EuiText,
@@ -24,6 +26,7 @@ import { useUrlParams } from '../../../hooks/useUrlParams';
 import { callApmApi } from '../../../services/rest/createCallApmApi';
 import { fontFamilyCode, fontSizes, px, units } from '../../../style/variables';
 import { ApmHeader } from '../../shared/ApmHeader';
+import { SearchBar } from '../../shared/search_bar';
 import { DetailView } from './DetailView';
 import { ErrorDistribution } from './Distribution';
 
@@ -120,7 +123,7 @@ export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
     errorGroupData.error?.error.exception?.[0].handled === false;
 
   return (
-    <div>
+    <>
       <ApmHeader>
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem grow={false}>
@@ -146,62 +149,67 @@ export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
           )}
         </EuiFlexGroup>
       </ApmHeader>
-
-      <EuiSpacer size="s" />
-
-      <EuiPanel>
-        {showDetails && (
-          <Titles>
-            <EuiText>
-              {logMessage && (
-                <Fragment>
+      <SearchBar />
+      <EuiPage>
+        <EuiPageBody>
+          <EuiPanel>
+            {showDetails && (
+              <Titles>
+                <EuiText>
+                  {logMessage && (
+                    <Fragment>
+                      <Label>
+                        {i18n.translate(
+                          'xpack.apm.errorGroupDetails.logMessageLabel',
+                          {
+                            defaultMessage: 'Log message',
+                          }
+                        )}
+                      </Label>
+                      <Message>{logMessage}</Message>
+                    </Fragment>
+                  )}
                   <Label>
                     {i18n.translate(
-                      'xpack.apm.errorGroupDetails.logMessageLabel',
+                      'xpack.apm.errorGroupDetails.exceptionMessageLabel',
                       {
-                        defaultMessage: 'Log message',
+                        defaultMessage: 'Exception message',
                       }
                     )}
                   </Label>
-                  <Message>{logMessage}</Message>
-                </Fragment>
+                  <Message>{excMessage || NOT_AVAILABLE_LABEL}</Message>
+                  <Label>
+                    {i18n.translate(
+                      'xpack.apm.errorGroupDetails.culpritLabel',
+                      {
+                        defaultMessage: 'Culprit',
+                      }
+                    )}
+                  </Label>
+                  <Culprit>{culprit || NOT_AVAILABLE_LABEL}</Culprit>
+                </EuiText>
+              </Titles>
+            )}
+            <ErrorDistribution
+              distribution={errorDistributionData}
+              title={i18n.translate(
+                'xpack.apm.errorGroupDetails.occurrencesChartLabel',
+                {
+                  defaultMessage: 'Occurrences',
+                }
               )}
-              <Label>
-                {i18n.translate(
-                  'xpack.apm.errorGroupDetails.exceptionMessageLabel',
-                  {
-                    defaultMessage: 'Exception message',
-                  }
-                )}
-              </Label>
-              <Message>{excMessage || NOT_AVAILABLE_LABEL}</Message>
-              <Label>
-                {i18n.translate('xpack.apm.errorGroupDetails.culpritLabel', {
-                  defaultMessage: 'Culprit',
-                })}
-              </Label>
-              <Culprit>{culprit || NOT_AVAILABLE_LABEL}</Culprit>
-            </EuiText>
-          </Titles>
-        )}
-        <ErrorDistribution
-          distribution={errorDistributionData}
-          title={i18n.translate(
-            'xpack.apm.errorGroupDetails.occurrencesChartLabel',
-            {
-              defaultMessage: 'Occurrences',
-            }
+            />
+          </EuiPanel>
+          <EuiSpacer size="s" />
+          {showDetails && (
+            <DetailView
+              errorGroup={errorGroupData}
+              urlParams={urlParams}
+              location={location}
+            />
           )}
-        />
-      </EuiPanel>
-      <EuiSpacer size="s" />
-      {showDetails && (
-        <DetailView
-          errorGroup={errorGroupData}
-          urlParams={urlParams}
-          location={location}
-        />
-      )}
-    </div>
+        </EuiPageBody>
+      </EuiPage>
+    </>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
@@ -7,6 +7,7 @@
 import {
   EuiFlexGroup,
   EuiFlexItem,
+  EuiPage,
   EuiPanel,
   EuiSpacer,
   EuiTitle,
@@ -19,6 +20,7 @@ import { useFetcher } from '../../../hooks/useFetcher';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { callApmApi } from '../../../services/rest/createCallApmApi';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
+import { SearchBar } from '../../shared/search_bar';
 import { ErrorDistribution } from '../ErrorGroupDetails/Distribution';
 import { ErrorGroupList } from './List';
 
@@ -95,39 +97,41 @@ function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) {
 
   return (
     <>
-      <EuiSpacer />
-      <EuiFlexGroup>
-        <EuiFlexItem grow={1}>
-          <LocalUIFilters {...localUIFiltersConfig} />
-        </EuiFlexItem>
-        <EuiFlexItem grow={7}>
-          <EuiPanel>
-            <ErrorDistribution
-              distribution={errorDistributionData}
-              title={i18n.translate(
-                'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
-                {
-                  defaultMessage: 'Error occurrences',
-                }
-              )}
-            />
-          </EuiPanel>
-
-          <EuiSpacer size="s" />
-
-          <EuiPanel>
-            <EuiTitle size="xs">
-              <h3>Errors</h3>
-            </EuiTitle>
+      <SearchBar />
+      <EuiPage>
+        <EuiFlexGroup>
+          <EuiFlexItem grow={1}>
+            <LocalUIFilters {...localUIFiltersConfig} />
+          </EuiFlexItem>
+          <EuiFlexItem grow={7}>
+            <EuiPanel>
+              <ErrorDistribution
+                distribution={errorDistributionData}
+                title={i18n.translate(
+                  'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
+                  {
+                    defaultMessage: 'Error occurrences',
+                  }
+                )}
+              />
+            </EuiPanel>
+
             <EuiSpacer size="s" />
 
-            <ErrorGroupList
-              items={errorGroupListData}
-              serviceName={serviceName}
-            />
-          </EuiPanel>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+            <EuiPanel>
+              <EuiTitle size="xs">
+                <h3>Errors</h3>
+              </EuiTitle>
+              <EuiSpacer size="s" />
+
+              <ErrorGroupList
+                items={errorGroupListData}
+                serviceName={serviceName}
+              />
+            </EuiPanel>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPage>
     </>
   );
 }

diff --git a/x-pack/plugins/apm/public/components/app/Home/index.tsx b/x-pack/plugins/apm/public/components/app/Home/index.tsx
@@ -4,79 +4,76 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiTabs, EuiTitle } from '@elastic/eui';
+import { EuiTab, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { $ElementType } from 'utility-types';
 import { ApmHeader } from '../../shared/ApmHeader';
-import { EuiTabLink } from '../../shared/EuiTabLink';
-import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
-import { ServiceInventoryLink } from '../../shared/Links/apm/service_inventory_link';
-import { TraceOverviewLink } from '../../shared/Links/apm/TraceOverviewLink';
+import { useServiceMapHref } from '../../shared/Links/apm/ServiceMapLink';
+import { useServiceInventoryHref } from '../../shared/Links/apm/service_inventory_link';
+import { useTraceOverviewHref } from '../../shared/Links/apm/TraceOverviewLink';
+import { MainTabs } from '../../shared/main_tabs';
 import { ServiceMap } from '../ServiceMap';
 import { ServiceInventory } from '../service_inventory';
 import { TraceOverview } from '../TraceOverview';
 
-const homeTabs = [
-  {
-    link: (
-      <ServiceInventoryLink>
-        {i18n.translate('xpack.apm.home.servicesTabLabel', {
-          defaultMessage: 'Services',
-        })}
-      </ServiceInventoryLink>
-    ),
-    render: () => <ServiceInventory />,
-    name: 'services',
-  },
-  {
-    link: (
-      <TraceOverviewLink>
-        {i18n.translate('xpack.apm.home.tracesTabLabel', {
-          defaultMessage: 'Traces',
-        })}
-      </TraceOverviewLink>
-    ),
-    render: () => <TraceOverview />,
-    name: 'traces',
-  },
-  {
-    link: (
-      <ServiceMapLink>
-        {i18n.translate('xpack.apm.home.serviceMapTabLabel', {
-          defaultMessage: 'Service Map',
-        })}
-      </ServiceMapLink>
-    ),
-    render: () => <ServiceMap />,
-    name: 'service-map',
-  },
-];
+interface Tab {
+  key: string;
+  href: string;
+  text: string;
+  Component: ComponentType;
+}
 
 interface Props {
   tab: 'traces' | 'services' | 'service-map';
 }
 
 export function Home({ tab }: Props) {
+  const homeTabs: Tab[] = [
+    {
+      key: 'services',
+      href: useServiceInventoryHref(),
+      text: i18n.translate('xpack.apm.home.servicesTabLabel', {
+        defaultMessage: 'Services',
+      }),
+      Component: ServiceInventory,
+    },
+    {
+      key: 'traces',
+      href: useTraceOverviewHref(),
+      text: i18n.translate('xpack.apm.home.tracesTabLabel', {
+        defaultMessage: 'Traces',
+      }),
+      Component: TraceOverview,
+    },
+    {
+      key: 'service-map',
+      href: useServiceMapHref(),
+      text: i18n.translate('xpack.apm.home.serviceMapTabLabel', {
+        defaultMessage: 'Service Map',
+      }),
+      Component: ServiceMap,
+    },
+  ];
   const selectedTab = homeTabs.find(
-    (homeTab) => homeTab.name === tab
+    (homeTab) => homeTab.key === tab
   ) as $ElementType<typeof homeTabs, number>;
 
   return (
-    <div>
+    <>
       <ApmHeader>
-        <EuiTitle size="l">
+        <EuiTitle>
           <h1>APM</h1>
         </EuiTitle>
       </ApmHeader>
-      <EuiTabs>
-        {homeTabs.map((homeTab) => (
-          <EuiTabLink isSelected={homeTab === selectedTab} key={homeTab.name}>
-            {homeTab.link}
-          </EuiTabLink>
+      <MainTabs>
+        {homeTabs.map(({ href, key, text }) => (
+          <EuiTab href={href} isSelected={key === selectedTab.key} key={key}>
+            {text}
+          </EuiTab>
         ))}
-      </EuiTabs>
-      {selectedTab.render()}
-    </div>
+      </MainTabs>
+      <selectedTab.Component />
+    </>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
@@ -21,7 +21,7 @@ export function RumHome() {
     <CsmSharedContextProvider>
       <EuiFlexGroup>
         <EuiFlexItem>
-          <EuiTitle size="l">
+          <EuiTitle>
             <h1 className="eui-textNoWrap">{UX_LABEL}</h1>
           </EuiTitle>
         </EuiFlexItem>