EDM-2742: Allow users to configure startGraceDuration for updates (#416) (#434)

(cherry picked from commit 6de3a6a)

Author: celdrake

libs/i18n/locales/en/translation.json

@@ -642,6 +642,8 @@
   "Thu": "Thu",
   "Fri": "Fri",
   "Sat": "Sat",
+  "Start grace duration": "Start grace duration",
+  "Devices can start the update within this time window after the scheduled trigger.": "Devices can start the update within this time window after the scheduled trigger.",
   "Use different update schedules for downloading and installing updates": "Use different update schedules for downloading and installing updates",
   "Deletion of fleet {{fleetId}} failed.": "Deletion of fleet {{fleetId}} failed.",
   "Delete fleet?": "Delete fleet?",
@@ -759,6 +761,8 @@
   "Time must be in hh:mm with 24-hour format": "Time must be in hh:mm with 24-hour format",
   "Installing start time is required": "Installing start time is required",
   "Installing end time is required": "Installing end time is required",
+  "Start grace duration is required": "Start grace duration is required",
+  "Duration must be a number followed by a unit (\"s\", \"m\", or \"h\")": "Duration must be a number followed by a unit (\"s\", \"m\", or \"h\")",
   "Select at least one day of the week for \"weekly\" schedules": "Select at least one day of the week for \"weekly\" schedules",
   "Select the timezone for downloading updates": "Select the timezone for downloading updates",
   "Select the timezone for installing updates": "Select the timezone for installing updates",

libs/types/models/UpdateSchedule.ts

@@ -11,6 +11,6 @@ import type { TimeZone } from './TimeZone';
 export type UpdateSchedule = {
   timeZone?: TimeZone;
   at: CronExpression;
-  startGraceDuration?: Duration;
+  startGraceDuration: Duration;
 };
 

libs/ui-components/src/components/Fleet/CreateFleet/fleetSpecUtils.ts

@@ -61,18 +61,25 @@ export const getUpdatePolicyValues = (updateSpec?: DeviceUpdatePolicySpec): Upda
   const downloadWeekDays = timeUtils.getWeekDays(updateSpec?.downloadSchedule?.at);
   const installWeekDays = timeUtils.getWeekDays(updateSpec?.updateSchedule?.at);
 
+  const downloadStartGraceDuration = updateSpec?.downloadSchedule?.startGraceDuration;
+  const installStartGraceDuration = isEqual
+    ? downloadStartGraceDuration
+    : updateSpec?.updateSchedule?.startGraceDuration;
+
   return {
     isAdvanced: Boolean(updateSpec?.downloadSchedule?.at || updateSpec?.updateSchedule?.at),
     downloadAndInstallDiffer: !isEqual,
     downloadStartsAt,
-    downloadEndsAt: timeUtils.getEndTime(downloadStartsAt, updateSpec?.downloadSchedule?.startGraceDuration),
+    downloadEndsAt: timeUtils.getEndTime(downloadStartsAt, downloadStartGraceDuration),
+    downloadStartGraceDuration,
     downloadWeekDays: downloadWeekDays.selectedDays,
     downloadScheduleMode: downloadWeekDays.allSelected
       ? timeUtils.UpdateScheduleMode.Daily
       : timeUtils.UpdateScheduleMode.Weekly,
     downloadTimeZone: updateSpec?.downloadSchedule?.timeZone || timeUtils.localDeviceTimezone,
     installStartsAt,
-    installEndsAt: timeUtils.getEndTime(installStartsAt, updateSpec?.updateSchedule?.startGraceDuration),
+    installEndsAt: timeUtils.getEndTime(installStartsAt, installStartGraceDuration),
+    installStartGraceDuration,
     installWeekDays: installWeekDays.selectedDays,
     installScheduleMode: installWeekDays.allSelected
       ? timeUtils.UpdateScheduleMode.Daily

libs/ui-components/src/components/Fleet/CreateFleet/steps/UpdateStepUpdatePolicy.tsx

@@ -11,6 +11,7 @@ import CheckboxField, { CheckboxFieldGroupValidation } from '../../../form/Check
 import FormSelectTypeahead from '../../../form/FormSelectTypeahead';
 import RadioField from '../../../form/RadioField';
 import ErrorHelperText from '../../../form/FieldHelperText';
+import TextField from '../../../form/TextField';
 
 import './UpdateStepUpdatePolicy.css';
 
@@ -113,9 +114,9 @@ const ScheduleBlock = ({
   const isWeekly = scheduleMode === timeUtils.UpdateScheduleMode.Weekly;
 
   return (
-    <FormGroupWithHelperText isRequired label={ariaLabel} content={helperContent}>
-      <Stack hasGutter>
-        <StackItem>
+    <Stack hasGutter>
+      <StackItem>
+        <FormGroupWithHelperText isRequired label={ariaLabel} content={helperContent}>
           <Flex>
             <FlexItem>
               <FormSelectTypeahead
@@ -159,12 +160,11 @@ const ScheduleBlock = ({
               />
             </FlexItem>
           </Flex>
-        </StackItem>
-        {isWeekly && (
-          <FieldArray name={`updatePolicy.${blockType}WeekDays`}>
-            {() => (
-              <>
-                <StackItem>
+
+          {isWeekly && (
+            <FieldArray name={`updatePolicy.${blockType}WeekDays`}>
+              {() => (
+                <>
                   <Flex>
                     <FlexItem>
                       <CheckboxFieldGroupValidation
@@ -216,19 +216,29 @@ const ScheduleBlock = ({
                       />
                     </FlexItem>
                   </Flex>
-                </StackItem>
-                <StackItem>
                   <ErrorHelperText error={weekDayError} />
-                </StackItem>
-              </>
-            )}
-          </FieldArray>
-        )}
-        <StackItem style={{ maxWidth: 500 }}>
-          <ScheduleTimeZone blockType={blockType} isReadOnly={isReadOnly} />
-        </StackItem>
-      </Stack>
-    </FormGroupWithHelperText>
+                </>
+              )}
+            </FieldArray>
+          )}
+        </FormGroupWithHelperText>
+      </StackItem>
+      <StackItem>
+        <ScheduleTimeZone blockType={blockType} isReadOnly={isReadOnly} />
+      </StackItem>
+      <StackItem>
+        <FormGroup isRequired label={t('Start grace duration')}>
+          <TextField
+            name={`updatePolicy.${blockType}StartGraceDuration`}
+            label={t('Start grace duration')}
+            helperText={t('Devices can start the update within this time window after the scheduled trigger.')}
+            isRequired
+            isDisabled={isReadOnly}
+            placeholder="30m"
+          />
+        </FormGroup>
+      </StackItem>
+    </Stack>
   );
 };
 

libs/ui-components/src/components/form/validations.ts

@@ -60,6 +60,8 @@ const TEMPLATE_VARIABLES_REGEXP = /{{.+?}}/g;
 // Special characters allowed: "dot", "pipe", "spaces" "quote", "backward slash", "underscore", "forward slash", "dash"
 const TEMPLATE_VARIABLES_CONTENT_REGEXP = /^([.a-zA-Z0-9|\s"\\_\/-])+$/;
 const TIME_VALUE_REGEXP = /^([01][0-9]|2[0-3]):([0-5][0-9])$/;
+// Go duration format: positive number followed by unit (s, m, or h). Examples: "30m", "1h", "45m", "30s"
+const DURATION_REGEXP = /^\d+[smh]$/;
 
 const absolutePathRegex = /^\/.*$/;
 
@@ -871,6 +873,16 @@ const requiredInstallTimes = (t: TFunction, isStartTime: boolean) =>
     return Yup.string();
   });
 
+const requiredStartGraceDuration = (t: TFunction, isInstallField: boolean = false) =>
+  Yup.string().when(['isAdvanced', 'downloadAndInstallDiffer'], ([isAdvanced, downloadAndInstallDiffer]) => {
+    if (!isAdvanced || (isInstallField && !downloadAndInstallDiffer)) {
+      return Yup.string();
+    }
+    return Yup.string()
+      .required(t('Start grace duration is required'))
+      .matches(DURATION_REGEXP, t('Duration must be a number followed by a unit ("s", "m", or "h")'));
+  });
+
 const updateWeekDaysSchema = (t: TFunction) =>
   Yup.array()
     .required()
@@ -899,11 +911,13 @@ export const validUpdatePolicySchema = (t: TFunction) => {
     // Fields are flattened so "isAdvanced" can be used for validating them
     downloadStartsAt: requiredDownloadTimes(t, true),
     downloadEndsAt: requiredDownloadTimes(t, false),
+    downloadStartGraceDuration: requiredStartGraceDuration(t, false),
     downloadScheduleMode: Yup.string().oneOf([UpdateScheduleMode.Weekly, UpdateScheduleMode.Daily]).required(),
     downloadWeekDays: updateWeekDaysSchema(t),
     downloadTimeZone: Yup.string().required(t('Select the timezone for downloading updates')),
     installStartsAt: requiredInstallTimes(t, true),
     installEndsAt: requiredInstallTimes(t, false),
+    installStartGraceDuration: requiredStartGraceDuration(t, true),
     installScheduleMode: Yup.string().oneOf([UpdateScheduleMode.Weekly, UpdateScheduleMode.Daily]).required(),
     installWeekDays: updateWeekDaysSchema(t),
     installTimeZone: Yup.string().required(t('Select the timezone for installing updates')),

libs/ui-components/src/types/deviceSpec.ts

@@ -277,11 +277,13 @@ export type UpdatePolicyForm = {
   downloadAndInstallDiffer: boolean;
   downloadStartsAt?: string;
   downloadEndsAt?: string;
+  downloadStartGraceDuration?: string;
   downloadScheduleMode: UpdateScheduleMode;
   downloadWeekDays: boolean[];
   downloadTimeZone: string;
   installStartsAt?: string;
   installEndsAt?: string;
+  installStartGraceDuration?: string;
   installScheduleMode: UpdateScheduleMode;
   installWeekDays: boolean[];
   installTimeZone: string;

libs/ui-components/src/utils/patch.ts

@@ -18,7 +18,7 @@ import {
   RolloutPolicyForm,
   UpdatePolicyForm,
 } from '../types/deviceSpec';
-import { getStartGraceDuration, getUpdateCronExpression, localDeviceTimezone } from './time';
+import { getUpdateCronExpression, localDeviceTimezone } from './time';
 
 export const appendJSONPatch = <V = unknown>({
   patches,
@@ -156,14 +156,14 @@ export const schedulesAreEqual = (a: UpdateSchedule | undefined, b: UpdateSchedu
 export const updatePolicyFormToApi = (form: Required<UpdatePolicyForm>) => {
   const downloadSchedule = {
     at: getUpdateCronExpression(form.downloadStartsAt, form.downloadScheduleMode, form.downloadWeekDays),
-    startGraceDuration: getStartGraceDuration(form.downloadStartsAt, form.downloadEndsAt),
+    startGraceDuration: form.downloadStartGraceDuration || '0s',
     timeZone: form.downloadTimeZone === localDeviceTimezone ? undefined : form.downloadTimeZone,
   };
   let updateSchedule: UpdateSchedule;
   if (form.downloadAndInstallDiffer) {
     updateSchedule = {
       at: getUpdateCronExpression(form.installStartsAt, form.installScheduleMode, form.installWeekDays),
-      startGraceDuration: getStartGraceDuration(form.installStartsAt, form.installEndsAt),
+      startGraceDuration: form.installStartGraceDuration || '0s',
       timeZone: form.installTimeZone === localDeviceTimezone ? undefined : form.installTimeZone,
     };
   } else {

libs/ui-components/src/utils/time.ts

@@ -91,23 +91,6 @@ export const getTime = (cronExp?: string) => {
   return `${formatTimePart(hours)}:${formatTimePart(minutes)}`;
 };
 
-const getMinuteDifference = (timeA: string, timeB: string) => {
-  const [aHours, aMinutes] = timeA.split(':').map(Number);
-  const [bHours, bMinutes] = timeB.split(':').map(Number);
-
-  const totalMinutesA = aHours * 60 + aMinutes;
-  const totalMinutesB = bHours * 60 + bMinutes;
-
-  let difference = totalMinutesB - totalMinutesA;
-
-  // Adjust for crossing midnight by adding 24 hours if A is after B
-  if (difference < 0) {
-    difference += 24 * 60;
-  }
-
-  return difference;
-};
-
 export const getWeekDays = (cronExp?: string): { allSelected: boolean; selectedDays: boolean[] } => {
   const defaultDays = [true, true, true, true, true, true, true];
 
@@ -138,10 +121,3 @@ export const getUpdateCronExpression = (startTime: string, scheduleMode: UpdateS
     .filter((num) => num !== null);
   return `${minutes} ${hours} * * ${weekDayVals.join(',')}`;
 };
-
-export const getStartGraceDuration = (startTime: string, endTime: string) => {
-  if (startTime && startTime === endTime) {
-    return '24h';
-  }
-  return `${getMinuteDifference(startTime, endTime)}m`;
-};