foreman_remote_execution 16.0.4 → 16.1.0

data/webpack/JobInvocationDetail/JobInvocationDetail.scss

@@ -52,14 +52,26 @@
     height: $chart_size;
   }
 }
+
 .job-additional-info {
   padding: 0;
   margin-bottom: -10px;
 }
+
 .job-details-table-section {
   section:nth-child(1) {
     padding: 0;
   }
+
+  .pf-v5-c-toolbar__group.pf-m-button-group {
+    display: flex;
+    align-items: center;
+  }
+
+  .open-all-button {
+    margin-left: 10px;
+    margin-right: 15px;
+  }
 }
 
 .template-invocation {
@@ -122,3 +134,9 @@
     margin-bottom: 10px;
   }
 }
+
+.open-all-modal .pf-v5-c-modal-box__title-text {
+    white-space: normal;
+    text-overflow: unset;
+    word-break: break-word;
+}

data/webpack/JobInvocationDetail/JobInvocationHostTable.js

@@ -1,48 +1,58 @@
 /* eslint-disable max-lines */
 /* eslint-disable camelcase */
-import PropTypes from 'prop-types';
-import React, { useMemo, useEffect, useState } from 'react';
-import { Icon } from 'patternfly-react';
-import { translate as __ } from 'foremanReact/common/I18n';
-import { FormattedMessage } from 'react-intl';
-import { Tr, Td, Tbody, ExpandableRowContent } from '@patternfly/react-table';
 import {
   EmptyState,
-  EmptyStateVariant,
   EmptyStateBody,
   EmptyStateHeader,
+  EmptyStateVariant,
+  ToolbarItem,
 } from '@patternfly/react-core';
+import { ExpandableRowContent, Tbody, Td, Tr } from '@patternfly/react-table';
+import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from 'foremanReact/common/helpers';
 import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import { RowSelectTd } from 'foremanReact/components/HostsIndex/RowSelectTd';
+import SelectAllCheckbox from 'foremanReact/components/PF4/TableIndexPage/Table/SelectAllCheckbox';
 import { Table } from 'foremanReact/components/PF4/TableIndexPage/Table/Table';
-import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
-import { useSetParamsAndApiAndSearch } from 'foremanReact/components/PF4/TableIndexPage/Table/TableIndexHooks';
 import {
   useBulkSelect,
   useUrlParams,
 } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
+import { getPageStats } from 'foremanReact/components/PF4/TableIndexPage/Table/helpers';
+import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
 import { getControllerSearchProps } from 'foremanReact/constants';
+import { Icon } from 'patternfly-react';
+import PropTypes from 'prop-types';
+import React, { useEffect, useMemo, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+import URI from 'urijs';
+import { CheckboxesActions } from './CheckboxesActions';
+import DropdownFilter from './DropdownFilter';
 import Columns, {
   JOB_INVOCATION_HOSTS,
+  MAX_HOSTS_API_SIZE,
   STATUS_UPPERCASE,
+  LIST_TEMPLATE_INVOCATIONS,
+  ALL_JOB_HOSTS,
 } from './JobInvocationConstants';
+import { PopupAlert } from './OpenAllInvocationsModal';
 import { TemplateInvocation } from './TemplateInvocation';
-import { OpenAlInvocations, PopupAlert } from './OpenAlInvocations';
 import { RowActions } from './TemplateInvocationComponents/TemplateActionButtons';
-import JobInvocationHostTableToolbar from './JobInvocationHostTableToolbar';
 
 const JobInvocationHostTable = ({
+  failedCount,
   id,
-  targeting,
-  finished,
-  autoRefresh,
   initialFilter,
   onFilterUpdate,
+  targeting,
 }) => {
   const columns = Columns();
   const columnNamesKeys = Object.keys(columns);
   const apiOptions = { key: JOB_INVOCATION_HOSTS };
+  const history = useHistory();
   const [selectedFilter, setSelectedFilter] = useState(initialFilter);
+  const [expandedHost, setExpandedHost] = useState([]);
 
   useEffect(() => {
     if (initialFilter !== selectedFilter) {
@@ -55,7 +65,9 @@ const JobInvocationHostTable = ({
     searchParam: urlSearchQuery = '',
     page: urlPage,
     per_page: urlPerPage,
+    order: urlOrder,
   } = useUrlParams();
+
   const constructFilter = (
     filter = selectedFilter,
     search = urlSearchQuery
@@ -71,11 +83,21 @@ const JobInvocationHostTable = ({
       .join(' AND ');
   };
 
-  const search = constructFilter();
-  const defaultParams = search !== '' ? { search } : {};
-  if (urlPage) defaultParams.page = Number(urlPage);
-  if (urlPerPage) defaultParams.per_page = Number(urlPerPage);
-  const [expandedHost, setExpandedHost] = useState([]);
+  const defaultParams = useMemo(
+    () => ({
+      ...(urlPage ? { page: Number(urlPage) } : {}),
+      ...(urlPerPage ? { per_page: Number(urlPerPage) } : {}),
+      ...(urlOrder ? { order: urlOrder } : {}),
+    }),
+    [urlPage, urlPerPage, urlOrder]
+  );
+
+  useAPI('get', `/job_invocations/${id}/hosts`, {
+    params: {
+      search: defaultParams.search,
+    },
+    key: LIST_TEMPLATE_INVOCATIONS,
+  });
   const { response, status, setAPIOptions } = useAPI(
     'get',
     `/api/job_invocations/${id}/hosts`,
@@ -84,18 +106,93 @@ const JobInvocationHostTable = ({
     }
   );
 
-  const { params } = useSetParamsAndApiAndSearch({
-    defaultParams,
-    apiOptions,
-    setAPIOptions,
-  });
+  const [allPagesResponse, setAllPagesResponse] = useState([]);
+  const apiAllParams = {
+    page: 1,
+    per_page: Math.min(response?.subtotal || 1, MAX_HOSTS_API_SIZE),
+    search: constructFilter(selectedFilter, urlSearchQuery),
+  };
 
-  const { updateSearchQuery: updateSearchQueryBulk } = useBulkSelect({
+  const { response: allResponse, setAPIOptions: setAllAPIOptions } = useAPI(
+    'get',
+    `/api/job_invocations/${id}/hosts`,
+    {
+      params: apiAllParams,
+      key: ALL_JOB_HOSTS,
+    }
+  );
+
+  useEffect(() => {
+    if (response?.subtotal) {
+      setAllAPIOptions(prevOptions => ({
+        ...prevOptions,
+        params: apiAllParams,
+      }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [response?.subtotal, selectedFilter, urlSearchQuery]);
+
+  useEffect(() => {
+    if (allResponse?.results) {
+      setAllPagesResponse(allResponse.results);
+    }
+  }, [allResponse]);
+
+  const {
+    updateSearchQuery: updateSearchQueryBulk,
+    fetchBulkParams,
+    inclusionSet,
+    exclusionSet,
+    ...selectAllOptions
+  } = useBulkSelect({
+    results: response?.results,
+    metadata: {
+      total: response?.total,
+      page: response?.page,
+      selectable: response?.subtotal,
+    },
     initialSearchQuery: urlSearchQuery,
   });
-  const updateSearchQuery = searchQuery => {
-    updateSearchQueryBulk(searchQuery);
-  };
+
+  const {
+    selectAll,
+    selectPage,
+    selectNone,
+    selectedCount,
+    selectOne,
+    areAllRowsOnPageSelected,
+    areAllRowsSelected,
+    isSelected,
+  } = selectAllOptions;
+
+  const allHostIds = allPagesResponse?.map(item => item.id) || [];
+  const selectedIds =
+    areAllRowsSelected() || exclusionSet.size > 0
+      ? allHostIds.filter(hostId => !exclusionSet.has(hostId))
+      : Array.from(inclusionSet);
+
+  const { pageRowCount } = getPageStats({
+    total: response?.total || 0,
+    page: response?.page || urlPage || 1,
+    perPage: response?.per_page || urlPerPage || 0,
+  });
+
+  const selectionToolbar = (
+    <ToolbarItem key="selectAll">
+      <SelectAllCheckbox
+        {...{
+          selectAll,
+          selectPage,
+          selectNone,
+          selectedCount,
+          pageRowCount,
+        }}
+        totalCount={response?.total}
+        areAllRowsOnPageSelected={areAllRowsOnPageSelected()}
+        areAllRowsSelected={areAllRowsSelected()}
+      />
+    </ToolbarItem>
+  );
 
   const controller = 'hosts';
   const memoDefaultSearchProps = useMemo(
@@ -106,50 +203,53 @@ const JobInvocationHostTable = ({
     `/${controller}/auto_complete_search`
   );
 
-  const wrapSetSelectedFilter = filter => {
-    const filterSearch = constructFilter(filter);
-    setAPIOptions(prevOptions => {
-      if (prevOptions.params.search !== filterSearch) {
-        return {
-          ...prevOptions,
-          params: {
-            ...prevOptions.params,
-            search: filterSearch,
-          },
-        };
-      }
-      return prevOptions;
-    });
-    setSelectedFilter(filter);
-    onFilterUpdate(filter);
-  };
+  const wrapSetSelectedFilter = newFilter => {
+    setSelectedFilter(newFilter);
+    onFilterUpdate(newFilter);
 
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      if (!finished || autoRefresh) {
-        setAPIOptions(prevOptions => ({
-          ...prevOptions,
-          params: {
-            ...prevOptions.params,
-          },
-        }));
-      }
-    }, 5000);
-
-    return () => {
-      clearInterval(intervalId);
+    const filterSearch = constructFilter(newFilter, urlSearchQuery);
+
+    const newParams = {
+      ...defaultParams,
+      page: 1,
     };
-  }, [finished, autoRefresh, setAPIOptions]);
+
+    if (filterSearch !== '') {
+      newParams.search = filterSearch;
+    }
+
+    setAPIOptions(prev => ({ ...prev, params: newParams }));
+
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    urlSearchParams.set('page', '1');
+    history.push({ search: urlSearchParams.toString() });
+  };
 
   const wrapSetAPIOptions = newAPIOptions => {
-    setAPIOptions(prevOptions => ({
-      ...prevOptions,
-      params: {
-        ...prevOptions.params,
-        ...newAPIOptions.params,
-        search: constructFilter(undefined, newAPIOptions?.params?.search),
-      },
-    }));
+    const newParams = newAPIOptions?.params ?? newAPIOptions ?? {};
+
+    const filterSearch = constructFilter(
+      selectedFilter,
+      newParams.search ?? urlSearchQuery
+    );
+
+    const mergedParams = {
+      ...defaultParams,
+      ...newParams,
+    };
+
+    if (filterSearch !== '') {
+      mergedParams.search = filterSearch;
+    } else if ('search' in mergedParams) {
+      delete mergedParams.search;
+    }
+
+    setAPIOptions(prev => ({ ...prev, params: mergedParams }));
+
+    const { search: _search, ...paramsForUrl } = mergedParams;
+    const uri = new URI();
+    uri.setSearch(paramsForUrl);
+    history.push({ search: uri.search() });
   };
 
   const combinedResponse = {
@@ -158,8 +258,8 @@ const JobInvocationHostTable = ({
       can_create: false,
       results: response?.results || [],
       total: response?.total || 0,
-      per_page: response?.perPage,
-      page: response?.page,
+      per_page: defaultParams?.perPage,
+      page: defaultParams?.page,
       subtotal: response?.subtotal || 0,
       message: response?.message || 'error',
     },
@@ -213,6 +313,7 @@ const JobInvocationHostTable = ({
       return isExpanding ? [...otherExpandedHosts, host] : otherExpandedHosts;
     });
   const [showAlert, setShowAlert] = useState(false);
+
   return (
     <>
       {showAlert && <PopupAlert setShowAlert={setShowAlert} />}
@@ -223,34 +324,44 @@ const JobInvocationHostTable = ({
         controller="hosts"
         creatable={false}
         replacementResponse={combinedResponse}
-        updateSearchQuery={updateSearchQuery}
+        updateSearchQuery={updateSearchQueryBulk}
         customToolbarItems={[
-          <OpenAlInvocations
-            setShowAlert={setShowAlert}
-            results={results}
-            id={id}
-            key="OpenAlInvocations"
-          />,
-          <JobInvocationHostTableToolbar
+          <DropdownFilter
+            key="dropdown-filter"
             dropdownFilter={selectedFilter}
             setDropdownFilter={wrapSetSelectedFilter}
-            key="JobInvocationHostTableToolbar"
+          />,
+          <CheckboxesActions
+            bulkParams={selectedCount > 0 ? fetchBulkParams() : null}
+            selectedIds={selectedIds}
+            failedCount={failedCount}
+            jobID={id}
+            key="checkboxes-actions"
+            filter={selectedFilter}
           />,
         ]}
+        selectionToolbar={selectionToolbar}
       >
         <Table
           ouiaId="job-invocation-hosts-table"
           columns={columns}
           customEmptyState={
-            status === STATUS_UPPERCASE.RESOLVED && !response?.results?.length
+            status === STATUS_UPPERCASE.RESOLVED && !results.length
               ? customEmptyState
               : null
           }
-          params={params}
+          params={{
+            page: response?.page || Number(urlPage),
+            per_page: response?.per_page || Number(urlPerPage),
+            order: urlOrder,
+          }}
+          page={response?.page || Number(urlPage)}
+          perPage={response?.per_page || Number(urlPerPage)}
           setParams={wrapSetAPIOptions}
           itemCount={response?.subtotal}
-          results={response?.results}
+          results={results}
           url=""
+          showCheckboxes
           refreshData={() => {}}
           errorMessage={
             status === STATUS_UPPERCASE.ERROR && response?.message
@@ -261,9 +372,9 @@ const JobInvocationHostTable = ({
           isDeleteable={false}
           childrenOutsideTbody
         >
-          {results?.map((result, rowIndex) => (
-            <Tbody key={rowIndex}>
-              <Tr ouiaId={`table-row-${rowIndex}`}>
+          {results.map((result, rowIndex) => (
+            <Tbody key={result.id}>
+              <Tr ouiaId={`table-row-${result.id}`}>
                 <Td
                   expand={{
                     rowIndex,
@@ -273,6 +384,7 @@ const JobInvocationHostTable = ({
                     expandId: 'host-expandable',
                   }}
                 />
+                <RowSelectTd rowData={result} {...{ selectOne, isSelected }} />
                 {columnNamesKeys.map(k => (
                   <Td key={k}>{columns[k].wrapper(result)}</Td>
                 ))}
@@ -286,7 +398,7 @@ const JobInvocationHostTable = ({
               >
                 <Td
                   dataLabel={`${result.id}-expandable-content`}
-                  colSpan={columnNamesKeys.length}
+                  colSpan={columnNamesKeys.length + 3}
                 >
                   <ExpandableRowContent>
                     {result.job_status === 'cancelled' ||
@@ -295,7 +407,12 @@ const JobInvocationHostTable = ({
                         {__('A task for this host has not been started')}
                       </div>
                     ) : (
-                      <TemplateInvocation hostID={result.id} jobID={id} />
+                      <TemplateInvocation
+                        hostID={result.id}
+                        jobID={id}
+                        isInTableView
+                        isExpanded={isHostExpanded(result.id)}
+                      />
                     )}
                   </ExpandableRowContent>
                 </Td>
@@ -311,8 +428,7 @@ const JobInvocationHostTable = ({
 JobInvocationHostTable.propTypes = {
   id: PropTypes.string.isRequired,
   targeting: PropTypes.object.isRequired,
-  finished: PropTypes.bool.isRequired,
-  autoRefresh: PropTypes.bool.isRequired,
+  failedCount: PropTypes.number.isRequired,
   initialFilter: PropTypes.string.isRequired,
   onFilterUpdate: PropTypes.func,
 };

data/webpack/JobInvocationDetail/JobInvocationSelectors.js

@@ -1,8 +1,15 @@
-import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
+/* eslint-disable camelcase */
+import {
+  selectAPIResponse,
+  selectAPIStatus,
+} from 'foremanReact/redux/API/APISelectors';
+import { STATUS as APIStatus } from 'foremanReact/constants';
 import {
   JOB_INVOCATION_KEY,
   GET_TASK,
   GET_TEMPLATE_INVOCATION,
+  LIST_TEMPLATE_INVOCATIONS,
+  CURRENT_PERMISSIONS,
 } from './JobInvocationConstants';
 
 export const selectItems = state =>
@@ -13,5 +20,25 @@ export const selectTask = state => selectAPIResponse(state, GET_TASK);
 export const selectTaskCancelable = state =>
   selectTask(state).available_actions?.cancellable || false;
 
-export const selectTemplateInvocation = state =>
-  selectAPIResponse(state, GET_TEMPLATE_INVOCATION);
+export const selectTemplateInvocation = hostID => state =>
+  selectAPIResponse(state, `${GET_TEMPLATE_INVOCATION}_${hostID}`);
+
+export const selectTemplateInvocationStatus = hostID => state =>
+  selectAPIStatus(state, `${GET_TEMPLATE_INVOCATION}_${hostID}`);
+
+export const selectTemplateInvocationList = state =>
+  selectAPIResponse(state, LIST_TEMPLATE_INVOCATIONS)
+    ?.template_invocations_task_by_hosts;
+
+export const selectCurrentPermisions = state =>
+  selectAPIResponse(state, CURRENT_PERMISSIONS);
+
+export const selectHasPermission = permissionRequired => state => {
+  const status = selectAPIStatus(state, CURRENT_PERMISSIONS);
+  const selectCurrentPermissions = selectCurrentPermisions(state)?.results;
+  return status === APIStatus.RESOLVED
+    ? selectCurrentPermissions?.some(
+        permission => permission.name === permissionRequired
+      )
+    : false;
+};

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,
@@ -11,7 +12,6 @@ import {
 } from '@patternfly/react-core/deprecated';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from 'foremanReact/common/helpers';
-import { STATUS as APIStatus } from 'foremanReact/constants';
 import { get } from 'foremanReact/redux/API';
 import {
   cancelJob,
@@ -23,14 +23,12 @@ import {
   GET_REPORT_TEMPLATES,
   GET_REPORT_TEMPLATE_INPUTS,
 } from './JobInvocationConstants';
-import { selectTaskCancelable } from './JobInvocationSelectors';
+import {
+  selectTaskCancelable,
+  selectHasPermission,
+} from './JobInvocationSelectors';
 
-const JobInvocationToolbarButtons = ({
-  jobId,
-  data,
-  currentPermissions,
-  permissionsStatus,
-}) => {
+const JobInvocationToolbarButtons = ({ jobId, data }) => {
   const { succeeded, failed, task, recurrence, permissions } = data;
   const recurringEnabled = recurrence?.state === 'active';
   const canViewForemanTasks = permissions
@@ -40,6 +38,8 @@ const JobInvocationToolbarButtons = ({
     ? permissions.edit_recurring_logics
     : false;
   const isTaskCancelable = useSelector(selectTaskCancelable);
+  const useHasPermission = permissionRequired =>
+    useSelector(selectHasPermission(permissionRequired));
   const [isActionOpen, setIsActionOpen] = useState(false);
   const [reportTemplateJobId, setReportTemplateJobId] = useState(undefined);
   const [templateInputId, setTemplateInputId] = useState(undefined);
@@ -58,12 +58,6 @@ const JobInvocationToolbarButtons = ({
     setIsActionOpen(false);
     onActionFocus();
   };
-  const hasPermission = permissionRequired =>
-    permissionsStatus === APIStatus.RESOLVED
-      ? currentPermissions?.some(
-          permission => permission.name === permissionRequired
-        )
-      : false;
 
   useEffect(() => {
     dispatch(
@@ -142,7 +136,9 @@ const JobInvocationToolbarButtons = ({
       ouiaId="rerun-succeeded-dropdown-item"
       href={foremanUrl(`/job_invocations/${jobId}/rerun?succeeded_only=1`)}
       key="rerun-succeeded"
-      isDisabled={!(succeeded > 0) || !hasPermission('create_job_invocations')}
+      isDisabled={
+        !useHasPermission('create_job_invocations') || !(succeeded > 0)
+      }
       description="Rerun job on successful hosts"
     >
       {__('Rerun successful')}
@@ -151,7 +147,7 @@ const JobInvocationToolbarButtons = ({
       ouiaId="rerun-failed-dropdown-item"
       href={foremanUrl(`/job_invocations/${jobId}/rerun?failed_only=1`)}
       key="rerun-failed"
-      isDisabled={!(failed > 0) || !hasPermission('create_job_invocations')}
+      isDisabled={!useHasPermission('create_job_invocations') || !(failed > 0)}
       description="Rerun job on failed hosts"
     >
       {__('Rerun failed')}
@@ -171,7 +167,9 @@ const JobInvocationToolbarButtons = ({
       onClick={() => dispatch(cancelJob(jobId, false))}
       key="cancel"
       component="button"
-      isDisabled={!isTaskCancelable || !hasPermission('cancel_job_invocations')}
+      isDisabled={
+        !useHasPermission('cancel_job_invocations') || !isTaskCancelable
+      }
       description="Cancel job gracefully"
     >
       {__('Cancel')}
@@ -181,7 +179,9 @@ const JobInvocationToolbarButtons = ({
       onClick={() => dispatch(cancelJob(jobId, true))}
       key="abort"
       component="button"
-      isDisabled={!isTaskCancelable || !hasPermission('cancel_job_invocations')}
+      isDisabled={
+        !useHasPermission('cancel_job_invocations') || !isTaskCancelable
+      }
       description="Cancel job immediately"
     >
       {__('Abort')}
@@ -190,7 +190,8 @@ const JobInvocationToolbarButtons = ({
     <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')}
@@ -210,9 +211,9 @@ const JobInvocationToolbarButtons = ({
             )}
             variant="secondary"
             isDisabled={
+              !useHasPermission('generate_report_templates') ||
               task?.state === STATUS.PENDING ||
-              templateInputId === undefined ||
-              !hasPermission('generate_report_templates')
+              templateInputId === undefined
             }
           >
             {__(`Create report`)}
@@ -234,7 +235,7 @@ const JobInvocationToolbarButtons = ({
                     key="rerun"
                     href={foremanUrl(`/job_invocations/${jobId}/rerun`)}
                     variant="control"
-                    isDisabled={!hasPermission('create_job_invocations')}
+                    isDisabled={!useHasPermission('create_job_invocations')}
                   >
                     {__(`Rerun all`)}
                   </Button>,
@@ -255,12 +256,6 @@ const JobInvocationToolbarButtons = ({
 JobInvocationToolbarButtons.propTypes = {
   jobId: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
-  currentPermissions: PropTypes.array,
-  permissionsStatus: PropTypes.string,
-};
-JobInvocationToolbarButtons.defaultProps = {
-  currentPermissions: undefined,
-  permissionsStatus: undefined,
 };
 
 export default JobInvocationToolbarButtons;