[AO] Add tooltip for custom equation and update its message (#163833)

Closes #163821 ## Summary This PR adds a tooltip for the custom equation and updates its message, similar to what we have in SLO. |Before|After| |---|---| |![image](https://github.com/elastic/kibana/assets/12370520/f3f66f2c-9cab-4680-8139-036e82a3aabe)|![image](https://github.com/elastic/kibana/assets/12370520/1f8e8c0d-38fa-408d-b091-bbd6c9517837)|
elastic · Aug 15, 2023 · 00cad18 · 00cad18
1 parent cc946c4
commit 00cad18
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/...ability/public/components/threshold/components/custom_equation/custom_equation_editor.tsx b/...ability/public/components/threshold/components/custom_equation/custom_equation_editor.tsx
@@ -9,6 +9,7 @@ import {
   EuiFormRow,
   EuiFlexItem,
   EuiFlexGroup,
+  EuiIconTip,
   EuiButtonEmpty,
   EuiSpacer,
   EuiExpression,
@@ -193,10 +194,23 @@ export function CustomEquationEditor({
         >
           <div>
             <ClosablePopoverTitle onClose={() => setCustomEqPopoverOpen(false)}>
-              <FormattedMessage
-                id="xpack.observability.threshold.rule.alertFlyout.customEquationLabel"
-                defaultMessage="Custom equation"
-              />
+              <span>
+                <FormattedMessage
+                  id="xpack.observability.threshold.rule.alertFlyout.customEquationLabel"
+                  defaultMessage="Custom equation"
+                />
+                &nbsp;
+                <EuiIconTip
+                  content={i18n.translate(
+                    'xpack.observability.threshold.rule.alertFlyout.customEquationTooltip',
+                    {
+                      defaultMessage:
+                        'This supports basic math (A + B / C) and boolean logic (A < B ? A : B).',
+                    }
+                  )}
+                  position="top"
+                />
+              </span>
             </ClosablePopoverTitle>
             <EuiFormRow
               fullWidth

diff --git a/x-pack/plugins/observability/public/components/threshold/i18n_strings.ts b/x-pack/plugins/observability/public/components/threshold/i18n_strings.ts
@@ -9,7 +9,10 @@ import { i18n } from '@kbn/i18n';
 
 export const EQUATION_HELP_MESSAGE = i18n.translate(
   'xpack.observability.threshold.rule.alertFlyout.customEquationEditor.equationHelpMessage',
-  { defaultMessage: 'Supports basic math expressions' }
+  {
+    defaultMessage:
+      'Supports basic math equations, valid charaters are: A-Z, +, -, /, *, (, ), ?, !, &, :, |, >, <, =',
+  }
 );
 
 export const LABEL_LABEL = i18n.translate(