foreman-tasks 13.0.0 → 13.2.0

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import RunningSteps from './Components/RunningSteps';
+import Errors from './Components/Errors';
+
+const ExecutionDetails = ({
+  state,
+  runningSteps,
+  cancelStep,
+  id,
+  taskReload,
+  taskReloadStart,
+  executionPlan,
+  failedSteps,
+  result,
+}) => {
+  const hasFailedSteps = failedSteps.length > 0;
+  const hasRunningSteps = runningSteps.length > 0;
+  const isActiveExecutionState =
+    state === 'running' || state === 'pending' || state === 'paused';
+
+  // Prefer Errors when failed steps exist (e.g. paused-after-error). Only fall
+  // back to the RunningSteps empty state for active tasks with no failures.
+  const showRunningSteps =
+    hasRunningSteps || (isActiveExecutionState && !hasFailedSteps);
+  const showErrors = hasFailedSteps || !showRunningSteps;
+
+  return (
+    <div
+      id="execution-details-panel"
+      data-ouia-component-id="execution-details-panel"
+    >
+      {showRunningSteps && (
+        <RunningSteps
+          executionPlan={executionPlan}
+          result={result}
+          runningSteps={runningSteps}
+          id={id}
+          cancelStep={cancelStep}
+          taskReload={taskReload}
+          taskReloadStart={taskReloadStart}
+        />
+      )}
+      {showErrors && (
+        <Errors executionPlan={executionPlan} failedSteps={failedSteps} />
+      )}
+    </div>
+  );
+};
+
+ExecutionDetails.propTypes = {
+  state: PropTypes.string,
+  result: PropTypes.string,
+  runningSteps: PropTypes.array,
+  cancelStep: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  taskReload: PropTypes.bool.isRequired,
+  taskReloadStart: PropTypes.func.isRequired,
+  executionPlan: PropTypes.shape({}),
+  failedSteps: PropTypes.array,
+};
+
+ExecutionDetails.defaultProps = {
+  state: '',
+  result: undefined,
+  runningSteps: [],
+  executionPlan: {},
+  failedSteps: [],
+};
+
+export default ExecutionDetails;

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

@@ -6,17 +6,22 @@ import { STATUS } from 'foremanReact/constants';
 import { usePermissions } from 'foremanReact/common/hooks/Permissions/permissionHooks';
 import { ResourceLoadFailedEmptyState } from 'foremanReact/components/common/EmptyState';
 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 ExecutionDetails from './ExecutionDetails';
 import Dependencies from './Components/Dependencies';
 import { TASKS_PATH, VIEW_FOREMAN_TASKS } from './TaskDetailsConstants';
-import { getTaskID } from './TasksDetailsHelper';
 import { TaskSkeleton } from './Components/TaskSkeleton';
 
 import './TaskDetails.scss';
 
+export const TASK_DETAILS_TAB_KEYS = Object.freeze({
+  EXECUTION: 'execution',
+  DEPENDENCIES: 'dependencies',
+  LOCKS: 'locks',
+  RAW: 'raw',
+});
+
 const TaskDetails = ({
   executionPlan,
   failedSteps,
@@ -31,11 +36,11 @@ const TaskDetails = ({
   apiStatus,
   apiErrorMessage,
   apiErrorCode,
+  id,
   ...props
 }) => {
-  const id = getTaskID();
-  const { taskReload, isLoading, result } = props;
-  const [activeTabKey, setActiveTabKey] = useState(1);
+  const { taskReload, isLoading } = props;
+  const [activeTab, setActiveTab] = useState(TASK_DETAILS_TAB_KEYS.EXECUTION);
   const hasViewPermission = usePermissions([VIEW_FOREMAN_TASKS]);
 
   useEffect(() => {
@@ -76,7 +81,7 @@ const TaskDetails = ({
   const cancellable = executionPlan ? executionPlan.cancellable : false;
   const lockRecords = locks.concat(links);
 
-  const taskComponentProps = {
+  const taskProps = {
     ...props,
     cancellable,
     resumable,
@@ -87,49 +92,49 @@ const TaskDetails = ({
 
   return (
     <div className="task-details-react">
+      <section className="task-details-overview-section">
+        {isLoading ? <TaskSkeleton /> : <Task {...taskProps} />}
+      </section>
       <Tabs
+        aria-label={__('Task details')}
         id="task-details-tabs"
         ouiaId="task-details-tabs"
-        activeKey={activeTabKey}
-        onSelect={(_event, tabKey) => setActiveTabKey(tabKey)}
+        activeKey={activeTab}
         mountOnEnter
+        onSelect={(_e, tabKey) => setActiveTab(tabKey)}
       >
         <Tab
-          eventKey={1}
-          title={<TabTitleText>{__('Task')}</TabTitleText>}
-          aria-label={__('Task')}
-          ouiaId="task-details-tab-task"
-        >
-          {isLoading ? <TaskSkeleton /> : <Task {...taskComponentProps} />}
-        </Tab>
-        <Tab
-          eventKey={2}
-          title={<TabTitleText>{__('Running Steps')}</TabTitleText>}
           isDisabled={isLoading}
-          aria-label={__('Running Steps')}
-          ouiaId="task-details-tab-running-steps"
+          eventKey={TASK_DETAILS_TAB_KEYS.EXECUTION}
+          title={<TabTitleText>{__('Execution details')}</TabTitleText>}
+          aria-label={__('Execution details')}
+          ouiaId="task-details-tab-execution-details"
         >
-          <RunningSteps
-            executionPlan={executionPlan}
-            result={result}
-            runningSteps={runningSteps}
-            id={id}
-            cancelStep={cancelStep}
-            taskReload={taskReload}
-            taskReloadStart={taskReloadStart}
-          />
+          {!isLoading && (
+            <ExecutionDetails
+              state={props.state}
+              result={props.result}
+              runningSteps={runningSteps}
+              cancelStep={cancelStep}
+              id={id}
+              taskReload={taskReload}
+              taskReloadStart={taskReloadStart}
+              executionPlan={executionPlan}
+              failedSteps={failedSteps}
+            />
+          )}
         </Tab>
         <Tab
-          eventKey={3}
-          title={<TabTitleText>{__('Errors')}</TabTitleText>}
+          eventKey={TASK_DETAILS_TAB_KEYS.DEPENDENCIES}
           isDisabled={isLoading}
-          aria-label={__('Errors')}
-          ouiaId="task-details-tab-errors"
+          title={<TabTitleText>{__('Dependencies')}</TabTitleText>}
+          aria-label={__('Dependencies')}
+          ouiaId="task-details-tab-dependencies"
         >
-          <Errors executionPlan={executionPlan} failedSteps={failedSteps} />
+          <Dependencies dependsOn={dependsOn} blocks={blocks} />
         </Tab>
         <Tab
-          eventKey={4}
+          eventKey={TASK_DETAILS_TAB_KEYS.LOCKS}
           title={<TabTitleText>{__('Locks')}</TabTitleText>}
           isDisabled={isLoading}
           aria-label={__('Locks')}
@@ -138,16 +143,7 @@ const TaskDetails = ({
           <Locks locks={lockRecords} />
         </Tab>
         <Tab
-          eventKey={5}
-          title={<TabTitleText>{__('Dependencies')}</TabTitleText>}
-          isDisabled={isLoading}
-          aria-label={__('Dependencies')}
-          ouiaId="task-details-tab-dependencies"
-        >
-          <Dependencies dependsOn={dependsOn} blocks={blocks} />
-        </Tab>
-        <Tab
-          eventKey={6}
+          eventKey={TASK_DETAILS_TAB_KEYS.RAW}
           title={<TabTitleText>{__('Raw')}</TabTitleText>}
           isDisabled={isLoading}
           aria-label={__('Raw')}
@@ -169,7 +165,9 @@ const TaskDetails = ({
 };
 
 TaskDetails.propTypes = {
+  id: PropTypes.string.isRequired,
   label: PropTypes.string,
+  result: PropTypes.string,
   runningSteps: PropTypes.array,
   cancelStep: PropTypes.func.isRequired,
   taskReload: PropTypes.bool.isRequired,
@@ -181,10 +179,10 @@ TaskDetails.propTypes = {
   links: PropTypes.array,
   dependsOn: PropTypes.array,
   blocks: PropTypes.array,
+  executionPlan: PropTypes.shape({}),
+  failedSteps: PropTypes.array,
   ...Task.propTypes,
-  ...Errors.propTypes,
   ...Locks.propTypes,
-  ...Dependencies.propTypes,
   ...Raw.propTypes,
 };
 TaskDetails.defaultProps = {
@@ -194,11 +192,10 @@ TaskDetails.defaultProps = {
   links: [],
   dependsOn: [],
   blocks: [],
+  failedSteps: [],
+  executionPlan: {},
   ...Task.defaultProps,
-  ...RunningSteps.defaultProps,
-  ...Errors.defaultProps,
   ...Locks.defaultProps,
-  ...Dependencies.defaultProps,
   ...Raw.defaultProps,
 };
 

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

@@ -3,48 +3,10 @@
   #pf-tab-section-1-task-details-tabs > button {
     margin-right: 3px;
   }
+
   .container {
     margin: 0;
   }
-  .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);
-    }
-  }
-  .dynflow-button > span {
-    pointer-events: auto;
-  }
 
   pre {
     white-space: pre-wrap;

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

@@ -6,7 +6,11 @@ import {
   stopInterval,
 } from 'foremanReact/redux/middlewares/IntervalMiddleware';
 import { foremanTasksApiPath, foremanTasksPath } from '../common/urlHelpers';
-import { TASK_STEP_CANCEL, FOREMAN_TASK_DETAILS } from './TaskDetailsConstants';
+import {
+  TASK_STEP_CANCEL,
+  FOREMAN_TASK_DETAILS,
+  TASK_RELOAD_INTERVAL_MS,
+} from './TaskDetailsConstants';
 import {
   errorToastData,
   infoToastData,
@@ -30,7 +34,7 @@ export const taskReloadStart = id => dispatch => {
           dispatch(stopInterval(FOREMAN_TASK_DETAILS));
         },
       }),
-      5000
+      TASK_RELOAD_INTERVAL_MS
     )
   );
 };

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

@@ -3,3 +3,5 @@ export const FOREMAN_TASK_DETAILS_SUCCESS = 'FOREMAN_TASK_DETAILS_SUCCESS';
 export const TASKS_PATH = '/foreman_tasks/tasks';
 export const TASK_STEP_CANCEL = 'TASK_STEP_CANCEL';
 export const VIEW_FOREMAN_TASKS = 'view_foreman_tasks';
+
+export const TASK_RELOAD_INTERVAL_MS = 5000;

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

@@ -5,7 +5,7 @@ import {
   selectAPIError as selectAPIErrorByKey,
 } from 'foremanReact/redux/API/APISelectors';
 import { selectDoesIntervalExist } from 'foremanReact/redux/middlewares/IntervalMiddleware/IntervalSelectors';
-import { STATUS } from 'foremanReact/constants';
+import { STATUS, PERCENT_MULTIPLIER } from 'foremanReact/constants';
 import { selectForemanTasks } from '../../ForemanTasksSelectors';
 import { FOREMAN_TASK_DETAILS } from './TaskDetailsConstants';
 
@@ -39,14 +39,9 @@ export const selectResumable = state =>
 export const selectCancellable = state =>
   selectTaskDetailsResponse(state).cancellable || false;
 
-export const selectErrors = state => {
-  const { humanized } = selectTaskDetailsResponse(state);
-  return humanized ? humanized.errors : [];
-};
-
 export const selectProgress = state =>
   selectTaskDetailsResponse(state).progress
-    ? Math.trunc(selectTaskDetailsResponse(state).progress * 100)
+    ? Math.trunc(selectTaskDetailsResponse(state).progress * PERCENT_MULTIPLIER)
     : 0;
 
 export const selectUsername = state =>

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

@@ -0,0 +1,241 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import ExecutionDetails from '../ExecutionDetails';
+import {
+  fixtureFailedExecutionDetail,
+  fixtureRunningExecutionDetail,
+} from './TaskDetails.fixtures';
+
+const rtlBaseProps = {
+  cancelStep: jest.fn(),
+  taskReloadStart: jest.fn(),
+  id: 'a15dd820-32f1-4ced-9ab7-c0fab8234c47',
+  taskReload: false,
+};
+
+describe('ExecutionDetails', () => {
+  it('renders execution details panel with OUIA id', () => {
+    render(
+      <ExecutionDetails
+        {...rtlBaseProps}
+        state="stopped"
+        runningSteps={[]}
+        executionPlan={{ state: 'stopped', cancellable: false }}
+        failedSteps={[]}
+      />
+    );
+
+    expect(
+      document.querySelector(
+        '[data-ouia-component-id="execution-details-panel"]'
+      )
+    ).toBeInTheDocument();
+    expect(
+      document.getElementById('execution-details-panel')
+    ).toBeInTheDocument();
+  });
+
+  it('shows Errors pane when stopped with no running steps', () => {
+    render(
+      <ExecutionDetails
+        {...rtlBaseProps}
+        state="stopped"
+        runningSteps={[]}
+        executionPlan={{ state: 'stopped', cancellable: false }}
+        failedSteps={[]}
+      />
+    );
+
+    expect(
+      screen.getByRole('heading', { name: /^no errors found$/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/the task finished with no errors or warnings/i)
+    ).toBeInTheDocument();
+  });
+
+  it('shows RunningSteps when stopped but runningSteps list is non-empty', () => {
+    render(
+      <ExecutionDetails
+        {...rtlBaseProps}
+        state="stopped"
+        runningSteps={[
+          {
+            cancellable: false,
+            id: 1,
+            action_class: 'Actions::Stale',
+            state: 'paused',
+            input: '{}',
+            output: '{}',
+          },
+        ]}
+        executionPlan={{ state: 'stopped', cancellable: false }}
+        failedSteps={[]}
+      />
+    );
+
+    expect(
+      screen.getByRole('heading', { name: 'Warning alert: Running step 1' })
+    ).toBeInTheDocument();
+  });
+
+  it('forwards executionPlan and result to RunningSteps when state is pending without steps', () => {
+    render(
+      <ExecutionDetails
+        {...rtlBaseProps}
+        state="pending"
+        runningSteps={[]}
+        executionPlan={{ state: 'planned', cancellable: false }}
+        result="pending"
+        failedSteps={[]}
+      />
+    );
+
+    expect(
+      screen.getByRole('heading', { level: 2, name: /planned task/i })
+    ).toBeInTheDocument();
+  });
+
+  it('shows temporarily suspended messaging when pending, plan running, result pending', () => {
+    render(
+      <ExecutionDetails
+        {...rtlBaseProps}
+        state="pending"
+        runningSteps={[]}
+        executionPlan={{ state: 'running', cancellable: false }}
+        result="pending"
+        failedSteps={[]}
+      />
+    );
+
+    expect(
+      screen.getByRole('heading', {
+        level: 4,
+        name: /temporarily suspended step/i,
+      })
+    ).toBeInTheDocument();
+  });
+
+  it('routes failed steps through Errors pane when stopped', () => {
+    render(
+      <ExecutionDetails
+        {...rtlBaseProps}
+        {...fixtureFailedExecutionDetail}
+        executionPlan={fixtureFailedExecutionDetail.executionPlan}
+        failedSteps={fixtureFailedExecutionDetail.failedSteps}
+      />
+    );
+
+    expect(
+      screen.getByRole('tab', {
+        name: /action actions::katello::eventqueue::monitor is already active/i,
+      })
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText(/failed task errors/i)).toBeInTheDocument();
+    expect(screen.getByText('Exception:')).toBeInTheDocument();
+  });
+
+  it('renders RunningSteps with cancel when task is running', () => {
+    const cancelStep = jest.fn();
+
+    render(
+      <ExecutionDetails
+        {...rtlBaseProps}
+        cancelStep={cancelStep}
+        {...fixtureRunningExecutionDetail}
+        runningSteps={[
+          {
+            ...fixtureRunningExecutionDetail.runningSteps[0],
+            cancellable: true,
+          },
+        ]}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+  });
+
+  it('shows RunningSteps when state is paused without running steps', () => {
+    render(
+      <ExecutionDetails
+        {...rtlBaseProps}
+        state="paused"
+        runningSteps={[]}
+        executionPlan={{ state: 'paused', cancellable: false }}
+        failedSteps={[]}
+      />
+    );
+
+    expect(screen.getByText(/no running steps/i)).toBeInTheDocument();
+    expect(
+      screen.queryByRole('heading', { name: /^no errors found$/i })
+    ).not.toBeInTheDocument();
+  });
+
+  it('shows RunningSteps when state is paused with running steps', () => {
+    render(
+      <ExecutionDetails
+        {...rtlBaseProps}
+        state="paused"
+        runningSteps={[
+          {
+            ...fixtureRunningExecutionDetail.runningSteps[0],
+            state: 'paused',
+          },
+        ]}
+        executionPlan={{ state: 'paused', cancellable: false }}
+        failedSteps={[]}
+      />
+    );
+
+    expect(
+      screen.getByRole('heading', { name: 'Warning alert: Running step 1' })
+    ).toBeInTheDocument();
+    expect(screen.getByText('paused')).toBeInTheDocument();
+  });
+
+  it('shows Errors when state is paused with failed steps', () => {
+    render(
+      <ExecutionDetails
+        {...rtlBaseProps}
+        {...fixtureFailedExecutionDetail}
+        state="paused"
+        executionPlan={{ state: 'paused', cancellable: false }}
+        runningSteps={[]}
+      />
+    );
+
+    expect(
+      screen.getByRole('tab', {
+        name: /action actions::katello::eventqueue::monitor is already active/i,
+      })
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText(/failed task errors/i)).toBeInTheDocument();
+    expect(screen.getByText('Exception:')).toBeInTheDocument();
+    expect(screen.queryByText(/no running steps/i)).not.toBeInTheDocument();
+  });
+
+  it('shows Errors and RunningSteps when paused with both failed and running steps', () => {
+    render(
+      <ExecutionDetails
+        {...rtlBaseProps}
+        {...fixtureFailedExecutionDetail}
+        state="paused"
+        executionPlan={{ state: 'paused', cancellable: false }}
+        runningSteps={[
+          {
+            ...fixtureRunningExecutionDetail.runningSteps[0],
+            state: 'suspended',
+          },
+        ]}
+      />
+    );
+
+    expect(
+      screen.getByRole('heading', { name: 'Warning alert: Running step 1' })
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText(/failed task errors/i)).toBeInTheDocument();
+  });
+});