foreman_openbolt 0.0.1

data/webpack/src/Components/TaskExecution/hooks/useJobPolling.js

@@ -0,0 +1,142 @@
+/* eslint-disable no-await-in-loop */
+import { useState, useEffect } from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { API } from 'foremanReact/redux/API';
+import {
+  STATUS,
+  COMPLETED_STATUSES,
+  POLLING_CONFIG,
+  ROUTES,
+} from '../../common/constants';
+
+/**
+ * Custom hook for polling job status
+ * @param {string} proxyId - Smart Proxy ID
+ * @param {string} jobId - Job ID to poll
+ * @returns {Object}
+ */
+const useJobPolling = (proxyId, jobId) => {
+  const [status, setStatus] = useState(STATUS.PENDING);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+  const [isPolling, setIsPolling] = useState(false);
+  const [submittedAt, setSubmittedAt] = useState(null);
+  const [completedAt, setCompletedAt] = useState(null);
+  const [taskName, setTaskName] = useState(null);
+  const [taskDescription, setTaskDescription] = useState(null);
+  const [taskParameters, setTaskParameters] = useState({});
+  const [targets, setTargets] = useState([]);
+
+  // There are a bunch of checks of 'cancelled' here so that if the
+  // user navigates away while polling, we don't keep trying to update state.
+  useEffect(() => {
+    // Have to return undefined since we are returning a cleanup function
+    // otherwise and React wants all code paths to return something.
+    if (!proxyId || !jobId) return undefined;
+
+    let cancelled = false;
+
+    const poll = async () => {
+      setIsPolling(true);
+
+      while (!cancelled) {
+        try {
+          const { data: statusData, status: statusCode } = await API.get(
+            `${ROUTES.API.JOB_STATUS}?proxy_id=${proxyId}&job_id=${jobId}`
+          );
+
+          if (cancelled) break;
+
+          if (statusCode !== 200) {
+            const errorMsg = statusData
+              ? statusData.error || JSON.stringify(statusData)
+              : 'Unknown error';
+            throw new Error(`HTTP ${statusCode} - ${errorMsg}`);
+          }
+
+          const jobStatus = statusData?.status;
+          if (!jobStatus) {
+            throw new Error('No job status returned');
+          }
+
+          setStatus(jobStatus);
+          setSubmittedAt(statusData.submitted_at || null);
+          setCompletedAt(statusData.completed_at || null);
+          setTaskName(statusData.task_name || null);
+          setTaskDescription(statusData.task_description || null);
+          setTaskParameters(statusData.task_parameters || {});
+          setTargets(statusData.targets || []);
+
+          // If job is complete, fetch results and break
+          if (COMPLETED_STATUSES.includes(jobStatus)) {
+            if (jobStatus === STATUS.INVALID) break;
+            try {
+              const { data: resultData, status: resultCode } = await API.get(
+                `${ROUTES.API.JOB_RESULT}?proxy_id=${proxyId}&job_id=${jobId}`
+              );
+
+              if (!cancelled && resultCode === 200 && resultData) {
+                setResult({
+                  command: resultData.command || '',
+                  result: resultData.value,
+                  log: resultData.log || '',
+                });
+              }
+            } catch (resultError) {
+              // Don't fail the whole thing if result fetch fails
+              if (!cancelled) {
+                setError(
+                  __('Failed to fetch job result: ') +
+                    (resultError.message || 'Unknown error')
+                );
+                setResult({ result: null, log: '' });
+              }
+            }
+            break;
+          }
+
+          // Wait before next poll
+          if (!cancelled) {
+            await new Promise(resolve =>
+              setTimeout(resolve, POLLING_CONFIG.INTERVAL)
+            );
+          }
+        } catch (err) {
+          if (!cancelled) {
+            setError(
+              __('Failed to fetch job status: ') +
+                (err.message || 'Unknown error')
+            );
+          }
+          break;
+        }
+      }
+
+      if (!cancelled) {
+        setIsPolling(false);
+      }
+    };
+
+    poll();
+
+    return () => {
+      cancelled = true;
+      setIsPolling(false);
+    };
+  }, [proxyId, jobId]);
+
+  return {
+    status,
+    result,
+    error,
+    isPolling,
+    submittedAt,
+    completedAt,
+    taskName,
+    taskDescription,
+    taskParameters,
+    targets,
+  };
+};
+
+export default useJobPolling;

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

@@ -0,0 +1,130 @@
+import React, { useEffect } from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Alert, Button, Stack, StackItem } from '@patternfly/react-core';
+
+import ExecutionDisplay from './ExecutionDisplay';
+import LoadingIndicator from './LoadingIndicator';
+import ResultDisplay from './ResultDisplay';
+import useJobPolling from './hooks/useJobPolling';
+import { COMPLETED_STATUSES, ROUTES } from '../common/constants';
+import { useShowMessage } from '../common/helpers';
+
+const TaskExecution = () => {
+  const location = useLocation();
+  const history = useHistory();
+  const showMessage = useShowMessage();
+
+  const params = new URLSearchParams(location.search);
+  const proxyId = params.get('proxy_id');
+  const jobId = params.get('job_id');
+  const proxyName = params.get('proxy_name');
+
+  const {
+    status: jobStatus,
+    result: jobData,
+    error: pollError,
+    isPolling,
+    submittedAt,
+    completedAt,
+    taskName,
+    taskDescription,
+    taskParameters,
+    targets,
+  } = useJobPolling(proxyId, jobId);
+
+  useEffect(() => {
+    if (pollError) {
+      showMessage(pollError);
+    }
+  }, [pollError, showMessage]);
+
+  // Redirect if missing required params
+  useEffect(() => {
+    if (!proxyId || !jobId) {
+      showMessage(
+        __('Invalid task execution URL - missing required parameters')
+      );
+      history.push(ROUTES.PAGES.LAUNCH_TASK);
+    }
+  }, [proxyId, jobId, showMessage, history]);
+
+  // Don't render if missing required params
+  if (!proxyId || !jobId) {
+    return null;
+  }
+
+  const stripAnsi = str => {
+    if (!str || typeof str !== 'string') return str;
+    return str.replace(
+      /* eslint-disable no-control-regex */
+      /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g,
+      ''
+    );
+  };
+
+  const isComplete = COMPLETED_STATUSES.includes(jobStatus);
+  const jobCommand = jobData?.command;
+  const jobResult = jobData?.result;
+  const jobLog = `OpenBolt command: ${jobCommand}\n${stripAnsi(jobData?.log)}`;
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <Button
+          variant="secondary"
+          onClick={() => history.push(ROUTES.PAGES.LAUNCH_TASK)}
+          className="pf-v5-u-mb-md"
+        >
+          {__('Run Another Task')}
+        </Button>
+      </StackItem>
+
+      <StackItem>
+        <ExecutionDisplay
+          proxyId={proxyId}
+          proxyName={proxyName}
+          jobId={jobId}
+          jobStatus={jobStatus}
+          isPolling={isPolling}
+          targets={targets}
+          submittedAt={submittedAt}
+          completedAt={completedAt}
+          taskName={taskName}
+          taskDescription={taskDescription}
+          taskParameters={taskParameters}
+        />
+      </StackItem>
+
+      {isPolling && (
+        <StackItem>
+          <LoadingIndicator jobStatus={jobStatus} />
+        </StackItem>
+      )}
+
+      {!isPolling && jobResult && (
+        <StackItem>
+          <ResultDisplay jobResult={jobResult} jobLog={jobLog} />
+        </StackItem>
+      )}
+
+      {!isPolling && !jobResult && isComplete && (
+        <StackItem>
+          <Alert variant="warning" title={__('No Results')} isInline>
+            {__('No results for this task run could be retrieved.')}
+          </Alert>
+        </StackItem>
+      )}
+
+      {pollError && (
+        <StackItem>
+          <Alert variant="danger" title={__('Error')} isInline>
+            {pollError}
+          </Alert>
+        </StackItem>
+      )}
+    </Stack>
+  );
+};
+
+export default TaskExecution;

data/webpack/src/Components/TaskHistory/TaskPopover.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Popover, Button } from '@patternfly/react-core';
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+
+const TaskPopover = ({ taskName, taskDescription, taskParameters }) => {
+  const hasParameters =
+    taskParameters && Object.keys(taskParameters).length > 0;
+
+  const displayValue = value => {
+    if (value === null || value === undefined) {
+      return '-';
+    }
+    if (typeof value === 'object') {
+      return JSON.stringify(value);
+    }
+    return String(value);
+  };
+
+  const popoverContent = (
+    <div style={{ maxWidth: '500px' }}>
+      {taskDescription && (
+        <div style={{ marginBottom: '1rem' }}>
+          <strong>{__('Description:')}</strong>
+          <p>{taskDescription}</p>
+        </div>
+      )}
+
+      {hasParameters && (
+        <div>
+          <strong>{__('Parameters:')}</strong>
+          <div
+            style={{
+              maxHeight: '300px',
+              overflowY: 'auto',
+            }}
+          >
+            <Table
+              variant="compact"
+              borders
+              isStriped
+              isStickyHeader
+              style={{
+                border: '1px solid var(--pf-v5-global--BorderColor--100)',
+              }}
+            >
+              <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 className="pf-v5-u-font-family-monospace">{key}</Td>
+                    <Td className="pf-v5-u-font-family-monospace">
+                      {displayValue(value)}
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </div>
+        </div>
+      )}
+
+      {!taskDescription && !hasParameters && (
+        <div>{__('No additional details available')}</div>
+      )}
+    </div>
+  );
+
+  return (
+    <Popover bodyContent={popoverContent} position="right">
+      <Button variant="link" isInline className="pf-v5-u-font-family-monospace">
+        {taskName}
+      </Button>
+    </Popover>
+  );
+};
+
+TaskPopover.propTypes = {
+  taskName: PropTypes.string.isRequired,
+  taskDescription: PropTypes.string,
+  taskParameters: PropTypes.object,
+};
+
+TaskPopover.defaultProps = {
+  taskDescription: null,
+  taskParameters: {},
+};
+
+export default TaskPopover;

data/webpack/src/Components/TaskHistory/index.js

@@ -0,0 +1,199 @@
+import React, { useState, useEffect } from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { API } from 'foremanReact/redux/API';
+import {
+  Label,
+  Pagination,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateHeader,
+  EmptyStateBody,
+  Spinner,
+  Bullseye,
+} from '@patternfly/react-core';
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import {
+  ArrowRightIcon,
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  InfoCircleIcon,
+  InProgressIcon,
+  OutlinedClockIcon,
+  UnknownIcon,
+} from '@patternfly/react-icons';
+import { ROUTES, STATUS } from '../common/constants';
+import { useShowMessage } from '../common/helpers';
+import HostsPopover from '../common/HostsPopover';
+import TaskPopover from './TaskPopover';
+
+const getStatusLabel = status => {
+  const configs = {
+    [STATUS.SUCCESS]: { color: 'green', icon: <CheckCircleIcon /> },
+    [STATUS.FAILURE]: { color: 'red', icon: <ExclamationCircleIcon /> },
+    [STATUS.EXCEPTION]: { color: 'orange', icon: <ExclamationCircleIcon /> },
+    [STATUS.INVALID]: { color: 'yellow', icon: <ExclamationCircleIcon /> },
+    [STATUS.RUNNING]: { color: 'blue', icon: <InProgressIcon /> },
+    [STATUS.PENDING]: { color: 'blue', icon: <OutlinedClockIcon /> },
+  };
+
+  const config = configs[status] || { color: 'grey', icon: <UnknownIcon /> };
+  return (
+    <Label color={config.color} icon={config.icon}>
+      {status}
+    </Label>
+  );
+};
+
+const formatDuration = duration => {
+  if (!duration) return '-';
+  const seconds = Math.round(duration);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}m ${remainingSeconds}s`;
+};
+
+const formatDate = dateString => {
+  if (!dateString) return '-';
+  const date = new Date(dateString);
+  return date.toLocaleString();
+};
+
+const TaskHistory = () => {
+  const [taskHistory, setTaskHistory] = useState([]);
+  const [isLoadingTaskHistory, setIsLoadingTaskHistory] = useState(true);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(20);
+  const [total, setTotal] = useState(0);
+  const showMessage = useShowMessage();
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const fetchTaskHistory = async () => {
+      if (cancelled) return;
+      setIsLoadingTaskHistory(true);
+
+      try {
+        const { data, status } = await API.get(
+          `${ROUTES.API.TASK_HISTORY}?page=${page}&per_page=${perPage}`
+        );
+
+        if (!cancelled && status === 200 && data) {
+          setTaskHistory(data.results || []);
+          setTotal(data.total || 0);
+        }
+      } catch (error) {
+        if (!cancelled)
+          showMessage(__('Failed to load task history: ') + error.message);
+      } finally {
+        if (!cancelled) setIsLoadingTaskHistory(false);
+      }
+    };
+
+    fetchTaskHistory();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [page, perPage, showMessage]);
+
+  const spinner = () => (
+    <Bullseye>
+      <Spinner size="xl" />
+    </Bullseye>
+  );
+
+  const noJobs = () => (
+    <EmptyState>
+      <EmptyStateHeader
+        titleText={__('No task history found')}
+        icon={<EmptyStateIcon icon={InfoCircleIcon} />}
+        headingLevel="h2"
+      />
+      <EmptyStateBody>
+        {__('Run an OpenBolt task to see it appear here.')}
+      </EmptyStateBody>
+    </EmptyState>
+  );
+
+  const jobTable = () => (
+    <>
+      <Table
+        aria-label="Task history table"
+        borders
+        isStriped
+        isStickyHeader
+        variant="compact"
+      >
+        <Thead>
+          <Tr>
+            <Th modifier="wrap">{__('Task Name')}</Th>
+            <Th modifier="wrap">{__('Status')}</Th>
+            <Th modifier="wrap">{__('Targets')}</Th>
+            <Th modifier="wrap">{__('Started')}</Th>
+            <Th modifier="wrap">{__('Completed')}</Th>
+            <Th modifier="wrap">{__('Duration')}</Th>
+            <Th modifier="wrap">{__('Details')}</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {taskHistory.map(job => (
+            <Tr key={job.job_id}>
+              <Td hasRightBorder>
+                <TaskPopover
+                  taskName={job.task_name}
+                  taskDescription={job.task_description}
+                  taskParameters={job.task_parameters}
+                />
+              </Td>
+              <Td hasRightBorder>{getStatusLabel(job.status)}</Td>
+              <Td hasRightBorder>
+                <HostsPopover targets={job.targets || []} />
+              </Td>
+              <Td hasRightBorder>{formatDate(job.submitted_at)}</Td>
+              <Td hasRightBorder>
+                {job.completed_at ? formatDate(job.completed_at) : ''}
+              </Td>
+              <Td hasRightBorder>{formatDuration(job.duration)}</Td>
+              <Td hasRightBorder>
+                <a
+                  href={`${ROUTES.PAGES.TASK_EXECUTION}?proxy_id=${
+                    job.smart_proxy.id
+                  }&job_id=${job.job_id}&proxy_name=${encodeURIComponent(
+                    job.smart_proxy.name
+                  )}`}
+                  aria-label={__('View Details')}
+                  title={__('View Details')}
+                >
+                  <ArrowRightIcon />
+                </a>
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+
+      <Pagination
+        itemCount={total}
+        perPage={perPage}
+        page={page}
+        onSetPage={(_event, newPage) => setPage(newPage)}
+        onPerPageSelect={(_event, newPerPage) => {
+          setPerPage(newPerPage);
+          setPage(1);
+        }}
+      />
+    </>
+  );
+
+  return (
+    <div className="task-history">
+      {isLoadingTaskHistory && spinner()}
+      {!isLoadingTaskHistory && taskHistory.length === 0 && noJobs()}
+      {!isLoadingTaskHistory && taskHistory.length > 0 && jobTable()}
+    </div>
+  );
+};
+
+export default TaskHistory;

data/webpack/src/Components/common/HostsPopover.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Popover, Button } from '@patternfly/react-core';
+import { Table, Tbody, Tr, Td } from '@patternfly/react-table';
+
+const HostsPopover = ({ targets }) => {
+  if (!targets || targets.length === 0) {
+    return <>{__('No targets specified')}</>;
+  }
+
+  const popoverContent = (
+    <div
+      style={{
+        maxHeight: '300px',
+        overflowY: 'auto',
+        border: '1px solid var(--pf-v5-global--BorderColor--100)',
+      }}
+    >
+      <Table variant="compact" borders isStriped>
+        <Tbody>
+          {targets.map((host, index) => (
+            <Tr key={index}>
+              <Td className="pf-v5-u-font-family-monospace">{host}</Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </div>
+  );
+
+  return (
+    <Popover bodyContent={popoverContent} position="right" maxWidth="600px">
+      <Button variant="link" isInline>
+        {targets.length}
+      </Button>
+    </Popover>
+  );
+};
+
+HostsPopover.propTypes = {
+  targets: PropTypes.arrayOf(PropTypes.string),
+};
+
+HostsPopover.defaultProps = {
+  targets: [],
+};
+
+export default HostsPopover;

data/webpack/src/Components/common/constants.js

@@ -0,0 +1,44 @@
+// Match the actual string coming from smart_proxy_openbolt
+export const STATUS = {
+  SUCCESS: 'success',
+  FAILURE: 'failure',
+  EXCEPTION: 'exception',
+  INVALID: 'invalid',
+  RUNNING: 'running',
+  PENDING: 'pending',
+};
+export const COMPLETED_STATUSES = [
+  STATUS.SUCCESS,
+  STATUS.FAILURE,
+  STATUS.EXCEPTION,
+  STATUS.INVALID,
+];
+export const RUNNING_STATUSES = [STATUS.RUNNING, STATUS.PENDING];
+export const ERROR_STATUSES = [
+  STATUS.FAILURE,
+  STATUS.EXCEPTION,
+  STATUS.INVALID,
+];
+export const SUCCESS_STATUSES = [STATUS.SUCCESS];
+
+export const POLLING_CONFIG = {
+  INTERVAL: 5000, // 5 seconds
+};
+
+export const ENCRYPTED_DEFAULT_PLACEHOLDER = '[Use saved encrypted default]';
+
+export const ROUTES = {
+  PAGES: {
+    LAUNCH_TASK: '/foreman_openbolt/page_launch_task',
+    TASK_EXECUTION: '/foreman_openbolt/page_task_execution',
+  },
+  API: {
+    RELOAD_TASKS: '/foreman_openbolt/reload_tasks',
+    FETCH_TASKS: '/foreman_openbolt/fetch_tasks',
+    FETCH_OPENBOLT_OPTIONS: '/foreman_openbolt/fetch_openbolt_options',
+    LAUNCH_TASK: '/foreman_openbolt/launch_task',
+    JOB_STATUS: '/foreman_openbolt/job_status',
+    JOB_RESULT: '/foreman_openbolt/job_result',
+    TASK_HISTORY: '/foreman_openbolt/fetch_task_history',
+  },
+};

data/webpack/src/Components/common/helpers.js

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { addToast } from 'foremanReact/components/ToastsList';
+
+/**
+ * Custom hook to show messages using the Foreman Toast system.
+ *
+ * @returns {Function} A function that takes a message and type, and shows a toast message.
+ */
+export const useShowMessage = () => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (message, type = 'danger') => {
+      dispatch(addToast({ type, message }));
+    },
+    [dispatch]
+  );
+};

data/webpack/src/Pages/LaunchTaskPage.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
+import LaunchTask from '../Components/LaunchTask';
+
+const LaunchTaskPage = () => (
+  <PageLayout header={__('Launch OpenBolt Task')}>
+    <LaunchTask />
+  </PageLayout>
+);
+
+export default LaunchTaskPage;