diff --git a/frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss b/frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss index 41949142fa..7f18f0a63d 100644 --- a/frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss +++ b/frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss @@ -77,6 +77,18 @@ color: var(--bg-vanilla-400); } } + + .formItemWithBullet { + margin-bottom: 0; + } + + .scheduleTimeInfoText { + margin-top: 8px; + margin-bottom: 20px; + font-size: 12px; + font-weight: 400; + color: var(--bg-vanilla-400); + } } .alert-rule-tags { diff --git a/frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx b/frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx index 76b0507558..fd9b394581 100644 --- a/frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx +++ b/frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx @@ -105,6 +105,10 @@ export function PlannedDowntimeForm( ?.unit || 'm', ); + const [formData, setFormData] = useState( + initialValues?.schedule as PlannedDowntimeFormData, + ); + const [recurrenceType, setRecurrenceType] = useState( (initialValues.schedule?.recurrence?.repeatType as string) || recurrenceOptions.doesNotRepeat.value, @@ -300,6 +304,111 @@ export function PlannedDowntimeForm( }), ); + const timezoneFormatted = ( + time: string | dayjs.Dayjs, + timeZone?: string, + isEditMode?: boolean, + format?: string, + ): string => { + if (!time) { + return ''; + } + if (!timeZone) { + return dayjs(time).format(format); + } + return dayjs(time).tz(timeZone, isEditMode).format(format); + }; + + const startTimeText = (): string => { + let startTime = formData?.startTime; + if (recurrenceType !== recurrenceOptions.doesNotRepeat.value) { + startTime = formData?.recurrence?.startTime || formData?.startTime || ''; + } + + if (!startTime) { + return ''; + } + + if (formData.timezone) { + startTime = handleTimeConvertion( + startTime, + timezoneInitialValue, + formData?.timezone, + !isEditMode, + ); + } + const daysOfWeek = formData?.recurrence?.repeatOn; + + const formattedStartTime = timezoneFormatted( + startTime, + formData.timezone, + !isEditMode, + 'HH:mm', + ); + + const formattedStartDate = timezoneFormatted( + startTime, + formData.timezone, + !isEditMode, + 'Do MMM YYYY', + ); + + const formattedDaysOfWeek = daysOfWeek?.join(', '); + switch (recurrenceType) { + case 'daily': + return `Schedule will start from ${formattedStartDate} and will trigger at ${formattedStartTime} daily`; + case 'monthly': + return `Schedule will start from ${formattedStartDate} and will trigger at ${formattedStartTime} on ${dayjs( + startTime, + ).format('Do')} day of every month`; + case 'weekly': + return `Schedule will start from ${formattedStartDate} and will trigger at ${formattedStartTime} ${ + formattedDaysOfWeek ? `on [${formattedDaysOfWeek}]` : '' + } every week`; + default: + return `Schedule will start at ${formattedStartTime} on ${formattedStartDate}`; + } + }; + + const endTimeText = (): string => { + let endTime = formData?.endTime; + if (recurrenceType !== recurrenceOptions.doesNotRepeat.value) { + endTime = formData?.recurrence?.endTime || ''; + + if (!isEditMode && !endTime) { + endTime = formData?.endTime || ''; + } + } + + if (!endTime) { + return ''; + } + + if (formData.timezone) { + endTime = handleTimeConvertion( + endTime, + timezoneInitialValue, + formData?.timezone, + !isEditMode, + ); + } + + const formattedEndTime = timezoneFormatted( + endTime, + formData.timezone, + !isEditMode, + 'HH:mm', + ); + + const formattedEndDate = timezoneFormatted( + endTime, + formData.timezone, + !isEditMode, + 'Do MMM YYYY', + ); + return `Schedule will end at ${formattedEndTime} on ${formattedEndDate}`; + }; + return ( { setRecurrenceType(form.getFieldValue('recurrence')?.repeatType as string); + setFormData(form.getFieldsValue()); }} autoComplete="off" > @@ -348,6 +458,7 @@ export function PlannedDowntimeForm( popupClassName="datePicker" /> +
{startTimeText()}
+
{endTimeText()}
Silence Alerts