Fixes #38991 - Add chained task dependencies in the UI

Author: ianballou

app/views/foreman_tasks/api/tasks/details.json.rabl

@@ -18,3 +18,23 @@ node(:links) do
 end
 node(:username_path) { username_link_task(@task.owner, @task.username) }
 node(:dynflow_enable_console) { Setting['dynflow_enable_console'] }
+node(:depends_on) do
+  if @task.execution_plan
+    dynflow_uuids = ForemanTasks.dynflow.world.persistence.find_execution_plan_dependencies(@task.execution_plan.id)
+    ForemanTasks::Task.where(external_id: dynflow_uuids).map do |task|
+      { id: task.id, action: task.action, humanized: task.humanized[:action] }
+    end
+  else
+    []
+  end
+end
+node(:blocks) do
+  if @task.execution_plan
+    dynflow_uuids = ForemanTasks.dynflow.world.persistence.find_blocked_execution_plans(@task.execution_plan.id)
+    ForemanTasks::Task.where(external_id: dynflow_uuids).map do |task|
+      { id: task.id, action: task.action, humanized: task.humanized[:action] }
+    end
+  else
+    []
+  end
+end

webpack/ForemanTasks/Components/TaskDetails/Components/Dependencies.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Alert,
+  AlertVariant,
+  Grid,
+  GridItem,
+  List,
+  ListItem,
+  Title,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+const DependencyList = ({ title, tasks }) => {
+  if (!tasks || tasks.length === 0) {
+    return (
+      <div>
+        <Title headingLevel="h4" size="md">
+          {title}
+        </Title>
+        <p className="text-muted">{__('None')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Title headingLevel="h4" size="md">
+        {title}
+      </Title>
+      <List isPlain>
+        {tasks.map((task, index) => (
+          <ListItem key={index}>
+            <a href={`/foreman_tasks/tasks/${task.id}`}>
+              {task.humanized || task.action}
+            </a>
+          </ListItem>
+        ))}
+      </List>
+    </div>
+  );
+};
+
+DependencyList.propTypes = {
+  title: PropTypes.string.isRequired,
+  tasks: PropTypes.array,
+};
+
+DependencyList.defaultProps = {
+  tasks: [],
+};
+
+const Dependencies = ({ dependsOn, blocks }) => (
+  <div>
+    <Alert variant={AlertVariant.info} isInline title={__('Task dependencies')}>
+      {__(
+        'This task may have dependencies on other tasks or may be blocking other tasks from executing. Dependencies are established through task chaining relationships.'
+      )}
+    </Alert>
+    <br />
+    <Grid hasGutter>
+      <GridItem span={6}>
+        <DependencyList title={__('Depends on')} tasks={dependsOn} />
+      </GridItem>
+      <GridItem span={6}>
+        <DependencyList title={__('Blocks')} tasks={blocks} />
+      </GridItem>
+    </Grid>
+  </div>
+);
+
+Dependencies.propTypes = {
+  dependsOn: PropTypes.array,
+  blocks: PropTypes.array,
+};
+
+Dependencies.defaultProps = {
+  dependsOn: [],
+  blocks: [],
+};
+
+export default Dependencies;

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Dependencies from '../Dependencies';
+
+describe('Dependencies', () => {
+  it('should render with no dependencies', () => {
+    const wrapper = shallow(<Dependencies dependsOn={[]} blocks={[]} />);
+    expect(wrapper.find('Alert')).toHaveLength(1);
+    expect(wrapper.find('DependencyList')).toHaveLength(2);
+  });
+
+  it('should render with depends_on dependencies', () => {
+    const dependsOn = [
+      { id: '123', action: 'Actions::FooBar', humanized: 'Foo Bar Action' },
+      { id: '456', action: 'Actions::BazQux', humanized: 'Baz Qux Action' },
+    ];
+    const wrapper = shallow(<Dependencies dependsOn={dependsOn} blocks={[]} />);
+    expect(
+      wrapper
+        .find('DependencyList')
+        .at(0)
+        .prop('tasks')
+    ).toEqual(dependsOn);
+  });
+
+  it('should render with blocks dependencies', () => {
+    const blocks = [
+      { id: '789', action: 'Actions::Test', humanized: 'Test Action' },
+    ];
+    const wrapper = shallow(<Dependencies dependsOn={[]} blocks={blocks} />);
+    expect(
+      wrapper
+        .find('DependencyList')
+        .at(1)
+        .prop('tasks')
+    ).toEqual(blocks);
+  });
+
+  it('should render with both dependency types', () => {
+    const dependsOn = [
+      { id: '123', action: 'Actions::Foo', humanized: 'Foo Action' },
+    ];
+    const blocks = [
+      { id: '456', action: 'Actions::Bar', humanized: 'Bar Action' },
+      { id: '789', action: 'Actions::Baz', humanized: 'Baz Action' },
+    ];
+    const wrapper = shallow(
+      <Dependencies dependsOn={dependsOn} blocks={blocks} />
+    );
+    expect(wrapper.find('DependencyList')).toHaveLength(2);
+    expect(
+      wrapper
+        .find('DependencyList')
+        .at(0)
+        .prop('tasks')
+    ).toEqual(dependsOn);
+    expect(
+      wrapper
+        .find('DependencyList')
+        .at(1)
+        .prop('tasks')
+    ).toEqual(blocks);
+  });
+});

webpack/ForemanTasks/Components/TaskDetails/TaskDetails.js

@@ -9,6 +9,7 @@ import RunningSteps from './Components/RunningSteps';
 import Errors from './Components/Errors';
 import Locks from './Components/Locks';
 import Raw from './Components/Raw';
+import Dependencies from './Components/Dependencies';
 import { getTaskID } from './TasksDetailsHelper';
 import { TaskSkeleton } from './Components/TaskSkeleton';
 
@@ -20,6 +21,8 @@ const TaskDetails = ({
   runningSteps,
   locks,
   links,
+  dependsOn,
+  blocks,
   cancelStep,
   taskReloadStart,
   taskReloadStop,
@@ -90,7 +93,10 @@ const TaskDetails = ({
         <Tab eventKey={4} disabled={isLoading} title={__('Locks')}>
           <Locks locks={locks.concat(links)} />
         </Tab>
-        <Tab eventKey={5} disabled={isLoading} title={__('Raw')}>
+        <Tab eventKey={5} disabled={isLoading} title={__('Dependencies')}>
+          <Dependencies dependsOn={dependsOn} blocks={blocks} />
+        </Tab>
+        <Tab eventKey={6} disabled={isLoading} title={__('Raw')}>
           <Raw
             id={id}
             label={props.label}
@@ -116,9 +122,12 @@ TaskDetails.propTypes = {
   taskReloadStop: PropTypes.func.isRequired,
   taskReloadStart: PropTypes.func.isRequired,
   links: PropTypes.array,
+  dependsOn: PropTypes.array,
+  blocks: PropTypes.array,
   ...Task.propTypes,
   ...Errors.propTypes,
   ...Locks.propTypes,
+  ...Dependencies.propTypes,
   ...Raw.propTypes,
 };
 TaskDetails.defaultProps = {
@@ -127,10 +136,13 @@ TaskDetails.defaultProps = {
   APIerror: null,
   status: STATUS.PENDING,
   links: [],
+  dependsOn: [],
+  blocks: [],
   ...Task.defaultProps,
   ...RunningSteps.defaultProps,
   ...Errors.defaultProps,
   ...Locks.defaultProps,
+  ...Dependencies.defaultProps,
   ...Raw.defaultProps,
 };
 

webpack/ForemanTasks/Components/TaskDetails/TaskDetailsSelectors.js

@@ -109,3 +109,9 @@ export const selectAPIError = state =>
 export const selectIsLoading = state =>
   !!selectAPIByKey(state, FOREMAN_TASK_DETAILS).response &&
   selectStatus(state) === STATUS.PENDING;
+
+export const selectDependsOn = state =>
+  selectTaskDetailsResponse(state).depends_on || [];
+
+export const selectBlocks = state =>
+  selectTaskDetailsResponse(state).blocks || [];

webpack/ForemanTasks/Components/TaskDetails/index.js

@@ -36,6 +36,8 @@ import {
   selectStatus,
   selectAPIError,
   selectIsLoading,
+  selectDependsOn,
+  selectBlocks,
 } from './TaskDetailsSelectors';
 
 const mapStateToProps = state => ({
@@ -71,6 +73,8 @@ const mapStateToProps = state => ({
   status: selectStatus(state),
   APIerror: selectAPIError(state),
   isLoading: selectIsLoading(state),
+  dependsOn: selectDependsOn(state),
+  blocks: selectBlocks(state),
 });
 
 const mapDispatchToProps = dispatch =>

webpack/ForemanTasks/Components/TasksTable/Components/ConfirmModal/__test__/index.test.js

@@ -44,16 +44,15 @@ jest.mock('../../../TasksTableSelectors', () => ({
 }));
 
 // Create a mock store
-const createMockStore = (initialState = {}) => {
-  return configureStore({
+const createMockStore = (initialState = {}) =>
+  configureStore({
     reducer: {
       foremanTasks: (state = initialState, action) => state,
     },
     preloadedState: {
       foremanTasks: initialState,
     },
   });
-};
 
 // Test wrapper component
 const TestWrapper = ({ children, store }) => (