[APM] Settings: Update layout and update/add descriptions (#94398) (#94743)

* [APM] Align naming

* [APM] Add agent config description

* [APM] Update layout and styles

* [APM] Update text styles and spacing

* [APM] Updating styles and layout

* [APM] Update layout and styles

* [APM] Update description

* [APM] Update layout and styles

* [APM] Update i18n name

* [APM] Add i18n description

* [APM] Update layout and styles

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

Co-authored-by: Brandon Morelli <[email protected]>

* [APM] Update agent config description

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

Co-authored-by: Brandon Morelli <[email protected]>

* [APM] Remove empty state description

Not needed as we have a description by the main title

* [APM] Remove unneeded translations

Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Brandon Morelli <[email protected]>

Co-authored-by: Casper Hübertz <[email protected]>
Co-authored-by: Brandon Morelli <[email protected]>

Author: 3 people

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

@@ -123,9 +123,7 @@ export function AgentConfigurationCreateEdit({
 
       <EuiText size="s">
         {i18n.translate('xpack.apm.agentConfig.newConfig.description', {
-          defaultMessage: `This allows you to fine-tune your agent configuration directly in
-        Kibana. Best of all, changes are automatically propagated to your APM
-        agents so there’s no need to redeploy.`,
+          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>
 

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

@@ -61,14 +61,6 @@ export function AgentConfigurationList({ status, data, refetch }: Props) {
           )}
         </h2>
       }
-      body={
-        <p>
-          {i18n.translate('xpack.apm.agentConfig.configTable.emptyPromptText', {
-            defaultMessage:
-              "Let's change that! You can fine-tune agent configuration directly from Kibana without having to redeploy. Get started by creating your first configuration.",
-          })}
-        </p>
-      }
       actions={
         <EuiToolTip
           content={

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

@@ -13,6 +13,7 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
@@ -42,15 +43,21 @@ export function AgentConfigurations() {
       <EuiTitle size="l">
         <h1>
           {i18n.translate('xpack.apm.agentConfig.titleText', {
-            defaultMessage: 'Agent remote configuration',
+            defaultMessage: 'Agent central configuration',
           })}
         </h1>
       </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>
+            <EuiTitle size="s">
               <h2>
                 {i18n.translate(
                   'xpack.apm.agentConfig.configurationsPanelTitle',

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

@@ -178,8 +178,8 @@ export function ApmIndices() {
           })}
         </h1>
       </EuiTitle>
-      <EuiSpacer size="l" />
-      <EuiText>
+      <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.`,
         })}

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

@@ -9,9 +9,9 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
-  EuiSpacer,
   EuiTitle,
   EuiText,
+  EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
@@ -82,14 +82,14 @@ export function CustomLinkOverview() {
         />
       )}
       <EuiPanel>
-        <EuiFlexGroup alignItems="center">
+        <EuiFlexGroup gutterSize="none" alignItems="center">
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup alignItems="center">
+            <EuiFlexGroup alignItems="center" gutterSize="none">
               <EuiFlexItem grow={false}>
-                <EuiTitle>
+                <EuiTitle size="s">
                   <EuiFlexGroup
                     alignItems="center"
-                    gutterSize="s"
+                    gutterSize="none"
                     responsive={false}
                   >
                     <EuiFlexItem grow={false}>
@@ -117,11 +117,11 @@ export function CustomLinkOverview() {
             </EuiFlexItem>
           )}
         </EuiFlexGroup>
-        <EuiSpacer size="l" />
-        <EuiText>
+        <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 for transactions.',
+              'These links will be shown in the Actions context menu in selected areas of the app, e.g. by the transactions detail.',
           })}
         </EuiText>
         {hasValidLicense ? (

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

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiTitle, EuiSpacer } from '@elastic/eui';
+import { EuiTitle, EuiSpacer, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { CustomLinkOverview } from './CustomLink';
 
@@ -15,11 +15,17 @@ export function CustomizeUI() {
     <>
       <EuiTitle size="l">
         <h1>
-          {i18n.translate('xpack.apm.settings.customizeApp', {
+          {i18n.translate('xpack.apm.settings.customizeApp.title', {
             defaultMessage: 'Customize app',
           })}
         </h1>
       </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 />
     </>

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

@@ -73,8 +73,8 @@ export function AnomalyDetection() {
           })}
         </h1>
       </EuiTitle>
-      <EuiSpacer size="l" />
-      <EuiText>
+      <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.`,
         })}

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

@@ -69,7 +69,7 @@ export function JobsList({ data, status, onAddEnvironments }: Props) {
     <EuiPanel>
       <EuiFlexGroup>
         <EuiFlexItem>
-          <EuiTitle>
+          <EuiTitle size="s">
             <h2>
               {i18n.translate(
                 'xpack.apm.settings.anomalyDetection.jobList.environments',
@@ -91,8 +91,7 @@ export function JobsList({ data, status, onAddEnvironments }: Props) {
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiSpacer size="l" />
-      <EuiText>
+      <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}."

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

@@ -4986,7 +4986,6 @@
     "xpack.apm.agentConfig.configTable.appliedTooltipMessage": "1 つ以上のエージェントにより適用されました",
     "xpack.apm.agentConfig.configTable.configTable.failurePromptText": "エージェントの構成一覧を取得できませんでした。ユーザーに十分なパーミッションがない可能性があります。",
     "xpack.apm.agentConfig.configTable.createConfigButtonLabel": "構成の作成",
-    "xpack.apm.agentConfig.configTable.emptyPromptText": "変更しましょう。Kibana からエージェント構成を直接的に微調整できます。再展開する必要はありません。まず、最初の構成を作成します。",
     "xpack.apm.agentConfig.configTable.emptyPromptTitle": "構成が見つかりません。",
     "xpack.apm.agentConfig.configTable.environmentColumnLabel": "サービス環境",
     "xpack.apm.agentConfig.configTable.lastUpdatedColumnLabel": "最終更新",

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

@@ -5013,7 +5013,6 @@
     "xpack.apm.agentConfig.configTable.appliedTooltipMessage": "已至少由一个代理应用",
     "xpack.apm.agentConfig.configTable.configTable.failurePromptText": "无法获取代理配置列表。您的用户可能没有足够的权限。",
     "xpack.apm.agentConfig.configTable.createConfigButtonLabel": "创建配置",
-    "xpack.apm.agentConfig.configTable.emptyPromptText": "让我们改动一下！可以直接从 Kibana 微调代理配置，无需重新部署。首先创建您的第一个配置。",
     "xpack.apm.agentConfig.configTable.emptyPromptTitle": "未找到任何配置。",
     "xpack.apm.agentConfig.configTable.environmentColumnLabel": "服务环境",
     "xpack.apm.agentConfig.configTable.lastUpdatedColumnLabel": "上次更新时间",