foreman_remote_execution 16.7.0 → 17.1.0

data/webpack/JobInvocationDetail/JobInvocationHostTable.js

@@ -39,10 +39,9 @@ import { CheckboxesActions } from './CheckboxesActions';
 import DropdownFilter from './DropdownFilter';
 import Columns, {
   JOB_INVOCATION_HOSTS,
-  LIST_TEMPLATE_INVOCATIONS,
   STATUS_UPPERCASE,
-  ALL_JOB_HOSTS,
   AWAITING_STATUS_FILTER,
+  AUTO_REFRESH_INTERVAL_MS,
 } from './JobInvocationConstants';
 import { TemplateInvocation } from './TemplateInvocation';
 import { RowActions } from './TemplateInvocationComponents/TemplateActionButtons';
@@ -51,8 +50,8 @@ import { PopupAlert } from './OpenAllInvocationsModal';
 const JobInvocationHostTable = ({
   id,
   initialFilter,
+  jobFinished,
   onFilterUpdate,
-  statusLabel,
   targeting,
 }) => {
   const columns = Columns();
@@ -69,7 +68,17 @@ const JobInvocationHostTable = ({
 
   // Expansive items
   const [expandedHost, setExpandedHost] = useState(new Set());
-  const prevStatusLabel = useRef(statusLabel);
+  const prevJobFinished = useRef(jobFinished);
+  const prevFilter = useRef('');
+  const prevId = useRef(id);
+  const pollTimeoutId = useRef(null);
+  const currentPollParams = useRef({});
+  const mountedRef = useRef(true);
+  const requestIdRef = useRef(0);
+  const jobFinishedRef = useRef(jobFinished);
+  useEffect(() => {
+    jobFinishedRef.current = jobFinished;
+  }, [jobFinished]);
 
   const [hostInvocationStates, setHostInvocationStates] = useState({});
 
@@ -153,33 +162,63 @@ const JobInvocationHostTable = ({
     [initialFilter, urlSearchQuery]
   );
 
-  const handleResponse = useCallback((data, key) => {
-    if (key === JOB_INVOCATION_HOSTS) {
-      const ids = data.data.results.map(i => i.id);
-
-      setApiResponse(data.data);
-      setAllHostsIds(ids);
-    }
+  const [hostPermissions, setHostPermissions] = useState({});
 
+  const updateHostsState = useCallback(data => {
+    const ids = data.data.results.map(i => i.id);
+    setApiResponse(data.data);
+    setAllHostsIds(ids);
     setStatus(STATUS_UPPERCASE.RESOLVED);
+
+    const resultsWithPermissions = data.data.results.filter(r => r.permissions);
+    if (resultsWithPermissions.length > 0) {
+      setHostPermissions(prev => {
+        const updated = { ...prev };
+        resultsWithPermissions.forEach(r => {
+          updated[r.id] = { task: r.task, permissions: r.permissions };
+        });
+        return updated;
+      });
+    }
   }, []);
 
   // Call hosts data with params
   const makeApiCall = useCallback(
-    (requestParams, callParams = {}) => {
+    requestParams => {
+      requestIdRef.current += 1;
+      const thisRequest = requestIdRef.current;
       dispatch(
         APIActions.get({
-          key: callParams.key ?? ALL_JOB_HOSTS,
-          url: callParams.url ?? `/api/job_invocations/${id}/hosts`,
+          key: JOB_INVOCATION_HOSTS,
+          url: `/api/job_invocations/${id}/hosts`,
           params: requestParams,
-          handleSuccess: data => handleResponse(data, callParams.key),
-          handleError: () => setStatus(STATUS_UPPERCASE.ERROR),
+          handleSuccess: data => {
+            if (thisRequest !== requestIdRef.current) return;
+            if (!mountedRef.current) return;
+            updateHostsState(data);
+            if (!jobFinishedRef.current) {
+              pollTimeoutId.current = setTimeout(
+                () => makeApiCall(currentPollParams.current),
+                AUTO_REFRESH_INTERVAL_MS
+              );
+            } else {
+              pollTimeoutId.current = null;
+            }
+          },
+          handleError: () => {
+            if (thisRequest !== requestIdRef.current) return;
+            if (!mountedRef.current) return;
+            pollTimeoutId.current = null;
+            setStatus(STATUS_UPPERCASE.ERROR);
+          },
           errorToast: ({ response }) =>
-            response?.data?.error?.full_messages?.[0] || response,
+            response?.data?.error?.full_messages?.[0] ||
+            response?.data?.error?.message ||
+            __('Failed to load host invocation data'),
         })
       );
     },
-    [dispatch, id, handleResponse]
+    [dispatch, id, updateHostsState]
   );
 
   const filterApiCall = useCallback(
@@ -202,7 +241,14 @@ const JobInvocationHostTable = ({
         finalParams.search = filterSearch;
       }
 
-      makeApiCall(finalParams, { key: JOB_INVOCATION_HOSTS });
+      finalParams.include_permissions = true;
+
+      currentPollParams.current = { ...finalParams };
+      delete currentPollParams.current.include_permissions;
+      clearTimeout(pollTimeoutId.current);
+      pollTimeoutId.current = null;
+
+      makeApiCall(finalParams);
 
       const urlSearchParams = new URLSearchParams(window.location.search);
 
@@ -222,43 +268,38 @@ const JobInvocationHostTable = ({
     ]
   );
 
-  // Filter change
-  const handleFilterChange = useCallback(
-    newFilter => {
-      onFilterUpdate(newFilter);
-    },
-    [onFilterUpdate]
-  );
-
   // Effects
   // run after mount
   const initializedRef = useRef(false);
   useEffect(() => {
     if (!initializedRef.current) {
-      // Job Invo template load
-      makeApiCall(
-        {},
-        {
-          url: `/job_invocations/${id}/hosts`,
-          key: LIST_TEMPLATE_INVOCATIONS,
-        }
-      );
-
       if (initialFilter === '') {
         onFilterUpdate('all_statuses');
       }
       initializedRef.current = true;
     }
-  }, [makeApiCall, id, initialFilter, onFilterUpdate]);
+  }, [initialFilter, onFilterUpdate]);
 
   useEffect(() => {
-    if (initialFilter !== '') filterApiCall();
-
-    if (statusLabel !== prevStatusLabel.current) {
-      prevStatusLabel.current = statusLabel;
+    const filterChanged = initialFilter !== prevFilter.current;
+    const statusChanged = jobFinished !== prevJobFinished.current;
+    const idChanged = id !== prevId.current;
+
+    if ((filterChanged || statusChanged || idChanged) && initialFilter !== '') {
+      prevFilter.current = initialFilter;
+      prevJobFinished.current = jobFinished;
+      prevId.current = id;
       filterApiCall();
     }
-  }, [initialFilter, statusLabel, id, filterApiCall]);
+  }, [initialFilter, jobFinished, id, filterApiCall]);
+
+  useEffect(
+    () => () => {
+      mountedRef.current = false;
+      clearTimeout(pollTimeoutId.current);
+    },
+    []
+  );
 
   const {
     updateSearchQuery: updateSearchQueryBulk,
@@ -403,7 +444,7 @@ const JobInvocationHostTable = ({
           <DropdownFilter
             key="dropdown-filter"
             dropdownFilter={initialFilter}
-            setDropdownFilter={handleFilterChange}
+            setDropdownFilter={onFilterUpdate}
           />,
           <CheckboxesActions
             bulkParams={selectedCount > 0 ? fetchBulkParams() : null}
@@ -472,7 +513,12 @@ const JobInvocationHostTable = ({
                     <Td key={k}>{columns[k].wrapper(result)}</Td>
                   ))}
                   <Td isActionCell>
-                    <RowActions hostID={result.id} jobID={id} />
+                    <RowActions
+                      hostID={result.id}
+                      jobID={id}
+                      task={hostPermissions[result.id]?.task}
+                      permissions={hostPermissions[result.id]?.permissions}
+                    />
                   </Td>
                 </Tr>
                 <Tr
@@ -541,13 +587,13 @@ JobInvocationHostTable.propTypes = {
   id: PropTypes.string.isRequired,
   targeting: PropTypes.object.isRequired,
   initialFilter: PropTypes.string.isRequired,
-  statusLabel: PropTypes.string,
+  jobFinished: PropTypes.bool,
   onFilterUpdate: PropTypes.func,
 };
 
 JobInvocationHostTable.defaultProps = {
   onFilterUpdate: () => {},
-  statusLabel: undefined,
+  jobFinished: false,
 };
 
 export default JobInvocationHostTable;

data/webpack/JobInvocationDetail/JobInvocationSelectors.js

@@ -5,25 +5,17 @@ import {
 } from 'foremanReact/redux/API/APISelectors';
 import {
   JOB_INVOCATION_KEY,
-  GET_TASK,
   GET_TEMPLATE_INVOCATION,
-  LIST_TEMPLATE_INVOCATIONS,
 } from './JobInvocationConstants';
 
 export const selectItems = state =>
   selectAPIResponse(state, JOB_INVOCATION_KEY);
 
-export const selectTask = state => selectAPIResponse(state, GET_TASK);
-
 export const selectTaskCancelable = state =>
-  selectTask(state).available_actions?.cancellable || false;
+  selectItems(state).task?.cancellable || false;
 
 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;

data/webpack/JobInvocationDetail/JobInvocationSystemStatusChart.js

@@ -23,7 +23,10 @@ import {
   global_palette_blue_300 as inProgressColor,
   global_palette_green_500 as successedColor,
 } from '@patternfly/react-tokens';
-import { STATUS_TITLES } from './JobInvocationConstants';
+import {
+  STATUS_TITLES,
+  DEFAULT_CHART_LEGEND_WIDTH,
+} from './JobInvocationConstants';
 import './JobInvocationDetail.scss';
 
 const JobInvocationSystemStatusChart = ({
@@ -52,7 +55,7 @@ const JobInvocationSystemStatusChart = ({
     return '0';
   };
   const chartSize = 105;
-  const [legendWidth, setLegendWidth] = useState(270);
+  const [legendWidth, setLegendWidth] = useState(DEFAULT_CHART_LEGEND_WIDTH);
 
   // Calculates chart legend width based on its content
   useEffect(() => {

data/webpack/JobInvocationDetail/JobInvocationToolbarButtons.js

@@ -58,6 +58,12 @@ const JobInvocationToolbarButtons = ({ jobId, data }) => {
     );
   }, [jobId, reportTemplateJobId, templateInputId]);
 
+  const isCreateReportDisabled =
+    !canGenerateReportTemplates ||
+    task?.state === STATUS.RUNNING ||
+    task?.state === STATUS.PENDING ||
+    reportHref === undefined;
+
   const onActionFocus = useCallback(() => {
     const element = document.getElementById(
       `toggle-split-button-action-primary-${jobId}`
@@ -135,9 +141,7 @@ const JobInvocationToolbarButtons = ({ jobId, data }) => {
             <DropdownItem
               ouiaId="change-enabled-recurring-dropdown-item"
               onClick={() =>
-                dispatch(
-                  enableRecurringLogic(recurrence?.id, recurringEnabled, jobId)
-                )
+                dispatch(enableRecurringLogic(recurrence?.id, recurringEnabled))
               }
               key="change-enabled-recurring"
               component="button"
@@ -153,9 +157,7 @@ const JobInvocationToolbarButtons = ({ jobId, data }) => {
             </DropdownItem>,
             <DropdownItem
               ouiaId="cancel-recurring-dropdown-item"
-              onClick={() =>
-                dispatch(cancelRecurringLogic(recurrence?.id, jobId))
-              }
+              onClick={() => dispatch(cancelRecurringLogic(recurrence?.id))}
               key="cancel-recurring"
               component="button"
               isDisabled={
@@ -168,7 +170,7 @@ const JobInvocationToolbarButtons = ({ jobId, data }) => {
             </DropdownItem>,
           ]
         : [],
-    [recurrence, recurringEnabled, canEditRecurringLogic, dispatch, jobId]
+    [recurrence, recurringEnabled, canEditRecurringLogic, dispatch]
   );
 
   const dropdownItems = useMemo(
@@ -280,11 +282,7 @@ const JobInvocationToolbarButtons = ({ jobId, data }) => {
             className="button-create-report"
             href={reportHref}
             variant="secondary"
-            isDisabled={
-              !canGenerateReportTemplates ||
-              task?.state === STATUS.PENDING ||
-              reportHref === undefined
-            }
+            isDisabled={isCreateReportDisabled}
           >
             {__(`Create report`)}
           </Button>

data/webpack/JobInvocationDetail/TemplateInvocation.js

@@ -11,6 +11,9 @@ import {
   showTemplateInvocationUrl,
   templateInvocationPageUrl,
   GET_TEMPLATE_INVOCATION,
+  AUTO_REFRESH_INTERVAL_MS,
+  CLIPBOARD_COPIED_EXIT_DELAY_MS,
+  CLIPBOARD_DEFAULT_EXIT_DELAY_MS,
 } from './JobInvocationConstants';
 import {
   selectTemplateInvocationStatus,
@@ -41,7 +44,11 @@ const CopyToClipboard = ({ fullOutput }) => {
       textId="code-content"
       aria-label="Copy to clipboard"
       onClick={e => onClick(e, fullOutput)}
-      exitDelay={copied ? 1500 : 600}
+      exitDelay={
+        copied
+          ? CLIPBOARD_COPIED_EXIT_DELAY_MS
+          : CLIPBOARD_DEFAULT_EXIT_DELAY_MS
+      }
       maxWidth="110px"
       variant="plain"
       onTooltipHidden={() => setCopied(false)}
@@ -67,7 +74,7 @@ export const TemplateInvocation = ({
   showCommand,
   setShowCommand,
 }) => {
-  const intervalRef = useRef(null);
+  const timeoutRef = useRef(null);
   const templateURL = showTemplateInvocationUrl(hostID, jobID);
   const hostDetailsPageUrl = useForemanHostDetailsPageUrl();
 
@@ -81,43 +88,48 @@ export const TemplateInvocation = ({
   }, [response]);
 
   useEffect(() => {
-    const dispatchFetch = () => {
+    let cancelled = false;
+
+    const schedulePoll = () => {
+      if (cancelled) return;
       dispatch(
         APIActions.get({
           url: templateURL,
           key: `${GET_TEMPLATE_INVOCATION}_${hostID}`,
+          handleSuccess: ({ data }) => {
+            if (cancelled) return;
+            const isFinished = data?.finished ?? true;
+            // eslint-disable-next-line camelcase
+            const autoRefresh = data?.auto_refresh || false;
+            if (!isFinished && autoRefresh) {
+              timeoutRef.current = setTimeout(
+                schedulePoll,
+                AUTO_REFRESH_INTERVAL_MS
+              );
+            } else {
+              timeoutRef.current = null;
+            }
+          },
+          handleError: () => {
+            if (cancelled) return;
+            timeoutRef.current = null;
+          },
         })
       );
     };
 
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-      intervalRef.current = null;
-    }
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = null;
 
     if (isExpanded) {
-      if (isEmpty(responseRef.current)) {
-        dispatchFetch();
-      }
-
-      intervalRef.current = setInterval(() => {
-        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);
+      if (responseRef.current?.finished) return undefined;
+      schedulePoll();
     }
 
     return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
+      cancelled = true;
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
     };
   }, [isExpanded, dispatch, templateURL, hostID]);
 

data/webpack/JobInvocationDetail/TemplateInvocationComponents/OutputCodeBlock.js

@@ -7,6 +7,7 @@ import React, {
 import PropTypes from 'prop-types';
 import { Button } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { MS_PER_SECOND } from 'foremanReact/constants';
 
 export const OutputCodeBlock = ({ code, showOutputType, scrollElement }) => {
   let lineCounter = 0;
@@ -122,7 +123,7 @@ export const OutputCodeBlock = ({ code, showOutputType, scrollElement }) => {
         <div key={index} className={`line ${line.output_type}`}>
           <span
             className="counter"
-            title={new Date(line.timestamp * 1000).toISOString()}
+            title={new Date(line.timestamp * MS_PER_SECOND).toISOString()}
           >
             {lineCounter.toString().padStart(4, '\u00A0')}:{' '}
           </span>

data/webpack/JobInvocationDetail/TemplateInvocationComponents/TemplateActionButtons.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Flex, FlexItem, Button } from '@patternfly/react-core';
 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 { selectTemplateInvocationList } from '../JobInvocationSelectors';
 import './index.scss';
 
 const actions = ({
@@ -81,11 +80,9 @@ const actions = ({
   },
 });
 
-export const RowActions = ({ hostID, jobID }) => {
+export const RowActions = ({ hostID, jobID, task, permissions }) => {
   const dispatch = useDispatch();
-  const response = useSelector(selectTemplateInvocationList)?.[hostID];
-  if (!response?.permissions) return null;
-  const { task, permissions } = response;
+  if (!permissions) return null;
   const { id: taskID, cancellable: taskCancellable } = task || {};
   const getActions = actions({
     taskID,
@@ -216,4 +213,18 @@ TemplateActionButtons.defaultProps = {
 RowActions.propTypes = {
   hostID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   jobID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  task: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    cancellable: PropTypes.bool,
+  }),
+  permissions: PropTypes.shape({
+    view_foreman_tasks: PropTypes.bool,
+    cancel_job_invocations: PropTypes.bool,
+    execute_jobs: PropTypes.bool,
+  }),
+};
+
+RowActions.defaultProps = {
+  task: null,
+  permissions: null,
 };

data/webpack/JobInvocationDetail/TemplateInvocationComponents/index.scss

@@ -1,5 +1,4 @@
 .jobs-table-action-item a {
-
     color: inherit;
     text-decoration: none;