Skip to content

Create new analytics dashboards app

Robert Hunt requested to merge 388557-create-new-blank-analytics-dashboards-structure into master

What does this MR do and why?

This MR continues the process of moving the product analytics dashboards across from /-/product_analytics/dashboards to /-/analytics/dashboards. There are several MRs which progressively move parts over to make it easier to review:

MR/Issue Purpose Status
Add new analytics dashboards listing route and ... (!112321 - merged) Create new route and view Merged
Create new analytics dashboards app (!112196 - merged) Move basic structure 👈 You are here
Add product analytics specific dashboards to sh... (!112298 - merged) Move product analytics specific dashboards and visualizations In dev
Move visualization designer and rename from panel designer In dev
Update menu item to point to the shared dashboards listing In dev
Present call-to-actions to configure dashboards... (#388629 - closed) Add new onboarding flow for product analytics dashboards in the list Scheduled
Remove product analytics specific dashboard lis... (#390551 - closed) Remove old product analytics dashboards code Scheduled

This specific MR moves over the general structure from https://gitlab.com/gitlab-org/gitlab/tree/master/ee/app/assets/javascripts/product_analytics/dashboards but excludes product analytics specific content.

Specifically the following changes were made:

  • Moves dashboard listing component and generalises the components name
  • Adds new features injected prop which determines whether the product analytics dashboards should be shown based upon feature flags, user permissions, correct settings.
  • Wraps the instrumentation details button in an injected prop check as this is specific to product analytics and we are moving the feature to a separate location: Determine where to put the instrumentation deta... (#390109 - closed)
  • Updates the list of static dashboards to be categorised by feature so we can toggle them on and off
  • Updates the i18n strings to use the Analytics namespace because the shared listing is for all analytics not just ProductAnalytics
  • Moved the dashboards listing app and updated it to use the new shared listing component
  • Creates a mount script which accepts a HTML ID and App component, the script wraps what happened with the old listings index.js so both the old and new listings can make use of it
  • Moved the router script
  • Updates both listing pages JS to use the new mount script
  • Added a static features list to the old listings HAML (also corrected the HAML files extension)
  • Updated the feature spec and unit specs to test the new listing

Screenshots or screen recordings

Product Analytics listing before Product Analytics listing after Shared listing
image image image

How to set up and validate locally

  1. Visit the projects shared dashboards listing e.g. http://gdk.test:3000/gitlab-org/gitlab-test/-/analytics/dashboards
  2. Validate that the page is rendered with a blank list

To test the product analytics dashboard items are shown, you will need to follow the instructions at https://gitlab.com/gitlab-org/gitlab/-/snippets/2474959 to enable Product Analytics on your GDK.

  1. Visit the projects shared dashboards listing e.g. http://gdk.test:3000/gitlab-org/gitlab-test/-/analytics/dashboards
  2. Validate that the page is rendered with a list of product analytics dashboards
  3. Visit the projects old product analytics dashboards listing e.g. http://gdk.test:3000/gitlab-org/gitlab-test/-/product_analytics/dashboards
  4. Validate that the page is rendered with a list of product analytics dashboards

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 #388557 (closed)

Edited by Robert Hunt

Merge request reports