Skip to content

Add date range filter to product analytics dashboard

Jiaan Louw requested to merge 377817-filter-for-dashboards-daterange into master

What does this MR do and why?

This MR adds a date range filter to product analytics dashboards as described in Filters for Dashboards - Daterange (#377817 - closed) which does the following:

  • By default filters the dashboard results to the last 7 days.
  • Has a list of date range options, Last 30 days, Last 7 days, Today and Custom range.
  • Selecting Custom range shows the user a GlDaterangePicker to select a custom range (uses the last selected date range as the defaults).
  • Limits the maximum date range to 31 days for performance reasons, this still allows users to select a full calendar month.

Follow-up MR to sync to the selected date range with the URL and browser history state, Sync analytics dashboard filters with URL params (!111456 - merged).

Additional notes

  • This feature is pre-alpha and hidden behind a feature flag.
  • Since the dropdown contains a list of actions I will continue to use GlDropdown here as recommended by the component docs.

Screenshots or screen recordings

https://www.youtube.com/watch?v=p-7Ef_J_zDE

Before After
image image

How to set up and validate locally

Please follow the instructions at https://gitlab.com/gitlab-org/gitlab/-/snippets/2474959 to enable Product Analytics on your GDK.

With the Product Analytics feature enabled:

  1. Go to /gitlab-org/gitlab-shell/-/product_analytics/dashboards or any other instrumented project.
  2. Use the date range dropdown.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #377817 (closed)

Edited by Jiaan Louw

Merge request reports