foreman-tasks 0.16.0 → 0.16.1

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

@@ -0,0 +1,87 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Tab, Tabs } from 'patternfly-react';
+import { translate as __ } from 'foremanReact/common/I18n';
+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 './TaskDetails.scss';
+
+class TaskDetails extends Component {
+  componentDidMount() {
+    const { timeoutId, refetchTaskDetails, fetchTaskDetails } = this.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;
+    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>
+    );
+  }
+}
+
+TaskDetails.propTypes = {
+  label: PropTypes.string,
+  fetchTaskDetails: PropTypes.func,
+  ...Task.propTypes,
+  ...RunningSteps.propTypes,
+  ...Errors.propTypes,
+  ...Locks.propTypes,
+  ...Raw.propTypes,
+};
+TaskDetails.defaultProps = {
+  label: '',
+  fetchTaskDetails: () => null,
+  ...Task.defaultProps,
+  ...RunningSteps.defaultProps,
+  ...Errors.defaultProps,
+  ...Locks.defaultProps,
+  ...Raw.defaultProps,
+};
+
+export default TaskDetails;

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

@@ -0,0 +1,63 @@
+.task-details-react {
+  .progress-label-top-right {
+    font-size: 11px;
+    text-align: right;
+  }
+  a,
+  button {
+    margin-right: 3px;
+  }
+  .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;
+    -o-animation: spin 1s infinite linear;
+    animation: spin 1s infinite linear;
+    -webkit-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    -ms-transform-origin: 50% 50%; /* IE 9 */
+  }
+
+  @-moz-keyframes spin {
+    from {
+      -moz-transform: rotate(0deg);
+    }
+    to {
+      -moz-transform: rotate(360deg);
+    }
+  }
+
+  @-webkit-keyframes spin {
+    from {
+      -webkit-transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import TaskDetails from './TaskDetails';
+
+storiesOf('TaskDetails', module).add('TaskDetails', () => <TaskDetails />);

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

@@ -0,0 +1,109 @@
+import API from 'foremanReact/API';
+import {
+  showLoading,
+  hideLoading,
+} from 'foremanReact/components/Layout/LayoutActions';
+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';
+
+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
+) => dispatch => {
+  showLoading();
+  dispatch(startRequest());
+  getTasksDetails(id, dispatch, timeoutId, refetchTaskDetailsAction);
+};
+
+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,
+});

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

@@ -0,0 +1,18 @@
+export const FOREMAN_TASK_DETAILS_INIT = 'FOREMAN_TASK_DETAILS_INIT';
+
+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 FOREMAN_TASK_DETAILS_TOGGLE_UNLOCK_MODAL =
+  'FOREMAN_TASK_DETAILS_TOGGLE_UNLOCK_MODAL';
+export const FOREMAN_TASK_DETAILS_TOGGLE_FORCE_UNLOCK_MODAL =
+  'FOREMAN_TASK_DETAILS_TOGGLE_FORCE_UNLOCK_MODAL';

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

@@ -0,0 +1,44 @@
+import Immutable from 'seamless-immutable';
+import {
+  FOREMAN_TASK_DETAILS_FETCH_TASK_REQUEST,
+  FOREMAN_TASK_DETAILS_FETCH_TASK_SUCCESS,
+  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';
+
+const initialState = Immutable({});
+
+export default (state = initialState, action) => {
+  const { type, payload } = action;
+  let { taskReload, timeoutId } = state;
+
+  switch (type) {
+    case FOREMAN_TASK_DETAILS_FETCH_TASK_REQUEST:
+      return state.set('loading', true);
+    case FOREMAN_TASK_DETAILS_FETCH_TASK_SUCCESS:
+      if (payload.state === 'stopped') {
+        clearTimeout(state.timeoutId);
+        taskReload = false;
+        timeoutId = null;
+      }
+      return state.merge({
+        loading: false,
+        ...payload,
+        taskReload,
+        timeoutId,
+      });
+    case FOREMAN_TASK_DETAILS_STOP_POLLING:
+      return state.merge({ taskReload: false, timeoutId: null });
+    case FOREMAN_TASK_DETAILS_START_POLLING:
+      clearTimeout(state.timeoutId);
+      return state.merge({ taskReload: true, timeoutId: payload.timeoutId });
+    case FOREMAN_TASK_DETAILS_TOGGLE_UNLOCK_MODAL:
+      return state.set('showUnlockModal', !state.showUnlockModal);
+    case FOREMAN_TASK_DETAILS_TOGGLE_FORCE_UNLOCK_MODAL:
+      return state.set('showForceUnlockModal', !state.showForceUnlockModal);
+    default:
+      return state;
+  }
+};

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

@@ -0,0 +1,83 @@
+import { selectForemanTasks } from '../../ForemanTasksSelectors';
+
+export const selectTaskDetails = state =>
+  selectForemanTasks(state).taskDetails || {};
+
+export const selectStartAt = state => selectTaskDetails(state).start_at || null;
+
+export const selectStartBefore = state =>
+  selectTaskDetails(state).start_before || null;
+
+export const selectStartedAt = state =>
+  selectTaskDetails(state).started_at || null;
+
+export const selectEndedAt = state => selectTaskDetails(state).ended_at || null;
+
+export const selectInput = state => selectTaskDetails(state).input || [];
+
+export const selectOutput = state => selectTaskDetails(state).output || {};
+
+export const selectResumable = state =>
+  selectTaskDetails(state).resumable || false;
+
+export const selectCancellable = state =>
+  selectTaskDetails(state).cancellable || false;
+
+export const selectErrors = state => {
+  const { humanized } = selectTaskDetails(state);
+  return humanized ? humanized.errors : [];
+};
+
+export const selectProgress = state =>
+  selectTaskDetails(state).progress * 100 || 0;
+
+export const selectUsername = state =>
+  selectTaskDetails(state).username || null;
+
+export const selectLabel = state => selectTaskDetails(state).label || null;
+
+export const selectExecutionPlan = state =>
+  selectTaskDetails(state).execution_plan || {};
+
+export const selectFailedSteps = state =>
+  selectTaskDetails(state).failed_steps || [];
+
+export const selectRunningSteps = state =>
+  selectTaskDetails(state).running_steps || [];
+
+export const selectHelp = state => selectTaskDetails(state).help || null;
+
+export const selectHasSubTasks = state =>
+  selectTaskDetails(state).has_sub_tasks || false;
+
+export const selectAllowDangerousActions = state =>
+  selectTaskDetails(state).allowDangerousActions || false;
+
+export const selectLocks = state => selectTaskDetails(state).locks || [];
+
+export const selectUsernamePath = state =>
+  selectTaskDetails(state).username_path || null;
+
+export const selectAction = state => selectTaskDetails(state).action || null;
+
+export const selectState = state => selectTaskDetails(state).state || null;
+
+export const selectResult = state => selectTaskDetails(state).result || null;
+
+export const selectTimeoutId = state =>
+  selectTaskDetails(state).timeoutId || null;
+
+export const selectTaskReload = state =>
+  selectTaskDetails(state).taskReload || false;
+
+export const selectParentTask = state =>
+  selectTaskDetails(state).parent_task_id || '';
+
+export const selectShowUnlockModal = state =>
+  selectTaskDetails(state).showUnlockModal || false;
+
+export const selectShowForceUnlockModal = state =>
+  selectTaskDetails(state).showForceUnlockModal || false;
+
+export const selectExternalId = state =>
+  selectTaskDetails(state).external_id || null;

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

@@ -0,0 +1 @@
+export const getTaskID = () => window.location.pathname.split('/').slice(-1)[0];

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

@@ -0,0 +1,12 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import TaskDetails from '../TaskDetails';
+
+const fixtures = {
+  'render without Props': {},
+};
+
+describe('TaskDetails', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(TaskDetails, fixtures));
+});

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

@@ -0,0 +1,20 @@
+import { testActionSnapshotWithFixtures } from 'react-redux-test-utils';
+import API from 'foremanReact/API';
+import {
+  taskReloadStop,
+  taskReloadStart,
+  fetchTaskDetails,
+} from '../TaskDetailsActions';
+
+jest.mock('foremanReact/API');
+
+API.get.mockImplementation(async () => ({ data: 'some-data' }));
+
+const fixtures = {
+  'should start reload': () => taskReloadStart(1),
+  'should stop reload': () => taskReloadStop(2),
+  'should fetch-task-details and success': () => fetchTaskDetails(),
+};
+
+describe('TaskDetails - Actions', () =>
+  testActionSnapshotWithFixtures(fixtures));