[ResponseOps] Adds tooltip to time window selector in ES query rule f…

…lyout (#125764)
elastic · Feb 21, 2022 · 5d17346 · 5d17346
1 parent 1df6ecf
commit 5d17346
Showing 1 changed file with 27 additions and 7 deletions.
diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
@@ -13,13 +13,16 @@ import { XJsonMode } from '@kbn/ace';
 import 'brace/theme/github';
 
 import {
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiButtonEmpty,
   EuiSpacer,
   EuiFormRow,
   EuiCallOut,
   EuiText,
   EuiTitle,
   EuiLink,
+  EuiIconTip,
 } from '@elastic/eui';
 import { DocLinksStart, HttpSetup } from 'kibana/public';
 import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
@@ -347,14 +350,31 @@ export const EsQueryAlertTypeExpression: React.FunctionComponent<
         </EuiFormRow>
       )}
       <EuiSpacer />
-      <EuiTitle size="xs">
-        <h5>
-          <FormattedMessage
-            id="xpack.stackAlerts.esQuery.ui.conditionPrompt"
-            defaultMessage="When number of matches"
+      <EuiFlexGroup alignItems="center" responsive={false} gutterSize="none">
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="xs">
+            <h5>
+              <FormattedMessage
+                id="xpack.stackAlerts.esQuery.ui.conditionPrompt"
+                defaultMessage="When number of matches"
+              />
+            </h5>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiIconTip
+            position="right"
+            color="subdued"
+            type="questionInCircle"
+            iconProps={{
+              className: 'eui-alignTop',
+            }}
+            content={i18n.translate('xpack.stackAlerts.esQuery.ui.conditionPrompt.toolTip', {
+              defaultMessage: 'The time window defined below applies only to the first rule check.',
+            })}
           />
-        </h5>
-      </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
       <EuiSpacer size="s" />
       <ThresholdExpression
         data-test-subj="thresholdExpression"