[Response Ops][Rule Form V2] Rule form v2: Actions Modal and Actions …

…Form (#187434) ## Summary Issue: #179105 Related PR: #180539 Final PR of the rule actions V2 PR (2/2 of the actions PRs). This PR contains the actions modal and actions form. This PR depends on #186490. I have also created a example plugin to demonstrate this PR. To access: 1. Run the branch with yarn start --run-examples 2. Navigate to http://localhost:5601/app/triggersActionsUiExample/rule/create/<ruleTypeId> (I use .es-query) 3. Create a rule 4. Navigate to http://localhost:5601/app/triggersActionsUiExample/rule/edit/<ruleId> with the rule you just created to edit the rule <img width="1236" alt="Screenshot 2024-07-02 at 5 15 51 PM" src="https://github.com/elastic/kibana/assets/74562234/1dc5d2a9-804a-4861-94ba-814de73dc3ab"> ![Screenshot 2024-07-08 at 10 53 44 PM](https://github.com/elastic/kibana/assets/74562234/07efade1-4b9c-485f-9833-84698dc29219) <img width="1087" alt="Screenshot 2024-07-02 at 5 15 58 PM" src="https://github.com/elastic/kibana/assets/74562234/903e66b5-f9a1-4d09-b121-b1dcecdff72c"> ### 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: kibanamachine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
elastic · Sep 27, 2024 · 54659e8 · 54659e8
1 parent 760455a
commit 54659e8
Show file tree

Hide file tree

Showing 79 changed files with 5,938 additions and 494 deletions.
diff --git a/packages/kbn-alerts-ui-shared/src/alerts_search_bar/index.tsx b/packages/kbn-alerts-ui-shared/src/alerts_search_bar/index.tsx
@@ -16,8 +16,9 @@ import { SEARCH_BAR_PLACEHOLDER } from './translations';
 import type { AlertsSearchBarProps, QueryLanguageType } from './types';
 import { useLoadRuleTypesQuery, useAlertsDataView, useRuleAADFields } from '../common/hooks';
 
-const SA_ALERTS = { type: 'alerts', fields: {} } as SuggestionsAbstraction;
+export type { AlertsSearchBarProps } from './types';
 
+const SA_ALERTS = { type: 'alerts', fields: {} } as SuggestionsAbstraction;
 const EMPTY_FEATURE_IDS: ValidFeatureId[] = [];
 
 export const AlertsSearchBar = ({

diff --git a/packages/kbn-alerts-ui-shared/src/common/constants/index.ts b/packages/kbn-alerts-ui-shared/src/common/constants/index.ts
@@ -10,3 +10,5 @@
 export * from './alerts';
 export * from './i18n_weekdays';
 export * from './routes';
+
+export const VIEW_LICENSE_OPTIONS_LINK = 'https://www.elastic.co/subscriptions';
diff --git a/packages/kbn-alerts-ui-shared/src/common/hooks/index.ts b/packages/kbn-alerts-ui-shared/src/common/hooks/index.ts
@@ -9,6 +9,10 @@
 
 export * from './use_alerts_data_view';
 export * from './use_create_rule';
+export * from './use_update_rule';
+export * from './use_resolve_rule';
+export * from './use_load_connectors';
+export * from './use_load_connector_types';
 export * from './use_get_alerts_group_aggregations_query';
 export * from './use_health_check';
 export * from './use_load_alerting_framework_health';

diff --git a/packages/kbn-alerts-ui-shared/src/common/hooks/use_load_connector_types.test.tsx b/packages/kbn-alerts-ui-shared/src/common/hooks/use_load_connector_types.test.tsx
@@ -13,7 +13,7 @@ import { renderHook } from '@testing-library/react-hooks/dom';
 import { waitFor } from '@testing-library/react';
 import { httpServiceMock } from '@kbn/core/public/mocks';
 
-import { useLoadActionTypes } from './use_load_connector_types';
+import { useLoadConnectorTypes } from './use_load_connector_types';
 
 const queryClient = new QueryClient();
 
@@ -46,7 +46,7 @@ describe('useLoadConnectorTypes', () => {
   test('should call API endpoint with the correct parameters', async () => {
     const { result } = renderHook(
       () =>
-        useLoadActionTypes({
+        useLoadConnectorTypes({
           http,
           includeSystemActions: true,
         }),
@@ -74,7 +74,7 @@ describe('useLoadConnectorTypes', () => {
   test('should call the correct endpoint if system actions is true', async () => {
     const { result } = renderHook(
       () =>
-        useLoadActionTypes({
+        useLoadConnectorTypes({
           http,
           includeSystemActions: true,
         }),
@@ -91,7 +91,7 @@ describe('useLoadConnectorTypes', () => {
   test('should call the correct endpoint if system actions is false', async () => {
     const { result } = renderHook(
       () =>
-        useLoadActionTypes({
+        useLoadConnectorTypes({
           http,
           includeSystemActions: false,
         }),

diff --git a/packages/kbn-alerts-ui-shared/src/common/hooks/use_load_connector_types.ts b/packages/kbn-alerts-ui-shared/src/common/hooks/use_load_connector_types.ts
@@ -11,13 +11,14 @@ import { useQuery } from '@tanstack/react-query';
 import type { HttpStart } from '@kbn/core-http-browser';
 import { fetchConnectorTypes } from '../apis';
 
-export interface UseLoadActionTypesProps {
+export interface UseLoadConnectorTypesProps {
   http: HttpStart;
   includeSystemActions?: boolean;
+  enabled?: boolean;
 }
 
-export const useLoadActionTypes = (props: UseLoadActionTypesProps) => {
-  const { http, includeSystemActions } = props;
+export const useLoadConnectorTypes = (props: UseLoadConnectorTypesProps) => {
+  const { http, includeSystemActions, enabled = true } = props;
 
   const queryFn = () => {
     return fetchConnectorTypes({ http, includeSystemActions });
@@ -27,6 +28,7 @@ export const useLoadActionTypes = (props: UseLoadActionTypesProps) => {
     queryKey: ['useLoadConnectorTypes', includeSystemActions],
     queryFn,
     refetchOnWindowFocus: false,
+    enabled,
   });
 
   return {

diff --git a/packages/kbn-alerts-ui-shared/src/common/hooks/use_load_connectors.ts b/packages/kbn-alerts-ui-shared/src/common/hooks/use_load_connectors.ts
@@ -14,10 +14,11 @@ import { fetchConnectors } from '../apis';
 export interface UseLoadConnectorsProps {
   http: HttpStart;
   includeSystemActions?: boolean;
+  enabled?: boolean;
 }
 
 export const useLoadConnectors = (props: UseLoadConnectorsProps) => {
-  const { http, includeSystemActions = false } = props;
+  const { http, includeSystemActions = false, enabled = true } = props;
 
   const queryFn = () => {
     return fetchConnectors({ http, includeSystemActions });
@@ -27,6 +28,7 @@ export const useLoadConnectors = (props: UseLoadConnectorsProps) => {
     queryKey: ['useLoadConnectors', includeSystemActions],
     queryFn,
     refetchOnWindowFocus: false,
+    enabled,
   });
 
   return {

diff --git a/packages/kbn-alerts-ui-shared/src/common/hooks/use_load_rule_type_aad_template_fields.ts b/packages/kbn-alerts-ui-shared/src/common/hooks/use_load_rule_type_aad_template_fields.ts
@@ -15,14 +15,17 @@ import { fetchRuleTypeAadTemplateFields, getDescription } from '../apis';
 
 export interface UseLoadRuleTypeAadTemplateFieldProps {
   http: HttpStart;
-  ruleTypeId: string;
+  ruleTypeId?: string;
   enabled: boolean;
 }
 
 export const useLoadRuleTypeAadTemplateField = (props: UseLoadRuleTypeAadTemplateFieldProps) => {
   const { http, ruleTypeId, enabled } = props;
 
   const queryFn = () => {
+    if (!ruleTypeId) {
+      return;
+    }
     return fetchRuleTypeAadTemplateFields({ http, ruleTypeId });
   };
 
@@ -35,7 +38,7 @@ export const useLoadRuleTypeAadTemplateField = (props: UseLoadRuleTypeAadTemplat
     queryKey: ['useLoadRuleTypeAadTemplateField', ruleTypeId],
     queryFn,
     select: (dataViewFields) => {
-      return dataViewFields.map<ActionVariable>((d) => ({
+      return dataViewFields?.map<ActionVariable>((d) => ({
         name: d.name,
         description: getDescription(d.name, EcsFlat),
       }));

diff --git a/packages/kbn-alerts-ui-shared/src/common/hooks/use_resolve_rule.ts b/packages/kbn-alerts-ui-shared/src/common/hooks/use_resolve_rule.ts
@@ -41,6 +41,7 @@ export const useResolveRule = (props: UseResolveProps) => {
       };
     },
     refetchOnWindowFocus: false,
+    retry: false,
   });
 
   return {

diff --git a/packages/kbn-alerts-ui-shared/src/common/test_utils/actions_test_utils.ts b/packages/kbn-alerts-ui-shared/src/common/test_utils/actions_test_utils.ts
@@ -0,0 +1,85 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { ActionType } from '@kbn/actions-types';
+import { RuleSystemAction } from '@kbn/alerting-types';
+import { ActionConnector, ActionTypeModel, GenericValidationResult, RuleAction } from '../types';
+import { actionTypeRegistryMock } from './action_type_registry.mock';
+
+export const getConnector = (
+  id: string,
+  overwrites?: Partial<ActionConnector>
+): ActionConnector => {
+  return {
+    id: `connector-${id}`,
+    secrets: { secret: 'secret' },
+    actionTypeId: `actionType-${id}`,
+    name: `connector-${id}`,
+    config: { config: `config-${id}` },
+    isPreconfigured: false,
+    isSystemAction: false,
+    isDeprecated: false,
+    ...overwrites,
+  };
+};
+
+export const getAction = (id: string, overwrites?: Partial<RuleAction>): RuleAction => {
+  return {
+    id: `action-${id}`,
+    uuid: `uuid-action-${id}`,
+    group: `group-${id}`,
+    actionTypeId: `actionType-${id}`,
+    params: {},
+    ...overwrites,
+  };
+};
+
+export const getSystemAction = (
+  id: string,
+  overwrites?: Partial<RuleSystemAction>
+): RuleSystemAction => {
+  return {
+    uuid: `uuid-system-action-${id}`,
+    id: `system-action-${id}`,
+    actionTypeId: `actionType-${id}`,
+    params: {},
+    ...overwrites,
+  };
+};
+
+export const getActionType = (id: string, overwrites?: Partial<ActionType>): ActionType => {
+  return {
+    id: `actionType-${id}`,
+    name: `actionType: ${id}`,
+    enabled: true,
+    enabledInConfig: true,
+    enabledInLicense: true,
+    minimumLicenseRequired: 'basic',
+    supportedFeatureIds: ['stackAlerts'],
+    isSystemActionType: false,
+    ...overwrites,
+  };
+};
+
+export const getActionTypeModel = (
+  id: string,
+  overwrites?: Partial<ActionTypeModel>
+): ActionTypeModel => {
+  return actionTypeRegistryMock.createMockActionTypeModel({
+    id: `actionTypeModel-${id}`,
+    iconClass: 'test',
+    selectMessage: 'test',
+    validateParams: (): Promise<GenericValidationResult<unknown>> => {
+      const validationResult = { errors: {} };
+      return Promise.resolve(validationResult);
+    },
+    actionConnectorFields: null,
+    ...overwrites,
+  });
+};
diff --git a/packages/kbn-alerts-ui-shared/src/common/types/rule_types.ts b/packages/kbn-alerts-ui-shared/src/common/types/rule_types.ts
@@ -43,6 +43,10 @@ export interface RuleFormBaseErrors {
   tags?: string[];
 }
 
+export interface RuleFormActionsErrors {
+  filterQuery?: string[];
+}
+
 export interface RuleFormParamsErrors {
   [key: string]: string | string[] | RuleFormParamsErrors;
 }

diff --git a/packages/kbn-alerts-ui-shared/src/rule_form/constants.ts b/packages/kbn-alerts-ui-shared/src/rule_form/constants.ts
@@ -32,10 +32,12 @@ export const GET_DEFAULT_FORM_DATA = ({
   name,
   consumer,
   schedule,
+  actions,
 }: {
   ruleTypeId: RuleFormData['ruleTypeId'];
   name: RuleFormData['name'];
   consumer: RuleFormData['consumer'];
+  actions: RuleFormData['actions'];
   schedule?: RuleFormData['schedule'];
 }) => {
   return {
@@ -47,6 +49,7 @@ export const GET_DEFAULT_FORM_DATA = ({
     consumer,
     ruleTypeId,
     name,
+    actions,
   };
 };
 

diff --git a/packages/kbn-alerts-ui-shared/src/rule_form/create_rule_form.tsx b/packages/kbn-alerts-ui-shared/src/rule_form/create_rule_form.tsx
@@ -10,9 +10,9 @@
 import React, { useCallback } from 'react';
 import { EuiLoadingElastic } from '@elastic/eui';
 import { toMountPoint } from '@kbn/react-kibana-mount';
-import type { RuleCreationValidConsumer } from '@kbn/rule-data-utils';
+import { type RuleCreationValidConsumer } from '@kbn/rule-data-utils';
 import type { RuleFormData, RuleFormPlugins } from './types';
-import { ALERTING_FEATURE_ID, DEFAULT_VALID_CONSUMERS, GET_DEFAULT_FORM_DATA } from './constants';
+import { DEFAULT_VALID_CONSUMERS, GET_DEFAULT_FORM_DATA } from './constants';
 import { RuleFormStateProvider } from './rule_form_state';
 import { useCreateRule } from '../common/hooks';
 import { RulePage } from './rule_page';
@@ -40,23 +40,27 @@ export interface CreateRuleFormProps {
   validConsumers?: RuleCreationValidConsumer[];
   filteredRuleTypes?: string[];
   shouldUseRuleProducer?: boolean;
+  canShowConsumerSelection?: boolean;
+  showMustacheAutocompleteSwitch?: boolean;
   returnUrl: string;
 }
 
 export const CreateRuleForm = (props: CreateRuleFormProps) => {
   const {
     ruleTypeId,
     plugins,
-    consumer = ALERTING_FEATURE_ID,
+    consumer = 'alerts',
     multiConsumerSelection,
     validConsumers = DEFAULT_VALID_CONSUMERS,
     filteredRuleTypes = [],
     shouldUseRuleProducer = false,
+    canShowConsumerSelection = true,
+    showMustacheAutocompleteSwitch = false,
     returnUrl,
   } = props;
 
-  const { http, docLinks, notification, ruleTypeRegistry, i18n, theme } = plugins;
-  const { toasts } = notification;
+  const { http, docLinks, notifications, ruleTypeRegistry, i18n, theme } = plugins;
+  const { toasts } = notifications;
 
   const { mutate, isLoading: isSaving } = useCreateRule({
     http,
@@ -79,16 +83,25 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
     },
   });
 
-  const { isInitialLoading, ruleType, ruleTypeModel, uiConfig, healthCheckError } =
-    useLoadDependencies({
-      http,
-      toasts: notification.toasts,
-      ruleTypeRegistry,
-      ruleTypeId,
-      consumer,
-      validConsumers,
-      filteredRuleTypes,
-    });
+  const {
+    isInitialLoading,
+    ruleType,
+    ruleTypeModel,
+    uiConfig,
+    healthCheckError,
+    connectors,
+    connectorTypes,
+    aadTemplateFields,
+  } = useLoadDependencies({
+    http,
+    toasts: notifications.toasts,
+    capabilities: plugins.application.capabilities,
+    ruleTypeRegistry,
+    ruleTypeId,
+    consumer,
+    validConsumers,
+    filteredRuleTypes,
+  });
 
   const onSave = useCallback(
     (newFormData: RuleFormData) => {
@@ -101,8 +114,7 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
           tags: newFormData.tags,
           params: newFormData.params,
           schedule: newFormData.schedule,
-          // TODO: Will add actions in the actions PR
-          actions: [],
+          actions: newFormData.actions,
           notifyWhen: newFormData.notifyWhen,
           alertDelay: newFormData.alertDelay,
         },
@@ -151,12 +163,18 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
               ruleType,
               minimumScheduleInterval: uiConfig?.minimumScheduleInterval,
             }),
+            actions: [],
           }),
           plugins,
+          connectors,
+          connectorTypes,
+          aadTemplateFields,
           minimumScheduleInterval: uiConfig?.minimumScheduleInterval,
           selectedRuleTypeModel: ruleTypeModel,
           selectedRuleType: ruleType,
           validConsumers,
+          canShowConsumerSelection,
+          showMustacheAutocompleteSwitch,
           multiConsumerSelection: getInitialMultiConsumer({
             multiConsumerSelection,
             validConsumers,
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,6 +41,7 @@ export const useResolveRule = (props: UseResolveProps) => { @@
           };
         },
         refetchOnWindowFocus: false,
+        retry: false,
       });
       return {
@@ Expand Down @@