foreman-tasks 13.0.0 → 13.1.0

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

@@ -0,0 +1,65 @@
+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 showingRunningSteps =
+    state === 'running' ||
+    state === 'pending' ||
+    state === 'paused' ||
+    runningSteps.length > 0;
+
+  return (
+    <div
+      id="execution-details-panel"
+      data-ouia-component-id="execution-details-panel"
+    >
+      {showingRunningSteps ? (
+        <RunningSteps
+          executionPlan={executionPlan}
+          result={result}
+          runningSteps={runningSteps}
+          id={id}
+          cancelStep={cancelStep}
+          taskReload={taskReload}
+          taskReloadStart={taskReloadStart}
+        />
+      ) : (
+        <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

@@ -6,45 +6,6 @@
   .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/TaskDetailsSelectors.js

@@ -39,11 +39,6 @@ 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)

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

@@ -0,0 +1,194 @@
+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();
+  });
+});

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

@@ -1,4 +1,5 @@
 export const minProps = {
+  id: 'a15dd820-32f1-4ced-9ab7-c0fab8234c47',
   cancelStep: jest.fn(),
   taskReload: false,
   taskReloadStop: jest.fn(),
@@ -6,3 +7,101 @@ export const minProps = {
   taskProgressToggle: jest.fn(),
   apiStatus: 'RESOLVED',
 };
+
+/** Props for snapshots that exercise the Execution details tab alongside the overview. */
+export const taskDetailsWithExecutionTabDefaults = {
+  ...minProps,
+  locks: [
+    {
+      exclusive: false,
+      resource_type: 'User',
+      resource_id: 4,
+      link: null,
+    },
+  ],
+  links: [],
+  executionPlan: { state: 'stopped', cancellable: false },
+  failedSteps: [],
+  runningSteps: [],
+  dependsOn: [],
+  blocks: [],
+  action: 'Refresh foo',
+  state: 'stopped',
+  result: 'success',
+  progress: 100,
+  startAt: '',
+  startedAt: '',
+  endedAt: '',
+  startBefore: '',
+};
+
+const SAMPLE_FAILED_STEP = {
+  error: {
+    exception_class: 'RuntimeError',
+    message:
+      'Action Actions::Katello::EventQueue::Monitor is already active',
+    backtrace: [
+      "/home/example/gems/dynflow-1.2.3/lib/dynflow/action/singleton.rb:15:in `rescue in singleton_lock!'",
+    ],
+  },
+  action_class: 'Actions::Katello::EventQueue::Monitor',
+  state: 'error',
+  input:
+    '{"locale"=>"en",\n "current_request_id"=>nil,\n "current_user_id"=>4}\n',
+  output: '{}\n',
+};
+
+const SAMPLE_RUNNING_STEP = {
+  cancellable: false,
+  id: 1,
+  action_class: 'Actions::DynflowExample',
+  state: 'running',
+  input: '{}',
+  output: '{}',
+};
+
+const SAMPLE_DEPENDS_ON = [
+  {
+    id: '123',
+    action: 'Actions::FooBar',
+    humanized: 'Foo Bar Action',
+    state: 'stopped',
+    result: 'success',
+  },
+];
+
+export const fixtureFailedExecutionDetail = {
+  ...taskDetailsWithExecutionTabDefaults,
+  result: 'error',
+  state: 'stopped',
+  failedSteps: [SAMPLE_FAILED_STEP],
+};
+
+export const fixtureRunningExecutionDetail = {
+  ...taskDetailsWithExecutionTabDefaults,
+  state: 'running',
+  runningSteps: [SAMPLE_RUNNING_STEP],
+};
+
+export const fixtureWithOverviewMessages = {
+  ...taskDetailsWithExecutionTabDefaults,
+  help: '<strong>See logs</strong> for more.',
+  output: {
+    messages: ['partial output'],
+    result: 'error',
+  },
+};
+
+export const fixtureWithDependencies = {
+  ...taskDetailsWithExecutionTabDefaults,
+  dependsOn: SAMPLE_DEPENDS_ON,
+  blocks: [
+    {
+      id: '789',
+      action: 'Actions::Test',
+      humanized: 'Test Action',
+      state: 'paused',
+      result: 'warning',
+    },
+  ],
+};