foreman_openbolt 0.0.1

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

@@ -0,0 +1,188 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import {
+  Card,
+  CardBody,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Label,
+  Flex,
+  FlexItem,
+  Text,
+  TextVariants,
+} from '@patternfly/react-core';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  InProgressIcon,
+  ClockIcon,
+  TimesCircleIcon,
+} from '@patternfly/react-icons';
+
+import { STATUS, POLLING_CONFIG } from '../common/constants';
+import HostsPopover from '../common/HostsPopover';
+
+const STATUS_CONFIGS = {
+  [STATUS.SUCCESS]: {
+    icon: CheckCircleIcon,
+    color: 'green',
+    label: __('Success'),
+  },
+  [STATUS.FAILURE]: {
+    icon: ExclamationCircleIcon,
+    color: 'red',
+    label: __('Failed'),
+  },
+  [STATUS.EXCEPTION]: {
+    icon: ExclamationCircleIcon,
+    color: 'red',
+    label: __('Exception'),
+  },
+  [STATUS.INVALID]: {
+    icon: ExclamationCircleIcon,
+    color: 'red',
+    label: __('Invalid'),
+  },
+  [STATUS.RUNNING]: {
+    icon: InProgressIcon,
+    color: 'blue',
+    label: __('Running'),
+  },
+  [STATUS.PENDING]: {
+    icon: ClockIcon,
+    color: 'blue',
+    label: __('Pending'),
+  },
+};
+
+const getStatusConfig = status =>
+  STATUS_CONFIGS[status] || {
+    icon: TimesCircleIcon,
+    color: 'grey',
+    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>
+    <DescriptionListDescription>{children}</DescriptionListDescription>
+  </DescriptionListGroup>
+);
+
+DescriptionItem.propTypes = {
+  label: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+const StatusLabel = ({ status, isPolling }) => {
+  const statusConfig = getStatusConfig(status);
+  const StatusIcon = statusConfig.icon;
+  const intervalSeconds = Math.round(POLLING_CONFIG.INTERVAL / 1000);
+
+  return (
+    <Flex
+      spaceItems={{ default: 'spaceItemsSm' }}
+      alignItems={{ default: 'alignItemsCenter' }}
+    >
+      <FlexItem>
+        <Label color={statusConfig.color} icon={<StatusIcon />}>
+          {statusConfig.label}
+        </Label>
+      </FlexItem>
+      {isPolling && (
+        <>
+          <FlexItem>
+            <Text component={TextVariants.small} className="pf-v5-u-color-200">
+              {sprintf(__('Updating every %s seconds...'), intervalSeconds)}
+            </Text>
+          </FlexItem>
+        </>
+      )}
+    </Flex>
+  );
+};
+
+StatusLabel.propTypes = {
+  status: PropTypes.string.isRequired,
+  isPolling: PropTypes.bool.isRequired,
+};
+
+const ExecutionDetails = ({
+  proxyId,
+  proxyName,
+  jobId,
+  jobStatus,
+  isPolling,
+  targets,
+  submittedAt,
+  completedAt,
+}) => (
+  <Card>
+    <CardBody>
+      <DescriptionList isHorizontal>
+        <DescriptionItem label={__('Smart Proxy')}>
+          {proxyId && proxyName ? (
+            <a href={`/smart_proxies/${proxyId}`}>{proxyName}</a>
+          ) : (
+            <em>{__('Unknown')}</em>
+          )}
+        </DescriptionItem>
+
+        <DescriptionItem label={__('Job ID')}>
+          <span className="pf-v5-u-font-family-monospace">{jobId}</span>
+        </DescriptionItem>
+
+        <DescriptionItem label={__('Hosts')}>
+          <HostsPopover targets={targets} />
+        </DescriptionItem>
+
+        <DescriptionItem label={__('Status')}>
+          <StatusLabel status={jobStatus} isPolling={isPolling} />
+        </DescriptionItem>
+
+        <DescriptionItem label={__('Execution Time')}>
+          {formatExecutionTime(submittedAt, completedAt)}
+        </DescriptionItem>
+      </DescriptionList>
+    </CardBody>
+  </Card>
+);
+
+ExecutionDetails.propTypes = {
+  proxyId: PropTypes.string.isRequired,
+  proxyName: PropTypes.string.isRequired,
+  jobId: PropTypes.string.isRequired,
+  jobStatus: PropTypes.string.isRequired,
+  isPolling: PropTypes.bool.isRequired,
+  targets: PropTypes.arrayOf(PropTypes.string).isRequired,
+  submittedAt: PropTypes.string,
+  completedAt: PropTypes.string,
+};
+
+ExecutionDetails.defaultProps = {
+  submittedAt: null,
+  completedAt: null,
+};
+
+export default ExecutionDetails;

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

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Tab, TabTitleIcon, TabTitleText, Tabs } from '@patternfly/react-core';
+
+import { MonitoringIcon, TaskIcon } from '@patternfly/react-icons';
+
+import ExecutionDetails from './ExecutionDetails';
+import TaskDetails from './TaskDetails';
+
+const ExecutionDisplay = ({
+  proxyId,
+  proxyName,
+  jobId,
+  jobStatus,
+  pollCount,
+  isPolling,
+  targets,
+  submittedAt,
+  completedAt,
+  taskName,
+  taskDescription,
+  taskParameters,
+}) => {
+  const [activeTabKey, setActiveTabKey] = useState(0);
+
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={(_event, tabIndex) => setActiveTabKey(tabIndex)}
+    >
+      <Tab
+        eventKey={0}
+        title={
+          <>
+            <TabTitleIcon>
+              <MonitoringIcon />
+            </TabTitleIcon>
+            <TabTitleText>{__('Execution Details')}</TabTitleText>
+          </>
+        }
+      >
+        <ExecutionDetails
+          proxyId={proxyId}
+          proxyName={proxyName}
+          jobId={jobId}
+          jobStatus={jobStatus}
+          pollCount={pollCount}
+          isPolling={isPolling}
+          targets={targets}
+          submittedAt={submittedAt}
+          completedAt={completedAt}
+        />
+      </Tab>
+
+      <Tab
+        eventKey={1}
+        title={
+          <>
+            <TabTitleIcon>
+              <TaskIcon />
+            </TabTitleIcon>
+            <TabTitleText>{__('Task Details')}</TabTitleText>
+          </>
+        }
+      >
+        <TaskDetails
+          taskName={taskName}
+          taskDescription={taskDescription}
+          taskParameters={taskParameters}
+        />
+      </Tab>
+    </Tabs>
+  );
+};
+
+ExecutionDisplay.propTypes = {
+  proxyId: PropTypes.string.isRequired,
+  proxyName: PropTypes.string.isRequired,
+  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,
+  taskDescription: PropTypes.string,
+  taskParameters: PropTypes.object,
+};
+
+ExecutionDisplay.defaultProps = {
+  submittedAt: null,
+  completedAt: null,
+  taskDescription: null,
+  taskParameters: {},
+};
+
+export default ExecutionDisplay;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import {
+  Card,
+  CardBody,
+  Bullseye,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateBody,
+  Spinner,
+} from '@patternfly/react-core';
+import { RUNNING_STATUSES } from '../common/constants';
+
+const LoadingIndicator = ({ jobStatus }) => {
+  const getMessage = () => {
+    if (RUNNING_STATUSES.includes(jobStatus)) {
+      return sprintf(__('Task is %s...'), jobStatus.toLowerCase());
+    }
+    return __('Processing task results...');
+  };
+
+  return (
+    <Card>
+      <CardBody>
+        <Bullseye>
+          <EmptyState variant={EmptyStateVariant.lg}>
+            <EmptyStateHeader
+              titleText={getMessage()}
+              icon={<EmptyStateIcon icon={Spinner} />}
+              headingLevel="h3"
+            />
+            <EmptyStateBody role="status" aria-live="polite" aria-atomic="true">
+              {__(
+                'This page will update automatically when the task completes.'
+              )}
+            </EmptyStateBody>
+          </EmptyState>
+        </Bullseye>
+      </CardBody>
+    </Card>
+  );
+};
+
+LoadingIndicator.propTypes = {
+  jobStatus: PropTypes.string.isRequired,
+};
+
+export default LoadingIndicator;

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

@@ -0,0 +1,174 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Button,
+  Card,
+  CardBody,
+  CodeBlock,
+  CodeBlockCode,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateHeader,
+  EmptyStateBody,
+  Tabs,
+  Tab,
+  TabTitleText,
+  TabTitleIcon,
+} from '@patternfly/react-core';
+import {
+  ClipboardCheckIcon,
+  CopyIcon,
+  ExclamationCircleIcon,
+  FileAltIcon,
+} from '@patternfly/react-icons';
+
+const CopyButton = ({ getText }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    /* eslint-disable promise/prefer-await-to-then */
+    navigator.clipboard.writeText(getText()).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  return (
+    <Button
+      variant="control"
+      aria-label="Copy"
+      onClick={handleCopy}
+      icon={<CopyIcon />}
+    >
+      {copied ? __('Copied!') : __('Copy')}
+    </Button>
+  );
+};
+
+CopyButton.propTypes = {
+  getText: PropTypes.func.isRequired,
+};
+
+const EmptyTab = ({ message }) => (
+  <div className="pf-v5-u-mt-md">
+    <EmptyState variant={EmptyStateVariant.sm}>
+      <EmptyStateHeader
+        titleText={__('No data available')}
+        icon={<EmptyStateIcon icon={ExclamationCircleIcon} />}
+        headingLevel="h5"
+      />
+      <EmptyStateBody>{message}</EmptyStateBody>
+    </EmptyState>
+  </div>
+);
+
+EmptyTab.propTypes = {
+  message: PropTypes.string.isRequired,
+};
+
+const DataTab = ({ content }) => (
+  <div className="pf-v5-u-mt-md">
+    <CodeBlock>
+      <CodeBlockCode>{content}</CodeBlockCode>
+    </CodeBlock>
+  </div>
+);
+
+DataTab.propTypes = {
+  content: PropTypes.string.isRequired,
+};
+
+const ResultDisplay = ({ jobResult, jobLog }) => {
+  const [activeTabKey, setActiveTabKey] = useState(0);
+
+  const formatResult = result => {
+    if (!result) return '';
+    try {
+      return JSON.stringify(result, null, 2);
+    } catch (error) {
+      return String(result);
+    }
+  };
+
+  const resultJson = formatResult(jobResult);
+  const hasResult = jobResult && Object.keys(jobResult).length > 0;
+  const hasLog = jobLog?.trim?.().length > 0;
+
+  const getActiveContent = () => (activeTabKey === 0 ? resultJson : jobLog);
+
+  // A bit of a messy solution for the copy button but good enough for now
+  return (
+    <Card>
+      <CardBody>
+        <div style={{ position: 'relative' }}>
+          <div
+            style={{
+              position: 'absolute',
+              right: 0,
+              zIndex: 1,
+            }}
+          >
+            {((activeTabKey === 0 && hasResult) ||
+              (activeTabKey === 1 && hasLog)) && (
+              <CopyButton getText={getActiveContent} />
+            )}
+          </div>
+          <Tabs
+            activeKey={activeTabKey}
+            onSelect={(_event, tabIndex) => setActiveTabKey(tabIndex)}
+            actions={<CopyButton getText={getActiveContent} />}
+          >
+            <Tab
+              eventKey={0}
+              title={
+                <>
+                  <TabTitleIcon>
+                    <ClipboardCheckIcon />
+                  </TabTitleIcon>
+                  <TabTitleText>{__('Result')}</TabTitleText>
+                </>
+              }
+            >
+              {hasResult ? (
+                <DataTab content={resultJson} />
+              ) : (
+                <EmptyTab
+                  message={__('No result data returned from the task.')}
+                />
+              )}
+            </Tab>
+
+            <Tab
+              eventKey={1}
+              title={
+                <>
+                  <TabTitleIcon>
+                    <FileAltIcon />
+                  </TabTitleIcon>
+                  <TabTitleText>{__('Log Output')}</TabTitleText>
+                </>
+              }
+            >
+              {hasLog ? (
+                <DataTab content={jobLog} />
+              ) : (
+                <EmptyTab
+                  message={__('No log output generated by the task.')}
+                />
+              )}
+            </Tab>
+          </Tabs>
+        </div>
+      </CardBody>
+    </Card>
+  );
+};
+
+ResultDisplay.propTypes = {
+  jobResult: PropTypes.object.isRequired,
+  jobLog: PropTypes.string.isRequired,
+};
+
+export default ResultDisplay;

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Card,
+  CardBody,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+} from '@patternfly/react-core';
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+
+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);
+  };
+
+  return (
+    <Card>
+      <CardBody>
+        <DescriptionList isHorizontal>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{__('Task Name')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <span className="pf-v5-u-font-family-monospace">{taskName}</span>
+            </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>
+                    </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>
+  );
+};
+
+TaskDetails.propTypes = {
+  taskName: PropTypes.string.isRequired,
+  taskDescription: PropTypes.string,
+  taskParameters: PropTypes.object,
+};
+
+TaskDetails.defaultProps = {
+  taskDescription: null,
+  taskParameters: {},
+};
+
+export default TaskDetails;