[RAM] Add ability to toggle new rule status UI via experimental featu…

…res flag (elastic#145630) ## Summary Resolves: elastic#145300 Allows the new last run outcome UI in the rules list and rule details view to be turned off via an experimental flag. To test: - Add the following: `xpack.trigger_actions_ui.enableExperimental: ["ruleUseExecutionStatus"]` to your `kibana.dev.yml` - Rule management UI should revert back to using execution status ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios Co-authored-by: Kibana Machine <[email protected]>
spalger · Nov 18, 2022 · 9a0622b · 9a0622b
1 parent 957d5a5
commit 9a0622b
Show file tree

Hide file tree

Showing 19 changed files with 91 additions and 91 deletions.
diff --git a/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx b/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx
@@ -88,7 +88,7 @@ export const StorybookContextDecorator: React.FC<StorybookContextDecoratorProps>
       ruleTagFilter: true,
       ruleStatusFilter: true,
       rulesDetailLogs: true,
-      ruleLastRunOutcome: true,
+      ruleUseExecutionStatus: false,
     },
   });
   return (

diff --git a/x-pack/plugins/triggers_actions_ui/common/experimental_features.ts b/x-pack/plugins/triggers_actions_ui/common/experimental_features.ts
@@ -17,7 +17,7 @@ export const allowedExperimentalValues = Object.freeze({
   ruleTagFilter: true,
   ruleStatusFilter: true,
   rulesDetailLogs: true,
-  ruleLastRunOutcome: true,
+  ruleUseExecutionStatus: false,
 });
 
 type ExperimentalConfigKeys = Array<keyof ExperimentalFeatures>;

diff --git a/...ins/triggers_actions_ui/public/application/sections/rule_details/components/rule.test.tsx b/...ins/triggers_actions_ui/public/application/sections/rule_details/components/rule.test.tsx
@@ -320,6 +320,8 @@ describe('alertToListItem', () => {
 
 describe('execution duration overview', () => {
   it('render last execution status', async () => {
+    (getIsExperimentalFeatureEnabled as jest.Mock<any, any>).mockImplementation(() => true);
+
     const rule = mockRule({
       executionStatus: { status: 'ok', lastExecutionDate: new Date('2020-08-20T19:23:38Z') },
     });

diff --git a/...tions_ui/public/application/sections/rule_details/components/rule_event_log_data_grid.tsx b/...tions_ui/public/application/sections/rule_details/components/rule_event_log_data_grid.tsx
@@ -175,7 +175,7 @@ export const RuleEventLogDataGrid = (props: RuleEventLogDataGrid) => {
 
   const { euiTheme } = useEuiTheme();
 
-  const isRuleLastRunOutcomeEnabled = getIsExperimentalFeatureEnabled('ruleLastRunOutcome');
+  const isRuleUsingExecutionStatus = getIsExperimentalFeatureEnabled('ruleUseExecutionStatus');
 
   const getPaginatedRowIndex = useCallback(
     (rowIndex: number) => {
@@ -624,7 +624,7 @@ export const RuleEventLogDataGrid = (props: RuleEventLogDataGrid) => {
             dateFormat={dateFormat}
             ruleId={ruleId}
             spaceIds={spaceIds}
-            lastRunOutcomeEnabled={isRuleLastRunOutcomeEnabled}
+            useExecutionStatus={isRuleUsingExecutionStatus}
           />
         </EuiFlexItem>
       </EuiFlexGroup>

diff --git a/...public/application/sections/rule_details/components/rule_event_log_list_cell_renderer.tsx b/...public/application/sections/rule_details/components/rule_event_log_list_cell_renderer.tsx
@@ -32,7 +32,7 @@ interface RuleEventLogListCellRendererProps {
   dateFormat?: string;
   ruleId?: string;
   spaceIds?: string[];
-  lastRunOutcomeEnabled?: boolean;
+  useExecutionStatus?: boolean;
 }
 
 export const RuleEventLogListCellRenderer = (props: RuleEventLogListCellRendererProps) => {
@@ -43,7 +43,7 @@ export const RuleEventLogListCellRenderer = (props: RuleEventLogListCellRenderer
     dateFormat = DEFAULT_DATE_FORMAT,
     ruleId,
     spaceIds,
-    lastRunOutcomeEnabled = false,
+    useExecutionStatus = true,
   } = props;
   const spacesData = useSpacesData();
   const { http } = useKibana().services;
@@ -99,7 +99,7 @@ export const RuleEventLogListCellRenderer = (props: RuleEventLogListCellRenderer
     return (
       <RuleEventLogListStatus
         status={value as RuleAlertingOutcome}
-        lastRunOutcomeEnabled={lastRunOutcomeEnabled}
+        useExecutionStatus={useExecutionStatus}
       />
     );
   }

diff --git a/...ctions_ui/public/application/sections/rule_details/components/rule_event_log_list_kpi.tsx b/...ctions_ui/public/application/sections/rule_details/components/rule_event_log_list_kpi.tsx
@@ -105,7 +105,7 @@ export const RuleEventLogListKPI = (props: RuleEventLogListKPIProps) => {
   } = useKibana().services;
 
   const isInitialized = useRef(false);
-  const isRuleLastRunOutcomeEnabled = getIsExperimentalFeatureEnabled('ruleLastRunOutcome');
+  const isRuleUsingExecutionStatus = getIsExperimentalFeatureEnabled('ruleUseExecutionStatus');
 
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [kpi, setKpi] = useState<IExecutionKPIResult>();
@@ -173,7 +173,7 @@ export const RuleEventLogListKPI = (props: RuleEventLogListKPIProps) => {
                 description={getStatDescription(
                   <RuleEventLogListStatus
                     status="success"
-                    lastRunOutcomeEnabled={isRuleLastRunOutcomeEnabled}
+                    useExecutionStatus={isRuleUsingExecutionStatus}
                   />
                 )}
                 titleSize="s"
@@ -187,7 +187,7 @@ export const RuleEventLogListKPI = (props: RuleEventLogListKPIProps) => {
                 description={getStatDescription(
                   <RuleEventLogListStatus
                     status="warning"
-                    lastRunOutcomeEnabled={isRuleLastRunOutcomeEnabled}
+                    useExecutionStatus={isRuleUsingExecutionStatus}
                   />
                 )}
                 titleSize="s"
@@ -201,7 +201,7 @@ export const RuleEventLogListKPI = (props: RuleEventLogListKPIProps) => {
                 description={getStatDescription(
                   <RuleEventLogListStatus
                     status="failure"
-                    lastRunOutcomeEnabled={isRuleLastRunOutcomeEnabled}
+                    useExecutionStatus={isRuleUsingExecutionStatus}
                   />
                 )}
                 titleSize="s"

diff --git a/...ons_ui/public/application/sections/rule_details/components/rule_event_log_list_status.tsx b/...ons_ui/public/application/sections/rule_details/components/rule_event_log_list_status.tsx
@@ -17,7 +17,7 @@ import {
 
 interface RuleEventLogListStatusProps {
   status: RuleAlertingOutcome;
-  lastRunOutcomeEnabled?: boolean;
+  useExecutionStatus?: boolean;
 }
 
 const statusContainerStyles = {
@@ -45,15 +45,15 @@ const STATUS_TO_OUTCOME: Record<RuleAlertingOutcome, string> = {
 };
 
 export const RuleEventLogListStatus = (props: RuleEventLogListStatusProps) => {
-  const { status, lastRunOutcomeEnabled = false } = props;
+  const { status, useExecutionStatus = true } = props;
   const color = STATUS_TO_COLOR[status] || 'gray';
 
   const statusString = useMemo(() => {
-    if (lastRunOutcomeEnabled) {
-      return STATUS_TO_OUTCOME[status].toLocaleLowerCase();
+    if (useExecutionStatus) {
+      return status;
     }
-    return status;
-  }, [lastRunOutcomeEnabled, status]);
+    return STATUS_TO_OUTCOME[status].toLocaleLowerCase();
+  }, [useExecutionStatus, status]);
 
   return (
     <div style={statusContainerStyles}>

diff --git a/...public/application/sections/rule_details/components/rule_event_log_list_status_filter.tsx b/...public/application/sections/rule_details/components/rule_event_log_list_status_filter.tsx
@@ -22,7 +22,7 @@ interface RuleEventLogListStatusFilterProps {
 export const RuleEventLogListStatusFilter = (props: RuleEventLogListStatusFilterProps) => {
   const { selectedOptions = [], onChange = () => {} } = props;
 
-  const isRuleLastRunOutcomeEnabled = getIsExperimentalFeatureEnabled('ruleLastRunOutcome');
+  const isRuleUsingExecutionStatus = getIsExperimentalFeatureEnabled('ruleUseExecutionStatus');
 
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
@@ -73,7 +73,7 @@ export const RuleEventLogListStatusFilter = (props: RuleEventLogListStatusFilter
               >
                 <RuleEventLogListStatus
                   status={status}
-                  lastRunOutcomeEnabled={isRuleLastRunOutcomeEnabled}
+                  useExecutionStatus={isRuleUsingExecutionStatus}
                 />
               </EuiFilterSelectItem>
             );

diff --git a/...triggers_actions_ui/public/application/sections/rules_list/components/rules_list.test.tsx b/...triggers_actions_ui/public/application/sections/rules_list/components/rules_list.test.tsx
@@ -359,7 +359,7 @@ describe('rules_list component with props', () => {
 
   describe('Last response filter', () => {
     beforeEach(() => {
-      (getIsExperimentalFeatureEnabled as jest.Mock<any, any>).mockImplementation(() => true);
+      // (getIsExperimentalFeatureEnabled as jest.Mock<any, any>).mockImplementation(() => true);
     });
 
     afterEach(() => {
@@ -1029,7 +1029,7 @@ describe('rules_list component with items', () => {
       expect(wrapper.find('[data-test-subj="rulesListAutoRefresh"]').exists()).toBeTruthy();
 
       expect(wrapper.find('EuiHealth[data-test-subj="ruleStatus-failed"]').first().text()).toEqual(
-        'Error'
+        'Failed'
       );
       expect(wrapper.find('EuiHealth[data-test-subj="ruleStatus-failed"]').last().text()).toEqual(
         'License Error'
@@ -1280,7 +1280,7 @@ describe('rules_list component with items', () => {
   });
 
   it('renders brief', async () => {
-    (getIsExperimentalFeatureEnabled as jest.Mock<any, any>).mockImplementation(() => true);
+    (getIsExperimentalFeatureEnabled as jest.Mock<any, any>).mockImplementation(() => false);
     await setup();
 
     // ruleLastRunOutcome: {

diff --git a/...gins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list.tsx b/...gins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list.tsx
@@ -198,7 +198,7 @@ export const RulesList = ({
 
   const isRuleTagFilterEnabled = getIsExperimentalFeatureEnabled('ruleTagFilter');
   const isRuleStatusFilterEnabled = getIsExperimentalFeatureEnabled('ruleStatusFilter');
-  const isRuleLastRunOutcomeEnabled = getIsExperimentalFeatureEnabled('ruleLastRunOutcome');
+  const isRuleUsingExecutionStatus = getIsExperimentalFeatureEnabled('ruleUseExecutionStatus');
 
   const cloneRuleId = useRef<null | string>(null);
 
@@ -586,20 +586,20 @@ export const RulesList = ({
   };
 
   const getRuleOutcomeOrStatusFilter = () => {
-    if (isRuleLastRunOutcomeEnabled) {
+    if (isRuleUsingExecutionStatus) {
       return [
-        <RuleLastRunOutcomeFilter
-          key="rule-last-run-outcome-filter"
-          selectedOutcomes={ruleLastRunOutcomesFilter}
-          onChange={setRuleLastRunOutcomesFilter}
+        <RuleExecutionStatusFilter
+          key="rule-status-filter"
+          selectedStatuses={ruleExecutionStatusesFilter}
+          onChange={setRuleExecutionStatusesFilter}
         />,
       ];
     }
     return [
-      <RuleExecutionStatusFilter
-        key="rule-status-filter"
-        selectedStatuses={ruleExecutionStatusesFilter}
-        onChange={setRuleExecutionStatusesFilter}
+      <RuleLastRunOutcomeFilter
+        key="rule-last-run-outcome-filter"
+        selectedOutcomes={ruleLastRunOutcomesFilter}
+        onChange={setRuleLastRunOutcomesFilter}
       />,
     ];
   };

diff --git a/...tions_ui/public/application/sections/rules_list/components/rules_list_column_selector.tsx b/...tions_ui/public/application/sections/rules_list/components/rules_list_column_selector.tsx
@@ -36,8 +36,7 @@ export type RulesListVisibleColumns =
   | 'ruleExecutionPercentile'
   | 'ruleExecutionSuccessRatio'
   | 'ruleExecutionStatus'
-  | 'ruleExecutionState'
-  | 'ruleLastRunOutcome';
+  | 'ruleExecutionState';
 
 const OriginalRulesListVisibleColumns: RulesListVisibleColumns[] = [
   'ruleName',

diff --git a/..._actions_ui/public/application/sections/rules_list/components/rules_list_error_banner.tsx b/..._actions_ui/public/application/sections/rules_list/components/rules_list_error_banner.tsx
@@ -21,11 +21,11 @@ export const RulesListErrorBanner = (props: RulesListErrorBannerProps) => {
     props;
 
   const onClick = () => {
-    const isRuleLastRunOutcomeEnabled = getIsExperimentalFeatureEnabled('ruleLastRunOutcome');
-    if (isRuleLastRunOutcomeEnabled) {
-      setRuleLastRunOutcomesFilter(['failed']);
-    } else {
+    const isRuleUsingExecutionStatus = getIsExperimentalFeatureEnabled('ruleUseExecutionStatus');
+    if (isRuleUsingExecutionStatus) {
       setRuleExecutionStatusesFilter(['error']);
+    } else {
+      setRuleLastRunOutcomesFilter(['failed']);
     }
   };
 

diff --git a/...gers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx b/...gers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx
@@ -29,24 +29,39 @@ interface RulesListStatusesProps {
 export const RulesListStatuses = (props: RulesListStatusesProps) => {
   const { rulesStatuses, rulesLastRunOutcomes } = props;
 
-  const isRuleLastRunOutcomeEnabled = getIsExperimentalFeatureEnabled('ruleLastRunOutcome');
+  const isRuleUsingExecutionStatus = getIsExperimentalFeatureEnabled('ruleUseExecutionStatus');
 
-  if (isRuleLastRunOutcomeEnabled) {
+  if (isRuleUsingExecutionStatus) {
     return (
       <EuiFlexGroup alignItems="center" gutterSize="none">
         <EuiFlexItem grow={false}>
-          <EuiHealth color="success" data-test-subj="totalSucceededRulesCount">
-            {RULE_LAST_RUN_OUTCOME_SUCCEEDED_DESCRIPTION(rulesLastRunOutcomes.succeeded)}
+          <EuiHealth color="success" data-test-subj="totalActiveRulesCount">
+            {RULE_STATUS_ACTIVE(rulesStatuses.active)}
           </EuiHealth>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiHealth color="danger" data-test-subj="totalFailedRulesCount">
-            {RULE_LAST_RUN_OUTCOME_FAILED_DESCRIPTION(rulesLastRunOutcomes.failed)}
+          <EuiHealth color="danger" data-test-subj="totalErrorRulesCount">
+            {RULE_STATUS_ERROR(rulesStatuses.error)}
           </EuiHealth>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiHealth color="warning" data-test-subj="totalWarningRulesCount">
-            {RULE_LAST_RUN_OUTCOME_WARNING_DESCRIPTION(rulesLastRunOutcomes.warning)}
+            {RULE_STATUS_WARNING(rulesStatuses.warning)}
+          </EuiHealth>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiHealth color="primary" data-test-subj="totalOkRulesCount">
+            {RULE_STATUS_OK(rulesStatuses.ok)}
+          </EuiHealth>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiHealth color="accent" data-test-subj="totalPendingRulesCount">
+            {RULE_STATUS_PENDING(rulesStatuses.pending)}
+          </EuiHealth>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiHealth color="subdued" data-test-subj="totalUnknownRulesCount">
+            {RULE_STATUS_UNKNOWN(rulesStatuses.unknown)}
           </EuiHealth>
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -56,33 +71,18 @@ export const RulesListStatuses = (props: RulesListStatusesProps) => {
   return (
     <EuiFlexGroup alignItems="center" gutterSize="none">
       <EuiFlexItem grow={false}>
-        <EuiHealth color="success" data-test-subj="totalActiveRulesCount">
-          {RULE_STATUS_ACTIVE(rulesStatuses.active)}
+        <EuiHealth color="success" data-test-subj="totalSucceededRulesCount">
+          {RULE_LAST_RUN_OUTCOME_SUCCEEDED_DESCRIPTION(rulesLastRunOutcomes.succeeded)}
         </EuiHealth>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiHealth color="danger" data-test-subj="totalErrorRulesCount">
-          {RULE_STATUS_ERROR(rulesStatuses.error)}
+        <EuiHealth color="danger" data-test-subj="totalFailedRulesCount">
+          {RULE_LAST_RUN_OUTCOME_FAILED_DESCRIPTION(rulesLastRunOutcomes.failed)}
         </EuiHealth>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiHealth color="warning" data-test-subj="totalWarningRulesCount">
-          {RULE_STATUS_WARNING(rulesStatuses.warning)}
-        </EuiHealth>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiHealth color="primary" data-test-subj="totalOkRulesCount">
-          {RULE_STATUS_OK(rulesStatuses.ok)}
-        </EuiHealth>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiHealth color="accent" data-test-subj="totalPendingRulesCount">
-          {RULE_STATUS_PENDING(rulesStatuses.pending)}
-        </EuiHealth>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiHealth color="subdued" data-test-subj="totalUnknownRulesCount">
-          {RULE_STATUS_UNKNOWN(rulesStatuses.unknown)}
+          {RULE_LAST_RUN_OUTCOME_WARNING_DESCRIPTION(rulesLastRunOutcomes.warning)}
         </EuiHealth>
       </EuiFlexItem>
     </EuiFlexGroup>

diff --git a/...riggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx b/...riggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
@@ -215,7 +215,7 @@ export const RulesListTable = (props: RulesListTableProps) => {
   const [currentlyOpenNotify, setCurrentlyOpenNotify] = useState<string>();
   const [isLoadingMap, setIsLoadingMap] = useState<Record<string, boolean>>({});
 
-  const isRuleLastRunOutcomeEnabled = getIsExperimentalFeatureEnabled('ruleLastRunOutcome');
+  const isRuleUsingExecutionStatus = getIsExperimentalFeatureEnabled('ruleUseExecutionStatus');
 
   const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
   const { euiTheme } = useEuiTheme();
@@ -329,11 +329,11 @@ export const RulesListTable = (props: RulesListTableProps) => {
   }, [isPageSelected, onSelectPage, onSelectRow, isRowSelected]);
 
   const ruleOutcomeColumnField = useMemo(() => {
-    if (isRuleLastRunOutcomeEnabled) {
-      return 'lastRun.outcome';
+    if (isRuleUsingExecutionStatus) {
+      return 'executionStatus.status';
     }
-    return 'executionStatus.status';
-  }, [isRuleLastRunOutcomeEnabled]);
+    return 'lastRun.outcome';
+  }, [isRuleUsingExecutionStatus]);
 
   const getRulesTableColumns = useCallback((): RulesListColumns[] => {
     return [

diff --git a/...i/public/application/sections/rules_list/components/rules_list_table_status_cell.test.tsx b/...i/public/application/sections/rules_list/components/rules_list_table_status_cell.test.tsx
@@ -44,7 +44,7 @@ const ComponentWithLocale = (props: RulesListTableStatusCellProps) => {
 
 describe('RulesListTableStatusCell', () => {
   beforeEach(() => {
-    (getIsExperimentalFeatureEnabled as jest.Mock<any, any>).mockImplementation(() => true);
+    (getIsExperimentalFeatureEnabled as jest.Mock<any, any>).mockImplementation(() => false);
   });
 
   afterEach(() => {

diff --git a/x-pack/plugins/triggers_actions_ui/public/common/get_experimental_features.test.tsx b/x-pack/plugins/triggers_actions_ui/public/common/get_experimental_features.test.tsx
@@ -20,7 +20,7 @@ describe('getIsExperimentalFeatureEnabled', () => {
         rulesDetailLogs: true,
         ruleTagFilter: true,
         ruleStatusFilter: true,
-        ruleLastRunOutcome: true,
+        ruleUseExecutionStatus: false,
       },
     });
 
@@ -44,9 +44,9 @@ describe('getIsExperimentalFeatureEnabled', () => {
 
     expect(result).toEqual(true);
 
-    result = getIsExperimentalFeatureEnabled('ruleLastRunOutcome');
+    result = getIsExperimentalFeatureEnabled('ruleUseExecutionStatus');
 
-    expect(result).toEqual(true);
+    expect(result).toEqual(false);
 
     expect(() => getIsExperimentalFeatureEnabled('doesNotExist' as any)).toThrowError(
       `Invalid enable value doesNotExist. Allowed values are: ${allowedExperimentalValueKeys.join(