foreman_openbolt 0.0.1

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

@@ -0,0 +1,261 @@
+/* Note: A lot of this code was adapted from foreman_remote_execution,
+ * specifically the JobWizard HostsAndInputs step component. Major props
+ * to the contributors of that project for their work.
+ */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import { API } from 'foremanReact/redux/API';
+import {
+  FormGroup,
+  HelperText,
+  Select,
+  SelectOption,
+  InputGroup,
+  InputGroupItem,
+  MenuToggle,
+  FormHelperText,
+} from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons';
+import { SearchSelect } from './SearchSelect';
+import { SelectedChips } from './SelectedChips';
+import { HostSearch } from './HostSearch';
+
+// Was from JobWizardConstants. Move into ours maybe.
+const HOST_METHODS = {
+  hosts: __('Hosts'),
+  hostGroups: __('Host groups'),
+  searchQuery: __('Search query'),
+};
+const ERROR_MESSAGES = {
+  hosts: __('Please select at least one host'),
+  hostGroups: __('Please select at least one host group'),
+  searchQuery: __('Please enter a search query'),
+};
+
+const HostSelector = ({ onChange, targetCount = 0 }) => {
+  const [hostMethod, setHostMethod] = useState(HOST_METHODS.hosts);
+  const [isOpen, setIsOpen] = useState(false);
+  const [errorText, setErrorText] = useState('');
+  const [hostsSearchQuery, setHostsSearchQuery] = useState('');
+  const [selectedTargets, setSelectedTargets] = useState({
+    hosts: [],
+    hostGroups: [],
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [fetchError, setFetchError] = useState('');
+
+  const setLabel = result => result.displayName || result.name;
+
+  const setSelectedHosts = newHostsFn =>
+    setSelectedTargets(prev => ({
+      ...prev,
+      hosts: newHostsFn(prev.hosts),
+    }));
+
+  const setSelectedHostGroups = newHostGroupsFn =>
+    setSelectedTargets(prev => ({
+      ...prev,
+      hostGroups: newHostGroupsFn(prev.hostGroups),
+    }));
+
+  const clearSearch = () => {
+    setHostsSearchQuery('');
+  };
+
+  const hasSelection =
+    selectedTargets.hosts.length > 0 ||
+    selectedTargets.hostGroups.length > 0 ||
+    hostsSearchQuery.trim().length > 0;
+
+  // Build and fetch targets when selections change
+  useEffect(() => {
+    let cancelled = false;
+
+    const fetchTargets = async () => {
+      const searchParts = [];
+
+      // Add direct host names
+      if (selectedTargets.hosts.length > 0) {
+        const hostNames = selectedTargets.hosts
+          .map(h => `name = "${h.name.replace(/"/g, '\\"')}"`)
+          .join(' or ');
+        searchParts.push(`(${hostNames})`);
+      }
+
+      // Add host groups
+      if (selectedTargets.hostGroups.length > 0) {
+        const groupQueries = selectedTargets.hostGroups
+          .map(g => `hostgroup_fullname = "${g.name.replace(/"/g, '\\"')}"`)
+          .join(' or ');
+        searchParts.push(`(${groupQueries})`);
+      }
+
+      // Add custom search query
+      if (hostsSearchQuery.trim().length > 0) {
+        searchParts.push(`(${hostsSearchQuery.trim()})`);
+      }
+
+      if (searchParts.length === 0) {
+        onChange([]);
+        return;
+      }
+
+      setIsLoading(true);
+      setFetchError('');
+
+      try {
+        const finalSearch = searchParts.join(' or ');
+
+        const searchParams = new URLSearchParams({
+          search: finalSearch,
+          per_page: 1000,
+          thin: '1',
+        });
+        const response = await API.get(`/api/hosts?${searchParams.toString()}`);
+
+        if (!cancelled) {
+          const hostNames =
+            response.data?.results?.map(host => host.name) || [];
+          onChange(hostNames);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setFetchError(error.message || __('Failed to fetch hosts'));
+          onChange([]);
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    // Debounce the fetch
+    const timeoutId = setTimeout(fetchTargets, 500);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timeoutId);
+    };
+  }, [selectedTargets, hostsSearchQuery, onChange]);
+
+  const onSelect = (_event, selection) => {
+    setHostMethod(selection);
+    setIsOpen(false);
+    setErrorText(ERROR_MESSAGES[selection] || '');
+  };
+
+  const onToggleClick = () => setIsOpen(!isOpen);
+
+  const toggle = toggleRef => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      icon={<FilterIcon />}
+    >
+      {hostMethod}
+    </MenuToggle>
+  );
+
+  return (
+    <div className="host-selector">
+      <FormGroup fieldId="host-selector" label={__('Hosts')}>
+        {targetCount > 0 && (
+          <HelperText>
+            <HelperText variant="success">
+              {sprintf(__('%s hosts selected'), targetCount)}
+            </HelperText>
+          </HelperText>
+        )}
+
+        {isLoading && (
+          <HelperText>
+            <HelperText>{__('Loading hosts...')}</HelperText>
+          </HelperText>
+        )}
+
+        <InputGroup>
+          <InputGroupItem>
+            <FormGroup fieldId="host_methods" isRequired>
+              <Select
+                ouiaId="host_methods"
+                selected={hostMethod}
+                onSelect={onSelect}
+                toggle={toggle}
+                isOpen={isOpen}
+                className="without_select2"
+                aria-label={__('Host selection method')}
+              >
+                {Object.values(HOST_METHODS).map((method, index) => (
+                  <SelectOption key={index} value={method}>
+                    {method}
+                  </SelectOption>
+                ))}
+              </Select>
+            </FormGroup>
+          </InputGroupItem>
+
+          {hostMethod === HOST_METHODS.hosts && (
+            <SearchSelect
+              selected={selectedTargets.hosts}
+              setSelected={setSelectedHosts}
+              apiKey="HOSTS"
+              name="hosts"
+              placeholderText={__('Filter by hosts')}
+              setLabel={setLabel}
+            />
+          )}
+
+          {hostMethod === HOST_METHODS.hostGroups && (
+            <SearchSelect
+              selected={selectedTargets.hostGroups}
+              setSelected={setSelectedHostGroups}
+              apiKey="HOST_GROUPS"
+              name="host groups"
+              placeholderText={__('Filter by host groups')}
+              setLabel={setLabel}
+            />
+          )}
+
+          {hostMethod === HOST_METHODS.searchQuery && (
+            <HostSearch
+              setValue={setHostsSearchQuery}
+              value={hostsSearchQuery}
+            />
+          )}
+        </InputGroup>
+
+        {!hasSelection && (
+          <FormHelperText>
+            <HelperText variant="error">{errorText}</HelperText>
+          </FormHelperText>
+        )}
+
+        {fetchError && (
+          <FormHelperText>
+            <HelperText variant="error">{fetchError}</HelperText>
+          </FormHelperText>
+        )}
+      </FormGroup>
+
+      <SelectedChips
+        selectedHosts={selectedTargets.hosts}
+        setSelectedHosts={setSelectedHosts}
+        selectedHostGroups={selectedTargets.hostGroups}
+        setSelectedHostGroups={setSelectedHostGroups}
+        hostsSearchQuery={hostsSearchQuery}
+        clearSearch={clearSearch}
+        setLabel={setLabel}
+      />
+    </div>
+  );
+};
+
+HostSelector.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  targetCount: PropTypes.number.isRequired,
+};
+
+export default HostSelector;

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

@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { FormGroup, Spinner } from '@patternfly/react-core';
+import ParameterField from './ParameterField';
+import FieldTable from './FieldTable';
+import EmptyContent from './EmptyContent';
+import { ENCRYPTED_DEFAULT_PLACEHOLDER } from '../common/constants';
+
+const Loading = () => (
+  <div style={{ textAlign: 'center', padding: '2rem' }}>
+    <Spinner size="lg" />
+    <p>{__('Loading OpenBolt options...')}</p>
+  </div>
+);
+
+const Options = ({ sortedOptions, values, onChange }) => {
+  const transport = values?.transport;
+  const visibleOptions = sortedOptions.filter(([optionName, metadata]) => {
+    if (optionName === 'transport') return true;
+    if (!metadata.transport) return true;
+    return metadata.transport.includes(transport);
+  });
+
+  const rows = visibleOptions.map(([optionName, metadata]) => ({
+    key: optionName,
+    name: optionName,
+    valueCell: (
+      // We don't want to show the type for OpenBolt options as
+      // there are no complex types like there are for task parameters,
+      // so we omit it here. Also, none should be marked as required, since
+      // all options are optional except transport, which always has a value.
+      <ParameterField
+        name={optionName}
+        metadata={metadata}
+        value={values[optionName]}
+        onChange={onChange}
+      />
+    ),
+    description: metadata.description,
+    hasEncryptedDefault:
+      metadata.default && metadata.default === ENCRYPTED_DEFAULT_PLACEHOLDER,
+  }));
+
+  return <FieldTable rows={rows} />;
+};
+
+Options.propTypes = {
+  sortedOptions: PropTypes.arrayOf(PropTypes.array).isRequired,
+  values: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+const OpenBoltOptionsSection = ({
+  selectedProxy,
+  openBoltOptionsMetadata,
+  openBoltOptions,
+  onOptionChange,
+  isLoading,
+}) => {
+  const isBooleanType = metadata =>
+    metadata.type === 'boolean' || metadata.type === 'Optional[Boolean]';
+
+  // Sort options to group booleans at the top to make the UI cleaner
+  const sortedOptions = metadata => {
+    if (!metadata) return [];
+    const { transport, ...rest } = metadata;
+    const entries = Object.entries(rest);
+
+    entries.sort(([_nameA, metadataA], [_nameB, metadataB]) => {
+      const aIsBoolean = isBooleanType(metadataA);
+      const bIsBoolean = isBooleanType(metadataB);
+
+      if (aIsBoolean !== bIsBoolean) return aIsBoolean ? -1 : 1;
+      return 0;
+    });
+    return [['transport', transport], ...entries];
+  };
+
+  const render = () => {
+    if (isLoading) return <Loading />;
+    if (!selectedProxy)
+      return (
+        <EmptyContent
+          title={__('Select a Smart Proxy to see OpenBolt options')}
+        />
+      );
+    const options = sortedOptions(openBoltOptionsMetadata);
+    if (options.length === 0)
+      return <EmptyContent title={__('No OpenBolt options available')} />;
+
+    return (
+      <Options
+        sortedOptions={options}
+        values={openBoltOptions}
+        onChange={onOptionChange}
+      />
+    );
+  };
+
+  return (
+    <FormGroup label={__('OpenBolt Options')} fieldId="openbolt-options">
+      {render()}
+    </FormGroup>
+  );
+};
+
+OpenBoltOptionsSection.propTypes = {
+  selectedProxy: PropTypes.string.isRequired,
+  openBoltOptionsMetadata: PropTypes.object.isRequired,
+  openBoltOptions: PropTypes.object.isRequired,
+  onOptionChange: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+};
+
+export default OpenBoltOptionsSection;

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

@@ -0,0 +1,145 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Checkbox,
+  FormSelect,
+  FormSelectOption,
+  TextInput,
+} from '@patternfly/react-core';
+import { ENCRYPTED_DEFAULT_PLACEHOLDER } from '../common/constants';
+
+/* Example task parameter metadata from the proxy:
+ * {
+ *   "action": {
+ *     "description": "An action to take",
+ *     "type": "Enum[get, set, delete]"
+ *   },
+ *   "section": {
+ *     "description": "The section to modify",
+ *     "type": "Optional[String[1]]"
+ *   },
+ *   "value": {
+ *     "description": "The value to set",
+ *     "type": "Variant[String[1],Integer[1,99]]"
+ *   },
+ *   "isEnabled": {
+ *     "description": "Whether the section is enabled",
+ *     "type": "Optional[Boolean]"
+ *   }
+ * }
+ *
+ * Example OpenBolt Options parameter metadata from the proxy (see OPENBOLT_OPTIONS in main.rb of the proxy code):
+ * {
+ *   "noop": {
+ *     "type": "boolean",
+ *     "transport": ["ssh", "winrm"],
+ *     "sensitive": false
+ *   },
+ *   "user": {
+ *     "type": "string",
+ *     "transport": ["ssh", "winrm"],
+ *     "sensitive": false
+ *   },
+ *   "transport": {
+ *     "type": ["ssh", "winrm"],
+ *     "transport": ["ssh", "winrm"],
+ *     "sensitive": false,
+ *     "default": "ssh"
+ *   },
+ *   "password": {
+ *     "type": "string",
+ *     "transport": ["ssh", "winrm"],
+ *     "sensitive": true
+ *   }
+ * }
+ */
+
+// TODO: The "required" attribute is being ignored and you can still submit
+// the form to run a task without filling in required parameters. Need to figure
+// out why the browser isn't enforcing this.
+const ParameterField = ({
+  name,
+  metadata,
+  value,
+  onChange,
+  isRequired = false,
+}) => {
+  const {
+    type,
+    sensitive,
+    default: defaultValue = null,
+    description = null,
+  } = metadata;
+
+  const fieldId = `param_${name}`;
+  const hasEncryptedDefault = defaultValue === ENCRYPTED_DEFAULT_PLACEHOLDER;
+
+  // Enums (arrays of strings) are rendered as dropdowns. We don't show
+  // the type label for these since the options are self-evident. Also
+  // no encrypted values.
+  if (Array.isArray(type)) {
+    return (
+      <FormSelect
+        id={fieldId}
+        aria-label={description || name}
+        title={description || name}
+        value={value ?? defaultValue ?? ''}
+        onChange={(_event, val) => onChange(name, val)}
+        isRequired={isRequired}
+        className="without_select2"
+      >
+        {type.map(option => (
+          <FormSelectOption key={option} value={option} label={option} />
+        ))}
+      </FormSelect>
+    );
+  }
+
+  // Booleans are rendered as checkboxes. No type label or encrypted values.
+  // PatternFly's Checkbox looks like absolute hot garbage by default. This
+  // inlines it with the label to make it look less awful.
+  if (type === 'boolean' || type === 'Optional[Boolean]') {
+    return (
+      <Checkbox
+        id={fieldId}
+        isChecked={!!(value ?? defaultValue)}
+        onChange={(_event, checked) => onChange(name, checked)}
+        aria-label={name}
+      />
+    );
+  }
+
+  // Everything else is a text input of some kind, at least for now.
+  // These can have encrypted defaults. When the user hasn't input
+  // a new value, and we have an encrypted default, we don't want to
+  // set the default value and instead set an empty string. We inject
+  // the actual default value in the controller.
+  const isBlank = v => v === undefined || v === '';
+  const fallback = hasEncryptedDefault ? '' : defaultValue ?? '';
+  const resolvedValue = isBlank(value) ? fallback : value;
+
+  return (
+    <TextInput
+      id={fieldId}
+      type={sensitive ? 'password' : 'text'}
+      value={resolvedValue}
+      onChange={(_event, newValue) => onChange(name, newValue)}
+      isRequired={isRequired && !hasEncryptedDefault}
+    />
+  );
+};
+
+ParameterField.propTypes = {
+  name: PropTypes.string.isRequired,
+  metadata: PropTypes.object.isRequired,
+  value: PropTypes.any,
+  onChange: PropTypes.func.isRequired,
+  isRequired: PropTypes.bool,
+};
+
+ParameterField.defaultProps = {
+  value: undefined,
+  isRequired: false,
+};
+
+export default ParameterField;

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { FormGroup } from '@patternfly/react-core';
+import ParameterField from './ParameterField';
+import FieldTable from './FieldTable';
+import EmptyContent from './EmptyContent';
+
+const ParametersSection = ({
+  selectedTask,
+  taskMetadata,
+  taskParameters,
+  onParameterChange,
+}) => {
+  const hasParameters =
+    selectedTask &&
+    taskMetadata[selectedTask]?.parameters &&
+    Object.keys(taskMetadata[selectedTask].parameters).length > 0;
+
+  const render = () => {
+    if (!selectedTask)
+      return <EmptyContent title={__('Select a task to see parameters')} />;
+    if (!hasParameters)
+      return <EmptyContent title={__('This task has no parameters')} />;
+    const entries = Object.entries(taskMetadata[selectedTask].parameters);
+    const rows = entries.map(([paramName, metadata]) => {
+      const isRequired = !metadata.type
+        ?.toString()
+        .toLowerCase()
+        .startsWith('optional');
+      return {
+        key: paramName,
+        name: paramName,
+        required: isRequired,
+        valueCell: (
+          <ParameterField
+            name={paramName}
+            metadata={metadata}
+            value={taskParameters[paramName]}
+            onChange={onParameterChange}
+            isRequired={isRequired}
+          />
+        ),
+        type: metadata.type,
+        description: metadata.description,
+      };
+    });
+
+    return <FieldTable rows={rows} />;
+  };
+
+  return (
+    <FormGroup label={__('Parameters')} fieldId="task-parameters">
+      {render()}
+    </FormGroup>
+  );
+};
+
+ParametersSection.propTypes = {
+  selectedTask: PropTypes.string.isRequired,
+  taskMetadata: PropTypes.object.isRequired,
+  taskParameters: PropTypes.object.isRequired,
+  onParameterChange: PropTypes.func.isRequired,
+};
+
+export default ParametersSection;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  FormGroup,
+  FormSelect,
+  FormSelectOption,
+} from '@patternfly/react-core';
+
+const SmartProxySelect = ({
+  smartProxies,
+  selectedProxy,
+  onProxyChange,
+  isLoading = false,
+}) => (
+  <FormGroup label={__('Smart Proxy')} fieldId="smart-proxy-input">
+    <FormSelect
+      id="proxy-select"
+      value={selectedProxy}
+      onChange={onProxyChange}
+      isDisabled={isLoading}
+      title={__('Select a Smart Proxy to run the task from.')}
+      // Foreman tries injecting select2 which breaks this component
+      className="without_select2"
+    >
+      <FormSelectOption
+        key="select-smart-proxy"
+        value=""
+        label={isLoading ? __('Loading...') : __('Select Smart Proxy')}
+        isPlaceholder
+      />
+      {smartProxies.map(proxy => (
+        <FormSelectOption key={proxy.id} value={proxy.id} label={proxy.name} />
+      ))}
+    </FormSelect>
+  </FormGroup>
+);
+
+SmartProxySelect.propTypes = {
+  smartProxies: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+      name: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  selectedProxy: PropTypes.string.isRequired,
+  onProxyChange: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+};
+
+export default SmartProxySelect;