Convert VSA "Stage time" line chart to scatter plot

What does this MR do and why?

As the second MR to address #367661 (closed), converts Value Stream Analytics's "Stage time" line chart to a scatter plot behind a new vsa_stage_time_scatter_chart feature flag. More specifically, it does the following:

• Replaces the current "Stage time" StageChart component with the recently added StageScatterChart component
• Implements a recursive query to fetch all paginated data from the ValueStreamStageMetrics.items object to offer a comprehensive view what's occurring in the stage
• Updates StageScatterChart to display chart as data is being paginated
• Only fetches all duration data from original REST endpoint when on Overview stage and feature flag is enabled

Remaining tasks

Task	MR	Status
Apply filtered search bar filters to scatter chart	!190423 (merged)	🚧

References

• #367661 (closed)

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Please make sure that you're on the GitLab Ultimate plan.
2. Feature.enable(:vsa_stage_time_scatter_chart)
3. Visit any group/project that has VSA data or follow these steps:
   1. run FILTER=customizable_cycle_analytics SEED_CUSTOMIZABLE_CYCLE_ANALYTICS=1 bundle exec rake db:seed_fu
      1. To test pagination, apply the patch below (optionally, increase values to further test performance) and re-run the script above (it can take some time 🕙)
   2. Visit the group/project value stream. The URL is present in the output of the command above.
4. Select any stage in the path navigation
5. Verify that the scatter chart renders correctly

Seeder patch

Diff

diff --git a/ee/db/fixtures/development/30_customizable_cycle_analytics.rb b/ee/db/fixtures/development/30_customizable_cycle_analytics.rb
index 663f87988ae3fa..030b40441a5b45 100644
--- a/ee/db/fixtures/development/30_customizable_cycle_analytics.rb
+++ b/ee/db/fixtures/development/30_customizable_cycle_analytics.rb
@@ -22,8 +22,8 @@ class Gitlab::Seeder::CustomizableCycleAnalytics
 
   attr_reader :project, :group, :user, :organization
 
-  DAYS_BACK = 20
-  ISSUE_COUNT = 25
+  DAYS_BACK = 100
+  ISSUE_COUNT = 300
   MERGE_REQUEST_COUNT = 10
   GROUP_LABEL_COUNT = 10
 
@@ -138,13 +138,13 @@ def seed_issue_based_stages!
     end
 
     # issues closed
-    issues.pop(3).each do |issue|
+    issues.pop(100).each do |issue|
       travel_to(get_date_after(issue.created_at))
       issue.close!
     end
 
     # issue first mentioned in commit and closed
-    issues.pop(8).each do |issue|
+    issues.pop(100).each do |issue|
       travel_to(get_date_after(issue.created_at))
       issue.metrics.update!(first_mentioned_in_commit_at: Time.now)
       travel_to(get_date_after(issue.metrics.first_mentioned_in_commit_at))
@@ -153,7 +153,7 @@ def seed_issue_based_stages!
   end
 
   def seed_issue_label_based_stages!
-    issues.pop(7).each do |issue|
+    issues.pop(100).each do |issue|
       travel_to(get_date_after(issue.created_at))
       Issues::UpdateService.new(
         container: project,

MR acceptance checklist

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

Related to #367661 (closed)