Merge branch '461748-split-ai-impact' into 'master'

Split AI impact dashboard table into multiple panels

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/167057



Merged-by: Ezekiel Kigbo <3397881-ekigbo@users.noreply.gitlab.com>
Approved-by: Libor Vanc <5022246-lvanc@users.noreply.gitlab.com>
Approved-by: Ammar Alakkad <aalakkad@gitlab.com>
Approved-by: Ezekiel Kigbo <3397881-ekigbo@users.noreply.gitlab.com>
Reviewed-by: Alex Pennells <apennells@gitlab.com>
Co-authored-by: Alex Pennells <apennells@gitlab.com>

ee/app/assets/javascripts/analytics/analytics_dashboards/components/visualizations/ai_impact_table.vue

@@ -16,6 +16,12 @@ export default {
       required: true,
     },
   },
+  computed: {
+    excludeMetrics() {
+      const { filters: { excludeMetrics = [] } = {} } = this.data;
+      return excludeMetrics;
+    },
+  },
 };
 </script>
 <template>
@@ -30,6 +36,7 @@ export default {
       v-else
       :namespace="data.namespace"
       :is-project="isProject"
+      :exclude-metrics="excludeMetrics"
       @set-alerts="$emit('set-alerts', $event)"
     />
   </group-or-project-provider>

ee/app/assets/javascripts/analytics/dashboards/ai_impact/components/metric_table.vue

 <script>
+import { uniq } from 'lodash';
 import {
   GlTableLite,
   GlSkeletonLoader,
@@ -90,6 +91,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    excludeMetrics: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -109,10 +115,13 @@ export default {
           metrics: SUPPORTED_VULNERABILITY_METRICS,
           queryFn: this.fetchVulnerabilitiesMetricsQuery,
         },
-      ].filter(({ metrics }) => !this.areAllMetricsRestricted(metrics));
+      ].filter(({ metrics }) => !this.areAllMetricsSkipped(metrics));
     },
     restrictedMetrics() {
-      return getRestrictedTableMetrics(this.glAbilities);
+      return getRestrictedTableMetrics(this.excludeMetrics, this.glAbilities);
+    },
+    skippedMetrics() {
+      return uniq([...this.restrictedMetrics, ...this.excludeMetrics]);
     },
   },
   async mounted() {
@@ -130,11 +139,11 @@ export default {
     }
   },
   created() {
-    this.tableData = generateSkeletonTableData(this.restrictedMetrics);
+    this.tableData = generateSkeletonTableData(this.skippedMetrics);
   },
   methods: {
-    areAllMetricsRestricted(metrics) {
-      return metrics.every((metric) => this.restrictedMetrics.includes(metric));
+    areAllMetricsSkipped(metrics) {
+      return metrics.every((metric) => this.skippedMetrics.includes(metric));
     },
     rowAttributes({ metric: { identifier } }) {
@@ -290,7 +299,7 @@ export default {
   <gl-table-lite
     :fields="dashboardTableFields"
     :items="tableData"
-    table-class="gl-my-0"
+    table-class="gl-my-0 gl-table-fixed"
     :tbody-tr-attr="rowAttributes"
   >
     <template #head(change)="{ field: { label, description } }">

ee/app/assets/javascripts/analytics/dashboards/ai_impact/utils.js

@@ -66,21 +66,21 @@ export const generateTableColumns = (now) => [
   {
     key: 'metric',
     label: __('Metric'),
-    thClass: 'gl-w-2/10',
+    thClass: 'gl-w-3/20',
   },
   ...generateDateRanges(now),
   {
     key: 'change',
     label: sprintf(__('Change (%%)')),
     description: __('Past 6 Months'),
-    thClass: 'gl-w-1/10',
+    thClass: 'gl-w-3/20',
   },
   {
     key: 'chart',
     label: __('Trend'),
     start: nMonthsBefore(now, 6),
     end: now,
-    thClass: 'gl-w-1/20',
+    thClass: 'gl-w-1/10',
     tdClass: '!gl-py-2',
   },
 ];
@@ -209,17 +209,18 @@ export const calculateRate = ({ numerator, denominator }) => {
 /**
  * Determines the metrics that should not be rendered in the comparison table due to
- * lack of permissions.
+ * lack of permissions. The returned list will be mutually exclusive from the metrics
+ * already excluded from the table (`exludeMetrics`)
  *
+ * @param {Array} excludeMetrics List of metric identifiers that are already removed
  * @param {Permissions}
  * @returns {Array} The metrics restricted due to lack of permissions
  */
-export const getRestrictedTableMetrics = ({
-  readDora4Analytics,
-  readCycleAnalytics,
-  readSecurityResource,
-}) =>
-  [
+export const getRestrictedTableMetrics = (
+  excludeMetrics,
+  { readDora4Analytics, readCycleAnalytics, readSecurityResource },
+) => {
+  const restricted = [
     [SUPPORTED_DORA_METRICS, readDora4Analytics],
     [SUPPORTED_FLOW_METRICS, readCycleAnalytics],
     [SUPPORTED_VULNERABILITY_METRICS, readSecurityResource],
@@ -227,6 +228,11 @@ export const getRestrictedTableMetrics = ({
     return isAllowed ? restrictedMetrics : [...restrictedMetrics, ...metrics];
   }, []);
+  // Excluded/restricted metric sets should be mutually exclusive,
+  // so we need to remove any overlap.
+  return restricted.filter((metric) => !excludeMetrics.includes(metric));
+};
+
 /**
  * @typedef {Array<String>} MetricIds
  */

ee/lib/gitlab/analytics/ai_impact_dashboard/dashboard.yaml

@@ -27,7 +27,7 @@ panels:
       width: 4
       height: 1
     options: {}
-  - title: 'Metric trends for %{namespaceType}: %{namespaceName}'
+  - title: 'Lifecycle metrics: %{namespaceName} (%{namespaceType})'
     visualization: ai_impact_table
     gridAttributes:
       yPos: 1
@@ -35,3 +35,23 @@ panels:
       width: 12
       height: 4
     options: {}
+    queryOverrides:
+      filters:
+        excludeMetrics:
+          - code_suggestions_usage_rate
+  - title: 'AI usage metrics: %{namespaceName} (%{namespaceType})'
+    visualization: ai_impact_table
+    gridAttributes:
+      yPos: 5
+      xPos: 0
+      width: 12
+      height: 2
+    options: {}
+    queryOverrides:
+      filters:
+        excludeMetrics:
+          - cycle_time
+          - lead_time
+          - deployment_frequency
+          - change_failure_rate
+          - vulnerability_critical

ee/spec/frontend/analytics/analytics_dashboards/components/visualizations/ai_impact_table_spec.js

@@ -17,6 +17,8 @@ describe('AI Impact Table Visualization', () => {
   const namespace = 'Klaptrap';
   const title = `Metric trends for group: ${namespace}`;
+  const excludeMetrics = ['thing1', 'thing2'];
+  const filters = { excludeMetrics };
   const createWrapper = () => {
     wrapper = shallowMountExtended(AiImpactTable, {
@@ -24,7 +26,7 @@ describe('AI Impact Table Visualization', () => {
         [GetGroupOrProjectQuery, mockGroupOrProjectRequestHandler],
       ]),
       propsData: {
-        data: { namespace, title },
+        data: { namespace, title, filters },
       },
       stubs: { GroupOrProjectProvider },
     });
@@ -73,6 +75,7 @@ describe('AI Impact Table Visualization', () => {
     it('renders the metric table', () => {
       expect(findMetricTable().props()).toMatchObject({
         namespace,
+        excludeMetrics,
         isProject: false,
       });
     });

ee/spec/frontend/analytics/dashboards/ai_impact/__snapshots__/utils_spec.js.snap

@@ -193,7 +193,7 @@ exports[`AI impact Dashboard utils generateTableColumns returns the expected tab
   {
     "key": "metric",
     "label": "Metric",
-    "thClass": "gl-w-2/10",
+    "thClass": "gl-w-3/20",
   },
   {
     "end": 2019-10-31T23:59:59.000Z,
@@ -241,7 +241,7 @@ exports[`AI impact Dashboard utils generateTableColumns returns the expected tab
     "description": "Past 6 Months",
     "key": "change",
     "label": "Change (%)",
-    "thClass": "gl-w-1/10",
+    "thClass": "gl-w-3/20",
   },
   {
     "end": 2020-03-31T00:00:00.000Z,
@@ -249,7 +249,7 @@ exports[`AI impact Dashboard utils generateTableColumns returns the expected tab
     "label": "Trend",
     "start": 2019-10-01T00:00:00.000Z,
     "tdClass": "!gl-py-2",
-    "thClass": "gl-w-1/20",
+    "thClass": "gl-w-1/10",
   },
 ]
 `;
@@ -259,7 +259,7 @@ exports[`AI impact Dashboard utils generateTableColumns returns the expected tab
   {
     "key": "metric",
     "label": "Metric",
-    "thClass": "gl-w-2/10",
+    "thClass": "gl-w-3/20",
   },
   {
     "end": 2021-02-28T23:59:59.000Z,
@@ -307,7 +307,7 @@ exports[`AI impact Dashboard utils generateTableColumns returns the expected tab
     "description": "Past 6 Months",
     "key": "change",
     "label": "Change (%)",
-    "thClass": "gl-w-1/10",
+    "thClass": "gl-w-3/20",
   },
   {
     "end": 2021-07-01T00:00:00.000Z,
@@ -315,7 +315,7 @@ exports[`AI impact Dashboard utils generateTableColumns returns the expected tab
     "label": "Trend",
     "start": 2021-01-01T00:00:00.000Z,
     "tdClass": "!gl-py-2",
-    "thClass": "gl-w-1/20",
+    "thClass": "gl-w-1/10",
   },
 ]
 `;
@@ -325,7 +325,7 @@ exports[`AI impact Dashboard utils generateTableColumns returns the expected tab
   {
     "key": "metric",
     "label": "Metric",
-    "thClass": "gl-w-2/10",
+    "thClass": "gl-w-3/20",
   },
   {
     "end": 2020-10-31T23:59:59.000Z,
@@ -373,7 +373,7 @@ exports[`AI impact Dashboard utils generateTableColumns returns the expected tab
     "description": "Past 6 Months",
     "key": "change",
     "label": "Change (%)",
-    "thClass": "gl-w-1/10",
+    "thClass": "gl-w-3/20",
   },
   {
     "end": 2021-03-31T00:00:00.000Z,
@@ -381,7 +381,7 @@ exports[`AI impact Dashboard utils generateTableColumns returns the expected tab
     "label": "Trend",
     "start": 2020-10-01T00:00:00.000Z,
     "tdClass": "!gl-py-2",
-    "thClass": "gl-w-1/20",
+    "thClass": "gl-w-1/10",
   },
 ]
 `;

ee/spec/frontend/analytics/dashboards/ai_impact/components/metric_table_spec.js

@@ -21,6 +21,12 @@ import DoraMetricsQuery from 'ee/analytics/dashboards/ai_impact/graphql/dora_met
 import VulnerabilitiesQuery from 'ee/analytics/dashboards/ai_impact/graphql/vulnerabilities.query.graphql';
 import AiCodeContributorsMetricsQuery from 'ee/analytics/dashboards/ai_impact/graphql/ai_code_contributors_metrics.query.graphql';
 import MetricTable from 'ee/analytics/dashboards/ai_impact/components/metric_table.vue';
+import {
+  SUPPORTED_FLOW_METRICS,
+  SUPPORTED_DORA_METRICS,
+  SUPPORTED_VULNERABILITY_METRICS,
+  SUPPORTED_AI_METRICS,
+} from 'ee/analytics/dashboards/ai_impact/constants';
 import MetricTableCell from 'ee/analytics/dashboards/components/metric_table_cell.vue';
 import TrendIndicator from 'ee/analytics/dashboards/components/trend_indicator.vue';
 import { setLanguage } from 'jest/__helpers__/locale_helper';
@@ -356,6 +362,77 @@ describe('Metric table', () => {
     });
   });
+  describe('excludeMetrics set', () => {
+    const flowMetricsRequest = jest.fn().mockImplementation(() => Promise.resolve());
+    const doraMetricsRequest = jest.fn().mockImplementation(() => Promise.resolve());
+    const vulnerabilityMetricsRequest = jest.fn().mockImplementation(() => Promise.resolve());
+    const aiMetricsRequest = jest.fn().mockImplementation(() => Promise.resolve());
+    let apolloProvider;
+
+    beforeEach(() => {
+      apolloProvider = createMockApolloProvider({
+        flowMetricsRequest,
+        doraMetricsRequest,
+        vulnerabilityMetricsRequest,
+        aiMetricsRequest,
+      });
+    });
+
+    describe.each([
+      {
+        group: 'DORA metrics',
+        excludeMetrics: SUPPORTED_DORA_METRICS,
+        testIds: [deploymentFrequencyTestId, changeFailureRateTestId],
+        apiRequest: doraMetricsRequest,
+      },
+      {
+        group: 'Flow metrics',
+        excludeMetrics: SUPPORTED_FLOW_METRICS,
+        testIds: [cycleTimeTestId, leadTimeTestId],
+        apiRequest: flowMetricsRequest,
+      },
+      {
+        group: 'Vulnerability metrics',
+        excludeMetrics: SUPPORTED_VULNERABILITY_METRICS,
+        testIds: [vulnerabilityCriticalTestId],
+        apiRequest: vulnerabilityMetricsRequest,
+      },
+      {
+        group: 'AI metrics',
+        excludeMetrics: SUPPORTED_AI_METRICS,
+        testIds: [codeSuggestionsUsageRateTestId],
+        apiRequest: aiMetricsRequest,
+      },
+    ])('for $group', ({ excludeMetrics, testIds, apiRequest }) => {
+      describe('when all metrics excluded', () => {
+        beforeEach(() => {
+          return createWrapper({ apolloProvider, props: { excludeMetrics } });
+        });
+
+        it.each(testIds)('does not render `%s`', (id) => {
+          expect(findTableRow(id).exists()).toBe(false);
+        });
+
+        it('does not send a request', () => {
+          expect(apiRequest).not.toHaveBeenCalled();
+        });
+      });
+
+      describe('when almost all metrics excluded', () => {
+        beforeEach(() => {
+          return createWrapper({
+            apolloProvider,
+            props: { excludeMetrics: excludeMetrics.slice(1) },
+          });
+        });
+
+        it('requests metrics', () => {
+          expect(apiRequest).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+
   describe('i18n', () => {
     describe.each`
       language   | formattedValue

ee/spec/frontend/analytics/dashboards/ai_impact/utils_spec.js

@@ -95,17 +95,26 @@ describe('AI impact Dashboard utils', () => {
   describe('getRestrictedTableMetrics', () => {
     it('restricts DORA metrics when the permission is disabled', () => {
       const permissions = { readCycleAnalytics: true, readSecurityResource: true };
-      expect(getRestrictedTableMetrics(permissions)).toEqual(SUPPORTED_DORA_METRICS);
+      expect(getRestrictedTableMetrics([], permissions)).toEqual(SUPPORTED_DORA_METRICS);
     });
     it('restricts flow metrics when the permission is disabled', () => {
       const permissions = { readDora4Analytics: true, readSecurityResource: true };
-      expect(getRestrictedTableMetrics(permissions)).toEqual(SUPPORTED_FLOW_METRICS);
+      expect(getRestrictedTableMetrics([], permissions)).toEqual(SUPPORTED_FLOW_METRICS);
     });
     it('restricts vulnerability metrics when the permission is disabled', () => {
       const permissions = { readDora4Analytics: true, readCycleAnalytics: true };
-      expect(getRestrictedTableMetrics(permissions)).toEqual(SUPPORTED_VULNERABILITY_METRICS);
+      expect(getRestrictedTableMetrics([], permissions)).toEqual(SUPPORTED_VULNERABILITY_METRICS);
+    });
+
+    it('does not restrict metrics that are already excluded', () => {
+      const excludeMetrics = SUPPORTED_DORA_METRICS.slice(1);
+      expect(getRestrictedTableMetrics(excludeMetrics, {})).toEqual([
+        SUPPORTED_DORA_METRICS[0],
+        ...SUPPORTED_FLOW_METRICS,
+        ...SUPPORTED_VULNERABILITY_METRICS,
+      ]);
     });
   });

ee/spec/requests/api/graphql/product_analytics/visualizations_spec.rb

@@ -68,7 +68,7 @@
         0 | 'SingleStat' | 'Code Suggestions: Unique users'
         1 | 'SingleStat' | 'Code Suggestions: Acceptance rate'
         2 | 'SingleStat' | 'Duo Chat: Unique users'
-        3 | 'AiImpactTable' | 'Metric trends for %{namespaceType}: %{namespaceName}'
+        3 | 'AiImpactTable' | 'Lifecycle metrics: %{namespaceName} (%{namespaceType})'
       end
       with_them do