Address comments

Author: JiaweiWu

x-pack/plugins/triggers_actions_ui/public/application/lib/rule_api/map_filters_to_kuery_node.test.ts

@@ -57,6 +57,30 @@ describe('mapFiltersToKueryNode', () => {
     );
   });
 
+  test('should handle ruleLastRunOutcomesFilter', () => {
+    expect(
+      toElasticsearchQuery(
+        mapFiltersToKueryNode({
+          ruleLastRunOutcomesFilter: ['succeeded'],
+        }) as KueryNode
+      )
+    ).toEqual(
+      toElasticsearchQuery(fromKueryExpression('alert.attributes.lastRun.outcome: succeeded'))
+    );
+
+    expect(
+      toElasticsearchQuery(
+        mapFiltersToKueryNode({
+          ruleLastRunOutcomesFilter: ['succeeded', 'failed', 'warning'],
+        }) as KueryNode
+      )
+    ).toEqual(
+      toElasticsearchQuery(
+        fromKueryExpression('alert.attributes.lastRun.outcome: (succeeded or failed or warning)')
+      )
+    );
+  });
+
   test('should handle ruleStatusesFilter', () => {
     expect(
       toElasticsearchQuery(
@@ -260,6 +284,7 @@ describe('mapFiltersToKueryNode', () => {
           typesFilter: ['type', 'filter'],
           actionTypesFilter: ['action', 'types', 'filter'],
           ruleExecutionStatusesFilter: ['alert', 'statuses', 'filter'],
+          ruleLastRunOutcomesFilter: ['warning', 'failed'],
           tagsFilter: ['a', 'b', 'c'],
         }) as KueryNode
       )
@@ -271,6 +296,7 @@ describe('mapFiltersToKueryNode', () => {
         alert.attributes.actions:{ actionTypeId:types } OR
         alert.attributes.actions:{ actionTypeId:filter }) and
       alert.attributes.executionStatus.status:(alert or statuses or filter) and
+      alert.attributes.lastRun.outcome:(warning or failed) and
       alert.attributes.tags:(a or b or c)`
         )
       )

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_event_log_list_status.tsx

@@ -8,6 +8,12 @@
 import React, { useMemo } from 'react';
 import { EuiIcon } from '@elastic/eui';
 import { RuleAlertingOutcome } from '@kbn/alerting-plugin/common';
+import {
+  RULE_LAST_RUN_OUTCOME_SUCCEEDED,
+  RULE_LAST_RUN_OUTCOME_FAILED,
+  RULE_LAST_RUN_OUTCOME_WARNING,
+  ALERT_STATUS_UNKNOWN,
+} from '../../rules_list/translations';
 
 interface RuleEventLogListStatusProps {
   status: RuleAlertingOutcome;
@@ -32,10 +38,10 @@ const STATUS_TO_COLOR: Record<RuleAlertingOutcome, string> = {
 };
 
 const STATUS_TO_OUTCOME: Record<RuleAlertingOutcome, string> = {
-  success: 'succeeded',
-  failure: 'failed',
-  warning: 'warning',
-  unknown: 'unknown',
+  success: RULE_LAST_RUN_OUTCOME_SUCCEEDED,
+  failure: RULE_LAST_RUN_OUTCOME_FAILED,
+  warning: RULE_LAST_RUN_OUTCOME_WARNING,
+  unknown: ALERT_STATUS_UNKNOWN,
 };
 
 export const RuleEventLogListStatus = (props: RuleEventLogListStatusProps) => {
@@ -44,7 +50,7 @@ export const RuleEventLogListStatus = (props: RuleEventLogListStatusProps) => {
 
   const statusString = useMemo(() => {
     if (lastRunOutcomeEnabled) {
-      return STATUS_TO_OUTCOME[status];
+      return STATUS_TO_OUTCOME[status].toLocaleLowerCase();
     }
     return status;
   }, [lastRunOutcomeEnabled, status]);

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_last_run_outcome_filter.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiPopover, EuiFilterButton, EuiFilterSelectItem, EuiHealth } from '@elastic/eui';
 import { RuleLastRunOutcomes, RuleLastRunOutcomeValues } from '@kbn/alerting-plugin/common';
@@ -23,7 +23,6 @@ export const RuleLastRunOutcomeFilter: React.FunctionComponent<RuleLastRunOutcom
   selectedOutcomes,
   onChange,
 }: RuleLastRunOutcomeFilterProps) => {
-  const [selectedValues, setSelectedValues] = useState<string[]>(selectedOutcomes);
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
   const onTogglePopover = useCallback(() => {
@@ -34,16 +33,17 @@ export const RuleLastRunOutcomeFilter: React.FunctionComponent<RuleLastRunOutcom
     setIsPopoverOpen(false);
   }, [setIsPopoverOpen]);
 
-  useEffect(() => {
-    if (onChange) {
-      onChange(selectedValues);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedValues]);
-
-  useEffect(() => {
-    setSelectedValues(selectedOutcomes);
-  }, [selectedOutcomes]);
+  const onFilterSelectItem = useCallback(
+    (filterItem: string) => () => {
+      const isPreviouslyChecked = selectedOutcomes.includes(filterItem);
+      if (isPreviouslyChecked) {
+        onChange?.(selectedOutcomes.filter((val) => val !== filterItem));
+      } else {
+        onChange?.(selectedOutcomes.concat(filterItem));
+      }
+    },
+    [onChange, selectedOutcomes]
+  );
 
   return (
     <EuiPopover
@@ -52,9 +52,9 @@ export const RuleLastRunOutcomeFilter: React.FunctionComponent<RuleLastRunOutcom
       button={
         <EuiFilterButton
           iconType="arrowDown"
-          hasActiveFilters={selectedValues.length > 0}
-          numActiveFilters={selectedValues.length}
-          numFilters={selectedValues.length}
+          hasActiveFilters={selectedOutcomes.length > 0}
+          numActiveFilters={selectedOutcomes.length}
+          numFilters={selectedOutcomes.length}
           onClick={onTogglePopover}
           data-test-subj="ruleLastRunOutcomeFilterButton"
         >
@@ -72,15 +72,8 @@ export const RuleLastRunOutcomeFilter: React.FunctionComponent<RuleLastRunOutcom
             <EuiFilterSelectItem
               key={item}
               style={{ textTransform: 'capitalize' }}
-              onClick={() => {
-                const isPreviouslyChecked = selectedValues.includes(item);
-                if (isPreviouslyChecked) {
-                  setSelectedValues(selectedValues.filter((val) => val !== item));
-                } else {
-                  setSelectedValues(selectedValues.concat(item));
-                }
-              }}
-              checked={selectedValues.includes(item) ? 'on' : undefined}
+              onClick={onFilterSelectItem(item)}
+              checked={selectedOutcomes.includes(item) ? 'on' : undefined}
               data-test-subj={`ruleLastRunOutcome${item}FilterOption`}
             >
               <EuiHealth color={healthColor}>

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list.tsx

@@ -34,6 +34,7 @@ import {
   RuleExecutionStatus,
   ALERTS_FEATURE_ID,
   RuleExecutionStatusErrorReasons,
+  RuleLastRunOutcomeValues,
 } from '@kbn/alerting-plugin/common';
 import { AlertingConnectorFeatureId } from '@kbn/actions-plugin/common';
 import {
@@ -301,7 +302,7 @@ export const RulesList = ({
   const { loadRuleAggregations, rulesStatusesTotal, rulesLastRunOutcomesTotal } =
     useLoadRuleAggregations({
       searchText,
-      typesFilter,
+      typesFilter: rulesTypesFilter,
       actionTypesFilter,
       ruleExecutionStatusesFilter,
       ruleLastRunOutcomesFilter,
@@ -489,7 +490,7 @@ export const RulesList = ({
     setShowErrors((prevValue) => {
       if (!prevValue) {
         const rulesToExpand = rulesState.data.reduce((acc, ruleItem) => {
-          if (ruleItem.lastRun?.outcome === 'failed') {
+          if (ruleItem.lastRun?.outcome === RuleLastRunOutcomeValues[2]) {
             return {
               ...acc,
               [ruleItem.id]: (

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiFlexItem, EuiHealth } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHealth } from '@elastic/eui';
 import { getIsExperimentalFeatureEnabled } from '../../../../common/get_experimental_features';
 
 import {
@@ -33,7 +33,7 @@ export const RulesListStatuses = (props: RulesListStatusesProps) => {
 
   if (isRuleLastRunOutcomeEnabled) {
     return (
-      <>
+      <EuiFlexGroup alignItems="center" gutterSize="none">
         <EuiFlexItem grow={false}>
           <EuiHealth color="success" data-test-subj="totalSucceededRulesCount">
             {RULE_LAST_RUN_OUTCOME_SUCCEEDED_DESCRIPTION(rulesLastRunOutcomes.succeeded)}
@@ -49,12 +49,12 @@ export const RulesListStatuses = (props: RulesListStatusesProps) => {
             {RULE_LAST_RUN_OUTCOME_WARNING_DESCRIPTION(rulesLastRunOutcomes.warning)}
           </EuiHealth>
         </EuiFlexItem>
-      </>
+      </EuiFlexGroup>
     );
   }
 
   return (
-    <>
+    <EuiFlexGroup alignItems="center" gutterSize="none">
       <EuiFlexItem grow={false}>
         <EuiHealth color="success" data-test-subj="totalActiveRulesCount">
           {RULE_STATUS_ACTIVE(rulesStatuses.active)}
@@ -85,6 +85,6 @@ export const RulesListStatuses = (props: RulesListStatusesProps) => {
           {RULE_STATUS_UNKNOWN(rulesStatuses.unknown)}
         </EuiHealth>
       </EuiFlexItem>
-    </>
+    </EuiFlexGroup>
   );
 };

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx

@@ -62,6 +62,7 @@ import { RuleTagBadge } from './rule_tag_badge';
 import { RuleStatusDropdown } from './rule_status_dropdown';
 import { RulesListNotifyBadge } from './rules_list_notify_badge';
 import { RulesListTableStatusCell } from './rules_list_table_status_cell';
+import { getIsExperimentalFeatureEnabled } from '../../../../common/get_experimental_features';
 import {
   RulesListColumns,
   RulesListVisibleColumns,
@@ -214,6 +215,8 @@ export const RulesListTable = (props: RulesListTableProps) => {
   const [currentlyOpenNotify, setCurrentlyOpenNotify] = useState<string>();
   const [isLoadingMap, setIsLoadingMap] = useState<Record<string, boolean>>({});
 
+  const isRuleLastRunOutcomeEnabled = getIsExperimentalFeatureEnabled('ruleLastRunOutcome');
+
   const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
   const { euiTheme } = useEuiTheme();
 
@@ -325,6 +328,13 @@ export const RulesListTable = (props: RulesListTableProps) => {
     };
   }, [isPageSelected, onSelectPage, onSelectRow, isRowSelected]);
 
+  const ruleOutcomeColumnField = useMemo(() => {
+    if (isRuleLastRunOutcomeEnabled) {
+      return 'lastRun.outcome';
+    }
+    return 'executionStatus.status';
+  }, [isRuleLastRunOutcomeEnabled]);
+
   const getRulesTableColumns = useCallback((): RulesListColumns[] => {
     return [
       {
@@ -662,7 +672,7 @@ export const RulesListTable = (props: RulesListTableProps) => {
       },
       {
         id: 'ruleExecutionStatus',
-        field: 'lastRun.outcome',
+        field: ruleOutcomeColumnField,
         name: i18n.translate(
           'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.lastResponseTitle',
           { defaultMessage: 'Last response' }
@@ -781,6 +791,7 @@ export const RulesListTable = (props: RulesListTableProps) => {
     ruleTypesState.data,
     selectedPercentile,
     tagPopoverOpenIndex,
+    ruleOutcomeColumnField,
   ]);
 
   const allRuleColumns = useMemo(() => getRulesTableColumns(), [getRulesTableColumns]);