foreman-tasks 13.0.0 → 13.2.0

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',
+    },
+  ],
+};

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { configureStore } from '@reduxjs/toolkit';
@@ -7,7 +8,13 @@ import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 
 import TaskDetails from '../TaskDetails';
-import { minProps } from './TaskDetails.fixtures';
+import {
+  fixtureFailedExecutionDetail,
+  fixtureWithDependencies,
+  fixtureWithOverviewMessages,
+  minProps,
+  taskDetailsWithExecutionTabDefaults,
+} from './TaskDetails.fixtures';
 import { VIEW_FOREMAN_TASKS } from '../TaskDetailsConstants';
 
 const mockUseForemanPermissions = jest.fn(
@@ -45,6 +52,10 @@ describe('TaskDetails', () => {
     );
   });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it(`shows ResourceLoadFailedEmptyState when ${VIEW_FOREMAN_TASKS} is absent`, () => {
     mockUseForemanPermissions.mockImplementation(() => new Set());
 
@@ -111,25 +122,135 @@ describe('TaskDetails', () => {
     expect(screen.queryByRole('tab', { name: /^task$/i })).not.toBeInTheDocument();
   });
 
-  it('shows skeleton while loading on the Task tab', () => {
+  it('shows skeleton in the overview while loading', () => {
     const { container } = renderTaskDetails({ isLoading: true });
     expect(
       container.querySelector('.react-loading-skeleton')
     ).toBeInTheDocument();
   });
 
-  it('renders six tabs with expected labels', () => {
+  it('renders four tabs with expected labels', () => {
     renderTaskDetails();
-    expect(document.getElementById('task-details-tabs')).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: /^task$/i })).toBeInTheDocument();
     expect(
-      screen.getByRole('tab', { name: /running steps/i })
+      screen.getByRole('tab', { name: /execution details/i })
     ).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: /errors/i })).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: /locks/i })).toBeInTheDocument();
     expect(
       screen.getByRole('tab', { name: /dependencies/i })
     ).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /locks/i })).toBeInTheDocument();
     expect(screen.getByRole('tab', { name: /raw/i })).toBeInTheDocument();
   });
+
+  it('exposes stable ouiaIds on tabs for automation', () => {
+    renderTaskDetails();
+
+    expect(
+      document.querySelector(
+        '[data-ouia-component-id="task-details-tab-execution-details"]'
+      )
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector(
+        '[data-ouia-component-id="task-details-tab-dependencies"]'
+      )
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector(
+        '[data-ouia-component-id="task-details-tab-locks"]'
+      )
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-ouia-component-id="task-details-tab-raw"]')
+    ).toBeInTheDocument();
+  });
+
+  it('shows failed step errors on the default execution details tab', () => {
+    renderTaskDetails({
+      ...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();
+  });
+
+  it('starts task reload on mount and stops on unmount', () => {
+    const taskReloadStart = jest.fn();
+    const taskReloadStop = jest.fn();
+
+    const { unmount } = renderTaskDetails({
+      ...taskDetailsWithExecutionTabDefaults,
+      taskReloadStart,
+      taskReloadStop,
+    });
+
+    expect(taskReloadStart).toHaveBeenCalledWith(
+      'a15dd820-32f1-4ced-9ab7-c0fab8234c47'
+    );
+    unmount();
+    expect(taskReloadStop).toHaveBeenCalled();
+  });
+
+  it('shows execution details panel on the default tab when loaded', () => {
+    renderTaskDetails({ ...taskDetailsWithExecutionTabDefaults });
+
+    expect(
+      screen.getByRole('heading', { name: /^no errors found$/i })
+    ).toBeInTheDocument();
+  });
+
+  it('disables tabs and hides execution panel while loading', () => {
+    renderTaskDetails({
+      ...taskDetailsWithExecutionTabDefaults,
+      isLoading: true,
+    });
+
+    expect(
+      screen.queryByRole('heading', { name: /^no errors found$/i })
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('tab', { name: /execution details/i })
+    ).toBeDisabled();
+    expect(screen.getByRole('tab', { name: /dependencies/i })).toBeDisabled();
+    expect(screen.getByRole('tab', { name: /locks/i })).toBeDisabled();
+    expect(screen.getByRole('tab', { name: /raw/i })).toBeDisabled();
+  });
+
+  it('renders troubleshooting help in overview after expanding details', async () => {
+    renderTaskDetails({ ...fixtureWithOverviewMessages });
+
+    await userEvent.click(
+      screen.getByRole('button', { name: /show more details/i })
+    );
+
+    expect(screen.getByText('Troubleshooting')).toBeInTheDocument();
+    expect(screen.getByText('See logs')).toBeInTheDocument();
+  });
+
+  it('renders raw output when the Raw tab is selected', async () => {
+    renderTaskDetails({ ...fixtureWithOverviewMessages });
+
+    await userEvent.click(screen.getByRole('tab', { name: /raw/i }));
+
+    expect(screen.getByText(/raw output/i)).toBeInTheDocument();
+    expect(screen.getByText(/partial output/i)).toBeInTheDocument();
+  });
+
+  it('renders dependency tables when the Dependencies tab is selected', async () => {
+    renderTaskDetails({ ...fixtureWithDependencies });
+
+    await userEvent.click(screen.getByRole('tab', { name: /dependencies/i }));
+
+    expect(
+      screen.getByRole('link', { name: 'Foo Bar Action' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('link', { name: 'Test Action' })
+    ).toBeInTheDocument();
+  });
 });

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/StoppedTasksCard/StoppedTasksCard.scss

@@ -1,6 +1,5 @@
 .stopped-tasks-card {
   .stopped-table {
-
     td,
     th {
       text-align: center;

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksCardsGrid/Components/TasksDonutCard/TasksDonutCard.scss

@@ -5,6 +5,7 @@
       opacity: 0.6;
     }
   }
+
   .pf-v5-c-card__title-text {
     text-align: center;
     cursor: pointer;

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksLabelsRow/TasksLabelsRow.scss

@@ -1,5 +1,6 @@
 .tasks-labels-row {
   align-items: center;
+
   ul {
     margin: 0;
   }

data/webpack/ForemanTasks/Components/TasksDashboard/TasksDashboardHelper.js

@@ -1,5 +1,10 @@
 import { getURIQuery } from 'foremanReact/common/helpers';
 
+import {
+  HOURS_PER_HALF_DAY,
+  HOURS_PER_DAY,
+  DAYS_PER_WEEK,
+} from 'foremanReact/constants';
 import {
   TASKS_DASHBOARD_AVAILABLE_TIMES,
   TASKS_DASHBOARD_QUERY_KEYS_TEXT,
@@ -16,13 +21,13 @@ export const getQueryValueText = value =>
 export const timeToHoursNumber = time => {
   switch (time) {
     case TASKS_DASHBOARD_AVAILABLE_TIMES.H12:
-      return 12;
+      return HOURS_PER_HALF_DAY;
     case TASKS_DASHBOARD_AVAILABLE_TIMES.H24:
-      return 24;
+      return HOURS_PER_DAY;
     case TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK:
-      return 24 * 7;
+      return HOURS_PER_DAY * DAYS_PER_WEEK;
     default:
-      return 24;
+      return HOURS_PER_DAY;
   }
 };
 

data/webpack/ForemanTasks/Components/TasksTable/TasksTableHelpers.js

@@ -2,6 +2,7 @@ import URI from 'urijs';
 import { translate as __, documentLocale } from 'foremanReact/common/I18n';
 import humanizeDuration from 'humanize-duration';
 import { isoCompatibleDate } from 'foremanReact/common/helpers';
+import { MS_PER_SECOND } from 'foremanReact/constants';
 import { convertDashboardQuery } from '../TaskActions/TaskActionHelpers';
 
 export const updateURlQuery = (query, history) => {
@@ -51,7 +52,7 @@ export const getDuration = (start, finish) => {
   const duration = finishDate - startDate;
   return {
     text:
-      duration > 0 && duration < 1000
+      duration > 0 && duration < MS_PER_SECOND
         ? __('Less than a second')
         : humanizeDuration(duration, dateOptions),
   };

data/webpack/ForemanTasks/Components/common/taskResultIcon.js

@@ -5,49 +5,59 @@ import {
   ExclamationCircleIcon,
   ExclamationTriangleIcon,
   QuestionCircleIcon,
+  InProgressIcon,
 } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 
+const RESULT_ICONS = {
+  success: {
+    status: 'success',
+    title: () => __('Success'),
+    IconComponent: CheckCircleIcon,
+  },
+  error: {
+    status: 'danger',
+    title: () => __('Error'),
+    IconComponent: ExclamationCircleIcon,
+  },
+  warning: {
+    status: 'warning',
+    title: () => __('Warning'),
+    IconComponent: ExclamationTriangleIcon,
+  },
+};
+
+const UNKNOWN_RESULT_ICON = {
+  status: undefined,
+  title: () => __('Unknown'),
+  IconComponent: QuestionCircleIcon,
+};
+
 /**
  * Icon reflecting task state/result (aligned with TaskInfo / tasks table).
  *
  * @param {string} state Dynflow task state (e.g. stopped, running).
  * @param {string} [result] Result when stopped (success, error, warning, …).
+ * @param {boolean} isTitleIcon Whether the icon should be used as a title icon.
  * @returns {React.ReactElement}
  */
-export const taskResultIconEl = (state, result) => {
+export const taskResultIconEl = (state, result, isTitleIcon = false) => {
+  const size = isTitleIcon ? 'lg' : 'md';
+
   if (state && state !== 'stopped') {
     return (
-      <Icon title={__('Running')}>
-        <QuestionCircleIcon />
+      <Icon title={__('Running')} status="info" isInline size={size}>
+        <InProgressIcon />
       </Icon>
     );
   }
 
-  switch (result) {
-    case 'success':
-      return (
-        <Icon status="success" title={__('Success')}>
-          <CheckCircleIcon />
-        </Icon>
-      );
-    case 'error':
-      return (
-        <Icon status="danger" title={__('Error')}>
-          <ExclamationCircleIcon />
-        </Icon>
-      );
-    case 'warning':
-      return (
-        <Icon status="warning" title={__('Warning')}>
-          <ExclamationTriangleIcon />
-        </Icon>
-      );
-    default:
-      return (
-        <Icon title={__('Unknown')}>
-          <QuestionCircleIcon />
-        </Icon>
-      );
-  }
+  const { status, title, IconComponent } =
+    RESULT_ICONS[result] || UNKNOWN_RESULT_ICON;
+
+  return (
+    <Icon title={title()} status={status} isInline size={size}>
+      <IconComponent />
+    </Icon>
+  );
 };

data/webpack/ForemanTasks/Routes/ShowTaskDetails/TaskDetailsHeader.js

@@ -0,0 +1,174 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Flex,
+  FlexItem,
+  Split,
+  SplitItem,
+  Title,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import { usePermissions } from 'foremanReact/common/hooks/Permissions/permissionHooks';
+import { TaskButtons } from '../../Components/TaskDetails/Components/TaskButtons';
+import { VIEW_FOREMAN_TASKS } from '../../Components/TaskDetails/TaskDetailsConstants';
+import {
+  ForceUnlockConfirmationModal,
+  UnlockConfirmationModal,
+} from '../../Components/common/ClickConfirmation';
+import { taskResultIconEl } from '../../Components/common/taskResultIcon';
+import './TaskDetailsHeader.scss';
+
+const TitleComponent = ({ action, state, result }) => (
+  <Flex
+    alignItems={{ default: 'alignItemsCenter' }}
+    spaceItems={{ default: 'spaceItemsXs' }}
+  >
+    <FlexItem>
+      <Title
+        headingLevel="h1"
+        className="foreman-tasks-task-details-header__title"
+        ouiaId="task-overview-title"
+      >
+        {action || __('Task Details')}
+      </Title>
+    </FlexItem>
+    <FlexItem>{taskResultIconEl(state, result, true)}</FlexItem>
+  </Flex>
+);
+
+TitleComponent.propTypes = {
+  action: PropTypes.string,
+  state: PropTypes.string,
+  result: PropTypes.string,
+};
+
+TitleComponent.defaultProps = {
+  action: '',
+  state: '',
+  result: '',
+};
+
+const TaskDetailsHeader = props => {
+  const {
+    taskReload,
+    id,
+    forceCancelTaskRequest,
+    unlockTaskRequest,
+    action,
+    taskReloadStart,
+    taskReloadStop,
+    executionPlan,
+    apiStatus,
+  } = props;
+  const hasViewPermission = usePermissions([VIEW_FOREMAN_TASKS]);
+  const showActions = hasViewPermission && apiStatus !== STATUS.ERROR;
+  const resumable = executionPlan ? executionPlan.state === 'paused' : false;
+  const cancellable = executionPlan ? executionPlan.cancellable : false;
+
+  const forceUnlock = () => {
+    if (!taskReload) {
+      taskReloadStart(id);
+    }
+
+    forceCancelTaskRequest(id, action);
+  };
+
+  const unlock = () => {
+    if (!taskReload) {
+      taskReloadStart(id);
+    }
+
+    unlockTaskRequest(id, action);
+  };
+
+  const taskProgressToggle = () => {
+    if (taskReload) {
+      taskReloadStop();
+    } else {
+      taskReloadStart(id);
+    }
+  };
+
+  const [unlockModalOpen, setUnlockModalOpen] = useState(false);
+  const [forceUnlockModalOpen, setForceUnlockModalOpen] = useState(false);
+
+  return (
+    <React.Fragment>
+      {showActions && (
+        <>
+          <UnlockConfirmationModal
+            onClick={unlock}
+            isOpen={unlockModalOpen}
+            setModalClosed={() => setUnlockModalOpen(false)}
+          />
+          <ForceUnlockConfirmationModal
+            onClick={forceUnlock}
+            isOpen={forceUnlockModalOpen}
+            setModalClosed={() => setForceUnlockModalOpen(false)}
+          />
+        </>
+      )}
+      <Split
+        className="foreman-tasks-task-details-header"
+        hasGutter
+        isWrappable
+        data-ouia-component-id="foreman-tasks-task-details-title-row"
+      >
+        <SplitItem isFilled>
+          <TitleComponent
+            action={props.action}
+            state={props.state}
+            result={props.result}
+          />
+        </SplitItem>
+        {showActions && (
+          <SplitItem>
+            <TaskButtons
+              {...props}
+              taskReloadStart={taskReloadStart}
+              taskProgressToggle={taskProgressToggle}
+              setUnlockModalOpen={setUnlockModalOpen}
+              setForceUnlockModalOpen={setForceUnlockModalOpen}
+              resumable={resumable}
+              cancellable={cancellable}
+            />
+          </SplitItem>
+        )}
+      </Split>
+    </React.Fragment>
+  );
+};
+
+TaskDetailsHeader.propTypes = {
+  taskReload: PropTypes.bool,
+  id: PropTypes.string,
+  forceCancelTaskRequest: PropTypes.func,
+  unlockTaskRequest: PropTypes.func,
+  action: PropTypes.string,
+  state: PropTypes.string,
+  result: PropTypes.string,
+  taskReloadStart: PropTypes.func,
+  taskReloadStop: PropTypes.func,
+  executionPlan: PropTypes.shape({
+    state: PropTypes.string,
+    cancellable: PropTypes.bool,
+  }),
+  apiStatus: PropTypes.oneOf(Object.keys(STATUS)),
+};
+
+TaskDetailsHeader.defaultProps = {
+  taskReload: false,
+  id: '',
+  forceCancelTaskRequest: () => null,
+  unlockTaskRequest: () => null,
+  action: '',
+  state: '',
+  result: '',
+  taskReloadStart: () => null,
+  taskReloadStop: () => null,
+  executionPlan: {},
+  apiStatus: STATUS.RESOLVED,
+};
+
+export default TaskDetailsHeader;

data/webpack/ForemanTasks/Routes/ShowTaskDetails/TaskDetailsHeader.scss

@@ -0,0 +1,5 @@
+.foreman-tasks-task-details-header {
+  .foreman-tasks-task-details-header__title {
+    margin: 0;
+  }
+}

data/webpack/ForemanTasks/Routes/ShowTaskDetails/TaskDetailsPage.js

@@ -1,48 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
-import { Flex, FlexItem, TextContent, Text } from '@patternfly/react-core';
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
 import { translate as __, sprintf } from 'foremanReact/common/I18n';
-import TaskDetails from '../../Components/TaskDetails';
-import {
-  selectAction,
-  selectResult,
-  selectState,
-} from '../../Components/TaskDetails/TaskDetailsSelectors';
-import { taskResultIconEl } from '../../Components/common/taskResultIcon';
+import TaskDetails from '../../Components/TaskDetails/TaskDetails';
+import TaskDetailsHeader from './TaskDetailsHeader';
 
 const TaskDetailsPage = props => {
-  const { id } = props.match.params;
-  const action = useSelector(selectAction);
-  const taskState = useSelector(selectState);
-  const taskResult = useSelector(selectResult);
+  const { match, action } = props;
+  const { id } = match.params;
   const headerText = action
     ? sprintf(__('Details of %s task'), action)
     : __('Task Details');
 
-  const header = (
-    <Flex
-      component="span"
-      data-ouia-component-id="foreman-tasks-task-details-title-row"
-      display={{ default: 'inlineFlex' }}
-      alignItems={{ default: 'alignItemsCenter' }}
-      gap={{ default: 'gapSm' }}
-    >
-      <TextContent>
-        <Text ouiaId="breadcrumb_title" component="h1">
-          {headerText}
-        </Text>
-      </TextContent>
-      <FlexItem component="span">
-        {taskResultIconEl(taskState, taskResult)}
-      </FlexItem>
-    </Flex>
-  );
-
   return (
     <PageLayout
-      customHeader={header}
+      customHeader={<TaskDetailsHeader {...props} />}
       header={headerText}
       searchable={false}
       breadcrumbOptions={{
@@ -69,6 +41,11 @@ TaskDetailsPage.propTypes = {
       id: PropTypes.string.isRequired,
     }).isRequired,
   }).isRequired,
+  action: PropTypes.string,
+};
+
+TaskDetailsPage.defaultProps = {
+  action: '',
 };
 
 export default TaskDetailsPage;