[AO] Move filter query up and add auto-complete functionality (#162878)

Closes #162767

## Summary

This PR moves the filter query up, based on the
[design](https://www.figma.com/file/WtGj2hHUPVGTpQjSs1TtTe/Rule-creation-experience?type=design&node-id=459-386412&mode=design&t=jClkb4wrePTrVMwS-0).

<img
src="18c9bf5b-744e-44a0-bd40-872794d849f3"
width=400 >

## 🧪 How to test
- Create a threshold rule without a filter
- Check the rule saved object and make sure we don't have a filter there
- Edit the rule and add a filter and check the auto-complete works fine
- Make sure the filter is applied to the preview
- Check the rule saved object and make sure the filter is saved there
correctly

---------

Co-authored-by: Faisal Kanout <faisal.kanout@elastic.co>

x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx

@@ -284,7 +284,7 @@ export const Expressions: React.FC<Props> = (props) => {
 
   return (
     <>
-      <EuiSpacer size={'m'} />
+      <EuiSpacer size="m" />
       <EuiText size="xs">
         <h4>
           <FormattedMessage
@@ -293,7 +293,7 @@ export const Expressions: React.FC<Props> = (props) => {
           />
         </h4>
       </EuiText>
-      <EuiSpacer size={'xs'} />
+      <EuiSpacer size="xs" />
       {ruleParams.criteria &&
         ruleParams.criteria.map((e, idx) => {
           return (
@@ -330,14 +330,14 @@ export const Expressions: React.FC<Props> = (props) => {
         />
       </div>
 
-      <EuiSpacer size={'m'} />
+      <EuiSpacer size="m" />
       <div>
         <EuiButtonEmpty
           data-test-subj="infraExpressionsAddConditionButton"
-          color={'primary'}
-          iconSide={'left'}
-          flush={'left'}
-          iconType={'plusInCircleFilled'}
+          color="primary"
+          iconSide="left"
+          flush="left"
+          iconType="plusInCircleFilled"
           onClick={addExpression}
         >
           <FormattedMessage
@@ -347,7 +347,7 @@ export const Expressions: React.FC<Props> = (props) => {
         </EuiButtonEmpty>
       </div>
 
-      <EuiSpacer size={'m'} />
+      <EuiSpacer size="m" />
       <EuiAccordion
         id="advanced-options-accordion"
         buttonContent={i18n.translate('xpack.infra.metrics.alertFlyout.advancedOptions', {
@@ -381,7 +381,7 @@ export const Expressions: React.FC<Props> = (props) => {
           />
         </EuiPanel>
       </EuiAccordion>
-      <EuiSpacer size={'m'} />
+      <EuiSpacer size="m" />
 
       <EuiFormRow
         label={i18n.translate('xpack.infra.metrics.alertFlyout.filterLabel', {
@@ -410,7 +410,7 @@ export const Expressions: React.FC<Props> = (props) => {
         )}
       </EuiFormRow>
 
-      <EuiSpacer size={'m'} />
+      <EuiSpacer size="m" />
       <EuiFormRow
         label={i18n.translate('xpack.infra.metrics.alertFlyout.createAlertPerText', {
           defaultMessage: 'Group alerts by (optional)',
@@ -458,7 +458,7 @@ export const Expressions: React.FC<Props> = (props) => {
           </EuiText>
         </>
       )}
-      <EuiSpacer size={'s'} />
+      <EuiSpacer size="s" />
       <EuiCheckbox
         id="metrics-alert-group-disappear-toggle"
         label={
@@ -483,7 +483,7 @@ export const Expressions: React.FC<Props> = (props) => {
         checked={Boolean(hasGroupBy && ruleParams.alertOnGroupDisappear)}
         onChange={(e) => setRuleParams('alertOnGroupDisappear', e.target.checked)}
       />
-      <EuiSpacer size={'m'} />
+      <EuiSpacer size="m" />
     </>
   );
 };

x-pack/plugins/observability/public/components/threshold/threshold_rule_expression.tsx

@@ -5,20 +5,20 @@
  * 2.0.
  */
 
-import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { debounce } from 'lodash';
 import {
   EuiButtonEmpty,
   EuiCallOut,
   EuiCheckbox,
   EuiEmptyPrompt,
-  EuiFieldSearch,
   EuiFormRow,
   EuiIcon,
   EuiLink,
   EuiLoadingSpinner,
   EuiSpacer,
   EuiText,
+  EuiTitle,
   EuiToolTip,
 } from '@elastic/eui';
 import { ISearchSource } from '@kbn/data-plugin/common';
@@ -282,11 +282,6 @@ export default function Expressions(props: Props) {
     }
   }, [metadata]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const handleFieldSearchChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => onFilterChange(e.target.value),
-    [onFilterChange]
-  );
-
   const hasGroupBy = useMemo(
     () => ruleParams.groupBy && ruleParams.groupBy.length > 0,
     [ruleParams.groupBy]
@@ -336,13 +331,22 @@ export default function Expressions(props: Props) {
     return (
       <>
         <EuiEmptyPrompt title={<EuiLoadingSpinner size="xl" />} />
-        <EuiSpacer size={'m'} />
+        <EuiSpacer size="m" />
       </>
     );
   }
 
   return (
     <>
+      <EuiTitle size="xs">
+        <h5>
+          <FormattedMessage
+            id="xpack.observability.threshold.rule.alertFlyout.selectDataViewPrompt"
+            defaultMessage="Select a data view"
+          />
+        </h5>
+      </EuiTitle>
+      <EuiSpacer size="s" />
       <DataViewSelectPopover
         dependencies={{ dataViews, dataViewEditor }}
         dataView={dataView}
@@ -352,16 +356,32 @@ export default function Expressions(props: Props) {
           onChangeMetaData({ ...metadata, adHocDataViewList });
         }}
       />
-      <EuiSpacer size={'s'} />
-      <EuiText size="xs">
-        <h4>
+      <EuiSpacer size="l" />
+      <EuiTitle size="xs">
+        <h5>
           <FormattedMessage
-            id="xpack.observability.threshold.rule.alertFlyout.conditions"
-            defaultMessage="Conditions"
+            id="xpack.observability.threshold.rule.alertFlyout.defineTextQueryPrompt"
+            defaultMessage="Define query filter (optional)"
           />
-        </h4>
-      </EuiText>
-      <EuiSpacer size={'xs'} />
+        </h5>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <MetricsExplorerKueryBar
+        derivedIndexPattern={derivedIndexPattern}
+        onChange={debouncedOnFilterChange}
+        onSubmit={onFilterChange}
+        value={ruleParams.filterQuery}
+      />
+      <EuiSpacer size="l" />
+      <EuiTitle size="xs">
+        <h5>
+          <FormattedMessage
+            id="xpack.observability.threshold.rule.alertFlyout.setConditions"
+            defaultMessage="Set rule conditions"
+          />
+        </h5>
+      </EuiTitle>
+      <EuiSpacer size="s" />
       {ruleParams.criteria &&
         ruleParams.criteria.map((e, idx) => {
           return (
@@ -397,14 +417,14 @@ export default function Expressions(props: Props) {
           onChangeWindowUnit={updateTimeUnit}
         />
       </div>
-      <EuiSpacer size={'m'} />
+      <EuiSpacer size="m" />
       <div>
         <EuiButtonEmpty
           data-test-subj="thresholdRuleExpressionsAddConditionButton"
-          color={'primary'}
-          iconSide={'left'}
-          flush={'left'}
-          iconType={'plusInCircleFilled'}
+          color="primary"
+          iconSide="left"
+          flush="left"
+          iconType="plusInCircleFilled"
           onClick={addExpression}
         >
           <FormattedMessage
@@ -413,36 +433,7 @@ export default function Expressions(props: Props) {
           />
         </EuiButtonEmpty>
       </div>
-      <EuiSpacer size={'m'} />
-      <EuiFormRow
-        label={i18n.translate('xpack.observability.threshold.rule.alertFlyout.filterLabel', {
-          defaultMessage: 'Filter (optional)',
-        })}
-        helpText={i18n.translate('xpack.observability.threshold.rule.alertFlyout.filterHelpText', {
-          defaultMessage: 'Use a KQL expression to limit the scope of your alert trigger.',
-        })}
-        fullWidth
-        display="rowCompressed"
-        isInvalid={!!errors.filterQuery}
-      >
-        {(metadata && derivedIndexPattern && (
-          <MetricsExplorerKueryBar
-            derivedIndexPattern={derivedIndexPattern}
-            onChange={debouncedOnFilterChange}
-            onSubmit={onFilterChange}
-            value={ruleParams.filterQuery}
-          />
-        )) || (
-          <EuiFieldSearch
-            data-test-subj="thresholdRuleExpressionsFieldSearch"
-            onChange={handleFieldSearchChange}
-            value={ruleParams.filterQuery}
-            fullWidth
-            isInvalid={!!errors.filterQuery}
-          />
-        )}
-      </EuiFormRow>
-      <EuiSpacer size={'m'} />
+      <EuiSpacer size="m" />
       <EuiFormRow
         label={i18n.translate('xpack.observability.threshold.rule.alertFlyout.createAlertPerText', {
           defaultMessage: 'Group alerts by (optional)',
@@ -493,7 +484,7 @@ export default function Expressions(props: Props) {
           </EuiText>
         </>
       )}
-      <EuiSpacer size={'s'} />
+      <EuiSpacer size="s" />
       <EuiCheckbox
         id="metrics-alert-group-disappear-toggle"
         label={
@@ -524,7 +515,7 @@ export default function Expressions(props: Props) {
         checked={Boolean(hasGroupBy && ruleParams.alertOnGroupDisappear)}
         onChange={(e) => setRuleParams('alertOnGroupDisappear', e.target.checked)}
       />
-      <EuiSpacer size={'m'} />
+      <EuiSpacer size="m" />
     </>
   );
 }

x-pack/plugins/translations/translations/fr-FR.json

@@ -27818,7 +27818,6 @@
     "xpack.observability.threshold.rule.alertFlyout.alertDescription": "Alerter quand un type de données Observability atteint ou dépasse une valeur donnée.",
     "xpack.observability.threshold.rule.alertFlyout.alertOnGroupDisappear": "Me prévenir si un groupe cesse de signaler les données",
     "xpack.observability.threshold.rule.alertFlyout.alertPerRedundantFilterError.docsLink": "les documents",
-    "xpack.observability.threshold.rule.alertFlyout.conditions": "Conditions",
     "xpack.observability.threshold.rule.alertFlyout.createAlertPerHelpText": "Créer une alerte pour chaque valeur unique. Par exemple : \"host.id\" ou \"cloud.region\".",
     "xpack.observability.threshold.rule.alertFlyout.createAlertPerText": "Regrouper les alertes par (facultatif)",
     "xpack.observability.threshold.rule.alertFlyout.customEquation": "Équation personnalisée",
@@ -27839,8 +27838,6 @@
     "xpack.observability.threshold.rule.alertFlyout.error.thresholdTypeRequired": "Les seuils doivent contenir un nombre valide.",
     "xpack.observability.threshold.rule.alertFlyout.error.timeRequred": "La taille de temps est requise.",
     "xpack.observability.threshold.rule.alertFlyout.expandRowLabel": "Développer la ligne.",
-    "xpack.observability.threshold.rule.alertFlyout.filterHelpText": "Utilisez une expression KQL pour limiter la portée de votre déclenchement d'alerte.",
-    "xpack.observability.threshold.rule.alertFlyout.filterLabel": "Filtre (facultatif)",
     "xpack.observability.threshold.rule.alertFlyout.groupDisappearHelpText": "Activez cette option pour déclencher l’action si un groupe précédemment détecté cesse de signaler des résultats. Ce n’est pas recommandé pour les infrastructures à montée en charge dynamique qui peuvent rapidement lancer ou stopper des nœuds automatiquement.",
     "xpack.observability.threshold.rule.alertFlyout.ofExpression.popoverLinkLabel": "Apprenez comment ajouter davantage de données",
     "xpack.observability.threshold.rule.alertFlyout.outsideRangeLabel": "N'est pas entre",

x-pack/plugins/translations/translations/ja-JP.json

@@ -27818,7 +27818,6 @@
     "xpack.observability.threshold.rule.alertFlyout.alertDescription": "オブザーバビリティデータタイプが特定の値以上になったときにアラートを送信します。",
     "xpack.observability.threshold.rule.alertFlyout.alertOnGroupDisappear": "グループがデータのレポートを停止する場合にアラートで通知する",
     "xpack.observability.threshold.rule.alertFlyout.alertPerRedundantFilterError.docsLink": "ドキュメント",
-    "xpack.observability.threshold.rule.alertFlyout.conditions": "条件",
     "xpack.observability.threshold.rule.alertFlyout.createAlertPerHelpText": "すべての一意の値についてアラートを作成します。例：「host.id」または「cloud.region」。",
     "xpack.observability.threshold.rule.alertFlyout.createAlertPerText": "アラートのグループ化条件（オプション）",
     "xpack.observability.threshold.rule.alertFlyout.customEquation": "カスタム等式",
@@ -27839,8 +27838,6 @@
     "xpack.observability.threshold.rule.alertFlyout.error.thresholdTypeRequired": "しきい値には有効な数値を含める必要があります。",
     "xpack.observability.threshold.rule.alertFlyout.error.timeRequred": "ページサイズが必要です。",
     "xpack.observability.threshold.rule.alertFlyout.expandRowLabel": "行を展開します。",
-    "xpack.observability.threshold.rule.alertFlyout.filterHelpText": "KQL式を使用して、アラートトリガーの範囲を制限します。",
-    "xpack.observability.threshold.rule.alertFlyout.filterLabel": "フィルター（任意）",
     "xpack.observability.threshold.rule.alertFlyout.groupDisappearHelpText": "以前に検出されたグループが結果を報告しなくなった場合は、これを有効にすると、アクションがトリガーされます。自動的に急速にノードを開始および停止することがある動的に拡張するインフラストラクチャーでは、これは推奨されません。",
     "xpack.observability.threshold.rule.alertFlyout.ofExpression.popoverLinkLabel": "データの追加方法",
     "xpack.observability.threshold.rule.alertFlyout.outsideRangeLabel": "is not between",

x-pack/plugins/translations/translations/zh-CN.json

@@ -27816,7 +27816,6 @@
     "xpack.observability.threshold.rule.alertFlyout.alertDescription": "任何 Observability 数据类型到达或超出给定值时告警。",
     "xpack.observability.threshold.rule.alertFlyout.alertOnGroupDisappear": "组停止报告数据时提醒我",
     "xpack.observability.threshold.rule.alertFlyout.alertPerRedundantFilterError.docsLink": "文档",
-    "xpack.observability.threshold.rule.alertFlyout.conditions": "条件",
     "xpack.observability.threshold.rule.alertFlyout.createAlertPerHelpText": "为每个唯一值创建告警。例如：“host.id”或“cloud.region”。",
     "xpack.observability.threshold.rule.alertFlyout.createAlertPerText": "告警分组依据（可选）",
     "xpack.observability.threshold.rule.alertFlyout.customEquation": "定制方程",
@@ -27837,8 +27836,6 @@
     "xpack.observability.threshold.rule.alertFlyout.error.thresholdTypeRequired": "阈值必须包含有效数字。",
     "xpack.observability.threshold.rule.alertFlyout.error.timeRequred": "“时间大小”必填。",
     "xpack.observability.threshold.rule.alertFlyout.expandRowLabel": "展开行。",
-    "xpack.observability.threshold.rule.alertFlyout.filterHelpText": "使用 KQL 表达式限制告警触发的范围。",
-    "xpack.observability.threshold.rule.alertFlyout.filterLabel": "筛选（可选）",
     "xpack.observability.threshold.rule.alertFlyout.groupDisappearHelpText": "启用此选项可在之前检测的组开始不报告任何数据时触发操作。不建议将此选项用于可能会快速自动启动和停止节点的动态扩展基础架构。",
     "xpack.observability.threshold.rule.alertFlyout.ofExpression.popoverLinkLabel": "了解如何添加更多数据",
     "xpack.observability.threshold.rule.alertFlyout.outsideRangeLabel": "不介于",