foreman_remote_execution 18.0.0 → 18.1.0

data/webpack/JobInvocationDetail/TemplateInvocation.js

@@ -1,17 +1,13 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import { isEmpty } from 'lodash';
 import PropTypes from 'prop-types';
 import { ClipboardCopyButton, Alert, Skeleton } from '@patternfly/react-core';
-import { useDispatch, useSelector } from 'react-redux';
-import { APIActions } from 'foremanReact/redux/API';
+import { useSelector } from 'react-redux';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { useForemanHostDetailsPageUrl } from 'foremanReact/Root/Context/ForemanContext';
 import { STATUS } from 'foremanReact/constants';
 import {
-  showTemplateInvocationUrl,
   templateInvocationPageUrl,
-  GET_TEMPLATE_INVOCATION,
-  AUTO_REFRESH_INTERVAL_MS,
   CLIPBOARD_COPIED_EXIT_DELAY_MS,
   CLIPBOARD_DEFAULT_EXIT_DELAY_MS,
 } from './JobInvocationConstants';
@@ -19,6 +15,7 @@ import {
   selectTemplateInvocationStatus,
   selectTemplateInvocation,
 } from './JobInvocationSelectors';
+import { useTemplateInvocationOutputPolling } from './useTemplateInvocationOutputPolling';
 import { OutputToggleGroup } from './TemplateInvocationComponents/OutputToggleGroup';
 import { PreviewTemplate } from './TemplateInvocationComponents/PreviewTemplate';
 import { OutputCodeBlock } from './TemplateInvocationComponents/OutputCodeBlock';
@@ -74,64 +71,16 @@ export const TemplateInvocation = ({
   showCommand,
   setShowCommand,
 }) => {
-  const timeoutRef = useRef(null);
-  const templateURL = showTemplateInvocationUrl(hostID, jobID);
   const hostDetailsPageUrl = useForemanHostDetailsPageUrl();
 
   const status = useSelector(selectTemplateInvocationStatus(hostID));
   const response = useSelector(selectTemplateInvocation(hostID));
-  const dispatch = useDispatch();
-
-  const responseRef = useRef(response);
-  useEffect(() => {
-    responseRef.current = response;
-  }, [response]);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const schedulePoll = () => {
-      if (cancelled) return;
-      dispatch(
-        APIActions.get({
-          url: templateURL,
-          key: `${GET_TEMPLATE_INVOCATION}_${hostID}`,
-          handleSuccess: ({ data }) => {
-            if (cancelled) return;
-            const isFinished = data?.finished ?? true;
-            // eslint-disable-next-line camelcase
-            const autoRefresh = data?.auto_refresh || false;
-            if (!isFinished && autoRefresh) {
-              timeoutRef.current = setTimeout(
-                schedulePoll,
-                AUTO_REFRESH_INTERVAL_MS
-              );
-            } else {
-              timeoutRef.current = null;
-            }
-          },
-          handleError: () => {
-            if (cancelled) return;
-            timeoutRef.current = null;
-          },
-        })
-      );
-    };
-
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = null;
-
-    if (isExpanded) {
-      if (responseRef.current?.finished) return undefined;
-      schedulePoll();
-    }
-
-    return () => {
-      cancelled = true;
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    };
-  }, [isExpanded, dispatch, templateURL, hostID]);
+  const liveOutput = useTemplateInvocationOutputPolling({
+    hostID,
+    jobID,
+    isExpanded,
+    response,
+  });
 
   if (!response || (status === STATUS.PENDING && isEmpty(response))) {
     return <Skeleton data-testid="template-invocation-skeleton" />;
@@ -156,13 +105,7 @@ export const TemplateInvocation = ({
     );
   }
 
-  const {
-    preview,
-    output,
-    input_values: inputValues,
-    task,
-    permissions,
-  } = response;
+  const { preview, input_values: inputValues, task, permissions } = response;
   const { id: taskID, cancellable: taskCancellable } = task || {};
 
   return (
@@ -183,7 +126,7 @@ export const TemplateInvocation = ({
         isInTableView={isInTableView}
         copyToClipboard={
           <CopyToClipboard
-            fullOutput={output
+            fullOutput={liveOutput
               ?.filter(
                 ({ output_type: outputType }) => showOutputType[outputType]
               )
@@ -226,7 +169,7 @@ export const TemplateInvocation = ({
         </>
       )}
       <OutputCodeBlock
-        code={output || []}
+        code={liveOutput}
         showOutputType={showOutputType}
         scrollElement={
           isInTableView

data/webpack/JobInvocationDetail/TemplateInvocationComponents/OutputCodeBlock.js

@@ -9,58 +9,87 @@ import { Button } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { MS_PER_SECOND } from 'foremanReact/constants';
 
+// eslint-disable-next-line no-control-regex
+const COLOR_PATTERN = /\x1b\[[\d;]*m/g;
+const CONSOLE_COLOR = {
+  '31': 'red',
+  '32': 'lightgreen',
+  '33': 'orange',
+  '34': 'deepskyblue',
+  '35': 'mediumpurple',
+  '36': 'cyan',
+  '37': 'grey',
+  '91': 'red',
+  '92': 'lightgreen',
+  '93': 'yellow',
+  '94': 'lightblue',
+  '95': 'violet',
+  '96': 'turquoise',
+  '0': 'default',
+  '39': 'default',
+};
+const parsedOutput = new WeakMap();
+
+const colorizeLine = line => {
+  line = line.replace(COLOR_PATTERN, seq => {
+    const codes = seq.match(/(\d+)/g) || [];
+    const lastColorCode =
+      [...codes].reverse().find(code_ => code_ in CONSOLE_COLOR) || '0';
+    return `{{{format color:${lastColorCode}}}}`;
+  });
+
+  let currentColor = 'default';
+  const parts = line.split(/({{{format.*?}}})/).filter(Boolean);
+  if (parts.length === 0) return <span>{'\n'}</span>;
+
+  // eslint-disable-next-line array-callback-return, consistent-return
+  return parts.map((consoleLine, index) => {
+    if (consoleLine.includes('{{{format')) {
+      const colorMatch = consoleLine.match(/color:(\d+)/);
+      if (colorMatch) {
+        const colorIndex = colorMatch[1];
+        currentColor = CONSOLE_COLOR[colorIndex] || 'default';
+      }
+    } else {
+      return (
+        <span key={index} style={{ color: currentColor }}>
+          {consoleLine.length ? consoleLine : '\n'}
+        </span>
+      );
+    }
+  });
+};
+
+const getLineOutputs = lineSet => {
+  if (parsedOutput.has(lineSet)) return parsedOutput.get(lineSet);
+
+  const lineOutputs =
+    lineSet.output === '\n'
+      ? []
+      : lineSet.output
+          .replace(/\r\n/g, '\n')
+          .replace(/\n$/, '')
+          .split('\n');
+  parsedOutput.set(lineSet, lineOutputs);
+  return lineOutputs;
+};
+
+const OutputLineSet = React.memo(({ lineSet, startLine }) =>
+  getLineOutputs(lineSet).map((lineOutput, index) => (
+    <div key={index} className={`line ${lineSet.output_type}`}>
+      <span
+        className="counter"
+        title={new Date(lineSet.timestamp * MS_PER_SECOND).toISOString()}
+      >
+        {(startLine + index).toString().padStart(4, '\u00A0')}:{' '}
+      </span>
+      <div className="content">{colorizeLine(lineOutput)}</div>
+    </div>
+  ))
+);
+
 export const OutputCodeBlock = ({ code, showOutputType, scrollElement }) => {
   let lineCounter = 0;
-  // eslint-disable-next-line no-control-regex
-  const COLOR_PATTERN = /\x1b\[[\d;]*m/g;
-  const CONSOLE_COLOR = {
-    '31': 'red',
-    '32': 'lightgreen',
-    '33': 'orange',
-    '34': 'deepskyblue',
-    '35': 'mediumpurple',
-    '36': 'cyan',
-    '37': 'grey',
-    '91': 'red',
-    '92': 'lightgreen',
-    '93': 'yellow',
-    '94': 'lightblue',
-    '95': 'violet',
-    '96': 'turquoise',
-    '0': 'default',
-    '39': 'default',
-  };
-
-  const colorizeLine = line => {
-    line = line.replace(COLOR_PATTERN, seq => {
-      const codes = seq.match(/(\d+)/g) || [];
-      const lastColorCode =
-        [...codes].reverse().find(code_ => code_ in CONSOLE_COLOR) || '0';
-      return `{{{format color:${lastColorCode}}}}`;
-    });
-
-    let currentColor = 'default';
-    const parts = line.split(/({{{format.*?}}})/).filter(Boolean);
-    if (parts.length === 0) {
-      return <span>{'\n'}</span>;
-    }
-    // eslint-disable-next-line array-callback-return, consistent-return
-    return parts.map((consoleLine, index) => {
-      if (consoleLine.includes('{{{format')) {
-        const colorMatch = consoleLine.match(/color:(\d+)/);
-        if (colorMatch) {
-          const colorIndex = colorMatch[1];
-          currentColor = CONSOLE_COLOR[colorIndex] || 'default';
-        }
-      } else {
-        return (
-          <span key={index} style={{ color: currentColor }}>
-            {consoleLine.length ? consoleLine : '\n'}
-          </span>
-        );
-      }
-    });
-  };
   const filteredCode = code.filter(
     ({ output_type: outputType }) => showOutputType[outputType]
   );
@@ -109,28 +138,16 @@ export const OutputCodeBlock = ({ code, showOutputType, scrollElement }) => {
   if (!filteredCode.length) {
     return <div>{__('No output for the selected filters')}</div>;
   }
-  const codeParse = filteredCode.map(line => {
-    if (line.output === '\n') {
-      return null;
-    }
-    const lineOutputs = line.output
-      .replace(/\r\n/g, '\n')
-      .replace(/\n$/, '')
-      .split('\n');
-    return lineOutputs.map((lineOutput, index) => {
-      lineCounter += 1;
-      return (
-        <div key={index} className={`line ${line.output_type}`}>
-          <span
-            className="counter"
-            title={new Date(line.timestamp * MS_PER_SECOND).toISOString()}
-          >
-            {lineCounter.toString().padStart(4, '\u00A0')}:{' '}
-          </span>
-          <div className="content">{colorizeLine(lineOutput)}</div>
-        </div>
-      );
-    });
+  const codeParse = filteredCode.map((lineSet, index) => {
+    const startLine = lineCounter + 1;
+    lineCounter += getLineOutputs(lineSet).length;
+    return (
+      <OutputLineSet
+        key={`${lineSet.timestamp}-${index}`}
+        lineSet={lineSet}
+        startLine={startLine}
+      />
+    );
   });
 
   return (
@@ -167,3 +184,8 @@ OutputCodeBlock.propTypes = {
   showOutputType: PropTypes.object.isRequired,
   scrollElement: PropTypes.string.isRequired,
 };
+
+OutputLineSet.propTypes = {
+  lineSet: PropTypes.object.isRequired,
+  startLine: PropTypes.number.isRequired,
+};

data/webpack/JobInvocationDetail/TemplateInvocationHelpers.js

@@ -0,0 +1,33 @@
+export const getLastOutputTimestamp = output =>
+  output.length ? output[output.length - 1].timestamp : null;
+
+export const normalizeOutput = output =>
+  output.reduce((normalized, lineSet) => {
+    const previousLineSet = normalized[normalized.length - 1];
+
+    if (
+      previousLineSet &&
+      previousLineSet.output_type === lineSet.output_type &&
+      !previousLineSet.output.endsWith('\n')
+    ) {
+      const firstCompleteLine = lineSet.output.match(/^[^\n]*\n/);
+      if (firstCompleteLine) {
+        normalized[normalized.length - 1] = {
+          ...previousLineSet,
+          output: previousLineSet.output + firstCompleteLine[0],
+        };
+
+        const remainder = lineSet.output.slice(firstCompleteLine[0].length);
+        if (remainder) normalized.push({ ...lineSet, output: remainder });
+        return normalized;
+      }
+    }
+
+    normalized.push(lineSet);
+    return normalized;
+  }, []);
+
+export const mergeOutput = (currentOutput, newOutput) => {
+  if (!newOutput.length) return currentOutput;
+  return normalizeOutput([...currentOutput, ...newOutput]);
+};

data/webpack/JobInvocationDetail/__tests__/JobInvocationDetailEmptyState.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import JobInvocationEmptyState from '../JobInvocationEmptyState';

data/webpack/JobInvocationDetail/__tests__/MainInformation.test.js

@@ -245,12 +245,6 @@ describe('JobInvocationDetailPage', () => {
     expect(screen.getByText('Abort')).toBeInTheDocument();
     expect(screen.queryByText('Enable recurring')).not.toBeInTheDocument();
     expect(screen.queryByText('Cancel recurring')).not.toBeInTheDocument();
-    expect(
-      screen
-        .getByText('Legacy UI')
-        .closest('a')
-        .getAttribute('href')
-    ).toEqual(`/legacy/job_invocations/${jobId}`);
   });
 
   it('keeps toolbar buttons mounted while job invocation data is refreshing', async () => {

data/webpack/JobInvocationDetail/__tests__/OutputCodeBlock.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { OutputCodeBlock } from '../TemplateInvocationComponents/OutputCodeBlock';
 import { jobInvocationOutput } from './fixtures';
 

data/webpack/JobInvocationDetail/__tests__/TableToolbarActions.test.js

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import axios from 'axios';
 import { foremanUrl } from 'foremanReact/common/helpers';

data/webpack/JobInvocationDetail/__tests__/TemplateInvocation.test.js

@@ -2,13 +2,16 @@ import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
 import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import API from 'foremanReact/API';
 import * as api from 'foremanReact/redux/API';
 import * as selectors from '../JobInvocationSelectors';
 import { TemplateInvocation } from '../TemplateInvocation';
 import { mockTemplateInvocationResponse } from './fixtures';
 
 jest.spyOn(api, 'get');
+jest.mock('foremanReact/API');
 jest.mock('../JobInvocationSelectors');
 
 jest.mock('foremanReact/components/ToastsList', () => ({
@@ -47,6 +50,7 @@ const mockProps = {
 
 describe('TemplateInvocation', () => {
   beforeEach(() => {
+    API.get.mockImplementation(() => new Promise(() => {}));
     selectors.selectTemplateInvocationStatus.mockImplementation(() => () =>
       'RESOLVED'
     );

data/webpack/JobInvocationDetail/__tests__/TemplateInvocationHelpers.test.js

@@ -0,0 +1,94 @@
+import {
+  getLastOutputTimestamp,
+  mergeOutput,
+  normalizeOutput,
+} from '../TemplateInvocationHelpers';
+
+describe('TemplateInvocationHelpers', () => {
+  describe('getLastOutputTimestamp', () => {
+    it('returns null for empty output', () => {
+      expect(getLastOutputTimestamp([])).toBeNull();
+    });
+
+    it('returns the timestamp of the last output chunk', () => {
+      expect(
+        getLastOutputTimestamp([
+          { timestamp: 1, output: 'first\n' },
+          { timestamp: 2, output: 'second\n' },
+        ])
+      ).toBe(2);
+    });
+  });
+
+  describe('normalizeOutput', () => {
+    it('joins lines split between chunks in one response', () => {
+      const result = normalizeOutput([
+        { timestamp: 1, output_type: 'stdout', output: 'hel' },
+        {
+          timestamp: 2,
+          output_type: 'stdout',
+          output: 'lo\r\nworld\r\n',
+        },
+      ]);
+
+      expect(result).toEqual([
+        { timestamp: 1, output_type: 'stdout', output: 'hello\r\n' },
+        { timestamp: 2, output_type: 'stdout', output: 'world\r\n' },
+      ]);
+    });
+  });
+
+  describe('mergeOutput', () => {
+    it('appends new chunks without changing existing objects', () => {
+      const existingChunk = { timestamp: 1, output: 'first\n' };
+      const newChunk = { timestamp: 2, output: 'second\n' };
+
+      const result = mergeOutput([existingChunk], [newChunk]);
+
+      expect(result).toEqual([existingChunk, newChunk]);
+      expect(result[0]).toBe(existingChunk);
+      expect(result[1]).toBe(newChunk);
+    });
+
+    it('joins a line split across two polling responses', () => {
+      const result = mergeOutput(
+        [{ timestamp: 1, output: 'partial ' }],
+        [{ timestamp: 2, output: 'line\nnext line\n' }]
+      );
+
+      expect(result).toEqual([
+        { timestamp: 1, output: 'partial line\n' },
+        { timestamp: 2, output: 'next line\n' },
+      ]);
+    });
+
+    it('does not join chunks of different output types', () => {
+      const result = mergeOutput(
+        [{ timestamp: 1, output_type: 'stdout', output: 'partial ' }],
+        [{ timestamp: 2, output_type: 'stderr', output: 'error\n' }]
+      );
+
+      expect(result).toEqual([
+        { timestamp: 1, output_type: 'stdout', output: 'partial ' },
+        { timestamp: 2, output_type: 'stderr', output: 'error\n' },
+      ]);
+    });
+
+    it('does not append an empty chunk after completing a split line', () => {
+      const result = mergeOutput(
+        [{ timestamp: 1, output_type: 'stdout', output: 'partial ' }],
+        [{ timestamp: 2, output_type: 'stdout', output: 'line\n' }]
+      );
+
+      expect(result).toEqual([
+        { timestamp: 1, output_type: 'stdout', output: 'partial line\n' },
+      ]);
+    });
+
+    it('returns the current output when there is nothing to append', () => {
+      const currentOutput = [{ timestamp: 1, output: 'first\n' }];
+
+      expect(mergeOutput(currentOutput, [])).toBe(currentOutput);
+    });
+  });
+});