Fixed due to comments

Author: YulNaumenko

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

@@ -113,6 +113,14 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
     history.push(routeToAlertDetails.replace(`:alertId`, alert.id));
   };
 
+  const getAlertStatusErrorReason = () => {
+    if (alert.executionStatus.error) {
+      return alert.executionStatus.error.reason;
+    } else {
+      return 'unknown';
+    }
+  };
+
   return (
     <EuiPage>
       <EuiPageBody>
@@ -290,7 +298,7 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
                         id="xpack.triggersActionsUI.sections.alertDetails.attentionBannerTitle"
                         defaultMessage="This alert has an error caused by the {errorReason} reason."
                         values={{
-                          errorReason: alert.executionStatus.error?.reason,
+                          errorReason: getAlertStatusErrorReason(),
                         }}
                       />
                     }

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

@@ -150,7 +150,7 @@ describe('alerts_list component with items', () => {
     loadAlerts.mockResolvedValue({
       page: 1,
       perPage: 10000,
-      total: 2,
+      total: 4,
       data: [
         {
           id: '1',
@@ -176,7 +176,51 @@ describe('alerts_list component with items', () => {
         },
         {
           id: '2',
-          name: 'test alert 2',
+          name: 'test alert ok',
+          tags: ['tag1'],
+          enabled: true,
+          alertTypeId: 'test_alert_type',
+          schedule: { interval: '5d' },
+          actions: [],
+          params: { name: 'test alert type name' },
+          scheduledTaskId: null,
+          createdBy: null,
+          updatedBy: null,
+          apiKeyOwner: null,
+          throttle: '1m',
+          muteAll: false,
+          mutedInstanceIds: [],
+          executionStatus: {
+            status: 'ok',
+            lastExecutionDate: new Date('2020-08-20T19:23:38Z'),
+            error: null,
+          },
+        },
+        {
+          id: '3',
+          name: 'test alert pending',
+          tags: ['tag1'],
+          enabled: true,
+          alertTypeId: 'test_alert_type',
+          schedule: { interval: '5d' },
+          actions: [],
+          params: { name: 'test alert type name' },
+          scheduledTaskId: null,
+          createdBy: null,
+          updatedBy: null,
+          apiKeyOwner: null,
+          throttle: '1m',
+          muteAll: false,
+          mutedInstanceIds: [],
+          executionStatus: {
+            status: 'pending',
+            lastExecutionDate: new Date('2020-08-20T19:23:38Z'),
+            error: null,
+          },
+        },
+        {
+          id: '4',
+          name: 'test alert error',
           tags: ['tag1'],
           enabled: true,
           alertTypeId: 'test_alert_type',
@@ -258,8 +302,13 @@ describe('alerts_list component with items', () => {
   it('renders table of alerts', async () => {
     await setup();
     expect(wrapper.find('EuiBasicTable')).toHaveLength(1);
-    expect(wrapper.find('EuiTableRow')).toHaveLength(2);
-    expect(wrapper.find('[data-test-subj="alertsTableCell-status"]')).toHaveLength(4);
+    expect(wrapper.find('EuiTableRow')).toHaveLength(4);
+    expect(wrapper.find('[data-test-subj="alertsTableCell-status"]').length).toBeGreaterThan(0);
+    expect(wrapper.find('[data-test-subj="alertStatus-active"]').length).toBeGreaterThan(0);
+    expect(wrapper.find('[data-test-subj="alertStatus-error"]').length).toBeGreaterThan(0);
+    expect(wrapper.find('[data-test-subj="alertStatus-ok"]').length).toBeGreaterThan(0);
+    expect(wrapper.find('[data-test-subj="alertStatus-pending"]').length).toBeGreaterThan(0);
+    expect(wrapper.find('[data-test-subj="alertStatus-unknown"]').length).toBe(0);
   });
 });
 

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

@@ -238,7 +238,11 @@ export const AlertsList: React.FunctionComponent = () => {
       'data-test-subj': 'alertsTableCell-status',
       render: (executionStatus: AlertExecutionStatus) => {
         const healthColor = getHealthColor(executionStatus.status);
-        return <EuiHealth color={healthColor}>{executionStatus.status}</EuiHealth>;
+        return (
+          <EuiHealth data-test-subj={`alertStatus-${executionStatus.status}`} color={healthColor}>
+            {executionStatus.status}
+          </EuiHealth>
+        );
       },
     },
     {
@@ -482,6 +486,7 @@ export const AlertsList: React.FunctionComponent = () => {
             <FormattedMessage
               id="xpack.triggersActionsUI.sections.alertsList.totalStausesActiveDescription"
               defaultMessage="Active: {totalStausesActive}"
+              data-test-subj="totalStausesActive"
               values={{
                 totalStausesActive: alertsStatusesTotal.active,
               }}
@@ -492,6 +497,7 @@ export const AlertsList: React.FunctionComponent = () => {
           <EuiHealth color="danger">
             <FormattedMessage
               id="xpack.triggersActionsUI.sections.alertsList.totalStausesErrorDescription"
+              data-test-subj="totalStausesError"
               defaultMessage="Errors: {totalStausesError}"
               values={{ totalStausesError: alertsStatusesTotal.error }}
             />
@@ -501,6 +507,7 @@ export const AlertsList: React.FunctionComponent = () => {
           <EuiHealth color="subdued">
             <FormattedMessage
               id="xpack.triggersActionsUI.sections.alertsList.totalStausesOkDescription"
+              data-test-subj="totalStausesOk"
               defaultMessage="Ok: {totalStausesOk}"
               values={{ totalStausesOk: alertsStatusesTotal.ok }}
             />
@@ -510,6 +517,7 @@ export const AlertsList: React.FunctionComponent = () => {
           <EuiHealth color="success">
             <FormattedMessage
               id="xpack.triggersActionsUI.sections.alertsList.totalStausesPendingDescription"
+              data-test-subj="totalStausesPending"
               defaultMessage="Pending: {totalStausesPending}"
               values={{
                 totalStausesPending: alertsStatusesTotal.pending,
@@ -521,6 +529,7 @@ export const AlertsList: React.FunctionComponent = () => {
           <EuiHealth color="warning">
             <FormattedMessage
               id="xpack.triggersActionsUI.sections.alertsList.totalStausesUnknownDescription"
+              data-test-subj="totalStausesUnknown"
               defaultMessage="Unknown: {totalStausesUnknown}"
               values={{
                 totalStausesUnknown: alertsStatusesTotal.unknown,