foreman_remote_execution 4.8.0 → 5.0.0

data/webpack/JobWizard/steps/HostsAndInputs/index.js

@@ -1,66 +1,214 @@
-import React, { useState } from 'react';
-import { Button, Form, FormGroup } from '@patternfly/react-core';
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  Form,
+  FormGroup,
+  InputGroup,
+  Text,
+  Spinner,
+} from '@patternfly/react-core';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { FilterIcon } from '@patternfly/react-icons';
+import { debounce } from 'lodash';
+import { get } from 'foremanReact/redux/API';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { selectTemplateInputs } from '../../JobWizardSelectors';
+import { resetData } from 'foremanReact/components/AutoComplete/AutoCompleteActions';
+import {
+  selectTemplateInputs,
+  selectWithKatello,
+  selectHostCount,
+  selectIsLoadingHosts,
+} from '../../JobWizardSelectors';
 import { SelectField } from '../form/SelectField';
 import { SelectedChips } from './SelectedChips';
 import { TemplateInputs } from './TemplateInputs';
-import { WIZARD_TITLES } from '../../JobWizardConstants';
+import { HostSearch } from './HostSearch';
+import { HostPreviewModal } from './HostPreviewModal';
+import {
+  WIZARD_TITLES,
+  HOSTS,
+  HOST_COLLECTIONS,
+  HOST_GROUPS,
+  hostMethods,
+  hostsController,
+  hostQuerySearchID,
+  HOSTS_API,
+  HOSTS_TO_PREVIEW_AMOUNT,
+  DEBOUNCE_HOST_COUNT,
+} from '../../JobWizardConstants';
 import { WizardTitle } from '../form/WizardTitle';
+import { SelectAPI } from './SelectAPI';
+import { SelectGQL } from './SelectGQL';
+import { buildHostQuery } from './buildHostQuery';
 
 const HostsAndInputs = ({
   templateValues,
   setTemplateValues,
-  selectedHosts,
-  setSelectedHosts,
+  selected,
+  setSelected,
+  hostsSearchQuery,
+  setHostsSearchQuery,
 }) => {
+  const [hostMethod, setHostMethod] = useState(hostMethods.hosts);
+  const isLoading = useSelector(selectIsLoadingHosts);
   const templateInputs = useSelector(selectTemplateInputs);
-  const hostMethods = [
-    __('Hosts'),
-    __('Host collection'),
-    __('Host group'),
-    __('Search query'),
-  ];
-  const [hostMethod, setHostMethod] = useState(hostMethods[0]);
+  const [hostPreviewOpen, setHostPreviewOpen] = useState(false);
+  useEffect(() => {
+    debounce(() => {
+      dispatch(
+        get({
+          key: HOSTS_API,
+          url: '/api/hosts',
+          params: {
+            search: buildHostQuery(selected, hostsSearchQuery),
+            per_page: HOSTS_TO_PREVIEW_AMOUNT,
+          },
+        })
+      );
+    }, DEBOUNCE_HOST_COUNT)();
+  }, [
+    dispatch,
+    selected,
+    selected.hosts,
+    selected.hostCollections,
+    selected.hostCollections,
+    hostsSearchQuery,
+  ]);
+  const withKatello = useSelector(selectWithKatello);
+  const hostCount = useSelector(selectHostCount);
+  const dispatch = useDispatch();
+
+  const selectedHosts = selected.hosts;
+  const setSelectedHosts = newSelected =>
+    setSelected(prevSelected => ({
+      ...prevSelected,
+      hosts: newSelected(prevSelected.hosts),
+    }));
+  const selectedHostCollections = selected.hostCollections;
+  const setSelectedHostCollections = newSelected =>
+    setSelected(prevSelected => ({
+      ...prevSelected,
+      hostCollections: newSelected(prevSelected.hostCollections),
+    }));
+  const selectedHostGroups = selected.hostGroups;
+  const setSelectedHostGroups = newSelected => {
+    setSelected(prevSelected => ({
+      ...prevSelected,
+      hostGroups: newSelected(prevSelected.hostGroups),
+    }));
+  };
+
+  const clearSearch = () => {
+    dispatch(resetData(hostsController, hostQuerySearchID));
+    setHostsSearchQuery('');
+  };
   return (
-    <>
+    <div className="target-hosts-and-inputs">
       <WizardTitle title={WIZARD_TITLES.hostsAndInputs} />
+      {hostPreviewOpen && (
+        <HostPreviewModal
+          isOpen={hostPreviewOpen}
+          setIsOpen={setHostPreviewOpen}
+          searchQuery={buildHostQuery(selected, hostsSearchQuery)}
+        />
+      )}
       <Form>
-        <FormGroup fieldId="host_selection">
-          <SelectField
-            fieldId="host_methods"
-            options={hostMethods}
-            setValue={setHostMethod}
-            value={hostMethod}
-          />
-          <SelectedChips
-            selected={selectedHosts}
-            setSelected={setSelectedHosts}
-          />
+        <FormGroup fieldId="host_selection" id="host-selection">
+          <InputGroup>
+            <SelectField
+              isRequired
+              className="target-method-select"
+              toggleIcon={<FilterIcon />}
+              fieldId="host_methods"
+              options={Object.values(hostMethods).filter(method => {
+                if (method === hostMethods.hostCollections && !withKatello) {
+                  return false;
+                }
+                return true;
+              })}
+              setValue={setHostMethod}
+              value={hostMethod}
+            />
+            {hostMethod === hostMethods.searchQuery && (
+              <HostSearch
+                setValue={setHostsSearchQuery}
+                value={hostsSearchQuery}
+              />
+            )}
+            {hostMethod === hostMethods.hosts && (
+              <SelectGQL
+                selected={selectedHosts}
+                setSelected={setSelectedHosts}
+                apiKey={HOSTS}
+                name="hosts"
+                placeholderText={__('Filter by hosts')}
+              />
+            )}
+            {hostMethod === hostMethods.hostCollections && (
+              <SelectAPI
+                selected={selectedHostCollections}
+                setSelected={setSelectedHostCollections}
+                apiKey={HOST_COLLECTIONS}
+                name="host collections"
+                url="/katello/api/host_collections?per_page=100"
+                placeholderText={__('Filter by host collections')}
+              />
+            )}
+            {hostMethod === hostMethods.hostGroups && (
+              <SelectGQL
+                selected={selectedHostGroups}
+                setSelected={setSelectedHostGroups}
+                apiKey={HOST_GROUPS}
+                name="host groups"
+                placeholderText={__('Filter by host groups')}
+              />
+            )}
+          </InputGroup>
         </FormGroup>
-        <span>
+        <SelectedChips
+          selectedHosts={selectedHosts}
+          setSelectedHosts={setSelectedHosts}
+          selectedHostCollections={selectedHostCollections}
+          setSelectedHostCollections={setSelectedHostCollections}
+          selectedHostGroups={selectedHostGroups}
+          setSelectedHostGroups={setSelectedHostGroups}
+          hostsSearchQuery={hostsSearchQuery}
+          clearSearch={clearSearch}
+        />
+        <Text>
           {__('Apply to')}{' '}
-          <Button variant="link" isInline>
-            {selectedHosts.length} {__('hosts')}
-          </Button>
-        </span>
+          <Button
+            variant="link"
+            isInline
+            onClick={() => setHostPreviewOpen(true)}
+            isDisabled={isLoading}
+          >
+            {hostCount} {__('hosts')}
+          </Button>{' '}
+          {isLoading && <Spinner size="sm" />}
+        </Text>
         <TemplateInputs
           inputs={templateInputs}
           value={templateValues}
           setValue={setTemplateValues}
         />
       </Form>
-    </>
+    </div>
   );
 };
 
 HostsAndInputs.propTypes = {
   templateValues: PropTypes.object.isRequired,
   setTemplateValues: PropTypes.func.isRequired,
-  selectedHosts: PropTypes.array.isRequired,
-  setSelectedHosts: PropTypes.func.isRequired,
+  selected: PropTypes.shape({
+    hosts: PropTypes.array.isRequired,
+    hostCollections: PropTypes.array.isRequired,
+    hostGroups: PropTypes.array.isRequired,
+  }).isRequired,
+  setSelected: PropTypes.func.isRequired,
+  hostsSearchQuery: PropTypes.string.isRequired,
+  setHostsSearchQuery: PropTypes.func.isRequired,
 };
 
 export default HostsAndInputs;

data/webpack/JobWizard/steps/ReviewDetails/index.js

@@ -0,0 +1,193 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+} from '@patternfly/react-core';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import EllipsisWithTooltip from 'react-ellipsis-with-tooltip';
+import { get } from 'foremanReact/redux/API';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+import {
+  selectJobTemplates,
+  selectHosts,
+  selectHostCount,
+  selectTemplateInputs,
+  selectAdvancedTemplateInputs,
+} from '../../JobWizardSelectors';
+import {
+  HOSTS_API,
+  HOSTS_TO_PREVIEW_AMOUNT,
+  WIZARD_TITLES,
+} from '../../JobWizardConstants';
+import { buildHostQuery } from '../HostsAndInputs/buildHostQuery';
+import { WizardTitle } from '../form/WizardTitle';
+
+const ReviewDetails = ({
+  jobCategory,
+  jobTemplateID,
+  advancedValues,
+  scheduleValue,
+  templateValues,
+  selectedTargets,
+  hostsSearchQuery,
+}) => {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(
+      get({
+        key: HOSTS_API,
+        url: '/api/hosts',
+        params: {
+          search: buildHostQuery(selectedTargets, hostsSearchQuery),
+          per_page: HOSTS_TO_PREVIEW_AMOUNT,
+        },
+      })
+    );
+  }, [dispatch, hostsSearchQuery, selectedTargets]);
+  const jobTemplates = useSelector(selectJobTemplates);
+  const templateInputs = useSelector(selectTemplateInputs);
+  const advancedTemplateInputs = useSelector(selectAdvancedTemplateInputs);
+  const jobTemplate = jobTemplates.find(
+    template => template.id === jobTemplateID
+  )?.name;
+
+  const hosts = useSelector(selectHosts);
+
+  const hostsCount = useSelector(selectHostCount);
+  const stringHosts = () => {
+    if (hosts.length === 0) {
+      return __('No Target Hosts');
+    }
+    if (hosts.length === 1 || hosts.length === 2) {
+      return hosts.join(', ');
+    }
+    return `${hosts[0]}, ${hosts[1]} ${sprintf(
+      __(', and %s more'),
+      hostsCount - 2
+    )}`;
+  };
+  const [isAdvancedShown, setIsAdvancedShown] = useState(false);
+  const detailsFirstHalf = [
+    { label: __('Job Category'), value: jobCategory },
+    { label: __('Job template'), value: jobTemplate },
+    { label: __('Target hosts'), value: stringHosts() },
+    ...templateInputs.map(({ name }) => ({
+      label: name,
+      value: templateValues[name],
+    })),
+    {
+      label: __('Advanced fields'),
+      value: isAdvancedShown ? (
+        <Button
+          variant="link"
+          isInline
+          onClick={() => {
+            setIsAdvancedShown(false);
+          }}
+        >
+          {__('Hide all advanced fields')}
+        </Button>
+      ) : (
+        <Button
+          variant="link"
+          isInline
+          onClick={() => {
+            setIsAdvancedShown(true);
+          }}
+        >
+          {__('Show all advanced fields')}
+        </Button>
+      ),
+    },
+  ].filter(d => d);
+
+  const detailsSecondHalf = [
+    {
+      label: __('Schedule type'),
+      value: scheduleValue.isFuture
+        ? __('Schedule for future execution')
+        : __('Execute now'),
+    },
+    {
+      label: __('Recurrence'),
+      value: scheduleValue.repeatType,
+    },
+    {
+      label: __('Type of query'),
+      value: scheduleValue.isTypeStatic
+        ? __('Static query')
+        : __('Dynamic query'),
+    },
+  ].filter(d => d);
+
+  const advancedFields = [
+    { label: __('Effective user'), value: advancedValues.effectiveUserValue },
+    { label: __('Description Template'), value: advancedValues.description },
+    { label: __('Timeout to kill'), value: advancedValues.timeoutToKill },
+    { label: __('Concurrency level'), value: advancedValues.concurrencyLevel },
+    { label: __('Time span'), value: advancedValues.timeSpan },
+    {
+      label: __('Execution ordering'),
+      value: advancedValues.isRandomizedOrdering
+        ? __('Randomized')
+        : __('Alphabetical'),
+    },
+    ...advancedTemplateInputs.map(({ name }) => ({
+      label: name,
+      value: advancedValues.templateValues[name],
+    })),
+  ];
+
+  return (
+    <>
+      <WizardTitle
+        title={WIZARD_TITLES.review}
+        className="advanced-fields-title"
+      />
+      <DescriptionList isHorizontal className="review-details">
+        {detailsFirstHalf.map(({ label, value }, index) => (
+          <DescriptionListGroup key={index}>
+            <DescriptionListTerm>{label}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <EllipsisWithTooltip>{value || ''}</EllipsisWithTooltip>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        ))}
+        {isAdvancedShown &&
+          advancedFields.map(({ label, value }, index) => (
+            <DescriptionListGroup key={index} className="advanced-fields">
+              <DescriptionListTerm>{label}</DescriptionListTerm>
+              <DescriptionListDescription>
+                <EllipsisWithTooltip>{value || ''}</EllipsisWithTooltip>
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          ))}
+        {detailsSecondHalf.map(({ label, value }, index) => (
+          <DescriptionListGroup key={index}>
+            <DescriptionListTerm>{label}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <EllipsisWithTooltip>{value || ''}</EllipsisWithTooltip>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        ))}
+      </DescriptionList>
+    </>
+  );
+};
+
+ReviewDetails.propTypes = {
+  jobCategory: PropTypes.string.isRequired,
+  jobTemplateID: PropTypes.number,
+  advancedValues: PropTypes.object.isRequired,
+  scheduleValue: PropTypes.object.isRequired,
+  templateValues: PropTypes.object.isRequired,
+  selectedTargets: PropTypes.object.isRequired,
+  hostsSearchQuery: PropTypes.string.isRequired,
+};
+
+ReviewDetails.defaultProps = { jobTemplateID: null };
+export default ReviewDetails;

data/webpack/JobWizard/steps/Schedule/PurposeField.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TextInput, FormGroup } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { helpLabel } from '../form/FormHelpers';
+
+export const PurposeField = ({ isDisabled, purpose, setPurpose }) => (
+  <FormGroup
+    label={__('Purpose')}
+    labelIcon={helpLabel(
+      __(
+        'A special label for tracking a recurring job. There can be only one active job with a given purpose at a time.'
+      )
+    )}
+  >
+    <TextInput
+      isDisabled={isDisabled}
+      aria-label="purpose"
+      type="text"
+      value={purpose}
+      onChange={newPurpose => {
+        setPurpose(newPurpose);
+      }}
+    />
+  </FormGroup>
+);
+PurposeField.propTypes = {
+  isDisabled: PropTypes.bool.isRequired,
+  purpose: PropTypes.string.isRequired,
+  setPurpose: PropTypes.func.isRequired,
+};

data/webpack/JobWizard/steps/Schedule/QueryType.js

@@ -1,48 +1,51 @@
-import React, { useState } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { FormGroup, Radio } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { helpLabel } from '../form/FormHelpers';
 
-export const QueryType = () => {
-  const [isTypeStatic, setIsTypeStatic] = useState(true);
-  return (
-    <FormGroup
-      label={__('Query type')}
-      fieldId="query-type"
-      labelIcon={helpLabel(
-        <p>
-          {__('Type has impact on when is the query evaluated to hosts.')}
-          <br />
-          <ul>
-            <li>
-              <b>{__('Static')}</b> -{' '}
-              {__('evaluates just after you submit this form')}
-            </li>
-            <li>
-              <b>{__('Dynamic')}</b> -{' '}
-              {__(
-                "evaluates just before the execution is started, so if it's planed in future, targeted hosts set may change before it"
-              )}
-            </li>
-          </ul>
-        </p>,
-        'query-type'
-      )}
-    >
-      <Radio
-        isChecked={isTypeStatic}
-        name="query-type"
-        onChange={() => setIsTypeStatic(true)}
-        id="query-type-static"
-        label={__('Static query')}
-      />
-      <Radio
-        isChecked={!isTypeStatic}
-        name="query-type"
-        onChange={() => setIsTypeStatic(false)}
-        id="query-type-dynamic"
-        label={__('Dynamic query')}
-      />
-    </FormGroup>
-  );
+export const QueryType = ({ isTypeStatic, setIsTypeStatic }) => (
+  <FormGroup
+    label={__('Query type')}
+    fieldId="query-type"
+    labelIcon={helpLabel(
+      <p>
+        {__('Type has impact on when is the query evaluated to hosts.')}
+        <br />
+        <ul>
+          <li>
+            <b>{__('Static')}</b> -{' '}
+            {__('evaluates just after you submit this form')}
+          </li>
+          <li>
+            <b>{__('Dynamic')}</b> -{' '}
+            {__(
+              "evaluates just before the execution is started, so if it's planed in future, targeted hosts set may change before it"
+            )}
+          </li>
+        </ul>
+      </p>,
+      'query-type'
+    )}
+  >
+    <Radio
+      isChecked={isTypeStatic}
+      name="query-type"
+      onChange={() => setIsTypeStatic(true)}
+      id="query-type-static"
+      label={__('Static query')}
+    />
+    <Radio
+      isChecked={!isTypeStatic}
+      name="query-type"
+      onChange={() => setIsTypeStatic(false)}
+      id="query-type-dynamic"
+      label={__('Dynamic query')}
+    />
+  </FormGroup>
+);
+
+QueryType.propTypes = {
+  isTypeStatic: PropTypes.bool.isRequired,
+  setIsTypeStatic: PropTypes.func.isRequired,
 };

data/webpack/JobWizard/steps/Schedule/RepeatCron.js

@@ -0,0 +1,53 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { TextInput, FormGroup, ValidatedOptions } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { helpLabel } from '../form/FormHelpers';
+
+export const RepeatCron = ({ repeatData, setRepeatData, setValid }) => {
+  const { cronline } = repeatData;
+  useEffect(() => {
+    if (cronline) {
+      setValid(true);
+    } else {
+      setValid(false);
+    }
+    return () => setValid(true);
+  }, [setValid, cronline]);
+  return (
+    <FormGroup
+      label={__('Cron line')}
+      labelIcon={helpLabel(
+        <div>
+          {__("Cron line format 'a b c d e', where:")}
+          <br />
+          <ol>
+            <li>{__('is minute (range: 0-59)')}</li>
+            <li>{__('is hour (range: 0-23)')}</li>
+            <li>{__('is day of month (range: 1-31)')}</li>
+            <li>{__('is month (range: 1-12)')}</li>
+            <li>{__('is day of week (range: 0-6)')}</li>
+          </ol>
+        </div>
+      )}
+      isRequired
+    >
+      <TextInput
+        isRequired
+        validated={cronline ? ValidatedOptions.noval : ValidatedOptions.error}
+        aria-label="cronline"
+        placeholder="* * * * *"
+        type="text"
+        value={cronline || ''}
+        onChange={newTime => {
+          setRepeatData({ cronline: newTime });
+        }}
+      />
+    </FormGroup>
+  );
+};
+RepeatCron.propTypes = {
+  repeatData: PropTypes.object.isRequired,
+  setRepeatData: PropTypes.func.isRequired,
+  setValid: PropTypes.func.isRequired,
+};

data/webpack/JobWizard/steps/Schedule/RepeatDaily.js

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, TimePicker } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+export const RepeatDaily = ({ repeatData, setRepeatData, setValid }) => {
+  const { at } = repeatData;
+  useEffect(() => {
+    if (at) {
+      setValid(true);
+    } else {
+      setValid(false);
+    }
+    return () => setValid(true);
+  }, [setValid, at]);
+  return (
+    <FormGroup label={__('At')} isRequired>
+      <TimePicker
+        aria-label="repeat-at"
+        className="time-picker"
+        time={repeatData.at}
+        placeholder="hh:mm"
+        onChange={newTime => {
+          setRepeatData({ ...repeatData, at: newTime });
+        }}
+        is24Hour
+        invalidFormatErrorMessage={__('Invalid time format')}
+      />
+    </FormGroup>
+  );
+};
+
+RepeatDaily.propTypes = {
+  repeatData: PropTypes.object.isRequired,
+  setRepeatData: PropTypes.func.isRequired,
+  setValid: PropTypes.func.isRequired,
+};