[APM] Replace side nav with tabs on Settings page (#101460)

Co-authored-by: Casper Hübertz <casper@formgeist.com>

x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/ServicePage/ServicePage.tsx

@@ -5,14 +5,7 @@
  * 2.0.
  */
 
-import {
-  EuiTitle,
-  EuiSpacer,
-  EuiPanel,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButton,
-} from '@elastic/eui';
+import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { isString } from 'lodash';
@@ -100,17 +93,7 @@ export function ServicePage({ newConfig, setNewConfig, onClickNext }: Props) {
   );
 
   return (
-    <EuiPanel paddingSize="m">
-      <EuiTitle size="xs">
-        <h3>
-          {i18n.translate('xpack.apm.agentConfig.servicePage.title', {
-            defaultMessage: 'Choose service',
-          })}
-        </h3>
-      </EuiTitle>
-
-      <EuiSpacer size="m" />
-
+    <>
       {/* Service name options */}
       <FormRowSelect
         title={i18n.translate(
@@ -207,6 +190,6 @@ export function ServicePage({ newConfig, setNewConfig, onClickNext }: Props) {
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </EuiPanel>
+    </>
   );
 }

x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/SettingsPage/SettingsPage.tsx

@@ -15,11 +15,10 @@ import {
   EuiForm,
   EuiHealth,
   EuiLoadingSpinner,
-  EuiPanel,
   EuiSpacer,
   EuiStat,
   EuiText,
-  EuiTitle,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo, useState } from 'react';
@@ -136,79 +135,55 @@ export function SettingsPage({
           }}
         >
           {/* Selected Service panel */}
-          <EuiPanel paddingSize="m">
-            <EuiTitle size="s">
-              <h3>
-                {i18n.translate('xpack.apm.agentConfig.chooseService.title', {
-                  defaultMessage: 'Choose service',
-                })}
-              </h3>
-            </EuiTitle>
 
-            <EuiSpacer size="m" />
-
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                <EuiStat
-                  titleSize="xs"
-                  title={
-                    isLoading ? '-' : getOptionLabel(newConfig.service.name)
-                  }
-                  description={i18n.translate(
-                    'xpack.apm.agentConfig.chooseService.service.name.label',
-                    { defaultMessage: 'Service name' }
-                  )}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiStat
-                  titleSize="xs"
-                  title={
-                    isLoading
-                      ? '-'
-                      : getOptionLabel(newConfig.service.environment)
-                  }
-                  description={i18n.translate(
-                    'xpack.apm.agentConfig.chooseService.service.environment.label',
-                    { defaultMessage: 'Environment' }
-                  )}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                {!isEditMode && (
-                  <EuiButton onClick={onClickEdit} iconType="pencil">
-                    {i18n.translate(
-                      'xpack.apm.agentConfig.chooseService.editButton',
-                      { defaultMessage: 'Edit' }
-                    )}
-                  </EuiButton>
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiStat
+                titleSize="xs"
+                title={isLoading ? '-' : getOptionLabel(newConfig.service.name)}
+                description={i18n.translate(
+                  'xpack.apm.agentConfig.chooseService.service.name.label',
+                  { defaultMessage: 'Service name' }
                 )}
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPanel>
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiStat
+                titleSize="xs"
+                title={
+                  isLoading
+                    ? '-'
+                    : getOptionLabel(newConfig.service.environment)
+                }
+                description={i18n.translate(
+                  'xpack.apm.agentConfig.chooseService.service.environment.label',
+                  { defaultMessage: 'Environment' }
+                )}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              {!isEditMode && (
+                <EuiButton onClick={onClickEdit} iconType="pencil">
+                  {i18n.translate(
+                    'xpack.apm.agentConfig.chooseService.editButton',
+                    { defaultMessage: 'Edit' }
+                  )}
+                </EuiButton>
+              )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
 
-          <EuiSpacer size="m" />
+          <EuiHorizontalRule />
 
           {/* Settings panel */}
-          <EuiPanel paddingSize="m">
-            <EuiTitle size="s">
-              <h3>
-                {i18n.translate('xpack.apm.agentConfig.settings.title', {
-                  defaultMessage: 'Configuration options',
-                })}
-              </h3>
-            </EuiTitle>
 
-            <EuiSpacer size="m" />
-
-            {isLoading ? (
-              <div style={{ textAlign: 'center' }}>
-                <EuiLoadingSpinner size="m" />
-              </div>
-            ) : (
-              renderSettings({ unsavedChanges, newConfig, setNewConfig })
-            )}
-          </EuiPanel>
+          {isLoading ? (
+            <div style={{ textAlign: 'center' }}>
+              <EuiLoadingSpinner size="m" />
+            </div>
+          ) : (
+            renderSettings({ unsavedChanges, newConfig, setNewConfig })
+          )}
         </form>
       </EuiForm>
       <EuiSpacer size="xxl" />

x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.tsx

@@ -109,7 +109,15 @@ export function AgentConfigurationCreateEdit({
 
   return (
     <>
-      <EuiTitle>
+      <EuiText color="subdued">
+        {i18n.translate('xpack.apm.agentConfig.newConfig.description', {
+          defaultMessage: `Fine-tune your agent configuration from within the APM app. Changes are automatically propagated to your APM agents, so there’s no need to redeploy.`,
+        })}
+      </EuiText>
+
+      <EuiSpacer size="m" />
+
+      <EuiTitle size="s">
         <h2>
           {isEditMode
             ? i18n.translate('xpack.apm.agentConfig.editConfigTitle', {
@@ -121,12 +129,6 @@ export function AgentConfigurationCreateEdit({
         </h2>
       </EuiTitle>
 
-      <EuiText size="s">
-        {i18n.translate('xpack.apm.agentConfig.newConfig.description', {
-          defaultMessage: `Fine-tune your agent configuration from within the APM app. Changes are automatically propagated to your APM agents, so there’s no need to redeploy.`,
-        })}
-      </EuiText>
-
       <EuiSpacer size="m" />
 
       {pageStep === 'choose-service-step' && (

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

@@ -10,7 +10,6 @@ import {
   EuiButton,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPanel,
   EuiSpacer,
   EuiTitle,
   EuiText,
@@ -42,44 +41,36 @@ export function AgentConfigurations() {
 
   return (
     <>
-      <EuiTitle>
-        <h2>
-          {i18n.translate('xpack.apm.agentConfig.titleText', {
-            defaultMessage: 'Agent central configuration',
-          })}
-        </h2>
-      </EuiTitle>
-      <EuiSpacer size="s" />
       <EuiText color="subdued">
         {i18n.translate('xpack.apm.settings.agentConfig.descriptionText', {
           defaultMessage: `Fine-tune your agent configuration from within the APM app. Changes are automatically propagated to your APM agents, so there’s no need to redeploy.`,
         })}
       </EuiText>
-      <EuiSpacer size="l" />
-      <EuiPanel>
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="s">
-              <h2>
-                {i18n.translate(
-                  'xpack.apm.agentConfig.configurationsPanelTitle',
-                  { defaultMessage: 'Configurations' }
-                )}
-              </h2>
-            </EuiTitle>
-          </EuiFlexItem>
 
-          {hasConfigurations ? <CreateConfigurationButton /> : null}
-        </EuiFlexGroup>
+      <EuiSpacer size="m" />
 
-        <EuiSpacer size="m" />
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="s">
+            <h2>
+              {i18n.translate(
+                'xpack.apm.agentConfig.configurationsPanelTitle',
+                { defaultMessage: 'Configurations' }
+              )}
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
 
-        <AgentConfigurationList
-          status={status}
-          configurations={data.configurations}
-          refetch={refetch}
-        />
-      </EuiPanel>
+        {hasConfigurations ? <CreateConfigurationButton /> : null}
+      </EuiFlexGroup>
+
+      <EuiSpacer size="m" />
+
+      <AgentConfigurationList
+        status={status}
+        configurations={data.configurations}
+        refetch={refetch}
+      />
     </>
   );
 }

x-pack/plugins/apm/public/components/app/Settings/ApmIndices/index.test.tsx

@@ -26,7 +26,7 @@ describe('ApmIndices', () => {
 
     expect(getByText('Indices')).toMatchInlineSnapshot(`
       <h2
-        class="euiTitle euiTitle--medium"
+        class="euiTitle euiTitle--small"
       >
         Indices
       </h2>

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

@@ -13,7 +13,6 @@ import {
   EuiFlexItem,
   EuiForm,
   EuiFormRow,
-  EuiPanel,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -176,100 +175,101 @@ export function ApmIndices() {
 
   return (
     <>
-      <EuiTitle>
+      <EuiText color="subdued">
+        {i18n.translate('xpack.apm.settings.apmIndices.description', {
+          defaultMessage: `The APM UI uses index patterns to query your APM indices. If you've customized the index names that APM Server writes events to, you may need to update these patterns for the APM UI to work. Settings here take precedence over those set in kibana.yml.`,
+        })}
+      </EuiText>
+
+      <EuiSpacer size="m" />
+
+      <EuiTitle size="s">
         <h2>
           {i18n.translate('xpack.apm.settings.apmIndices.title', {
             defaultMessage: 'Indices',
           })}
         </h2>
       </EuiTitle>
-      <EuiSpacer size="s" />
-      <EuiText color="subdued">
-        {i18n.translate('xpack.apm.settings.apmIndices.description', {
-          defaultMessage: `The APM UI uses index patterns to query your APM indices. If you've customized the index names that APM Server writes events to, you may need to update these patterns for the APM UI to work. Settings here take precedence over those set in kibana.yml.`,
-        })}
-      </EuiText>
-      <EuiSpacer size="l" />
-      <EuiPanel>
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiForm>
-              {APM_INDEX_LABELS.map(({ configurationName, label }) => {
-                const matchedConfiguration = data.apmIndexSettings.find(
-                  ({ configurationName: configName }) =>
-                    configName === configurationName
-                );
-                const defaultValue = matchedConfiguration
-                  ? matchedConfiguration.defaultValue
-                  : '';
-                const savedUiIndexValue = apmIndices[configurationName] || '';
-                return (
-                  <EuiFormRow
-                    key={configurationName}
-                    label={label}
-                    helpText={i18n.translate(
-                      'xpack.apm.settings.apmIndices.helpText',
+
+      <EuiSpacer size="m" />
+
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiForm>
+            {APM_INDEX_LABELS.map(({ configurationName, label }) => {
+              const matchedConfiguration = data.apmIndexSettings.find(
+                ({ configurationName: configName }) =>
+                  configName === configurationName
+              );
+              const defaultValue = matchedConfiguration
+                ? matchedConfiguration.defaultValue
+                : '';
+              const savedUiIndexValue = apmIndices[configurationName] || '';
+              return (
+                <EuiFormRow
+                  key={configurationName}
+                  label={label}
+                  helpText={i18n.translate(
+                    'xpack.apm.settings.apmIndices.helpText',
+                    {
+                      defaultMessage:
+                        'Overrides {configurationName}: {defaultValue}',
+                      values: { configurationName, defaultValue },
+                    }
+                  )}
+                  fullWidth
+                >
+                  <EuiFieldText
+                    disabled={!canSave}
+                    fullWidth
+                    name={configurationName}
+                    placeholder={defaultValue}
+                    value={savedUiIndexValue}
+                    onChange={handleChangeIndexConfigurationEvent}
+                  />
+                </EuiFormRow>
+              );
+            })}
+            <EuiSpacer />
+            <EuiFlexGroup justifyContent="flexEnd">
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty onClick={refetch}>
+                  {i18n.translate(
+                    'xpack.apm.settings.apmIndices.cancelButton',
+                    { defaultMessage: 'Cancel' }
+                  )}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiToolTip
+                  content={
+                    !canSave &&
+                    i18n.translate(
+                      'xpack.apm.settings.apmIndices.noPermissionTooltipLabel',
                       {
                         defaultMessage:
-                          'Overrides {configurationName}: {defaultValue}',
-                        values: { configurationName, defaultValue },
+                          "Your user role doesn't have permissions to change APM indices",
                       }
-                    )}
-                    fullWidth
+                    )
+                  }
+                >
+                  <EuiButton
+                    fill
+                    onClick={handleApplyChangesEvent}
+                    isLoading={isSaving}
+                    isDisabled={!canSave}
                   >
-                    <EuiFieldText
-                      disabled={!canSave}
-                      fullWidth
-                      name={configurationName}
-                      placeholder={defaultValue}
-                      value={savedUiIndexValue}
-                      onChange={handleChangeIndexConfigurationEvent}
-                    />
-                  </EuiFormRow>
-                );
-              })}
-              <EuiSpacer />
-              <EuiFlexGroup justifyContent="flexEnd">
-                <EuiFlexItem grow={false}>
-                  <EuiButtonEmpty onClick={refetch}>
                     {i18n.translate(
-                      'xpack.apm.settings.apmIndices.cancelButton',
-                      { defaultMessage: 'Cancel' }
+                      'xpack.apm.settings.apmIndices.applyButton',
+                      { defaultMessage: 'Apply changes' }
                     )}
-                  </EuiButtonEmpty>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiToolTip
-                    content={
-                      !canSave &&
-                      i18n.translate(
-                        'xpack.apm.settings.apmIndices.noPermissionTooltipLabel',
-                        {
-                          defaultMessage:
-                            "Your user role doesn't have permissions to change APM indices",
-                        }
-                      )
-                    }
-                  >
-                    <EuiButton
-                      fill
-                      onClick={handleApplyChangesEvent}
-                      isLoading={isSaving}
-                      isDisabled={!canSave}
-                    >
-                      {i18n.translate(
-                        'xpack.apm.settings.apmIndices.applyButton',
-                        { defaultMessage: 'Apply changes' }
-                      )}
-                    </EuiButton>
-                  </EuiToolTip>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiForm>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer size="m" />
-      </EuiPanel>
+                  </EuiButton>
+                </EuiToolTip>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiForm>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </>
   );
 }

x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx

@@ -8,7 +8,6 @@
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPanel,
   EuiTitle,
   EuiText,
   EuiSpacer,
@@ -83,62 +82,51 @@ export function CustomLinkOverview() {
           }}
         />
       )}
-      <EuiPanel>
-        <EuiFlexGroup gutterSize="none" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup alignItems="center" gutterSize="none">
+
+      <EuiText color="subdued">
+        {i18n.translate('xpack.apm.settings.customizeUI.customLink.info', {
+          defaultMessage:
+            'These links will be shown in the Actions context menu in selected areas of the app, e.g. by the transactions detail.',
+        })}
+      </EuiText>
+
+      <EuiSpacer size="m" />
+
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="s">
+            <h2>
+              {i18n.translate('xpack.apm.settings.customizeUI.customLink', {
+                defaultMessage: 'Custom Links',
+              })}
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        {hasValidLicense && !showEmptyPrompt && (
+          <EuiFlexItem>
+            <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
               <EuiFlexItem grow={false}>
-                <EuiTitle size="s">
-                  <EuiFlexGroup
-                    alignItems="center"
-                    gutterSize="none"
-                    responsive={false}
-                  >
-                    <EuiFlexItem grow={false}>
-                      <h2>
-                        {i18n.translate(
-                          'xpack.apm.settings.customizeUI.customLink',
-                          {
-                            defaultMessage: 'Custom Links',
-                          }
-                        )}
-                      </h2>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiTitle>
+                <CreateCustomLinkButton onClick={onCreateCustomLinkClick} />
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
-          {hasValidLicense && !showEmptyPrompt && (
-            <EuiFlexItem>
-              <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
-                <EuiFlexItem grow={false}>
-                  <CreateCustomLinkButton onClick={onCreateCustomLinkClick} />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-        <EuiSpacer size="xs" />
-        <EuiText color="subdued" size="s">
-          {i18n.translate('xpack.apm.settings.customizeUI.customLink.info', {
-            defaultMessage:
-              'These links will be shown in the Actions context menu in selected areas of the app, e.g. by the transactions detail.',
-          })}
-        </EuiText>
-        {hasValidLicense ? (
-          showEmptyPrompt ? (
-            <EmptyPrompt onCreateCustomLinkClick={onCreateCustomLinkClick} />
-          ) : (
-            <CustomLinkTable
-              items={customLinks}
-              onCustomLinkSelected={setCustomLinkSelected}
-            />
-          )
-        ) : (
-          <LicensePrompt text={INVALID_LICENSE} />
         )}
-      </EuiPanel>
+      </EuiFlexGroup>
+
+      <EuiSpacer size="m" />
+
+      {hasValidLicense ? (
+        showEmptyPrompt ? (
+          <EmptyPrompt onCreateCustomLinkClick={onCreateCustomLinkClick} />
+        ) : (
+          <CustomLinkTable
+            items={customLinks}
+            onCustomLinkSelected={setCustomLinkSelected}
+          />
+        )
+      ) : (
+        <LicensePrompt text={INVALID_LICENSE} />
+      )}
     </>
   );
 }

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

@@ -6,28 +6,8 @@
  */
 
 import React from 'react';
-import { EuiTitle, EuiSpacer, EuiText } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import { CustomLinkOverview } from './CustomLink';
 
 export function CustomizeUI() {
-  return (
-    <>
-      <EuiTitle>
-        <h2>
-          {i18n.translate('xpack.apm.settings.customizeApp.title', {
-            defaultMessage: 'Customize app',
-          })}
-        </h2>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <EuiText color="subdued">
-        {i18n.translate('xpack.apm.settings.customizeApp.description', {
-          defaultMessage: `Extend the APM app experience with the following settings.`,
-        })}
-      </EuiText>
-      <EuiSpacer size="l" />
-      <CustomLinkOverview />
-    </>
-  );
+  return <CustomLinkOverview />;
 }

x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/add_environments.tsx

@@ -7,7 +7,6 @@
 
 import React, { useState } from 'react';
 import {
-  EuiPanel,
   EuiTitle,
   EuiText,
   EuiSpacer,
@@ -70,29 +69,27 @@ export function AddEnvironments({
 
   if (!canCreateJob) {
     return (
-      <EuiPanel>
-        <EuiEmptyPrompt
-          iconType="alert"
-          body={<>{ML_ERRORS.MISSING_WRITE_PRIVILEGES}</>}
-        />
-      </EuiPanel>
+      <EuiEmptyPrompt
+        iconType="alert"
+        body={<>{ML_ERRORS.MISSING_WRITE_PRIVILEGES}</>}
+      />
     );
   }
 
   const isLoading = status === FETCH_STATUS.LOADING;
   return (
-    <EuiPanel>
-      <EuiTitle>
+    <>
+      <EuiTitle size="s">
         <h2>
           {i18n.translate(
             'xpack.apm.settings.anomalyDetection.addEnvironments.titleText',
-            {
-              defaultMessage: 'Select environments',
-            }
+            { defaultMessage: 'Select environments' }
           )}
         </h2>
       </EuiTitle>
+
       <EuiSpacer size="l" />
+
       <EuiText>
         {i18n.translate(
           'xpack.apm.settings.anomalyDetection.addEnvironments.descriptionText',
@@ -181,6 +178,6 @@ export function AddEnvironments({
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="l" />
-    </EuiPanel>
+    </>
   );
 }

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

@@ -6,8 +6,6 @@
  */
 
 import React, { useState } from 'react';
-import { EuiTitle, EuiSpacer, EuiText } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import { EuiPanel, EuiEmptyPrompt } from '@elastic/eui';
 import { ML_ERRORS } from '../../../../../common/anomaly_detection';
 import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
@@ -66,20 +64,6 @@ export function AnomalyDetection() {
 
   return (
     <>
-      <EuiTitle>
-        <h2>
-          {i18n.translate('xpack.apm.settings.anomalyDetection.titleText', {
-            defaultMessage: 'Anomaly detection',
-          })}
-        </h2>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <EuiText color="subdued">
-        {i18n.translate('xpack.apm.settings.anomalyDetection.descriptionText', {
-          defaultMessage: `Machine Learning's anomaly detection integration enables application health status indicators for services in each configured environment by identifying anomalies in latency.`,
-        })}
-      </EuiText>
-      <EuiSpacer size="l" />
       {viewAddEnvironments ? (
         <AddEnvironments
           currentEnvironments={data.jobs.map(({ environment }) => environment)}

x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx

@@ -9,7 +9,6 @@ import {
   EuiButton,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPanel,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -66,7 +65,28 @@ export function JobsList({ data, status, onAddEnvironments }: Props) {
   const { jobs, hasLegacyJobs } = data;
 
   return (
-    <EuiPanel>
+    <>
+      <EuiText color="subdued">
+        <FormattedMessage
+          id="xpack.apm.settings.anomalyDetection.jobList.mlDescriptionText"
+          defaultMessage="To add anomaly detection to a new environment, create a machine learning job. Existing machine learning jobs can be managed in {mlJobsLink}."
+          values={{
+            mlJobsLink: (
+              <MLManageJobsLink>
+                {i18n.translate(
+                  'xpack.apm.settings.anomalyDetection.jobList.mlDescriptionText.mlJobsLinkText',
+                  {
+                    defaultMessage: 'Machine Learning',
+                  }
+                )}
+              </MLManageJobsLink>
+            ),
+          }}
+        />
+      </EuiText>
+
+      <EuiSpacer size="m" />
+
       <EuiFlexGroup>
         <EuiFlexItem>
           <EuiTitle size="s">
@@ -91,25 +111,9 @@ export function JobsList({ data, status, onAddEnvironments }: Props) {
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiText size="s" color="subdued">
-        <FormattedMessage
-          id="xpack.apm.settings.anomalyDetection.jobList.mlDescriptionText"
-          defaultMessage="To add anomaly detection to a new environment, create a machine learning job. Existing machine learning jobs can be managed in {mlJobsLink}."
-          values={{
-            mlJobsLink: (
-              <MLManageJobsLink>
-                {i18n.translate(
-                  'xpack.apm.settings.anomalyDetection.jobList.mlDescriptionText.mlJobsLinkText',
-                  {
-                    defaultMessage: 'Machine Learning',
-                  }
-                )}
-              </MLManageJobsLink>
-            ),
-          }}
-        />
-      </EuiText>
-      <EuiSpacer size="l" />
+
+      <EuiSpacer size="m" />
+
       <ManagedTable
         noItemsMessage={getNoItemsMessage({ status })}
         columns={columns}
@@ -118,7 +122,7 @@ export function JobsList({ data, status, onAddEnvironments }: Props) {
       <EuiSpacer size="l" />
 
       {hasLegacyJobs && <LegacyJobsCallout />}
-    </EuiPanel>
+    </>
   );
 }
 

x-pack/plugins/apm/public/components/routing/apm_route_config.tsx

@@ -219,41 +219,33 @@ function TransactionDetailsRouteView(
 
 function SettingsAgentConfigurationRouteView() {
   return (
-    <ApmMainTemplate pageTitle="Settings">
-      <SettingsTemplate>
-        <AgentConfigurations />
-      </SettingsTemplate>
-    </ApmMainTemplate>
+    <SettingsTemplate selectedTab="agent-configurations">
+      <AgentConfigurations />
+    </SettingsTemplate>
   );
 }
 
 function SettingsAnomalyDetectionRouteView() {
   return (
-    <ApmMainTemplate pageTitle="Settings">
-      <SettingsTemplate>
-        <AnomalyDetection />
-      </SettingsTemplate>
-    </ApmMainTemplate>
+    <SettingsTemplate selectedTab="anomaly-detection">
+      <AnomalyDetection />
+    </SettingsTemplate>
   );
 }
 
 function SettingsApmIndicesRouteView() {
   return (
-    <ApmMainTemplate pageTitle="Settings">
-      <SettingsTemplate>
-        <ApmIndices />
-      </SettingsTemplate>
-    </ApmMainTemplate>
+    <SettingsTemplate selectedTab="apm-indices">
+      <ApmIndices />
+    </SettingsTemplate>
   );
 }
 
 function SettingsCustomizeUI() {
   return (
-    <ApmMainTemplate pageTitle="Settings">
-      <SettingsTemplate>
-        <CustomizeUI />
-      </SettingsTemplate>
-    </ApmMainTemplate>
+    <SettingsTemplate selectedTab="customize-ui">
+      <CustomizeUI />
+    </SettingsTemplate>
   );
 }
 
@@ -276,14 +268,12 @@ export function EditAgentConfigurationRouteView(props: RouteComponentProps) {
   );
 
   return (
-    <ApmMainTemplate pageTitle="Settings">
-      <SettingsTemplate {...props}>
-        <AgentConfigurationCreateEdit
-          pageStep={pageStep || 'choose-settings-step'}
-          existingConfigResult={res}
-        />
-      </SettingsTemplate>
-    </ApmMainTemplate>
+    <SettingsTemplate selectedTab="agent-configurations" {...props}>
+      <AgentConfigurationCreateEdit
+        pageStep={pageStep || 'choose-settings-step'}
+        existingConfigResult={res}
+      />
+    </SettingsTemplate>
   );
 }
 
@@ -295,13 +285,11 @@ export function CreateAgentConfigurationRouteView(props: RouteComponentProps) {
   const { pageStep } = toQuery(search);
 
   return (
-    <ApmMainTemplate pageTitle="Settings">
-      <SettingsTemplate {...props}>
-        <AgentConfigurationCreateEdit
-          pageStep={pageStep || 'choose-service-step'}
-        />
-      </SettingsTemplate>
-    </ApmMainTemplate>
+    <SettingsTemplate selectedTab="agent-configurations" {...props}>
+      <AgentConfigurationCreateEdit
+        pageStep={pageStep || 'choose-service-step'}
+      />
+    </SettingsTemplate>
   );
 }
 

x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx

@@ -31,6 +31,7 @@ export function ApmMainTemplate({
   children: React.ReactNode;
 } & EuiPageTemplateProps) {
   const { services } = useKibana<ApmPluginStartDeps>();
+
   const ObservabilityPageTemplate =
     services.observability.navigation.PageTemplate;
 

x-pack/plugins/apm/public/components/routing/templates/apm_service_template.tsx

@@ -33,23 +33,21 @@ import { Correlations } from '../../app/correlations';
 import { SearchBar } from '../../shared/search_bar';
 
 type Tab = NonNullable<EuiPageHeaderProps['tabs']>[0] & {
-  key: string;
+  key:
+    | 'errors'
+    | 'metrics'
+    | 'nodes'
+    | 'overview'
+    | 'service-map'
+    | 'profiling'
+    | 'transactions';
   hidden?: boolean;
 };
 
-type TabKey =
-  | 'errors'
-  | 'metrics'
-  | 'nodes'
-  | 'overview'
-  | 'service-map'
-  | 'profiling'
-  | 'transactions';
-
 interface Props {
   children: React.ReactNode;
   serviceName: string;
-  selectedTab: TabKey;
+  selectedTab: Tab['key'];
   searchBarOptions?: React.ComponentProps<typeof SearchBar>;
 }
 
@@ -107,7 +105,7 @@ function useTabs({
   selectedTab,
 }: {
   serviceName: string;
-  selectedTab: TabKey;
+  selectedTab: Tab['key'];
 }) {
   const { agentName, transactionType } = useApmServiceContext();
   const { core, config } = useApmPluginContext();

x-pack/plugins/apm/public/components/routing/templates/settings_template.test.tsx

@@ -11,13 +11,28 @@ import React, { ReactNode } from 'react';
 import { SettingsTemplate } from './settings_template';
 import { createMemoryHistory } from 'history';
 import { MemoryRouter, RouteComponentProps } from 'react-router-dom';
+import { CoreStart } from 'kibana/public';
+import { createKibanaReactContext } from 'src/plugins/kibana_react/public';
 
 const { location } = createMemoryHistory();
 
+const KibanaReactContext = createKibanaReactContext({
+  usageCollection: { reportUiCounter: () => {} },
+  observability: {
+    navigation: {
+      PageTemplate: () => {
+        return <>hello world</>;
+      },
+    },
+  },
+} as Partial<CoreStart>);
+
 function Wrapper({ children }: { children?: ReactNode }) {
   return (
     <MemoryRouter>
-      <MockApmPluginContextWrapper>{children}</MockApmPluginContextWrapper>
+      <KibanaReactContext.Provider>
+        <MockApmPluginContextWrapper>{children}</MockApmPluginContextWrapper>
+      </KibanaReactContext.Provider>
     </MemoryRouter>
   );
 }
@@ -29,8 +44,8 @@ describe('Settings', () => {
     } as unknown) as RouteComponentProps<{}>;
     expect(() =>
       render(
-        <SettingsTemplate {...routerProps}>
-          <div />
+        <SettingsTemplate selectedTab="agent-configurations" {...routerProps}>
+          <div>hello world</div>
         </SettingsTemplate>,
         { wrapper: Wrapper }
       )

x-pack/plugins/apm/public/components/routing/templates/settings_template.tsx

@@ -5,90 +5,108 @@
  * 2.0.
  */
 
-import { EuiPage, EuiPageBody, EuiPageSideBar, EuiSideNav } from '@elastic/eui';
+import { EuiPageHeaderProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { ReactNode, useState } from 'react';
+import React from 'react';
+import { History } from 'history';
 import { useHistory } from 'react-router-dom';
+import { CoreStart } from 'kibana/public';
+import { ApmMainTemplate } from './apm_main_template';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { getAPMHref } from '../../shared/Links/apm/APMLink';
 
-export function SettingsTemplate({ children }: { children: ReactNode }) {
+type Tab = NonNullable<EuiPageHeaderProps['tabs']>[0] & {
+  key:
+    | 'agent-configurations'
+    | 'anomaly-detection'
+    | 'apm-indices'
+    | 'customize-ui';
+  hidden?: boolean;
+};
+
+interface Props {
+  children: React.ReactNode;
+  selectedTab: Tab['key'];
+}
+
+export function SettingsTemplate({ children, selectedTab }: Props) {
   const { core } = useApmPluginContext();
   const history = useHistory();
-  const { basePath } = core.http;
-  const canAccessML = !!core.application.capabilities.ml?.canAccessML;
-  const { search, pathname } = history.location;
-
-  const [isSideNavOpenOnMobile, setisSideNavOpenOnMobile] = useState(false);
-
-  const toggleOpenOnMobile = () => {
-    setisSideNavOpenOnMobile((prevState) => !prevState);
-  };
-
-  function getSettingsHref(path: string) {
-    return getAPMHref({ basePath, path: `/settings${path}`, search });
-  }
+  const tabs = getTabs({ history, core, selectedTab });
 
   return (
-    <EuiPage style={{ backgroundColor: 'white' }}>
-      <EuiPageSideBar>
-        <EuiSideNav
-          toggleOpenOnMobile={() => toggleOpenOnMobile()}
-          isOpenOnMobile={isSideNavOpenOnMobile}
-          items={[
-            {
-              name: i18n.translate('xpack.apm.settings.pageTitle', {
-                defaultMessage: 'Settings',
-              }),
-              id: 0,
-              items: [
-                {
-                  name: i18n.translate('xpack.apm.settings.agentConfig', {
-                    defaultMessage: 'Agent Configuration',
-                  }),
-                  id: '1',
-                  href: getSettingsHref('/agent-configuration'),
-                  isSelected: pathname.startsWith(
-                    '/settings/agent-configuration'
-                  ),
-                },
-                ...(canAccessML
-                  ? [
-                      {
-                        name: i18n.translate(
-                          'xpack.apm.settings.anomalyDetection',
-                          {
-                            defaultMessage: 'Anomaly detection',
-                          }
-                        ),
-                        id: '4',
-                        href: getSettingsHref('/anomaly-detection'),
-                        isSelected: pathname === '/settings/anomaly-detection',
-                      },
-                    ]
-                  : []),
-                {
-                  name: i18n.translate('xpack.apm.settings.customizeApp', {
-                    defaultMessage: 'Customize app',
-                  }),
-                  id: '3',
-                  href: getSettingsHref('/customize-ui'),
-                  isSelected: pathname === '/settings/customize-ui',
-                },
-                {
-                  name: i18n.translate('xpack.apm.settings.indices', {
-                    defaultMessage: 'Indices',
-                  }),
-                  id: '2',
-                  href: getSettingsHref('/apm-indices'),
-                  isSelected: pathname === '/settings/apm-indices',
-                },
-              ],
-            },
-          ]}
-        />
-      </EuiPageSideBar>
-      <EuiPageBody>{children}</EuiPageBody>
-    </EuiPage>
+    <ApmMainTemplate
+      pageHeader={{
+        tabs,
+        pageTitle: i18n.translate('xpack.apm.settings.title', {
+          defaultMessage: 'Settings',
+        }),
+        rightSideItems: [], // hide EnvironmentFilter
+      }}
+    >
+      {children}
+    </ApmMainTemplate>
   );
 }
+
+function getTabs({
+  history,
+  core,
+  selectedTab,
+}: {
+  history: History;
+  core: CoreStart;
+  selectedTab: Tab['key'];
+}) {
+  const { basePath } = core.http;
+  const canAccessML = !!core.application.capabilities.ml?.canAccessML;
+  const { search } = history.location;
+
+  const tabs: Tab[] = [
+    {
+      key: 'agent-configurations',
+      label: i18n.translate('xpack.apm.settings.agentConfig', {
+        defaultMessage: 'Agent Configuration',
+      }),
+      href: getAPMHref({
+        basePath,
+        path: `/settings/agent-configuration`,
+        search,
+      }),
+    },
+    {
+      key: 'anomaly-detection',
+      label: i18n.translate('xpack.apm.settings.anomalyDetection', {
+        defaultMessage: 'Anomaly detection',
+      }),
+      href: getAPMHref({
+        basePath,
+        path: `/settings/anomaly-detection`,
+        search,
+      }),
+      hidden: !canAccessML,
+    },
+    {
+      key: 'customize-ui',
+      label: i18n.translate('xpack.apm.settings.customizeApp', {
+        defaultMessage: 'Customize app',
+      }),
+      href: getAPMHref({ basePath, path: `/settings/customize-ui`, search }),
+    },
+    {
+      key: 'apm-indices',
+      label: i18n.translate('xpack.apm.settings.indices', {
+        defaultMessage: 'Indices',
+      }),
+      href: getAPMHref({ basePath, path: `/settings/apm-indices`, search }),
+    },
+  ];
+
+  return tabs
+    .filter((t) => !t.hidden)
+    .map(({ href, key, label }) => ({
+      href,
+      label,
+      isSelected: key === selectedTab,
+    }));
+}

x-pack/plugins/translations/translations/ja-JP.json

@@ -5245,7 +5245,6 @@
     "xpack.apm.agentConfig.chooseService.editButton": "編集",
     "xpack.apm.agentConfig.chooseService.service.environment.label": "環境",
     "xpack.apm.agentConfig.chooseService.service.name.label": "サービス名",
-    "xpack.apm.agentConfig.chooseService.title": "サービスを選択",
     "xpack.apm.agentConfig.circuitBreakerEnabled.description": "Circuit Breaker を有効にすべきかどうかを指定するブール値。 有効にすると、エージェントは定期的にストレス監視をポーリングして、システム/プロセス/JVMのストレス状態を検出します。監視のいずれかがストレスの兆候を検出した場合、`recording`構成オプションの設定が「false」であるかのようにエージェントは一時停止し、リソース消費を最小限に抑えられます。一時停止した場合、エージェントはストレス状態が緩和されたかどうかを検出するために同じ監視のポーリングを継続します。すべての監視でシステム/プロセス/JVMにストレスがないことが認められると、エージェントは再開して完全に機能します。",
     "xpack.apm.agentConfig.circuitBreakerEnabled.label": "Cirtcuit Breaker が有効",
     "xpack.apm.agentConfig.configTable.appliedTooltipMessage": "1 つ以上のエージェントにより適用されました",
@@ -5304,8 +5303,6 @@
     "xpack.apm.agentConfig.servicePage.service.description": "構成するサービスを選択してください。",
     "xpack.apm.agentConfig.servicePage.service.fieldLabel": "サービス名",
     "xpack.apm.agentConfig.servicePage.service.title": "サービス",
-    "xpack.apm.agentConfig.servicePage.title": "サービスを選択",
-    "xpack.apm.agentConfig.settings.title": "構成オプション",
     "xpack.apm.agentConfig.settingsPage.discardChangesButton": "変更を破棄",
     "xpack.apm.agentConfig.settingsPage.notFound.message": "リクエストされた構成が存在しません",
     "xpack.apm.agentConfig.settingsPage.notFound.title": "申し訳ございません、エラーが発生しました",
@@ -5324,7 +5321,6 @@
     "xpack.apm.agentConfig.stressMonitorSystemCpuReliefThreshold.label": "ストレス監視システム CPU 緩和しきい値",
     "xpack.apm.agentConfig.stressMonitorSystemCpuStressThreshold.description": "システムCPU監視でシステムCPUストレスの検出に使用するしきい値。システムCPUが少なくとも「stress_monitor_cpu_duration_threshold」と同じ長さ以上の期間にわたってこのしきい値を超えると、監視機能はこれをストレス状態と見なします。",
     "xpack.apm.agentConfig.stressMonitorSystemCpuStressThreshold.label": "ストレス監視システム CPU ストレスしきい値",
-    "xpack.apm.agentConfig.titleText": "エージェント中央構成",
     "xpack.apm.agentConfig.transactionIgnoreUrl.description": "特定の URL への要求が命令されないように制限するために使用します。この構成では、無視される URL パスのワイルドカードパターンのカンマ区切りのリストを使用できます。受信 HTTP 要求が検出されると、要求パスが、リストの各要素に対してテストされます。たとえば、このリストに「/home/index」を追加すると、一致して、「http://localhost/home/index」と「http://whatever.com/home/index?value1=123」から命令が削除されます。",
     "xpack.apm.agentConfig.transactionIgnoreUrl.label": "URL に基づくトランザクションを無視",
     "xpack.apm.agentConfig.transactionMaxSpans.description": "トランザクションごとに記録される範囲を制限します。",
@@ -5782,7 +5778,6 @@
     "xpack.apm.settings.anomalyDetection.addEnvironments.selectorLabel": "環境",
     "xpack.apm.settings.anomalyDetection.addEnvironments.selectorPlaceholder": "環境を選択または追加",
     "xpack.apm.settings.anomalyDetection.addEnvironments.titleText": "環境を選択",
-    "xpack.apm.settings.anomalyDetection.descriptionText": "機械学習異常検知統合により、レイテンシの異常を特定することで、各構成された環境で、サービスのアプリケーション正常性ステータスインジケーターが有効になります。",
     "xpack.apm.settings.anomalyDetection.jobList.actionColumnLabel": "アクション",
     "xpack.apm.settings.anomalyDetection.jobList.addEnvironments": "MLジョブを作成",
     "xpack.apm.settings.anomalyDetection.jobList.emptyListText": "異常検知ジョブがありません。",
@@ -5792,7 +5787,6 @@
     "xpack.apm.settings.anomalyDetection.jobList.mlDescriptionText": "異常検知を新しい環境に追加するには、機械学習ジョブを作成します。既存の機械学習ジョブは、{mlJobsLink}で管理できます。",
     "xpack.apm.settings.anomalyDetection.jobList.mlDescriptionText.mlJobsLinkText": "機械学習",
     "xpack.apm.settings.anomalyDetection.jobList.mlJobLinkText": "MLでジョブを表示",
-    "xpack.apm.settings.anomalyDetection.titleText": "異常検知",
     "xpack.apm.settings.apmIndices.applyButton": "変更を適用",
     "xpack.apm.settings.apmIndices.applyChanges.failed.text": "インデックスの適用時に何か問題が発生しました。エラー：{errorMessage}",
     "xpack.apm.settings.apmIndices.applyChanges.failed.title": "インデックスが適用できませんでした。",
@@ -5810,8 +5804,6 @@
     "xpack.apm.settings.apmIndices.title": "インデックス",
     "xpack.apm.settings.apmIndices.transactionIndicesLabel": "トランザクションインデックス",
     "xpack.apm.settings.customizeApp": "アプリをカスタマイズ",
-    "xpack.apm.settings.customizeApp.description": "次の設定でAPMアプリ経験を拡張します。",
-    "xpack.apm.settings.customizeApp.title": "アプリをカスタマイズ",
     "xpack.apm.settings.customizeUI.customLink": "カスタムリンク",
     "xpack.apm.settings.customizeUI.customLink.create.failed": "リンクを保存できませんでした！",
     "xpack.apm.settings.customizeUI.customLink.create.failed.message": "リンクを保存するときに問題が発生しました。エラー：「{errorMessage}」",
@@ -5860,7 +5852,6 @@
     "xpack.apm.settings.customizeUI.customLink.table.noResultFound": "\"{value}\"に対する結果が見つかりませんでした。",
     "xpack.apm.settings.customizeUI.customLink.table.url": "URL",
     "xpack.apm.settings.indices": "インデックス",
-    "xpack.apm.settings.pageTitle": "設定",
     "xpack.apm.settingsLinkLabel": "設定",
     "xpack.apm.setupInstructionsButtonLabel": "セットアップの手順",
     "xpack.apm.significanTerms.license.text": "相関関係APIを使用するには、Elastic Platinumライセンスのサブスクリプションが必要です。",

x-pack/plugins/translations/translations/zh-CN.json

@@ -5274,7 +5274,6 @@
     "xpack.apm.agentConfig.chooseService.editButton": "编辑",
     "xpack.apm.agentConfig.chooseService.service.environment.label": "环境",
     "xpack.apm.agentConfig.chooseService.service.name.label": "服务名称",
-    "xpack.apm.agentConfig.chooseService.title": "选择服务",
     "xpack.apm.agentConfig.circuitBreakerEnabled.description": "指定是否应启用断路器的布尔值。 启用时，代理定期轮询压力监测以检测系统/进程/JVM 压力状态。如果任意监测检测到压力迹象，代理将会暂停，就如 `recording` 配置选项已设置为 `false` 一样，从而使资源消耗降低至最小程度。暂停时，代理继续轮询相同的监测，以便检测压力状态是否已缓解。如果所有监测认为系统/进程/JVM 不再承受压力时，代理将完全恢复正常运行。",
     "xpack.apm.agentConfig.circuitBreakerEnabled.label": "断路器已启用",
     "xpack.apm.agentConfig.configTable.appliedTooltipMessage": "已至少由一个代理应用",
@@ -5333,8 +5332,6 @@
     "xpack.apm.agentConfig.servicePage.service.description": "选择要配置的服务。",
     "xpack.apm.agentConfig.servicePage.service.fieldLabel": "服务名称",
     "xpack.apm.agentConfig.servicePage.service.title": "服务",
-    "xpack.apm.agentConfig.servicePage.title": "选择服务",
-    "xpack.apm.agentConfig.settings.title": "配置选项",
     "xpack.apm.agentConfig.settingsPage.discardChangesButton": "放弃更改",
     "xpack.apm.agentConfig.settingsPage.notFound.message": "请求的配置不存在",
     "xpack.apm.agentConfig.settingsPage.notFound.title": "抱歉，有错误",
@@ -5353,7 +5350,6 @@
     "xpack.apm.agentConfig.stressMonitorSystemCpuReliefThreshold.label": "压力监测系统 cpu 缓解阈值",
     "xpack.apm.agentConfig.stressMonitorSystemCpuStressThreshold.description": "系统 CPU 监测用于检测系统 CPU 压力的阈值。如果系统 CPU 超过此阈值的持续时间至少有 `stress_monitor_cpu_duration_threshold`，监测会将其视为压力状态。",
     "xpack.apm.agentConfig.stressMonitorSystemCpuStressThreshold.label": "压力监测系统 cpu 压力阈值",
-    "xpack.apm.agentConfig.titleText": "代理中央配置",
     "xpack.apm.agentConfig.transactionIgnoreUrl.description": "用于限制对某些 URL 的请求不被检测。此配置接受应忽略的 URL 路径的通配符模式逗号分隔列表。当监测到传入 HTTP 请求时，会根据此列表中的每个元素测试其请求路径。例如，将 `/home/index` 添加到此列表中后，该元素将匹配并删除 `http://localhost/home/index` 和 `http://whatever.com/home/index?value1=123` 的检测",
     "xpack.apm.agentConfig.transactionIgnoreUrl.label": "基于 URL 忽略事务",
     "xpack.apm.agentConfig.transactionMaxSpans.description": "限制每个事务记录的跨度数量。",
@@ -5816,7 +5812,6 @@
     "xpack.apm.settings.anomalyDetection.addEnvironments.selectorLabel": "环境",
     "xpack.apm.settings.anomalyDetection.addEnvironments.selectorPlaceholder": "选择或添加环境",
     "xpack.apm.settings.anomalyDetection.addEnvironments.titleText": "选择环境",
-    "xpack.apm.settings.anomalyDetection.descriptionText": "Machine Learning 异常检测集成通过识别延迟异常来为每个已配置环境中的服务启用应用程序运行状态指标。",
     "xpack.apm.settings.anomalyDetection.jobList.actionColumnLabel": "操作",
     "xpack.apm.settings.anomalyDetection.jobList.addEnvironments": "创建 ML 作业",
     "xpack.apm.settings.anomalyDetection.jobList.emptyListText": "无异常检测作业。",
@@ -5826,7 +5821,6 @@
     "xpack.apm.settings.anomalyDetection.jobList.mlDescriptionText": "要将异常检测添加到新环境，请创建 Machine Learning 作业。现有 Machine Learning 作业可在 {mlJobsLink} 中进行管理。",
     "xpack.apm.settings.anomalyDetection.jobList.mlDescriptionText.mlJobsLinkText": "Machine Learning",
     "xpack.apm.settings.anomalyDetection.jobList.mlJobLinkText": "在 ML 中查看作业",
-    "xpack.apm.settings.anomalyDetection.titleText": "异常检测",
     "xpack.apm.settings.apmIndices.applyButton": "应用更改",
     "xpack.apm.settings.apmIndices.applyChanges.failed.text": "应用索引时出现问题。错误：{errorMessage}",
     "xpack.apm.settings.apmIndices.applyChanges.failed.title": "无法应用索引。",
@@ -5844,8 +5838,6 @@
     "xpack.apm.settings.apmIndices.title": "索引",
     "xpack.apm.settings.apmIndices.transactionIndicesLabel": "事务索引",
     "xpack.apm.settings.customizeApp": "定制应用",
-    "xpack.apm.settings.customizeApp.description": "使用以下设置扩展 APM 应用体验。",
-    "xpack.apm.settings.customizeApp.title": "定制应用",
     "xpack.apm.settings.customizeUI.customLink": "定制链接",
     "xpack.apm.settings.customizeUI.customLink.create.failed": "链接无法保存！",
     "xpack.apm.settings.customizeUI.customLink.create.failed.message": "保存链接时出现了问题。错误：“{errorMessage}”",
@@ -5894,7 +5886,6 @@
     "xpack.apm.settings.customizeUI.customLink.table.noResultFound": "没有“{value}”的结果。",
     "xpack.apm.settings.customizeUI.customLink.table.url": "URL",
     "xpack.apm.settings.indices": "索引",
-    "xpack.apm.settings.pageTitle": "设置",
     "xpack.apm.settingsLinkLabel": "设置",
     "xpack.apm.setupInstructionsButtonLabel": "设置说明",
     "xpack.apm.significanTerms.license.text": "要使用相关性 API，必须订阅 Elastic 白金级许可证。",