[Alerting] Add popover for Elasticsearch query rule type (#135968)

x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/rule_common_expressions.tsx

@@ -18,6 +18,7 @@ import {
 import { CommonAlertParams } from '../types';
 import { DEFAULT_VALUES } from '../constants';
 import { TestQueryRow, TestQueryRowProps } from '../test_query_row';
+import { QueryThresholdHelpPopover } from './threshold_help_popover';
 
 export interface RuleCommonExpressionsProps {
   thresholdComparator?: CommonAlertParams['thresholdComparator'];
@@ -57,12 +58,13 @@ export const RuleCommonExpressions: React.FC<RuleCommonExpressionsProps> = ({
   return (
     <>
       <EuiTitle size="xs">
-        <h5>
+        <h4>
           <FormattedMessage
             id="xpack.stackAlerts.esQuery.ui.conditionsPrompt"
-            defaultMessage="Set the threshold and duration"
-          />
-        </h5>
+            defaultMessage="Set the threshold and time window"
+          />{' '}
+          <QueryThresholdHelpPopover />
+        </h4>
       </EuiTitle>
       <EuiSpacer size="s" />
       <ThresholdExpression

x-pack/plugins/stack_alerts/public/alert_types/es_query/rule_common_expressions/threshold_help_popover.tsx

@@ -0,0 +1,112 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { Component } from 'react';
+import {
+  EuiButtonIcon,
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiText,
+  EuiCallOut,
+  EuiSpacer,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
+interface State {
+  isPopoverOpen: boolean;
+}
+
+const PopoverStyles = css`
+  max-width: 400px;
+`;
+
+export class QueryThresholdHelpPopover extends Component<{}, State> {
+  state: State = {
+    isPopoverOpen: false,
+  };
+
+  PopoverStyles = css`
+    max-width: 400px;
+  `;
+
+  _togglePopover = () => {
+    this.setState((prevState) => ({
+      isPopoverOpen: !prevState.isPopoverOpen,
+    }));
+  };
+
+  _closePopover = () => {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  };
+
+  _renderContent() {
+    return (
+      <div css={PopoverStyles}>
+        <EuiText grow={false} size="s">
+          <p>
+            <FormattedMessage
+              id="xpack.stackAlerts.esQuery.ui.thresholdHelp.threshold"
+              defaultMessage="Each time the rule runs, it checks whether the number of documents that match your query meets this threshold."
+            />
+          </p>
+          <p>
+            <FormattedMessage
+              id="xpack.stackAlerts.esQuery.ui.thresholdHelp.timeWindow"
+              defaultMessage="The time window indicates how far back in time to search. 
+              To avoid gaps in detection, set this value greater than or equal to the value you chose for the {checkField} field."
+              values={{
+                checkField: <b>Check every</b>,
+              }}
+            />
+          </p>
+        </EuiText>
+        <EuiSpacer size="m" />
+        <EuiCallOut
+          iconType="pin"
+          size="s"
+          title={i18n.translate('xpack.stackAlerts.esQuery.ui.thresholdHelp.duplicateMatches', {
+            defaultMessage:
+              'If the time window is greater than the check interval and a document matches the query in multiple runs, it is used in only the first threshold calculation.',
+          })}
+        />
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <EuiPopover
+        id="thresholdHelpPopover"
+        anchorPosition="upLeft"
+        button={
+          <EuiButtonIcon
+            onClick={this._togglePopover}
+            iconType="documentation"
+            aria-label={i18n.translate('xpack.stackAlerts.esQuery.ui.thresholdHelp.ariaLabel', {
+              defaultMessage: 'Help',
+            })}
+          />
+        }
+        isOpen={this.state.isPopoverOpen}
+        closePopover={this._closePopover}
+        repositionOnScroll
+        ownFocus
+      >
+        <EuiPopoverTitle>
+          <FormattedMessage
+            id="xpack.stackAlerts.esQuery.ui.thresholdHelp.title"
+            defaultMessage="Set the threshold and time window"
+          />
+        </EuiPopoverTitle>
+        {this._renderContent()}
+      </EuiPopover>
+    );
+  }
+}