Add checkboxes actions to job invocation page

app/views/api/v2/job_invocations/hosts.json.rabl

@@ -1,6 +1,6 @@
 collection @hosts
 
-attribute :name, :operatingsystem_id, :operatingsystem_name, :hostgroup_id, :hostgroup_name
+attribute :id, :name, :operatingsystem_id, :operatingsystem_name, :hostgroup_id, :hostgroup_name
 
 node :job_status do |host|
   @host_statuses[host.id]

webpack/JobInvocationDetail/CheckboxesActions.js

@@ -0,0 +1,193 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  KebabToggle,
+} from '@patternfly/react-core';
+import { useDispatch, useSelector } from 'react-redux';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { addToast } from 'foremanReact/components/ToastsList';
+import { APIActions } from 'foremanReact/redux/API';
+import { selectTaskCancelable } from './JobInvocationSelectors';
+import { openLink, useModalToggle, OpenAllModal } from './OpenAllHelpers';
+import { hasPermission } from './JobInvocationConstants';
+
+export const CheckboxesActions = ({
+  jobID,
+  bulkParams,
+  selectedCount,
+  currentPermissions,
+  permissionsStatus,
+  failedHosts,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const isTaskCancelable = useSelector(selectTaskCancelable);
+  const dispatch = useDispatch();
+  const { isModalOpen, handleModalToggle } = useModalToggle();
+  const idsArray = bulkParams
+    ?.match(/\(([^)]+)\)/)?.[1]
+    ?.split(',')
+    .map(id => id.trim());
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-kebab');
+    element.focus();
+  };
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const getRerunUrl = () =>
+    idsArray?.length
+      ? `/job_invocations/${jobID}/rerun?${idsArray
+          .map(id => `host_ids[]=${id}`)
+          .join('&')}`
+      : null;
+
+  const handleTaskAction = action => {
+    if (idsArray) {
+      idsArray.forEach(taskID => {
+        dispatch(
+          addToast({
+            key: `${action}-job-info-${taskID}`,
+            type: 'info',
+            message: __(`Trying to ${action} the task for the host`),
+          })
+        );
+
+        dispatch(
+          APIActions.post({
+            url: `/foreman_tasks/tasks/${taskID}/${action}`,
+            key: `${action.toUpperCase()}_TASK_${taskID}`,
+            errorToast: ({ response }) => response.data.message,
+            successToast: () =>
+              __(
+                `Task for the host ${
+                  action === 'cancel' ? 'cancelled' : 'aborted'
+                } successfully`
+              ),
+          })
+        );
+      });
+    }
+  };
+
+  const RerunButton = () => (
+    <Button
+      ouiaId="template-invocation-new-tab-button"
+      href={getRerunUrl()}
+      variant="secondary"
+      component="a"
+      isDisabled={
+        selectedCount === 0 ||
+        !hasPermission(
+          currentPermissions,
+          permissionsStatus,
+          'create_job_invocations'
+        )
+      }
+    >
+      {__('Rerun')}
+    </Button>
+  );
+
+  const dropdownItems = [
+    <DropdownItem
+      ouiaId="cancel-host-dropdown-item"
+      onClick={() => handleTaskAction('cancel')}
+      key="cancel"
+      component="button"
+      isDisabled={
+        selectedCount === 0 ||
+        !isTaskCancelable ||
+        !hasPermission(
+          currentPermissions,
+          permissionsStatus,
+          'cancel_job_invocations'
+        )
+      }
+    >
+      {__('Cancel')}
+    </DropdownItem>,
+    <DropdownItem
+      ouiaId="abort-host-dropdown-item"
+      onClick={() => handleTaskAction('abort')}
+      key="abort"
+      component="button"
+      isDisabled={
+        selectedCount === 0 ||
+        !isTaskCancelable ||
+        !hasPermission(
+          currentPermissions,
+          permissionsStatus,
+          'cancel_job_invocations'
+        )
+      }
+    >
+      {__('Abort')}
+    </DropdownItem>,
+    <DropdownSeparator ouiaId="dropdown-separator" key="separator" />,
+    <DropdownItem
+      ouiaId="open-failed-host-dropdown-item"
+      key="open-failed"
+      component="button"
+      isDisabled={failedHosts.length === 0}
+      onClick={() => {
+        if (failedHosts.length <= 3) {
+          failedHosts.forEach(id =>
+            openLink(`/job_invocations/${id}`, () => {})
+          );
+        } else {
+          handleModalToggle();
+        }
+      }}
+    >
+      {__('Open all failed runs')}
+    </DropdownItem>,
+  ];
+
+  const ActionsKebab = () => (
+    <Dropdown
+      ouiaId="host-actions-dropdown-kebab"
+      onSelect={onSelect}
+      toggle={<KebabToggle id="toggle-kebab" onToggle={setIsOpen} />}
+      isOpen={isOpen}
+      isPlain
+      dropdownItems={dropdownItems}
+    />
+  );
+
+  return (
+    <>
+      <RerunButton />
+      <ActionsKebab />
+      <OpenAllModal
+        isModalOpen={isModalOpen}
+        handleModalToggle={handleModalToggle}
+        hosts={failedHosts}
+        jobID={jobID}
+        onConfirm={url => openLink(url, () => {})}
+      />
+    </>
+  );
+};
+
+CheckboxesActions.propTypes = {
+  jobID: PropTypes.string.isRequired,
+  bulkParams: PropTypes.string,
+  selectedCount: PropTypes.number.isRequired,
+  currentPermissions: PropTypes.array,
+  failedHosts: PropTypes.array,
+  permissionsStatus: PropTypes.string,
+};
+
+CheckboxesActions.defaultProps = {
+  bulkParams: undefined,
+  currentPermissions: [],
+  failedHosts: [],
+  permissionsStatus: undefined,
+};

webpack/JobInvocationDetail/DropdownFilter.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Select, SelectOption, SelectList } from '@patternfly/react-core/next'; // remove "/next" after switching to PF5
+import { MenuToggle, ToolbarItem } from '@patternfly/react-core';
+import { STATUS_TITLES } from './JobInvocationConstants';
+
+export const DropdownFilter = ({ dropdownFilter, setDropdownFilter }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const onSelect = (_event, itemId) => {
+    setDropdownFilter(itemId);
+    setIsOpen(false);
+  };
+
+  const toggle = toggleRef => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setIsOpen(!isOpen)}
+      isExpanded={isOpen}
+      style={{
+        width: '200px',
+      }}
+    >
+      {Object.values(STATUS_TITLES).find(status => status.id === dropdownFilter)
+        ?.title || __('All statuses')}
+    </MenuToggle>
+  );
+
+  return (
+    <ToolbarItem>
+      <Select
+        isOpen={isOpen}
+        selected={dropdownFilter}
+        onSelect={onSelect}
+        onOpenChange={newIsOpen => setIsOpen(newIsOpen)}
+        ouiaId="host-status-select"
+        toggle={toggle}
+      >
+        <SelectList>
+          {Object.values(STATUS_TITLES).map(result => (
+            <SelectOption
+              key={result.id}
+              itemId={result.id}
+              isSelected={result.id === dropdownFilter}
+            >
+              {result.title}
+            </SelectOption>
+          ))}
+        </SelectList>
+      </Select>
+    </ToolbarItem>
+  );
+};
+
+DropdownFilter.propTypes = {
+  dropdownFilter: PropTypes.string.isRequired,
+  setDropdownFilter: PropTypes.func.isRequired,
+};

webpack/JobInvocationDetail/JobInvocationConstants.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { foremanUrl } from 'foremanReact/common/helpers';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { useForemanHostDetailsPageUrl } from 'foremanReact/Root/Context/ForemanContext';
+import { STATUS as APIStatus } from 'foremanReact/constants';
 import JobStatusIcon from '../react_app/components/RecentJobsCard/JobStatusIcon';
 
 export const JOB_INVOCATION_KEY = 'JOB_INVOCATION_KEY';
@@ -33,6 +34,14 @@ export const STATUS_UPPERCASE = {
   PENDING: 'PENDING',
 };
 
+export const STATUS_TITLES = {
+  ALL_STATUSES: { id: 'all_statuses', title: __('All statuses') },
+  SUCCESS: { id: 'success', title: __('Succeeded') },
+  FAILED: { id: 'failed', title: __('Failed') },
+  PENDING: { id: 'pending', title: __('In Progress') },
+  CANCELLED: { id: 'cancelled', title: __('Cancelled') },
+};
+
 export const DATE_OPTIONS = {
   day: 'numeric',
   month: 'short',
@@ -43,6 +52,17 @@ export const DATE_OPTIONS = {
   timeZoneName: 'short',
 };
 
+export const hasPermission = (
+  currentPermissions,
+  permissionsStatus,
+  permissionRequired
+) =>
+  permissionsStatus === APIStatus.RESOLVED
+    ? currentPermissions?.some(
+        permission => permission.name === permissionRequired
+      )
+    : false;
+
 const Columns = () => {
   const getColumnsStatus = ({ hostJobStatus }) => {
     switch (hostJobStatus) {
@@ -52,7 +72,7 @@ const Columns = () => {
         return { title: __('Failed'), status: 1 };
       case 'planned':
         return { title: __('Scheduled'), status: 2 };
-      case 'running':
+      case 'running' || 'pending':
         return { title: __('Pending'), status: 3 };
       case 'cancelled':
         return { title: __('Cancelled'), status: 4 };
@@ -70,13 +90,15 @@ const Columns = () => {
       wrapper: ({ name }) => (
         <a href={`${hostDetailsPageUrl}${name}`}>{name}</a>
       ),
+      isSorted: true,
       weight: 1,
     },
-    groups: {
+    hostgroup: {
       title: __('Host group'),
       wrapper: ({ hostgroup_id, hostgroup_name }) => (
         <a href={`/hostgroups/${hostgroup_id}/edit`}>{hostgroup_name}</a>
       ),
+      isSorted: true,
       weight: 2,
     },
     os: {
@@ -86,13 +108,15 @@ const Columns = () => {
           {operatingsystem_name}
         </a>
       ),
+      isSorted: true,
       weight: 3,
     },
     smart_proxy: {
       title: __('Smart proxy'),
       wrapper: ({ smart_proxy_name, smart_proxy_id }) => (
         <a href={`/smart_proxies/${smart_proxy_id}`}>{smart_proxy_name}</a>
       ),
+      isSorted: true,
       weight: 4,
     },
     status: {