From 42e5be43d0868f953751226f4de4d833e054f508 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 4 Mar 2020 19:27:50 -0800 Subject: [PATCH 1/7] improve graph visualization in create alert flyout --- .../triggers_actions_ui/public/index.scss | 3 +- .../threshold/expression.tsx | 42 ++++++++++++++----- .../threshold/visualization.tsx | 2 - .../sections/alert_add/_index.scss | 1 + .../sections/alert_add/alert_add.scss | 3 ++ .../sections/alert_add/alert_form.tsx | 1 - 6 files changed, 38 insertions(+), 14 deletions(-) create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss diff --git a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss index 3ae0ef35ee354..0657b5736096e 100644 --- a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss +++ b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss @@ -4,5 +4,6 @@ // Styling within the app @import '../../../../plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/index'; -@import '../../../../plugins/triggers_actions_ui/public/application/sections/action_connector_form/index'; +@import '../../../../plugins/triggers_actions_ui/public/application/sections/alert_add/index'; +@import '../../../../plugins/triggers_actions_ui/public/application/sections/action_connector_form/index'; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx index f7d2b8f60157f..b34a82eb5dede 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx @@ -20,6 +20,8 @@ import { EuiComboBoxOptionProps, EuiFormRow, EuiCallOut, + EuiEmptyPrompt, + EuiText, } from '@elastic/eui'; import { COMPARATORS, builtInComparators } from '../../../../common/constants'; import { @@ -435,6 +437,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent setAlertParams('threshold', selectedThresholds) } @@ -445,6 +448,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent - {canShowVizualization ? null : ( - - - - )} + +
+ {canShowVizualization ? ( +
+ + + + + } + /> +
+ ) : ( + + + + )} +
); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx index 4d97a59e36320..1c9b4dad96eda 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx @@ -245,7 +245,6 @@ export const ThresholdVisualization: React.FunctionComponent = ({ const aggLabel = aggregationTypes[aggType].text; return (
- {alertVisualizationDataKeys.length ? ( = ({ /> )} -
); } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss new file mode 100644 index 0000000000000..83346c60eb2bc --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss @@ -0,0 +1 @@ +@import 'alert_add'; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss new file mode 100644 index 0000000000000..33cb3cd3d1d15 --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss @@ -0,0 +1,3 @@ +.alertVisualizationChart { + height: $euiSize * 15; +} 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 index 95c049f32436a..86f295e5c9a23 100644 --- 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 @@ -636,7 +636,6 @@ export const AlertForm = ({ alertsContext={alertsContext} /> ) : null} - {selectedGroupActions} {isAddActionPanelOpen ? ( From a274ba8239a14f3a5c2daf3ccccdd9c433b405b6 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 4 Mar 2020 19:27:50 -0800 Subject: [PATCH 2/7] improve graph visualization in create alert flyout --- .../triggers_actions_ui/public/index.scss | 3 +- .../threshold/expression.tsx | 42 ++++++++++++++----- .../threshold/visualization.tsx | 2 - .../sections/alert_add/_index.scss | 1 + .../sections/alert_add/alert_add.scss | 3 ++ .../sections/alert_form/alert_form.tsx | 1 - 6 files changed, 38 insertions(+), 14 deletions(-) create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss diff --git a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss index 3ae0ef35ee354..0657b5736096e 100644 --- a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss +++ b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss @@ -4,5 +4,6 @@ // Styling within the app @import '../../../../plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/index'; -@import '../../../../plugins/triggers_actions_ui/public/application/sections/action_connector_form/index'; +@import '../../../../plugins/triggers_actions_ui/public/application/sections/alert_add/index'; +@import '../../../../plugins/triggers_actions_ui/public/application/sections/action_connector_form/index'; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx index a2ef67be7bca2..562fb738689cd 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx @@ -20,6 +20,8 @@ import { EuiComboBoxOptionProps, EuiFormRow, EuiCallOut, + EuiEmptyPrompt, + EuiText, } from '@elastic/eui'; import { COMPARATORS, builtInComparators } from '../../../../common/constants'; import { @@ -450,6 +452,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent setAlertParams('threshold', selectedThresholds) } @@ -460,6 +463,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent - {canShowVizualization ? null : ( - - - - )} + +
+ {canShowVizualization ? ( +
+ + + + + } + /> +
+ ) : ( + + + + )} +
); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx index 4d97a59e36320..1c9b4dad96eda 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx @@ -245,7 +245,6 @@ export const ThresholdVisualization: React.FunctionComponent = ({ const aggLabel = aggregationTypes[aggType].text; return (
- {alertVisualizationDataKeys.length ? ( = ({ /> )} -
); } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss new file mode 100644 index 0000000000000..83346c60eb2bc --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss @@ -0,0 +1 @@ +@import 'alert_add'; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss new file mode 100644 index 0000000000000..33cb3cd3d1d15 --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss @@ -0,0 +1,3 @@ +.alertVisualizationChart { + height: $euiSize * 15; +} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx index b875fae75c7df..0bf29dd169031 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx @@ -638,7 +638,6 @@ export const AlertForm = ({ alertsContext={alertsContext} /> ) : null} - {selectedGroupActions} {isAddActionPanelOpen ? ( From cb08e75f021252bb304bc9383f754a3e0492e75d Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 5 Mar 2020 16:48:06 -0800 Subject: [PATCH 3/7] removed z-index from comboboxlist --- .../application/sections/action_connector_form/_index.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss index b5755bc35b1c1..f8fa882cd617d 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss @@ -1,7 +1,3 @@ .actConnectorModal { z-index: 9000; } - -.euiComboBoxOptionsList { - z-index: 10000; -} From 90d3f68f32377f057b8d959b82440ff52ec79eed Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 5 Mar 2020 17:01:27 -0800 Subject: [PATCH 4/7] connector_add_modal.tsx imports its own scss --- x-pack/legacy/plugins/triggers_actions_ui/public/index.scss | 2 -- .../application/sections/action_connector_form/_index.scss | 6 +++--- .../sections/action_connector_form/connector_add_modal.scss | 3 +++ .../sections/action_connector_form/connector_add_modal.tsx | 1 + 4 files changed, 7 insertions(+), 5 deletions(-) create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.scss diff --git a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss index 8b538018756f1..18b05bed2213f 100644 --- a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss +++ b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss @@ -3,5 +3,3 @@ // Styling within the app @import '../../../../plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/index'; - -@import '../../../../plugins/triggers_actions_ui/public/application/sections/action_connector_form/index'; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss index f8fa882cd617d..55267a45e11f0 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss @@ -1,3 +1,3 @@ -.actConnectorModal { - z-index: 9000; -} +// .actConnectorModal { +// z-index: 9000; +// } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.scss new file mode 100644 index 0000000000000..f8fa882cd617d --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.scss @@ -0,0 +1,3 @@ +.actConnectorModal { + z-index: 9000; +} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx index 6486292725660..55847ae6841a0 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx @@ -29,6 +29,7 @@ import { import { connectorReducer } from './connector_reducer'; import { createActionConnector } from '../../lib/action_connector_api'; import { TypeRegistry } from '../../type_registry'; +import './connector_add_modal.scss'; interface ConnectorAddModalProps { actionType: ActionType; From 45774be38421d8825fb307ba0c67e921035bd4fa Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 5 Mar 2020 17:15:02 -0800 Subject: [PATCH 5/7] actions_connectors_list.tsx imports its own scss --- x-pack/legacy/plugins/triggers_actions_ui/public/index.scss | 3 --- .../application/sections/action_connector_form/_index.scss | 3 --- .../sections/actions_connectors_list/components/_index.scss | 1 - .../components/actions_connectors_list.tsx | 1 + 4 files changed, 1 insertion(+), 7 deletions(-) delete mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss delete mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/_index.scss diff --git a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss index 18b05bed2213f..8c83c0a571f28 100644 --- a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss +++ b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss @@ -1,5 +1,2 @@ // Imported EUI @import 'src/legacy/ui/public/styles/_styling_constants'; - -// Styling within the app -@import '../../../../plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/index'; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss deleted file mode 100644 index 55267a45e11f0..0000000000000 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/_index.scss +++ /dev/null @@ -1,3 +0,0 @@ -// .actConnectorModal { -// z-index: 9000; -// } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/_index.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/_index.scss deleted file mode 100644 index 98c6c2a307a74..0000000000000 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'actions_connectors_list'; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx index f48e27791419d..865e3eb7bcaef 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx @@ -25,6 +25,7 @@ import { ActionConnector, ActionConnectorTableItem, ActionTypeIndex } from '../. import { ConnectorAddFlyout, ConnectorEditFlyout } from '../../action_connector_form'; import { hasDeleteActionsCapability, hasSaveActionsCapability } from '../../../lib/capabilities'; import { DeleteConnectorsModal } from '../../../components/delete_connectors_modal'; +import './actions_connectors_list.scss'; export const ActionsConnectorsList: React.FunctionComponent = () => { const { http, toastNotifications, capabilities } = useAppDependencies(); From 7b322874b77db7c8e6b9185ff867d37be7065374 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 5 Mar 2020 17:17:51 -0800 Subject: [PATCH 6/7] remove unused files --- .../public/application/sections/alert_add/_index.scss | 1 - .../public/application/sections/alert_add/alert_add.scss | 3 --- 2 files changed, 4 deletions(-) delete mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss delete mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss deleted file mode 100644 index 83346c60eb2bc..0000000000000 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'alert_add'; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss deleted file mode 100644 index 33cb3cd3d1d15..0000000000000 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss +++ /dev/null @@ -1,3 +0,0 @@ -.alertVisualizationChart { - height: $euiSize * 15; -} From 58240fb40c5201ddffc79b05af51756b9225cb07 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 5 Mar 2020 17:28:46 -0800 Subject: [PATCH 7/7] remove alert_add/alert_form.tsx --- .../sections/alert_add/alert_form.tsx | 878 ------------------ 1 file changed, 878 deletions(-) delete mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_form.tsx 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 deleted file mode 100644 index 86f295e5c9a23..0000000000000 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_form.tsx +++ /dev/null @@ -1,878 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ -import React, { Fragment, useState, useEffect } from 'react'; -import { i18n } from '@kbn/i18n'; -import { FormattedMessage } from '@kbn/i18n/react'; -import { - EuiButton, - EuiFlexGroup, - EuiFlexItem, - EuiIcon, - EuiTitle, - EuiForm, - EuiSpacer, - EuiFieldText, - EuiFlexGrid, - EuiFormRow, - EuiComboBox, - EuiKeyPadMenuItem, - EuiFieldNumber, - EuiSelect, - EuiIconTip, - EuiAccordion, - EuiButtonIcon, - EuiEmptyPrompt, - EuiButtonEmpty, - EuiHorizontalRule, -} from '@elastic/eui'; -import { loadAlertTypes } from '../../lib/alert_api'; -import { loadActionTypes, loadAllActions } from '../../lib/action_connector_api'; -import { AlertReducerAction } from './alert_reducer'; -import { - AlertTypeModel, - Alert, - IErrorObject, - ActionTypeModel, - AlertAction, - ActionTypeIndex, - ActionConnector, - AlertTypeIndex, - ActionGroup, -} from '../../../types'; -import { SectionLoading } from '../../components/section_loading'; -import { ConnectorAddModal } from '../action_connector_form/connector_add_modal'; -import { getTimeOptions } from '../../../common/lib/get_time_options'; -import { useAlertsContext } from '../../context/alerts_context'; - -export function validateBaseProperties(alertObject: Alert) { - const validationResult = { errors: {} }; - const errors = { - name: new Array(), - interval: new Array(), - alertTypeId: new Array(), - actionConnectors: new Array(), - }; - validationResult.errors = errors; - if (!alertObject.name) { - errors.name.push( - i18n.translate('xpack.triggersActionsUI.sections.alertForm.error.requiredNameText', { - defaultMessage: 'Name is required.', - }) - ); - } - if (!alertObject.schedule.interval) { - errors.interval.push( - i18n.translate('xpack.triggersActionsUI.sections.alertForm.error.requiredIntervalText', { - defaultMessage: 'Check interval is required.', - }) - ); - } - if (!alertObject.alertTypeId) { - errors.alertTypeId.push( - i18n.translate('xpack.triggersActionsUI.sections.alertForm.error.requiredAlertTypeIdText', { - defaultMessage: 'Alert trigger is required.', - }) - ); - } - return validationResult; -} - -interface AlertFormProps { - alert: Alert; - dispatch: React.Dispatch; - errors: IErrorObject; - serverError: { - body: { message: string; error: string }; - } | null; - canChangeTrigger?: boolean; // to hide Change trigger button -} - -interface ActiveActionConnectorState { - actionTypeId: string; - index: number; -} - -export const AlertForm = ({ - alert, - canChangeTrigger = true, - dispatch, - errors, - serverError, -}: AlertFormProps) => { - const alertsContext = useAlertsContext(); - const { http, toastNotifications, alertTypeRegistry, actionTypeRegistry } = alertsContext; - - const [alertTypeModel, setAlertTypeModel] = useState( - alertTypeRegistry.get(alert.alertTypeId) - ); - - const [addModalVisible, setAddModalVisibility] = useState(false); - const [isLoadingActionTypes, setIsLoadingActionTypes] = useState(false); - const [actionTypesIndex, setActionTypesIndex] = useState(undefined); - const [alertTypesIndex, setAlertTypesIndex] = useState(undefined); - const [alertInterval, setAlertInterval] = useState(null); - const [alertIntervalUnit, setAlertIntervalUnit] = useState('m'); - const [alertThrottle, setAlertThrottle] = useState(null); - const [alertThrottleUnit, setAlertThrottleUnit] = useState('m'); - const [isAddActionPanelOpen, setIsAddActionPanelOpen] = useState(true); - const [connectors, setConnectors] = useState([]); - const [defaultActionGroup, setDefaultActionGroup] = useState(undefined); - const [activeActionItem, setActiveActionItem] = useState( - undefined - ); - - // load action types - useEffect(() => { - (async () => { - try { - setIsLoadingActionTypes(true); - const actionTypes = await loadActionTypes({ http }); - const index: ActionTypeIndex = {}; - for (const actionTypeItem of actionTypes) { - index[actionTypeItem.id] = actionTypeItem; - } - setActionTypesIndex(index); - } catch (e) { - if (toastNotifications) { - toastNotifications.addDanger({ - title: i18n.translate( - 'xpack.triggersActionsUI.sections.alertForm.unableToLoadActionTypesMessage', - { defaultMessage: 'Unable to load action types' } - ), - }); - } - } finally { - setIsLoadingActionTypes(false); - } - })(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - // load alert types - useEffect(() => { - (async () => { - try { - const alertTypes = await loadAlertTypes({ http }); - // temp hack of API result - alertTypes.push({ - id: 'threshold', - actionGroups: [ - { id: 'alert', name: 'Alert' }, - { id: 'warning', name: 'Warning' }, - { id: 'ifUnacknowledged', name: 'If unacknowledged' }, - ], - name: 'threshold', - actionVariables: ['ctx.metadata.name', 'ctx.metadata.test'], - }); - const index: AlertTypeIndex = {}; - for (const alertTypeItem of alertTypes) { - index[alertTypeItem.id] = alertTypeItem; - } - if (alert.alertTypeId) { - setDefaultActionGroup(index[alert.alertTypeId].actionGroups[0]); - } - setAlertTypesIndex(index); - } catch (e) { - if (toastNotifications) { - toastNotifications.addDanger({ - title: i18n.translate( - 'xpack.triggersActionsUI.sections.alertForm.unableToLoadAlertTypesMessage', - { defaultMessage: 'Unable to load alert types' } - ), - }); - } - } - })(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - useEffect(() => { - loadConnectors(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - const setAlertProperty = (key: string, value: any) => { - dispatch({ command: { type: 'setProperty' }, payload: { key, value } }); - }; - - const setAlertParams = (key: string, value: any) => { - dispatch({ command: { type: 'setAlertParams' }, payload: { key, value } }); - }; - - const setScheduleProperty = (key: string, value: any) => { - dispatch({ command: { type: 'setScheduleProperty' }, payload: { key, value } }); - }; - - const setActionParamsProperty = (key: string, value: any, index: number) => { - dispatch({ command: { type: 'setAlertActionParams' }, payload: { key, value, index } }); - }; - - const setActionProperty = (key: string, value: any, index: number) => { - dispatch({ command: { type: 'setAlertActionProperty' }, payload: { key, value, index } }); - }; - - const tagsOptions = alert.tags ? alert.tags.map((label: string) => ({ label })) : []; - - async function loadConnectors() { - try { - const actionsResponse = await loadAllActions({ http }); - setConnectors(actionsResponse.data); - } catch (e) { - if (toastNotifications) { - toastNotifications.addDanger({ - title: i18n.translate( - 'xpack.triggersActionsUI.sections.alertForm.unableToLoadActionsMessage', - { - defaultMessage: 'Unable to load connectors', - } - ), - }); - } - } - } - - const actionsErrors = alert.actions.reduce( - (acc: Record, alertAction: AlertAction) => { - const actionType = actionTypeRegistry.get(alertAction.actionTypeId); - if (!actionType) { - return { ...acc }; - } - const actionValidationErrors = actionType.validateParams(alertAction.params); - return { ...acc, [alertAction.id]: actionValidationErrors }; - }, - {} - ); - - const AlertParamsExpressionComponent = alertTypeModel - ? alertTypeModel.alertParamsExpression - : null; - - function addActionType(actionTypeModel: ActionTypeModel) { - setIsAddActionPanelOpen(false); - const actionTypeConnectors = connectors.filter( - field => field.actionTypeId === actionTypeModel.id - ); - let freeConnectors; - if (actionTypeConnectors.length > 0) { - // Should we allow adding multiple actions to the same connector under the alert? - freeConnectors = actionTypeConnectors.filter( - (actionConnector: ActionConnector) => - !alert.actions.find((actionItem: AlertAction) => actionItem.id === actionConnector.id) - ); - if (freeConnectors.length > 0) { - alert.actions.push({ - id: '', - actionTypeId: actionTypeModel.id, - group: defaultActionGroup?.id ?? 'Alert', - params: {}, - }); - setActionProperty('id', freeConnectors[0].id, alert.actions.length - 1); - } - } - if (actionTypeConnectors.length === 0 || !freeConnectors || freeConnectors.length === 0) { - // if no connectors exists or all connectors is already assigned an action under current alert - // set actionType as id to be able to create new connector within the alert form - alert.actions.push({ - id: '', - actionTypeId: actionTypeModel.id, - group: defaultActionGroup?.id ?? 'Alert', - params: {}, - }); - setActionProperty('id', alert.actions.length, alert.actions.length - 1); - } - } - - const alertTypeNodes = alertTypeRegistry.list().map(function(item, index) { - return ( - { - setAlertProperty('alertTypeId', item.id); - setAlertTypeModel(item); - if ( - alertTypesIndex && - alertTypesIndex[item.id] && - alertTypesIndex[item.id].actionGroups.length > 0 - ) { - setDefaultActionGroup(alertTypesIndex[item.id].actionGroups[0]); - } - }} - > - - - ); - }); - - const actionTypeNodes = actionTypeRegistry.list().map(function(item, index) { - return ( - addActionType(item)} - > - - - ); - }); - - const getSelectedOptions = (actionItemId: string) => { - const val = connectors.find(connector => connector.id === actionItemId); - if (!val) { - return []; - } - return [ - { - label: val.name, - value: val.name, - id: actionItemId, - }, - ]; - }; - - const getActionTypeForm = ( - actionItem: AlertAction, - actionConnector: ActionConnector, - index: number - ) => { - const optionsList = connectors - .filter( - connectorItem => - connectorItem.actionTypeId === actionItem.actionTypeId && - (connectorItem.id === actionItem.id || - !alert.actions.find( - (existingAction: AlertAction) => - existingAction.id === connectorItem.id && existingAction.group === actionItem.group - )) - ) - .map(({ name, id }) => ({ - label: name, - key: id, - id, - })); - const actionTypeRegisterd = actionTypeRegistry.get(actionConnector.actionTypeId); - if (actionTypeRegisterd === null || actionItem.group !== defaultActionGroup?.id) return null; - const ParamsFieldsComponent = actionTypeRegisterd.actionParamsFields; - const actionParamsErrors: { errors: IErrorObject } = - Object.keys(actionsErrors).length > 0 ? actionsErrors[actionItem.id] : { errors: {} }; - - return ( - - - - - - -
- -
- - - - } - extraAction={ - { - const updatedActions = alert.actions.filter( - (item: AlertAction) => item.id !== actionItem.id - ); - setAlertProperty('actions', updatedActions); - setIsAddActionPanelOpen( - updatedActions.filter((item: AlertAction) => item.id !== actionItem.id).length === 0 - ); - setActiveActionItem(undefined); - }} - /> - } - paddingSize="l" - > - - - - } - labelAppend={ - { - setActiveActionItem({ actionTypeId: actionItem.actionTypeId, index }); - setAddModalVisibility(true); - }} - > - - - } - > - { - setActionProperty('id', selectedOptions[0].id, index); - }} - isClearable={false} - /> - - - - - {ParamsFieldsComponent ? ( - - ) : null} - - ); - }; - - const getAddConnectorsForm = (actionItem: AlertAction, index: number) => { - const actionTypeName = actionTypesIndex - ? actionTypesIndex[actionItem.actionTypeId].name - : actionItem.actionTypeId; - const actionTypeRegisterd = actionTypeRegistry.get(actionItem.actionTypeId); - if (actionTypeRegisterd === null || actionItem.group !== defaultActionGroup?.id) return null; - return ( - - - - - - -
- -
- - - - } - extraAction={ - { - const updatedActions = alert.actions.filter( - (item: AlertAction) => item.id !== actionItem.id - ); - setAlertProperty('actions', updatedActions); - setIsAddActionPanelOpen( - updatedActions.filter((item: AlertAction) => item.id !== actionItem.id).length === 0 - ); - setActiveActionItem(undefined); - }} - /> - } - paddingSize="l" - > - - } - actions={[ - { - setActiveActionItem({ actionTypeId: actionItem.actionTypeId, index }); - setAddModalVisibility(true); - }} - > - - , - ]} - /> - - ); - }; - - const selectedGroupActions = ( - - {alert.actions.map((actionItem: AlertAction, index: number) => { - const actionConnector = connectors.find(field => field.id === actionItem.id); - // connectors doesn't exists - if (!actionConnector) { - return getAddConnectorsForm(actionItem, index); - } - return getActionTypeForm(actionItem, actionConnector, index); - })} - - {isAddActionPanelOpen === false ? ( - setIsAddActionPanelOpen(true)} - > - - - ) : null} - - ); - - const alertTypeDetails = ( - - - - - -
- -
- - - {canChangeTrigger ? ( - - { - setAlertProperty('alertTypeId', null); - setAlertTypeModel(null); - }} - /> - - ) : null} - - {AlertParamsExpressionComponent ? ( - - ) : null} - {selectedGroupActions} - {isAddActionPanelOpen ? ( - - -
- -
- - - - {isLoadingActionTypes ? ( - - - - ) : ( - actionTypeNodes - )} - - - ) : null} - - ); - - const labelForAlertChecked = ( - <> - {' '} - - - ); - - const labelForAlertRenotify = ( - <> - {' '} - - - ); - - return ( - - - - - } - isInvalid={errors.name.length > 0 && alert.name !== undefined} - error={errors.name} - > - 0 && alert.name !== undefined} - compressed - name="name" - data-test-subj="alertNameInput" - value={alert.name || ''} - onChange={e => { - setAlertProperty('name', e.target.value); - }} - onBlur={() => { - if (!alert.name) { - setAlertProperty('name', ''); - } - }} - /> - - - - - { - const newOptions = [...tagsOptions, { label: searchValue }]; - setAlertProperty( - 'tags', - newOptions.map(newOption => newOption.label) - ); - }} - onChange={(selectedOptions: Array<{ label: string }>) => { - setAlertProperty( - 'tags', - selectedOptions.map(selectedOption => selectedOption.label) - ); - }} - onBlur={() => { - if (!alert.tags) { - setAlertProperty('tags', []); - } - }} - /> - - - - - - - - - - { - const interval = e.target.value !== '' ? parseInt(e.target.value, 10) : null; - setAlertInterval(interval); - setScheduleProperty('interval', `${e.target.value}${alertIntervalUnit}`); - }} - /> - - - { - setAlertIntervalUnit(e.target.value); - setScheduleProperty('interval', `${alertInterval}${e.target.value}`); - }} - /> - - - - - - - - - { - const throttle = e.target.value !== '' ? parseInt(e.target.value, 10) : null; - setAlertThrottle(throttle); - setAlertProperty('throttle', `${e.target.value}${alertThrottleUnit}`); - }} - /> - - - { - setAlertThrottleUnit(e.target.value); - setAlertProperty('throttle', `${alertThrottle}${e.target.value}`); - }} - /> - - - - - - - {alertTypeModel ? ( - {alertTypeDetails} - ) : ( - - - -
- -
- - - - {alertTypeNodes} - - - )} - {actionTypesIndex && activeActionItem ? ( - { - connectors.push(savedAction); - setActionProperty('id', savedAction.id, activeActionItem.index); - }} - actionTypeRegistry={actionTypeRegistry} - alertTypeRegistry={alertTypeRegistry} - http={http} - toastNotifications={toastNotifications} - /> - ) : null} - - ); -};