From 61cfdc6e1175ba314a610de9c2697a435e09b6aa Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 8 Apr 2020 08:25:36 -0700 Subject: [PATCH 01/15] added header to actions section --- .../sections/action_connector_form/action_form.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx index 3ade4e6368f96..7eef5a2308cc2 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx @@ -339,7 +339,7 @@ export const ActionForm = ({ - +
+ +

+ +

+ {actions.map((actionItem: AlertAction, index: number) => { const actionConnector = connectors.find(field => field.id === actionItem.id); // connectors doesn't exists @@ -518,7 +526,7 @@ export const ActionForm = ({
From 8dec0f54a11e59ead5e9bf433864f926d31a5922 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 9 Apr 2020 15:51:44 -0700 Subject: [PATCH 02/15] adjusted some spacing in Create Alert --- .../threshold/expression.scss | 2 +- .../threshold/expression.tsx | 2 - .../action_connector_form/action_form.scss | 3 + .../action_connector_form/action_form.tsx | 336 ++++++++++-------- 4 files changed, 183 insertions(+), 160 deletions(-) create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.scss diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss index d0a7039ae24e1..eee785a844a16 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss @@ -1,3 +1,3 @@ .actAlertVisualization__chart { - height: $euiSize * 15; + height: $euiSize * 14; } 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 5bbec1221a3ac..3174567bd67f3 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 @@ -445,11 +445,9 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent -
{canShowVizualization ? ( - - - - - - -
- - - - - - {checkEnabledResult.isEnabled === false && ( - - - - )} - - -
- - - - } - extraAction={ - { - const updatedActions = actions.filter((_item: AlertAction, i: number) => i !== index); - setAlertProperty(updatedActions); - setIsAddActionPanelOpen( - updatedActions.filter((item: AlertAction) => item.id !== actionItem.id).length === 0 - ); - setActiveActionItem(undefined); - }} - /> - } - paddingSize="l" - > - {accordionContent} - + + + + + + + +
+ + + + + + {checkEnabledResult.isEnabled === false && ( + + + + )} + + +
+ + + + } + extraAction={ + { + const updatedActions = actions.filter( + (_item: AlertAction, i: number) => i !== index + ); + setAlertProperty(updatedActions); + setIsAddActionPanelOpen( + updatedActions.filter((item: AlertAction) => item.id !== actionItem.id).length === + 0 + ); + setActiveActionItem(undefined); + }} + /> + } + paddingSize="l" + > + {accordionContent} + + + ); }; @@ -326,84 +334,90 @@ export const ActionForm = ({ const actionTypeRegistered = actionTypeRegistry.get(actionItem.actionTypeId); if (!actionTypeRegistered || actionItem.group !== defaultActionGroupId) return null; return ( - - - - - - -
- -
- - - - } - extraAction={ - { - const updatedActions = actions.filter((_item: AlertAction, i: number) => i !== index); - setAlertProperty(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 updatedActions = actions.filter( + (_item: AlertAction, i: number) => i !== index + ); + setAlertProperty(updatedActions); + setIsAddActionPanelOpen( + updatedActions.filter((item: AlertAction) => item.id !== actionItem.id).length === + 0 + ); + setActiveActionItem(undefined); }} - > + /> + } + paddingSize="l" + > + - , - ]} - /> - + } + actions={[ + { + setActiveActionItem({ actionTypeId: actionItem.actionTypeId, index }); + setAddModalVisibility(true); + }} + > + + , + ]} + /> + + + ); }; @@ -493,6 +507,7 @@ export const ActionForm = ({ />
+ {actions.map((actionItem: AlertAction, index: number) => { const actionConnector = connectors.find(field => field.id === actionItem.id); // connectors doesn't exists @@ -506,18 +521,24 @@ export const ActionForm = ({ return getActionTypeForm(actionItem, actionConnector, actionErrors, index); })} - {isAddActionPanelOpen === false ? ( - setIsAddActionPanelOpen(true)} - > - - +
+ + + + setIsAddActionPanelOpen(true)} + > + + + + +
) : null} {isAddActionPanelOpen ? ( @@ -539,6 +560,7 @@ export const ActionForm = ({ Date: Thu, 9 Apr 2020 18:40:32 -0700 Subject: [PATCH 03/15] lighter text in Actions section headings --- .../action_connector_form/action_form.scss | 3 --- .../action_connector_form/action_form.tsx | 18 +++++++++--------- .../components/collapsed_item_actions.tsx | 3 ++- 3 files changed, 11 insertions(+), 13 deletions(-) delete mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.scss diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.scss deleted file mode 100644 index 104dea71df147..0000000000000 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.scss +++ /dev/null @@ -1,3 +0,0 @@ -.actAddActionButton { - margin-left: auto; -} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx index 77e98952bc686..4ae3eea419925 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx @@ -25,6 +25,7 @@ import { EuiIconTip, EuiLink, EuiHorizontalRule, + EuiText, } from '@elastic/eui'; import { HttpSetup, ToastsApi } from 'kibana/public'; import { loadActionTypes, loadAllActions } from '../../lib/action_connector_api'; @@ -42,7 +43,6 @@ import { TypeRegistry } from '../../type_registry'; import { actionTypeCompare } from '../../lib/action_type_compare'; import { checkActionTypeEnabled } from '../../lib/check_action_type_enabled'; import { VIEW_LICENSE_OPTIONS_LINK } from '../../../common/constants'; -import './action_form.scss'; interface ActionAccordionFormProps { actions: AlertAction[]; @@ -259,8 +259,8 @@ export const ActionForm = ({ - -
+ +

-

- +

+ } @@ -348,8 +348,8 @@ export const ActionForm = ({ - -
+ +

-

- +

+ } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx index 694f99251d26b..d21305c26ca23 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx @@ -66,6 +66,7 @@ export const CollapsedItemActions: React.FunctionComponent = ({ ownFocus data-test-subj="collapsedItemActions" > +

helloooo

= ({ setAlertsToDelete([item.id])} > From 08393d3cafed460e02c236ce9f3299cf526b8fe6 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Sun, 12 Apr 2020 15:05:42 -0700 Subject: [PATCH 04/15] fixed bulk actions dropdown --- .../components/collapsed_item_actions.tsx | 1 - .../components/alert_quick_edit_buttons.scss | 7 ++++ .../components/alert_quick_edit_buttons.tsx | 41 ++++++++++--------- .../components/bulk_operation_popover.tsx | 10 ++--- 4 files changed, 32 insertions(+), 27 deletions(-) create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.scss diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx index d21305c26ca23..2facf9e7abcea 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx @@ -66,7 +66,6 @@ export const CollapsedItemActions: React.FunctionComponent = ({ ownFocus data-test-subj="collapsedItemActions" > -

helloooo

= ({ } return ( - + {!allAlertsMuted && ( - = ({ > - + )} {allAlertsMuted && ( - = ({ > - + )} {allAlertsDisabled && ( - = ({ > - + )} {!allAlertsDisabled && ( - = ({ > - + )} - - - + + ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/bulk_operation_popover.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/bulk_operation_popover.tsx index d0fd0e1792818..1cc577b8fc612 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/bulk_operation_popover.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/bulk_operation_popover.tsx @@ -4,9 +4,9 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useState } from 'react'; +import React, { useState, Fragment } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiButton, EuiFormRow, EuiPopover } from '@elastic/eui'; +import { EuiButton, EuiPopover } from '@elastic/eui'; export const BulkOperationPopover: React.FunctionComponent = ({ children }) => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); @@ -31,11 +31,7 @@ export const BulkOperationPopover: React.FunctionComponent = ({ children }) => { > {children && React.Children.map(children, child => - React.isValidElement(child) ? ( - {React.cloneElement(child, {})} - ) : ( - child - ) + React.isValidElement(child) ? {React.cloneElement(child, {})} : child )} ); From 616b54fb1961b5b9d942ba2303bef3659ce5b783 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Sun, 12 Apr 2020 16:01:40 -0700 Subject: [PATCH 05/15] improve alert collapsed item actions --- .../components/collapsed_item_actions.scss | 8 ++ .../components/collapsed_item_actions.tsx | 121 +++++++++--------- 2 files changed, 68 insertions(+), 61 deletions(-) create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss new file mode 100644 index 0000000000000..1975684b0fe52 --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss @@ -0,0 +1,8 @@ +.actCollapsedItemActions__delete { + color: $euiColorDanger; + + .euiContextMenu__itemLayout { + @include euiFontSizeS; + align-items: baseline; + } +} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx index 2facf9e7abcea..03a7ae358dfc5 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx @@ -8,11 +8,10 @@ import { i18n } from '@kbn/i18n'; import React, { useState } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { - EuiButtonEmpty, EuiButtonIcon, - EuiFormRow, EuiPopover, - EuiPopoverFooter, + EuiContextMenuPanel, + EuiContextMenuItem, EuiSwitch, } from '@elastic/eui'; @@ -23,6 +22,7 @@ import { ComponentOpts as BulkOperationsComponentOpts, withBulkAlertOperations, } from '../../common/components/with_bulk_alert_api_operations'; +import './collapsed_item_actions.scss'; export type ComponentOpts = { item: AlertTableItem; @@ -66,66 +66,65 @@ export const CollapsedItemActions: React.FunctionComponent = ({ ownFocus data-test-subj="collapsedItemActions" > - - { - if (item.enabled) { - await disableAlert(item); - } else { - await enableAlert(item); + + + { + if (item.enabled) { + await disableAlert(item); + } else { + await enableAlert(item); + } + onAlertChanged(); + }} + label={ + } - onAlertChanged(); - }} - label={ - - } - /> - - - { - if (item.muteAll) { - await unmuteAlert(item); - } else { - await muteAlert(item); + /> + + + { + if (item.muteAll) { + await unmuteAlert(item); + } else { + await muteAlert(item); + } + onAlertChanged(); + }} + label={ + } - onAlertChanged(); - }} - label={ - - } - /> - - - - setAlertsToDelete([item.id])} - > - - - - + /> + + setAlertsToDelete([item.id])} + className="actCollapsedItemActions__delete" + > + + + ); }; From 3b07e75654ca5693ca427f647c818fcdcd82b973 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 13 Apr 2020 22:53:50 -0700 Subject: [PATCH 06/15] improve dropdown and adjust some buttos --- .../sections/action_connector_form/action_form.tsx | 5 +++-- .../sections/alerts_list/components/alerts_list.tsx | 2 -- .../alerts_list/components/collapsed_item_actions.tsx | 6 +++++- .../sections/common/components/bulk_operation_popover.tsx | 1 + 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx index 4ae3eea419925..162f1780e71f0 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx @@ -402,6 +402,7 @@ export const ActionForm = ({ { setActiveActionItem({ actionTypeId: actionItem.actionTypeId, index }); @@ -527,7 +528,7 @@ export const ActionForm = ({ setIsAddActionPanelOpen(true)} > @@ -574,7 +575,7 @@ export const ActionForm = ({ )} - + {isLoadingActionTypes ? ( { key="create-alert" data-test-subj="createAlertButton" fill - iconType="plusInCircle" - iconSide="left" onClick={() => setAlertFlyoutVisibility(true)} > = ({ isOpen={isPopoverOpen} closePopover={() => setIsPopoverOpen(false)} ownFocus + panelPaddingSize="s" data-test-subj="collapsedItemActions" > @@ -71,6 +73,7 @@ export const CollapsedItemActions: React.FunctionComponent = ({ { @@ -94,6 +97,7 @@ export const CollapsedItemActions: React.FunctionComponent = ({ name="mute" checked={item.muteAll} disabled={!(canSave && item.enabled)} + compressed data-test-subj="muteSwitch" onChange={async () => { if (item.muteAll) { @@ -111,10 +115,10 @@ export const CollapsedItemActions: React.FunctionComponent = ({ } /> + setAlertsToDelete([item.id])} className="actCollapsedItemActions__delete" diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/bulk_operation_popover.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/bulk_operation_popover.tsx index 1cc577b8fc612..935b0bd8985ca 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/bulk_operation_popover.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/bulk_operation_popover.tsx @@ -16,6 +16,7 @@ export const BulkOperationPopover: React.FunctionComponent = ({ children }) => { isOpen={isPopoverOpen} closePopover={() => setIsPopoverOpen(false)} data-test-subj="bulkAction" + panelPaddingSize="s" button={ Date: Tue, 14 Apr 2020 16:02:46 -0700 Subject: [PATCH 07/15] adjust font size of steps to match hierarchy --- .../builtin_alert_types/threshold/expression.scss | 10 ++++++++++ .../builtin_alert_types/threshold/expression.tsx | 6 +++--- .../sections/action_connector_form/action_form.tsx | 2 +- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss index eee785a844a16..3734cf5d5218b 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss @@ -1,3 +1,13 @@ .actAlertVisualization__chart { height: $euiSize * 14; } + +.actAddAlertSteps { + .euiStep__titleWrapper { + align-items: center; + } + + .euiStep__title { + @include euiTitle('xs'); + } +} 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 3174567bd67f3..910ff7751beeb 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 @@ -283,7 +283,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent @@ -395,7 +395,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent @@ -444,7 +444,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent ) : null} - +
{canShowVizualization ? ( diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx index a9b0fc957920d..c4c659e4f1dcf 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx @@ -564,7 +564,7 @@ export const ActionForm = ({ {isAddActionPanelOpen === false ? (
- + Date: Wed, 15 Apr 2020 14:04:19 -0700 Subject: [PATCH 08/15] need to check master --- .../translations/translations/ja-JP.json | 2 +- .../translations/translations/zh-CN.json | 4 +-- .../components/collapsed_item_actions.scss | 6 ++++ .../components/collapsed_item_actions.tsx | 32 ++++++++++++++----- .../components/alert_quick_edit_buttons.tsx | 12 +++---- 5 files changed, 39 insertions(+), 17 deletions(-) diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index a5d2c20447ad5..39b9ef9b9c178 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -15965,7 +15965,7 @@ "xpack.triggersActionsUI.sections.alertAdd.saveButtonLabel": "保存", "xpack.triggersActionsUI.sections.alertAdd.saveErrorNotificationText": "アラートを作成できません。", "xpack.triggersActionsUI.sections.alertAdd.saveSuccessNotificationText": "「{alertName}」 を保存しました", - "xpack.triggersActionsUI.sections.alertAdd.selectIndex": "インデックスを選択してください。", + "xpack.triggersActionsUI.sections.alertAdd.selectIndex": "インデックスを選択してください", "xpack.triggersActionsUI.sections.alertAdd.threshold.closeIndexPopoverLabel": "閉じる", "xpack.triggersActionsUI.sections.alertAdd.threshold.fixErrorInExpressionBelowValidationMessage": "下の表現のエラーを修正してください。", "xpack.triggersActionsUI.sections.alertAdd.threshold.howToBroadenSearchQueryDescription": "* で検索クエリの範囲を広げます。", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index ef749e9218e11..9fb2b450cb160 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -15962,7 +15962,7 @@ "xpack.triggersActionsUI.sections.addModalConnectorForm.updateSuccessNotificationText": "已创建“{connectorName}”", "xpack.triggersActionsUI.sections.alertAdd.betaBadgeTooltipContent": "{pluginName} 为公测版，可能会进行更改。设计和代码相对于正式发行版功能还不够成熟，将按原样提供，且不提供任何保证。公测版功能不受正式发行版功能支持 SLA 的约束。", "xpack.triggersActionsUI.sections.alertAdd.cancelButtonLabel": "取消", - "xpack.triggersActionsUI.sections.alertAdd.conditionPrompt": "定义条件。", + "xpack.triggersActionsUI.sections.alertAdd.conditionPrompt": "定义条件", "xpack.triggersActionsUI.sections.alertAdd.errorLoadingAlertVisualizationTitle": "无法加载告警可视化", "xpack.triggersActionsUI.sections.alertAdd.flyoutTitle": "创建告警", "xpack.triggersActionsUI.sections.alertAdd.loadingAlertVisualizationDescription": "正在加载告警可视化……", @@ -15970,7 +15970,7 @@ "xpack.triggersActionsUI.sections.alertAdd.saveButtonLabel": "保存", "xpack.triggersActionsUI.sections.alertAdd.saveErrorNotificationText": "无法创建告警。", "xpack.triggersActionsUI.sections.alertAdd.saveSuccessNotificationText": "已保存“{alertName}”", - "xpack.triggersActionsUI.sections.alertAdd.selectIndex": "选择索引。", + "xpack.triggersActionsUI.sections.alertAdd.selectIndex": "选择索引", "xpack.triggersActionsUI.sections.alertAdd.threshold.closeIndexPopoverLabel": "关闭", "xpack.triggersActionsUI.sections.alertAdd.threshold.fixErrorInExpressionBelowValidationMessage": "表达式包含错误。", "xpack.triggersActionsUI.sections.alertAdd.threshold.howToBroadenSearchQueryDescription": "使用 * 可扩大您的查询范围。", diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss index 1975684b0fe52..68d8dff2c8b22 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss @@ -6,3 +6,9 @@ align-items: baseline; } } + +.actCollapsedItemActions__item { + .euiText { + text-decoration: none; + } +} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx index 395a6fc505f4f..5cb9bd1ff7858 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx @@ -14,6 +14,8 @@ import { EuiContextMenuItem, EuiSwitch, EuiHorizontalRule, + EuiText, + EuiSpacer, } from '@elastic/eui'; import { AlertTableItem } from '../../../../types'; @@ -65,16 +67,16 @@ export const CollapsedItemActions: React.FunctionComponent = ({ isOpen={isPopoverOpen} closePopover={() => setIsPopoverOpen(false)} ownFocus - panelPaddingSize="s" + panelPaddingSize="none" data-test-subj="collapsedItemActions" > - - + + { if (item.enabled) { @@ -86,13 +88,20 @@ export const CollapsedItemActions: React.FunctionComponent = ({ }} label={ } /> + + + + - + = ({ /> } /> + + + + = ({ } return ( - + {!allAlertsMuted && ( = ({ > )} @@ -171,7 +171,7 @@ export const AlertQuickEditButtons: React.FunctionComponent = ({ > )} @@ -184,7 +184,7 @@ export const AlertQuickEditButtons: React.FunctionComponent = ({ > )} @@ -197,7 +197,7 @@ export const AlertQuickEditButtons: React.FunctionComponent = ({ > )} @@ -212,7 +212,7 @@ export const AlertQuickEditButtons: React.FunctionComponent = ({ > From 9b464e3688e65f521f3496cf21ea2033e40653d0 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 15 Apr 2020 17:29:09 -0700 Subject: [PATCH 09/15] improve collapsed actions menu --- .../components/collapsed_item_actions.scss | 25 ++++++++++----- .../components/collapsed_item_actions.tsx | 32 ++++++++++++------- 2 files changed, 38 insertions(+), 19 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss index 68d8dff2c8b22..774d1566f2a63 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss @@ -1,14 +1,23 @@ -.actCollapsedItemActions__delete { - color: $euiColorDanger; - - .euiContextMenu__itemLayout { - @include euiFontSizeS; - align-items: baseline; +.actCollapsedItemActions { + .euiContextMenuItem:hover { + text-decoration: none; } } .actCollapsedItemActions__item { - .euiText { - text-decoration: none; + padding: $euiSizeM; +} + +.actCollapsedItemActions__delete { + display: flex; + + .actCollapsedItemActions__deleteIcon { + width: $euiSwitchWidthCompressed; + text-align: center; + } + + .actCollapsedItemActions__deleteLabel { + padding-left: $euiSizeS; + padding-top: $euiSizeXS * .5; } } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx index 5cb9bd1ff7858..8dca9c99f4a54 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx @@ -16,6 +16,7 @@ import { EuiHorizontalRule, EuiText, EuiSpacer, + EuiIcon, } from '@elastic/eui'; import { AlertTableItem } from '../../../../types'; @@ -70,8 +71,8 @@ export const CollapsedItemActions: React.FunctionComponent = ({ panelPaddingSize="none" data-test-subj="collapsedItemActions" > - - + +
= ({ defaultMessage="When disabled, the alert is not checked" /> - - +
+
= ({ defaultMessage="When muted, the alert is checked, but no action is performed" /> - +
setAlertsToDelete([item.id])} - className="actCollapsedItemActions__delete" > - +
+
+ +
+
+ +

+ +

+ +
+
From c37799fb92cb170e1e8a02b2d5dbf2261f37009d Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 16 Apr 2020 09:40:15 -0700 Subject: [PATCH 10/15] added periods to help texts --- .../alerts_list/components/collapsed_item_actions.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx index 8dca9c99f4a54..a272dd1e75fcb 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx @@ -98,7 +98,7 @@ export const CollapsedItemActions: React.FunctionComponent = ({
@@ -128,7 +128,7 @@ export const CollapsedItemActions: React.FunctionComponent = ({
From 78e7f9df44dfc140b798e27f634da1b2948e5329 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 16 Apr 2020 12:59:57 -0700 Subject: [PATCH 11/15] going back to EuiButtonEmpty to be able to use isLoading --- .../components/alert_quick_edit_buttons.scss | 4 - .../components/alert_quick_edit_buttons.tsx | 127 ++++++++++-------- 2 files changed, 68 insertions(+), 63 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.scss index 6535a044e0277..72de1d58488ed 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.scss +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.scss @@ -1,7 +1,3 @@ .actBulkActionPopover__deleteAll { color: $euiColorDanger; - - .euiContextMenu__itemLayout { - align-items: baseline; - } } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx index 361452acade67..149ebb9f931f5 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx @@ -5,9 +5,9 @@ */ import { i18n } from '@kbn/i18n'; -import React, { useState } from 'react'; +import React, { useState, Fragment } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui'; +import { EuiButtonEmpty, EuiFlexItem, EuiFlexGroup } from '@elastic/eui'; import { Alert } from '../../../../types'; import { useAppDependencies } from '../../../app_context'; @@ -148,74 +148,83 @@ export const AlertQuickEditButtons: React.FunctionComponent = ({ } return ( - + {!allAlertsMuted && ( - - - + + + + + )} {allAlertsMuted && ( - - - + + + + + )} {allAlertsDisabled && ( - - - + + + + + )} {!allAlertsDisabled && ( - + + + + + )} + + - - )} - - - - - + + + ); }; From bd9976ec32d54dd7b87115a1edf0e2718928f9d5 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 16 Apr 2020 14:44:24 -0700 Subject: [PATCH 12/15] fix prop --- .../sections/common/components/alert_quick_edit_buttons.scss | 4 +++- .../sections/common/components/alert_quick_edit_buttons.tsx | 5 +++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.scss index 72de1d58488ed..a5b4cc258c1b5 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.scss +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.scss @@ -1,3 +1,5 @@ .actBulkActionPopover__deleteAll { - color: $euiColorDanger; + .euiButtonEmpty__text { + padding-top: $euiSizeXS; + } } diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx index 149ebb9f931f5..11e4daff857e0 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx @@ -148,7 +148,7 @@ export const AlertQuickEditButtons: React.FunctionComponent = ({ } return ( - + {!allAlertsMuted && ( = ({ Date: Thu, 16 Apr 2020 15:41:41 -0700 Subject: [PATCH 13/15] remove Fragment --- .../sections/common/components/alert_quick_edit_buttons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx index 11e4daff857e0..26bc8b869a06b 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx @@ -5,7 +5,7 @@ */ import { i18n } from '@kbn/i18n'; -import React, { useState, Fragment } from 'react'; +import React, { useState } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiButtonEmpty, EuiFlexItem, EuiFlexGroup } from '@elastic/eui'; From fa6238553f6789ee808261e5cc7def6bde52c940 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 16 Apr 2020 19:22:24 -0700 Subject: [PATCH 14/15] remove translations we're not using --- x-pack/plugins/translations/translations/ja-JP.json | 3 +-- x-pack/plugins/translations/translations/zh-CN.json | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 40f7df43bb781..83e15d10b2df9 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -16044,7 +16044,6 @@ "xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.muteAllTitle": "ミュート", "xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.unmuteAllTitle": "ミュート解除", "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.deleteTitle": "削除", - "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.enableTitle": "有効にする", "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.muteTitle": "ミュート", "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.popoverButtonTitle": "アクション", "xpack.triggersActionsUI.components.emptyPrompt.emptyButton": "アラートの作成", @@ -16758,4 +16757,4 @@ "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。", "xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。" } -} +} \ No newline at end of file diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index eced9ddf2350a..2b5236806afc7 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -16049,7 +16049,6 @@ "xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.muteAllTitle": "静音", "xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.unmuteAllTitle": "取消静音", "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.deleteTitle": "删除", - "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.enableTitle": "启用", "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.muteTitle": "静音", "xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.popoverButtonTitle": "操作", "xpack.triggersActionsUI.components.emptyPrompt.emptyButton": "创建告警", @@ -16763,4 +16762,4 @@ "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "此字段必填。", "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。" } -} +} \ No newline at end of file From 4275ae9499c17b22e9b5562f6043c6a6b707bb64 Mon Sep 17 00:00:00 2001 From: Mike Cote Date: Fri, 17 Apr 2020 13:28:25 -0400 Subject: [PATCH 15/15] Fix functional tests --- .../components/collapsed_item_actions.tsx | 2 +- .../apps/triggers_actions_ui/alerts.ts | 30 +++++++++---------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx index a272dd1e75fcb..2b746e5dea457 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx @@ -78,7 +78,7 @@ export const CollapsedItemActions: React.FunctionComponent = ({ disabled={!canSave} compressed checked={!item.enabled} - data-test-subj="enableSwitch" + data-test-subj="disableSwitch" onChange={async () => { if (item.enabled) { await disableAlert(item); diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts index bce8e08cd16d3..bbf8881f0c62a 100644 --- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts +++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts.ts @@ -343,15 +343,15 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { await testSubjects.click('collapsedItemActions'); - await pageObjects.triggersActionsUI.toggleSwitch('enableSwitch'); + await pageObjects.triggersActionsUI.toggleSwitch('disableSwitch'); await pageObjects.triggersActionsUI.searchAlerts(createdAlert.name); await testSubjects.click('collapsedItemActions'); - const enableSwitchAfterDisable = await testSubjects.find('enableSwitch'); - const isChecked = await enableSwitchAfterDisable.getAttribute('aria-checked'); - expect(isChecked).to.eql('false'); + const disableSwitchAfterDisable = await testSubjects.find('disableSwitch'); + const isChecked = await disableSwitchAfterDisable.getAttribute('aria-checked'); + expect(isChecked).to.eql('true'); }); it('should re-enable single alert', async () => { @@ -361,21 +361,21 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { await testSubjects.click('collapsedItemActions'); - await pageObjects.triggersActionsUI.toggleSwitch('enableSwitch'); + await pageObjects.triggersActionsUI.toggleSwitch('disableSwitch'); await pageObjects.triggersActionsUI.searchAlerts(createdAlert.name); await testSubjects.click('collapsedItemActions'); - await pageObjects.triggersActionsUI.toggleSwitch('enableSwitch'); + await pageObjects.triggersActionsUI.toggleSwitch('disableSwitch'); await pageObjects.triggersActionsUI.searchAlerts(createdAlert.name); await testSubjects.click('collapsedItemActions'); - const enableSwitchAfterReEnable = await testSubjects.find('enableSwitch'); - const isChecked = await enableSwitchAfterReEnable.getAttribute('aria-checked'); - expect(isChecked).to.eql('true'); + const disableSwitchAfterReEnable = await testSubjects.find('disableSwitch'); + const isChecked = await disableSwitchAfterReEnable.getAttribute('aria-checked'); + expect(isChecked).to.eql('false'); }); it('should mute single alert', async () => { @@ -507,9 +507,9 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { await testSubjects.click('collapsedItemActions'); - const enableSwitch = await testSubjects.find('enableSwitch'); - const isChecked = await enableSwitch.getAttribute('aria-checked'); - expect(isChecked).to.eql('false'); + const disableSwitch = await testSubjects.find('disableSwitch'); + const isChecked = await disableSwitch.getAttribute('aria-checked'); + expect(isChecked).to.eql('true'); }); it('should enable all selection', async () => { @@ -532,9 +532,9 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { await testSubjects.click('collapsedItemActions'); - const enableSwitch = await testSubjects.find('enableSwitch'); - const isChecked = await enableSwitch.getAttribute('aria-checked'); - expect(isChecked).to.eql('true'); + const disableSwitch = await testSubjects.find('disableSwitch'); + const isChecked = await disableSwitch.getAttribute('aria-checked'); + expect(isChecked).to.eql('false'); }); it('should delete all selection', async () => {