foreman-tasks 12.2.3 → 13.0.0

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

@@ -1,69 +1,238 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Alert } from '@patternfly/react-core';
+import classNames from 'classnames';
+import {
+  Alert,
+  AlertVariant,
+  CodeBlock,
+  CodeBlockCode,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  Icon,
+  EmptyStateVariant,
+  Flex,
+  FlexItem,
+  Grid,
+  GridItem,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+  Tab,
+  Tabs,
+  TabTitleIcon,
+  TabTitleText,
+} from '@patternfly/react-core';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+} from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-const Errors = ({ ...props }) => {
-  const { failedSteps, executionPlan } = props;
-  if (!executionPlan)
+import './Errors.scss';
+
+const isStoppedStep = step =>
+  ['skipped', 'skipping'].includes(String(step.state ?? ''));
+
+const STEP_SUMMARY_MAX_LENGTH = 120;
+
+const getStepSummary = step =>
+  step.error?.message || step.action_class || __('Unknown error');
+
+const truncateStepSummary = summary => {
+  if (summary.length <= STEP_SUMMARY_MAX_LENGTH) {
+    return summary;
+  }
+
+  return `${summary.slice(0, STEP_SUMMARY_MAX_LENGTH - 3)}...`;
+};
+
+const getStepStatus = step => (isStoppedStep(step) ? 'warning' : 'danger');
+
+const ErrorTabTitle = ({ step }) => {
+  const status = getStepStatus(step);
+
+  return (
+    <>
+      <TabTitleIcon>
+        <Icon status={status}>
+          <ExclamationCircleIcon />
+        </Icon>
+      </TabTitleIcon>
+      <TabTitleText
+        className={classNames(
+          'task-errors-tab-title',
+          `task-errors-tab-title--${status}`
+        )}
+      >
+        {truncateStepSummary(getStepSummary(step))}
+      </TabTitleText>
+    </>
+  );
+};
+
+ErrorTabTitle.propTypes = {
+  step: PropTypes.shape({
+    action_class: PropTypes.string,
+    state: PropTypes.string,
+    error: PropTypes.shape({
+      message: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+const ErrorDetailSection = ({ label, children }) => (
+  <StackItem className="task-errors-detail-section">
+    <Flex
+      direction={{ default: 'column' }}
+      spaceItems={{ default: 'spaceItemsXs' }}
+    >
+      <FlexItem className="task-errors-detail-label">
+        <strong>{label}</strong>
+      </FlexItem>
+      <FlexItem>
+        <CodeBlock className="task-errors-codeblock">
+          <CodeBlockCode className="task-errors-codeblock-code">
+            {children}
+          </CodeBlockCode>
+        </CodeBlock>
+      </FlexItem>
+    </Flex>
+  </StackItem>
+);
+
+ErrorDetailSection.propTypes = {
+  label: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+const ErrorDetailsPane = ({ step }) => {
+  if (!step) {
+    return null;
+  }
+
+  return (
+    <Stack>
+      {step.error && (
+        <>
+          <ErrorDetailSection label={`${__('Exception')}:`}>
+            {step.error.exception_class}: {step.error.message}
+          </ErrorDetailSection>
+          <ErrorDetailSection label={__('Backtrace')}>
+            {(step.error.backtrace || []).join('\n')}
+          </ErrorDetailSection>
+        </>
+      )}
+      <ErrorDetailSection label={__('Input')}>{step.input}</ErrorDetailSection>
+      <ErrorDetailSection label={__('Output')}>
+        {step.output}
+      </ErrorDetailSection>
+    </Stack>
+  );
+};
+
+ErrorDetailsPane.propTypes = {
+  step: PropTypes.shape({
+    input: PropTypes.node,
+    output: PropTypes.node,
+    error: PropTypes.shape({
+      exception_class: PropTypes.string,
+      message: PropTypes.string,
+      backtrace: PropTypes.array,
+    }),
+  }),
+};
+
+ErrorDetailsPane.defaultProps = {
+  step: null,
+};
+
+const Errors = ({ executionPlan, failedSteps }) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useEffect(() => {
+    setSelectedIndex(idx => {
+      if (idx >= failedSteps.length) {
+        return Math.max(0, failedSteps.length - 1);
+      }
+
+      return idx;
+    });
+  }, [failedSteps.length]);
+
+  if (!executionPlan) {
     return (
       <Alert
-        variant="danger"
-        isInline
+        title={__('Execution plan data not available ')}
+        variant={AlertVariant.danger}
         ouiaId="task-errors-plan-missing"
-        title={__('Execution plan unavailable')}
-      >
-        {__('Execution plan data not available ')}
-      </Alert>
+      />
     );
-  if (!failedSteps.length)
+  }
+
+  if (!failedSteps.length) {
     return (
-      <Alert
-        variant="success"
-        isInline
-        ouiaId="task-errors-none"
-        title={__('No errors')}
-      />
+      <Grid>
+        <GridItem span={12}>
+          <Flex
+            direction={{ default: 'column' }}
+            alignItems={{ default: 'alignItemsCenter' }}
+            justifyContent={{ default: 'justifyContentCenter' }}
+            fullWidth={{ default: 'fullWidth' }}
+          >
+            <FlexItem>
+              <EmptyState variant={EmptyStateVariant.full}>
+                <EmptyStateHeader
+                  titleText={__('No errors found')}
+                  headingLevel="h2"
+                  icon={
+                    <Icon size="xl" status="success">
+                      <CheckCircleIcon />
+                    </Icon>
+                  }
+                />
+                <EmptyStateBody>
+                  {__('The task finished with no errors or warnings.')}
+                </EmptyStateBody>
+              </EmptyState>
+            </FlexItem>
+          </Flex>
+        </GridItem>
+      </Grid>
     );
+  }
+
+  const selectedStep = failedSteps[selectedIndex];
+
   return (
-    <div>
-      {failedSteps.map((step, i) => (
-        <Alert
-          variant="danger"
-          isInline
-          key={i}
-          ouiaId={`task-error-${i}`}
-          title={__('Step error')}
+    <Split hasGutter>
+      <SplitItem className="task-errors-tabs-split">
+        <Tabs
+          id="task-errors-tabs"
+          ouiaId="task-errors-tabs"
+          activeKey={selectedIndex}
+          className="task-errors-tabs"
+          onSelect={(_event, tabIndex) => setSelectedIndex(Number(tabIndex))}
+          isVertical
+          isBox
+          aria-label={__('Failed task errors')}
         >
-          <span>{__('Action')}:</span>
-          <span>
-            <pre>{step.action_class}</pre>
-          </span>
-          <span>{__('Input')}:</span>
-          <span>
-            <pre>{step.input}</pre>
-          </span>
-          <span>{__('Output')}:</span>
-          <span>
-            <pre>{step.output}</pre>
-          </span>
-          {step.error && (
-            <React.Fragment>
-              <span>{__('Exception')}:</span>
-              <span>
-                <pre>
-                  {step.error.exception_class}: {step.error.message}
-                </pre>
-              </span>
-              <span>{__('Backtrace')}:</span>
-              <span>
-                <pre>{(step.error.backtrace || []).join('\n')}</pre>
-              </span>
-            </React.Fragment>
-          )}
-        </Alert>
-      ))}
-    </div>
+          {failedSteps.map((step, i) => (
+            <Tab
+              key={`${step.action_class}-${i}`}
+              eventKey={i}
+              ouiaId={`task-error-${i}`}
+              title={<ErrorTabTitle step={step} />}
+              aria-label={getStepSummary(step)}
+            />
+          ))}
+        </Tabs>
+      </SplitItem>
+      <SplitItem isFilled>
+        <ErrorDetailsPane step={selectedStep} />
+      </SplitItem>
+    </Split>
   );
 };
 

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

@@ -0,0 +1,41 @@
+.task-details-react {
+  .task-errors-detail-section {
+    margin-top: 1rem;
+    margin-left: 1.5rem;
+  }
+
+  .task-errors-detail-label {
+    padding-bottom: 0.25rem;
+  }
+
+  .task-errors-tabs-split {
+    flex: 0 0 min(33%, 20rem);
+  }
+
+
+  .task-errors-codeblock {
+    background-color: transparent;
+  }
+
+  .task-errors-codeblock-code {
+    margin: -1rem;
+    background-color: transparent;
+  }
+
+  .task-errors-tab-title {
+    word-break: break-all;
+    font-weight: var(--pf-v5-global--FontWeight--bold);
+
+    &--danger {
+      color: var(--pf-v5-global--danger-color--200);
+    }
+
+    &--warning {
+      color: var(--pf-v5-global--warning-color--200);
+    }
+  }
+
+  .task-errors-tabs {
+    --pf-v5-c-tabs--m-vertical--MaxWidth: 100%;
+  }
+}

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

@@ -5,17 +5,12 @@ import {
   GridItem,
   Progress,
   ProgressVariant,
-  Icon,
 } from '@patternfly/react-core';
-import {
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  ExclamationTriangleIcon,
-  QuestionCircleIcon,
-} from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
 
+import { taskResultIconEl } from '../../common/taskResultIcon';
+
 const isDelayed = ({ startAt, startedAt }) => {
   if (
     startAt == null ||
@@ -35,41 +30,6 @@ const isDelayed = ({ startAt, startedAt }) => {
   return a.getTime() !== b.getTime();
 };
 
-const resultIconEl = (state, result) => {
-  if (state !== 'stopped')
-    return (
-      <Icon>
-        <QuestionCircleIcon />
-      </Icon>
-    );
-  switch (result) {
-    case 'success':
-      return (
-        <Icon status="success">
-          <CheckCircleIcon />
-        </Icon>
-      );
-    case 'error':
-      return (
-        <Icon status="danger">
-          <ExclamationCircleIcon />
-        </Icon>
-      );
-    case 'warning':
-      return (
-        <Icon status="warning">
-          <ExclamationTriangleIcon />
-        </Icon>
-      );
-    default:
-      return (
-        <Icon>
-          <QuestionCircleIcon />
-        </Icon>
-      );
-  }
-};
-
 const progressVariantForResult = result => {
   switch (result) {
     case 'error':
@@ -117,7 +77,7 @@ const TaskInfo = props => {
         title: 'Result',
         value: (
           <span>
-            {resultIconEl(state, result)} {result}
+            {taskResultIconEl(state, result)} {result}
           </span>
         ),
       },
@@ -182,14 +142,9 @@ const TaskInfo = props => {
         </React.Fragment>
       ))}
       <GridItem span={12} className="pf-v5-u-pb-lg" />
-      <GridItem span={6}>
-        <div className="progress-description">
-          <span className="list-group-item-heading">{__('State')}: </span>
-          {state}
-        </div>
-      </GridItem>
-      <GridItem span={6} className="progress-label-top-right">
-        <span>{`${progress}% ${__('Complete')}`}</span>
+      <GridItem span={12}>
+        <span className="list-group-item-heading">{__('State')}: </span>
+        {state}
       </GridItem>
       <GridItem span={12}>
         <Progress

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

@@ -27,12 +27,7 @@ export const TaskSkeleton = () => {
         </React.Fragment>
       ))}
       <GridItem span={12} className="pf-v5-u-pb-lg" />
-      <GridItem span={6}>
-        <div className="progress-description">
-          <Skeleton />
-        </div>
-      </GridItem>
-      <GridItem span={6} className="progress-label-top-right">
+      <GridItem span={12}>
         <Skeleton />
       </GridItem>
       <GridItem span={12}>

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__/Task.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { STATUS } from 'foremanReact/constants';
 
 import Task from '../Task';
 
@@ -29,7 +28,6 @@ describe('Task', () => {
         parentTask="parent-id"
         taskReload
         canEdit
-        status={STATUS.RESOLVED}
         taskProgressToggle={jest.fn()}
         taskReloadStart={jest.fn()}
       />

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { STATUS } from 'foremanReact/constants';
 import { TaskButtons } from '../TaskButtons';
 
 const setUnlockModalOpen = jest.fn();
@@ -169,7 +168,6 @@ describe('TaskButtons', () => {
       resumeTaskRequest,
       taskProgressToggle,
       taskReloadStart,
-      status: STATUS.RESOLVED,
       canEdit: true,
       resumable: true,
       cancellable: true,