foreman_openbolt 1.0.0 → 1.1.1

data/webpack/src/Components/TaskExecution/ExecutionDetails.js

@@ -21,7 +21,7 @@ import {
   ClockIcon,
   TimesCircleIcon,
 } from '@patternfly/react-icons';
-
+import { formatDuration, formatDate } from '../common/helpers';
 import { STATUS, POLLING_CONFIG } from '../common/constants';
 import HostsPopover from '../common/HostsPopover';
 
@@ -38,12 +38,12 @@ const STATUS_CONFIGS = {
   },
   [STATUS.EXCEPTION]: {
     icon: ExclamationCircleIcon,
-    color: 'red',
+    color: 'orange',
     label: __('Exception'),
   },
   [STATUS.INVALID]: {
     icon: ExclamationCircleIcon,
-    color: 'red',
+    color: 'yellow',
     label: __('Invalid'),
   },
   [STATUS.RUNNING]: {
@@ -65,24 +65,6 @@ const getStatusConfig = status =>
     label: __('Unknown'),
   };
 
-const formatExecutionTime = (submittedAt, completedAt) => {
-  if (!submittedAt) return __('-');
-
-  const start = new Date(submittedAt);
-  const end = completedAt ? new Date(completedAt) : new Date();
-  const totalSeconds = Math.floor((end - start) / 1000);
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = totalSeconds % 60;
-
-  const parts = [];
-  if (hours > 0) parts.push(`${hours}h`);
-  if (minutes > 0 || hours > 0) parts.push(`${minutes}m`);
-  parts.push(`${seconds}s`);
-
-  return parts.join('');
-};
-
 const DescriptionItem = ({ label, children }) => (
   <DescriptionListGroup>
     <DescriptionListTerm>{label}</DescriptionListTerm>
@@ -129,8 +111,7 @@ StatusLabel.propTypes = {
 };
 
 const ExecutionDetails = ({
-  proxyId,
-  proxyName,
+  smartProxy,
   jobId,
   jobStatus,
   isPolling,
@@ -142,8 +123,8 @@ const ExecutionDetails = ({
     <CardBody>
       <DescriptionList isHorizontal>
         <DescriptionItem label={__('Smart Proxy')}>
-          {proxyId && proxyName ? (
-            <a href={`/smart_proxies/${proxyId}`}>{proxyName}</a>
+          {smartProxy?.id && smartProxy?.name ? (
+            <a href={`/smart_proxies/${smartProxy.id}`}>{smartProxy.name}</a>
           ) : (
             <em>{__('Unknown')}</em>
           )}
@@ -161,8 +142,24 @@ const ExecutionDetails = ({
           <StatusLabel status={jobStatus} isPolling={isPolling} />
         </DescriptionItem>
 
-        <DescriptionItem label={__('Execution Time')}>
-          {formatExecutionTime(submittedAt, completedAt)}
+        <DescriptionItem label={__('Submitted')}>
+          {formatDate(submittedAt)}
+        </DescriptionItem>
+
+        {completedAt && (
+          <DescriptionItem label={__('Completed')}>
+            {formatDate(completedAt)}
+          </DescriptionItem>
+        )}
+
+        <DescriptionItem label={__('Duration')}>
+          {submittedAt
+            ? formatDuration(
+                ((completedAt ? new Date(completedAt) : new Date()) -
+                  new Date(submittedAt)) /
+                  1000
+              )
+            : '-'}
         </DescriptionItem>
       </DescriptionList>
     </CardBody>
@@ -170,8 +167,10 @@ const ExecutionDetails = ({
 );
 
 ExecutionDetails.propTypes = {
-  proxyId: PropTypes.string.isRequired,
-  proxyName: PropTypes.string.isRequired,
+  smartProxy: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+  }),
   jobId: PropTypes.string.isRequired,
   jobStatus: PropTypes.string.isRequired,
   isPolling: PropTypes.bool.isRequired,
@@ -181,6 +180,7 @@ ExecutionDetails.propTypes = {
 };
 
 ExecutionDetails.defaultProps = {
+  smartProxy: null,
   submittedAt: null,
   completedAt: null,
 };

data/webpack/src/Components/TaskExecution/ExecutionDisplay.js

@@ -9,11 +9,9 @@ import ExecutionDetails from './ExecutionDetails';
 import TaskDetails from './TaskDetails';
 
 const ExecutionDisplay = ({
-  proxyId,
-  proxyName,
+  smartProxy,
   jobId,
   jobStatus,
-  pollCount,
   isPolling,
   targets,
   submittedAt,
@@ -41,11 +39,9 @@ const ExecutionDisplay = ({
         }
       >
         <ExecutionDetails
-          proxyId={proxyId}
-          proxyName={proxyName}
+          smartProxy={smartProxy}
           jobId={jobId}
           jobStatus={jobStatus}
-          pollCount={pollCount}
           isPolling={isPolling}
           targets={targets}
           submittedAt={submittedAt}
@@ -75,23 +71,26 @@ const ExecutionDisplay = ({
 };
 
 ExecutionDisplay.propTypes = {
-  proxyId: PropTypes.string.isRequired,
-  proxyName: PropTypes.string.isRequired,
+  smartProxy: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+  }),
   jobId: PropTypes.string.isRequired,
   jobStatus: PropTypes.string.isRequired,
-  pollCount: PropTypes.number.isRequired,
   isPolling: PropTypes.bool.isRequired,
   targets: PropTypes.arrayOf(PropTypes.string).isRequired,
   submittedAt: PropTypes.string,
   completedAt: PropTypes.string,
-  taskName: PropTypes.string.isRequired,
+  taskName: PropTypes.string,
   taskDescription: PropTypes.string,
   taskParameters: PropTypes.object,
 };
 
 ExecutionDisplay.defaultProps = {
+  smartProxy: null,
   submittedAt: null,
   completedAt: null,
+  taskName: null,
   taskDescription: null,
   taskParameters: {},
 };

data/webpack/src/Components/TaskExecution/LoadingIndicator.js

@@ -26,13 +26,18 @@ const LoadingIndicator = ({ jobStatus }) => {
     <Card>
       <CardBody>
         <Bullseye>
-          <EmptyState variant={EmptyStateVariant.lg}>
+          <EmptyState
+            variant={EmptyStateVariant.lg}
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+          >
             <EmptyStateHeader
               titleText={getMessage()}
               icon={<EmptyStateIcon icon={Spinner} />}
               headingLevel="h3"
             />
-            <EmptyStateBody role="status" aria-live="polite" aria-atomic="true">
+            <EmptyStateBody>
               {__(
                 'This page will update automatically when the task completes.'
               )}

data/webpack/src/Components/TaskExecution/ResultDisplay.js

@@ -27,18 +27,21 @@ import {
 const CopyButton = ({ getText }) => {
   const [copied, setCopied] = useState(false);
 
-  const handleCopy = () => {
-    /* eslint-disable promise/prefer-await-to-then */
-    navigator.clipboard.writeText(getText()).then(() => {
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(getText());
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    });
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.warn('Clipboard copy failed:', err);
+    }
   };
 
   return (
     <Button
       variant="control"
-      aria-label="Copy"
+      aria-label={copied ? __('Copied!') : __('Copy')}
       onClick={handleCopy}
       icon={<CopyIcon />}
     >
@@ -103,22 +106,15 @@ const ResultDisplay = ({ jobResult, jobLog }) => {
     <Card>
       <CardBody>
         <div style={{ position: 'relative' }}>
-          <div
-            style={{
-              position: 'absolute',
-              right: 0,
-              zIndex: 1,
-            }}
-          >
-            {((activeTabKey === 0 && hasResult) ||
-              (activeTabKey === 1 && hasLog)) && (
+          {((activeTabKey === 0 && hasResult) ||
+            (activeTabKey === 1 && hasLog)) && (
+            <div style={{ position: 'absolute', right: 0, zIndex: 1 }}>
               <CopyButton getText={getActiveContent} />
-            )}
-          </div>
+            </div>
+          )}
           <Tabs
             activeKey={activeTabKey}
             onSelect={(_event, tabIndex) => setActiveTabKey(tabIndex)}
-            actions={<CopyButton getText={getActiveContent} />}
           >
             <Tab
               eventKey={0}

data/webpack/src/Components/TaskExecution/TaskDetails.js

@@ -10,88 +10,79 @@ import {
   DescriptionListTerm,
 } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { displayValue } from '../common/helpers';
 
-const TaskDetails = ({ taskName, taskDescription, taskParameters }) => {
-  const displayValue = value => {
-    if (value === null || value === undefined) {
-      return '-';
-    }
-    if (typeof value === 'object') {
-      return JSON.stringify(value);
-    }
-    return String(value);
-  };
+const TaskDetails = ({ taskName, taskDescription, taskParameters }) => (
+  <Card>
+    <CardBody>
+      <DescriptionList isHorizontal>
+        <DescriptionListGroup>
+          <DescriptionListTerm>{__('Task Name')}</DescriptionListTerm>
+          <DescriptionListDescription>
+            <span className="pf-v5-u-font-family-monospace">{taskName}</span>
+          </DescriptionListDescription>
+        </DescriptionListGroup>
 
-  return (
-    <Card>
-      <CardBody>
-        <DescriptionList isHorizontal>
+        {taskDescription && (
           <DescriptionListGroup>
-            <DescriptionListTerm>{__('Task Name')}</DescriptionListTerm>
+            <DescriptionListTerm>{__('Description')}</DescriptionListTerm>
             <DescriptionListDescription>
-              <span className="pf-v5-u-font-family-monospace">{taskName}</span>
+              {taskDescription}
             </DescriptionListDescription>
           </DescriptionListGroup>
+        )}
 
-          {taskDescription && (
-            <DescriptionListGroup>
-              <DescriptionListTerm>{__('Description')}</DescriptionListTerm>
-              <DescriptionListDescription>
-                {taskDescription}
-              </DescriptionListDescription>
-            </DescriptionListGroup>
-          )}
-
-          {taskParameters && Object.keys(taskParameters).length > 0 && (
-            <DescriptionListGroup>
-              <DescriptionListTerm>{__('Parameters')}</DescriptionListTerm>
-              <DescriptionListDescription>
-                <Table
-                  variant="compact"
-                  borders
-                  isStriped
-                  gridBreakPoint="grid-md"
-                  style={{ wordBreak: 'break-word' }}
-                >
-                  <Thead>
-                    <Tr>
-                      <Th width={30}>{__('Name')}</Th>
-                      <Th width={70}>{__('Value')}</Th>
+        {taskParameters && Object.keys(taskParameters).length > 0 && (
+          <DescriptionListGroup>
+            <DescriptionListTerm>{__('Parameters')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Table
+                variant="compact"
+                borders
+                isStriped
+                gridBreakPoint="grid-md"
+                style={{ wordBreak: 'break-word' }}
+                aria-label={__('Task parameters')}
+              >
+                <Thead>
+                  <Tr>
+                    <Th width={30}>{__('Name')}</Th>
+                    <Th width={70}>{__('Value')}</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {Object.entries(taskParameters).map(([key, value]) => (
+                    <Tr key={key}>
+                      <Td>
+                        <span className="pf-v5-u-font-family-monospace">
+                          {key}
+                        </span>
+                      </Td>
+                      <Td>
+                        <span className="pf-v5-u-font-family-monospace">
+                          {displayValue(value)}
+                        </span>
+                      </Td>
                     </Tr>
-                  </Thead>
-                  <Tbody>
-                    {Object.entries(taskParameters).map(([key, value]) => (
-                      <Tr key={key}>
-                        <Td>
-                          <span className="pf-v5-u-font-family-monospace">
-                            {key}
-                          </span>
-                        </Td>
-                        <Td>
-                          <span className="pf-v5-u-font-family-monospace">
-                            {displayValue(value)}
-                          </span>
-                        </Td>
-                      </Tr>
-                    ))}
-                  </Tbody>
-                </Table>
-              </DescriptionListDescription>
-            </DescriptionListGroup>
-          )}
-        </DescriptionList>
-      </CardBody>
-    </Card>
-  );
-};
+                  ))}
+                </Tbody>
+              </Table>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        )}
+      </DescriptionList>
+    </CardBody>
+  </Card>
+);
 
 TaskDetails.propTypes = {
-  taskName: PropTypes.string.isRequired,
+  taskName: PropTypes.string,
   taskDescription: PropTypes.string,
   taskParameters: PropTypes.object,
 };
 
 TaskDetails.defaultProps = {
+  taskName: null,
   taskDescription: null,
   taskParameters: {},
 };

data/webpack/src/Components/TaskExecution/__tests__/ExecutionDetails.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ExecutionDetails from '../ExecutionDetails';
+
+const defaultProps = {
+  smartProxy: { id: 1, name: 'test-proxy' },
+  jobId: 'job-abc-123',
+  jobStatus: 'running',
+  isPolling: true,
+  targets: ['host1.example.com', 'host2.example.com'],
+  submittedAt: '2026-01-15T10:30:00Z',
+  completedAt: null,
+};
+
+describe('ExecutionDetails', () => {
+  test('renders job ID', () => {
+    render(<ExecutionDetails {...defaultProps} />);
+    expect(screen.getByText('job-abc-123')).toBeInTheDocument();
+  });
+
+  test('renders smart proxy name as link', () => {
+    render(<ExecutionDetails {...defaultProps} />);
+    const link = screen.getByText('test-proxy');
+    expect(link).toBeInTheDocument();
+    expect(link.closest('a')).toHaveAttribute('href', '/smart_proxies/1');
+  });
+
+  test('renders unknown proxy when smartProxy is null', () => {
+    render(<ExecutionDetails {...defaultProps} smartProxy={null} />);
+    expect(screen.getByText('Unknown')).toBeInTheDocument();
+  });
+
+  test('renders status label', () => {
+    render(<ExecutionDetails {...defaultProps} jobStatus="success" />);
+    expect(screen.getByText('Success')).toBeInTheDocument();
+  });
+
+  test('shows polling indicator when polling', () => {
+    render(<ExecutionDetails {...defaultProps} isPolling />);
+    expect(screen.getByText(/Updating every 5 seconds/)).toBeInTheDocument();
+  });
+
+  test('renders target count via HostsPopover', () => {
+    render(<ExecutionDetails {...defaultProps} />);
+    expect(screen.getByText('2')).toBeInTheDocument();
+  });
+});

data/webpack/src/Components/TaskExecution/__tests__/ExecutionDisplay.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ExecutionDisplay from '../ExecutionDisplay';
+
+const defaultProps = {
+  smartProxy: { id: 1, name: 'proxy1' },
+  jobId: 'job-123',
+  jobStatus: 'running',
+  isPolling: true,
+  targets: ['host1.example.com'],
+  submittedAt: '2026-01-15T10:30:00Z',
+  completedAt: null,
+  taskName: 'test::task',
+  taskDescription: 'A test task',
+  taskParameters: { name: 'nginx' },
+};
+
+describe('ExecutionDisplay', () => {
+  test('renders both tab titles', () => {
+    render(<ExecutionDisplay {...defaultProps} />);
+    expect(screen.getByText('Execution Details')).toBeInTheDocument();
+    expect(screen.getByText('Task Details')).toBeInTheDocument();
+  });
+
+  test('renders execution details content by default', () => {
+    render(<ExecutionDisplay {...defaultProps} />);
+    expect(screen.getByText('job-123')).toBeInTheDocument();
+  });
+});

data/webpack/src/Components/TaskExecution/__tests__/LoadingIndicator.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import LoadingIndicator from '../LoadingIndicator';
+
+describe('LoadingIndicator', () => {
+  test('shows running status message for running jobs', () => {
+    render(<LoadingIndicator jobStatus="running" />);
+    expect(screen.getByText(/running/i)).toBeInTheDocument();
+  });
+
+  test('shows running status message for pending jobs', () => {
+    render(<LoadingIndicator jobStatus="pending" />);
+    expect(screen.getByText(/pending/i)).toBeInTheDocument();
+  });
+
+  test('shows processing message for non-running statuses', () => {
+    render(<LoadingIndicator jobStatus="success" />);
+    expect(screen.getByText('Processing task results...')).toBeInTheDocument();
+  });
+
+  test('renders with status role for accessibility', () => {
+    render(<LoadingIndicator jobStatus="running" />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+});

data/webpack/src/Components/TaskExecution/__tests__/ResultDisplay.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ResultDisplay from '../ResultDisplay';
+
+describe('ResultDisplay', () => {
+  test('renders result JSON in the default tab', () => {
+    const jobResult = { items: [{ status: 'success' }] };
+    render(<ResultDisplay jobResult={jobResult} jobLog="" />);
+    expect(screen.getByText('Result')).toBeInTheDocument();
+    expect(screen.getByText(/items/)).toBeInTheDocument();
+    expect(screen.getByText(/success/)).toBeInTheDocument();
+  });
+
+  test('renders log content when log tab is selected', () => {
+    render(
+      <ResultDisplay jobResult={{}} jobLog="Task finished successfully" />
+    );
+    fireEvent.click(screen.getByText('Log Output'));
+    expect(screen.getByText('Task finished successfully')).toBeInTheDocument();
+  });
+
+  test('shows empty state when result is empty', () => {
+    render(<ResultDisplay jobResult={{}} jobLog="" />);
+    expect(
+      screen.getByText('No result data returned from the task.')
+    ).toBeInTheDocument();
+  });
+});

data/webpack/src/Components/TaskExecution/__tests__/TaskDetails.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import TaskDetails from '../TaskDetails';
+
+describe('TaskDetails', () => {
+  test('renders task name', () => {
+    render(<TaskDetails taskName="mymod::install" />);
+    expect(screen.getByText('mymod::install')).toBeInTheDocument();
+  });
+
+  test('renders description when provided', () => {
+    render(
+      <TaskDetails
+        taskName="mymod::install"
+        taskDescription="Install a system package"
+      />
+    );
+    expect(screen.getByText('Install a system package')).toBeInTheDocument();
+  });
+
+  test('does not render description section when null', () => {
+    render(<TaskDetails taskName="test::task" taskDescription={null} />);
+    expect(screen.queryByText('Description')).not.toBeInTheDocument();
+  });
+
+  test('renders parameters table when parameters exist', () => {
+    render(
+      <TaskDetails
+        taskName="test::task"
+        taskParameters={{ name: 'nginx', version: '1.0' }}
+      />
+    );
+    expect(screen.getByText('name')).toBeInTheDocument();
+    expect(screen.getByText('nginx')).toBeInTheDocument();
+    expect(screen.getByText('version')).toBeInTheDocument();
+    expect(screen.getByText('1.0')).toBeInTheDocument();
+  });
+});

data/webpack/src/Components/TaskExecution/__tests__/TaskExecution.test.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import { MemoryRouter } from 'react-router-dom';
+import { API } from 'foremanReact/redux/API';
+import TaskExecution from '../index';
+
+const mockStore = createStore(() => ({}));
+
+const renderWithProviders = (jobId = 'test-job-123') => {
+  const initialEntry = jobId
+    ? `/foreman_openbolt/page_task_execution?job_id=${jobId}`
+    : '/foreman_openbolt/page_task_execution';
+
+  return render(
+    <Provider store={mockStore}>
+      <MemoryRouter initialEntries={[initialEntry]}>
+        <TaskExecution />
+      </MemoryRouter>
+    </Provider>
+  );
+};
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('TaskExecution', () => {
+  test('renders Run Another Task button', () => {
+    API.get.mockReturnValue(new Promise(() => {}));
+    renderWithProviders();
+    expect(screen.getByText('Run Another Task')).toBeInTheDocument();
+  });
+
+  test('renders ExecutionDisplay with job details', () => {
+    API.get.mockReturnValue(new Promise(() => {}));
+    renderWithProviders();
+    expect(screen.getByText('Execution Details')).toBeInTheDocument();
+  });
+
+  test('shows loading indicator while polling', () => {
+    API.get.mockReturnValue(new Promise(() => {}));
+    renderWithProviders();
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  test('returns null and redirects when job_id is missing', () => {
+    const { container } = renderWithProviders(null);
+    expect(container.innerHTML).toBe('');
+  });
+
+  test('strips ANSI codes from log output when result is available', async () => {
+    const statusData = {
+      status: 'success',
+      task_name: 'test::task',
+      targets: ['host1'],
+      submitted_at: '2026-01-01T00:00:00Z',
+      completed_at: '2026-01-01T00:01:00Z',
+      smart_proxy: { id: 1, name: 'proxy1' },
+    };
+    const resultData = {
+      command: 'bolt task run test::task',
+      value: { items: [] },
+      log: '\u001b[32mSuccess\u001b[0m: Task completed',
+    };
+
+    API.get
+      .mockResolvedValueOnce({ data: statusData })
+      .mockResolvedValueOnce({ data: resultData });
+
+    renderWithProviders();
+
+    // Wait for result to render, then verify ANSI codes are stripped
+    await screen.findByText('Result');
+    // The log should contain the clean text without ANSI escape sequences
+    expect(screen.getByText(/Success: Task completed/)).toBeInTheDocument();
+    expect(screen.queryByText(/\[32m/)).not.toBeInTheDocument();
+  });
+});