APM header changes

x-pack/plugins/apm/public/application/index.tsx

@@ -30,11 +30,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%;
 `;
 

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>
 

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>
+    </>
   );
 }

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>
     </>
   );
 }

x-pack/plugins/apm/public/components/app/Home/index.tsx

@@ -8,7 +8,7 @@ import {
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiTabs,
+  EuiTab,
   EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -17,13 +17,13 @@ import { $ElementType } from 'utility-types';
 import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
 import { getAlertingCapabilities } from '../../alerting/get_alert_capabilities';
 import { ApmHeader } from '../../shared/ApmHeader';
-import { EuiTabLink } from '../../shared/EuiTabLink';
 import { AnomalyDetectionSetupLink } from '../../shared/Links/apm/AnomalyDetectionSetupLink';
 import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
 import { ServiceInventoryLink } from '../../shared/Links/apm/service_inventory_link';
 import { SettingsLink } from '../../shared/Links/apm/SettingsLink';
 import { TraceOverviewLink } from '../../shared/Links/apm/TraceOverviewLink';
 import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink';
+import { MainTabs } from '../../shared/main_tabs';
 import { ServiceMap } from '../ServiceMap';
 import { ServiceInventory } from '../service_inventory';
 import { TraceOverview } from '../TraceOverview';
@@ -101,11 +101,11 @@ export function Home({ tab }: Props) {
   } = getAlertingCapabilities(plugins, core.application.capabilities);
 
   return (
-    <div>
+    <>
       <ApmHeader>
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem grow={false}>
-            <EuiTitle size="l">
+            <EuiTitle>
               <h1>APM</h1>
             </EuiTitle>
           </EuiFlexItem>
@@ -135,14 +135,14 @@ export function Home({ tab }: Props) {
           </EuiFlexItem>
         </EuiFlexGroup>
       </ApmHeader>
-      <EuiTabs>
+      <MainTabs>
         {homeTabs.map((homeTab) => (
-          <EuiTabLink isSelected={homeTab === selectedTab} key={homeTab.name}>
+          <EuiTab isSelected={homeTab === selectedTab} key={homeTab.name}>
             {homeTab.link}
-          </EuiTabLink>
+          </EuiTab>
         ))}
-      </EuiTabs>
+      </MainTabs>
       {selectedTab.render()}
-    </div>
+    </>
   );
 }

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>

x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx

@@ -4,20 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiTabs } from '@elastic/eui';
+import { EuiTab } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { isJavaAgentName, isRumAgentName } from '../../../../common/agent_name';
 import { enableServiceOverview } from '../../../../common/ui_settings_keys';
 import { useAgentName } from '../../../hooks/useAgentName';
 import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
-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 { ServiceOverviewLink } from '../../shared/Links/apm/service_overview_link';
 import { TransactionOverviewLink } from '../../shared/Links/apm/TransactionOverviewLink';
+import { MainTabs } from '../../shared/main_tabs';
 import { ErrorGroupOverview } from '../ErrorGroupOverview';
 import { ServiceMap } from '../ServiceMap';
 import { ServiceMetrics } from '../ServiceMetrics';
@@ -132,16 +132,13 @@ export function ServiceDetailTabs({ serviceName, tab }: Props) {
 
   return (
     <>
-      <EuiTabs>
+      <MainTabs>
         {tabs.map((serviceTab) => (
-          <EuiTabLink
-            isSelected={serviceTab.name === tab}
-            key={serviceTab.name}
-          >
+          <EuiTab isSelected={serviceTab.name === tab} key={serviceTab.name}>
             {serviceTab.link}
-          </EuiTabLink>
+          </EuiTab>
         ))}
-      </EuiTabs>
+      </MainTabs>
       {selectedTab ? selectedTab.render() : null}
     </>
   );

x-pack/plugins/apm/public/components/app/ServiceDetails/index.tsx

@@ -43,7 +43,7 @@ export function ServiceDetails({ match, tab }: Props) {
       <ApmHeader>
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem grow={false}>
-            <EuiTitle size="l">
+            <EuiTitle>
               <h1>{serviceName}</h1>
             </EuiTitle>
           </EuiFlexItem>

x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts

@@ -252,7 +252,6 @@ center,
 ${theme.eui.euiColorLightShade}`,
   backgroundSize: `${theme.eui.euiSizeL} ${theme.eui.euiSizeL}`,
   cursor: `${status === FETCH_STATUS.LOADING ? 'wait' : 'grab'}`,
-  margin: `-${theme.eui.gutterTypes.gutterLarge}`,
   marginTop: 0,
 });