Feat: Update schedule grid to start at beginning of current week
What does this MR do?
A tiny MVC for: #322938 (closed) where we want to allow the grid and current_day_indicator
to begin on the first day of the current week i.e. Monday while still highlighting and tracking the current day across the grid.
Calculations happening:
Inside common_mixin.js
we now accept the timeframeStartDate
item as a parameter. We use this value to calculate how many days are between the start of a timeframe and the current day based on the user's OS.
If there is a difference, we take the width of a single day cell and multiple it by the number of days we have a difference for, and then we add both the initial half-day offset(this places the current day line in the middle of the cell rather than the beginning) and the hour offset(this lets us track the hours through the day cell.
Example(For a 3 day difference between the start of the timeframe to today i.e. 15th vs 18th) at 4:00PM:
const weeklyDayDifferenceOffset = (100 / 7) * 3; // 42.8
const weeklyOffset = 100 / 7 / 2; // 7.14
const weeklyHourOffset = (7.14 / 24) * 16; // 4.76
return {
left: `${42.8 + 7.14 + 4.76}%`,
};
This should position the current date marker inside the 18th on the grid and add extra offset to show the passed hours
How/What to test
This feature needs the minimal license is GitLab Premium
To validate this merge:
- Navigate to Operations => On-call Schedules or direct link is
your_project/-/oncall_schedules
e.g. http://127.0.0.1:3000/gitlab-org/gitlab-shell/-/oncall_schedules. - Click "Add schedule on empty state"
- Add a base schedule
- Click "Add a rotation"
- Add a base rotation with any name
- You should be able to verify that the grid begins at the start of the current week and the current day indicator tracks the current day.
- If you want to test different days, you can edit
timeframeStartDate
insideoncall_schedule.vue
andtimeframeStartDate
insidecommon_mixin.js
to select different dates as you like😄
Screenshots (strongly suggested)
Before | After |
---|---|
Does this MR meet the acceptance criteria?
Conformity
-
📋 Does this MR need a changelog?-
I have included a changelog entry. -
I have not included a changelog entry because _____.
-
- [-] Documentation (if required)
- [-] Code review guidelines
- [-] Merge request performance guidelines
- [-] Style guides
- [-] Database guides
- [-] Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers - [-] Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
- [-] Label as security and @ mention
@gitlab-com/gl-security/appsec
- [-] The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
- [-] Security reports checked/validated by a reviewer from the AppSec team
Related to #322938 (closed)