[Uptime][Synthetics Integration] add browser callout (elastic#108935)

Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: shahzad31 <[email protected]>
kibanamachine · Sep 14, 2021 · 772371f · 772371f
1 parent 5b2e3b0
commit 772371f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.test.tsx b/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.test.tsx
@@ -203,6 +203,11 @@ describe('<CustomFields />', () => {
     getAllByLabelText('Zip URL').forEach((node) => {
       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/
+      )
+    ).toBeInTheDocument();
 
     // ensure at least one browser advanced option is present
     advancedOptionsButton = getByText('Advanced Browser options');

diff --git a/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.tsx b/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.tsx
@@ -15,6 +15,8 @@ import {
   EuiSpacer,
   EuiDescribedFormGroup,
   EuiCheckbox,
+  EuiCallOut,
+  EuiLink,
 } from '@elastic/eui';
 import { ConfigKeys, DataStream, Validation } from './types';
 import { useMonitorTypeContext } from './contexts';
@@ -122,6 +124,34 @@ export const CustomFields = memo<Props>(
                   />
                 </EuiFormRow>
               )}
+              <EuiSpacer size="s" />
+              {isBrowser && (
+                <EuiCallOut
+                  title={
+                    <FormattedMessage
+                      id="xpack.uptime.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.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorType.browser.warning.link"
+                              defaultMessage="synthetics documentation"
+                            />
+                          </EuiLink>
+                        ),
+                      }}
+                    />
+                  }
+                  iconType="help"
+                  size="s"
+                />
+              )}
+              <EuiSpacer size="s" />
               {renderSimpleFields(monitorType)}
             </EuiFlexItem>
           </EuiFlexGroup>