Revert "Revert "[Synthetics] update private locations callout (#13895… (#138963)

* Revert "Revert "[Synthetics] update private locations callout (#138952)""

This reverts commit f487883108.

* update i18n

x-pack/plugins/synthetics/public/legacy_uptime/components/fleet_package/custom_fields.test.tsx

@@ -251,9 +251,7 @@ describe('<CustomFields />', () => {
       expect(node).toBeInTheDocument();
     });
     expect(
-      getByText(
-        /To create a "Browser" monitor, please ensure you are using the elastic-agent-complete Docker container, which contains the dependencies to run these mon/
-      )
+      getByText(/To create a "Browser" monitor, please ensure you are using the/)
     ).toBeInTheDocument();
 
     // expect tls options to be available for browser

x-pack/plugins/synthetics/public/legacy_uptime/components/fleet_package/custom_fields.tsx

@@ -16,6 +16,7 @@ import {
   EuiSpacer,
   EuiSwitch,
   EuiCallOut,
+  EuiCode,
   EuiLink,
 } from '@elastic/eui';
 import { DescribedFormGroupWithWrap } from './common/described_form_group_with_wrap';
@@ -154,27 +155,32 @@ export const CustomFields = memo<Props>(
                 <EuiCallOut
                   title={
                     <FormattedMessage
-                      id="xpack.synthetics.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorType.browser.warning.description"
-                      defaultMessage='To create a "Browser" monitor, please ensure you are using the elastic-agent-complete Docker container, which contains the dependencies to run these monitors. For more information, please visit our {link}.'
-                      values={{
-                        link: (
-                          <EuiLink
-                            target="_blank"
-                            href="https://www.elastic.co/guide/en/observability/current/synthetics-quickstart-fleet.html"
-                            external
-                          >
-                            <FormattedMessage
-                              id="xpack.synthetics.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorType.browser.warning.link"
-                              defaultMessage="synthetics documentation"
-                            />
-                          </EuiLink>
-                        ),
-                      }}
+                      id="xpack.synthetics.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorType.browser.warning.title"
+                      defaultMessage="Requirement"
                     />
                   }
-                  iconType="help"
                   size="s"
-                />
+                >
+                  <FormattedMessage
+                    id="xpack.synthetics.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorType.browser.warning.content"
+                    defaultMessage='To create a "Browser" monitor, please ensure you are using the {agent} Docker container, which contains the dependencies to run these monitors. For more information, please visit our {link}.'
+                    values={{
+                      agent: <EuiCode>elastic-agent-complete</EuiCode>,
+                      link: (
+                        <EuiLink
+                          target="_blank"
+                          href="https://www.elastic.co/guide/en/observability/current/synthetics-quickstart-fleet.html"
+                          external
+                        >
+                          <FormattedMessage
+                            id="xpack.synthetics.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorType.browser.warning.link"
+                            defaultMessage="synthetics documentation"
+                          />
+                        </EuiLink>
+                      ),
+                    }}
+                  />
+                </EuiCallOut>
               )}
               <EuiSpacer size="s" />
               {renderSimpleFields(monitorType)}

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/add_location_flyout.tsx

@@ -15,7 +15,6 @@ import {
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
-  EuiSpacer,
   EuiTitle,
   EuiFlyout,
   EuiButton,
@@ -77,8 +76,6 @@ export const AddLocationFlyout = ({
               <p>{NEED_FLEET_READ_AGENT_POLICIES_PERMISSION}</p>
             </EuiCallOut>
           )}
-
-          <EuiSpacer />
           <LocationForm privateLocations={privateLocations} />
         </EuiFlyoutBody>
         <EuiFlyoutFooter>

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/empty_locations.tsx

@@ -26,10 +26,11 @@ export const EmptyLocations = ({
     <EuiEmptyPrompt
       hasBorder
       title={<h2>{ADD_FIRST_LOCATION}</h2>}
+      titleSize="s"
       body={
-        <p>
+        <EuiText size="s">
           {!inFlyout ? FIRST_MONITOR : ''} {START_ADDING_LOCATIONS_DESCRIPTION}
-        </p>
+        </EuiText>
       }
       actions={
         <EuiButton

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/location_form.tsx

@@ -5,7 +5,16 @@
  * 2.0.
  */
 import React from 'react';
-import { EuiFieldText, EuiForm, EuiFormRow, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import {
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiSpacer,
+  EuiCallOut,
+  EuiCode,
+  EuiLink,
+} from '@elastic/eui';
 import { useSelector } from 'react-redux';
 import { i18n } from '@kbn/i18n';
 import { useFormContext, useFormState } from 'react-hook-form';
@@ -52,11 +61,44 @@ export const LocationForm = ({
         </EuiFormRow>
         <EuiSpacer />
         <PolicyHostsField errors={errors} control={control} privateLocations={privateLocations} />
+        <EuiSpacer />
+        <EuiCallOut title={AGENT_CALLOUT_TITLE} size="s" style={{ textAlign: 'left' }}>
+          <p>
+            {
+              <FormattedMessage
+                id="xpack.synthetics.monitorManagement.agentCallout.content"
+                defaultMessage='If you intend to run "Browser" monitors on this private location, please ensure you are using the {code} Docker container, which contains the dependencies to run these monitors. For more information, {link}.'
+                values={{
+                  code: <EuiCode>elastic-agent-complete</EuiCode>,
+                  link: (
+                    <EuiLink
+                      target="_blank"
+                      href="https://www.elastic.co/guide/en/observability/current/uptime-set-up-choose-agent.html#private-locations"
+                      external
+                    >
+                      <FormattedMessage
+                        id="xpack.synthetics.monitorManagement.agentCallout.link"
+                        defaultMessage="read the docs"
+                      />
+                    </EuiLink>
+                  ),
+                }}
+              />
+            }
+          </p>
+        </EuiCallOut>
       </EuiForm>
     </>
   );
 };
 
+export const AGENT_CALLOUT_TITLE = i18n.translate(
+  'xpack.synthetics.monitorManagement.agentCallout.title',
+  {
+    defaultMessage: 'Requirement',
+  }
+);
+
 export const LOCATION_NAME_LABEL = i18n.translate(
   'xpack.synthetics.monitorManagement.locationName',
   {

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/manage_locations_flyout.tsx

@@ -78,7 +78,7 @@ export const ManageLocationsFlyout = () => {
   const flyout = (
     <EuiFlyout onClose={closeFlyout} size="m" style={{ width: 540 }}>
       <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="s">
+        <EuiTitle size="m">
           <h2>{PRIVATE_LOCATIONS}</h2>
         </EuiTitle>
       </EuiFlyoutHeader>

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/policy_hosts.tsx

@@ -91,7 +91,7 @@ export const PolicyHostsField = ({
     <EuiFormRow
       fullWidth
       label={POLICY_HOST_LABEL}
-      helpText={!errors?.agentPolicyId ? SELECT_POLICY_HOSTS : undefined}
+      helpText={!errors?.agentPolicyId ? SELECT_POLICY_HOSTS_HELP_TEXT : undefined}
       isInvalid={!!errors?.agentPolicyId}
       error={SELECT_POLICY_HOSTS}
     >
@@ -126,6 +126,13 @@ const SELECT_POLICY_HOSTS = i18n.translate('xpack.synthetics.monitorManagement.s
   defaultMessage: 'Select agent policy',
 });
 
+const SELECT_POLICY_HOSTS_HELP_TEXT = i18n.translate(
+  'xpack.synthetics.monitorManagement.selectPolicyHost.helpText',
+  {
+    defaultMessage: 'We recommend using a single Elastic agent per agent policy.',
+  }
+);
+
 const POLICY_HOST_LABEL = i18n.translate('xpack.synthetics.monitorManagement.policyHost', {
   defaultMessage: 'Agent policy',
 });

x-pack/plugins/translations/translations/fr-FR.json

@@ -30591,7 +30591,6 @@
     "xpack.synthetics.charts.mlAnnotation.severity": "Sévérité : {severity}",
     "xpack.synthetics.controls.selectSeverity.scoreDetailsDescription": "score {value} et supérieur",
     "xpack.synthetics.createPackagePolicy.stepConfigure.browserAdvancedSettings.throttling.throttling_exceeded.message": "Vous avez dépassé la limite de { throttlingField } pour les nœuds synthétiques. La valeur de { throttlingField } ne peut pas être supérieure à { limit } Mbits/s.",
-    "xpack.synthetics.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorType.browser.warning.description": "Pour créer un moniteur \"Navigateur\", veuillez vous assurer que vous utilisez le conteneur Docker elastic-agent-complete, qui inclut les dépendances permettant d'exécuter ces moniteurs. Pour en savoir plus, visitez notre {link}.",
     "xpack.synthetics.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.params.helpText": "Utilisez le JSON pour définir les paramètres qui peuvent être référencés dans votre script avec {code}",
     "xpack.synthetics.durationChart.emptyPrompt.description": "Ce moniteur n'a jamais été {emphasizedText} au cours de la plage temporelle sélectionnée.",
     "xpack.synthetics.editMonitorRoute.title": "Modifier le moniteur | {baseTitle}",

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

@@ -30569,7 +30569,6 @@
     "xpack.synthetics.charts.mlAnnotation.severity": "深刻度：{severity}",
     "xpack.synthetics.controls.selectSeverity.scoreDetailsDescription": "スコア{value}以上",
     "xpack.synthetics.createPackagePolicy.stepConfigure.browserAdvancedSettings.throttling.throttling_exceeded.message": "Syntheticsノードの{ throttlingField }上限を超えました。{ throttlingField }値は{ limit }Mbps以下でなければなりません。",
-    "xpack.synthetics.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorType.browser.warning.description": "「Browser」モニターを作成するには、elastic-agent-complete Dockerコンテナーを使用していることを確認します。これには、これらのモニターを実行するための依存関係が含まれています。詳細については、{link}をご覧ください。",
     "xpack.synthetics.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.params.helpText": "JSONを使用して、{code}のスクリプトで参照できるパラメーターを定義します",
     "xpack.synthetics.durationChart.emptyPrompt.description": "このモニターは選択された時間範囲で一度も{emphasizedText}していません。",
     "xpack.synthetics.editMonitorRoute.title": "モニターを編集 | {baseTitle}",

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

@@ -30601,7 +30601,6 @@
     "xpack.synthetics.charts.mlAnnotation.severity": "严重性：{severity}",
     "xpack.synthetics.controls.selectSeverity.scoreDetailsDescription": "{value} 及以上分数",
     "xpack.synthetics.createPackagePolicy.stepConfigure.browserAdvancedSettings.throttling.throttling_exceeded.message": "您已超出 Synthetic 节点的 { throttlingField } 限制。{ throttlingField } 值不能大于 { limit }Mbps。",
-    "xpack.synthetics.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorType.browser.warning.description": "要创建“浏览器”监测，请确保使用 elastic-agent-complete Docker 容器，其中包含运行这些监测的依赖项。有关更多信息，请访问我们的 {link}。",
     "xpack.synthetics.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.params.helpText": "请使用 JSON 来定义可在您的脚本中通过 {code} 引用的参数",
     "xpack.synthetics.durationChart.emptyPrompt.description": "在选定时间范围内此监测从未{emphasizedText}。",
     "xpack.synthetics.editMonitorRoute.title": "编辑监测 | {baseTitle}",