foreman-tasks 2.0.0 → 3.0.2

data/webpack/ForemanTasks/Components/TaskDetails/Components/__tests__/__snapshots__/TaskInfo.test.js.snap

@@ -290,10 +290,14 @@ exports[`TaskInfo rendering render with Props 1`] = `
           </b>
         </span>
       </p>
-      <p>
-        A paused task represents a process that has not finished properly. Any task in paused state can lead to potential inconsistency and needs to be resolved.
-The recommended approach is to investigate the error messages below and in 'errors' tab, address the primary cause of the issue and resume the task.
-      </p>
+      <p
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "A paused task represents a process that has not finished properly. Any task in paused state can lead to potential inconsistency and needs to be resolved.
+The recommended approach is to investigate the error messages below and in 'errors' tab, address the primary cause of the issue and resume the task.",
+          }
+        }
+      />
     </Col>
   </Row>
 </Grid>

data/webpack/ForemanTasks/Components/TaskDetails/TaskDetails.js

@@ -1,82 +1,129 @@
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Tab, Tabs } from 'patternfly-react';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import MessageBox from 'foremanReact/components/common/MessageBox';
 import Task from './Components/Task';
 import RunningSteps from './Components/RunningSteps';
 import Errors from './Components/Errors';
 import Locks from './Components/Locks';
 import Raw from './Components/Raw';
 import { getTaskID } from './TasksDetailsHelper';
+import { TaskSkeleton } from './Components/TaskSkeleton';
 
 import './TaskDetails.scss';
 
-class TaskDetails extends Component {
-  componentDidMount() {
-    const { timeoutId, refetchTaskDetails, fetchTaskDetails } = this.props;
+const TaskDetails = ({
+  executionPlan,
+  failedSteps,
+  runningSteps,
+  locks,
+  cancelStep,
+  taskReloadStart,
+  taskReloadStop,
+  APIerror,
+  ...props
+}) => {
+  const id = getTaskID();
+  const { taskReload, status, isLoading } = props;
 
-    fetchTaskDetails(getTaskID(), timeoutId, refetchTaskDetails);
-  }
-  componentWillUnmount() {
-    this.props.taskReloadStop(this.props.timeoutId);
-  }
-  render() {
-    const {
-      externalId,
-      startedAt,
-      endedAt,
-      label,
-      input,
-      output,
-      executionPlan,
-      failedSteps,
-      runningSteps,
-      locks,
-    } = this.props;
-    const id = getTaskID();
-    const resumable = executionPlan ? executionPlan.state === 'paused' : false;
-    const cancellable = executionPlan ? executionPlan.cancellable : false;
+  useEffect(() => {
+    taskReloadStart(id);
+    return () => {
+      taskReloadStop();
+    };
+  }, [id, taskReloadStart, taskReloadStop]);
+
+  const taskProgressToggle = () => {
+    if (taskReload) {
+      taskReloadStop();
+    } else {
+      taskReloadStart(id);
+    }
+  };
+
+  if (status === STATUS.ERROR) {
     return (
-      <div className="task-details-react well">
-        <Tabs defaultActiveKey={1} animation={false} id="task-details-tabs">
-          <Tab eventKey={1} title={__('Task')}>
-            <Task {...{ ...this.props, cancellable, resumable, id }} />
-          </Tab>
-          <Tab eventKey={2} title={__('Running Steps')}>
-            <RunningSteps
-              executionPlan={executionPlan}
-              runningSteps={runningSteps}
-            />
-          </Tab>
-          <Tab eventKey={3} title={__('Errors')}>
-            <Errors executionPlan={executionPlan} failedSteps={failedSteps} />
-          </Tab>
-          <Tab eventKey={4} title={__('Locks')}>
-            <Locks locks={locks} />
-          </Tab>
-          <Tab eventKey={5} title={__('Raw')}>
-            <Raw
-              {...{ id, label, startedAt, endedAt, input, output, externalId }}
-            />
-          </Tab>
-        </Tabs>
-      </div>
+      <MessageBox
+        key="task-details-error"
+        icontype="error-circle-o"
+        msg={__(`Could not receive data: ${APIerror && APIerror.message}`)}
+      />
     );
   }
-}
+  const resumable = executionPlan ? executionPlan.state === 'paused' : false;
+  const cancellable = executionPlan ? executionPlan.cancellable : false;
+  return (
+    <div className="task-details-react well">
+      <Tabs defaultActiveKey={1} animation={false} id="task-details-tabs">
+        <Tab eventKey={1} title={__('Task')}>
+          {isLoading ? (
+            <TaskSkeleton />
+          ) : (
+            <Task
+              {...{
+                ...props,
+                cancellable,
+                resumable,
+                id,
+                status,
+                taskProgressToggle,
+                taskReloadStart,
+              }}
+            />
+          )}
+        </Tab>
+        <Tab eventKey={2} disabled={isLoading} title={__('Running Steps')}>
+          <RunningSteps
+            runningSteps={runningSteps}
+            id={id}
+            cancelStep={cancelStep}
+            taskReload={taskReload}
+            taskReloadStart={taskReloadStart}
+          />
+        </Tab>
+        <Tab eventKey={3} disabled={isLoading} title={__('Errors')}>
+          <Errors executionPlan={executionPlan} failedSteps={failedSteps} />
+        </Tab>
+        <Tab eventKey={4} disabled={isLoading} title={__('Locks')}>
+          <Locks locks={locks} />
+        </Tab>
+        <Tab eventKey={5} disabled={isLoading} title={__('Raw')}>
+          <Raw
+            id={id}
+            label={props.label}
+            startedAt={props.startedAt}
+            endedAt={props.endedAt}
+            input={props.input}
+            output={props.output}
+            externalId={props.externalId}
+          />
+        </Tab>
+      </Tabs>
+    </div>
+  );
+};
 
 TaskDetails.propTypes = {
   label: PropTypes.string,
-  fetchTaskDetails: PropTypes.func,
+  runningSteps: PropTypes.array,
+  cancelStep: PropTypes.func.isRequired,
+  taskReload: PropTypes.bool.isRequired,
+  status: PropTypes.oneOf(Object.keys(STATUS)),
+  APIerror: PropTypes.object,
+  taskReloadStop: PropTypes.func.isRequired,
+  taskReloadStart: PropTypes.func.isRequired,
   ...Task.propTypes,
-  ...RunningSteps.propTypes,
   ...Errors.propTypes,
   ...Locks.propTypes,
   ...Raw.propTypes,
 };
 TaskDetails.defaultProps = {
   label: '',
-  fetchTaskDetails: () => null,
+  runningSteps: [],
+  APIerror: null,
+  status: STATUS.PENDING,
   ...Task.defaultProps,
   ...RunningSteps.defaultProps,
   ...Errors.defaultProps,

data/webpack/ForemanTasks/Components/TaskDetails/TaskDetails.scss

@@ -10,20 +10,6 @@
   .container {
     margin: 0;
   }
-  /*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the top of the
- * compiled file, but it's generally better to create a new file per style scope.
- *
- *= require_self
- *= require_tree .
- */
-
   .spin {
     -webkit-animation: spin 1s infinite linear;
     -moz-animation: spin 1s infinite linear;
@@ -60,4 +46,17 @@
       transform: rotate(360deg);
     }
   }
+  .dynflow-button > span {
+    pointer-events: auto;
+  }
+
+  pre {
+    white-space: pre;
+    word-break: normal;
+  }
+
+  .param-name {
+    display: inline-block;
+    width: 10em;
+  }
 }

data/webpack/ForemanTasks/Components/TaskDetails/TaskDetailsActions.js

@@ -1,100 +1,62 @@
-import API from 'foremanReact/API';
+import { post, get } from 'foremanReact/redux/API';
+import { addToast } from 'foremanReact/redux/actions/toasts';
+import { translate as __ } from 'foremanReact/common/I18n';
 import {
-  showLoading,
-  hideLoading,
-} from 'foremanReact/components/Layout/LayoutActions';
+  withInterval,
+  stopInterval,
+} from 'foremanReact/redux/middlewares/IntervalMiddleware';
+import { foremanTasksApiPath, foremanTasksPath } from '../common/urlHelpers';
+import { TASK_STEP_CANCEL, FOREMAN_TASK_DETAILS } from './TaskDetailsConstants';
 import {
-  FOREMAN_TASK_DETAILS_FETCH_TASK_REQUEST,
-  FOREMAN_TASK_DETAILS_FETCH_TASK_SUCCESS,
-  FOREMAN_TASK_DETAILS_FETCH_TASK_FAILURE,
-  FOREMAN_TASK_DETAILS_STOP_POLLING,
-  FOREMAN_TASK_DETAILS_START_POLLING,
-} from './TaskDetailsConstants';
-
-export const taskReloadStop = timeoutId => {
-  if (timeoutId) {
-    clearTimeout(timeoutId);
-  }
-  return {
-    type: FOREMAN_TASK_DETAILS_STOP_POLLING,
-    payload: { timeoutId },
-  };
-};
-
-export const taskReloadStart = (
-  timeoutId,
-  refetchTaskDetails,
-  id,
-  loading = false
-) => {
-  if (!timeoutId) {
-    timeoutId = setInterval(() => refetchTaskDetails(id, loading), 5000);
-  }
-  return {
-    type: FOREMAN_TASK_DETAILS_START_POLLING,
-    payload: { timeoutId },
-  };
-};
-
-export const refetchTaskDetails = (id, loading) => dispatch => {
-  if (!loading) {
-    showLoading();
-    dispatch(startRequest());
-    reloadTasksDetails(id, dispatch);
-  }
-};
-
-const reloadTasksDetails = async (id, dispatch) => {
-  try {
-    const { data } = await API.get(`/foreman_tasks/api/tasks/${id}/details`);
-    dispatch(requestSuccess(data));
-  } catch (error) {
-    dispatch(requestFailure(error));
-    document.location.reload();
-  } finally {
-    hideLoading();
-  }
-};
-
-export const fetchTaskDetails = (
-  id,
-  timeoutId,
-  refetchTaskDetailsAction
-) => async dispatch => {
-  showLoading();
-  dispatch(startRequest());
-  await getTasksDetails(id, dispatch, timeoutId, refetchTaskDetailsAction);
+  errorToastData,
+  infoToastData,
+  successToastData,
+} from '../common/ToastsHelpers';
+
+export const taskReloadStop = () => stopInterval(FOREMAN_TASK_DETAILS);
+
+export const taskReloadStart = id => dispatch => {
+  dispatch(
+    withInterval(
+      get({
+        key: FOREMAN_TASK_DETAILS,
+        url: foremanTasksApiPath(`${id}/details?include_permissions`),
+        handleSuccess: ({ data }) => {
+          if (data.state === 'stopped') {
+            dispatch(stopInterval(FOREMAN_TASK_DETAILS));
+          }
+        },
+        handleError: () => {
+          dispatch(stopInterval(FOREMAN_TASK_DETAILS));
+        },
+      }),
+      5000
+    )
+  );
 };
 
-const getTasksDetails = async (
-  id,
-  dispatch,
-  timeoutId,
-  refetchTaskDetailsAction
-) => {
-  try {
-    const { data } = await API.get(`/foreman_tasks/api/tasks/${id}/details`);
-    dispatch(requestSuccess(data));
-    if (data.state !== 'stopped') {
-      dispatch(taskReloadStart(timeoutId, refetchTaskDetailsAction, id));
-    }
-  } catch (error) {
-    dispatch(requestFailure(error));
-  } finally {
-    hideLoading();
-  }
+export const cancelStep = (taskId, stepId) => async dispatch => {
+  dispatch(addToast(infoToastData(`${__('Trying to cancel step')} ${stepId}`)));
+  dispatch(
+    post({
+      key: TASK_STEP_CANCEL,
+      url: foremanTasksPath(`${taskId}/cancel_step?step_id=${stepId}`),
+      handleSuccess: () => {
+        dispatch(addToast(successToastData(`${stepId} {__('Step Canceled')}`)));
+      },
+      handleError: error => {
+        dispatch(
+          addToast(
+            errorToastData(
+              `${__('Could not cancel step.')} ${__(
+                'Error:'
+              )} ${stepId} ${error.response &&
+                error.response.data &&
+                error.response.data.error}`
+            )
+          )
+        );
+      },
+    })
+  );
 };
-
-const startRequest = () => ({
-  type: FOREMAN_TASK_DETAILS_FETCH_TASK_REQUEST,
-});
-
-const requestSuccess = data => ({
-  type: FOREMAN_TASK_DETAILS_FETCH_TASK_SUCCESS,
-  payload: data,
-});
-
-const requestFailure = error => ({
-  type: FOREMAN_TASK_DETAILS_FETCH_TASK_FAILURE,
-  payload: error,
-});

data/webpack/ForemanTasks/Components/TaskDetails/TaskDetailsConstants.js

@@ -1,13 +1,4 @@
-export const FOREMAN_TASK_DETAILS_INIT = 'FOREMAN_TASK_DETAILS_INIT';
+export const FOREMAN_TASK_DETAILS = 'FOREMAN_TASK_DETAILS';
+export const FOREMAN_TASK_DETAILS_SUCCESS = 'FOREMAN_TASK_DETAILS_SUCCESS';
 
-export const FOREMAN_TASK_DETAILS_FETCH_TASK_REQUEST =
-  'FOREMAN_TASK_DETAILS_FETCH_TASK_REQUEST';
-export const FOREMAN_TASK_DETAILS_FETCH_TASK_SUCCESS =
-  'FOREMAN_TASK_DETAILS_FETCH_TASK_SUCCESS';
-export const FOREMAN_TASK_DETAILS_FETCH_TASK_FAILURE =
-  'FOREMAN_TASK_DETAILS_FETCH_TASK_FAILURE';
-
-export const FOREMAN_TASK_DETAILS_STOP_POLLING =
-  'FOREMAN_TASK_DETAILS_STOP_POLLING';
-export const FOREMAN_TASK_DETAILS_START_POLLING =
-  'FOREMAN_TASK_DETAILS_START_POLLING';
+export const TASK_STEP_CANCEL = 'TASK_STEP_CANCEL';

data/webpack/ForemanTasks/Components/TaskDetails/TaskDetailsSelectors.js

@@ -1,79 +1,108 @@
+/* eslint-disable camelcase */
+import {
+  selectAPIResponse,
+  selectAPIByKey,
+} from 'foremanReact/redux/API/APISelectors';
+import { selectDoesIntervalExist } from 'foremanReact/redux/middlewares/IntervalMiddleware/IntervalSelectors';
+import { STATUS } from 'foremanReact/constants';
 import { selectForemanTasks } from '../../ForemanTasksSelectors';
+import { FOREMAN_TASK_DETAILS } from './TaskDetailsConstants';
 
 export const selectTaskDetails = state =>
   selectForemanTasks(state).taskDetails || {};
 
-export const selectStartAt = state => selectTaskDetails(state).start_at || null;
+export const selectTaskDetailsResponse = state =>
+  selectAPIResponse(state, FOREMAN_TASK_DETAILS);
+
+export const selectStartAt = state =>
+  selectTaskDetailsResponse(state)?.start_at;
 
 export const selectStartBefore = state =>
-  selectTaskDetails(state).start_before || null;
+  selectTaskDetailsResponse(state)?.start_before;
 
 export const selectStartedAt = state =>
-  selectTaskDetails(state).started_at || null;
+  selectTaskDetailsResponse(state)?.started_at;
 
-export const selectEndedAt = state => selectTaskDetails(state).ended_at || null;
+export const selectEndedAt = state =>
+  selectTaskDetailsResponse(state)?.ended_at;
 
-export const selectInput = state => selectTaskDetails(state).input || [];
+export const selectInput = state =>
+  selectTaskDetailsResponse(state).input || [];
 
-export const selectOutput = state => selectTaskDetails(state).output || {};
+export const selectOutput = state =>
+  selectTaskDetailsResponse(state).output || {};
 
 export const selectResumable = state =>
-  selectTaskDetails(state).resumable || false;
+  selectTaskDetailsResponse(state).resumable || false;
 
 export const selectCancellable = state =>
-  selectTaskDetails(state).cancellable || false;
+  selectTaskDetailsResponse(state).cancellable || false;
 
 export const selectErrors = state => {
-  const { humanized } = selectTaskDetails(state);
+  const { humanized } = selectTaskDetailsResponse(state);
   return humanized ? humanized.errors : [];
 };
 
 export const selectProgress = state =>
-  selectTaskDetails(state).progress
-    ? parseFloat((selectTaskDetails(state).progress * 100).toFixed(2))
+  selectTaskDetailsResponse(state).progress
+    ? Math.trunc(selectTaskDetailsResponse(state).progress * 100)
     : 0;
 
 export const selectUsername = state =>
-  selectTaskDetails(state).username || null;
+  selectTaskDetailsResponse(state)?.username;
 
-export const selectLabel = state => selectTaskDetails(state).label || null;
+export const selectLabel = state => selectTaskDetailsResponse(state)?.label;
 
 export const selectExecutionPlan = state =>
-  selectTaskDetails(state).execution_plan || {};
+  selectTaskDetailsResponse(state).execution_plan || {};
 
 export const selectFailedSteps = state =>
-  selectTaskDetails(state).failed_steps || [];
+  selectTaskDetailsResponse(state).failed_steps || [];
 
 export const selectRunningSteps = state =>
-  selectTaskDetails(state).running_steps || [];
+  selectTaskDetailsResponse(state).running_steps || [];
 
-export const selectHelp = state => selectTaskDetails(state).help || null;
+export const selectHelp = state => selectTaskDetailsResponse(state)?.help;
 
 export const selectHasSubTasks = state =>
-  selectTaskDetails(state).has_sub_tasks || false;
+  selectTaskDetailsResponse(state).has_sub_tasks || false;
 
-export const selectLocks = state => selectTaskDetails(state).locks || [];
+export const selectLocks = state =>
+  selectTaskDetailsResponse(state).locks || [];
 
 export const selectUsernamePath = state =>
-  selectTaskDetails(state).username_path || null;
+  selectTaskDetailsResponse(state)?.username_path;
 
-export const selectAction = state => selectTaskDetails(state).action || '';
+export const selectAction = state =>
+  selectTaskDetailsResponse(state).action || '';
 
-export const selectState = state => selectTaskDetails(state).state || null;
+export const selectState = state => selectTaskDetailsResponse(state)?.state;
 
-export const selectResult = state => selectTaskDetails(state).result || null;
+export const selectResult = state => selectTaskDetailsResponse(state)?.result;
 
 export const selectTimeoutId = state =>
-  selectTaskDetails(state).timeoutId || null;
+  selectTaskDetailsResponse(state)?.timeoutId;
 
 export const selectTaskReload = state =>
-  selectTaskDetails(state).taskReload || false;
+  !!selectDoesIntervalExist(state, FOREMAN_TASK_DETAILS);
 
 export const selectParentTask = state =>
-  selectTaskDetails(state).parent_task_id || '';
+  selectTaskDetailsResponse(state).parent_task_id || '';
 
 export const selectExternalId = state =>
-  selectTaskDetails(state).external_id || null;
+  selectTaskDetailsResponse(state)?.external_id;
 
 export const selectDynflowEnableConsole = state =>
-  selectTaskDetails(state).dynflow_enable_console || false;
+  selectTaskDetailsResponse(state).dynflow_enable_console || false;
+
+export const selectCanEdit = state =>
+  selectTaskDetailsResponse(state).can_edit || false;
+
+export const selectStatus = state => selectTaskDetailsResponse(state).status;
+
+export const selectAPIError = state =>
+  selectTaskDetailsResponse(state)?.APIerror;
+
+export const selectIsLoading = state =>
+  !!selectAPIByKey(state, FOREMAN_TASK_DETAILS).response &&
+  selectStatus(state) === STATUS.PENDING;