foreman_remote_execution 16.0.5 → 16.2.0

data/webpack/JobInvocationDetail/CheckboxesActions.js

@@ -1,6 +1,7 @@
-/* eslint-disable camelcase */
+/* eslint-disable max-lines */
 import {
   Button,
+  Divider,
   Dropdown,
   DropdownItem,
   DropdownList,
@@ -11,20 +12,96 @@ import {
   EllipsisVIcon,
   OutlinedWindowRestoreIcon,
 } from '@patternfly/react-icons';
-import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import axios from 'axios';
 import { foremanUrl } from 'foremanReact/common/helpers';
 import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import { addToast } from 'foremanReact/components/ToastsList';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+
 import {
-  templateInvocationPageUrl,
-  MAX_HOSTS_API_SIZE,
   DIRECT_OPEN_HOST_LIMIT,
+  MAX_HOSTS_API_SIZE,
+  templateInvocationPageUrl,
 } from './JobInvocationConstants';
-import { selectHasPermission, selectItems } from './JobInvocationSelectors';
+import {
+  selectHasPermission,
+  selectTaskCancelable,
+} from './JobInvocationSelectors';
 import OpenAllInvocationsModal, { PopupAlert } from './OpenAllInvocationsModal';
 
+/* eslint-disable camelcase */
+const ActionsKebab = ({
+  selectedIds,
+  failedCount,
+  isTaskCancelable,
+  hasCancelPermission,
+  handleTaskAction,
+  handleOpenHosts,
+  isDropdownOpen,
+  setIsDropdownOpen,
+}) => {
+  const dropdownItems = [
+    <DropdownItem
+      ouiaId="cancel-host-dropdown-item"
+      onClick={() => handleTaskAction('cancel')}
+      key="cancel"
+      component="button"
+      isDisabled={
+        selectedIds.length === 0 || !isTaskCancelable || !hasCancelPermission
+      }
+    >
+      {__('Cancel selected')}
+    </DropdownItem>,
+    <DropdownItem
+      ouiaId="abort-host-dropdown-item"
+      onClick={() => handleTaskAction('abort')}
+      key="abort"
+      component="button"
+      isDisabled={
+        selectedIds.length === 0 || !isTaskCancelable || !hasCancelPermission
+      }
+    >
+      {__('Abort selected')}
+    </DropdownItem>,
+    <Divider component="li" key="separator" />,
+    <DropdownItem
+      ouiaId="open-failed-dropdown-item"
+      key="open-failed"
+      onClick={() => handleOpenHosts('failed')}
+      isDisabled={failedCount === 0}
+    >
+      {sprintf(__('Open all failed runs (%s)'), failedCount)}
+    </DropdownItem>,
+  ];
+
+  return (
+    <Dropdown
+      isOpen={isDropdownOpen}
+      onOpenChange={setIsDropdownOpen}
+      onSelect={() => setIsDropdownOpen(false)}
+      ouiaId="actions-kebab"
+      shouldFocusToggleOnSelect
+      toggle={toggleRef => (
+        <MenuToggle
+          aria-label="actions dropdown toggle"
+          id="toggle-kebab"
+          isExpanded={isDropdownOpen}
+          onClick={() => setIsDropdownOpen(prev => !prev)}
+          ref={toggleRef}
+          variant="plain"
+        >
+          <EllipsisVIcon />
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>{dropdownItems}</DropdownList>
+    </Dropdown>
+  );
+};
+
 export const CheckboxesActions = ({
   selectedIds,
   failedCount,
@@ -35,10 +112,17 @@ export const CheckboxesActions = ({
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [showAlert, setShowAlert] = useState(false);
   const [isOpenFailed, setIsOpenFailed] = useState(false);
-  const hasPermission = useSelector(
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const isTaskCancelable = useSelector(selectTaskCancelable);
+  const dispatch = useDispatch();
+
+  const hasCreatePermission = useSelector(
     selectHasPermission('create_job_invocations')
   );
-  const jobSearchQuery = useSelector(selectItems)?.targeting?.search_query;
+  const hasCancelPermission = useSelector(
+    selectHasPermission('cancel_job_invocations')
+  );
+  const jobSearchQuery = `job_invocation.id = ${jobID}`;
   const filterQuery =
     filter && filter !== 'all_statuses'
       ? ` and job_invocation.result = ${filter}`
@@ -89,43 +173,64 @@ export const CheckboxesActions = ({
     setIsModalOpen(true);
   };
 
-  const ActionsKebab = () => {
-    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-
-    const dropdownItems = [
-      <DropdownItem
-        ouiaId="open-failed-dropdown-item"
-        key="open-failed"
-        onClick={() => handleOpenHosts('failed')}
-        isDisabled={failedCount === 0}
-      >
-        {sprintf(__('Open all failed runs (%s)'), failedCount)}
-      </DropdownItem>,
-    ];
-
-    return (
-      <Dropdown
-        isOpen={isDropdownOpen}
-        onOpenChange={setIsDropdownOpen}
-        onSelect={() => setIsDropdownOpen(false)}
-        ouiaId="actions-kebab"
-        shouldFocusToggleOnSelect
-        toggle={toggleRef => (
-          <MenuToggle
-            aria-label="actions dropdown toggle"
-            id="toggle-kebab"
-            isExpanded={isDropdownOpen}
-            onClick={() => setIsDropdownOpen(prev => !prev)}
-            ref={toggleRef}
-            variant="plain"
-          >
-            <EllipsisVIcon />
-          </MenuToggle>
-        )}
-      >
-        <DropdownList>{dropdownItems}</DropdownList>
-      </Dropdown>
+  const cancelJobTasks = (search, action) => async () => {
+    dispatch(
+      addToast({
+        key: `cancel-job-info`,
+        type: 'info',
+        message: sprintf(__('Trying to %s the task'), action),
+      })
     );
+
+    try {
+      const response = await axios.post(
+        `/api/v2/job_invocations/${jobID}/cancel`,
+        {
+          search,
+          force: action !== 'cancel',
+        }
+      );
+
+      const cancelledTasks = response.data?.cancelled;
+      const pastTenseAction =
+        action === 'cancel' ? __('cancelled') : __('aborted');
+
+      if (cancelledTasks && cancelledTasks.length > 0) {
+        const idList = cancelledTasks.join(', ');
+        dispatch(
+          addToast({
+            key: `success-tasks-cancelled`,
+            type: 'success',
+            message: sprintf(
+              __('%s task(s) successfully %s: %s'),
+              cancelledTasks.length,
+              pastTenseAction,
+              idList
+            ),
+          })
+        );
+      } else {
+        dispatch(
+          addToast({
+            key: `warn-no-tasks-cancelled-${Date.now()}`,
+            type: 'warning',
+            message: sprintf(__('Task(s) were not %s'), pastTenseAction),
+          })
+        );
+      }
+    } catch (error) {
+      dispatch(
+        addToast({
+          key: `error-cancelling-tasks`,
+          type: 'danger',
+          message: error.response?.data?.error || __('An error occurred.'),
+        })
+      );
+    }
+  };
+
+  const handleTaskAction = action => {
+    dispatch(cancelJobTasks(combinedQuery, action));
   };
 
   const OpenAllButton = () => (
@@ -153,7 +258,7 @@ export const CheckboxesActions = ({
         `/job_invocations/${jobID}/rerun?search=(${jobSearchQuery}) AND (${combinedQuery})`
       )}
       // eslint-disable-next-line camelcase
-      isDisabled={selectedIds.length === 0 || !hasPermission}
+      isDisabled={selectedIds.length === 0 || !hasCreatePermission}
       isInline
       ouiaId="template-invocation-rerun-selected-button"
       variant="secondary"
@@ -166,7 +271,16 @@ export const CheckboxesActions = ({
     <>
       <OpenAllButton />
       <RerunSelectedButton />
-      <ActionsKebab />
+      <ActionsKebab
+        selectedIds={selectedIds}
+        failedCount={failedCount}
+        isTaskCancelable={isTaskCancelable}
+        hasCancelPermission={hasCancelPermission}
+        handleTaskAction={handleTaskAction}
+        handleOpenHosts={handleOpenHosts}
+        isDropdownOpen={isDropdownOpen}
+        setIsDropdownOpen={setIsDropdownOpen}
+      />
       {showAlert && <PopupAlert setShowAlert={setShowAlert} />}
       <OpenAllInvocationsModal
         isOpen={isModalOpen}
@@ -182,6 +296,22 @@ export const CheckboxesActions = ({
   );
 };
 
+ActionsKebab.propTypes = {
+  selectedIds: PropTypes.array.isRequired,
+  failedCount: PropTypes.number.isRequired,
+  isTaskCancelable: PropTypes.bool,
+  hasCancelPermission: PropTypes.bool,
+  handleTaskAction: PropTypes.func.isRequired,
+  handleOpenHosts: PropTypes.func.isRequired,
+  isDropdownOpen: PropTypes.bool.isRequired,
+  setIsDropdownOpen: PropTypes.func.isRequired,
+};
+
+ActionsKebab.defaultProps = {
+  isTaskCancelable: false,
+  hasCancelPermission: false,
+};
+
 CheckboxesActions.propTypes = {
   selectedIds: PropTypes.array.isRequired,
   failedCount: PropTypes.number.isRequired,

data/webpack/JobInvocationDetail/JobInvocationConstants.js

@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 import React from 'react';
-import { foremanUrl } from 'foremanReact/common/helpers';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl } from 'foremanReact/common/helpers';
 import { useForemanHostDetailsPageUrl } from 'foremanReact/Root/Context/ForemanContext';
 import JobStatusIcon from '../react_app/components/RecentJobsCard/JobStatusIcon';
 
@@ -31,8 +31,7 @@ export const LIST_TEMPLATE_INVOCATIONS = 'LIST_TEMPLATE_INVOCATIONS';
 export const templateInvocationPageUrl = (hostID, jobID) =>
   `/job_invocations_detail/${jobID}/host_invocation/${hostID}`;
 
-export const jobInvocationDetailsUrl = id =>
-  `/experimental/job_invocations_detail/${id}`;
+export const jobInvocationDetailsUrl = id => `/job_invocations/${id}`;
 
 export const STATUS = {
   PENDING: 'pending',

data/webpack/JobInvocationDetail/JobInvocationHostTable.js

@@ -23,7 +23,7 @@ import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableInde
 import { getControllerSearchProps } from 'foremanReact/constants';
 import { Icon } from 'patternfly-react';
 import PropTypes from 'prop-types';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import URI from 'urijs';
@@ -45,6 +45,7 @@ const JobInvocationHostTable = ({
   id,
   initialFilter,
   onFilterUpdate,
+  statusLabel,
   targeting,
 }) => {
   const columns = Columns();
@@ -53,6 +54,7 @@ const JobInvocationHostTable = ({
   const history = useHistory();
   const [selectedFilter, setSelectedFilter] = useState(initialFilter);
   const [expandedHost, setExpandedHost] = useState([]);
+  const prevStatusLabel = useRef(statusLabel);
 
   useEffect(() => {
     if (initialFilter !== selectedFilter) {
@@ -138,6 +140,14 @@ const JobInvocationHostTable = ({
     }
   }, [allResponse]);
 
+  useEffect(() => {
+    if (statusLabel !== prevStatusLabel.current) {
+      setAPIOptions(prevOptions => ({ ...prevOptions }));
+      prevStatusLabel.current = statusLabel;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [statusLabel]);
+
   const {
     updateSearchQuery: updateSearchQueryBulk,
     fetchBulkParams,
@@ -408,6 +418,7 @@ const JobInvocationHostTable = ({
                       </div>
                     ) : (
                       <TemplateInvocation
+                        key={`${result.id}-${result.job_status}`}
                         hostID={result.id}
                         jobID={id}
                         isInTableView
@@ -430,11 +441,13 @@ JobInvocationHostTable.propTypes = {
   targeting: PropTypes.object.isRequired,
   failedCount: PropTypes.number.isRequired,
   initialFilter: PropTypes.string.isRequired,
+  statusLabel: PropTypes.string,
   onFilterUpdate: PropTypes.func,
 };
 
 JobInvocationHostTable.defaultProps = {
   onFilterUpdate: () => {},
+  statusLabel: undefined,
 };
 
 export default JobInvocationHostTable;

data/webpack/JobInvocationDetail/JobInvocationToolbarButtons.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Split, SplitItem } from '@patternfly/react-core';
+import { UndoIcon } from '@patternfly/react-icons';
 import {
   Dropdown,
   DropdownItem,
@@ -189,7 +190,8 @@ const JobInvocationToolbarButtons = ({ jobId, data }) => {
     <DropdownSeparator ouiaId="dropdown-separator-2" key="separator-2" />,
     <DropdownItem
       ouiaId="legacy-ui-dropdown-item"
-      href={`/job_invocations/${jobId}`}
+      icon={<UndoIcon />}
+      href={`/legacy/job_invocations/${jobId}`}
       key="legacy-ui"
     >
       {__('Legacy UI')}

data/webpack/JobInvocationDetail/TemplateInvocation.js

@@ -57,9 +57,9 @@ export const TemplateInvocation = ({
   hostID,
   jobID,
   isInTableView,
+  isExpanded,
   hostName,
   hostProxy,
-  isExpanded,
 }) => {
   const intervalRef = useRef(null);
   const templateURL = showTemplateInvocationUrl(hostID, jobID);
@@ -67,72 +67,76 @@ export const TemplateInvocation = ({
 
   const status = useSelector(selectTemplateInvocationStatus(hostID));
   const response = useSelector(selectTemplateInvocation(hostID));
-  const finished = response.finished ?? true;
-  const autoRefresh = response.auto_refresh || false;
   const dispatch = useDispatch();
 
+  const responseRef = useRef(response);
   useEffect(() => {
-    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);
-            },
-          })
-        );
-      }
+    responseRef.current = response;
+  }, [response]);
+
+  const [showOutputType, setShowOutputType] = useState({
+    stderr: true,
+    stdout: true,
+    debug: true,
+  });
+  const [showTemplatePreview, setShowTemplatePreview] = useState(false);
+  const [showCommand, setShowCommand] = useState(false);
+
+  useEffect(() => {
+    const dispatchFetch = () => {
+      dispatch(
+        APIActions.get({
+          url: templateURL,
+          key: `${GET_TEMPLATE_INVOCATION}_${hostID}`,
+        })
+      );
     };
-    getData();
-    if (!finished && autoRefresh) {
+
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+
+    if (isExpanded) {
+      if (isEmpty(responseRef.current)) {
+        dispatchFetch();
+      }
+
       intervalRef.current = setInterval(() => {
-        getData();
+        const latestResponse = responseRef.current;
+        const finished = latestResponse?.finished ?? true;
+        // eslint-disable-next-line camelcase
+        const autoRefresh = latestResponse?.auto_refresh || false;
+
+        if (!finished && autoRefresh) {
+          dispatchFetch();
+        } else if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+        }
       }, 5000);
     }
 
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
-        intervalRef.current = null;
       }
     };
-  }, [
-    dispatch,
-    templateURL,
-    isExpanded,
-    isInTableView,
-    finished,
-    autoRefresh,
-    hostID,
-  ]);
+  }, [isExpanded, dispatch, templateURL, hostID]);
+
+  if (!isExpanded) {
+    return null;
+  }
+
+  if ((status === STATUS.PENDING && isEmpty(response)) || !response) {
+    return <Skeleton />;
+  }
 
   const errorMessage =
     response?.response?.data?.error?.message ||
     response?.response?.data?.error ||
     JSON.stringify(response);
-  const {
-    preview,
-    output,
-    input_values: inputValues,
-    task,
-    permissions,
-  } = response;
-  const { id: taskID, cancellable: taskCancellable } = task || {};
-  const [showOutputType, setShowOutputType] = useState({
-    stderr: true,
-    stdout: true,
-    debug: true,
-  });
-  const [showTemplatePreview, setShowTemplatePreview] = useState(false);
-  const [showCommand, setCommand] = useState(false);
-  if (status === STATUS.PENDING && isEmpty(response)) {
-    return <Skeleton />;
-  } else if (status === STATUS.ERROR) {
+
+  if (status === STATUS.ERROR) {
     return (
       <Alert
         ouiaId="template-invocation-error-alert"
@@ -146,6 +150,15 @@ export const TemplateInvocation = ({
     );
   }
 
+  const {
+    preview,
+    output,
+    input_values: inputValues,
+    task,
+    permissions,
+  } = response;
+  const { id: taskID, cancellable: taskCancellable } = task || {};
+
   return (
     <div
       id={`template-invocation-${hostID}`}
@@ -159,7 +172,7 @@ export const TemplateInvocation = ({
         setShowTemplatePreview={setShowTemplatePreview}
         showTemplatePreview={showTemplatePreview}
         showCommand={showCommand}
-        setShowCommand={setCommand}
+        setShowCommand={setShowCommand}
         newTabUrl={templateInvocationPageUrl(hostID, jobID)}
         isInTableView={isInTableView}
         copyToClipboard={

data/webpack/JobInvocationDetail/TemplateInvocationPage.js

@@ -36,6 +36,7 @@ const TemplateInvocationPage = ({
         hostID={hostID}
         jobID={jobID}
         isInTableView={false}
+        isExpanded
         hostName={hostName}
         hostProxy={hostProxy}
       />

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

@@ -96,9 +96,7 @@ describe('JobInvocationDetailPage', () => {
     );
 
     expect(screen.getByText('Description')).toBeInTheDocument();
-    expect(
-      container.querySelector('.chart-donut .pf-v5-c-chart')
-    ).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 () => {