[Response Ops][Alerting] Edit text in Elasticsearch query rule and index threshold rule (#171896)

docs/user/alerting/rule-types/index-threshold.asciidoc

@@ -15,21 +15,37 @@ In *{stack-manage-app}* > *{rules-ui}*, click *Create rule*, fill in the name an
 [float]
 === Define the conditions
 
+When you create an index threshold rule, you must define the conditions for the rule to detect. For example:
+
 [role="screenshot"]
 image::user/alerting/images/rule-types-index-threshold-conditions.png[Defining index threshold rule conditions in {kib}]
 // NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
-When you create an index threshold rule, you must define the conditions for the rule to detect. For example:
+1. Specify the indices to query and a time field that will be used for the time window.
 
-Select an index::
-Index::: Specify the indices to query and a time field that will be used for the time window.
-When::: Specify how to calculate the value that is compared to the threshold. The value is calculated by aggregating a numeric field in a time window. The aggregation options are: `count`, `average`, `sum`, `min`, and `max`. When using `count` the document count is used and an aggregation field is not necessary. 
-Over/Grouped Over::: Specify whether the aggregation is applied over all documents or split into groups using a grouping field. If grouping is used, an <<alerting-concepts-alerts,alert>> will be created for each group when it exceeds the threshold. To limit the number of alerts on high cardinality fields, you must specify the number of groups to check against the threshold. Only the top groups are checked.
-Define the condition::
-This section defines a threshold value and a comparison operator (`is above`, `is above or equals`, `is below`, `is below or equals`, or `is between`). The result of the aggregation is compared to this threshold.
-It also defines a time window, which determines how far back to search for documents, using the time field set in the index clause. Generally this value should be a value higher than the check interval to avoid gaps in detection. 
+2. In the `WHEN` clause, specify how to calculate the value that is compared to the threshold.
+The value is calculated by aggregating a numeric field in a time window.
+The aggregation options are: count, average, sum, min, and max.
+When using count the document count is used and an aggregation field is not necessary.
 
-If data is available and all clauses have been defined, a preview chart will render the threshold value and display a line chart showing the value for the last 30 intervals. This can provide an indication of recent values and their proximity to the threshold, and help you tune the clauses.
+3. In the `OVER` or `GROUPED OVER` clause, specify whether the aggregation is applied over all documents or split into groups using a grouping field.
+If grouping is used, an alert will be created for each group when it exceeds the threshold.
+To limit the number of alerts on high cardinality fields, you must specify the number of groups to check against the threshold.
+Only the top groups are checked.
+
+4. Choose a threshold value and a comparison operator (`is above`, `is above or equals`, `is below`, `is below or equals`, or `is between`).
+The result of the aggregation is compared to this threshold.
+
+5. In the `FOR THE LAST` clause, specify a time window.
+It determines how far back to search for documents and uses the time field set in the index clause.
+
+6. Optionally add a KQL expression to further refine the conditions that the rule detects.
+
+7. Set the check interval, which defines how often to evaluate the rule conditions. 
+Generally this value should be set to a value that is smaller than the time window, to avoid gaps in detection.
+
+If data is available and all clauses have been defined, a preview chart will render the threshold value and display a line chart showing the value for the last 30 intervals.
+This can provide an indication of recent values and their proximity to the threshold, and help you tune the clauses.
 
 [float]
 [[actions-index-threshold]]
@@ -116,7 +132,7 @@ image::user/alerting/images/rule-types-index-threshold-example-aggregation.png[C
 image::user/alerting/images/rule-types-index-threshold-example-grouping.png[Choosing the groups]
 // NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
-.. Define the condition. To trigger the rule when any of the top four sites exceeds 420,000 bytes over a 24 hour period, select `is above` and enter `420000`. Then click *For the last*, enter `24`, and select `hours`.
+.. To trigger the rule when any of the top four sites exceeds 420,000 bytes over a 24 hour period, select `is above` and enter `420000`. Then click *For the last*, enter `24`, and select `hours`.
 +
 [role="screenshot"]
 image::user/alerting/images/rule-types-index-threshold-example-threshold.png[Setting the threshold]
@@ -129,7 +145,7 @@ image::user/alerting/images/rule-types-index-threshold-example-threshold.png[Set
 image::user/alerting/images/rule-types-index-threshold-example-preview.png[Setting the check interval]
 // NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
-The preview chart will render showing the 24 hour sum of bytes at 4 hours intervals (the _check interval_) for the past 120 hours (the last 30 intervals).
+The preview chart will render showing the 24 hour sum of bytes at 4 hours intervals for the past 120 hours (the last 30 intervals).
 --
 
 .. Change the time window and observe the effect it has on the chart. Compare a 24 window to a 12 hour window. Notice the variability in the sum of bytes, due to different traffic levels during the day compared to at night. This variability would result in noisy rules, so the 24 hour window is better. The preview chart can help you find the right values for your rule.

x-pack/plugins/stack_alerts/public/rule_types/components/index_select_popover.tsx

@@ -108,7 +108,7 @@ export const IndexSelectPopover: React.FunctionComponent<Props> = ({
             index && index.length > 0
               ? renderIndices(index)
               : i18n.translate('xpack.stackAlerts.components.ui.alertParams.indexPlaceholder', {
-                  defaultMessage: 'Select an index',
+                  defaultMessage: 'Select indices and a time field',
                 })
           }
           isActive={indexPopoverOpen}

x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/es_query_expression.tsx

@@ -197,7 +197,7 @@ export const EsQueryExpression: React.FC<
         <h5>
           <FormattedMessage
             id="xpack.stackAlerts.esQuery.ui.selectIndexPrompt"
-            defaultMessage="Select an index and time field"
+            defaultMessage="Select indices"
           />
         </h5>
       </EuiTitle>

x-pack/plugins/stack_alerts/public/rule_types/threshold/expression.tsx

@@ -167,7 +167,7 @@ export const IndexThresholdRuleTypeExpression: React.FunctionComponent<
         <h5>
           <FormattedMessage
             id="xpack.stackAlerts.threshold.ui.selectIndex"
-            defaultMessage="Select an index"
+            defaultMessage="Select indices"
           />
         </h5>
       </EuiTitle>
@@ -203,6 +203,16 @@ export const IndexThresholdRuleTypeExpression: React.FunctionComponent<
           setRuleParams('timeField', updatedTimeField)
         }
       />
+      <EuiSpacer />
+      <EuiTitle size="xs">
+        <h5>
+          <FormattedMessage
+            id="xpack.stackAlerts.threshold.ui.conditionPrompt"
+            defaultMessage="Define the condition"
+          />
+        </h5>
+      </EuiTitle>
+      <EuiSpacer size="s" />
       <WhenExpression
         display="fullWidth"
         data-test-subj="whenExpression"
@@ -238,16 +248,6 @@ export const IndexThresholdRuleTypeExpression: React.FunctionComponent<
         }
         onChangeSelectedTermSize={(selectedTermSize) => setRuleParams('termSize', selectedTermSize)}
       />
-      <EuiSpacer />
-      <EuiTitle size="xs">
-        <h5>
-          <FormattedMessage
-            id="xpack.stackAlerts.threshold.ui.conditionPrompt"
-            defaultMessage="Define the condition"
-          />
-        </h5>
-      </EuiTitle>
-      <EuiSpacer size="s" />
       <ThresholdExpression
         thresholdComparator={thresholdComparator ?? DEFAULT_VALUES.THRESHOLD_COMPARATOR}
         threshold={threshold}
@@ -276,17 +276,19 @@ export const IndexThresholdRuleTypeExpression: React.FunctionComponent<
           setRuleParams('timeWindowUnit', selectedWindowUnit)
         }
       />
-      <EuiSpacer />
-      <EuiTitle size="xs">
-        <h5>
-          <FormattedMessage
-            id="xpack.stackAlerts.threshold.ui.filterTitle"
-            defaultMessage="Filter (Optional)"
-          />
-        </h5>
-      </EuiTitle>
       <EuiSpacer size="s" />
       <EuiFormRow
+        label={i18n.translate('xpack.stackAlerts.threshold.ui.filterTitle', {
+          defaultMessage: 'Filter',
+        })}
+        labelAppend={
+          <EuiText color="subdued" size="xs">
+            <FormattedMessage
+              id="xpack.stackAlerts.threshold.ui.filter.optional"
+              defaultMessage="Optional"
+            />
+          </EuiText>
+        }
         helpText={i18n.translate('xpack.stackAlerts.threshold.ui.filterKQLHelpText', {
           defaultMessage: 'Use a KQL expression to limit the scope of your alerts.',
         })}

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_form.tsx

@@ -920,8 +920,16 @@ export const RuleForm = ({
           <EuiFormRow
             fullWidth
             label={i18n.translate('xpack.triggersActionsUI.sections.ruleForm.tagsFieldLabel', {
-              defaultMessage: 'Tags (optional)',
+              defaultMessage: 'Tags',
             })}
+            labelAppend={
+              <EuiText color="subdued" size="xs">
+                <FormattedMessage
+                  id="xpack.triggersActionsUI.sections.ruleForm.tagsFieldOptional"
+                  defaultMessage="Optional"
+                />
+              </EuiText>
+            }
           >
             <EuiComboBox
               noSuggestions

x-pack/test/screenshot_creation/apps/response_ops_docs/stack_alerting/index_threshold_rule.ts

@@ -41,7 +41,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         'rule-types-index-threshold-conditions',
         screenshotDirectories,
         1400,
-        1024
+        1300
       );
 
       await testSubjects.scrollIntoView('selectIndexExpression');
@@ -67,7 +67,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         'rule-types-index-threshold-example-aggregation',
         screenshotDirectories,
         1400,
-        1024
+        1300
       );
       await ofComboBox.type('bytes');
       const ofOptionsString = await comboBox.getOptionsList('availablefieldsOptionsComboBox');
@@ -103,7 +103,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         'rule-types-index-threshold-example-threshold',
         screenshotDirectories,
         1400,
-        1024
+        1300
       );
 
       await testSubjects.setValue('intervalInput', '4');