Skip to content

VSD YAML Config - support filters

Ezekiel Kigbo requested to merge 414494-support-filters-from-vsd-config into master

What does this MR do and why?

This MR introduces a filters key to the VSD YAML schema config, the key can be used to specify visualization specific filters that are available, these will then be applied to the API requests and displayed in the panel.

This MR:

  • Adds filter support for the UsageOverview and DoraPerformersScore components
  • Adds a FilterableComparisonChart component to extract the comparison chart filter and display the filters in the UI

Follow ups

  • Add documentation for the filters that each visualization supports
  • Add example config with filters applied
  • UX of the available panel filters UI

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before - filters are ignored After - filters work! After - Performers score After - error fetching labels
Screenshot_2024-03-08_at_01.11.42 Screenshot_2024-03-19_at_12.49.41 Screenshot_2024-03-08_at_16.40.19 Screenshot_2024-03-19_at_12.56.39

How to set up and validate locally

  • Please make sure that you have a GitLab Ultimate license
  • Enable the group_analytics_dashboard_dynamic_vsd and dora_performers_score_panel feature flags
    $ Feature.enable(:group_analytics_dashboard_dynamic_vsd)
    $ Feature.enable(:dora_performers_score_panel)
  1. Create a group or select an existing one
  2. Seed group counts data
    GROUP_ID=<group-id> FILTER=vsd_overview_counts SEED_VSD_COUNTS=1 bundle exec rake db:seed_f
  3. Add 2 project, one for YAML config and another for adding test data
  4. Add topics to your test data project (from the project page, Settings > General > Topics)
  5. Seed Dora metrics for your test data project1.
    PROJECT_ID=<project-id> SEED_DORA=1 FILTER=dora_metrics bundle exec rake db:seed_fu
  6. Seed DoraPerformersScore data for your test data project
  7. Follow the instructions to add a YAML configuration for the group, you can use the example below as a guide

Example config

title: 'Custom Dashboard - test vsd'
description: 'Custom description'
panels:
  - title: 'Group usage'
    visualization: usage_overview
    queryOverrides:
      namespace: vsd-schema-test-group
      filters:
        include:
          - groups
          - projects
          - issues
    gridAttributes:
      xPos: 0
      yPos: 1
      height: 1
      width: 12
  - title: 'Group - dora / key metrics'
    visualization: dora_chart
    queryOverrides:
      namespace: vsd-schema-test-group
      filters:      
        labels:
          - bug
          - confirmed
        exclude_metrics:
          - lead_time
          - cycle_time
    gridAttributes:
      xPos: 0
      yPos: 4
      height: 6
      width: 12
  - title: "performers score"
    visualization: dora_performers_score
    queryOverrides:
      namespace: gitlab-org
      filters:      
        filter_project_topics:
          - javascript
          - ruby
          - nodejs
    gridAttributes:
      xPos: 0
      yPos: 10
      height: 6
      width: 12     
  1. Navigate to Analyze > Analytics Dashboards in the left hand menu
  2. There will be 2 dashboards available in the dashboard list (Value Streams Dashboard + Your custom YAML dashboard)
  3. Select the custom dashboard
  4. Edit the YAML config, changing some of the filters
  5. Return to the custom dashboard and observe the changes

Related to #414494 (closed)

Edited by Ezekiel Kigbo

Merge request reports