[RAM][SECURITYSOLUTION][ALERTS] - Update action form UI to fit securi…

…ty solution needs (elastic#154531) (elastic#154526) ## Summary These changes customise action form UI for security solution needs. ![image](https://user-images.githubusercontent.com/2700761/230332242-20cbd4a1-8f76-4e1d-835e-cd0525cc530c.png) To see how new design works in security solution, you can use this [draft PR](elastic#153113) which consists of all the changes. I split that big PR into smaller independent pieces for easier review process. Fixes elastic#154531 --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
saarikabhasi · Apr 19, 2023 · aeaa370 · aeaa370
1 parent c38f6e9
commit aeaa370
Show file tree

Hide file tree

Showing 9 changed files with 386 additions and 100 deletions.
diff --git a/x-pack/plugins/alerting/common/rule.ts b/x-pack/plugins/alerting/common/rule.ts
@@ -77,6 +77,12 @@ export interface RuleExecutionStatus {
 export type RuleActionParams = SavedObjectAttributes;
 export type RuleActionParam = SavedObjectAttribute;
 
+export interface RuleActionFrequency extends SavedObjectAttributes {
+  summary: boolean;
+  notifyWhen: RuleNotifyWhenType;
+  throttle: string | null;
+}
+
 export type IsoWeekday = 1 | 2 | 3 | 4 | 5 | 6 | 7;
 export interface AlertsFilterTimeframe extends SavedObjectAttributes {
   days: IsoWeekday[];
@@ -103,11 +109,7 @@ export interface RuleAction {
   id: string;
   actionTypeId: string;
   params: RuleActionParams;
-  frequency?: {
-    summary: boolean;
-    notifyWhen: RuleNotifyWhenType;
-    throttle: string | null;
-  };
+  frequency?: RuleActionFrequency;
   alertsFilter?: AlertsFilter;
 }
 

diff --git a/...plugins/security_solution/public/detections/components/rules/rule_actions_field/index.tsx b/...plugins/security_solution/public/detections/components/rules/rule_actions_field/index.tsx
@@ -6,23 +6,79 @@
  */
 
 import { isEmpty } from 'lodash/fp';
-import { EuiSpacer, EuiCallOut } from '@elastic/eui';
+import { EuiSpacer, EuiCallOut, EuiText } from '@elastic/eui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import deepMerge from 'deepmerge';
 import ReactMarkdown from 'react-markdown';
 import styled from 'styled-components';
 
-import type { ActionVariables } from '@kbn/triggers-actions-ui-plugin/public';
+import type {
+  ActionVariables,
+  NotifyWhenSelectOptions,
+} from '@kbn/triggers-actions-ui-plugin/public';
+import { RuleNotifyWhen } from '@kbn/alerting-plugin/common';
 import type {
   RuleAction,
   RuleActionAlertsFilterProperty,
   RuleActionParam,
 } from '@kbn/alerting-plugin/common';
 import { SecurityConnectorFeatureId } from '@kbn/actions-plugin/common';
+import { FormattedMessage } from '@kbn/i18n-react';
 import type { FieldHook } from '../../../../shared_imports';
 import { useFormContext } from '../../../../shared_imports';
 import { useKibana } from '../../../../common/lib/kibana';
-import { FORM_ERRORS_TITLE } from './translations';
+import {
+  FORM_CUSTOM_FREQUENCY_OPTION,
+  FORM_ERRORS_TITLE,
+  FORM_ON_ACTIVE_ALERT_OPTION,
+} from './translations';
+
+const DEFAULT_FREQUENCY = {
+  notifyWhen: RuleNotifyWhen.ACTIVE,
+  throttle: null,
+  summary: true,
+};
+
+const NOTIFY_WHEN_OPTIONS: NotifyWhenSelectOptions[] = [
+  {
+    isSummaryOption: true,
+    isForEachAlertOption: true,
+    value: {
+      value: 'onActiveAlert',
+      inputDisplay: FORM_ON_ACTIVE_ALERT_OPTION,
+      'data-test-subj': 'onActiveAlert',
+      dropdownDisplay: (
+        <EuiText size="s">
+          <p>
+            <FormattedMessage
+              defaultMessage="Per rule run"
+              id="xpack.securitySolution.detectionEngine.ruleNotifyWhen.onActiveAlert.label"
+            />
+          </p>
+        </EuiText>
+      ),
+    },
+  },
+  {
+    isSummaryOption: true,
+    isForEachAlertOption: false,
+    value: {
+      value: 'onThrottleInterval',
+      inputDisplay: FORM_CUSTOM_FREQUENCY_OPTION,
+      'data-test-subj': 'onThrottleInterval',
+      dropdownDisplay: (
+        <EuiText size="s">
+          <p>
+            <FormattedMessage
+              defaultMessage="Custom frequency"
+              id="xpack.securitySolution.detectionEngine.ruleNotifyWhen.onThrottleInterval.label"
+            />
+          </p>
+        </EuiText>
+      ),
+    },
+  },
+];
 
 interface Props {
   field: FieldHook;
@@ -165,8 +221,12 @@ export const RuleActionsField: React.FC<Props> = ({ field, messageVariables }) =
         setActionAlertsFilterProperty,
         featureId: SecurityConnectorFeatureId,
         defaultActionMessage: DEFAULT_ACTION_MESSAGE,
+        defaultSummaryMessage: DEFAULT_ACTION_MESSAGE,
         hideActionHeader: true,
         hideNotifyWhen: true,
+        hasSummary: true,
+        notifyWhenSelectOptions: NOTIFY_WHEN_OPTIONS,
+        defaultRuleFrequency: DEFAULT_FREQUENCY,
         showActionAlertsFilter: true,
       }),
     [

diff --git a/.../security_solution/public/detections/components/rules/rule_actions_field/translations.tsx b/.../security_solution/public/detections/components/rules/rule_actions_field/translations.tsx
@@ -13,3 +13,17 @@ export const FORM_ERRORS_TITLE = i18n.translate(
     defaultMessage: 'Please fix issues listed below',
   }
 );
+
+export const FORM_ON_ACTIVE_ALERT_OPTION = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleNotifyWhen.onActiveAlert.display',
+  {
+    defaultMessage: 'Per rule run',
+  }
+);
+
+export const FORM_CUSTOM_FREQUENCY_OPTION = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleNotifyWhen.onThrottleInterval.display',
+  {
+    defaultMessage: 'Custom frequency',
+  }
+);
diff --git a/...ins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx b/...ins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx
@@ -22,6 +22,7 @@ import {
 import {
   ActionGroup,
   RuleActionAlertsFilterProperty,
+  RuleActionFrequency,
   RuleActionParam,
 } from '@kbn/alerting-plugin/common';
 import { betaBadgeProps } from './beta_badge_props';
@@ -33,6 +34,7 @@ import {
   ActionConnector,
   ActionVariables,
   ActionTypeRegistryContract,
+  NotifyWhenSelectOptions,
 } from '../../../types';
 import { SectionLoading } from '../../components/section_loading';
 import { ActionTypeForm } from './action_type_form';
@@ -77,6 +79,8 @@ export interface ActionAccordionFormProps {
   defaultSummaryMessage?: string;
   hasSummary?: boolean;
   minimumThrottleInterval?: [number | undefined, string];
+  notifyWhenSelectOptions?: NotifyWhenSelectOptions[];
+  defaultRuleFrequency?: RuleActionFrequency;
   showActionAlertsFilter?: boolean;
 }
 
@@ -108,6 +112,8 @@ export const ActionForm = ({
   defaultSummaryMessage,
   hasSummary,
   minimumThrottleInterval,
+  notifyWhenSelectOptions,
+  defaultRuleFrequency = DEFAULT_FREQUENCY,
   showActionAlertsFilter,
 }: ActionAccordionFormProps) => {
   const {
@@ -232,7 +238,7 @@ export const ActionForm = ({
         actionTypeId: actionTypeModel.id,
         group: defaultActionGroupId,
         params: {},
-        frequency: DEFAULT_FREQUENCY,
+        frequency: defaultRuleFrequency,
       });
       setActionIdByIndex(actionTypeConnectors[0].id, actions.length - 1);
     }
@@ -244,7 +250,7 @@ export const ActionForm = ({
         actionTypeId: actionTypeModel.id,
         group: defaultActionGroupId,
         params: {},
-        frequency: DEFAULT_FREQUENCY,
+        frequency: defaultRuleFrequency,
       });
       setActionIdByIndex(actions.length.toString(), actions.length - 1);
       setEmptyActionsIds([...emptyActionsIds, actions.length.toString()]);
@@ -415,6 +421,8 @@ export const ActionForm = ({
               defaultSummaryMessage={defaultSummaryMessage}
               hasSummary={hasSummary}
               minimumThrottleInterval={minimumThrottleInterval}
+              notifyWhenSelectOptions={notifyWhenSelectOptions}
+              defaultNotifyWhenValue={defaultRuleFrequency.notifyWhen}
               showActionAlertsFilter={showActionAlertsFilter}
             />
           );