Fixes #39253 - Implement "Not Found" error handling for invalid Job Invocation IDs

Author: pondrejk

webpack/JobInvocationDetail/JobInvocationEmptyState.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { PageSection, PageSectionVariants } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl } from 'foremanReact/common/helpers';
+import ResourceLoadFailedEmptyState from 'foremanReact/components/common/EmptyState/ResourceLoadFailedEmptyState';
+
+const jobInvocationsIndexPath = '/job_invocations';
+
+const JobInvocationEmptyState = ({
+  jobInvocationId,
+  httpStatus,
+  errorMessage,
+}) => (
+  <PageSection variant={PageSectionVariants.light}>
+    <ResourceLoadFailedEmptyState
+      resourceLabel={__('job invocation')}
+      resourceId={jobInvocationId}
+      httpStatus={httpStatus}
+      errorMessage={errorMessage}
+      viewPermissions={['view_job_invocations']}
+      requiredPermissions={['view_job_invocations']}
+      primaryAction={{
+        label: __('Go to job invocations'),
+        url: foremanUrl(jobInvocationsIndexPath),
+        ouiaId: 'job-invocation-empty-state-go-to-job-invocations-button',
+      }}
+      secondaryActions={[
+        {
+          label: __('Create a new job invocation'),
+          url: foremanUrl('/job_invocations/new'),
+          ouiaId: 'job-invocation-empty-state-create-new-job-invocation-button',
+        },
+      ]}
+      ouiaIdPrefix="job-invocation-empty-state"
+    />
+  </PageSection>
+);
+
+JobInvocationEmptyState.propTypes = {
+  jobInvocationId: PropTypes.string.isRequired,
+  httpStatus: PropTypes.number,
+  errorMessage: PropTypes.string,
+};
+
+JobInvocationEmptyState.defaultProps = {
+  httpStatus: null,
+  errorMessage: null,
+};
+
+export default JobInvocationEmptyState;

webpack/JobInvocationDetail/JobInvocationToolbarButtons.js

@@ -60,39 +60,55 @@ const JobInvocationToolbarButtons = ({ jobId, data }) => {
   };
 
   useEffect(() => {
+    let isMounted = true;
     dispatch(
       get({
         key: GET_REPORT_TEMPLATES,
         url: '/api/report_templates',
         handleSuccess: ({ data: { results } }) => {
-          setReportTemplateJobId(
-            results.find(result => result.name === 'Job - Invocation Report')
-              ?.id
-          );
+          if (isMounted) {
+            setReportTemplateJobId(
+              results.find(result => result.name === 'Job - Invocation Report')
+                ?.id
+            );
+          }
         },
         handleError: () => {
-          setReportTemplateJobId(undefined);
+          if (isMounted) {
+            setReportTemplateJobId(undefined);
+          }
         },
       })
     );
+    return () => {
+      isMounted = false;
+    };
   }, [dispatch]);
   useEffect(() => {
+    let isMounted = true;
     if (reportTemplateJobId !== undefined) {
       dispatch(
         get({
           key: GET_REPORT_TEMPLATE_INPUTS,
           url: `/api/templates/${reportTemplateJobId}/template_inputs`,
           handleSuccess: ({ data: { results } }) => {
-            setTemplateInputId(
-              results.find(result => result.name === 'job_id')?.id
-            );
+            if (isMounted) {
+              setTemplateInputId(
+                results.find(result => result.name === 'job_id')?.id
+              );
+            }
           },
           handleError: () => {
-            setTemplateInputId(undefined);
+            if (isMounted) {
+              setTemplateInputId(undefined);
+            }
           },
         })
       );
     }
+    return () => {
+      isMounted = false;
+    };
   }, [dispatch, reportTemplateJobId]);
 
   const recurrenceDropdownItems = recurrence

webpack/JobInvocationDetail/__tests__/MainInformation.test.js

@@ -26,6 +26,7 @@ import {
   CHANGE_ENABLED_RECURRING_LOGIC,
   GET_REPORT_TEMPLATES,
   GET_REPORT_TEMPLATE_INPUTS,
+  GET_TASK,
   JOB_INVOCATION_KEY,
 } from '../JobInvocationConstants';
 
@@ -35,8 +36,11 @@ jest.spyOn(api, 'get');
 const originalToLocaleString = Date.prototype.toLocaleString;
 beforeAll(() => {
   // eslint-disable-next-line no-extend-native
-  Date.prototype.toLocaleString = function (locale, options) {
-    return originalToLocaleString.call(this, locale, { ...options, timeZone: 'UTC' });
+  Date.prototype.toLocaleString = function(locale, options) {
+    return originalToLocaleString.call(this, locale, {
+      ...options,
+      timeZone: 'UTC',
+    });
   };
 });
 afterAll(() => {
@@ -91,6 +95,14 @@ api.get.mockImplementation(({ handleSuccess, ...action }) => {
   return { type: 'get', ...action };
 });
 
+const initialStateRecurring = {
+  JOB_INVOCATION_KEY: {
+    response: jobInvocationDataRecurring,
+  },
+  GET_REPORT_TEMPLATES: mockReportTemplatesResponse,
+  extendable: {},
+};
+
 jest.mock('../JobInvocationHostTable.js', () => () => (
   <div data-testid="mock-table">Mock Table</div>
 ));
@@ -217,8 +229,9 @@ describe('JobInvocationDetailPage', () => {
   it('should dispatch global actions', async () => {
     // recurring in the future
     const jobId = jobInvocationDataRecurring.id;
+    const taskId = jobInvocationDataRecurring.task.id;
     const recurrenceId = jobInvocationDataRecurring.recurrence.id;
-    const store = mockStore(jobInvocationDataRecurring);
+    const store = mockStore(initialStateRecurring);
     render(
       <Provider store={store}>
         <JobInvocationDetailPage
@@ -234,6 +247,10 @@ describe('JobInvocationDetailPage', () => {
         key: JOB_INVOCATION_KEY,
         url: `/api/job_invocations/${jobId}?host_status=true`,
       },
+      {
+        key: GET_TASK,
+        url: `/foreman_tasks/api/tasks/${taskId}`,
+      },
       {
         key: GET_REPORT_TEMPLATE_INPUTS,
         url: `/api/templates/${reportTemplateJobId}/template_inputs`,

webpack/JobInvocationDetail/index.js

@@ -5,29 +5,33 @@ import {
   PageSectionVariants,
   Skeleton,
 } from '@patternfly/react-core';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { translate as __, documentLocale } from 'foremanReact/common/I18n';
 import { useDispatch, useSelector } from 'react-redux';
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
 import PropTypes from 'prop-types';
 import SkeletonLoader from 'foremanReact/components/common/SkeletonLoader';
 import { stopInterval } from 'foremanReact/redux/middlewares/IntervalMiddleware';
-import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import { STATUS as API_STATUS } from 'foremanReact/constants';
+import {
+  selectAPIErrorMessage,
+  selectAPIHttpStatus,
+  selectAPIStatus,
+} from 'foremanReact/redux/API/APISelectors';
 
 import { JobAdditionInfo } from './JobAdditionInfo';
 import JobInvocationHostTable from './JobInvocationHostTable';
 import JobInvocationOverview from './JobInvocationOverview';
 import JobInvocationSystemStatusChart from './JobInvocationSystemStatusChart';
+import JobInvocationEmptyState from './JobInvocationEmptyState';
 import JobInvocationToolbarButtons from './JobInvocationToolbarButtons';
 import { getJobInvocation, getTask } from './JobInvocationActions';
 import './JobInvocationDetail.scss';
 import {
-  CURRENT_PERMISSIONS,
   DATE_OPTIONS,
   JOB_INVOCATION_KEY,
   STATUS,
   STATUS_UPPERCASE,
-  currentPermissionsUrl,
 } from './JobInvocationConstants';
 import { selectItems } from './JobInvocationSelectors';
 
@@ -51,9 +55,15 @@ const JobInvocationDetailPage = ({
     statusLabel === STATUS.SUCCEEDED ||
     statusLabel === STATUS.CANCELLED;
   const autoRefresh = task?.state === STATUS.PENDING || false;
-  useAPI('get', currentPermissionsUrl, {
-    key: CURRENT_PERMISSIONS,
-  });
+  const jobInvocationApiStatus = useSelector(state =>
+    selectAPIStatus(state, JOB_INVOCATION_KEY)
+  );
+  const jobInvocationErrorMessage = useSelector(state =>
+    selectAPIErrorMessage(state, JOB_INVOCATION_KEY)
+  );
+  const jobInvocationHttpStatus = useSelector(state =>
+    selectAPIHttpStatus(state, JOB_INVOCATION_KEY)
+  );
   const [selectedFilter, setSelectedFilter] = useState('');
 
   const handleFilterChange = newFilter => {
@@ -88,6 +98,27 @@ const JobInvocationDetailPage = ({
     }
   }, [dispatch, taskId]);
 
+  const apiFailed = jobInvocationApiStatus === API_STATUS.ERROR;
+
+  const backendErrorMessage = useMemo(() => {
+    if (jobInvocationApiStatus === API_STATUS.ERROR) {
+      return jobInvocationErrorMessage || null;
+    }
+    return null;
+  }, [jobInvocationApiStatus, jobInvocationErrorMessage]);
+
+  const httpStatus = jobInvocationHttpStatus;
+
+  if (apiFailed) {
+    return (
+      <JobInvocationEmptyState
+        jobInvocationId={id}
+        httpStatus={httpStatus}
+        errorMessage={backendErrorMessage}
+      />
+    );
+  }
+
   const pageStatus =
     items.id === undefined
       ? STATUS_UPPERCASE.PENDING
@@ -123,7 +154,11 @@ const JobInvocationDetailPage = ({
       <PageLayout
         header={description}
         breadcrumbOptions={breadcrumbOptions}
-        toolbarButtons={<JobInvocationToolbarButtons jobId={id} data={items} />}
+        toolbarButtons={
+          jobInvocationApiStatus === API_STATUS.SUCCESS && (
+            <JobInvocationToolbarButtons jobId={id} data={items} />
+          )
+        }
         searchable={false}
       >
         <Flex className="job-invocation-detail-flex">

webpack/__mocks__/foremanReact/common/helpers.js

@@ -1 +1,5 @@
 export const foremanUrl = path => `foreman${path}`;
+
+export const visit = jest.fn(url => {
+  global.window.location.href = url;
+});

webpack/__mocks__/foremanReact/redux/API/APISelectors.js

@@ -19,3 +19,8 @@ export const selectAPIErrorMessage = (state, key) => {
   const error = selectAPIError(state, key);
   return error && error.message;
 };
+
+export const selectAPIHttpStatus = (state, key) => {
+  const error = selectAPIError(state, key);
+  return error?.response?.status;
+};