foreman_remote_execution 4.5.6 → 5.0.0

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,
+};

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

@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import {
+  FormGroup,
+  Select,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core';
+import { range } from 'lodash';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+export const RepeatHour = ({ repeatData, setRepeatData, setValid }) => {
+  const { minute } = repeatData;
+  useEffect(() => {
+    if (minute) {
+      setValid(true);
+    } else {
+      setValid(false);
+    }
+    return () => setValid(true);
+  }, [setValid, minute]);
+  const [minuteOpen, setMinuteOpen] = useState(false);
+  return (
+    <FormGroup label={__('At minute')} isRequired>
+      <Select
+        id="repeat-on-hourly"
+        variant={SelectVariant.typeahead}
+        typeAheadAriaLabel="repeat-at-minute-typeahead"
+        onSelect={(event, selection) => {
+          setRepeatData({ minute: selection });
+          setMinuteOpen(false);
+        }}
+        selections={minute || ''}
+        onToggle={toggle => {
+          setMinuteOpen(toggle);
+        }}
+        isOpen={minuteOpen}
+        width={85}
+        menuAppendTo={() => document.querySelector('.pf-c-form.schedule-tab')}
+        toggleAriaLabel="select minute toggle"
+        validated={minute ? 'success' : 'error'}
+      >
+        {range(60).map(minuteNumber => (
+          <SelectOption key={minuteNumber} value={`${minuteNumber}`} />
+        ))}
+      </Select>
+    </FormGroup>
+  );
+};
+RepeatHour.propTypes = {
+  repeatData: PropTypes.object.isRequired,
+  setRepeatData: PropTypes.func.isRequired,
+  setValid: PropTypes.func.isRequired,
+};

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

@@ -0,0 +1,46 @@
+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 { RepeatDaily } from './RepeatDaily';
+import { noop } from '../../../helpers';
+
+export const RepeatMonth = ({ repeatData, setRepeatData, setValid }) => {
+  const { days, at } = repeatData;
+  useEffect(() => {
+    if (days && at) {
+      setValid(true);
+    } else {
+      setValid(false);
+    }
+    return () => setValid(true);
+  }, [setValid, days, at]);
+  return (
+    <>
+      <FormGroup label={__('Days')} isRequired>
+        <TextInput
+          isRequired
+          validated={days ? ValidatedOptions.noval : ValidatedOptions.error}
+          aria-label="days"
+          placeholder="1,2..."
+          type="text"
+          value={repeatData.days || ''}
+          onChange={newTime => {
+            setRepeatData({ ...repeatData, days: newTime });
+          }}
+        />
+      </FormGroup>
+      <RepeatDaily
+        repeatData={repeatData}
+        setRepeatData={setRepeatData}
+        setValid={noop}
+      />
+    </>
+  );
+};
+
+RepeatMonth.propTypes = {
+  repeatData: PropTypes.object.isRequired,
+  setRepeatData: PropTypes.func.isRequired,
+  setValid: PropTypes.func.isRequired,
+};

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

@@ -4,51 +4,112 @@ import { TextInput, Grid, GridItem, FormGroup } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { SelectField } from '../form/SelectField';
 import { repeatTypes } from '../../JobWizardConstants';
+import { RepeatCron } from './RepeatCron';
+import { RepeatHour } from './RepeatHour';
+import { RepeatMonth } from './RepeatMonth';
+import { RepeatDaily } from './RepeatDaily';
+import { RepeatWeek } from './RepeatWeek';
 
 export const RepeatOn = ({
   repeatType,
   setRepeatType,
   repeatAmount,
   setRepeatAmount,
+  repeatData,
+  setRepeatData,
+  setValid,
 }) => {
   const [repeatValidated, setRepeatValidated] = useState('default');
   const handleRepeatInputChange = newValue => {
     setRepeatValidated(newValue >= 1 ? 'default' : 'error');
     setRepeatAmount(newValue);
   };
+
+  const getRepeatComponent = () => {
+    switch (repeatType) {
+      case repeatTypes.cronline:
+        return (
+          <RepeatCron
+            repeatData={repeatData}
+            setRepeatData={setRepeatData}
+            setValid={setValid}
+          />
+        );
+      case repeatTypes.monthly:
+        return (
+          <RepeatMonth
+            repeatData={repeatData}
+            setRepeatData={setRepeatData}
+            setValid={setValid}
+          />
+        );
+      case repeatTypes.weekly:
+        return (
+          <RepeatWeek
+            repeatData={repeatData}
+            setRepeatData={setRepeatData}
+            setValid={setValid}
+          />
+        );
+      case repeatTypes.daily:
+        return (
+          <RepeatDaily
+            repeatData={repeatData}
+            setRepeatData={setRepeatData}
+            setValid={setValid}
+          />
+        );
+      case repeatTypes.hourly:
+        return (
+          <RepeatHour
+            repeatData={repeatData}
+            setRepeatData={setRepeatData}
+            setValid={setValid}
+          />
+        );
+      case repeatTypes.noRepeat:
+      default:
+        return null;
+    }
+  };
   return (
-    <Grid>
-      <GridItem span={6}>
-        <SelectField
-          fieldId="repeat-select"
-          options={Object.values(repeatTypes)}
-          setValue={newValue => {
-            setRepeatType(newValue);
-            if (newValue === repeatTypes.noRepeat) {
-              setRepeatValidated('default');
-            }
-          }}
-          value={repeatType}
-        />
-      </GridItem>
-      <GridItem span={1} />
-      <GridItem span={5}>
-        <FormGroup
-          isInline
-          helperTextInvalid={__('Repeat amount can only be a positive number')}
-          validated={repeatValidated}
-        >
-          <TextInput
-            isDisabled={repeatType === repeatTypes.noRepeat}
-            id="repeat-amount"
-            value={repeatAmount}
-            type="text"
-            onChange={newValue => handleRepeatInputChange(newValue)}
-            placeholder={__('Repeat N times')}
+    <FormGroup label={__('Repeat On')}>
+      <Grid>
+        <GridItem span={6}>
+          <SelectField
+            isRequired
+            fieldId="repeat-select"
+            options={Object.values(repeatTypes)}
+            setValue={newValue => {
+              setRepeatType(newValue);
+              if (newValue === repeatTypes.noRepeat) {
+                setRepeatValidated('default');
+              }
+            }}
+            value={repeatType}
           />
-        </FormGroup>
-      </GridItem>
-    </Grid>
+        </GridItem>
+        <GridItem span={1} />
+        <GridItem span={5}>
+          <FormGroup
+            helperTextInvalid={__(
+              'Repeat amount can only be a positive number'
+            )}
+            validated={repeatValidated}
+          >
+            <TextInput
+              isDisabled={repeatType === repeatTypes.noRepeat}
+              id="repeat-amount"
+              value={repeatAmount}
+              type="text"
+              onChange={newValue => handleRepeatInputChange(newValue)}
+              placeholder={__('Repeat N times')}
+            />
+          </FormGroup>
+        </GridItem>
+        {getRepeatComponent()}
+      </Grid>
+    </FormGroup>
   );
 };
 
@@ -58,4 +119,7 @@ RepeatOn.propTypes = {
   repeatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     .isRequired,
   setRepeatAmount: PropTypes.func.isRequired,
+  repeatData: PropTypes.object.isRequired,
+  setRepeatData: PropTypes.func.isRequired,
+  setValid: PropTypes.func.isRequired,
 };