foreman_remote_execution 14.1.4 → 15.0.0

data/webpack/JobInvocationDetail/TemplateInvocation.js

@@ -0,0 +1,202 @@
+import React, { useState, useEffect } from 'react';
+import { isEmpty } from 'lodash';
+import PropTypes from 'prop-types';
+import { ClipboardCopyButton, Alert, Skeleton } from '@patternfly/react-core';
+import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+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,
+} from './JobInvocationConstants';
+import { OutputToggleGroup } from './TemplateInvocationComponents/OutputToggleGroup';
+import { PreviewTemplate } from './TemplateInvocationComponents/PreviewTemplate';
+import { OutputCodeBlock } from './TemplateInvocationComponents/OutputCodeBlock';
+
+const CopyToClipboard = ({ fullOutput }) => {
+  const clipboardCopyFunc = async (event, text) => {
+    try {
+      await navigator.clipboard.writeText(text.toString());
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error?.message);
+    }
+  };
+
+  const onClick = (event, text) => {
+    clipboardCopyFunc(event, text);
+    setCopied(true);
+  };
+  const [copied, setCopied] = React.useState(false);
+  return (
+    <ClipboardCopyButton
+      id="expandable-copy-button"
+      textId="code-content"
+      aria-label="Copy to clipboard"
+      onClick={e => onClick(e, fullOutput)}
+      exitDelay={copied ? 1500 : 600}
+      maxWidth="110px"
+      variant="plain"
+      onTooltipHidden={() => setCopied(false)}
+    >
+      {copied
+        ? __('Successfully copied to clipboard!')
+        : __('Copy to clipboard')}
+    </ClipboardCopyButton>
+  );
+};
+let intervalId;
+export const TemplateInvocation = ({
+  hostID,
+  jobID,
+  isInTableView,
+  hostName,
+}) => {
+  const templateURL = showTemplateInvocationUrl(hostID, jobID);
+  const hostDetailsPageUrl = useForemanHostDetailsPageUrl();
+  const { response, status, setAPIOptions } = useAPI('get', templateURL, {
+    key: GET_TEMPLATE_INVOCATION,
+    headers: { Accept: 'application/json' },
+    handleError: () => {
+      if (intervalId) clearInterval(intervalId);
+    },
+  });
+  const { finished, auto_refresh: autoRefresh } = response;
+
+  useEffect(() => {
+    if (!finished || autoRefresh) {
+      intervalId = setInterval(() => {
+        // Re call api
+        setAPIOptions(prevOptions => ({
+          ...prevOptions,
+        }));
+      }, 5000);
+    }
+    if (intervalId && finished && !autoRefresh) {
+      clearInterval(intervalId);
+    }
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [finished, autoRefresh, setAPIOptions]);
+
+  const errorMessage =
+    response?.response?.data?.error?.message ||
+    response?.response?.data?.error ||
+    JSON.stringify(response);
+  const {
+    preview,
+    output,
+    input_values: inputValues,
+    task_id: taskID,
+    task_cancellable: taskCancellable,
+    permissions,
+  } = response;
+  const [showOutputType, setShowOutputType] = useState({
+    stderr: true,
+    stdout: true,
+    debug: true,
+  });
+  const [showTemplatePreview, setShowTemplatePreview] = useState(false);
+  const [showCommand, setCommand] = useState(false);
+  if (status === STATUS.PENDING && isEmpty(response)) {
+    return <Skeleton />;
+  } else if (status === STATUS.ERROR) {
+    return (
+      <Alert
+        ouiaId="template-invocation-error-alert"
+        variant="danger"
+        title={__(
+          'An error occurred while fetching the template invocation details.'
+        )}
+      >
+        {errorMessage}
+      </Alert>
+    );
+  }
+
+  return (
+    <div
+      id={`template-invocation-${hostID}`}
+      className={`template-invocation ${
+        isInTableView ? ' output-in-table-view' : ''
+      }`}
+    >
+      <OutputToggleGroup
+        showOutputType={showOutputType}
+        setShowOutputType={setShowOutputType}
+        setShowTemplatePreview={setShowTemplatePreview}
+        showTemplatePreview={showTemplatePreview}
+        showCommand={showCommand}
+        setShowCommand={setCommand}
+        newTabUrl={templateInvocationPageUrl(hostID, jobID)}
+        isInTableView={isInTableView}
+        copyToClipboard={
+          <CopyToClipboard
+            fullOutput={output
+              ?.filter(
+                ({ output_type: outputType }) => showOutputType[outputType]
+              )
+              .map(({ output: _output }) => _output)
+              .join('\n')}
+          />
+        }
+        taskID={taskID}
+        jobID={jobID}
+        hostID={hostID}
+        taskCancellable={taskCancellable}
+        permissions={permissions}
+      />
+      {!isInTableView && (
+        <div>
+          {__('Target:')}{' '}
+          <a href={`${hostDetailsPageUrl}${hostName}`}>{hostName}</a>
+        </div>
+      )}
+      {showTemplatePreview && <PreviewTemplate inputValues={inputValues} />}
+      {showCommand && (
+        <>
+          {preview?.status ? (
+            <Alert
+              variant="danger"
+              ouiaId="template-invocation-preview-alert"
+              title={preview.plain}
+            />
+          ) : (
+            <pre className="template-invocation-preview">{preview.plain}</pre>
+          )}
+        </>
+      )}
+      <OutputCodeBlock
+        code={output || []}
+        showOutputType={showOutputType}
+        scrollElement={
+          isInTableView
+            ? `#template-invocation-${hostID} .invocation-output`
+            : '#foreman-main-container'
+        }
+      />
+    </div>
+  );
+};
+
+TemplateInvocation.propTypes = {
+  hostID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  hostName: PropTypes.string, // only used when isInTableView is false
+  jobID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  isInTableView: PropTypes.bool,
+};
+
+TemplateInvocation.defaultProps = {
+  isInTableView: true,
+  hostName: '',
+};
+
+CopyToClipboard.propTypes = {
+  fullOutput: PropTypes.string,
+};
+CopyToClipboard.defaultProps = {
+  fullOutput: '',
+};

data/webpack/JobInvocationDetail/TemplateInvocationComponents/OutputCodeBlock.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+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',
+  };
+
+  const colorizeLine = line => {
+    line = line.replace(COLOR_PATTERN, seq => {
+      const color = seq.match(/(\d+)m/)[1];
+      return `{{{format color:${color}}}}`;
+    });
+
+    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]
+  );
+  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 * 1000).toISOString()}
+          >
+            {lineCounter.toString().padStart(4, '\u00A0')}:{' '}
+          </span>
+          <div className="content">{colorizeLine(lineOutput)}</div>
+        </div>
+      );
+    });
+  });
+  const scrollElementSeleceted = () => document.querySelector(scrollElement);
+  const onClickScrollToTop = () => {
+    scrollElementSeleceted().scrollTo(0, 0);
+  };
+  const onClickScrollToBottom = () => {
+    scrollElementSeleceted().scrollTo(0, scrollElementSeleceted().scrollHeight);
+  };
+  return (
+    <div className="invocation-output">
+      <Button
+        component="a"
+        href="#"
+        variant="link"
+        isInline
+        className="scroll-link"
+        onClick={onClickScrollToBottom}
+        ouiaId="scroll-to-bottom"
+      >
+        {__('Scroll to bottom')}
+      </Button>
+      {codeParse}
+      <Button
+        component="a"
+        href="#"
+        variant="link"
+        isInline
+        className="scroll-link"
+        onClick={onClickScrollToTop}
+        ouiaId="scroll-to-top"
+      >
+        {__('Scroll to top')}
+      </Button>
+    </div>
+  );
+};
+
+OutputCodeBlock.propTypes = {
+  code: PropTypes.array.isRequired,
+  showOutputType: PropTypes.object.isRequired,
+  scrollElement: PropTypes.string.isRequired,
+};

data/webpack/JobInvocationDetail/TemplateInvocationComponents/OutputToggleGroup.js

@@ -0,0 +1,156 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+  Flex,
+  FlexItem,
+  Button,
+} from '@patternfly/react-core';
+import { OutlinedWindowRestoreIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { TemplateActionButtons } from './TemplateActionButtons';
+
+export const OutputToggleGroup = ({
+  showOutputType,
+  setShowOutputType,
+  showTemplatePreview,
+  setShowTemplatePreview,
+  showCommand,
+  setShowCommand,
+  newTabUrl,
+  isInTableView,
+  copyToClipboard,
+  taskID,
+  jobID,
+  hostID,
+  taskCancellable,
+  permissions,
+}) => {
+  const handleSTDERRClick = _isSelected => {
+    setShowOutputType(prevShowOutputType => ({
+      ...prevShowOutputType,
+      stderr: _isSelected,
+    }));
+  };
+
+  const handleSTDOUTClick = _isSelected => {
+    setShowOutputType(prevShowOutputType => ({
+      ...prevShowOutputType,
+      stdout: _isSelected,
+    }));
+  };
+  const handleDEBUGClick = _isSelected => {
+    setShowOutputType(prevShowOutputType => ({
+      ...prevShowOutputType,
+      debug: _isSelected,
+    }));
+  };
+  const handlePreviewTemplateClick = _isSelected => {
+    setShowTemplatePreview(_isSelected);
+  };
+  const handleCommandClick = _isSelected => {
+    setShowCommand(_isSelected);
+  };
+
+  const toggleGroupItems = {
+    stderr: {
+      id: 'stderr-toggle',
+      text: __('STDERR'),
+      onClick: handleSTDERRClick,
+      isSelected: showOutputType.stderr,
+    },
+    stdout: {
+      id: 'stdout-toggle',
+      text: __('STDOUT'),
+      onClick: handleSTDOUTClick,
+      isSelected: showOutputType.stdout,
+    },
+    debug: {
+      id: 'debug-toggle',
+      text: __('DEBUG'),
+      onClick: handleDEBUGClick,
+      isSelected: showOutputType.debug,
+    },
+    previewTemplate: {
+      id: 'preview-template-toggle',
+      text: __('Preview Template'),
+      onClick: handlePreviewTemplateClick,
+      isSelected: showTemplatePreview,
+    },
+    command: {
+      id: 'command-toggle',
+      text: __('Command'),
+      onClick: handleCommandClick,
+      isSelected: showCommand,
+    },
+  };
+
+  return (
+    <Flex>
+      <FlexItem>
+        <ToggleGroup>
+          {Object.values(toggleGroupItems).map(
+            ({ id, text, onClick, isSelected }) => (
+              <ToggleGroupItem
+                key={id}
+                text={text}
+                buttonId={id}
+                isSelected={isSelected}
+                onChange={onClick}
+              />
+            )
+          )}
+        </ToggleGroup>
+      </FlexItem>
+      {isInTableView ? null : (
+        <TemplateActionButtons
+          taskID={taskID}
+          jobID={jobID}
+          hostID={hostID}
+          taskCancellable={taskCancellable}
+          permissions={permissions}
+        />
+      )}
+      <FlexItem>{copyToClipboard}</FlexItem>
+      {isInTableView && (
+        <FlexItem>
+          <Button
+            title={__('Open in new tab')}
+            variant="link"
+            isInline
+            ouiaId="template-invocation-new-tab-button"
+            component="a"
+            href={newTabUrl}
+            target="_blank"
+          >
+            <OutlinedWindowRestoreIcon />
+          </Button>
+        </FlexItem>
+      )}
+    </Flex>
+  );
+};
+
+OutputToggleGroup.propTypes = {
+  showOutputType: PropTypes.shape({
+    stderr: PropTypes.bool,
+    stdout: PropTypes.bool,
+    debug: PropTypes.bool,
+  }).isRequired,
+  setShowOutputType: PropTypes.func.isRequired,
+  setShowTemplatePreview: PropTypes.func.isRequired,
+  showTemplatePreview: PropTypes.bool.isRequired,
+  showCommand: PropTypes.bool.isRequired,
+  setShowCommand: PropTypes.func.isRequired,
+  newTabUrl: PropTypes.string,
+  copyToClipboard: PropTypes.node.isRequired,
+  isInTableView: PropTypes.bool,
+  ...TemplateActionButtons.propTypes,
+};
+
+OutputToggleGroup.defaultProps = {
+  newTabUrl: null,
+  isInTableView: false,
+  ...TemplateActionButtons.defaultProps,
+};

data/webpack/JobInvocationDetail/TemplateInvocationComponents/PreviewTemplate.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  TableComposable,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+} from '@patternfly/react-table';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+export const PreviewTemplate = ({ inputValues }) =>
+  inputValues.length ? (
+    <TableComposable
+      ouiaId="template-invocation-preview-table"
+      isStriped
+      variant="compact"
+    >
+      <Thead>
+        <Tr ouiaId="template-invocation-preview-table-head">
+          <Th modifier="fitContent">{__('User input')}</Th>
+          <Th modifier="fitContent">{__('Value')}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {inputValues.map(({ name, value }, index) => (
+          <Tr
+            key={index}
+            ouiaId={`template-invocation-preview-table-row-${name}`}
+          >
+            <Td>
+              <b>{name}</b>
+            </Td>
+            <Td>{value}</Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </TableComposable>
+  ) : (
+    <span>{__('No user input')}</span>
+  );
+
+PreviewTemplate.propTypes = {
+  inputValues: PropTypes.array,
+};
+
+PreviewTemplate.defaultProps = {
+  inputValues: [],
+};