Merge pull request #12412 from AlexSCorey/11994-FailedJobErrorMessage

Adds a failure message to job output when job failed and no events exist

awx/ui/src/screens/Job/JobOutput/EmptyOutput.js

@@ -1,17 +1,29 @@
 import React, { useEffect } from 'react';
+import { Link, useParams } from 'react-router-dom';
 import 'styled-components/macro';
 import { t } from '@lingui/macro';
-import { SearchIcon } from '@patternfly/react-icons';
+import {
+  SearchIcon,
+  ExclamationCircleIcon as PFExclamationCircleIcon,
+} from '@patternfly/react-icons';
 import ContentEmpty from 'components/ContentEmpty';
 
+import styled from 'styled-components';
+
+const ExclamationCircleIcon = styled(PFExclamationCircleIcon)`
+  color: var(--pf-global--danger-color--100);
+`;
+
 export default function EmptyOutput({
   hasQueryParams,
   isJobRunning,
   onUnmount,
+  job,
 }) {
   let title;
   let message;
   let icon;
+  const { typeSegment, id } = useParams();
 
   useEffect(() => onUnmount);
 
@@ -21,6 +33,21 @@ export default function EmptyOutput({
     icon = SearchIcon;
   } else if (isJobRunning) {
     title = t`Waiting for job output…`;
+  } else if (job.status === 'failed') {
+    title = t`This job failed and has no output.`;
+    message = (
+      <>
+        {t`Return to `}{' '}
+        <Link to={`/jobs/${typeSegment}/${id}/details`}>{t`details.`}</Link>
+        <br />
+        {job.job_explanation && (
+          <>
+            {t`Failure Explanation:`} {`${job.job_explanation}`}
+          </>
+        )}
+      </>
+    );
+    icon = ExclamationCircleIcon;
   } else {
     title = t`No output found for this job.`;
   }

awx/ui/src/screens/Job/JobOutput/JobOutput.js

@@ -687,6 +687,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
               ) {
                 return (
                   <EmptyOutput
+                    job={job}
                     hasQueryParams={location.search.length > 1}
                     isJobRunning={isJobRunning(jobStatus)}
                     onUnmount={() => {

awx/ui/src/screens/Job/JobOutput/JobOutput.test.js

@@ -134,4 +134,20 @@ describe('<JobOutput />', () => {
     });
     await waitForElement(wrapper, 'ContentError', (el) => el.length === 1);
   });
+  test('should show failed empty output screen', async () => {
+    JobsAPI.readEvents.mockResolvedValue({
+      data: {
+        count: 0,
+        next: null,
+        previous: null,
+        results: [],
+      },
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <JobOutput job={{ ...mockJob, status: 'failed' }} />
+      );
+    });
+    await waitForElement(wrapper, 'EmptyOutput', (el) => el.length === 1);
+  });
 });