VSD YAML Config - support filters
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
andDoraPerformersScore
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 |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
How to set up and validate locally
- Please make sure that you have a GitLab Ultimate license
- Enable the
group_analytics_dashboard_dynamic_vsd
anddora_performers_score_panel
feature flags$ Feature.enable(:group_analytics_dashboard_dynamic_vsd) $ Feature.enable(:dora_performers_score_panel)
- Create a group or select an existing one
- Seed group counts data
GROUP_ID=<group-id> FILTER=vsd_overview_counts SEED_VSD_COUNTS=1 bundle exec rake db:seed_f
- Add 2 project, one for YAML config and another for adding test data
- Add topics to your test data project (from the project page,
Settings > General > Topics
) - Seed Dora metrics for your test data project1.
PROJECT_ID=<project-id> SEED_DORA=1 FILTER=dora_metrics bundle exec rake db:seed_fu
- Seed DoraPerformersScore data for your test data project
- 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
- Navigate to
Analyze
>Analytics Dashboards
in the left hand menu - There will be 2 dashboards available in the dashboard list (Value Streams Dashboard + Your custom YAML dashboard)
- Select the custom dashboard
- Edit the YAML config, changing some of the filters
- Return to the custom dashboard and observe the changes
Related to #414494 (closed)
Edited by Ezekiel Kigbo