foreman_remote_execution 16.0.4 → 16.1.0

data/webpack/JobInvocationDetail/OpenAllInvocationsModal.js

@@ -0,0 +1,118 @@
+import {
+  Alert,
+  AlertActionCloseButton,
+  Button,
+  Modal,
+} from '@patternfly/react-core';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  templateInvocationPageUrl,
+  MAX_HOSTS_API_SIZE,
+} from './JobInvocationConstants';
+
+export const PopupAlert = ({ setShowAlert }) => (
+  <Alert
+    ouiaId="template-invocation-new-tab-popup-alert"
+    variant="warning"
+    actionClose={<AlertActionCloseButton onClose={() => setShowAlert(false)} />}
+    title={__(
+      'Popups are blocked by your browser. Please allow popups for this site to open all invocations in new tabs.'
+    )}
+  />
+);
+
+const OpenAllInvocationsModal = ({
+  failedCount,
+  failedHosts,
+  isOpen,
+  isOpenFailed,
+  jobID,
+  onClose,
+  setShowAlert,
+  selectedIds,
+}) => {
+  const modalText = isOpenFailed ? 'failed' : 'selected';
+
+  const openLink = url => {
+    const newWin = window.open(url);
+    if (!newWin || newWin.closed || typeof newWin.closed === 'undefined') {
+      setShowAlert(true);
+    }
+  };
+
+  return (
+    <Modal
+      className="open-all-modal"
+      isOpen={isOpen}
+      onClose={onClose}
+      ouiaId="template-invocation-new-tab-modal"
+      title={sprintf(__('Open all %s invocations in new tabs'), modalText)}
+      titleIconVariant="warning"
+      width={590}
+      actions={[
+        <Button
+          ouiaId="template-invocation-new-tab-modal-confirm"
+          key="confirm"
+          variant="primary"
+          onClick={() => {
+            const hostsToOpen = isOpenFailed
+              ? failedHosts
+              : selectedIds.map(id => ({ id }));
+
+            hostsToOpen
+              .slice(0, MAX_HOSTS_API_SIZE)
+              .forEach(({ id }) =>
+                openLink(templateInvocationPageUrl(id, jobID), '_blank')
+              );
+
+            onClose();
+          }}
+        >
+          {__('Open in new tabs')}
+        </Button>,
+        <Button
+          ouiaId="template-invocation-new-tab-modal-cancel"
+          key="cancel"
+          variant="link"
+          onClick={onClose}
+        >
+          {__('Cancel')}
+        </Button>,
+      ]}
+    >
+      {sprintf(
+        __('Are you sure you want to open all %s invocations in new tabs?'),
+        modalText
+      )}
+      <br />
+      {__('This will open a new tab for each invocation. The maximum is 100.')}
+      <br />
+      {sprintf(__('The number of %s invocations is:'), modalText)}{' '}
+      <b>{isOpenFailed ? failedCount : selectedIds.length}</b>
+    </Modal>
+  );
+};
+
+OpenAllInvocationsModal.propTypes = {
+  failedCount: PropTypes.number.isRequired,
+  failedHosts: PropTypes.array,
+  isOpen: PropTypes.bool.isRequired,
+  isOpenFailed: PropTypes.bool,
+  jobID: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  setShowAlert: PropTypes.func.isRequired,
+  selectedIds: PropTypes.array.isRequired,
+};
+
+OpenAllInvocationsModal.defaultProps = {
+  failedHosts: [],
+  isOpenFailed: false,
+};
+
+PopupAlert.propTypes = {
+  setShowAlert: PropTypes.func.isRequired,
+};
+
+export default OpenAllInvocationsModal;

data/webpack/JobInvocationDetail/TemplateInvocation.js

@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { isEmpty } from 'lodash';
 import PropTypes from 'prop-types';
 import { ClipboardCopyButton, Alert, Skeleton } from '@patternfly/react-core';
-import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import { useDispatch, useSelector } from 'react-redux';
+import { APIActions } from 'foremanReact/redux/API';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { useForemanHostDetailsPageUrl } from 'foremanReact/Root/Context/ForemanContext';
 import { STATUS } from 'foremanReact/constants';
@@ -11,6 +12,10 @@ import {
   templateInvocationPageUrl,
   GET_TEMPLATE_INVOCATION,
 } from './JobInvocationConstants';
+import {
+  selectTemplateInvocationStatus,
+  selectTemplateInvocation,
+} from './JobInvocationSelectors';
 import { OutputToggleGroup } from './TemplateInvocationComponents/OutputToggleGroup';
 import { PreviewTemplate } from './TemplateInvocationComponents/PreviewTemplate';
 import { OutputCodeBlock } from './TemplateInvocationComponents/OutputCodeBlock';
@@ -47,41 +52,64 @@ const CopyToClipboard = ({ fullOutput }) => {
     </ClipboardCopyButton>
   );
 };
-let intervalId;
+
 export const TemplateInvocation = ({
   hostID,
   jobID,
   isInTableView,
   hostName,
   hostProxy,
+  isExpanded,
 }) => {
+  const intervalRef = useRef(null);
   const templateURL = showTemplateInvocationUrl(hostID, jobID);
   const hostDetailsPageUrl = useForemanHostDetailsPageUrl();
-  const { response, status, setAPIOptions } = useAPI('get', templateURL, {
-    key: GET_TEMPLATE_INVOCATION,
-    headers: { Accept: 'application/json' },
-    handleError: () => {
-      if (intervalId) clearInterval(intervalId);
-    },
-  });
-  const { finished, auto_refresh: autoRefresh } = response;
+
+  const status = useSelector(selectTemplateInvocationStatus(hostID));
+  const response = useSelector(selectTemplateInvocation(hostID));
+  const finished = response.finished ?? true;
+  const autoRefresh = response.auto_refresh || false;
+  const dispatch = useDispatch();
 
   useEffect(() => {
-    if (!finished || autoRefresh) {
-      intervalId = setInterval(() => {
-        // Re call api
-        setAPIOptions(prevOptions => ({
-          ...prevOptions,
-        }));
+    const getData = async () => {
+      if (
+        (!isInTableView || (isInTableView && isExpanded)) &&
+        (Object.keys(response).length === 0 || autoRefresh)
+      ) {
+        dispatch(
+          APIActions.get({
+            url: templateURL,
+            key: `${GET_TEMPLATE_INVOCATION}_${hostID}`,
+            handleError: () => {
+              if (intervalRef.current) clearInterval(intervalRef.current);
+            },
+          })
+        );
+      }
+    };
+    getData();
+    if (!finished && autoRefresh) {
+      intervalRef.current = setInterval(() => {
+        getData();
       }, 5000);
     }
-    if (intervalId && finished && !autoRefresh) {
-      clearInterval(intervalId);
-    }
+
     return () => {
-      clearInterval(intervalId);
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
     };
-  }, [finished, autoRefresh, setAPIOptions]);
+  }, [
+    dispatch,
+    templateURL,
+    isExpanded,
+    isInTableView,
+    finished,
+    autoRefresh,
+    hostID,
+  ]);
 
   const errorMessage =
     response?.response?.data?.error?.message ||
@@ -91,10 +119,10 @@ export const TemplateInvocation = ({
     preview,
     output,
     input_values: inputValues,
-    task_id: taskID,
-    task_cancellable: taskCancellable,
+    task,
     permissions,
   } = response;
+  const { id: taskID, cancellable: taskCancellable } = task || {};
   const [showOutputType, setShowOutputType] = useState({
     stderr: true,
     stdout: true,
@@ -197,12 +225,14 @@ TemplateInvocation.propTypes = {
   hostProxy: PropTypes.object, // only used when isInTableView is false
   jobID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   isInTableView: PropTypes.bool,
+  isExpanded: PropTypes.bool,
 };
 
 TemplateInvocation.defaultProps = {
   isInTableView: true,
   hostName: '',
   hostProxy: {},
+  isExpanded: false,
 };
 
 CopyToClipboard.propTypes = {

data/webpack/JobInvocationDetail/TemplateInvocationComponents/TemplateActionButtons.js

@@ -6,7 +6,7 @@ import { ActionsColumn } from '@patternfly/react-table';
 import { APIActions } from 'foremanReact/redux/API';
 import { addToast } from 'foremanReact/components/ToastsList';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { selectTemplateInvocation } from '../JobInvocationSelectors';
+import { selectTemplateInvocationList } from '../JobInvocationSelectors';
 import './index.scss';
 
 const actions = ({
@@ -47,7 +47,8 @@ const actions = ({
         APIActions.post({
           url: `/foreman_tasks/tasks/${taskID}/cancel`,
           key: 'CANCEL_TASK',
-          errorToast: ({ response }) => response.data.message,
+          errorToast: ({ response }) =>
+            response?.data?.message || __('Could not cancel the task'),
           successToast: () => __('Task for the host cancelled succesfully'),
         })
       );
@@ -70,7 +71,8 @@ const actions = ({
         APIActions.post({
           url: `/foreman_tasks/tasks/${taskID}/abort`,
           key: 'ABORT_TASK',
-          errorToast: ({ response }) => response.data.message,
+          errorToast: ({ response }) =>
+            response?.data?.message || __('Could not abort the task'),
           successToast: () => __('task aborted succesfully'),
         })
       );
@@ -81,14 +83,10 @@ const actions = ({
 
 export const RowActions = ({ hostID, jobID }) => {
   const dispatch = useDispatch();
-  const response = useSelector(selectTemplateInvocation);
+  const response = useSelector(selectTemplateInvocationList)?.[hostID];
   if (!response?.permissions) return null;
-  const {
-    task_id: taskID,
-    task_cancellable: taskCancellable,
-    permissions,
-  } = response;
-
+  const { task, permissions } = response;
+  const { id: taskID, cancellable: taskCancellable } = task || {};
   const getActions = actions({
     taskID,
     jobID,

data/webpack/JobInvocationDetail/TemplateInvocationPage.js

@@ -16,7 +16,7 @@ const TemplateInvocationPage = ({
     job_invocation_description: jobDescription,
     host_name: hostName,
     proxy: hostProxy,
-  } = useSelector(selectTemplateInvocation);
+  } = useSelector(selectTemplateInvocation(hostID));
   const description = sprintf(__('Template Invocation for %s'), hostName);
   const breadcrumbOptions = {
     breadcrumbItems: [

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

@@ -96,9 +96,7 @@ describe('JobInvocationDetailPage', () => {
     );
 
     expect(screen.getByText('Description')).toBeInTheDocument();
-    expect(
-      container.querySelector('.chart-donut .pf-c-chart') // todo: change to pf5 once we update @patternfly/react-charts to v7
-    ).toBeInTheDocument();
+    expect(container.querySelector('.chart-donut')).toBeInTheDocument();
     expect(screen.getByText('2/6')).toBeInTheDocument();
     expect(screen.getByText('Systems')).toBeInTheDocument();
     expect(screen.getByText('System status')).toBeInTheDocument();
@@ -178,7 +176,7 @@ describe('JobInvocationDetailPage', () => {
         .getByText('Legacy UI')
         .closest('a')
         .getAttribute('href')
-    ).toEqual(`/job_invocations/${jobId}`);
+    ).toEqual(`/legacy/job_invocations/${jobId}`);
   });
 
   it('shows scheduled date', async () => {

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

@@ -0,0 +1,204 @@
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import axios from 'axios';
+import { foremanUrl } from 'foremanReact/common/helpers';
+import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+
+import { CheckboxesActions } from '../CheckboxesActions';
+import * as selectors from '../JobInvocationSelectors';
+import { PopupAlert } from '../OpenAllInvocationsModal';
+
+jest.mock('axios');
+jest.mock('foremanReact/common/hooks/API/APIHooks');
+jest.mock('../JobInvocationSelectors');
+
+jest.mock('../JobInvocationConstants', () => ({
+  ...jest.requireActual('../JobInvocationConstants'),
+  templateInvocationPageUrl: jest.fn(
+    (hostId, jobId) => `url/${hostId}/${jobId}`
+  ),
+  DIRECT_OPEN_HOST_LIMIT: 3,
+}));
+
+selectors.selectItems.mockImplementation(() => ({
+  targeting: { search_query: 'name~*' },
+}));
+selectors.selectHasPermission.mockImplementation(() => () => true);
+selectors.selectTaskCancelable.mockImplementation(() => true);
+
+const mockStore = configureStore([]);
+const store = mockStore({});
+
+describe('TableToolbarActions', () => {
+  const jobID = '42';
+  let openSpy;
+
+  beforeEach(() => {
+    openSpy = jest.spyOn(window, 'open').mockImplementation(jest.fn());
+    useAPI.mockClear();
+    axios.post.mockResolvedValue({ data: {} });
+    useAPI.mockReturnValue({
+      response: null,
+      status: 'initial',
+    });
+  });
+
+  afterEach(() => {
+    openSpy.mockRestore();
+    jest.clearAllMocks();
+  });
+
+  describe('Opening selected in new tabs', () => {
+    test('opens links when results length is less than or equal to 3', () => {
+      const selectedIds = [1, 2, 3];
+      render(
+        <Provider store={store}>
+          <CheckboxesActions
+            selectedIds={selectedIds}
+            failedCount={0}
+            jobID={jobID}
+          />
+        </Provider>
+      );
+      const openAllButton = screen.getByLabelText(
+        /open all template invocations in new tab/i
+      );
+      fireEvent.click(openAllButton);
+      expect(openSpy).toHaveBeenCalledTimes(selectedIds.length);
+    });
+
+    test('shows modal when results length is greater than 3', async () => {
+      const selectedIds = [1, 2, 3, 4];
+      render(
+        <Provider store={store}>
+          <CheckboxesActions
+            selectedIds={selectedIds}
+            failedCount={0}
+            jobID={jobID}
+          />
+        </Provider>
+      );
+      fireEvent.click(
+        screen.getByLabelText(/open all template invocations in new tab/i)
+      );
+      expect(
+        await screen.findByRole('heading', {
+          name: /open all.*invocations in new tabs \+ selected/i,
+        })
+      ).toBeInTheDocument();
+    });
+
+    test('shows alert when popups are blocked', async () => {
+      openSpy.mockReturnValue(null);
+      const selectedIds = [1, 2];
+      render(
+        <Provider store={store}>
+          <CheckboxesActions
+            selectedIds={selectedIds}
+            failedCount={0}
+            jobID={jobID}
+          />
+        </Provider>
+      );
+      fireEvent.click(
+        screen.getByLabelText(/open all template invocations in new tab/i)
+      );
+      expect(
+        await screen.findByText(/Popups are blocked by your browser/)
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Opening failed in new tabs', () => {
+    test('opens links when results length is less than or equal to 3', async () => {
+      const failedHosts = [{ id: 301 }, { id: 302 }];
+      useAPI.mockReturnValue({
+        response: { results: failedHosts },
+        status: 'success',
+      });
+      render(
+        <Provider store={store}>
+          <CheckboxesActions selectedIds={[]} failedCount={2} jobID={jobID} />
+        </Provider>
+      );
+      fireEvent.click(screen.getByLabelText(/actions dropdown toggle/i));
+      fireEvent.click(await screen.findByText(/open all failed runs/i));
+      await waitFor(() => {
+        expect(openSpy).toHaveBeenCalledTimes(failedHosts.length);
+      });
+    });
+
+    test('shows modal when results length is greater than 3', async () => {
+      render(
+        <Provider store={store}>
+          <CheckboxesActions selectedIds={[]} failedCount={4} jobID={jobID} />
+        </Provider>
+      );
+      fireEvent.click(screen.getByLabelText(/actions dropdown toggle/i));
+      fireEvent.click(await screen.findByText(/open all failed runs/i));
+      expect(
+        await screen.findByRole('heading', {
+          name: /open all.*invocations in new tabs \+ failed/i,
+        })
+      ).toBeInTheDocument();
+    });
+
+    test('calls useApi with skip: true when failedCount is 0', () => {
+      render(
+        <Provider store={store}>
+          <CheckboxesActions selectedIds={[]} failedCount={0} jobID={jobID} />
+        </Provider>
+      );
+      expect(useAPI).toHaveBeenCalledWith(
+        'get',
+        foremanUrl(`/api/job_invocations/${jobID}/hosts`),
+        expect.objectContaining({
+          skip: true,
+        })
+      );
+    });
+  });
+
+  describe('PopupAlert', () => {
+    test('renders without crashing', () => {
+      const mockSetShowAlert = jest.fn();
+      render(<PopupAlert setShowAlert={mockSetShowAlert} />);
+      expect(
+        screen.getByText(/Popups are blocked by your browser/)
+      ).toBeInTheDocument();
+    });
+
+    test('closes alert when close button is clicked', () => {
+      const mockSetShowAlert = jest.fn();
+      render(<PopupAlert setShowAlert={mockSetShowAlert} />);
+      const closeButton = screen.getByRole('button', { name: /close/i });
+      fireEvent.click(closeButton);
+      expect(mockSetShowAlert).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('Rerun button', () => {
+    test('is enabled when permissions and ids are valid', () => {
+      const selectedIds = [101, 102, 103];
+      render(
+        <Provider store={store}>
+          <CheckboxesActions
+            bulkParams="(id ^ (101, 102, 103))"
+            selectedIds={selectedIds}
+            failedCount={1}
+            jobID={jobID}
+          />
+        </Provider>
+      );
+      const rerunLink = screen.getByRole('link', { name: /rerun/i });
+      expect(rerunLink).toBeEnabled();
+      const expectedHref = foremanUrl(
+        `/job_invocations/42/rerun?search=(name~*) AND ((id ^ (101, 102, 103)))`
+      );
+      expect(rerunLink).toHaveAttribute('href', expectedHref);
+    });
+  });
+});

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

@@ -3,18 +3,19 @@ import configureMockStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
 import { render, screen, act, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import * as APIHooks from 'foremanReact/common/hooks/API/APIHooks';
 import * as api from 'foremanReact/redux/API';
+import * as selectors from '../JobInvocationSelectors';
 import { TemplateInvocation } from '../TemplateInvocation';
 import { mockTemplateInvocationResponse } from './fixtures';
 
 jest.spyOn(api, 'get');
-jest.mock('foremanReact/common/hooks/API/APIHooks');
-APIHooks.useAPI.mockImplementation(() => ({
-  response: mockTemplateInvocationResponse,
-  status: 'RESOLVED',
-}));
-
+jest.mock('../JobInvocationSelectors');
+selectors.selectTemplateInvocationStatus.mockImplementation(() => () =>
+  'RESOLVED'
+);
+selectors.selectTemplateInvocation.mockImplementation(() => () =>
+  mockTemplateInvocationResponse
+);
 const mockStore = configureMockStore([]);
 const store = mockStore({
   HOSTS_API: {
@@ -95,19 +96,22 @@ describe('TemplateInvocation', () => {
     ).toHaveLength(1);
   });
   test('displays an error alert when there is an error', async () => {
-    APIHooks.useAPI.mockImplementation(() => ({
-      response: { response: { data: { error: 'Error message' } } },
-      status: 'ERROR',
+    selectors.selectTemplateInvocationStatus.mockImplementation(() => () =>
+      'ERROR'
+    );
+    selectors.selectTemplateInvocation.mockImplementation(() => () => ({
+      response: { data: { error: 'Error message' } },
     }));
-
     render(
-      <TemplateInvocation
-        hostID="1"
-        jobID="1"
-        isInTableView={false}
-        hostName="example-host"
-        hostProxy={{ name: 'example-proxy', href: '#' }}
-      />
+      <Provider store={store}>
+        <TemplateInvocation
+          hostID="1"
+          jobID="1"
+          isInTableView={false}
+          hostName="example-host"
+          hostProxy={{ name: 'example-proxy', href: '#' }}
+        />
+      </Provider>
     );
 
     expect(
@@ -119,17 +123,19 @@ describe('TemplateInvocation', () => {
   });
 
   test('displays a skeleton while loading', async () => {
-    APIHooks.useAPI.mockImplementation(() => ({
-      response: {},
-      status: 'PENDING',
-    }));
+    selectors.selectTemplateInvocationStatus.mockImplementation(() => () =>
+      'PENDING'
+    );
+    selectors.selectTemplateInvocation.mockImplementation(() => () => ({}));
     render(
-      <TemplateInvocation
-        hostID="1"
-        jobID="1"
-        isInTableView={false}
-        hostName="example-host"
-      />
+      <Provider store={store}>
+        <TemplateInvocation
+          hostID="1"
+          jobID="1"
+          isInTableView={false}
+          hostName="example-host"
+        />
+      </Provider>
     );
 
     expect(document.querySelectorAll('.pf-v5-c-skeleton')).toHaveLength(1);