Added UI support for the default action group for Alert Type Model

elastic · Feb 13, 2020 · e0f1246 · e0f1246
1 parent 9c1f5ae
commit e0f1246
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 20 deletions.
diff --git a/.../triggers_actions_ui/public/application/components/builtin_alert_types/threshold/index.ts b/.../triggers_actions_ui/public/application/components/builtin_alert_types/threshold/index.ts
@@ -101,5 +101,6 @@ export function getAlertType(): AlertTypeModel {
       return validationResult;
     },
     defaultActionMessage: 'Alert [{{ctx.metadata.name}}] has exceeded the threshold',
+    defaultActionGroup: 'alert',
   };
 }
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_form.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_form.test.tsx
@@ -28,6 +28,7 @@ describe('alert_form', () => {
       return { errors: {} };
     },
     alertParamsExpression: () => <Fragment />,
+    defaultActionGroup: 'testDefaultActionGroup',
   };
 
   const actionType = {
@@ -158,6 +159,7 @@ describe('alert_form', () => {
       alertTypeRegistry.has.mockReturnValue(true);
       actionTypeRegistry.list.mockReturnValue([actionType]);
       actionTypeRegistry.has.mockReturnValue(true);
+      actionTypeRegistry.get.mockReturnValue(actionType);
 
       const initialAlert = ({
         name: 'test',
@@ -221,6 +223,12 @@ describe('alert_form', () => {
         '[data-test-subj="my-action-type-ActionTypeSelectOption"]'
       );
       expect(actionTypeSelectOptions.exists()).toBeTruthy();
+
+      actionTypeSelectOptions.first().simulate('click');
+      const actionTypeForm = wrapper.find(
+        '[data-test-subj="alertActionAccordion-testDefaultActionGroup"]'
+      );
+      expect(actionTypeForm.exists()).toBeTruthy();
     });
   });
 

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_form.tsx
@@ -40,7 +40,6 @@ import {
   ActionTypeIndex,
   ActionConnector,
   AlertTypeIndex,
-  ActionGroup,
 } from '../../../types';
 import { SectionLoading } from '../../components/section_loading';
 import { ConnectorAddModal } from '../action_connector_form/connector_add_modal';
@@ -119,7 +118,9 @@ export const AlertForm = ({
   const [alertThrottleUnit, setAlertThrottleUnit] = useState<string>('m');
   const [isAddActionPanelOpen, setIsAddActionPanelOpen] = useState<boolean>(true);
   const [connectors, setConnectors] = useState<ActionConnector[]>([]);
-  const [defaultActionGroup, setDefaultActionGroup] = useState<ActionGroup | undefined>(undefined);
+  const [defaultActionGroup, setDefaultActionGroup] = useState<string>(
+    alertTypeModel?.defaultActionGroup ?? 'default'
+  );
   const [activeActionItem, setActiveActionItem] = useState<ActiveActionConnectorState | undefined>(
     undefined
   );
@@ -159,19 +160,15 @@ export const AlertForm = ({
         // temp hack of API result
         alertTypes.push({
           id: 'threshold',
-          actionGroups: [
-            { id: 'alert', name: 'Alert' },
-            { id: 'warning', name: 'Warning' },
-            { id: 'ifUnacknowledged', name: 'If unacknowledged' },
-          ],
+          actionGroups: ['alert', 'warning', 'ifUnacknowledged'],
           name: 'threshold',
           actionVariables: ['ctx.metadata.name', 'ctx.metadata.test'],
         });
         const index: AlertTypeIndex = {};
         for (const alertTypeItem of alertTypes) {
           index[alertTypeItem.id] = alertTypeItem;
         }
-        if (alert.alertTypeId) {
+        if (!alertTypeModel?.defaultActionGroup && alert.alertTypeId && index[alert.alertTypeId]) {
           setDefaultActionGroup(index[alert.alertTypeId].actionGroups[0]);
         }
         setAlertTypesIndex(index);
@@ -266,7 +263,7 @@ export const AlertForm = ({
         alert.actions.push({
           id: '',
           actionTypeId: actionTypeModel.id,
-          group: defaultActionGroup?.id ?? 'Alert',
+          group: defaultActionGroup,
           params: {},
         });
         setActionProperty('id', freeConnectors[0].id, alert.actions.length - 1);
@@ -278,7 +275,7 @@ export const AlertForm = ({
       alert.actions.push({
         id: '',
         actionTypeId: actionTypeModel.id,
-        group: defaultActionGroup?.id ?? 'Alert',
+        group: defaultActionGroup,
         params: {},
       });
       setActionProperty('id', alert.actions.length, alert.actions.length - 1);
@@ -295,6 +292,7 @@ export const AlertForm = ({
           setAlertProperty('alertTypeId', item.id);
           setAlertTypeModel(item);
           if (
+            !alertTypeModel?.defaultActionGroup &&
             alertTypesIndex &&
             alertTypesIndex[item.id] &&
             alertTypesIndex[item.id].actionGroups.length > 0
@@ -356,7 +354,7 @@ export const AlertForm = ({
         id,
       }));
     const actionTypeRegisterd = actionTypeRegistry.get(actionConnector.actionTypeId);
-    if (actionTypeRegisterd === null || actionItem.group !== defaultActionGroup?.id) return null;
+    if (!actionTypeRegisterd || actionItem.group !== defaultActionGroup) return null;
     const ParamsFieldsComponent = actionTypeRegisterd.actionParamsFields;
     const actionParamsErrors: { errors: IErrorObject } =
       Object.keys(actionsErrors).length > 0 ? actionsErrors[actionItem.id] : { errors: {} };
@@ -368,7 +366,7 @@ export const AlertForm = ({
         id={index.toString()}
         className="euiAccordionForm"
         buttonContentClassName="euiAccordionForm__button"
-        data-test-subj="alertActionAccordion"
+        data-test-subj={`alertActionAccordion-${defaultActionGroup}`}
         buttonContent={
           <EuiFlexGroup gutterSize="s" alignItems="center">
             <EuiFlexItem grow={false}>
@@ -465,7 +463,9 @@ export const AlertForm = ({
             errors={actionParamsErrors.errors}
             editAction={setActionParamsProperty}
             messageVariables={
-              alertTypesIndex ? alertTypesIndex[alert.alertTypeId].actionVariables : undefined
+              alertTypesIndex && alertTypesIndex[alert.alertTypeId]
+                ? alertTypesIndex[alert.alertTypeId].actionVariables
+                : undefined
             }
             defaultMessage={alertTypeModel?.defaultActionMessage ?? undefined}
           />
@@ -479,15 +479,15 @@ export const AlertForm = ({
       ? actionTypesIndex[actionItem.actionTypeId].name
       : actionItem.actionTypeId;
     const actionTypeRegisterd = actionTypeRegistry.get(actionItem.actionTypeId);
-    if (actionTypeRegisterd === null || actionItem.group !== defaultActionGroup?.id) return null;
+    if (!actionTypeRegisterd || actionItem.group !== defaultActionGroup) return null;
     return (
       <EuiAccordion
         initialIsOpen={true}
         key={index}
         id={index.toString()}
         className="euiAccordionForm"
         buttonContentClassName="euiAccordionForm__button"
-        data-test-subj="alertActionAccordion"
+        data-test-subj={`alertActionAccordion-${defaultActionGroup}`}
         buttonContent={
           <EuiFlexGroup gutterSize="s" alignItems="center">
             <EuiFlexItem grow={false}>

diff --git a/x-pack/plugins/triggers_actions_ui/public/types.ts b/x-pack/plugins/triggers_actions_ui/public/types.ts
@@ -70,14 +70,10 @@ export interface ActionConnectorTableItem extends ActionConnector {
   actionType: ActionType['name'];
 }
 
-export interface ActionGroup {
-  id: string;
-  name: string;
-}
 export interface AlertType {
   id: string;
   name: string;
-  actionGroups: ActionGroup[];
+  actionGroups: string[];
   actionVariables: string[];
 }
 
@@ -95,6 +91,7 @@ export interface AlertTypeModel {
   validate: (alertParams: any) => ValidationResult;
   alertParamsExpression: React.FunctionComponent<any>;
   defaultActionMessage?: string;
+  defaultActionGroup?: string;
 }
 
 export interface IErrorObject {