Skip to content

Commit

Permalink
fix: added start and end time info text to educate user better around…
Browse files Browse the repository at this point in the history 
… the schedule timelines (#5837)

* fix: added start and end time info text to educate user better around the schedule timelines

* fix: changed the start and endtime info text

* fix: changed the start and endtime info text

* fix: comment resolved
  • Loading branch information
@SagarRajput-7
SagarRajput-7 authored Sep 6, 2024
1 parent 7a10fe2 commit 4eb533f
Show file tree
Hide file tree
Showing 3 changed files with 153 additions and 8 deletions.
20 changes: 20 additions & 0 deletions frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -543,5 +555,13 @@
background: var(--bg-vanilla-100);
}
}

.scheduleTimeInfoText {
color: var(--bg-slate-300);
}

.alert-rule-info {
color: var(--bg-slate-300);
}
}
}
139 changes: 132 additions & 7 deletions frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import {
getAlertOptionsFromIds,
getDurationInfo,
getEndTime,
handleTimeConvertion,
handleTimeConversion,
isScheduleRecurring,
recurrenceOptions,
recurrenceOptionWithSubmenu,
Expand All @@ -52,6 +52,10 @@ dayjs.locale('en');
dayjs.extend(utc);
dayjs.extend(timezone);

const TIME_FORMAT = 'HH:mm';
const DATE_FORMAT = 'Do MMM YYYY';
const ORDINAL_FORMAT = 'Do';

interface PlannedDowntimeFormData {
name: string;
startTime: dayjs.Dayjs | string;
Expand Down Expand Up @@ -105,6 +109,10 @@ export function PlannedDowntimeForm(
?.unit || 'm',
);

const [formData, setFormData] = useState<PlannedDowntimeFormData>(
initialValues?.schedule as PlannedDowntimeFormData,
);

const [recurrenceType, setRecurrenceType] = useState<string | null>(
(initialValues.schedule?.recurrence?.repeatType as string) ||
recurrenceOptions.doesNotRepeat.value,
Expand All @@ -131,15 +139,15 @@ export function PlannedDowntimeForm(
.filter((alert) => alert !== undefined) as string[],
name: values.name,
schedule: {
startTime: handleTimeConvertion(
startTime: handleTimeConversion(
values.startTime,
timezoneInitialValue,
values.timezone,
shouldKeepLocalTime,
),
timezone: values.timezone,
endTime: values.endTime
? handleTimeConvertion(
? handleTimeConversion(
values.endTime,
timezoneInitialValue,
values.timezone,
Expand Down Expand Up @@ -196,14 +204,14 @@ export function PlannedDowntimeForm(
? `${values.recurrence?.duration}${durationUnit}`
: undefined,
endTime: !isEmpty(values.endTime)
? handleTimeConvertion(
? handleTimeConversion(
values.endTime,
timezoneInitialValue,
values.timezone,
!isEditMode,
)
: undefined,
startTime: handleTimeConvertion(
startTime: handleTimeConversion(
values.startTime,
timezoneInitialValue,
values.timezone,
Expand Down Expand Up @@ -300,6 +308,116 @@ export function PlannedDowntimeForm(
}),
);

const getTimezoneFormattedTime = (
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 = useMemo((): string => {
let startTime = formData?.startTime;
if (recurrenceType !== recurrenceOptions.doesNotRepeat.value) {
startTime = formData?.recurrence?.startTime || formData?.startTime || '';
}

if (!startTime) {
return '';
}

if (formData.timezone) {
startTime = handleTimeConversion(
startTime,
timezoneInitialValue,
formData?.timezone,
!isEditMode,
);
}
const daysOfWeek = formData?.recurrence?.repeatOn;

const formattedStartTime = getTimezoneFormattedTime(
startTime,
formData.timezone,
!isEditMode,
TIME_FORMAT,
);

const formattedStartDate = getTimezoneFormattedTime(
startTime,
formData.timezone,
!isEditMode,
DATE_FORMAT,
);

const ordinalFormat = getTimezoneFormattedTime(
startTime,
formData.timezone,
!isEditMode,
ORDINAL_FORMAT,
);

const formattedDaysOfWeek = daysOfWeek?.join(', ');
switch (recurrenceType) {
case 'daily':
return `Scheduled from ${formattedStartDate}, daily starting at ${formattedStartTime}.`;
case 'monthly':
return `Scheduled from ${formattedStartDate}, monthly on the ${ordinalFormat} starting at ${formattedStartTime}.`;
case 'weekly':
return `Scheduled from ${formattedStartDate}, weekly ${
formattedDaysOfWeek ? `on [${formattedDaysOfWeek}]` : ''
} starting at ${formattedStartTime}`;
default:
return `Scheduled for ${formattedStartDate} starting at ${formattedStartTime}.`;
}
}, [formData, recurrenceType, isEditMode, timezoneInitialValue]);

const endTimeText = useMemo((): 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 = handleTimeConversion(
endTime,
timezoneInitialValue,
formData?.timezone,
!isEditMode,
);
}

const formattedEndTime = getTimezoneFormattedTime(
endTime,
formData.timezone,
!isEditMode,
TIME_FORMAT,
);

const formattedEndDate = getTimezoneFormattedTime(
endTime,
formData.timezone,
!isEditMode,
DATE_FORMAT,
);
return `Scheduled to end maintenance on ${formattedEndDate} at ${formattedEndTime}.`;
}, [formData, recurrenceType, isEditMode, timezoneInitialValue]);

return (
<Modal
title={
Expand All @@ -323,6 +441,7 @@ export function PlannedDowntimeForm(
onFinish={onFinish}
onValuesChange={(): void => {
setRecurrenceType(form.getFieldValue('recurrence')?.repeatType as string);
setFormData(form.getFieldsValue());
}}
autoComplete="off"
>
Expand All @@ -333,7 +452,7 @@ export function PlannedDowntimeForm(
label="Starts from"
name="startTime"
rules={formValidationRules}
className="formItemWithBullet"
className={!isEmpty(startTimeText) ? 'formItemWithBullet' : ''}
getValueProps={(value): any => ({
value: value ? dayjs(value).tz(timezoneInitialValue) : undefined,
})}
Expand All @@ -348,6 +467,9 @@ export function PlannedDowntimeForm(
popupClassName="datePicker"
/>
</Form.Item>
{!isEmpty(startTimeText) && (
<div className="scheduleTimeInfoText">{startTimeText}</div>
)}
<Form.Item
label="Repeats every"
name={['recurrence', 'repeatType']}
Expand Down Expand Up @@ -411,7 +533,7 @@ export function PlannedDowntimeForm(
required: recurrenceType === recurrenceOptions.doesNotRepeat.value,
},
]}
className="formItemWithBullet"
className={!isEmpty(endTimeText) ? 'formItemWithBullet' : ''}
getValueProps={(value): any => ({
value: value ? dayjs(value).tz(timezoneInitialValue) : undefined,
})}
Expand All @@ -426,6 +548,9 @@ export function PlannedDowntimeForm(
popupClassName="datePicker"
/>
</Form.Item>
{!isEmpty(endTimeText) && (
<div className="scheduleTimeInfoText">{endTimeText}</div>
)}
<div>
<div className="alert-rule-form">
<Typography style={{ marginBottom: 8 }}>Silence Alerts</Typography>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/container/PlannedDowntime/PlannedDowntimeutils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@ export function formatWithTimezone(
return `${parsedDate?.substring(0, 19)}${targetOffset}`;
}

export function handleTimeConvertion(
export function handleTimeConversion(
dateValue: string | dayjs.Dayjs,
timezoneInit?: string,
timezone?: string,
Expand Down

0 comments on commit 4eb533f

Please sign in to comment.