foreman_remote_execution 7.2.2 → 8.0.0

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

@@ -5,50 +5,89 @@ import {
   Select,
   SelectOption,
   SelectVariant,
+  Alert,
+  AlertActionCloseButton,
+  ValidatedOptions,
 } from '@patternfly/react-core';
-import { range } from 'lodash';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { helpLabel } from '../form/FormHelpers';
+
+export const RepeatHour = ({ repeatData, setRepeatData }) => {
+  const isValidMinute = newMinute =>
+    Number.isInteger(parseInt(newMinute, 10)) &&
+    newMinute >= 0 &&
+    newMinute < 60;
 
-export const RepeatHour = ({ repeatData, setRepeatData, setValid }) => {
   const { minute } = repeatData;
   useEffect(() => {
-    if (minute) {
-      setValid(true);
-    } else {
-      setValid(false);
+    if (!isValidMinute(minute)) {
+      setRepeatData({ minute: 0 });
     }
-    return () => setValid(true);
-  }, [setValid, minute]);
+  }, [minute, setRepeatData]);
   const [minuteOpen, setMinuteOpen] = useState(false);
+  const [options, setOptions] = useState([0, 15, 30, 45]);
+  const [isAlertOpen, setIsAlertOpen] = useState(false);
   return (
-    <FormGroup label={__('At minute')} isRequired>
+    <FormGroup
+      label={__('At minute')}
+      labelIcon={helpLabel(<div>{__('range: 0-59')}</div>)}
+      isRequired
+    >
       <Select
         id="repeat-on-hourly"
         variant={SelectVariant.typeahead}
         typeAheadAriaLabel="repeat-at-minute-typeahead"
         onSelect={(event, selection) => {
-          setRepeatData({ minute: selection });
+          setRepeatData({ minute: parseInt(selection, 10) });
           setMinuteOpen(false);
         }}
-        selections={minute || ''}
+        selections={`${minute}` || ''}
         onToggle={toggle => {
           setMinuteOpen(toggle);
         }}
         isOpen={minuteOpen}
-        width={85}
+        width={125}
         menuAppendTo={() => document.querySelector('.pf-c-form.schedule-tab')}
         toggleAriaLabel="select minute toggle"
-        validated={minute ? 'success' : 'error'}
+        validated={
+          isValidMinute(minute)
+            ? ValidatedOptions.noval
+            : ValidatedOptions.error
+        }
+        onCreateOption={newValue => {
+          if (isValidMinute(newValue)) {
+            setOptions(prev => [...prev, parseInt(newValue, 10)].sort());
+            setRepeatData({ minute: parseInt(newValue, 10) });
+            setIsAlertOpen(false);
+          } else {
+            setIsAlertOpen(true);
+          }
+        }}
+        isCreatable
+        createText={__('Create')}
       >
-        {range(60).map(minuteNumber => (
-          <SelectOption key={minuteNumber} value={`${minuteNumber}`} />
+        {options.map(minuteNumber => (
+          <SelectOption
+            key={minuteNumber}
+            value={`${minuteNumber}`}
+            onClick={() => setIsAlertOpen(false)}
+          />
         ))}
       </Select>
+      {isAlertOpen && (
+        <Alert
+          variant="danger"
+          isInline
+          title={__('Minute can only be a number between 0-59')}
+          actionClose={
+            <AlertActionCloseButton onClose={() => setIsAlertOpen(false)} />
+          }
+        />
+      )}
     </FormGroup>
   );
 };
 RepeatHour.propTypes = {
   repeatData: PropTypes.object.isRequired,
   setRepeatData: PropTypes.func.isRequired,
-  setValid: PropTypes.func.isRequired,
 };

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

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, Grid, GridItem, FormGroup } from '@patternfly/react-core';
+import { FormGroup } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { SelectField } from '../form/SelectField';
 import { repeatTypes } from '../../JobWizardConstants';
@@ -13,18 +13,10 @@ import { RepeatWeek } from './RepeatWeek';
 export const RepeatOn = ({
   repeatType,
   setRepeatType,
-  repeatAmount,
-  setRepeatAmount,
   repeatData,
   setRepeatData,
   setValid,
 }) => {
-  const [repeatValidated, setRepeatValidated] = useState('default');
-  const handleRepeatInputChange = newValue => {
-    setRepeatValidated(!newValue || newValue >= 1 ? 'default' : 'error');
-    setRepeatAmount(newValue);
-  };
-
   const getRepeatComponent = () => {
     switch (repeatType) {
       case repeatTypes.cronline:
@@ -61,64 +53,35 @@ export const RepeatOn = ({
         );
       case repeatTypes.hourly:
         return (
-          <RepeatHour
-            repeatData={repeatData}
-            setRepeatData={setRepeatData}
-            setValid={setValid}
-          />
+          <RepeatHour repeatData={repeatData} setRepeatData={setRepeatData} />
         );
-      case repeatTypes.noRepeat:
       default:
         return null;
     }
   };
   return (
-    <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}
-          />
-        </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>
+    <>
+      <FormGroup label={__('Repeats')}>
+        <SelectField
+          isRequired
+          fieldId="repeat-select"
+          options={Object.values(repeatTypes).filter(
+            type => type !== repeatTypes.noRepeat
+          )}
+          setValue={newValue => {
+            setRepeatType(newValue);
+          }}
+          value={repeatType}
+        />
+      </FormGroup>
+      {getRepeatComponent()}
+    </>
   );
 };
 
 RepeatOn.propTypes = {
   repeatType: PropTypes.oneOf(Object.values(repeatTypes)).isRequired,
   setRepeatType: PropTypes.func.isRequired,
-  repeatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    .isRequired,
-  setRepeatAmount: PropTypes.func.isRequired,
   repeatData: PropTypes.object.isRequired,
   setRepeatData: PropTypes.func.isRequired,
   setValid: PropTypes.func.isRequired,

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

@@ -7,7 +7,7 @@ import { noop } from '../../../helpers';
 
 const getWeekDays = () => {
   const locale = documentLocale().replace(/-/g, '_');
-  const baseDate = new Date(Date.UTC(2017, 0, 2)); // just a Monday
+  const baseDate = new Date(Date.UTC(2017, 0, 1)); // just a Sunday
   const weekDays = [];
   for (let i = 0; i < 7; i++) {
     try {

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

@@ -0,0 +1,126 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import {
+  FormGroup,
+  Form,
+  Button,
+  ValidatedOptions,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { DateTimePicker } from '../form/DateTimePicker';
+import { helpLabel } from '../form/FormHelpers';
+import { SCHEDULE_TYPES } from '../../JobWizardConstants';
+import { WizardTitle } from '../form/WizardTitle';
+
+export const ScheduleFuture = ({
+  scheduleValue: { startsAt, startsBefore },
+  setScheduleValue,
+  setValid,
+}) => {
+  const [error, setError] = useState(null);
+
+  const wrappedSetValid = useCallback(setValid, []);
+  useEffect(() => {
+    if (!startsBefore?.length && !startsAt?.length) {
+      wrappedSetValid(false);
+      setError(
+        __(
+          "For Future execution a 'Starts at' date or 'Starts before' date must be selected. Immediate execution can be selected in the previous step."
+        )
+      );
+    } else if (!startsBefore?.length) {
+      wrappedSetValid(true);
+      setError(null);
+    } else if (
+      new Date(startsAt).getTime() >= new Date(startsBefore).getTime()
+    ) {
+      wrappedSetValid(false);
+      setError(__("'Starts before' date must be after 'Starts at' date"));
+    } else if (new Date().getTime() >= new Date(startsBefore).getTime()) {
+      wrappedSetValid(false);
+      setError(__("'Starts before' date must in the future"));
+    } else {
+      wrappedSetValid(true);
+      setError(null);
+    }
+  }, [wrappedSetValid, startsAt, startsBefore]);
+
+  return (
+    <>
+      <WizardTitle title={SCHEDULE_TYPES.FUTURE} />
+      <Form className="future-schedule-tab">
+        <FormGroup label={__('Starts at')} fieldId="start-at-date">
+          <DateTimePicker
+            ariaLabel="starts at"
+            dateTime={startsAt}
+            setDateTime={newValue =>
+              setScheduleValue(current => ({
+                ...current,
+                startsAt: newValue,
+              }))
+            }
+          />
+          <Button
+            variant="link"
+            isInline
+            className="clear-datetime-button"
+            onClick={() =>
+              setScheduleValue(current => ({
+                ...current,
+                startsAt: null,
+              }))
+            }
+          >
+            {__('Clear input')}
+          </Button>
+        </FormGroup>
+
+        <FormGroup
+          label={__('Starts before')}
+          fieldId="start-before-date"
+          labelIcon={helpLabel(
+            __(
+              'Indicates that the action should be cancelled if it cannot be started before this time.'
+            ),
+            'start-before-date'
+          )}
+          validated={error ? ValidatedOptions.error : ValidatedOptions.noval}
+          helperTextInvalid={error}
+        >
+          <DateTimePicker
+            ariaLabel="starts before"
+            dateTime={startsBefore}
+            setDateTime={newValue =>
+              setScheduleValue(current => ({
+                ...current,
+                startsBefore: newValue,
+              }))
+            }
+          />
+          <Button
+            variant="link"
+            isInline
+            className="clear-datetime-button"
+            onClick={() =>
+              setScheduleValue(current => ({
+                ...current,
+                startsBefore: null,
+              }))
+            }
+          >
+            {__('Clear input')}
+          </Button>
+        </FormGroup>
+      </Form>
+    </>
+  );
+};
+
+ScheduleFuture.propTypes = {
+  scheduleValue: PropTypes.shape({
+    startsAt: PropTypes.string,
+    startsBefore: PropTypes.string,
+  }).isRequired,
+  setScheduleValue: PropTypes.func.isRequired,
+  setValid: PropTypes.func.isRequired,
+};

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

@@ -0,0 +1,287 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Form,
+  FormGroup,
+  Radio,
+  TextInput,
+  ValidatedOptions,
+  Divider,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { RepeatOn } from './RepeatOn';
+import { SCHEDULE_TYPES } from '../../JobWizardConstants';
+import { PurposeField } from './PurposeField';
+import { DateTimePicker } from '../form/DateTimePicker';
+import { WizardTitle } from '../form/WizardTitle';
+
+export const ScheduleRecurring = ({
+  scheduleValue,
+  setScheduleValue,
+  setValid,
+}) => {
+  const {
+    repeatType,
+    repeatAmount,
+    repeatData,
+    startsAt,
+    startsBefore,
+    ends,
+    isNeverEnds,
+    isFuture,
+    purpose,
+  } = scheduleValue;
+  const [validEnd, setValidEnd] = useState(true);
+  const [repeatValidated, setRepeatValidated] = useState('default');
+  const handleRepeatInputChange = newValue => {
+    if (!newValue.length) newValue = 0;
+    setRepeatValidated(
+      !newValue || parseInt(newValue, 10) >= 1 ? 'default' : 'error'
+    );
+    setScheduleValue(current => ({
+      ...current,
+      repeatAmount: newValue,
+    }));
+  };
+  const [repeatValid, setRepeatValid] = useState(true);
+
+  const wrappedSetValid = useCallback(setValid, []);
+  useEffect(() => {
+    if (isNeverEnds) setValidEnd(true);
+    else if (!ends) setValidEnd(true);
+    else if (
+      !startsAt.length &&
+      new Date().getTime() <= new Date(ends).getTime()
+    )
+      setValidEnd(true);
+    else if (new Date(startsAt).getTime() <= new Date(ends).getTime())
+      setValidEnd(true);
+    else {
+      setValidEnd(false);
+    }
+
+    if (!validEnd || !repeatValid) {
+      wrappedSetValid(false);
+    } else if (isFuture && startsAt.length) {
+      wrappedSetValid(true);
+    } else if (!isFuture) {
+      wrappedSetValid(true);
+    } else {
+      wrappedSetValid(false);
+    }
+  }, [
+    wrappedSetValid,
+    isNeverEnds,
+    startsAt,
+    startsBefore,
+    isFuture,
+    validEnd,
+    repeatValid,
+    ends,
+  ]);
+
+  return (
+    <>
+      <WizardTitle title={SCHEDULE_TYPES.RECURRING} />
+      <Form className="schedule-tab">
+        <FormGroup label={__('Starts')} fieldId="schedule-starts">
+          <div className="pf-c-form">
+            <FormGroup fieldId="schedule-starts-now">
+              <Radio
+                isChecked={!isFuture}
+                onChange={() =>
+                  setScheduleValue(current => ({
+                    ...current,
+                    startsAt: '',
+                    startsBefore: '',
+                    isFuture: false,
+                  }))
+                }
+                name="start-now"
+                id="start-now"
+                label={__('Now')}
+              />
+            </FormGroup>
+            <FormGroup fieldId="start-at-date">
+              <Radio
+                isChecked={isFuture}
+                onChange={() =>
+                  setScheduleValue(current => ({
+                    ...current,
+                    startsAt: new Date().toISOString(),
+                    isFuture: true,
+                  }))
+                }
+                name="start-at"
+                id="start-at"
+                className="schedule-radio"
+                label={
+                  <div className="scheudle-radio-wrapper">
+                    <div className="schedule-radio-title">{__('At')}</div>
+                    <DateTimePicker
+                      ariaLabel="starts at"
+                      dateTime={startsAt}
+                      setDateTime={newValue =>
+                        setScheduleValue(current => ({
+                          ...current,
+                          startsAt: newValue,
+                        }))
+                      }
+                      isDisabled={!isFuture}
+                    />
+                  </div>
+                }
+              />
+            </FormGroup>
+          </div>
+        </FormGroup>
+
+        <Divider component="div" />
+        <RepeatOn
+          repeatType={repeatType}
+          repeatData={repeatData}
+          setRepeatType={newValue => {
+            setScheduleValue(current => ({
+              ...current,
+              repeatType: newValue,
+              startsBefore: '',
+            }));
+          }}
+          setRepeatData={newValue => {
+            setScheduleValue(current => ({
+              ...current,
+              repeatData: newValue,
+            }));
+          }}
+          setValid={setRepeatValid}
+        />
+        <Divider component="div" />
+        <FormGroup label={__('Ends')} fieldId="schedule-ends">
+          <div className="pf-c-form">
+            <FormGroup fieldId="schedule-ends-never">
+              <Radio
+                isChecked={isNeverEnds}
+                onChange={() =>
+                  setScheduleValue(current => ({
+                    ...current,
+                    isNeverEnds: true,
+                    ends: null,
+                    repeatAmount: null,
+                  }))
+                }
+                name="never-ends"
+                id="never-ends"
+                label={__('Never')}
+              />
+            </FormGroup>
+            <FormGroup
+              fieldId="ends-on-date"
+              validated={
+                validEnd ? ValidatedOptions.noval : ValidatedOptions.error
+              }
+              helperTextInvalid={__('End time needs to be after start time')}
+              helperTextInvalidIcon={<ExclamationCircleIcon />}
+            >
+              <Radio
+                isChecked={!!ends}
+                onChange={() =>
+                  setScheduleValue(current => ({
+                    ...current,
+                    ends: new Date().toISOString(),
+                    isNeverEnds: false,
+                    repeatAmount: null,
+                  }))
+                }
+                name="ends-on"
+                id="ends-on"
+                className="schedule-radio"
+                label={
+                  <div className="scheudle-radio-wrapper">
+                    <div className="schedule-radio-title">{__('On')}</div>
+                    <DateTimePicker
+                      ariaLabel="ends on"
+                      dateTime={ends}
+                      isDisabled={!ends}
+                      setDateTime={newValue => {
+                        setScheduleValue(current => ({
+                          ...current,
+                          ends: newValue,
+                        }));
+                      }}
+                    />
+                  </div>
+                }
+              />
+            </FormGroup>
+            <FormGroup fieldId="ends-after">
+              <Radio
+                isChecked={repeatAmount === 0 || !!repeatAmount}
+                onChange={() =>
+                  setScheduleValue(current => ({
+                    ...current,
+                    ends: null,
+                    isNeverEnds: false,
+                    repeatAmount: 1,
+                  }))
+                }
+                name="ends-after"
+                id="ends-after"
+                className="schedule-radio"
+                label={
+                  <div className="scheudle-radio-wrapper">
+                    <div className="schedule-radio-title">{__('After')}</div>
+                    <FormGroup
+                      helperTextInvalid={__(
+                        'Repeat amount can only be a positive number'
+                      )}
+                      validated={repeatValidated}
+                      className="schedule-radio-repeat-text"
+                    >
+                      <TextInput
+                        id="repeat-amount"
+                        value={repeatAmount || ''}
+                        type="number"
+                        onChange={handleRepeatInputChange}
+                        isDisabled={!(repeatAmount === 0 || !!repeatAmount)}
+                      />
+                    </FormGroup>
+                    <div className="schedule-radio-occurences">
+                      {__('occurences')}
+                    </div>
+                  </div>
+                }
+              />
+            </FormGroup>
+          </div>
+        </FormGroup>
+        <Divider component="div" />
+        <PurposeField
+          purpose={purpose}
+          setPurpose={newValue => {
+            setScheduleValue(current => ({
+              ...current,
+              purpose: newValue,
+            }));
+          }}
+        />
+      </Form>
+    </>
+  );
+};
+
+ScheduleRecurring.propTypes = {
+  scheduleValue: PropTypes.shape({
+    repeatType: PropTypes.string.isRequired,
+    repeatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    repeatData: PropTypes.object,
+    startsAt: PropTypes.string,
+    startsBefore: PropTypes.string,
+    ends: PropTypes.string,
+    isFuture: PropTypes.bool,
+    isNeverEnds: PropTypes.bool,
+    purpose: PropTypes.string,
+  }).isRequired,
+  setScheduleValue: PropTypes.func.isRequired,
+  setValid: PropTypes.func.isRequired,
+};