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

…abled or muted alerts
elastic · Jul 1, 2021 · 6eb9ff3 · 6eb9ff3
1 parent bc99bb0
commit 6eb9ff3
Showing 1 changed file with 72 additions and 10 deletions.
diff --git a/...ns/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx b/...ns/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
@@ -8,6 +8,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import { i18n } from '@kbn/i18n';
+import { asyncScheduler } from 'rxjs';
 import { capitalize, sortBy } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useEffect, useState } from 'react';
@@ -28,6 +29,8 @@ import {
   EuiText,
   EuiToolTip,
   EuiTableSortingType,
+  EuiSwitch,
+  EuiIcon,
 } from '@elastic/eui';
 import { useHistory } from 'react-router-dom';
 
@@ -44,6 +47,8 @@ import {
   loadAlerts,
   loadAlertAggregations,
   loadAlertTypes,
+  disableAlert,
+  enableAlert,
   deleteAlerts,
 } from '../../../lib/alert_api';
 import { loadActionTypes } from '../../../lib/action_connector_api';
@@ -308,7 +313,44 @@ export const AlertsList: React.FunctionComponent = () => {
     );
   };
 
+  const disabledLabel = i18n.translate(
+    'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.disabledLabel',
+    { defaultMessage: 'Disabled' }
+  );
+  const enabledLabel = i18n.translate(
+    'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.enabledLabel',
+    { defaultMessage: 'Active' }
+  );
+
   const alertsTableColumns = [
+    {
+      name: '',
+      width: '100px',
+      render(item: AlertTableItem) {
+        return (
+          <EuiSwitch
+            name="disable"
+            disabled={!item.isEditable || !item.enabledInLicense}
+            compressed
+            checked={item.enabled}
+            data-test-subj="disableSwitch"
+            onChange={async () => {
+              const enabled = !item.enabled;
+              asyncScheduler.schedule(async () => {
+                if (enabled) {
+                  await disableAlert({ http, id: item.id });
+                } else {
+                  await enableAlert({ http, id: item.id });
+                }
+                loadAlertsData();
+              }, 10);
+              // setIsDisabled(!item.enabled);
+            }}
+            label={!item.enabled ? disabledLabel : enabledLabel}
+          />
+        );
+      },
+    },
     {
       field: 'name',
       name: i18n.translate(
@@ -363,6 +405,16 @@ export const AlertsList: React.FunctionComponent = () => {
         return renderAlertExecutionStatus(item.executionStatus, item);
       },
     },
+    {
+      field: 'alertType',
+      name: i18n.translate(
+        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.alertTypeTitle',
+        { defaultMessage: 'Type' }
+      ),
+      sortable: false,
+      truncateText: true,
+      'data-test-subj': 'alertsTableCell-alertType',
+    },
     {
       field: 'tagsText',
       name: i18n.translate(
@@ -372,6 +424,26 @@ export const AlertsList: React.FunctionComponent = () => {
       sortable: false,
       'data-test-subj': 'alertsTableCell-tagsText',
     },
+    {
+      field: 'schedule',
+      name: i18n.translate(
+        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.scheduleTitle',
+        { defaultMessage: 'Schedule' }
+      ),
+      render: (count: number, item: AlertTableItem) => {
+        return (
+          <>
+            <EuiIcon type="clock" />
+            <FormattedMessage
+              id="xpack.triggersActionsUI.sections.alertsList.fixLicenseLink"
+              defaultMessage="10m"
+            />
+          </>
+        );
+      },
+      sortable: false,
+      'data-test-subj': 'alertsTableCell-actionsCount',
+    },
     {
       field: 'actionsCount',
       name: i18n.translate(
@@ -388,16 +460,6 @@ export const AlertsList: React.FunctionComponent = () => {
       sortable: false,
       'data-test-subj': 'alertsTableCell-actionsCount',
     },
-    {
-      field: 'alertType',
-      name: i18n.translate(
-        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.alertTypeTitle',
-        { defaultMessage: 'Type' }
-      ),
-      sortable: false,
-      truncateText: true,
-      'data-test-subj': 'alertsTableCell-alertType',
-    },
     {
       field: 'schedule.interval',
       name: i18n.translate(