foreman_remote_execution 16.6.5 → 16.7.0

data/webpack/JobInvocationDetail/JobInvocationToolbarButtons.js

@@ -1,5 +1,6 @@
+/* eslint-disable max-lines */
 import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Split, SplitItem } from '@patternfly/react-core';
 import { UndoIcon } from '@patternfly/react-icons';
@@ -12,6 +13,7 @@ import {
 } from '@patternfly/react-core/deprecated';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from 'foremanReact/common/helpers';
+import { usePermissions } from 'foremanReact/common/hooks/Permissions/permissionHooks';
 import { get } from 'foremanReact/redux/API';
 import {
   cancelJob,
@@ -23,10 +25,7 @@ import {
   GET_REPORT_TEMPLATES,
   GET_REPORT_TEMPLATE_INPUTS,
 } from './JobInvocationConstants';
-import {
-  selectTaskCancelable,
-  selectHasPermission,
-} from './JobInvocationSelectors';
+import { selectTaskCancelable } from './JobInvocationSelectors';
 
 const JobInvocationToolbarButtons = ({ jobId, data }) => {
   const { succeeded, failed, task, recurrence, permissions } = data;
@@ -38,165 +37,238 @@ const JobInvocationToolbarButtons = ({ jobId, data }) => {
     ? permissions.edit_recurring_logics
     : false;
   const isTaskCancelable = useSelector(selectTaskCancelable);
-  const useHasPermission = permissionRequired =>
-    useSelector(selectHasPermission(permissionRequired));
+  const canCreateJobInvocations = usePermissions(['create_job_invocations']);
+  const canCancelJobInvocations = usePermissions(['cancel_job_invocations']);
+  const canGenerateReportTemplates = usePermissions([
+    'generate_report_templates',
+  ]);
   const [isActionOpen, setIsActionOpen] = useState(false);
   const [reportTemplateJobId, setReportTemplateJobId] = useState(undefined);
   const [templateInputId, setTemplateInputId] = useState(undefined);
-  const queryParams = new URLSearchParams({
-    [`report_template_report[input_values][${templateInputId}][value]`]: jobId,
-  });
   const dispatch = useDispatch();
+  const reportHref = useMemo(() => {
+    if (reportTemplateJobId === undefined || templateInputId === undefined) {
+      return undefined;
+    }
+    const queryParams = new URLSearchParams({
+      [`report_template_report[input_values][${templateInputId}][value]`]: jobId,
+    });
+    return foremanUrl(
+      `/templates/report_templates/${reportTemplateJobId}/generate?${queryParams.toString()}`
+    );
+  }, [jobId, reportTemplateJobId, templateInputId]);
 
-  const onActionFocus = () => {
+  const onActionFocus = useCallback(() => {
     const element = document.getElementById(
       `toggle-split-button-action-primary-${jobId}`
     );
-    element.focus();
-  };
-  const onActionSelect = () => {
+    if (element) {
+      element.focus();
+    }
+  }, [jobId]);
+  const onActionSelect = useCallback(() => {
     setIsActionOpen(false);
     onActionFocus();
-  };
+  }, [onActionFocus]);
+  const onActionToggle = useCallback((_event, val) => setIsActionOpen(val), []);
 
   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
-    ? [
-        <DropdownSeparator ouiaId="dropdown-separator-1" key="separator-1" />,
-        <DropdownItem
-          ouiaId="change-enabled-recurring-dropdown-item"
-          onClick={() =>
-            dispatch(
-              enableRecurringLogic(recurrence?.id, recurringEnabled, jobId)
-            )
-          }
-          key="change-enabled-recurring"
-          component="button"
-          isDisabled={
-            recurrence?.id === undefined ||
-            recurrence?.state === 'cancelled' ||
-            !canEditRecurringLogic
-          }
-        >
-          {recurringEnabled ? __('Disable recurring') : __('Enable recurring')}
-        </DropdownItem>,
-        <DropdownItem
-          ouiaId="cancel-recurring-dropdown-item"
-          onClick={() => dispatch(cancelRecurringLogic(recurrence?.id, jobId))}
-          key="cancel-recurring"
-          component="button"
-          isDisabled={
-            recurrence?.id === undefined ||
-            recurrence?.state === 'cancelled' ||
-            !canEditRecurringLogic
-          }
-        >
-          {__('Cancel recurring')}
-        </DropdownItem>,
-      ]
-    : [];
+  const recurrenceDropdownItems = useMemo(
+    () =>
+      recurrence
+        ? [
+            <DropdownSeparator
+              ouiaId="dropdown-separator-1"
+              key="separator-1"
+            />,
+            <DropdownItem
+              ouiaId="change-enabled-recurring-dropdown-item"
+              onClick={() =>
+                dispatch(
+                  enableRecurringLogic(recurrence?.id, recurringEnabled, jobId)
+                )
+              }
+              key="change-enabled-recurring"
+              component="button"
+              isDisabled={
+                recurrence?.id === undefined ||
+                recurrence?.state === 'cancelled' ||
+                !canEditRecurringLogic
+              }
+            >
+              {recurringEnabled
+                ? __('Disable recurring')
+                : __('Enable recurring')}
+            </DropdownItem>,
+            <DropdownItem
+              ouiaId="cancel-recurring-dropdown-item"
+              onClick={() =>
+                dispatch(cancelRecurringLogic(recurrence?.id, jobId))
+              }
+              key="cancel-recurring"
+              component="button"
+              isDisabled={
+                recurrence?.id === undefined ||
+                recurrence?.state === 'cancelled' ||
+                !canEditRecurringLogic
+              }
+            >
+              {__('Cancel recurring')}
+            </DropdownItem>,
+          ]
+        : [],
+    [recurrence, recurringEnabled, canEditRecurringLogic, dispatch, jobId]
+  );
+
+  const dropdownItems = useMemo(
+    () => [
+      <DropdownItem
+        ouiaId="rerun-succeeded-dropdown-item"
+        href={foremanUrl(`/job_invocations/${jobId}/rerun?succeeded_only=1`)}
+        key="rerun-succeeded"
+        isDisabled={!canCreateJobInvocations || !(succeeded > 0)}
+        description="Rerun job on successful hosts"
+      >
+        {__('Rerun successful')}
+      </DropdownItem>,
+      <DropdownItem
+        ouiaId="rerun-failed-dropdown-item"
+        href={foremanUrl(`/job_invocations/${jobId}/rerun?failed_only=1`)}
+        key="rerun-failed"
+        isDisabled={!canCreateJobInvocations || !(failed > 0)}
+        description="Rerun job on failed hosts"
+      >
+        {__('Rerun failed')}
+      </DropdownItem>,
+      <DropdownItem
+        ouiaId="view-task-dropdown-item"
+        href={foremanUrl(`/foreman_tasks/tasks/${task?.id}`)}
+        key="view-task"
+        isDisabled={!canViewForemanTasks || task === undefined}
+        description="See details of latest task"
+      >
+        {__('View task')}
+      </DropdownItem>,
+      <DropdownSeparator ouiaId="dropdown-separator-0" key="separator-0" />,
+      <DropdownItem
+        ouiaId="cancel-dropdown-item"
+        onClick={() => dispatch(cancelJob(jobId, false))}
+        key="cancel"
+        component="button"
+        isDisabled={!canCancelJobInvocations || !isTaskCancelable}
+        description="Cancel job gracefully"
+      >
+        {__('Cancel')}
+      </DropdownItem>,
+      <DropdownItem
+        ouiaId="abort-dropdown-item"
+        onClick={() => dispatch(cancelJob(jobId, true))}
+        key="abort"
+        component="button"
+        isDisabled={!canCancelJobInvocations || !isTaskCancelable}
+        description="Cancel job immediately"
+      >
+        {__('Abort')}
+      </DropdownItem>,
+      ...recurrenceDropdownItems,
+      <DropdownSeparator ouiaId="dropdown-separator-2" key="separator-2" />,
+      <DropdownItem
+        ouiaId="legacy-ui-dropdown-item"
+        icon={<UndoIcon />}
+        href={`/legacy/job_invocations/${jobId}`}
+        key="legacy-ui"
+      >
+        {__('Legacy UI')}
+      </DropdownItem>,
+    ],
+    [
+      canCancelJobInvocations,
+      canCreateJobInvocations,
+      canViewForemanTasks,
+      dispatch,
+      failed,
+      isTaskCancelable,
+      jobId,
+      recurrenceDropdownItems,
+      succeeded,
+      task,
+    ]
+  );
 
-  const dropdownItems = [
-    <DropdownItem
-      ouiaId="rerun-succeeded-dropdown-item"
-      href={foremanUrl(`/job_invocations/${jobId}/rerun?succeeded_only=1`)}
-      key="rerun-succeeded"
-      isDisabled={
-        !useHasPermission('create_job_invocations') || !(succeeded > 0)
-      }
-      description="Rerun job on successful hosts"
-    >
-      {__('Rerun successful')}
-    </DropdownItem>,
-    <DropdownItem
-      ouiaId="rerun-failed-dropdown-item"
-      href={foremanUrl(`/job_invocations/${jobId}/rerun?failed_only=1`)}
-      key="rerun-failed"
-      isDisabled={!useHasPermission('create_job_invocations') || !(failed > 0)}
-      description="Rerun job on failed hosts"
-    >
-      {__('Rerun failed')}
-    </DropdownItem>,
-    <DropdownItem
-      ouiaId="view-task-dropdown-item"
-      href={foremanUrl(`/foreman_tasks/tasks/${task?.id}`)}
-      key="view-task"
-      isDisabled={!canViewForemanTasks || task === undefined}
-      description="See details of latest task"
-    >
-      {__('View task')}
-    </DropdownItem>,
-    <DropdownSeparator ouiaId="dropdown-separator-0" key="separator-0" />,
-    <DropdownItem
-      ouiaId="cancel-dropdown-item"
-      onClick={() => dispatch(cancelJob(jobId, false))}
-      key="cancel"
-      component="button"
-      isDisabled={
-        !useHasPermission('cancel_job_invocations') || !isTaskCancelable
-      }
-      description="Cancel job gracefully"
-    >
-      {__('Cancel')}
-    </DropdownItem>,
-    <DropdownItem
-      ouiaId="abort-dropdown-item"
-      onClick={() => dispatch(cancelJob(jobId, true))}
-      key="abort"
-      component="button"
-      isDisabled={
-        !useHasPermission('cancel_job_invocations') || !isTaskCancelable
-      }
-      description="Cancel job immediately"
-    >
-      {__('Abort')}
-    </DropdownItem>,
-    ...recurrenceDropdownItems,
-    <DropdownSeparator ouiaId="dropdown-separator-2" key="separator-2" />,
-    <DropdownItem
-      ouiaId="legacy-ui-dropdown-item"
-      icon={<UndoIcon />}
-      href={`/legacy/job_invocations/${jobId}`}
-      key="legacy-ui"
-    >
-      {__('Legacy UI')}
-    </DropdownItem>,
-  ];
+  const dropdownToggle = useMemo(
+    () => (
+      <DropdownToggle
+        ouiaId="toggle-button-action-primary"
+        id={`toggle-split-button-action-primary-${jobId}`}
+        splitButtonItems={[
+          <Button
+            component="a"
+            ouiaId="button-rerun-all"
+            key="rerun"
+            href={foremanUrl(`/job_invocations/${jobId}/rerun`)}
+            variant="control"
+            isDisabled={!canCreateJobInvocations}
+          >
+            {__(`Rerun all`)}
+          </Button>,
+        ]}
+        splitButtonVariant="action"
+        onToggle={onActionToggle}
+      />
+    ),
+    [canCreateJobInvocations, jobId, onActionToggle]
+  );
 
   return (
     <>
@@ -206,14 +278,12 @@ const JobInvocationToolbarButtons = ({ jobId, data }) => {
             component="a"
             ouiaId="button-create-report"
             className="button-create-report"
-            href={foremanUrl(
-              `/templates/report_templates/${reportTemplateJobId}/generate?${queryParams.toString()}`
-            )}
+            href={reportHref}
             variant="secondary"
             isDisabled={
-              !useHasPermission('generate_report_templates') ||
+              !canGenerateReportTemplates ||
               task?.state === STATUS.PENDING ||
-              templateInputId === undefined
+              reportHref === undefined
             }
           >
             {__(`Create report`)}
@@ -224,26 +294,7 @@ const JobInvocationToolbarButtons = ({ jobId, data }) => {
             ouiaId="job-invocation-global-actions-dropdown"
             onSelect={onActionSelect}
             position={DropdownPosition.right}
-            toggle={
-              <DropdownToggle
-                ouiaId="toggle-button-action-primary"
-                id={`toggle-split-button-action-primary-${jobId}`}
-                splitButtonItems={[
-                  <Button
-                    component="a"
-                    ouiaId="button-rerun-all"
-                    key="rerun"
-                    href={foremanUrl(`/job_invocations/${jobId}/rerun`)}
-                    variant="control"
-                    isDisabled={!useHasPermission('create_job_invocations')}
-                  >
-                    {__(`Rerun all`)}
-                  </Button>,
-                ]}
-                splitButtonVariant="action"
-                onToggle={(_event, val) => setIsActionOpen(val)}
-              />
-            }
+            toggle={dropdownToggle}
             isOpen={isActionOpen}
             dropdownItems={dropdownItems}
           />

data/webpack/JobInvocationDetail/__tests__/JobInvocationDetailEmptyState.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import JobInvocationEmptyState from '../JobInvocationEmptyState';
+import { createForemanContextWrapper } from './foremanTestHelpers';
+
+describe('JobInvocationEmptyState', () => {
+  it('renders the failed load empty state for a job invocation', () => {
+    const jobInvocationId = '99';
+    const errorMessage = 'Record not found';
+    const history = createMemoryHistory();
+    const ForemanContextWrapper = createForemanContextWrapper();
+
+    render(
+      <Router history={history}>
+        <ForemanContextWrapper>
+          <JobInvocationEmptyState
+            jobInvocationId={jobInvocationId}
+            httpStatus={404}
+            errorMessage={errorMessage}
+          />
+        </ForemanContextWrapper>
+      </Router>
+    );
+
+    expect(
+      screen.getByRole('heading', {
+        name: 'Unable to load job invocation',
+        level: 5,
+      })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        (_, element) =>
+          element?.tagName === 'P' &&
+          element.textContent?.includes(
+            `The job invocation with id ${jobInvocationId} could not be found. It may have been deleted or may not be available in your current organization or location scope.`
+          )
+      )
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(`Server returned: ${errorMessage}`)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Go to job invocations' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Create a new job invocation' })
+    ).toBeInTheDocument();
+  });
+});

data/webpack/JobInvocationDetail/__tests__/MainInformation.test.js

@@ -1,9 +1,13 @@
+/* eslint-disable max-lines */
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import { fireEvent, render, screen, act } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
+import { STATUS } from 'foremanReact/constants';
 import { foremanUrl } from 'foremanReact/common/helpers';
 import * as api from 'foremanReact/redux/API';
 import JobInvocationDetailPage from '../index';
@@ -11,7 +15,6 @@ import {
   jobInvocationData,
   jobInvocationDataScheduled,
   jobInvocationDataRecurring,
-  mockPermissionsData,
   mockReportTemplatesResponse,
   mockReportTemplateInputsResponse,
 } from './fixtures';
@@ -26,8 +29,10 @@ import {
   CHANGE_ENABLED_RECURRING_LOGIC,
   GET_REPORT_TEMPLATES,
   GET_REPORT_TEMPLATE_INPUTS,
+  GET_TASK,
   JOB_INVOCATION_KEY,
 } from '../JobInvocationConstants';
+import { createForemanContextWrapper } from './foremanTestHelpers';
 
 jest.spyOn(api, 'get');
 
@@ -35,8 +40,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 toLocaleStringUTC(locale, options) {
+    return originalToLocaleString.call(this, locale, {
+      ...options,
+      timeZone: 'UTC',
+    });
   };
 });
 afterAll(() => {
@@ -44,12 +52,6 @@ afterAll(() => {
   Date.prototype.toLocaleString = originalToLocaleString;
 });
 
-jest.mock('foremanReact/common/hooks/API/APIHooks', () => ({
-  useAPI: jest.fn(() => ({
-    response: mockPermissionsData,
-  })),
-}));
-
 jest.mock('foremanReact/routes/common/PageLayout/PageLayout', () =>
   jest.fn(props => (
     <div>
@@ -63,6 +65,7 @@ jest.mock('foremanReact/routes/common/PageLayout/PageLayout', () =>
 const initialState = {
   JOB_INVOCATION_KEY: {
     response: jobInvocationData,
+    status: STATUS.RESOLVED,
   },
   GET_REPORT_TEMPLATES: mockReportTemplatesResponse,
   extendable: {},
@@ -71,6 +74,7 @@ const initialState = {
 const initialStateScheduled = {
   JOB_INVOCATION_KEY: {
     response: jobInvocationDataScheduled,
+    status: STATUS.RESOLVED,
   },
   extendable: {},
 };
@@ -91,6 +95,15 @@ api.get.mockImplementation(({ handleSuccess, ...action }) => {
   return { type: 'get', ...action };
 });
 
+const initialStateRecurring = {
+  JOB_INVOCATION_KEY: {
+    response: jobInvocationDataRecurring,
+    status: STATUS.RESOLVED,
+  },
+  GET_REPORT_TEMPLATES: mockReportTemplatesResponse,
+  extendable: {},
+};
+
 jest.mock('../JobInvocationHostTable.js', () => () => (
   <div data-testid="mock-table">Mock Table</div>
 ));
@@ -198,6 +211,29 @@ describe('JobInvocationDetailPage', () => {
     ).toEqual(`/legacy/job_invocations/${jobId}`);
   });
 
+  it('keeps toolbar buttons mounted while job invocation data is refreshing', async () => {
+    const jobId = jobInvocationData.id;
+    const store = mockStore({
+      ...initialState,
+      JOB_INVOCATION_KEY: {
+        response: jobInvocationData,
+        status: STATUS.PENDING,
+      },
+    });
+
+    render(
+      <Provider store={store}>
+        <JobInvocationDetailPage
+          match={{ params: { id: `${jobId}` } }}
+          {...props}
+        />
+      </Provider>
+    );
+
+    expect(screen.getByText('Create report')).toBeInTheDocument();
+    expect(screen.getByText('Rerun all')).toBeInTheDocument();
+  });
+
   it('shows scheduled date', async () => {
     const store = mockStore(initialStateScheduled);
     render(
@@ -217,8 +253,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
@@ -232,7 +269,11 @@ describe('JobInvocationDetailPage', () => {
       { key: GET_REPORT_TEMPLATES, url: '/api/report_templates' },
       {
         key: JOB_INVOCATION_KEY,
-        url: `/api/job_invocations/${jobId}?host_status=true`,
+        url: `/api/job_invocations/${jobId}`,
+      },
+      {
+        key: GET_TASK,
+        url: `/foreman_tasks/api/tasks/${taskId}`,
       },
       {
         key: GET_REPORT_TEMPLATE_INPUTS,
@@ -281,4 +322,61 @@ describe('JobInvocationDetailPage', () => {
       }
     });
   });
+
+  it('renders empty state when the job invocation fails to load', () => {
+    const jobId = '99';
+    const errorMessage = 'Record not found';
+    const history = createMemoryHistory();
+    const ForemanContextWrapper = createForemanContextWrapper();
+    const store = mockStore({
+      JOB_INVOCATION_KEY: {
+        status: STATUS.ERROR,
+        response: {
+          message: errorMessage,
+          response: { status: 404 },
+        },
+      },
+      extendable: {},
+    });
+
+    render(
+      <Router history={history}>
+        <ForemanContextWrapper>
+          <Provider store={store}>
+            <JobInvocationDetailPage
+              match={{ params: { id: jobId } }}
+              history={history}
+            />
+          </Provider>
+        </ForemanContextWrapper>
+      </Router>
+    );
+
+    expect(
+      screen.getByRole('heading', {
+        name: 'Unable to load job invocation',
+        level: 5,
+      })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        (_, element) =>
+          element?.tagName === 'P' &&
+          element.textContent?.includes(
+            `The job invocation with id ${jobId} could not be found. It may have been deleted or may not be available in your current organization or location scope.`
+          )
+      )
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(`Server returned: ${errorMessage}`)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Go to job invocations' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Create a new job invocation' })
+    ).toBeInTheDocument();
+    expect(screen.queryByText('Description')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('mock-table')).not.toBeInTheDocument();
+  });
 });