foreman-tasks 1.1.3 → 3.0.0

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

@@ -0,0 +1,212 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Task rendering render with minimal Props 1`] = `
+<Col
+  bsClass="col"
+  componentClass="div"
+  xs={12}
+>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsSize="small"
+    bsStyle="default"
+    className="reload-button"
+    disabled={false}
+    onClick={[MockFunction]}
+  >
+    <span
+      className="glyphicon glyphicon-refresh "
+    />
+    Start  auto-reloading
+  </Button>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsSize="small"
+    bsStyle="default"
+    className="dynflow-button"
+    disabled={true}
+    href="/foreman_tasks/dynflow/"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <span
+      data-original-title="dynflow_enable_console Setting is off"
+      title="dynflow_enable_console Setting is off"
+    >
+      Dynflow console
+    </span>
+  </Button>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsSize="small"
+    bsStyle="default"
+    className="resume-button"
+    data-original-title="You do not have permission"
+    disabled={true}
+    onClick={[Function]}
+    title="You do not have permission"
+  >
+    Resume
+  </Button>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsSize="small"
+    bsStyle="default"
+    className="cancel-button"
+    data-original-title="You do not have permission"
+    disabled={true}
+    onClick={[Function]}
+    title="You do not have permission"
+  >
+    Cancel
+  </Button>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsSize="small"
+    bsStyle="default"
+    className="unlock-button"
+    data-original-title="You do not have permission"
+    disabled={true}
+    onClick={[MockFunction]}
+    title="You do not have permission"
+  >
+    Unlock
+  </Button>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsSize="small"
+    bsStyle="default"
+    className="force-unlock-button"
+    data-original-title="You do not have permission"
+    disabled={true}
+    onClick={[MockFunction]}
+    title="You do not have permission"
+  >
+    Force Unlock
+  </Button>
+</Col>
+`;
+
+exports[`Task rendering render with some Props 1`] = `
+<Col
+  bsClass="col"
+  componentClass="div"
+  xs={12}
+>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsSize="small"
+    bsStyle="default"
+    className="reload-button"
+    disabled={false}
+    onClick={[MockFunction]}
+  >
+    <span
+      className="glyphicon glyphicon-refresh spin"
+    />
+    Stop  auto-reloading
+  </Button>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsSize="small"
+    bsStyle="default"
+    className="dynflow-button"
+    disabled={false}
+    href="/foreman_tasks/dynflow/"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <span>
+      Dynflow console
+    </span>
+  </Button>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsSize="small"
+    bsStyle="default"
+    className="resume-button"
+    disabled={true}
+    onClick={[Function]}
+  >
+    Resume
+  </Button>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsSize="small"
+    bsStyle="default"
+    className="cancel-button"
+    disabled={true}
+    onClick={[Function]}
+  >
+    Cancel
+  </Button>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsSize="small"
+    bsStyle="default"
+    className="parent-button"
+    disabled={false}
+    href="/foreman_tasks/tasks/parent-id"
+  >
+    Parent task
+  </Button>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsSize="small"
+    bsStyle="default"
+    className="subtask-button"
+    disabled={false}
+    href="/foreman_tasks/tasks/test/sub_tasks"
+  >
+    Sub tasks
+  </Button>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsSize="small"
+    bsStyle="default"
+    className="unlock-button"
+    disabled={false}
+    onClick={[MockFunction]}
+  >
+    Unlock
+  </Button>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsSize="small"
+    bsStyle="default"
+    className="force-unlock-button"
+    disabled={false}
+    onClick={[MockFunction]}
+  >
+    Force Unlock
+  </Button>
+</Col>
+`;

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,7 @@
       transform: rotate(360deg);
     }
   }
+  .dynflow-button > span {
+    pointer-events: auto;
+  }
 }

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

@@ -1,115 +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,
-  FOREMAN_TASK_DETAILS_TOGGLE_UNLOCK_MODAL,
-  FOREMAN_TASK_DETAILS_TOGGLE_FORCE_UNLOCK_MODAL,
-} from './TaskDetailsConstants';
-import {
-  cancelTaskRequest,
-  resumeTaskRequest,
-} from '../TasksTable/TasksTableActions';
-
-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();
-  }
+  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
+    )
+  );
 };
 
-export const fetchTaskDetails = (
-  id,
-  timeoutId,
-  refetchTaskDetailsAction
-) => async dispatch => {
-  showLoading();
-  dispatch(startRequest());
-  await getTasksDetails(id, dispatch, timeoutId, refetchTaskDetailsAction);
+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 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();
-  }
-};
-
-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,
-});
-
-export const toggleUnlockModal = () => ({
-  type: FOREMAN_TASK_DETAILS_TOGGLE_UNLOCK_MODAL,
-});
-export const toggleForceUnlockModal = () => ({
-  type: FOREMAN_TASK_DETAILS_TOGGLE_FORCE_UNLOCK_MODAL,
-});
-
-export { cancelTaskRequest, resumeTaskRequest };