[Alerting UI]Changed rules table to support visual indication for dis…

…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>
elastic · Jul 20, 2021 · cdebc80 · cdebc80
1 parent a52c94f
commit cdebc80
Show file tree

Hide file tree

Showing 15 changed files with 410 additions and 255 deletions.
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -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": "編集",
@@ -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": "タグ",
@@ -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": "閉じる",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -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": "编辑",
@@ -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": "标签",
@@ -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": "关闭",

diff --git a/...rs_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx b/...rs_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx
@@ -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,
     });
@@ -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,
     });
   });
@@ -428,7 +428,7 @@ describe('disable button', () => {
       />
     )
       .find(EuiSwitch)
-      .find('[name="disable"]')
+      .find('[name="enable"]')
       .first();
 
     enableButton.simulate('click');
@@ -468,7 +468,7 @@ describe('disable button', () => {
       />
     )
       .find(EuiSwitch)
-      .find('[name="disable"]')
+      .find('[name="enable"]')
       .first();
 
     enableButton.simulate('click');
@@ -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();

diff --git a/...riggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx b/...riggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
@@ -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);
@@ -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"
                     />
                   }
                 />

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx
@@ -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">

diff --git a/...ers_actions_ui/public/application/sections/alerts_list/components/alert_status_filter.tsx b/...ers_actions_ui/public/application/sections/alerts_list/components/alert_status_filter.tsx
@@ -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';
   }

diff --git a/...s/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.scss b/...s/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.scss
@@ -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 */
+  }
+}
diff --git a/...iggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx b/...iggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx
@@ -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');
 
@@ -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', () => {