Skip to content

Commit

Permalink
[Alerting UI]Changed rules table to support visual indication for dis…
Browse files Browse the repository at this point in the history
…abled and muted alerts (#104190) (#106282)

* [Alerting UI]Changed rules table to support visual indication for disabled or muted alerts

* changed columns styles due to the mockup

* added tests

* fixed quotas

* fixed popover

* fixed due to the lates UI updates

* fixed errors

* moved enabled to a separate component

* fixed tests

* fixed due to comments

* Update x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.scss

Co-authored-by: Mike Côté <mikecote@users.noreply.github.com>

* removed test code

* fixed tests

* fixed due to comments

* fixed due to comments

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Mike Côté <mikecote@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Mike Côté <mikecote@users.noreply.github.com>
  • Loading branch information
3 people authored Jul 20, 2021
1 parent a52c94f commit cdebc80
Show file tree
Hide file tree
Showing 15 changed files with 410 additions and 255 deletions.
6 changes: 0 additions & 6 deletions x-pack/plugins/translations/translations/ja-JP.json
Original file line number Diff line number Diff line change
Expand Up @@ -22827,7 +22827,6 @@
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.status.active": "アクティブ",
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.status.inactive": "OK",
"xpack.triggersActionsUI.sections.alertDetails.alerts.disabledRuleTitle": "無効なルール",
"xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.disableTitle": "無効にする",
"xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.muteTitle": "ミュート",
"xpack.triggersActionsUI.sections.alertDetails.dismissButtonTitle": "閉じる",
"xpack.triggersActionsUI.sections.alertDetails.editAlertButtonLabel": "編集",
Expand Down Expand Up @@ -22881,10 +22880,8 @@
"xpack.triggersActionsUI.sections.alertsList.alertErrorReasonReading": "ルールの読み取り中にエラーが発生しました。",
"xpack.triggersActionsUI.sections.alertsList.alertErrorReasonRunning": "ルールの実行中にエラーが発生しました。",
"xpack.triggersActionsUI.sections.alertsList.alertErrorReasonUnknown": "不明な理由でエラーが発生しました。",
"xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsCount": "アクション",
"xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsTex": "アクション",
"xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.alertTypeTitle": "型",
"xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.intervalTitle": "次の間隔で実行",
"xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.nameTitle": "名前",
"xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.statusTitle": "ステータス",
"xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.tagsText": "タグ",
Expand All @@ -22906,10 +22903,7 @@
"xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.failedToUnmuteRulesMessage": "ルールをミュート解除できませんでした",
"xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.muteAllTitle": "ミュート",
"xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.unmuteAllTitle": "ミュート解除",
"xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.deleteTitle": "削除",
"xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.disableHelpText": "無効にすると、ルールは確認されません。",
"xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.disableTitle": "無効にする",
"xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.muteHelpText": "ミュートにすると、ルールは確認されますが、アクションは実行されません。",
"xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.muteTitle": "ミュート",
"xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.popoverButtonTitle": "アクション",
"xpack.triggersActionsUI.sections.alertsList.dismissBunnerButtonLabel": "閉じる",
Expand Down
6 changes: 0 additions & 6 deletions x-pack/plugins/translations/translations/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -23180,7 +23180,6 @@
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.status.active": "活动",
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.status.inactive": "确定",
"xpack.triggersActionsUI.sections.alertDetails.alerts.disabledRuleTitle": "已禁用规则",
"xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.disableTitle": "禁用",
"xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.muteTitle": "静音",
"xpack.triggersActionsUI.sections.alertDetails.dismissButtonTitle": "关闭",
"xpack.triggersActionsUI.sections.alertDetails.editAlertButtonLabel": "编辑",
Expand Down Expand Up @@ -23234,10 +23233,8 @@
"xpack.triggersActionsUI.sections.alertsList.alertErrorReasonReading": "读取规则时发生错误。",
"xpack.triggersActionsUI.sections.alertsList.alertErrorReasonRunning": "运行规则时发生错误。",
"xpack.triggersActionsUI.sections.alertsList.alertErrorReasonUnknown": "由于未知原因发生错误。",
"xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsCount": "操作",
"xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsTex": "操作",
"xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.alertTypeTitle": "类型",
"xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.intervalTitle": "运行间隔",
"xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.nameTitle": "名称",
"xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.statusTitle": "状态",
"xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.tagsText": "标签",
Expand All @@ -23260,10 +23257,7 @@
"xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.failedToUnmuteRulesMessage": "无法取消静音规则",
"xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.muteAllTitle": "静音",
"xpack.triggersActionsUI.sections.alertsList.bulkActionPopover.unmuteAllTitle": "取消静音",
"xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.deleteTitle": "删除",
"xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.disableHelpText": "禁用后,将不检查规则。",
"xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.disableTitle": "禁用",
"xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.muteHelpText": "静音后,将检查规则,但不执行操作。",
"xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.muteTitle": "静音",
"xpack.triggersActionsUI.sections.alertsList.collapsedItemActons.popoverButtonTitle": "操作",
"xpack.triggersActionsUI.sections.alertsList.dismissBunnerButtonLabel": "关闭",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -359,16 +359,16 @@ describe('disable button', () => {
<AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
)
.find(EuiSwitch)
.find('[name="disable"]')
.find('[name="enable"]')
.first();

expect(enableButton.props()).toMatchObject({
checked: false,
checked: true,
disabled: false,
});
});

it('should render a disable button when alert is disabled', () => {
it('should render a enable button when alert is disabled', () => {
const alert = mockAlert({
enabled: false,
});
Expand All @@ -390,11 +390,11 @@ describe('disable button', () => {
<AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
)
.find(EuiSwitch)
.find('[name="disable"]')
.find('[name="enable"]')
.first();

expect(enableButton.props()).toMatchObject({
checked: true,
checked: false,
disabled: false,
});
});
Expand Down Expand Up @@ -428,7 +428,7 @@ describe('disable button', () => {
/>
)
.find(EuiSwitch)
.find('[name="disable"]')
.find('[name="enable"]')
.first();

enableButton.simulate('click');
Expand Down Expand Up @@ -468,7 +468,7 @@ describe('disable button', () => {
/>
)
.find(EuiSwitch)
.find('[name="disable"]')
.find('[name="enable"]')
.first();

enableButton.simulate('click');
Expand Down Expand Up @@ -531,14 +531,14 @@ describe('disable button', () => {

// Disable the alert
await act(async () => {
wrapper.find('[data-test-subj="disableSwitch"] .euiSwitch__button').first().simulate('click');
wrapper.find('[data-test-subj="enableSwitch"] .euiSwitch__button').first().simulate('click');
await nextTick();
});
expect(disableAlert).toHaveBeenCalled();

// Enable the alert
await act(async () => {
wrapper.find('[data-test-subj="disableSwitch"] .euiSwitch__button').first().simulate('click');
wrapper.find('[data-test-subj="enableSwitch"] .euiSwitch__button').first().simulate('click');
await nextTick();
});
expect(enableAlert).toHaveBeenCalled();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -219,10 +219,10 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
<EuiFlexGroup justifyContent="flexEnd" wrap responsive={false} gutterSize="m">
<EuiFlexItem grow={false}>
<EuiSwitch
name="disable"
name="enable"
disabled={!canSaveAlert || !alertType.enabledInLicense}
checked={!isEnabled}
data-test-subj="disableSwitch"
checked={isEnabled}
data-test-subj="enableSwitch"
onChange={async () => {
if (isEnabled) {
setIsEnabled(false);
Expand All @@ -237,8 +237,8 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
}}
label={
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.disableTitle"
defaultMessage="Disable"
id="xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.enableTitle"
defaultMessage="Enable"
/>
}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ export const AlertEdit = ({
aria-labelledby="flyoutAlertEditTitle"
size="m"
maxWidth={620}
ownFocus={false}
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s" data-test-subj="editAlertFlyoutTitle">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,13 +95,13 @@ export const AlertStatusFilter: React.FunctionComponent<AlertStatusFilterProps>
export function getHealthColor(status: AlertExecutionStatuses) {
switch (status) {
case 'active':
return 'primary';
return 'success';
case 'error':
return 'danger';
case 'ok':
return 'subdued';
case 'pending':
return 'success';
return 'accent';
default:
return 'warning';
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,29 @@
color: $euiColorDarkShade;
}
}

.euiTableRow {
&:hover,
&:focus-within,
&[class*='-isActive'] {
.alertSidebarItem__action {
opacity: 1;
}
}
}

/**
* 1. Only visually hide the action, so that it's still accessible to screen readers.
* 2. When tabbed to, this element needs to be visible for keyboard accessibility.
*/
.alertSidebarItem__action {
opacity: 0; /* 1 */

&.alertSidebarItem__mobile {
opacity: 1;
}

&:focus {
opacity: 1; /* 2 */
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,7 @@ describe('alerts_list component with items', () => {
it('sorts alerts when clicking the name column', async () => {
await setup();
wrapper
.find('[data-test-subj="tableHeaderCell_name_0"] .euiTableHeaderButton')
.find('[data-test-subj="tableHeaderCell_name_1"] .euiTableHeaderButton')
.first()
.simulate('click');

Expand All @@ -386,6 +386,28 @@ describe('alerts_list component with items', () => {
})
);
});

it('sorts alerts when clicking the enabled column', async () => {
await setup();
wrapper
.find('[data-test-subj="tableHeaderCell_enabled_0"] .euiTableHeaderButton')
.first()
.simulate('click');

await act(async () => {
await nextTick();
wrapper.update();
});

expect(loadAlerts).toHaveBeenLastCalledWith(
expect.objectContaining({
sort: {
field: 'enabled',
direction: 'asc',
},
})
);
});
});

describe('alerts_list component empty with show only capability', () => {
Expand Down
Loading

0 comments on commit cdebc80

Please sign in to comment.