Skip to content

Extend AnalyticsDashboards to render group level VSD

Ezekiel Kigbo requested to merge ek-poc-render-vsd-as-dashboard into master

What does this MR do and why?

This MR:

  • Renders the Value streams Dashboard as a customizable dashboard when the group_analytics_dashbaords feature flag is enabled
  • Extends analytics_dashboard.vue to query for group namespaces as well as project namespaces
  • Extends analytics_dashboard.vue to accept an existing dashboard configuration via the customDashboardsProjectConfiguration property
  • Renames value_stream_dashboard.yaml -> value_streams_dashboard.yaml as the built-in YAML config name needs to match the slug name thats used in the URLs. We already use value_streams_dashboard as the slug

Note: the dora performers score panel is currently not supported as a visualization.

Related to #415754 (closed)

This renders VSD using customizable dashboards in various ways:

  • Render group VSD without YAML config
  • Render group VSD with YAML config
  • Render project VSD without YAML config
  • Render project VSD with YAML config

How to set up and validate locally

Setup - seeding data

Enable the combined_analytics_dashboards feature flags in the rails console

Feature.enable(:combined_analytics_dashboards)
  1. Create a group
  2. Create 2 projects in the group
    • One project will be used to store a YAML config
    • The other project should be used to Seed DORA metrics data
  3. Seed DORA metrics data for the selected project
  4. Create a value stream for the project with seeded data

Without the group dashboard listing

Before After
Screenshot_2023-08-24_at_4.09.51_pm Screenshot_2023-08-24_at_4.05.47_pm
  1. Navigate to Value Stream Analytics for the seeded project
  2. Click the Value Streams Dashboard | DORA link from the Value stream page
    • The link will take you to the group VSD page, with the project path appended as a query parameter
    • The value stream dashboard will load with 2 tables (top table for the current group, bottom for the project)
    • The DORA performers chart will also render
  3. Visit the group page http://<gdk>/groups/<group-path>
  4. From the left sidebar, click the Analyze > Analytics Dashboards link
    • The link will take you to the group VSD page, with no query parameter
    • The value stream dashboard will load with 1 table for the group data
    • The DORA performers chart will also render

With group level dashboard listing - no YAML config

Before After
Screenshot_2023-08-24_at_4.37.09_pm Screenshot_2023-08-24_at_4.41.15_pm

Enable the group_analytics_dashboards feature flag in the rails console

Feature.enable(:group_analytics_dashboards)
  1. From the left sidebar, click the Analyze > Application analytics link (Not Analytics dashboards)
  2. The group dashboard list should appear, select Value Stream Dashboard (should be the only option)
    • The page should render the same as the previous section
  3. Navigate to Value Stream Analytics for the seeded project
  4. Click the Value Streams Dashboard | DORA link from the Value stream page
    • The page should render the same as the previous section

With a YAML config

Before After
Screenshot_2023-08-24_at_5.24.52_pm Screenshot_2023-08-24_at_5.13.53_pm

We will use the empty project we created in the setup section to host the YAML config, we will then point the group / to this empty project to read the configuration.

  1. Create a YAML config in the empty project
    • For now, we need to support both the data and queryOverrides fields (see the example linked below)
    • Give a custom title that you will recognize
    • Update each entry under panels include an id (increment for each panel), visualization and the gridAttributes fields (add 6 to the yPos for each subsequent panel, for example:
panels:
  - id: 1
    title: ...
    data: ...
    visualization: dora_chart
    gridAttributes:
      yPos: 1
      xPos: 0
      width: 12
      height: 6
  - id: 2
    title: ...
    data: ...
    visualization: dora_chart
    gridAttributes:
      yPos: 7
      xPos: 0
      width: 12
      height: 6
  1. From the left sidebar, click the Analyze > Application analytics link (Not Analytics dashboards)
  2. The group dashboard list should appear, select Value Stream Dashboard (should be the only option)
    • The page should render according to the YAML config
  3. Make changes to the YAML file and observe
Example YAML config
panels:
  # Example project config
  - id: 1
    title: 'My Custom Project'
    visualization: dora_chart
    gridAttributes:
      yPos: 1
      xPos: 0
      width: 12
      height: 6
    data:
      namespace: vsd-config-test/dora-project    
  # Example group config
  - id: 2
    title: "cool title!"
    visualization: dora_chart
    gridAttributes:
      yPos: 7
      xPos: 0
      width: 12
      height: 6
    data:
      namespace: vsd-config-test
    queryOverrides:
      namespace: 
        requestPath: vsd-config-test
        isProject: false
      filter_labels:
        - in_development
        - in_review

MR acceptance checklist

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

Edited by Ezekiel Kigbo

Merge request reports