foreman-tasks 12.2.2 → 12.2.4

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

@@ -1,68 +1,174 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, AlertVariant, Button } from '@patternfly/react-core';
+import {
+  Alert,
+  AlertVariant,
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  Flex,
+  FlexItem,
+  Grid,
+  GridItem,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { HourglassStartIcon } from '@patternfly/react-icons';
 import { translate as __, sprintf } from 'foremanReact/common/I18n';
 
+const RunningStepDetailBlock = ({ label, children }) => (
+  <GridItem span={12}>
+    <Flex
+      direction={{ default: 'column' }}
+      spaceItems={{ default: 'spaceItemsXs' }}
+    >
+      <FlexItem>
+        <strong>{label}</strong>
+      </FlexItem>
+      <FlexItem>{children}</FlexItem>
+    </Flex>
+  </GridItem>
+);
+
+RunningStepDetailBlock.propTypes = {
+  label: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
 const RunningSteps = ({
+  executionPlan,
+  result,
   runningSteps,
   id,
   cancelStep,
   taskReload,
   taskReloadStart,
 }) => {
-  if (!runningSteps.length) return <span>{__('No running steps')}</span>;
-  return (
-    <div>
-      {runningSteps.map((step, i) => (
+  const planState = executionPlan?.state;
+  const resultIsPending = String(result) === 'pending';
+
+  if (!runningSteps.length) {
+    if (planState === 'running' && resultIsPending) {
+      return (
         <Alert
           variant={AlertVariant.warning}
           isInline
-          key={step.id || i}
-          ouiaId={`running-step-${i}`}
-          title={sprintf(__('Running step %s'), i + 1)}
+          ouiaId="running-steps-suspended-pending"
+          title={__('Temporarily suspended step(s)')}
         >
-          {step.cancellable && (
-            <p>
-              <Button
-                variant="danger"
-                size="sm"
-                ouiaId={`running-step-cancel-button-${i}`}
-                onClick={() => {
-                  if (!taskReload) {
-                    taskReloadStart(id);
-                  }
-                  cancelStep(id, step.id);
-                }}
-              >
-                {__('Cancel')}
-              </Button>
-            </p>
-          )}
-
-          <p>
-            <span>{__('Action')}:</span>
-            <span />
-          </p>
-          <pre>{step.action_class}</pre>
-          <p>
-            <span>{__('State')}:</span>
-            <span>{step.state}</span>
-          </p>
-          <span>{__('Input')}:</span>
-          <span>
-            <pre>{step.input}</pre>
-          </span>
-          <span>{__('Output')}:</span>
-          <span>
-            <pre>{step.output}</pre>
-          </span>
+          {__('The task is still being processed. Please wait.')}
         </Alert>
+      );
+    }
+
+    if (planState === 'planned' && resultIsPending) {
+      return (
+        <Grid>
+          <GridItem span={12}>
+            <Flex
+              direction={{ default: 'column' }}
+              alignItems={{ default: 'alignItemsCenter' }}
+              justifyContent={{ default: 'justifyContentCenter' }}
+              fullWidth={{ default: 'fullWidth' }}
+            >
+              <FlexItem>
+                <EmptyState variant={EmptyStateVariant.full}>
+                  <EmptyStateHeader
+                    titleText={__('Planned task')}
+                    headingLevel="h2"
+                    icon={<EmptyStateIcon icon={HourglassStartIcon} />}
+                  />
+                  <EmptyStateBody>
+                    {__('The task has not started yet.')}
+                  </EmptyStateBody>
+                </EmptyState>
+              </FlexItem>
+            </Flex>
+          </GridItem>
+        </Grid>
+      );
+    }
+
+    return <span>{__('No running steps')}</span>;
+  }
+
+  return (
+    <Stack hasGutter>
+      {runningSteps.map((step, i) => (
+        <StackItem key={step.id || i}>
+          <Alert
+            variant={AlertVariant.warning}
+            isInline
+            title={sprintf(__('Running step %s'), i + 1)}
+            ouiaId={`running-step-${i}`}
+          >
+            <Grid hasGutter>
+              {step.cancellable && (
+                <GridItem span={12}>
+                  <Flex>
+                    <FlexItem>
+                      <Button
+                        ouiaId={`running-step-${i}-cancel`}
+                        variant="danger"
+                        size="sm"
+                        onClick={() => {
+                          if (!taskReload) {
+                            taskReloadStart(id);
+                          }
+
+                          cancelStep(id, step.id);
+                        }}
+                      >
+                        {__('Cancel')}
+                      </Button>
+                    </FlexItem>
+                  </Flex>
+                </GridItem>
+              )}
+              <GridItem span={12}>
+                <Flex
+                  direction={{ default: 'row' }}
+                  spaceItems={{ default: 'spaceItemsSm' }}
+                  alignItems={{ default: 'alignItemsBaseline' }}
+                >
+                  <FlexItem>
+                    <strong>{`${__('Action')}:`}</strong>
+                  </FlexItem>
+                  <FlexItem>{step.action_class}</FlexItem>
+                </Flex>
+              </GridItem>
+              <GridItem span={12}>
+                <Flex
+                  direction={{ default: 'row' }}
+                  spaceItems={{ default: 'spaceItemsSm' }}
+                  alignItems={{ default: 'alignItemsBaseline' }}
+                >
+                  <FlexItem>
+                    <strong>{`${__('State')}:`}</strong>
+                  </FlexItem>
+                  <FlexItem>{step.state}</FlexItem>
+                </Flex>
+              </GridItem>
+              <RunningStepDetailBlock label={__('Input')}>
+                <pre>{step.input}</pre>
+              </RunningStepDetailBlock>
+              <RunningStepDetailBlock label={__('Output')}>
+                <pre>{step.output}</pre>
+              </RunningStepDetailBlock>
+            </Grid>
+          </Alert>
+        </StackItem>
       ))}
-    </div>
+    </Stack>
   );
 };
 
 RunningSteps.propTypes = {
+  executionPlan: PropTypes.shape({ state: PropTypes.string }),
+  result: PropTypes.string,
   runningSteps: PropTypes.array,
   id: PropTypes.string.isRequired,
   cancelStep: PropTypes.func.isRequired,
@@ -72,6 +178,8 @@ RunningSteps.propTypes = {
 
 RunningSteps.defaultProps = {
   runningSteps: [],
+  executionPlan: {},
+  result: undefined,
 };
 
 export default RunningSteps;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import Errors from '../Errors';
@@ -20,6 +20,8 @@ const failedStepFixture = {
   output: '{}\n',
 };
 
+const executionPlan = { state: 'paused', cancellable: false };
+
 describe('Errors', () => {
   it('renders warning when execution plan is missing', () => {
     render(<Errors failedSteps={[]} executionPlan={null} />);
@@ -30,30 +32,176 @@ describe('Errors', () => {
 
   it('renders success state when there are no failed steps', () => {
     render(<Errors failedSteps={[]} executionPlan={{ state: 'paused' }} />);
-    const noErrors = screen.getAllByText(/^no errors$/i);
-    expect(noErrors.length).toBeGreaterThanOrEqual(1);
+    expect(
+      screen.getByRole('heading', { level: 2, name: /no errors found/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/the task finished with no errors or warnings/i)
+    ).toBeInTheDocument();
   });
 
   it('renders failed step details when failedSteps is non-empty', () => {
     const { container } = render(
       <Errors
-        executionPlan={{ state: 'paused', cancellable: false }}
+        executionPlan={executionPlan}
         failedSteps={[failedStepFixture]}
       />
     );
-    const stepAlert = container.querySelector(
+    const errorTab = container.querySelector(
       '[data-ouia-component-id="task-error-0"]'
     );
-    expect(stepAlert).toBeInTheDocument();
-    expect(stepAlert).toHaveClass('pf-m-inline');
+    expect(errorTab).toBeInTheDocument();
+    expect(
+      screen.getByRole('tab', {
+        name: /action actions::katello::eventqueue::monitor is already active/i,
+      })
+    ).toBeInTheDocument();
     expect(
-      screen.getByText('Actions::Katello::EventQueue::Monitor')
+      screen.getByLabelText(/failed task errors/i)
     ).toBeInTheDocument();
+    expect(screen.getByText('Input')).toBeInTheDocument();
+    expect(screen.getByText('Output')).toBeInTheDocument();
+    expect(screen.getByText('Exception:')).toBeInTheDocument();
+    expect(screen.getByText('Backtrace')).toBeInTheDocument();
     expect(screen.getByText(/runtimeerror/i)).toBeInTheDocument();
+    expect(screen.getByText(/singleton_lock/i)).toBeInTheDocument();
+  });
+
+  it('switches detail pane when a different error tab is clicked', () => {
+    const firstStep = {
+      ...failedStepFixture,
+      action_class: 'Action::First',
+      input: 'INPUT_FROM_FIRST_STEP',
+      output: '{}',
+    };
+    const secondStep = {
+      ...failedStepFixture,
+      action_class: 'Action::Second',
+      error: {
+        exception_class: 'StandardError',
+        message: 'second step failure',
+        backtrace: [],
+      },
+      input: 'INPUT_FROM_SECOND_STEP',
+      output: 'OUTPUT_SECOND',
+      state: 'error',
+    };
+
+    render(
+      <Errors
+        executionPlan={executionPlan}
+        failedSteps={[firstStep, secondStep]}
+      />
+    );
+
+    expect(screen.getByText('INPUT_FROM_FIRST_STEP')).toBeInTheDocument();
+    expect(screen.queryByText('INPUT_FROM_SECOND_STEP')).not.toBeInTheDocument();
+
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
+    expect(tabs[1]).toHaveAttribute('aria-selected', 'false');
+
+    fireEvent.click(tabs[1]);
+
+    expect(screen.getByText('INPUT_FROM_SECOND_STEP')).toBeInTheDocument();
+    expect(screen.queryByText('INPUT_FROM_FIRST_STEP')).not.toBeInTheDocument();
+    expect(tabs[0]).toHaveAttribute('aria-selected', 'false');
+    expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByText('OUTPUT_SECOND')).toBeInTheDocument();
+  });
+
+  it('clamps selection when failedSteps shrinks', () => {
+    const firstStep = {
+      ...failedStepFixture,
+      action_class: 'Action::First',
+      input: 'AFTER_CLAMP',
+      output: '{}',
+    };
+    const secondStep = {
+      ...failedStepFixture,
+      action_class: 'Action::Second',
+      input: 'REMOVED',
+      output: '{}',
+      state: 'error',
+    };
+
+    const { rerender } = render(
+      <Errors
+        executionPlan={executionPlan}
+        failedSteps={[firstStep, secondStep]}
+      />
+    );
+
+    fireEvent.click(screen.getAllByRole('tab')[1]);
+    expect(screen.getByText('REMOVED')).toBeInTheDocument();
+
+    rerender(
+      <Errors executionPlan={executionPlan} failedSteps={[firstStep]} />
+    );
+
+    expect(screen.getAllByRole('tab')).toHaveLength(1);
+    expect(screen.getByText('AFTER_CLAMP')).toBeInTheDocument();
+  });
+
+  it('truncates long tab titles to 120 characters with ellipsis', () => {
+    const longMessage = 'x'.repeat(150);
+    const longStep = {
+      ...failedStepFixture,
+      error: {
+        ...failedStepFixture.error,
+        message: longMessage,
+      },
+    };
+
+    const { container } = render(
+      <Errors executionPlan={executionPlan} failedSteps={[longStep]} />
+    );
+
+    const tabTitle = container.querySelector('.task-errors-tab-title');
+    expect(tabTitle.textContent).toHaveLength(120);
+    expect(tabTitle.textContent.endsWith('...')).toBe(true);
+    expect(
+      screen.getByRole('tab', { name: longMessage })
+    ).toBeInTheDocument();
+  });
+
+  it('uses warning styling for skipped steps', () => {
+    const skippedStep = {
+      action_class: 'Actions::Example',
+      state: 'skipped',
+      input: '{}',
+      output: '{}',
+    };
+
+    const { container } = render(
+      <Errors executionPlan={executionPlan} failedSteps={[skippedStep]} />
+    );
+
     expect(
-      screen.getByText(
-        /action actions::katello::eventqueue::monitor is already active/i
-      )
+      screen.getByRole('tab', { name: /actions::example/i })
     ).toBeInTheDocument();
+
+    const errorTab = container.querySelector(
+      '[data-ouia-component-id="task-error-0"]'
+    );
+    expect(errorTab.querySelector('.pf-m-warning')).toBeInTheDocument();
+  });
+
+  it('omits exception and backtrace when step has no error object', () => {
+    const stepWithoutError = {
+      action_class: 'Actions::NoError',
+      state: 'error',
+      input: 'plain-input',
+      output: 'plain-output',
+    };
+
+    render(
+      <Errors executionPlan={executionPlan} failedSteps={[stepWithoutError]} />
+    );
+
+    expect(screen.getByText('plain-input')).toBeInTheDocument();
+    expect(screen.getByText('plain-output')).toBeInTheDocument();
+    expect(screen.queryByText('Exception:')).not.toBeInTheDocument();
+    expect(screen.queryByText('Backtrace')).not.toBeInTheDocument();
   });
 });

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

@@ -27,6 +27,45 @@ describe('RunningSteps', () => {
     expect(screen.getByText(/no running steps/i)).toBeInTheDocument();
   });
 
+  it('shows suspended warning when plan is running, result pending, no steps', () => {
+    render(
+      <RunningSteps
+        {...baseProps}
+        runningSteps={[]}
+        executionPlan={{ state: 'running', cancellable: false }}
+        result="pending"
+      />
+    );
+
+    expect(
+      screen.getByRole('heading', {
+        level: 4,
+        name: /temporarily suspended step/i,
+      })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/the task is still being processed/i)
+    ).toBeInTheDocument();
+  });
+
+  it('shows planned empty state when plan is planned, result pending, no steps', () => {
+    render(
+      <RunningSteps
+        {...baseProps}
+        runningSteps={[]}
+        executionPlan={{ state: 'planned', cancellable: false }}
+        result="pending"
+      />
+    );
+
+    expect(
+      screen.getByRole('heading', { level: 2, name: /planned task/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/the task has not started yet/i)
+    ).toBeInTheDocument();
+  });
+
   it('renders running step fields and Cancel when step is cancellable', () => {
     const cancelStep = jest.fn();
     render(

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

@@ -30,7 +30,7 @@ const TaskDetails = ({
   ...props
 }) => {
   const id = getTaskID();
-  const { taskReload, status, isLoading } = props;
+  const { taskReload, status, isLoading, result } = props;
   const [activeTabKey, setActiveTabKey] = useState(1);
 
   useEffect(() => {
@@ -96,6 +96,8 @@ const TaskDetails = ({
           ouiaId="task-details-tab-running-steps"
         >
           <RunningSteps
+            executionPlan={executionPlan}
+            result={result}
             runningSteps={runningSteps}
             id={id}
             cancelStep={cancelStep}

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

@@ -1,13 +1,100 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
+import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../TasksDashboardConstants';
+import { getQueryFromUrl } from '../TasksDashboardHelper';
 import TasksDashboard from '../TasksDashboard';
 
-const fixtures = {
-  'render without Props': { history: {} },
-  /** fixtures, props for the component */
-};
+jest.mock('../TasksDashboardHelper', () => ({
+  ...jest.requireActual('../TasksDashboardHelper'),
+  getQueryFromUrl: jest.fn(() => ({})),
+}));
+
+jest.mock(
+  '../Components/TasksCardsGrid/Components/TasksDonutChart/TasksDonutChart',
+  () => {
+    const React = require('react');
+    const Stub = () => <div data-testid="tasks-donut-chart-stub" />;
+    Stub.displayName = 'TasksDonutChart';
+
+    return Stub;
+  }
+);
 
 describe('TasksDashboard', () => {
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(TasksDashboard, fixtures));
+  const cardIds = [
+    'running-tasks-card',
+    'paused-tasks-card',
+    'stopped-tasks-card',
+    'scheduled-tasks-card',
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    getQueryFromUrl.mockReturnValue({});
+  });
+
+  it('renders the dashboard grid with time picker and task cards', () => {
+    const { container } = render(<TasksDashboard history={{}} />);
+
+    expect(container.querySelector('.tasks-dashboard-grid')).toBeInTheDocument();
+    expect(screen.getByText('With focus on last')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /24h/i })
+    ).toBeInTheDocument();
+
+    cardIds.forEach(id => {
+      expect(container.querySelector(`#${id}`)).toBeInTheDocument();
+    });
+  });
+
+  it('initializes the dashboard and fetches the summary on mount', () => {
+    const initializeDashboard = jest.fn();
+    const fetchTasksSummary = jest.fn();
+
+    render(
+      <TasksDashboard
+        history={{}}
+        initializeDashboard={initializeDashboard}
+        fetchTasksSummary={fetchTasksSummary}
+      />
+    );
+
+    expect(initializeDashboard).toHaveBeenCalledWith({
+      time: undefined,
+      query: {},
+    });
+    expect(fetchTasksSummary).toHaveBeenCalledWith(
+      TASKS_DASHBOARD_AVAILABLE_TIMES.H24,
+      ''
+    );
+  });
+
+  it('fetches the summary again when time changes', () => {
+    const fetchTasksSummary = jest.fn();
+
+    const { rerender } = render(
+      <TasksDashboard
+        history={{}}
+        fetchTasksSummary={fetchTasksSummary}
+        time={TASKS_DASHBOARD_AVAILABLE_TIMES.H24}
+      />
+    );
+
+    fetchTasksSummary.mockClear();
+
+    rerender(
+      <TasksDashboard
+        history={{}}
+        fetchTasksSummary={fetchTasksSummary}
+        time={TASKS_DASHBOARD_AVAILABLE_TIMES.H12}
+      />
+    );
+
+    expect(fetchTasksSummary).toHaveBeenCalledWith(
+      TASKS_DASHBOARD_AVAILABLE_TIMES.H12,
+      ''
+    );
+  });
 });