Next

Problem to solve

Summary

When using the roadmap, there is currently no way to know if an epic is on track to be completed by the assigned end date.

Situation

When I'm viewing the roadmap...

I want to quickly understand the completion progress of each item on the roadmap...

Force: It's frustrating that I can't understand the overall progress of a given epic item on the roadmap. There are timelines but those are set before something is usually started and aren't adequately maintained while an given epic is in progress.

Force: Issues aren't groomed regularly, especially when it comes to issue weights, so I'm hesitant to trust any progress completion data I will see on the roadmap when this is completed because it doesn't necessarily take into account historical velocity of the team implementing it.

Expected Outcome

So that I can report progress outwards, provide additional support as necessary to lagging items, and get better visibility into where we said we were going and how we are progressing towards those goals.

Intended users

Product managers, project managers, directors, executives

Proposal

• Expose weight completed vs. weight outstanding in some form or fashion on a roadmap epic.

Implementation Notes

• The entire roadmap needs to support real time functionality sooner rather than later. Engineering, can you please take this into consideration when thinking through the implementation?
• This is a good opportunity to pay down some technical debt and refactor the Roadmap to use GraphQL (https://gitlab.com/gitlab-org/gitlab-ee/issues/12887)

Design

roadmaphover

See the designs tab for more

Design requirements

View specs here: https://gitlab-org.gitlab.io/gitlab-design/hosted/alexis/ee%235164-roadmap-progress-spec-previews/

Epic bar

• Give epic bars greater hierarchy. They should be indexed above the date grid and "today" indicator.
• Epic bar color:
  • Epics with start and end dates: #1b69b6
  • Epics without start or end date: #ffffff with 1px #1b69b6 border
• Progress bar color:
  • Epics with start and end dates: Filled progress: #ffffff , Unfilled progress: #ffffff with 30% opacity.
  • Epics without start or end date: Filled progress: #1b69b6 , Unfilled progress: #1b69b6 with 30% opacity.
• Icon and text color:
  • Epics with start and end dates: #ffffff
  • Epics without start or end date: #1b69b6
• Font
  • Size: 14
  • Weight: Medium

Epic bar hover state

• Epic bar color:
  • Epics with start and end dates: #17599c
  • Epics without start or end date: #ffffff with 1px #17599c border
• Progress bar color:
  • Epics with start and end dates: Filled progress: #ffffff , Unfilled progress: #ffffff with 30% opacity.
  • Epics without start or end date: Filled progress: #17599c , Unfilled progress: #17599c with 30% opacity.
• Icon and text color:
  • Epics with start and end dates: #ffffff
  • Epics without start or end date: #17599c

Popover

• Use our popover component

Future

I have designs for bars that have less height, but for now we might as well use the real estate we have to make these as readable as possible. This could also allow for us to add in more affordance for things like linking dependencies, dragging to change dates, etc.

From the specs :

Permissions and Security

• As the MVC exposes no configuration options, users with access to view the Roadmap will be able to view progress completion.

Documentation

• Update Roadmap Documentation

Interested Customers/Prospects

• Interested Customer
• Interested Customer
• Interested Customer
• Interested Prospect