foreman-tasks 12.2.4 → 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

@@ -1,20 +1,27 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
-import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
-import MessageBox from 'foremanReact/components/common/MessageBox';
+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 { getTaskID } from './TasksDetailsHelper';
+import { TASKS_PATH, VIEW_FOREMAN_TASKS } from './TaskDetailsConstants';
 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,
@@ -26,12 +33,15 @@ const TaskDetails = ({
   cancelStep,
   taskReloadStart,
   taskReloadStop,
-  APIerror,
+  apiStatus,
+  apiErrorMessage,
+  apiErrorCode,
+  id,
   ...props
 }) => {
-  const id = getTaskID();
-  const { taskReload, status, 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(() => {
     taskReloadStart(id);
@@ -48,74 +58,83 @@ const TaskDetails = ({
     }
   };
 
-  if (status === STATUS.ERROR) {
+  if (apiStatus === STATUS.ERROR || !hasViewPermission) {
     return (
-      <MessageBox
-        key="task-details-error"
-        icontype="error-circle-o"
-        msg={sprintf(__('Could not receive data: %s'), APIerror?.message)}
+      <ResourceLoadFailedEmptyState
+        resourceLabel={__('task')}
+        resourceId={id}
+        httpStatus={apiErrorCode}
+        errorMessage={apiErrorMessage}
+        viewPermissions={['view_foreman_tasks']}
+        requiredPermissions={['view_foreman_tasks']}
+        ouiaIdPrefix="task-details-empty-state"
+        primaryAction={{
+          label: __('Back to tasks'),
+          url: TASKS_PATH,
+          ouiaId: 'task-details-empty-state-tasks-list',
+        }}
       />
     );
   }
+
   const resumable = executionPlan ? executionPlan.state === 'paused' : false;
   const cancellable = executionPlan ? executionPlan.cancellable : false;
   const lockRecords = locks.concat(links);
 
-  const taskComponentProps = {
+  const taskProps = {
     ...props,
     cancellable,
     resumable,
     id,
-    status,
     taskProgressToggle,
     taskReloadStart,
   };
 
   return (
-    <div className="task-details-react well">
+    <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')}
@@ -124,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')}
@@ -155,36 +165,37 @@ 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,
-  status: PropTypes.oneOf(Object.keys(STATUS)),
-  APIerror: PropTypes.object,
+  apiStatus: PropTypes.oneOf(Object.keys(STATUS)),
+  apiErrorMessage: PropTypes.string,
+  apiErrorCode: PropTypes.number,
   taskReloadStop: PropTypes.func.isRequired,
   taskReloadStart: PropTypes.func.isRequired,
   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 = {
   label: '',
   runningSteps: [],
-  APIerror: null,
-  status: STATUS.PENDING,
+  apiErrorMessage: '',
   links: [],
   dependsOn: [],
   blocks: [],
+  failedSteps: [],
+  executionPlan: {},
   ...Task.defaultProps,
-  ...RunningSteps.defaultProps,
-  ...Errors.defaultProps,
   ...Locks.defaultProps,
-  ...Dependencies.defaultProps,
   ...Raw.defaultProps,
 };
 

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

@@ -1,54 +1,11 @@
 .task-details-react {
-  .progress-label-top-right {
-    font-size: 11px;
-    text-align: right;
-  }
   a,
-  button {
+  #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/TaskDetailsConstants.js

@@ -1,4 +1,5 @@
 export const FOREMAN_TASK_DETAILS = 'FOREMAN_TASK_DETAILS';
 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';

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

@@ -1,7 +1,8 @@
 /* eslint-disable camelcase */
 import {
   selectAPIResponse,
-  selectAPIByKey,
+  selectAPIStatus as selectAPIStatusByKey,
+  selectAPIError as selectAPIErrorByKey,
 } from 'foremanReact/redux/API/APISelectors';
 import { selectDoesIntervalExist } from 'foremanReact/redux/middlewares/IntervalMiddleware/IntervalSelectors';
 import { STATUS } from 'foremanReact/constants';
@@ -38,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)
@@ -101,14 +97,28 @@ export const selectDynflowEnableConsole = state =>
 export const selectCanEdit = state =>
   selectTaskDetailsResponse(state).can_edit || false;
 
-export const selectStatus = state => selectTaskDetailsResponse(state).status;
+export const selectAPIStatus = state =>
+  selectAPIStatusByKey(state, FOREMAN_TASK_DETAILS);
 
 export const selectAPIError = state =>
-  selectTaskDetailsResponse(state)?.APIerror;
+  selectAPIErrorByKey(state, FOREMAN_TASK_DETAILS);
+
+export const selectAPIErrorMessage = state => {
+  const apiError = selectAPIError(state);
+
+  if (apiError?.response?.data?.error) {
+    return apiError.response.data.error.message;
+  }
+
+  return apiError?.message;
+};
+
+export const selectAPIErrorCode = state =>
+  selectAPIError(state)?.response?.status;
 
 export const selectIsLoading = state =>
-  !!selectAPIByKey(state, FOREMAN_TASK_DETAILS).response &&
-  selectStatus(state) === STATUS.PENDING;
+  !Object.keys(selectTaskDetailsResponse(state) ?? {}).length &&
+  selectAPIStatus(state) === STATUS.PENDING;
 
 export const selectDependsOn = state =>
   selectTaskDetailsResponse(state).depends_on || [];

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();
+  });
+});