Skip to content

Feat: Update schedule grid to start at beginning of current week

David O'Regan requested to merge 322938-weekly-start-date-grid into master

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 inside oncall_schedule.vue and timeframeStartDate inside common_mixin.js to select different dates as you like 😄

Screenshots (strongly suggested)

Before After
Screenshot_2021-03-18_at_15.35.04 Screenshot_2021-03-18_at_15.35.50

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

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)

Edited by David O'Regan

Merge request reports