[Alerting UI] Display a banner to users when some alerts have failures, added alert statuses column and filters

x-pack/plugins/triggers_actions_ui/public/application/lib/alert_api.ts

@@ -70,12 +70,14 @@ export async function loadAlerts({
   searchText,
   typesFilter,
   actionTypesFilter,
+  alertStatusesFilter,
 }: {
   http: HttpSetup;
   page: { index: number; size: number };
   searchText?: string;
   typesFilter?: string[];
   actionTypesFilter?: string[];
+  alertStatusesFilter?: string[];
 }): Promise<{
   page: number;
   perPage: number;
@@ -97,6 +99,9 @@ export async function loadAlerts({
       ].join('')
     );
   }
+  if (alertStatusesFilter && alertStatusesFilter.length) {
+    filters.push(`alert.attributes.executionStatus.status:(${alertStatusesFilter.join(' or ')})`);
+  }
   return await http.get(`${BASE_ALERT_API_PATH}/_find`, {
     query: {
       page: page.index + 1,

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx

@@ -15,6 +15,7 @@ import {
   EuiSwitch,
   EuiBetaBadge,
   EuiButtonEmpty,
+  EuiText,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ViewInApp } from './view_in_app';
@@ -142,6 +143,38 @@ describe('alert_details', () => {
     ).toBeTruthy();
   });
 
+  it('renders the alert error banner with error message, when alert status is an error', () => {
+    const alert = mockAlert({
+      executionStatus: {
+        status: 'error',
+        lastExecutionDate: new Date('2020-08-20T19:23:38Z'),
+        error: {
+          reason: 'unknown',
+          message: 'test',
+        },
+      },
+    });
+    const alertType = {
+      id: '.noop',
+      name: 'No Op',
+      actionGroups: [{ id: 'default', name: 'Default' }],
+      actionVariables: { context: [], state: [], params: [] },
+      defaultActionGroupId: 'default',
+      producer: ALERTS_FEATURE_ID,
+      authorizedConsumers,
+    };
+
+    expect(
+      shallow(
+        <AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
+      ).containsMatchingElement(
+        <EuiText size="s" color="danger" data-test-subj="alertErrorMessageText">
+          {'test'}
+        </EuiText>
+      )
+    ).toBeTruthy();
+  });
+
   describe('actions', () => {
     it('renders an alert action', () => {
       const alert = mockAlert({

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx

@@ -24,9 +24,12 @@ import {
   EuiSpacer,
   EuiBetaBadge,
   EuiButtonEmpty,
+  EuiButton,
+  EuiTextColor,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { AlertExecutionStatusValues } from '../../../../../../alerts/common';
 import { useAppDependencies } from '../../../app_context';
 import { hasAllPrivilege, hasExecuteActionsCapability } from '../../../lib/capabilities';
 import { getAlertingSectionBreadcrumb, getAlertDetailsBreadcrumb } from '../../../lib/breadcrumb';
@@ -105,6 +108,7 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
   const [isEnabled, setIsEnabled] = useState<boolean>(alert.enabled);
   const [isMuted, setIsMuted] = useState<boolean>(alert.muteAll);
   const [editFlyoutVisible, setEditFlyoutVisibility] = useState<boolean>(false);
+  const [dissmissAlertErrors, setDissmissAlertErrors] = useState<boolean>(false);
 
   const setAlert = async () => {
     history.push(routeToAlertDetails.replace(`:alertId`, alert.id));
@@ -275,6 +279,49 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
                 </EuiFlexGroup>
               </EuiFlexItem>
             </EuiFlexGroup>
+            {!dissmissAlertErrors &&
+            alert.executionStatus.status === AlertExecutionStatusValues[2] ? (
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiCallOut
+                    color="danger"
+                    data-test-subj="alertErrorBanner"
+                    size="s"
+                    title={
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.alertDetails.alertInstances.attentionBannerTitle"
+                        defaultMessage="This alert has an error caused by the {errorReason} reason."
+                        values={{
+                          errorReason: alert.executionStatus.error?.reason,
+                        }}
+                      />
+                    }
+                    iconType="alert"
+                  >
+                    <EuiTitle size="m">
+                      <h3>
+                        <EuiTextColor color="danger">
+                          <FormattedMessage
+                            id="xpack.triggersActionsUI.sections.alertDetails.alertInstances.alertErrorMessageTitle"
+                            defaultMessage="Error message:"
+                          />
+                        </EuiTextColor>
+                      </h3>
+                    </EuiTitle>
+                    <EuiText size="s" color="danger" data-test-subj="alertErrorMessageText">
+                      {alert.executionStatus.error?.message}
+                    </EuiText>
+                    <EuiSpacer size="s" />
+                    <EuiButton color="danger" onClick={() => setDissmissAlertErrors(true)}>
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.alertDetails.alertInstances.dismissButtonTitle"
+                        defaultMessage="Dismiss"
+                      />
+                    </EuiButton>
+                  </EuiCallOut>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            ) : null}
             <EuiFlexGroup>
               <EuiFlexItem>
                 {alert.enabled ? (

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alert_status_filter.tsx

@@ -0,0 +1,95 @@
+/*
+ * 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, { useEffect, useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiFilterGroup,
+  EuiPopover,
+  EuiFilterButton,
+  EuiFilterSelectItem,
+  EuiHealth,
+} from '@elastic/eui';
+import { AlertExecutionStatusValues } from '../../../../../../alerts/common';
+
+interface AlertStatusFilterProps {
+  onChange?: (selectedAlertStatusesIds: string[]) => void;
+}
+
+export const AlertStatusFilter: React.FunctionComponent<AlertStatusFilterProps> = ({
+  onChange,
+}: AlertStatusFilterProps) => {
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(selectedValues);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedValues]);
+
+  return (
+    <EuiFilterGroup>
+      <EuiPopover
+        isOpen={isPopoverOpen}
+        closePopover={() => setIsPopoverOpen(false)}
+        button={
+          <EuiFilterButton
+            iconType="arrowDown"
+            hasActiveFilters={selectedValues.length > 0}
+            numActiveFilters={selectedValues.length}
+            numFilters={selectedValues.length}
+            onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+          >
+            <FormattedMessage
+              id="xpack.triggersActionsUI.sections.alertsList.alertStatusFilterLabel"
+              defaultMessage="Status"
+            />
+          </EuiFilterButton>
+        }
+      >
+        <div className="euiFilterSelect__items">
+          {[...AlertExecutionStatusValues].sort().map((item: string) => {
+            const healthColor = getHealthColor(item);
+            return (
+              <EuiFilterSelectItem
+                key={item}
+                style={{ textTransform: 'capitalize' }}
+                onClick={() => {
+                  const isPreviouslyChecked = selectedValues.includes(item);
+                  if (isPreviouslyChecked) {
+                    setSelectedValues(selectedValues.filter((val) => val !== item));
+                  } else {
+                    setSelectedValues(selectedValues.concat(item));
+                  }
+                }}
+                checked={selectedValues.includes(item) ? 'on' : undefined}
+              >
+                <EuiHealth color={healthColor}>{item}</EuiHealth>
+              </EuiFilterSelectItem>
+            );
+          })}
+        </div>
+      </EuiPopover>
+    </EuiFilterGroup>
+  );
+};
+
+export function getHealthColor(status: string) {
+  switch (status) {
+    case 'active':
+      return 'primary';
+    case 'error':
+      return 'danger';
+    case 'ok':
+      return 'subdued';
+    case 'pending':
+      return 'success';
+    default:
+      return 'warning';
+  }
+}

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx

@@ -168,6 +168,11 @@ describe('alerts_list component with items', () => {
           throttle: '1m',
           muteAll: false,
           mutedInstanceIds: [],
+          executionStatus: {
+            status: 'active',
+            lastExecutionDate: new Date('2020-08-20T19:23:38Z'),
+            error: null,
+          },
         },
         {
           id: '2',
@@ -185,6 +190,14 @@ describe('alerts_list component with items', () => {
           throttle: '1m',
           muteAll: false,
           mutedInstanceIds: [],
+          executionStatus: {
+            status: 'error',
+            lastExecutionDate: new Date('2020-08-20T19:23:38Z'),
+            error: {
+              reason: 'unknown',
+              message: 'test',
+            },
+          },
         },
       ],
     });
@@ -246,6 +259,7 @@ describe('alerts_list component with items', () => {
     await setup();
     expect(wrapper.find('EuiBasicTable')).toHaveLength(1);
     expect(wrapper.find('EuiTableRow')).toHaveLength(2);
+    expect(wrapper.find('[data-test-subj="alertsTableCell-status"]')).toHaveLength(4);
   });
 });
 
@@ -351,6 +365,11 @@ describe('alerts_list with show only capability', () => {
           throttle: '1m',
           muteAll: false,
           mutedInstanceIds: [],
+          executionStatus: {
+            status: 'active',
+            lastExecutionDate: new Date('2020-08-20T19:23:38Z'),
+            error: null,
+          },
         },
         {
           id: '2',
@@ -368,6 +387,11 @@ describe('alerts_list with show only capability', () => {
           throttle: '1m',
           muteAll: false,
           mutedInstanceIds: [],
+          executionStatus: {
+            status: 'active',
+            lastExecutionDate: new Date('2020-08-20T19:23:38Z'),
+            error: null,
+          },
         },
       ],
     });