Improve the consistency between VSA and DORA charts - (Add date picker to DORA4 charts)

This was promoted to epic - Improve the consistency between VSA and DORA ch... (&8517 - closed)

Problem to solve

As a user viewing Value stream metrics and DORA metrics, I find the interaction confusion and I do not have a consistent user experience

Additional Details

There is a difference in the deployments number between VSA and the CICD charts (thought it should be the same tile) and the default is different so when I click on deployment frequency from the VSA tile (it is last 30 days) but after I go to CICD it shows 7 days so the numbers are totally different.

Recorded walkthrough: https://gitlab.zoom.us/rec/play/Q8rsw2es41X8G33lQkOg9gCf_GVk0EYXg5qXzf7zCZW1nDNAMNWRJSTQ080ZW4ZDce0PahtUV3Drd6wH.EMeJnBtXZ28KFhfu?autoplay=true&continueMode=true&startTime=1644402264000

VSA	CI/CD

From investigation that @ahegyi did, it looks like there is a difference in the start date

From the requests: created_after=2022-01-10 created_after=2022-01-11

1. We need a standard way to determine the start and end day of the range. In VSA we use "29 days ago" as the start date. The end day is the today's date (this is how we get 30 days).
   • This might be related to Set VSA datepicker to correct UTC date (#205161 - closed) and need to be split from this issue.

Proposal

1. Resolve the inconsistent and confusing user experience when drilling down from VSA into DORA charts by adding the date picker to the DORA4 metrics pages

2. The DORA charts will inherit the date_range for the VSA filter bar.

3. The date range should be reflected in the URL, allowing easy comparison of different time periods and will help with sharing charts links that show the intended timespan.

4. A default range of 30 days should be displayed when user opens the chart from the left sidebar, Analytics > CI/CD Analytics.

5. This need to be done the 4 DORA metric charts:

• Deployment Frequency
• Lead Time For Changes
• Time To Restore Service
• Change Failure Rate

• For the datepicker it's already supported at backend and no changes required.

Open questions

1. Do we want to remove the "predefined dates"?
   • @danmh: Yes. If we were to have predefined time ranges I'd expect these to be built into the date-picker as part of a date-picker redesign.
2. Can the DORA charts inherit also the filters from the filter bar?
   • @danmh : Yes, I think doing so would match user expectations. However, I can't think of a use case.

Intended users

Metrics

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.