Fixes #39348 - implement executiondetails tab, and combine errors and running steps into it

app/services/foreman_tasks/troubleshooting_help_generator.rb

@@ -67,7 +67,7 @@ def generic_info
         i.add_line _('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.')
-        i.add_line _("The recommended approach is to investigate the error messages below and in 'errors' tab, "\
+        i.add_line _("The recommended approach is to investigate the error messages below and in 'Execution details' tab, "\
                      'address the primary cause of the issue and resume the task.')
         if (link = troubleshooting_link)
           i.add_link(link)

webpack/ForemanTasks/Components/TaskDetails/Components/TaskInfo.js

@@ -54,7 +54,6 @@ const TaskInfo = props => {
     state,
     help,
     output,
-    errors,
     progress,
     username,
     usernamePath,
@@ -173,12 +172,6 @@ const TaskInfo = props => {
           <pre>{output}</pre>
         </GridItem>
       )}
-      {errors && errors.length > 0 && (
-        <GridItem span={12}>
-          <b>{__('Errors:')}</b>
-          <pre>{errors}</pre>
-        </GridItem>
-      )}
     </Grid>
   );
 };
@@ -192,7 +185,6 @@ TaskInfo.propTypes = {
   startedAt: PropTypes.string,
   state: PropTypes.string,
   help: PropTypes.string,
-  errors: PropTypes.array,
   progress: PropTypes.number,
   username: PropTypes.string,
   usernamePath: PropTypes.string,
@@ -208,7 +200,6 @@ TaskInfo.defaultProps = {
   startedAt: '',
   state: '',
   help: '',
-  errors: [],
   progress: 0,
   username: '',
   usernamePath: '',

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

@@ -33,7 +33,7 @@ describe('TaskInfo', () => {
         result="error"
         progress={0.5}
         help={
-          "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.\nThe recommended approach is to investigate the error messages below and in 'errors' tab, address the primary cause of the issue and resume the task."
+          "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.\nThe recommended approach is to investigate the error messages below and in 'Execution details' tab, address the primary cause of the issue and resume the task."
         }
         output={{}}
         usernamePath=""

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;

webpack/ForemanTasks/Components/TaskDetails/TaskDetails.js

@@ -6,17 +6,23 @@ 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,
@@ -34,8 +40,8 @@ const TaskDetails = ({
   ...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 +82,7 @@ const TaskDetails = ({
   const cancellable = executionPlan ? executionPlan.cancellable : false;
   const lockRecords = locks.concat(links);
 
-  const taskComponentProps = {
+  const taskProps = {
     ...props,
     cancellable,
     resumable,
@@ -87,49 +93,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 +144,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')}
@@ -170,6 +167,7 @@ const TaskDetails = ({
 
 TaskDetails.propTypes = {
   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,
 };
 

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)