foreman_openbolt 0.0.1

data/webpack/src/Components/LaunchTask/TaskSelect.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Button,
+  Flex,
+  FlexItem,
+  FormGroup,
+  FormSelect,
+  FormSelectOption,
+  Spinner,
+} from '@patternfly/react-core';
+import { SyncIcon } from '@patternfly/react-icons';
+
+const TaskSelect = ({
+  taskNames,
+  selectedTask,
+  onTaskChange,
+  onReloadTasks,
+  isLoading,
+  isDisabled,
+}) => (
+  <FormGroup label={__('Task Name')} fieldId="task-name-input">
+    <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+      <FlexItem flex={{ default: 'flex_1' }}>
+        <FormSelect
+          id="task-select"
+          // Force remount on isDisabled so the tooltip based on the title changes
+          key={`task-select-${isDisabled}`}
+          title={
+            isDisabled
+              ? __('You must first select a Smart Proxy')
+              : __('Select a task to execute.')
+          }
+          value={selectedTask}
+          onChange={onTaskChange}
+          isDisabled={isDisabled || isLoading}
+          className="without_select2"
+          aria-label={__('Select Task')}
+          aria-required="true"
+          aria-describedby="task-select-helper"
+        >
+          <FormSelectOption
+            key="select-task"
+            value=""
+            isPlaceholder
+            label={isLoading ? __('Loading...') : __('Select Task')}
+          />
+          {taskNames.map(taskName => (
+            <FormSelectOption
+              key={taskName}
+              value={taskName}
+              label={taskName}
+            />
+          ))}
+        </FormSelect>
+      </FlexItem>
+      <FlexItem>
+        <Button
+          variant="secondary"
+          onClick={onReloadTasks}
+          isDisabled={isDisabled || isLoading}
+          icon={isLoading ? <Spinner size="sm" /> : <SyncIcon />}
+          aria-label={__('Reload tasks from OpenBolt')}
+          title={__('Reload tasks from OpenBolt. This may take some time.')}
+        />
+      </FlexItem>
+    </Flex>
+    <span id="task-select-helper" className="pf-v5-u-screen-reader">
+      {__('Select a OpenBolt task to execute on the specified targets')}
+    </span>
+  </FormGroup>
+);
+
+TaskSelect.propTypes = {
+  taskNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+  selectedTask: PropTypes.string.isRequired,
+  onTaskChange: PropTypes.func.isRequired,
+  onReloadTasks: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+};
+
+export default TaskSelect;

data/webpack/src/Components/LaunchTask/hooks/useOpenBoltOptions.js

@@ -0,0 +1,63 @@
+import { useState, useCallback } from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { API } from 'foremanReact/redux/API';
+import { ROUTES } from '../../common/constants';
+import { useShowMessage } from '../../common/helpers';
+
+export const useOpenBoltOptions = () => {
+  const showMessage = useShowMessage();
+
+  const [openBoltOptionsMetadata, setOpenBoltOptionsMetadata] = useState({});
+  const [openBoltOptions, setOpenBoltOptions] = useState({});
+  const [isLoadingOptions, setIsLoadingOptions] = useState(false);
+
+  const fetchOpenBoltOptions = useCallback(
+    async proxyId => {
+      if (!proxyId) return null;
+
+      setIsLoadingOptions(true);
+      setOpenBoltOptionsMetadata({});
+      setOpenBoltOptions({});
+
+      try {
+        const { data, status } = await API.get(
+          `${ROUTES.API.FETCH_OPENBOLT_OPTIONS}?proxy_id=${proxyId}`
+        );
+
+        if (status !== 200) {
+          const error = data
+            ? data.error || JSON.stringify(data)
+            : 'Unknown error';
+          throw new Error(`HTTP ${status} - ${error}`);
+        }
+
+        setOpenBoltOptionsMetadata(data || {});
+
+        // Set defaults
+        const defaults = {};
+        Object.entries(data || {}).forEach(([optionName, optionMeta]) => {
+          if (optionMeta.default !== undefined) {
+            defaults[optionName] = optionMeta.default;
+          }
+        });
+        setOpenBoltOptions(defaults);
+
+        return data;
+      } catch (error) {
+        showMessage(__('Failed to load OpenBolt options: ') + error.message);
+        return null;
+      } finally {
+        setIsLoadingOptions(false);
+      }
+    },
+    [showMessage]
+  );
+
+  return {
+    openBoltOptionsMetadata,
+    openBoltOptions,
+    setOpenBoltOptions,
+    isLoadingOptions,
+    fetchOpenBoltOptions,
+  };
+};

data/webpack/src/Components/LaunchTask/hooks/useSmartProxies.js

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { API } from 'foremanReact/redux/API';
+import { useShowMessage } from '../../common/helpers';
+
+export const useSmartProxies = () => {
+  const showMessage = useShowMessage();
+  const [smartProxies, setSmartProxies] = useState([]);
+  const [isLoadingProxies, setIsLoadingProxies] = useState(false);
+
+  useEffect(() => {
+    const fetchSmartProxies = async () => {
+      setIsLoadingProxies(true);
+      try {
+        const endpoint = `/api/smart_proxies?${new URLSearchParams({
+          per_page: 'all',
+          search: 'feature=OpenBolt',
+        })}`;
+        const { data, status } = await API.get(endpoint);
+
+        if (status !== 200) {
+          const error = data
+            ? data.error || JSON.stringify(data)
+            : 'Unknown error';
+          throw new Error(`HTTP ${status} - ${error}`);
+        }
+
+        setSmartProxies(data.results || []);
+
+        if (data.results.length === 0) {
+          showMessage(
+            __(
+              'No Smart Proxies found. Please check that one or more proxy has the smart_proxy_openbolt package installed and enabled.'
+            )
+          );
+        }
+      } catch (error) {
+        showMessage(__('Failed to load Smart Proxies: ') + error.message);
+      } finally {
+        setIsLoadingProxies(false);
+      }
+    };
+
+    fetchSmartProxies();
+  }, [showMessage]);
+
+  return { smartProxies, isLoadingProxies };
+};

data/webpack/src/Components/LaunchTask/hooks/useTasksData.js

@@ -0,0 +1,64 @@
+import { useState, useCallback } from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { API } from 'foremanReact/redux/API';
+import { ROUTES } from '../../common/constants';
+import { useShowMessage } from '../../common/helpers';
+
+export const useTasksData = () => {
+  const showMessage = useShowMessage();
+  const [taskMetadata, setTaskMetadata] = useState({});
+  const [selectedTask, setSelectedTask] = useState('');
+  const [taskParameters, setTaskParameters] = useState({});
+  const [isLoadingTasks, setIsLoadingTasks] = useState(false);
+
+  const fetchTasks = useCallback(
+    async (proxyId, forceReload = false) => {
+      if (!proxyId) return null;
+
+      setIsLoadingTasks(true);
+      setTaskMetadata({});
+      setSelectedTask('');
+      setTaskParameters({});
+
+      try {
+        const endpoint = forceReload
+          ? ROUTES.API.RELOAD_TASKS
+          : ROUTES.API.FETCH_TASKS;
+        const { data, status } = await API.get(
+          `${endpoint}?proxy_id=${proxyId}`
+        );
+
+        if (status !== 200) {
+          const error = data
+            ? data.error || JSON.stringify(data)
+            : 'Unknown error';
+          throw new Error(`HTTP ${status} - ${error}`);
+        }
+
+        setTaskMetadata(data || {});
+
+        if (forceReload) {
+          showMessage(__('Tasks reloaded successfully'), 'success');
+        }
+
+        return data;
+      } catch (error) {
+        showMessage(__('Failed to load tasks: ') + error.message);
+        return null;
+      } finally {
+        setIsLoadingTasks(false);
+      }
+    },
+    [showMessage]
+  );
+
+  return {
+    taskMetadata,
+    selectedTask,
+    setSelectedTask,
+    taskParameters,
+    setTaskParameters,
+    isLoadingTasks,
+    fetchTasks,
+  };
+};

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

@@ -0,0 +1,333 @@
+// TODO: More a11y tags
+import React, { useState, useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import { API } from 'foremanReact/redux/API';
+import {
+  Button,
+  Card,
+  CardBody,
+  Divider,
+  Flex,
+  FlexItem,
+  Form,
+  Grid,
+  GridItem,
+  Label,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+
+import { ROUTES } from '../common/constants';
+import SmartProxySelect from './SmartProxySelect';
+import TaskSelect from './TaskSelect';
+import ParametersSection from './ParametersSection';
+import OpenBoltOptionsSection from './OpenBoltOptionsSection';
+import HostSelector from './HostSelector';
+import { useSmartProxies } from './hooks/useSmartProxies';
+import { useTasksData } from './hooks/useTasksData';
+import { useOpenBoltOptions } from './hooks/useOpenBoltOptions';
+import { useShowMessage } from '../common/helpers';
+
+const LaunchTask = () => {
+  const history = useHistory();
+  const showMessage = useShowMessage();
+
+  /* States */
+  const [selectedProxy, setSelectedProxy] = useState('');
+  const [targets, setTargets] = useState([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  /* Custom hooks for data fetching */
+  // The strategy here is to manage all data fetching and state within
+  // these custom hooks. The rest of this component handles orchestration
+  // of that data.
+  const { smartProxies, isLoadingProxies } = useSmartProxies();
+  const {
+    taskMetadata,
+    selectedTask,
+    setSelectedTask,
+    taskParameters,
+    setTaskParameters,
+    isLoadingTasks,
+    fetchTasks,
+  } = useTasksData();
+  const {
+    openBoltOptionsMetadata,
+    openBoltOptions,
+    setOpenBoltOptions,
+    isLoadingOptions,
+    fetchOpenBoltOptions,
+  } = useOpenBoltOptions();
+
+  /* Event handlers */
+  const handleProxyChange = useCallback(
+    (_event, value) => {
+      setSelectedProxy(value);
+      if (value) {
+        fetchTasks(value);
+        fetchOpenBoltOptions(value);
+      } else {
+        setSelectedTask('');
+        setTaskParameters({});
+        setOpenBoltOptions({});
+      }
+    },
+    [
+      fetchTasks,
+      fetchOpenBoltOptions,
+      setSelectedTask,
+      setTaskParameters,
+      setOpenBoltOptions,
+    ]
+  );
+
+  const handleTaskChange = useCallback(
+    (_event, value) => {
+      setSelectedTask(value);
+      // TODO: Do we want to set boolean to default false here when
+      // a default is not provided?
+      if (value && taskMetadata[value]) {
+        const defaults = {};
+        const params = taskMetadata[value].parameters || {};
+        Object.entries(params).forEach(([paramName, paramMeta]) => {
+          if (paramMeta.default !== undefined) {
+            defaults[paramName] = paramMeta.default;
+          } else if (
+            ['boolean', 'optional[boolean]'].includes(
+              paramMeta.type.toLowerCase()
+            )
+          ) {
+            defaults[paramName] = false;
+          }
+        });
+        setTaskParameters(defaults);
+      } else {
+        setTaskParameters({});
+      }
+    },
+    [setSelectedTask, setTaskParameters, taskMetadata]
+  );
+
+  const handleParameterChange = useCallback(
+    (paramName, value) => {
+      setTaskParameters(prev => ({ ...prev, [paramName]: value }));
+    },
+    [setTaskParameters]
+  );
+
+  const handleOptionChange = useCallback(
+    (optionName, value) => {
+      setOpenBoltOptions(prev => ({ ...prev, [optionName]: value }));
+    },
+    [setOpenBoltOptions]
+  );
+
+  const handleReloadTasks = useCallback(() => {
+    if (selectedProxy) {
+      fetchTasks(selectedProxy, true);
+    }
+  }, [selectedProxy, fetchTasks]);
+
+  const handleTargetsChange = useCallback(
+    targetArray => {
+      setTargets(targetArray);
+    },
+    [setTargets]
+  );
+
+  const handleSubmit = useCallback(
+    async e => {
+      e.preventDefault();
+
+      if (!selectedProxy || !selectedTask || targets.length === 0) {
+        showMessage(__('Please select a proxy, task, and enter targets.'));
+        return;
+      }
+
+      setIsSubmitting(true);
+
+      try {
+        const { transport } = openBoltOptions;
+        const visibleOptions = {};
+        Object.entries(openBoltOptionsMetadata).forEach(
+          ([optionName, metadata]) => {
+            const transports = Array.isArray(metadata.transport)
+              ? metadata.transport
+              : null;
+            const isVisible =
+              optionName === 'transport' ||
+              !transports ||
+              transports.includes(transport);
+            if (isVisible && openBoltOptions[optionName] !== undefined) {
+              visibleOptions[optionName] = openBoltOptions[optionName];
+            }
+          }
+        );
+
+        const body = {
+          proxy_id: selectedProxy,
+          task_name: selectedTask,
+          targets: targets.join(','),
+          params: taskParameters,
+          options: visibleOptions,
+        };
+
+        const { data, status } = await API.post(ROUTES.API.LAUNCH_TASK, body);
+
+        // TODO: On non-200, the post above automatically throws an exception, so
+        // figure out how to handle it instead to extract the message in the
+        // response body.
+        if (status !== 200) {
+          const error = data
+            ? data.error || JSON.stringify(data)
+            : 'Unknown error';
+          throw new Error(`HTTP ${status} - ${error}`);
+        }
+
+        const selectedProxyData = smartProxies.find(
+          p => p.id.toString() === selectedProxy.toString()
+        );
+
+        history.push({
+          pathname: ROUTES.PAGES.TASK_EXECUTION,
+          search: new URLSearchParams({
+            proxy_id: selectedProxy,
+            job_id: data.job_id,
+            proxy_name: selectedProxyData?.name || 'Unknown',
+          }).toString(),
+        });
+      } catch (error) {
+        const errorMessage =
+          error.response?.data?.error ||
+          error.message ||
+          __('Unknown error occurred');
+        showMessage(__('Failed to launch task: ') + errorMessage);
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [
+      selectedProxy,
+      selectedTask,
+      targets,
+      taskParameters,
+      openBoltOptions,
+      openBoltOptionsMetadata,
+      smartProxies,
+      history,
+      showMessage,
+    ]
+  );
+
+  /* Rendering */
+  const isFormValid =
+    selectedProxy &&
+    selectedTask &&
+    targets.length > 0 &&
+    !isLoadingTasks &&
+    !isLoadingOptions &&
+    !isSubmitting;
+
+  return (
+    <div className="openbolt-task-form">
+      <Form onSubmit={handleSubmit}>
+        <Grid hasGutter>
+          <GridItem span={12}>
+            <Flex
+              hasGutter
+              alignItems={{ default: 'alignItemsCenter' }}
+              justifyContent={{ default: 'justifyContentSpaceBetween' }}
+            >
+              <FlexItem>
+                <Flex
+                  spaceItems={{ default: 'spaceItemsSm' }}
+                  alignItems={{ default: 'alignItemsCenter' }}
+                  wrap={{ default: 'wrap' }}
+                >
+                  {targets?.length > 0 && (
+                    <Label color="gold">
+                      {__('Targets')}: {targets.length}
+                    </Label>
+                  )}
+                  {selectedTask && (
+                    <Label color="gold">
+                      {__('Task')}: {selectedTask}
+                    </Label>
+                  )}
+                </Flex>
+              </FlexItem>
+              <FlexItem>
+                <Button
+                  type="submit"
+                  variant="primary"
+                  isDisabled={!isFormValid}
+                  isLoading={isSubmitting}
+                >
+                  {`🚀 ${__('Launch Task')}`}
+                </Button>
+              </FlexItem>
+            </Flex>
+            <Divider />
+          </GridItem>
+          <GridItem span={12} md={7} lg={8}>
+            <Card isFlat>
+              <CardBody>
+                <Stack hasGutter>
+                  <StackItem>
+                    <SmartProxySelect
+                      smartProxies={smartProxies}
+                      selectedProxy={selectedProxy}
+                      onProxyChange={handleProxyChange}
+                      isLoading={isLoadingProxies}
+                    />
+                  </StackItem>
+                  <StackItem>
+                    <HostSelector
+                      onChange={handleTargetsChange}
+                      targetCount={targets.length}
+                    />
+                  </StackItem>
+                  <StackItem>
+                    <TaskSelect
+                      taskNames={Object.keys(taskMetadata || {})}
+                      selectedTask={selectedTask}
+                      onTaskChange={handleTaskChange}
+                      onReloadTasks={handleReloadTasks}
+                      isLoading={isLoadingTasks}
+                      isDisabled={!selectedProxy}
+                    />
+                  </StackItem>
+                  <StackItem>
+                    <ParametersSection
+                      selectedTask={selectedTask}
+                      taskMetadata={taskMetadata}
+                      taskParameters={taskParameters}
+                      onParameterChange={handleParameterChange}
+                    />
+                  </StackItem>
+                </Stack>
+              </CardBody>
+            </Card>
+          </GridItem>
+          <GridItem span={12} md={5} lg={4}>
+            <Card isFlat>
+              <CardBody>
+                <OpenBoltOptionsSection
+                  selectedProxy={selectedProxy}
+                  openBoltOptionsMetadata={openBoltOptionsMetadata}
+                  openBoltOptions={openBoltOptions}
+                  onOptionChange={handleOptionChange}
+                  isLoading={isLoadingOptions}
+                />
+              </CardBody>
+            </Card>
+          </GridItem>
+        </Grid>
+      </Form>
+    </div>
+  );
+};
+
+export default LaunchTask;