Add group-level deployment frequency charts

This commit updates the group-level CI/CD Analytics page to include
deployment frequency statistics.

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 { mergeUrlParams, updateHistory, getParameterValues } from '~/lib/utils/url_utility';
 import { TABS } from '../constants';
 import ReleaseStatsCard from './release_stats_card.vue';
@@ -10,6 +11,7 @@ export default {
     ReleaseStatsCard,
     GlTabs,
     GlTab,
+    DeploymentFrequencyCharts,
   },
   data() {
     return {
@@ -42,6 +44,9 @@ export default {
       <gl-tab :title="s__('CICDAnalytics|Release statistics')">
         <release-stats-card class="gl-mt-5" />
       </gl-tab>
+      <gl-tab :title="s__('CICDAnalytics|Deployment frequency')">
+        <deployment-frequency-charts />
+      </gl-tab>
     </gl-tabs>
   </div>
 </template>

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

@@ -12,7 +12,7 @@ export default {
     GlSkeletonLoader,
   },
   inject: {
-    fullPath: {
+    groupPath: {
       default: '',
     },
   },
@@ -21,7 +21,7 @@ export default {
       query: groupReleaseStatsQuery,
       variables() {
         return {
-          fullPath: this.fullPath,
+          fullPath: this.groupPath,
         };
       },
       update(data) {

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

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

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

@@ -20,7 +20,7 @@ export default () => {
     el,
     apolloProvider,
     provide: {
-      fullPath,
+      groupPath: fullPath,
     },
     render: (createElement) => createElement(CiCdAnalyticsApp),
   });

ee/changelogs/unreleased/nfriend-add-group-level-deployment-frequency-graph.yml

+---
+title: Add group-level deployment frequency charts
+merge_request: 61053
+author:
+type: added

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

@@ -2,6 +2,7 @@ import { GlTabs, GlTab } from '@gitlab/ui';
 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 setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import { getParameterValues } from '~/lib/utils/url_utility';
@@ -32,6 +33,7 @@ describe('ee/analytics/group_ci_cd_analytics/components/app.vue', () => {
       expect(findGlTabs().exists()).toBe(true);
 
       expect(findGlTabAtIndex(0).attributes('title')).toBe('Release statistics');
+      expect(findGlTabAtIndex(1).attributes('title')).toBe('Deployment frequency');
     });
   });
 
@@ -41,16 +43,27 @@ describe('ee/analytics/group_ci_cd_analytics/components/app.vue', () => {
     });
 
     it('renders the release statistics component inside the first tab', () => {
-      expect(findGlTabAtIndex(0).find(ReleaseStatsCard).exists()).toBe(true);
+      expect(findGlTabAtIndex(0).findComponent(ReleaseStatsCard).exists()).toBe(true);
+    });
+  });
+
+  describe('deployment frequency', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the deployment frequency component inside the first tab', () => {
+      expect(findGlTabAtIndex(1).findComponent(DeploymentFrequencyCharts).exists()).toBe(true);
     });
   });
 
   describe('when provided with a query param', () => {
     it.each`
-      tab                     | index
-      ${'release-statistics'} | ${'0'}
-      ${'fake'}               | ${'0'}
-      ${''}                   | ${'0'}
+      tab                       | index
+      ${'release-statistics'}   | ${'0'}
+      ${'deployment-frequency'} | ${'1'}
+      ${'fake'}                 | ${'0'}
+      ${''}                     | ${'0'}
     `('shows the correct tab for URL parameter "$tab"', ({ tab, index }) => {
       setWindowLocation(`${TEST_HOST}/groups/gitlab-org/gitlab/-/analytics/ci_cd?tab=${tab}`);
       getParameterValues.mockImplementation((name) => {

locale/gitlab.pot

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