Improve Project CI/CD analytics page: Add feature flag, render new blank component

What does this MR do and why?

We want to improve the project CI/CD analytics page, and the acceptance criteria for the redesign includes changing everything inside of the Pipelines tab: the title, the single stats, the way you select a time range, the graphs, etc. This MR sets up a feature flag and a new component where we can build a new and improved page to replace the existing one.

Add feature flag, render new component

Add pipeline_charts_new.vue component
When ci_improved_project_pipeline_analytics is enabled,
render it instead of pipeline_charts.vue

🔗 See also: proof-of-concept merge requests for graphs that we want to improve:

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.

Feature flag status Before After
disabled Screenshot_2024-10-01_at_18.17.52 Screenshot_2024-10-01_at_18.17.52
enabled Screenshot_2024-10-01_at_18.17.52 Screenshot_2024-10-01_at_18.17.18

How to set up and validate locally

  1. git checkout master
  2. navigate to a project with a pipeline that has run at least once
  3. in the sidebar, choose Analyze => CI/CD Analytics
  4. check that stats and graphs are shown for the project's pipeline
  5. git checkout 444468-scaffold-new-charts-component and refresh
  6. check that nothing changed
  7. echo "Feature.enable(:ci_improved_project_pipeline_analytics)" | gdk rails c and refresh
  8. the new component should render instead, showing just an h2 that says Pipelines (to match the name of the tab above it)

to run tests

yarn install && yarn jest spec/frontend/projects/pipelines/charts/components/app_spec.js
bundle install && bundle exec rspec spec/features/projects/graph_spec.rb

Related to #444468 (closed)

Edited by Miranda Fluharty

Merge request reports

Loading