[8.7] [DOCS] Refresh index threshold rule screenshots (#152310) (#152590)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[DOCS] Refresh index threshold rule screenshots
(#152310)](https://github.com/elastic/kibana/pull/152310)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Lisa
Cawley","email":"lcawley@elastic.co"},"sourceCommit":{"committedDate":"2023-03-02T15:46:19Z","message":"[DOCS]
Refresh index threshold rule screenshots
(#152310)","sha":"0c60d8edb7cc32c8574d1665f9d81863582aa666","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","docs","Feature:Alerting/RuleTypes","v8.7.0","v8.8.0"],"number":152310,"url":"https://github.com/elastic/kibana/pull/152310","mergeCommit":{"message":"[DOCS]
Refresh index threshold rule screenshots
(#152310)","sha":"0c60d8edb7cc32c8574d1665f9d81863582aa666"}},"sourceBranch":"main","suggestedTargetBranches":["8.7"],"targetPullRequestStates":[{"branch":"8.7","label":"v8.7.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/152310","number":152310,"mergeCommit":{"message":"[DOCS]
Refresh index threshold rule screenshots
(#152310)","sha":"0c60d8edb7cc32c8574d1665f9d81863582aa666"}}]}]
BACKPORT-->

Co-authored-by: Lisa Cawley <lcawley@elastic.co>

docs/user/alerting/rule-types.asciidoc

@@ -86,6 +86,6 @@ Alerts associated with security rules are visible only in the {security-app};
 they are not visible in *{stack-manage-app} > {rules-ui}*.
 ==============================================
 
-include::rule-types/index-threshold.asciidoc[]
+include::rule-types/index-threshold.asciidoc[leveloffset=+1]
 include::rule-types/es-query.asciidoc[leveloffset=+1]
 include::rule-types/geo-rule-types.asciidoc[]

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

@@ -1,21 +1,16 @@
-[role="xpack"]
 [[rule-type-index-threshold]]
-=== Index threshold
+== Index threshold
 
 The index threshold rule type runs an {es} query. It aggregates field values from documents, compares them to threshold values, and schedules actions to run when the thresholds are met.
 
 [float]
-==== Create the rule
-
-Fill in the name and optional tags, then select *Index Threshold*.
-
-[float]
-==== Define the conditions
-
-Define properties to detect the condition.
+=== Rule conditions
 
 [role="screenshot"]
-image::user/alerting/images/rule-types-index-threshold-conditions.png[Five clauses define the condition to detect]
+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:
 
 Index:: This clause requires an *index or data view* and a *time field* that will be used for the *time window*.
 When:: This clause specifies how the value to be compared to the threshold is calculated. The value is calculated by aggregating a numeric field a the *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. 
@@ -23,78 +18,97 @@ Over/Grouped Over:: This clause lets you configure whether the aggregation is ap
 Threshold:: This clause defines a threshold value and a comparison operator  (one of `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. 
 Time window:: This clause determines how far back to search for documents, using the *time field* set in the *index* clause. Generally this value should be to a value higher than the *check every* value, 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. 
-
-[role="screenshot"]
-image::user/alerting/images/rule-types-index-threshold-preview.png[Five clauses define the condition to detect]
+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]
-==== Add action variables
+[[action-variables-index-threshold]]
+=== Action variables
 
-<<defining-rules-actions-details, Add an action>> to run when the rule condition is met. The following variables are specific to the index threshold rule. You can also specify <<defining-rules-actions-variables, variables common to all rules>>.
+The following action variables are specific to the index threshold rule. You can also specify <<rule-action-variables,variables common to all rules>>.
 
-`context.title`:: A preconstructed title for the rule. Example: `rule kibana sites - high egress met threshold`.
+`context.conditions`:: A description of the threshold condition. Example: `count greater than 4`
+`context.date`:: The date, in ISO format, that the rule met the threshold condition. Example: `2020-01-01T00:00:00.000Z`.
+`context.group`:: The name of the action group associated with the threshold condition. Example: `threshold met`.
 `context.message`:: A preconstructed message for the rule. Example: +
 `rule 'kibana sites - high egress' is active for group 'threshold met':` +
 `- Value: 42` +
 `- Conditions Met: count greater than 4 over 5m` +
 `- Timestamp: 2020-01-01T00:00:00.000Z`
-
-`context.group`:: The name of the action group associated with the threshold condition. Example: `threshold met`.
-`context.date`:: The date, in ISO format, that the rule met the threshold condition. Example: `2020-01-01T00:00:00.000Z`.
+`context.title`:: A preconstructed title for the rule. Example: `rule kibana sites - high egress met threshold`.
 `context.value`:: The value for the rule that met the threshold condition.
-`context.conditions`:: A description of the threshold condition. Example: `count greater than 4`
 
 [float]
-==== Example
+=== Example
 
-In this example, you will use the {kib} <<add-sample-data,sample weblog dataset>> to set up and tune the conditions on an index threshold rule. For this example, you want to detect when any of the top four sites serve more than 420,000 bytes over a 24 hour period.
+In this example, you will use the {kib} <<add-sample-data,sample weblog data set>> to set up and tune the conditions on an index threshold rule. For this example, you want to detect when any of the top four sites serve more than 420,000 bytes over a 24 hour period.
 
 .  Open the main menu, then click *{stack-manage-app} > {rules-ui}*.
 
-.  Create a new rule that is checked every four hours and triggers actions when the rule status changes.
+.  Create a new rule.
+
+.. Provide a rule name and select the **Index threshold** rule type.
 +
 [role="screenshot"]
 image::user/alerting/images/rule-types-index-threshold-select.png[Choosing an index threshold rule type]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
-.  Select the **Index threshold** rule type.
-
-. Click *Index*, and set *Indices to query* to *kibana_sample_data_logs*.
+.. Select an index. Click *Index*, and set *Indices to query* to `kibana_sample_data_logs`. Set the *Time field* to `@timestamp`.
 +
 [role="screenshot"]
 image::user/alerting/images/rule-types-index-threshold-example-index.png[Choosing an index]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
-. Set the *Time field* to *@timestamp*.
-+
-[role="screenshot"]
-image::user/alerting/images/rule-types-index-threshold-example-timefield.png[Choosing a time field]
-
-. To detect the number of bytes served during the time window, click *When* and select `sum` as the aggregation, and bytes as the field to aggregate.
+.. To detect the number of bytes served during the time window, click *When* and select `sum` as the aggregation, and `bytes` as the field to aggregate.
 +
 [role="screenshot"]
 image::user/alerting/images/rule-types-index-threshold-example-aggregation.png[Choosing the aggregation]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
-. To detect the four sites that have the most traffic, click *Over* and select `top`, enter `4`, and select `host.keyword` as the field.
+.. To detect the four sites that have the most traffic, click *Over* and select `top`, enter `4`, and select `host.keyword` as the field.
 +
 [role="screenshot"]
 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.
 
-. 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`.
+.. 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`.
 +
 [role="screenshot"]
 image::user/alerting/images/rule-types-index-threshold-example-threshold.png[Setting the threshold]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
-. Finally, click *For the last*, enter `24` and select `hours` to complete the rule configuration.
+.. Schedule the rule to check every four hours.
++
+--
+[role="screenshot"]
+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).
+--
+
+.. 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.
+
+.. Define the actions for your rule.
++
+--
+You can add one or more actions to your rule to generate notifications when its conditions are met and when they are no longer met. For each action, you must select a connector, set the action frequency, and compose the notification details.
+For example, add an action that uses a server log connector to write an entry to the Kibana server log:
+
+[role="screenshot"]
+image::user/alerting/images/rule-types-index-threshold-example-action.png[Add an action to the rule]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
+
+NOTE: The index threshold rule does not support alert summaries; therefore they do not appear in the action frequency options.
+
+The unique action variables that you can use in the notification are listed in <<action-variables-index-threshold>>. For more information, refer to <<defining-rules-actions-details>> and <<action-types>>.
+--
+
+.. Save the rule.
+
+. Find the rule and view its details in *{stack-manage-app} > {rules-ui}*. For example, you can see the status of the rule and its alerts:
 +
 [role="screenshot"]
-image::user/alerting/images/rule-types-index-threshold-example-window.png[Setting the time window]
+image::user/alerting/images/rule-types-index-threshold-example-alerts.png[View the list of alerts for the rule]
 
-. The preview chart will render showing the 24 hour sum of bytes at 4 hours intervals (the *check every* interval) for the past 120 hours (the last 30 intervals).
-+
-[role="screenshot"]
-image::user/alerting/images/rule-types-index-threshold-example-preview.png[Setting the time window]
+. Delete or disable this example rule when it's no longer useful. In the detailed rule view, select *Delete rule* from the actions menu.
 
-. 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. 
-+
-[role="screenshot"]
-image::user/alerting/images/rule-types-index-threshold-example-comparison.png[Comparing two time windows]

x-pack/plugins/triggers_actions_ui/public/common/expression_items/group_by_over.tsx

@@ -185,6 +185,7 @@ export const GroupByExpression = ({
               <EuiFlexItem grow={false}>
                 <EuiFormRow isInvalid={errors.termSize.length > 0} error={errors.termSize}>
                   <EuiFieldNumber
+                    data-test-subj="fieldsNumberSelect"
                     css={css`
                       min-width: 50px;
                     `}

x-pack/test/functional/services/rules/api.ts

@@ -60,7 +60,7 @@ export function RulesAPIServiceProvider({ getService }: FtrProviderContext) {
         .set('kbn-xsrf', 'foo')
         .expect(200);
 
-      for (const rule of body) {
+      for (const rule of body.data) {
         await this.deleteRule(rule.id);
       }
     },

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

@@ -10,6 +10,7 @@ import { FtrProviderContext } from '../../../ftr_provider_context';
 export default function ({ loadTestFile, getService }: FtrProviderContext) {
   const browser = getService('browser');
   const actions = getService('actions');
+  const rules = getService('rules');
 
   describe('stack alerting', function () {
     before(async () => {
@@ -23,10 +24,12 @@ export default function ({ loadTestFile, getService }: FtrProviderContext) {
     });
 
     after(async () => {
+      await rules.api.deleteAllRules();
       await actions.api.deleteAllConnectors();
     });
 
     loadTestFile(require.resolve('./list_view'));
     loadTestFile(require.resolve('./connector_types'));
+    loadTestFile(require.resolve('./index_threshold_rule'));
   });
 }

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

@@ -0,0 +1,141 @@
+/*
+ * 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 expect from '@kbn/expect';
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const comboBox = getService('comboBox');
+  const commonScreenshots = getService('commonScreenshots');
+  const find = getService('find');
+  const rules = getService('rules');
+  const testSubjects = getService('testSubjects');
+  const pageObjects = getPageObjects(['common', 'header']);
+  const screenshotDirectories = ['response_ops_docs', 'stack_alerting'];
+
+  describe('index threshold rule', function () {
+    it('create rule screenshot', async () => {
+      await pageObjects.common.navigateToApp('triggersActions');
+      await pageObjects.header.waitUntilLoadingHasFinished();
+      await rules.common.clickCreateAlertButton();
+      await testSubjects.setValue('ruleNameInput', 'kibana sites - high egress');
+      await testSubjects.click('tagsComboBox');
+      await testSubjects.setValue('tagsComboBox', 'sample-data');
+      await testSubjects.click('solutionsFilterButton');
+      await testSubjects.click('solutionstackAlertsFilterOption');
+      await testSubjects.setValue('solutionsFilterButton', 'solutionstackAlertsFilterOption');
+      await commonScreenshots.takeScreenshot(
+        'rule-types-index-threshold-select',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+
+      await testSubjects.click('.index-threshold-SelectOption');
+      await commonScreenshots.takeScreenshot(
+        'rule-types-index-threshold-conditions',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+
+      await testSubjects.scrollIntoView('selectIndexExpression');
+      await testSubjects.click('selectIndexExpression');
+      const indexComboBox = await find.byCssSelector('#indexSelectSearchBox');
+      await indexComboBox.click();
+      await indexComboBox.type('kibana_sample_data_logs ');
+      const filterSelectItem = await find.byCssSelector(`.euiFilterSelectItem`);
+      await filterSelectItem.click();
+      await testSubjects.click('thresholdAlertTimeFieldSelect');
+      await testSubjects.setValue('thresholdAlertTimeFieldSelect', '@timestamp');
+      await commonScreenshots.takeScreenshot(
+        'rule-types-index-threshold-example-index',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+      await testSubjects.click('closePopover');
+
+      await testSubjects.click('whenExpression');
+      await testSubjects.click('whenExpressionSelect');
+      await testSubjects.setValue('whenExpressionSelect', 'sum()');
+      await testSubjects.click('ofExpressionPopover');
+      const ofComboBox = await find.byCssSelector('#ofField');
+      await ofComboBox.click();
+      await commonScreenshots.takeScreenshot(
+        'rule-types-index-threshold-example-aggregation',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+      await ofComboBox.type('bytes');
+      const ofOptionsString = await comboBox.getOptionsList('availablefieldsOptionsComboBox');
+      const ofOptions = ofOptionsString.trim().split('\n');
+      expect(ofOptions.length > 0).to.be(true);
+      await comboBox.set('availablefieldsOptionsComboBox', ofOptions[0]);
+
+      await testSubjects.click('groupByExpression');
+      await testSubjects.click('overExpressionSelect');
+      await testSubjects.setValue('overExpressionSelect', 'top');
+      await testSubjects.setValue('fieldsNumberSelect', '4');
+      await testSubjects.setValue('fieldsExpressionSelect', 'host.keyword');
+      await commonScreenshots.takeScreenshot(
+        'rule-types-index-threshold-example-grouping',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+      // need this two out of popup clicks to close them
+      const nameInput1 = await testSubjects.find('ruleNameInput');
+      await nameInput1.click();
+
+      await testSubjects.click('thresholdPopover');
+      await testSubjects.setValue('alertThresholdInput', '420000');
+      await testSubjects.click('forLastExpression');
+      await testSubjects.setValue('timeWindowSizeNumber', '24');
+      await testSubjects.setValue('timeWindowUnitSelect', 'hours');
+      // need this two out of popup clicks to close them
+      const nameInput2 = await testSubjects.find('ruleNameInput');
+      await nameInput2.click();
+      await testSubjects.scrollIntoView('thresholdPopover');
+      await commonScreenshots.takeScreenshot(
+        'rule-types-index-threshold-example-threshold',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+
+      await testSubjects.setValue('intervalInput', '4');
+      await testSubjects.setValue('intervalInputUnit', 'hours');
+      // need this two out of popup clicks to close them
+      const nameInput3 = await testSubjects.find('ruleNameInput');
+      await nameInput3.click();
+      await testSubjects.scrollIntoView('alertVisualizationChart');
+      await commonScreenshots.takeScreenshot(
+        'rule-types-index-threshold-example-preview',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+
+      await testSubjects.click('.server-log-alerting-ActionTypeSelectOption');
+      await testSubjects.scrollIntoView('addAlertActionButton');
+      await commonScreenshots.takeScreenshot(
+        'rule-types-index-threshold-example-action',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+      /*
+       * const saveButton = await testSubjects.find('saveRuleButton');
+       * await saveButton.click();
+       */
+      const flyOutCancelButton = await testSubjects.find('euiFlyoutCloseButton');
+      await flyOutCancelButton.click();
+    });
+  });
+}