Add group-level lead time charts

This commit updates the group-level CI/CD Analytics page to include
DORA 4 lead time charts.

Changelog: added
EE: true

doc/user/analytics/ci_cd_analytics.md

@@ -84,4 +84,4 @@ processes.
 For time periods in which no merge requests were deployed, the charts render a
 red, dashed line.
 
-These charts are only available for projects.
+These charts are available for both groups and projects.

ee/app/assets/javascripts/analytics/group_ci_cd_analytics/components/app.vue

 <script>
 import { GlTabs, GlTab } from '@gitlab/ui';
 import DeploymentFrequencyCharts from 'ee/dora/components/deployment_frequency_charts.vue';
+import LeadTimeCharts from 'ee/dora/components/lead_time_charts.vue';
 import { mergeUrlParams, updateHistory, getParameterValues } from '~/lib/utils/url_utility';
 import { TABS } from '../constants';
 import ReleaseStatsCard from './release_stats_card.vue';
@@ -12,6 +13,7 @@ export default {
     GlTabs,
     GlTab,
     DeploymentFrequencyCharts,
+    LeadTimeCharts,
   },
   data() {
     return {
@@ -47,6 +49,9 @@ export default {
       <gl-tab :title="s__('CICDAnalytics|Deployment frequency')">
         <deployment-frequency-charts />
       </gl-tab>
+      <gl-tab :title="s__('CICDAnalytics|Lead time')">
+        <lead-time-charts />
+      </gl-tab>
     </gl-tabs>
   </div>
 </template>

ee/app/assets/javascripts/analytics/group_ci_cd_analytics/constants.js

 export const STAT_ERROR_PLACEHOLDER = '-';
 
-export const TABS = ['release-statistics', 'deployment-frequency'];
+export const TABS = ['release-statistics', 'deployment-frequency', 'lead-time'];

ee/spec/frontend/analytics/group_ci_cd_analytics/components/app_spec.js

@@ -3,6 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import CiCdAnalyticsApp from 'ee/analytics/group_ci_cd_analytics/components/app.vue';
 import ReleaseStatsCard from 'ee/analytics/group_ci_cd_analytics/components/release_stats_card.vue';
 import DeploymentFrequencyCharts from 'ee/dora/components/deployment_frequency_charts.vue';
+import LeadTimeCharts from 'ee/dora/components/lead_time_charts.vue';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import { getParameterValues } from '~/lib/utils/url_utility';
@@ -52,16 +53,27 @@ describe('ee/analytics/group_ci_cd_analytics/components/app.vue', () => {
       createComponent();
     });
 
-    it('renders the deployment frequency component inside the first tab', () => {
+    it('renders the deployment frequency component inside the second tab', () => {
       expect(findGlTabAtIndex(1).findComponent(DeploymentFrequencyCharts).exists()).toBe(true);
     });
   });
 
+  describe('lead time', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the lead time component inside the third tab', () => {
+      expect(findGlTabAtIndex(2).findComponent(LeadTimeCharts).exists()).toBe(true);
+    });
+  });
+
   describe('when provided with a query param', () => {
     it.each`
       tab                       | index
       ${'release-statistics'}   | ${'0'}
       ${'deployment-frequency'} | ${'1'}
+      ${'lead-time'}            | ${'2'}
       ${'fake'}                 | ${'0'}
       ${''}                     | ${'0'}
     `('shows the correct tab for URL parameter "$tab"', ({ tab, index }) => {

locale/gitlab.pot

@@ -5720,6 +5720,9 @@ msgstr ""
 msgid "CICDAnalytics|Deployment frequency"
 msgstr ""
 
+msgid "CICDAnalytics|Lead time"
+msgstr ""
+
 msgid "CICDAnalytics|Projects with releases"
 msgstr ""