From c175894fb6730884927d44a2278a48f1f58a9e54 Mon Sep 17 00:00:00 2001
From: Rudy Crespo <rcrespo@gitlab.com>
Date: Tue, 23 May 2023 16:57:47 -0400
Subject: [PATCH 01/10] Adds "Closed issues" metric to VSD comparison table

---
 .../javascripts/analytics/shared/constants.js |  23 ++-
 doc/user/analytics/value_streams_dashboard.md |   1 +
 .../components/comparison_table.vue           |  23 ++-
 .../analytics/dashboards/constants.js         |  19 ++-
 .../graphql/group_flow_metrics.query.graphql  |   3 +
 .../project_flow_metrics.query.graphql        |   3 +
 .../javascripts/analytics/dashboards/utils.js |  35 +++-
 .../frontend/analytics/dashboards/api_spec.js |   5 +-
 .../components/comparison_table_spec.js       |  80 ++++++++-
 .../analytics/dashboards/mock_data.js         | 158 +++++++++++++++++-
 .../analytics/dashboards/utils_spec.js        |   3 +
 locale/gitlab.pot                             |   9 +
 12 files changed, 336 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/analytics/shared/constants.js b/app/assets/javascripts/analytics/shared/constants.js
index e9d6d121e6d5e5..87c575406c4a7a 100644
--- a/app/assets/javascripts/analytics/shared/constants.js
+++ b/app/assets/javascripts/analytics/shared/constants.js
@@ -20,10 +20,13 @@ const formatDateParam = (d) => dateFormat(d, dateFormats.isoDate, true);
 
 export const METRIC_POPOVER_LABEL = s__('ValueStreamAnalytics|View details');
 
-export const KEY_METRICS = {
+export const ISSUES_COMPLETED_TYPE = 'issues_completed';
+
+export const FLOW_METRICS = {
   LEAD_TIME: 'lead_time',
   CYCLE_TIME: 'cycle_time',
   ISSUES: 'issues',
+  ISSUES_COMPLETED: ISSUES_COMPLETED_TYPE,
   COMMITS: 'commits',
   DEPLOYS: 'deploys',
 };
@@ -38,7 +41,7 @@ export const DORA_METRICS = {
 const VSA_FLOW_METRICS_GROUP = {
   key: 'key_metrics',
   title: s__('ValueStreamAnalytics|Key metrics'),
-  keys: Object.values(KEY_METRICS),
+  keys: Object.values(FLOW_METRICS),
 };
 
 export const VSA_METRICS_GROUPS = [VSA_FLOW_METRICS_GROUP];
@@ -90,7 +93,7 @@ export const METRIC_TOOLTIPS = {
     projectLink: '-/pipelines/charts?chart=change-failure-rate',
     docsLink: helpPagePath('user/analytics/dora_metrics', { anchor: 'change-failure-rate' }),
   },
-  [KEY_METRICS.LEAD_TIME]: {
+  [FLOW_METRICS.LEAD_TIME]: {
     description: s__('ValueStreamAnalytics|Median time from issue created to issue closed.'),
     groupLink: '-/analytics/value_stream_analytics',
     projectLink: '-/value_stream_analytics',
@@ -98,7 +101,7 @@ export const METRIC_TOOLTIPS = {
       anchor: 'view-the-lead-time-and-cycle-time-for-issues',
     }),
   },
-  [KEY_METRICS.CYCLE_TIME]: {
+  [FLOW_METRICS.CYCLE_TIME]: {
     description: s__(
       "ValueStreamAnalytics|Median time from the earliest commit of a linked issue's merge request to when that issue is closed.",
     ),
@@ -108,13 +111,21 @@ export const METRIC_TOOLTIPS = {
       anchor: 'view-the-lead-time-and-cycle-time-for-issues',
     }),
   },
-  [KEY_METRICS.ISSUES]: {
+  [FLOW_METRICS.ISSUES]: {
     description: s__('ValueStreamAnalytics|Number of new issues created.'),
     groupLink: '-/issues_analytics',
     projectLink: '-/analytics/issues_analytics',
     docsLink: helpPagePath('user/analytics/issue_analytics'),
   },
-  [KEY_METRICS.DEPLOYS]: {
+  [FLOW_METRICS.ISSUES_COMPLETED]: {
+    description: s__('ValueStreamAnalytics|Monthly number of issues closed.'),
+    groupLink: '-/analytics/value_stream_analytics',
+    projectLink: '-/value_stream_analytics',
+    docsLink: helpPagePath('user/analytics/value_streams_dashboard', {
+      anchor: 'dashboard-metrics-and-drill-down-reports',
+    }),
+  },
+  [FLOW_METRICS.DEPLOYS]: {
     description: s__('ValueStreamAnalytics|Total number of deploys to production.'),
     groupLink: '-/analytics/productivity_analytics',
     projectLink: '-/analytics/merge_request_analytics',
diff --git a/doc/user/analytics/value_streams_dashboard.md b/doc/user/analytics/value_streams_dashboard.md
index 1a58679cfc020c..ff2ca33ed7393b 100644
--- a/doc/user/analytics/value_streams_dashboard.md
+++ b/doc/user/analytics/value_streams_dashboard.md
@@ -147,6 +147,7 @@ panels:
 | Lead time | Median time from issue created to issue closed. | [Value Stream Analytics](https://gitlab.com/groups/gitlab-org/-/analytics/value_stream_analytics) | [View the lead time and cycle time for issues](../group/value_stream_analytics/index.md#key-metrics) | `lead_time` |
 | Cycle time | Median time from the earliest commit of a linked issue's merge request to when that issue is closed. | [VSA overview](https://gitlab.com/groups/gitlab-org/-/analytics/value_stream_analytics) | [View the lead time and cycle time for issues](../group/value_stream_analytics/index.md#key-metrics) | `cycle_time` |
 | New issues | Number of new issues created. | [Issue Analytics](https://gitlab.com/groups/gitlab-org/-/issues_analytics) | Issue analytics [for projects](issue_analytics.md) and [for groups](../../user/group/issues_analytics/index.md) | `issues` |
+| Closed issues | Monthly number of issues closed. | [Value Stream Analytics](https://gitlab.com/groups/gitlab-org/-/analytics/value_stream_analytics) | [Value Stream Analytics](../group/value_stream_analytics/index.md)  | `issues_completed` |
 | Number of deploys | Total number of deploys to production. | [Merge Request Analytics](https://gitlab.com/gitlab-org/gitlab/-/analytics/merge_request_analytics) | [Merge request analytics](merge_request_analytics.md) | `deploys` |
 | Critical vulnerabilities over time | Critical vulnerabilities over time in project or group | [Vulnerability report](https://gitlab.com/gitlab-org/gitlab/-/security/vulnerability_report) | [Vulnerability report](../application_security/vulnerability_report/index.md) | `vulnerability_critical` |
 | High vulnerabilities over time | High vulnerabilities over time in project or group | [Vulnerability report](https://gitlab.com/gitlab-org/gitlab/-/security/vulnerability_report) | [Vulnerability report](../application_security/vulnerability_report/index.md) | `vulnerability_high` |
diff --git a/ee/app/assets/javascripts/analytics/dashboards/components/comparison_table.vue b/ee/app/assets/javascripts/analytics/dashboards/components/comparison_table.vue
index 1ab47fea0ce93b..698cf1ef925a52 100644
--- a/ee/app/assets/javascripts/analytics/dashboards/components/comparison_table.vue
+++ b/ee/app/assets/javascripts/analytics/dashboards/components/comparison_table.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlSkeletonLoader, GlTableLite } from '@gitlab/ui';
+import { GlSkeletonLoader, GlTableLite, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { GlSparklineChart } from '@gitlab/ui/dist/charts';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { CHART_GRADIENT, CHART_GRADIENT_INVERTED } from '../constants';
@@ -15,6 +15,10 @@ export default {
     GlSparklineChart,
     MetricTableCell,
     TrendIndicator,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     requestPath: {
@@ -61,9 +65,22 @@ export default {
       </template>
     </template>
 
-    <template #cell()="{ value: { value, change }, item: { invertTrendColor } }">
+    <template #cell()="{ value: { value, change, maxValueMessage }, item: { invertTrendColor } }">
       {{ value }}
-      <trend-indicator v-if="change" :change="change" :invert-color="invertTrendColor" />
+      <gl-icon
+        v-if="maxValueMessage"
+        v-gl-tooltip.hover
+        class="gl-text-blue-600"
+        name="information-o"
+        :title="maxValueMessage"
+        data-testid="metric_max_value_info_icon"
+      />
+      <trend-indicator
+        v-else-if="change"
+        :change="change"
+        :invert-color="invertTrendColor"
+        data-testid="metric_trend_indicator"
+      />
     </template>
 
     <template #cell(metric)="{ value: { identifier } }">
diff --git a/ee/app/assets/javascripts/analytics/dashboards/constants.js b/ee/app/assets/javascripts/analytics/dashboards/constants.js
index 2e56c7154e3cf8..b28b7fd7b80ab4 100644
--- a/ee/app/assets/javascripts/analytics/dashboards/constants.js
+++ b/ee/app/assets/javascripts/analytics/dashboards/constants.js
@@ -1,7 +1,7 @@
 import { s__, __ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import {
-  KEY_METRICS,
+  FLOW_METRICS,
   DORA_METRICS,
   VULNERABILITY_METRICS,
   MERGE_REQUEST_METRICS,
@@ -36,21 +36,30 @@ export const TABLE_METRICS = {
     invertTrendColor: true,
     units: UNITS.PERCENT,
   },
-  [KEY_METRICS.LEAD_TIME]: {
+  [FLOW_METRICS.LEAD_TIME]: {
     label: s__('DORA4Metrics|Lead time'),
     invertTrendColor: true,
     units: UNITS.DAYS,
   },
-  [KEY_METRICS.CYCLE_TIME]: {
+  [FLOW_METRICS.CYCLE_TIME]: {
     label: s__('DORA4Metrics|Cycle time'),
     invertTrendColor: true,
     units: UNITS.DAYS,
   },
-  [KEY_METRICS.ISSUES]: {
+  [FLOW_METRICS.ISSUES]: {
     label: s__('DORA4Metrics|New issues'),
     units: UNITS.COUNT,
   },
-  [KEY_METRICS.DEPLOYS]: {
+  [FLOW_METRICS.ISSUES_COMPLETED]: {
+    label: s__('DORA4Metrics|Closed issues'),
+    units: UNITS.COUNT,
+    maxValue: 10001,
+    maxValueMask: '10000+',
+    maxValueTooltip: s__(
+      'DORA4Metrics|Note: The calculated closed issues count is a lower-bound approximation. Your group has too many issues (or merge requests) which cannot be calculated real-time.',
+    ),
+  },
+  [FLOW_METRICS.DEPLOYS]: {
     label: s__('DORA4Metrics|Deploys'),
     units: UNITS.COUNT,
   },
diff --git a/ee/app/assets/javascripts/analytics/dashboards/graphql/group_flow_metrics.query.graphql b/ee/app/assets/javascripts/analytics/dashboards/graphql/group_flow_metrics.query.graphql
index 1d2c0ba4b92ec2..9e4637a33a26f4 100644
--- a/ee/app/assets/javascripts/analytics/dashboards/graphql/group_flow_metrics.query.graphql
+++ b/ee/app/assets/javascripts/analytics/dashboards/graphql/group_flow_metrics.query.graphql
@@ -7,6 +7,9 @@ query groupFlowMetricsQuery($fullPath: ID!, $startDate: Time!, $endDate: Time!)
       issues: issueCount(from: $startDate, to: $endDate) {
         ...FlowMetricItem
       }
+      issues_completed: issuesCompletedCount(from: $startDate, to: $endDate) {
+        ...FlowMetricItem
+      }
       cycle_time: cycleTime(from: $startDate, to: $endDate) {
         ...FlowMetricItem
       }
diff --git a/ee/app/assets/javascripts/analytics/dashboards/graphql/project_flow_metrics.query.graphql b/ee/app/assets/javascripts/analytics/dashboards/graphql/project_flow_metrics.query.graphql
index ed26e3a20871f6..1a0b3e0dfd0922 100644
--- a/ee/app/assets/javascripts/analytics/dashboards/graphql/project_flow_metrics.query.graphql
+++ b/ee/app/assets/javascripts/analytics/dashboards/graphql/project_flow_metrics.query.graphql
@@ -7,6 +7,9 @@ query projectFlowMetricsQuery($fullPath: ID!, $startDate: Time!, $endDate: Time!
       issues: issueCount(from: $startDate, to: $endDate) {
         ...FlowMetricItem
       }
+      issues_completed: issuesCompletedCount(from: $startDate, to: $endDate) {
+        ...FlowMetricItem
+      }
       cycle_time: cycleTime(from: $startDate, to: $endDate) {
         ...FlowMetricItem
       }
diff --git a/ee/app/assets/javascripts/analytics/dashboards/utils.js b/ee/app/assets/javascripts/analytics/dashboards/utils.js
index b9fa71a7bc2781..fd0de4c7376c1c 100644
--- a/ee/app/assets/javascripts/analytics/dashboards/utils.js
+++ b/ee/app/assets/javascripts/analytics/dashboards/utils.js
@@ -106,6 +106,9 @@ export const hasDoraMetricValues = (timePeriods) =>
  * @param {String} units - The type of units used for this metric (ex. days, /day, count)
  * @param {Boolean} invertTrendColor - Inverts the color indicator used for metric trends.
  * @param {Array} timePeriods - Array of the metrics for different time periods
+ * @param {Number} maxValue - Maximum value of the metric.
+ * @param {String} maxValueMask = Replaces the value of the metric if >= the maximum value.
+ * @param {String} maxValueTooltip - Tooltip that explains the reasoning behind the maximum value mask.
  * @returns {Object} The metric data formatted for the comparison table.
  */
 const buildMetricComparisonTableRow = ({
@@ -114,8 +117,17 @@ const buildMetricComparisonTableRow = ({
   units,
   invertTrendColor,
   timePeriods,
+  maxValue,
+  maxValueMask,
+  maxValueTooltip,
 }) => {
-  const data = { invertTrendColor, metric: { identifier, value: label } };
+  const data = {
+    invertTrendColor,
+    metric: { identifier, value: label },
+    maxValue,
+    maxValueMask,
+    maxValueTooltip,
+  };
   timePeriods.forEach((timePeriod, index) => {
     // The last timePeriod is not rendered, we just use it
     // to determine the % change for the 2nd last timePeriod
@@ -131,10 +143,15 @@ const buildMetricComparisonTableRow = ({
           previous: hasPreviousValue ? previous.value : 0,
         })
       : null;
+    const maxValueMessage =
+      hasCurrentValue && current.value >= maxValue ? maxValueTooltip : undefined;
+    const formattedMetric = hasCurrentValue ? formatMetric(current.value, units) : '-';
+    const value = maxValueMessage ? maxValueMask : formattedMetric;
 
     data[timePeriod.key] = {
-      value: hasCurrentValue ? formatMetric(current.value, units) : '-',
+      value,
       change,
+      maxValueMessage,
     };
   });
   return data;
@@ -151,8 +168,18 @@ const buildMetricComparisonTableRow = ({
 export const generateDoraTimePeriodComparisonTable = ({ timePeriods, excludeMetrics = [] }) =>
   Object.entries(TABLE_METRICS)
     .filter(([identifier]) => !excludeMetrics.includes(identifier))
-    .map(([identifier, { label, units, invertTrendColor }]) =>
-      buildMetricComparisonTableRow({ identifier, label, units, invertTrendColor, timePeriods }),
+    .map(
+      ([identifier, { label, units, invertTrendColor, maxValue, maxValueMask, maxValueTooltip }]) =>
+        buildMetricComparisonTableRow({
+          identifier,
+          label,
+          units,
+          invertTrendColor,
+          timePeriods,
+          maxValue,
+          maxValueMask,
+          maxValueTooltip,
+        }),
     );
 
 /**
diff --git a/ee/spec/frontend/analytics/dashboards/api_spec.js b/ee/spec/frontend/analytics/dashboards/api_spec.js
index e9676e49f90c07..db3edeb92ac071 100644
--- a/ee/spec/frontend/analytics/dashboards/api_spec.js
+++ b/ee/spec/frontend/analytics/dashboards/api_spec.js
@@ -5,6 +5,7 @@ import { HTTP_STATUS_NOT_FOUND, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import {
   VULNERABILITY_CRITICAL_TYPE,
   VULNERABILITY_HIGH_TYPE,
+  ISSUES_COMPLETED_TYPE,
   MERGE_REQUEST_THROUGHPUT_TYPE,
 } from '~/analytics/shared/constants';
 import {
@@ -96,6 +97,7 @@ describe('Analytics Dashboards api', () => {
         LEAD_TIME_METRIC_TYPE,
         CYCLE_TIME_METRIC_TYPE,
         ISSUES_METRIC_TYPE,
+        ISSUES_COMPLETED_TYPE,
         DEPLOYS_METRIC_TYPE,
         VULNERABILITY_CRITICAL_TYPE,
         VULNERABILITY_HIGH_TYPE,
@@ -170,12 +172,13 @@ describe('Analytics Dashboards api', () => {
       cycle_time: { identifier: 'cycle_time', value: '-' },
       deploys: { identifier: 'deploys', value: 751 },
       issues: { identifier: 'issues', value: 10 },
+      issues_completed: { identifier: 'issues_completed', value: 109 },
       lead_time: { identifier: 'lead_time', value: 10 },
     };
 
     it('returns each flow metric', () => {
       const keys = Object.keys(extractGraphqlFlowData(mockFlowMetricsResponseData));
-      expect(keys).toEqual(['lead_time', 'cycle_time', 'issues', 'deploys']);
+      expect(keys).toEqual(['lead_time', 'cycle_time', 'issues', 'issues_completed', 'deploys']);
     });
 
     it('replaces null values with `-`', () => {
diff --git a/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js b/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js
index 9bc82adc8373da..43f41740666318 100644
--- a/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js
+++ b/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js
@@ -1,4 +1,5 @@
 import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import {
   TABLE_METRICS,
   CHART_GRADIENT,
@@ -11,9 +12,13 @@ describe('Comparison table', () => {
   let wrapper;
 
   const now = new Date();
+  const mockMetric = { identifier: 'lead_time', value: 'Lead Time' };
 
   const createWrapper = (props = {}) => {
     wrapper = mountExtended(ComparisonTable, {
+      directives: {
+        GlTooltip: createMockDirective('gl-tooltip'),
+      },
       propsData: {
         tableData: mockComparativeTableData,
         requestPath: 'groups/test',
@@ -27,6 +32,8 @@ describe('Comparison table', () => {
   const findMetricTableCell = (identifier) => wrapper.findByTestId(`${identifier}_metric_cell`);
   const findChart = () => wrapper.findByTestId('metric_chart');
   const findChartSkeleton = () => wrapper.findByTestId('metric_chart_skeleton');
+  const findTrendIndicator = () => wrapper.findByTestId('metric_trend_indicator');
+  const findMaxValueInfoIcon = () => wrapper.findByTestId('metric_max_value_info_icon');
 
   it.each(Object.keys(TABLE_METRICS))('renders table cell for %s metric', (identifier) => {
     createWrapper();
@@ -34,9 +41,78 @@ describe('Comparison table', () => {
     expect(findMetricTableCell(identifier).props('identifier')).toBe(identifier);
   });
 
-  describe('sparkline chart', () => {
-    const mockMetric = { identifier: 'lead_time', value: 'Lead Time' };
+  describe('date range table cell', () => {
+    const mockMaxValueProps = {
+      maxValue: 10001,
+      maxValueMask: '10000+',
+      maxValueTooltip: 'The maximum value has been exceeded',
+    };
+
+    const mockTimePeriods = [
+      {
+        change: 0.25,
+        value: mockMaxValueProps.maxValueMask,
+        maxValueMessage: mockMaxValueProps.maxValueTooltip,
+      },
+      {
+        change: 0.6,
+        value: 8000,
+      },
+      {
+        change: 0,
+        value: 6000,
+      },
+    ];
+
+    describe.each`
+      description                                               | timePeriod            | shouldRenderTrendIndicator | shouldRenderMaxValueInfoIcon
+      ${'When value has exceeded maximum value'}                | ${mockTimePeriods[0]} | ${false}                   | ${true}
+      ${'When value has changed from previous month'}           | ${mockTimePeriods[1]} | ${true}                    | ${false}
+      ${'When value has not changed or exceeded maximum value'} | ${mockTimePeriods[2]} | ${false}                   | ${false}
+    `(
+      '$description',
+      ({ timePeriod, shouldRenderTrendIndicator, shouldRenderMaxValueInfoIcon }) => {
+        beforeEach(() => {
+          createWrapper({
+            tableData: [
+              {
+                metric: mockMetric,
+                ...mockMaxValueProps,
+                thisMonth: timePeriod,
+              },
+            ],
+          });
+        });
+
+        it('displays correct value', () => {
+          const value = timePeriod.value.toString();
 
+          expect(wrapper.findByText(value).exists()).toBe(true);
+        });
+
+        it(`${
+          shouldRenderTrendIndicator ? 'should render' : 'should not render'
+        } trend indicator`, () => {
+          expect(findTrendIndicator().exists()).toBe(shouldRenderTrendIndicator);
+        });
+
+        it(`${
+          shouldRenderMaxValueInfoIcon ? 'should render' : 'should not render'
+        } maximum value info icon with tooltip`, () => {
+          expect(findMaxValueInfoIcon().exists()).toBe(shouldRenderMaxValueInfoIcon);
+
+          if (shouldRenderMaxValueInfoIcon) {
+            const tooltip = getBinding(findMaxValueInfoIcon().element, 'gl-tooltip');
+
+            expect(tooltip).toBeDefined();
+            expect(findMaxValueInfoIcon().attributes('title')).toBe(timePeriod.maxValueMessage);
+          }
+        });
+      },
+    );
+  });
+
+  describe('sparkline chart', () => {
     beforeEach(() => {
       // Needed due to a deprecation in the GlSparkline API:
       // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2119
diff --git a/ee/spec/frontend/analytics/dashboards/mock_data.js b/ee/spec/frontend/analytics/dashboards/mock_data.js
index 1f2d0b5393a6a6..5d609694cb7b84 100644
--- a/ee/spec/frontend/analytics/dashboards/mock_data.js
+++ b/ee/spec/frontend/analytics/dashboards/mock_data.js
@@ -9,6 +9,7 @@ const mockMetrics = ([
   leadTime,
   cycleTime,
   issues,
+  issuesCompleted,
   deploys,
   vulnerabilityCritical,
   vulnerabilityHigh,
@@ -49,6 +50,11 @@ const mockMetrics = ([
     label: 'New Issues',
     identifier: 'issues',
   },
+  issues_completed: {
+    value: issuesCompleted,
+    label: 'Closed Issues',
+    identifier: 'issues_completed',
+  },
   deploys: {
     value: deploys,
     label: 'Deploys',
@@ -129,25 +135,38 @@ export const MOCK_DASHBOARD_TABLE_FIELDS = [
   },
 ];
 
-export const mockMonthToDate = mockMetrics([0.5, 0.05, 0.005, 0, 2, 4, 6, 8, 3, 0, 5]);
+export const mockMonthToDate = mockMetrics([0.5, 0.05, 0.005, 0, 2, 4, 6, 10080, 8, 3, 0, 5]);
 export const mockMonthToDateTimePeriod = { ...THIS_MONTH, ...mockMonthToDate };
 export const mockMonthToDateApiResponse = Object.values(mockMonthToDate);
 
-export const mockPreviousMonth = mockMetrics([3.6, 20, 4, 2, 4, '-', 12, 16, 0, 3, 2]);
+export const mockPreviousMonth = mockMetrics([3.6, 20, 4, 2, 4, '-', 12, 9000, 16, 0, 3, 2]);
 export const mockPreviousMonthTimePeriod = { ...LAST_MONTH, ...mockPreviousMonth };
 export const mockPreviousMonthApiResponse = Object.values(mockPreviousMonth);
 
-export const mockTwoMonthsAgo = mockMetrics([9.2, 32, 8, 4, 2, '-', 6, 8, 2, 0, 0]);
+export const mockTwoMonthsAgo = mockMetrics([9.2, 32, 8, 4, 2, '-', 6, 6000, 8, 2, 0, 0]);
 export const mockTwoMonthsAgoTimePeriod = { ...TWO_MONTHS_AGO, ...mockTwoMonthsAgo };
 export const mockTwoMonthsAgoApiResponse = Object.values(mockTwoMonthsAgo);
 
-export const mockThreeMonthsAgo = mockMetrics([20.1, 32, 8, 2, 4, 8, 12, 16, 0, 0, 15]);
+export const mockThreeMonthsAgo = mockMetrics([20.1, 32, 8, 2, 4, 8, 12, 8000, 16, 0, 0, 15]);
 export const mockThreeMonthsAgoTimePeriod = { ...THREE_MONTHS_AGO, ...mockThreeMonthsAgo };
 export const mockThreeMonthsAgoApiResponse = Object.values(mockThreeMonthsAgo);
 
 export const mockChartsTimePeriods = MOCK_CHART_TIME_PERIODS.map((timePeriod, i) => ({
   ...timePeriod,
-  ...mockMetrics(['-', undefined, 0, i, i + 1, i * 2, 100 - i * 2, i * i, i % 4, i % 2, i]),
+  ...mockMetrics([
+    '-',
+    undefined,
+    0,
+    i,
+    i + 1,
+    i * 2,
+    100 - i * 2,
+    200 - i * 2,
+    i * i,
+    i % 4,
+    i % 2,
+    i
+  ]),
 }));
 
 export const mockSubsetChartsTimePeriods = MOCK_CHART_TIME_PERIODS.slice(4).map(
@@ -164,16 +183,22 @@ export const mockComparativeTableData = [
       identifier: 'deployment_frequency',
     },
     invertTrendColor: undefined,
+    maxValue: undefined,
+    maxValueMask: undefined,
+    maxValueTooltip: undefined,
     thisMonth: {
       value: '0.0/d',
+      maxValueMessage: undefined,
       change: 0,
     },
     lastMonth: {
       value: '2.0/d',
+      maxValueMessage: undefined,
       change: -0.5,
     },
     twoMonthsAgo: {
       value: '4.0/d',
+      maxValueMessage: undefined,
       change: 1,
     },
   },
@@ -183,16 +208,22 @@ export const mockComparativeTableData = [
       identifier: 'lead_time_for_changes',
     },
     invertTrendColor: true,
+    maxValue: undefined,
+    maxValueMask: undefined,
+    maxValueTooltip: undefined,
     thisMonth: {
       value: '0.5 d',
+      maxValueMessage: undefined,
       change: -0.8611111111111112,
     },
     lastMonth: {
       value: '3.6 d',
+      maxValueMessage: undefined,
       change: -0.6086956521739131,
     },
     twoMonthsAgo: {
       value: '9.2 d',
+      maxValueMessage: undefined,
       change: -0.5422885572139304,
     },
   },
@@ -202,16 +233,22 @@ export const mockComparativeTableData = [
       identifier: 'time_to_restore_service',
     },
     invertTrendColor: true,
+    maxValue: undefined,
+    maxValueMask: undefined,
+    maxValueTooltip: undefined,
     thisMonth: {
       value: '0.05 d',
+      maxValueMessage: undefined,
       change: -0.9974999999999999,
     },
     lastMonth: {
       value: '20.0 d',
+      maxValueMessage: undefined,
       change: -0.375,
     },
     twoMonthsAgo: {
       value: '32.0 d',
+      maxValueMessage: undefined,
       change: 0,
     },
   },
@@ -221,16 +258,22 @@ export const mockComparativeTableData = [
       identifier: 'change_failure_rate',
     },
     invertTrendColor: true,
+    maxValue: undefined,
+    maxValueMask: undefined,
+    maxValueTooltip: undefined,
     thisMonth: {
       value: '0.005%',
+      maxValueMessage: undefined,
       change: -0.99875,
     },
     lastMonth: {
       value: '4.0%',
+      maxValueMessage: undefined,
       change: -0.5,
     },
     twoMonthsAgo: {
       value: '8.0%',
+      maxValueMessage: undefined,
       change: 0,
     },
   },
@@ -240,17 +283,23 @@ export const mockComparativeTableData = [
       identifier: 'lead_time',
     },
     invertTrendColor: true,
+    maxValue: undefined,
+    maxValueMask: undefined,
+    maxValueTooltip: undefined,
     lastMonth: {
       change: 1,
       value: '4.0 d',
+      maxValueMessage: undefined,
     },
     thisMonth: {
       change: -0.5,
       value: '2.0 d',
+      maxValueMessage: undefined,
     },
     twoMonthsAgo: {
       change: -0.5,
       value: '2.0 d',
+      maxValueMessage: undefined,
     },
   },
   {
@@ -259,17 +308,23 @@ export const mockComparativeTableData = [
       identifier: 'cycle_time',
     },
     invertTrendColor: true,
+    maxValue: undefined,
+    maxValueMask: undefined,
+    maxValueTooltip: undefined,
     lastMonth: {
       change: 0,
       value: '-',
+      maxValueMessage: undefined,
     },
     thisMonth: {
       change: 0,
       value: '4.0 d',
+      maxValueMessage: undefined,
     },
     twoMonthsAgo: {
       change: 0,
       value: '-',
+      maxValueMessage: undefined,
     },
   },
   {
@@ -278,17 +333,50 @@ export const mockComparativeTableData = [
       identifier: 'issues',
     },
     invertTrendColor: undefined,
+    maxValue: undefined,
+    maxValueMask: undefined,
+    maxValueTooltip: undefined,
     lastMonth: {
       change: 1,
       value: 12,
+      maxValueMessage: undefined,
     },
     thisMonth: {
       change: -0.5,
       value: 6,
+      maxValueMessage: undefined,
     },
     twoMonthsAgo: {
       change: -0.5,
       value: 6,
+      maxValueMessage: undefined,
+    },
+  },
+  {
+    metric: {
+      value: 'Closed issues',
+      identifier: 'issues_completed',
+    },
+    invertTrendColor: undefined,
+    maxValue: 10001,
+    maxValueMask: '10000+',
+    maxValueTooltip:
+      'Note: The calculated closed issues count is a lower-bound approximation. Your group has too many issues (or merge requests) which cannot be calculated real-time.',
+    lastMonth: {
+      change: 0.5,
+      value: 9000,
+      maxValueMessage: undefined,
+    },
+    thisMonth: {
+      change: 0.12,
+      value: '10000+',
+      maxValueMessage:
+        'Note: The calculated closed issues count is a lower-bound approximation. Your group has too many issues (or merge requests) which cannot be calculated real-time.',
+    },
+    twoMonthsAgo: {
+      change: -0.25,
+      value: 6000,
+      maxValueMessage: undefined,
     },
   },
   {
@@ -297,17 +385,23 @@ export const mockComparativeTableData = [
       identifier: 'deploys',
     },
     invertTrendColor: undefined,
+    maxValue: undefined,
+    maxValueMask: undefined,
+    maxValueTooltip: undefined,
     lastMonth: {
       change: 1,
       value: 16,
+      maxValueMessage: undefined,
     },
     thisMonth: {
       change: -0.5,
       value: 8,
+      maxValueMessage: undefined,
     },
     twoMonthsAgo: {
       change: -0.5,
       value: 8,
+      maxValueMessage: undefined,
     },
   },
   {
@@ -334,17 +428,23 @@ export const mockComparativeTableData = [
       value: 'Critical Vulnerabilities over time',
     },
     invertTrendColor: true,
+    maxValue: undefined,
+    maxValueMask: undefined,
+    maxValueTooltip: undefined,
     lastMonth: {
       change: null,
       value: 0,
+      maxValueMessage: undefined,
     },
     thisMonth: {
       change: null,
       value: 3,
+      maxValueMessage: undefined,
     },
     twoMonthsAgo: {
       change: null,
       value: 2,
+      maxValueMessage: undefined,
     },
   },
   {
@@ -353,17 +453,23 @@ export const mockComparativeTableData = [
       value: 'High Vulnerabilities over time',
     },
     invertTrendColor: true,
+    maxValue: undefined,
+    maxValueMask: undefined,
+    maxValueTooltip: undefined,
     lastMonth: {
       change: null,
       value: 3,
+      maxValueMessage: undefined,
     },
     thisMonth: {
       change: null,
       value: 0,
+      maxValueMessage: undefined,
     },
     twoMonthsAgo: {
       change: null,
       value: 0,
+      maxValueMessage: undefined,
     },
   },
 ];
@@ -404,6 +510,13 @@ export const mockSubsetChartData = {
     ],
     tooltipLabel: undefined,
   },
+  issues_completed: {
+    data: [
+      [expect.anything(), 0],
+      [expect.anything(), 0],
+    ],
+    tooltipLabel: undefined,
+  },
   lead_time: {
     data: [
       [expect.anything(), 0],
@@ -526,6 +639,17 @@ export const mockChartData = {
       [expect.anything(), 90],
     ],
   },
+  issues_completed: {
+    tooltipLabel: undefined,
+    data: [
+      [expect.anything(), 200],
+      [expect.anything(), 198],
+      [expect.anything(), 196],
+      [expect.anything(), 194],
+      [expect.anything(), 192],
+      [expect.anything(), 190],
+    ],
+  },
   deploys: {
     tooltipLabel: undefined,
     data: [
@@ -603,6 +727,29 @@ export const mockFlowMetricsResponseData = {
     title: 'New Issues',
     __typename: 'ValueStreamAnalyticsMetric',
   },
+  issues_completed: {
+    unit: 'issues',
+    value: 109,
+    identifier: 'issues_completed',
+    links: [
+      {
+        label: 'Dashboard',
+        name: 'Lead Time',
+        docsLink: null,
+        url: '/groups/toolbox/-/issues_analytics',
+        __typename: 'ValueStreamMetricLinkType',
+      },
+      {
+        label: 'Go to docs',
+        name: 'Lead Time',
+        docsLink: true,
+        url: '/help/user/analytics/index#definitions',
+        __typename: 'ValueStreamMetricLinkType',
+      },
+    ],
+    title: 'Issues Completed',
+    __typename: 'ValueStreamAnalyticsMetric',
+  },
   cycle_time: {
     unit: 'days',
     value: null,
@@ -660,6 +807,7 @@ export const mockEmptyDoraResponse = { metrics: [] };
 export const mockEmptyMergeRequestsResponse = { mergeRequests: {} };
 export const mockEmptyFlowMetricsResponse = {
   issues: null,
+  issues_completed: null,
   deploys: null,
   cycle_time: null,
   lead_time: null,
diff --git a/ee/spec/frontend/analytics/dashboards/utils_spec.js b/ee/spec/frontend/analytics/dashboards/utils_spec.js
index 490f021aef2887..bdecdb2d05f33b 100644
--- a/ee/spec/frontend/analytics/dashboards/utils_spec.js
+++ b/ee/spec/frontend/analytics/dashboards/utils_spec.js
@@ -107,6 +107,9 @@ describe('Analytics Dashboards utils', () => {
         expect(Object.keys(row)).toEqual([
           'invertTrendColor',
           'metric',
+          'maxValue',
+          'maxValueMask',
+          'maxValueTooltip',
           'thisMonth',
           'lastMonth',
           'twoMonthsAgo',
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 6e0e0454dd2e82..6ca80b0a12be4d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -13755,6 +13755,9 @@ msgstr ""
 msgid "DORA4Metrics|Change failure rate (percentage)"
 msgstr ""
 
+msgid "DORA4Metrics|Closed issues"
+msgstr ""
+
 msgid "DORA4Metrics|Critical Vulnerabilities over time"
 msgstr ""
 
@@ -13839,6 +13842,9 @@ msgstr ""
 msgid "DORA4Metrics|No merge requests were deployed during this period"
 msgstr ""
 
+msgid "DORA4Metrics|Note: The calculated closed issues count is a lower-bound approximation. Your group has too many issues (or merge requests) which cannot be calculated real-time."
+msgstr ""
+
 msgid "DORA4Metrics|Number of incidents divided by the number of deployments to a production environment in the given time period."
 msgstr ""
 
@@ -49720,6 +49726,9 @@ msgstr ""
 msgid "ValueStreamAnalytics|Merge request analytics"
 msgstr ""
 
+msgid "ValueStreamAnalytics|Monthly number of issues closed."
+msgstr ""
+
 msgid "ValueStreamAnalytics|New Value Stream"
 msgstr ""
 
-- 
GitLab


From c2f1daa8726f2fa8a9300e691fd42cdc7847e2a1 Mon Sep 17 00:00:00 2001
From: Rudy Crespo <rcrespo@gitlab.com>
Date: Thu, 1 Jun 2023 12:20:41 -0400
Subject: [PATCH 02/10] Exclude IssuesCompleted if feature flag disabled

---
 .../analytics/dashboards/components/comparison_chart.vue | 9 ++++++++-
 .../dashboards/components/comparison_chart_spec.js       | 8 ++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/ee/app/assets/javascripts/analytics/dashboards/components/comparison_chart.vue b/ee/app/assets/javascripts/analytics/dashboards/components/comparison_chart.vue
index b353e0ea0d3a8e..ee96de0c642cd3 100644
--- a/ee/app/assets/javascripts/analytics/dashboards/components/comparison_chart.vue
+++ b/ee/app/assets/javascripts/analytics/dashboards/components/comparison_chart.vue
@@ -3,6 +3,7 @@ import { GlAlert, GlSkeletonLoader } from '@gitlab/ui';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { createAlert } from '~/alert';
 import { fetchMetricsData, toYmd } from '~/analytics/shared/utils';
+import { FLOW_METRICS } from '~/analytics/shared/constants';
 import { METRICS_REQUESTS } from '~/analytics/cycle_analytics/constants';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import GroupVulnerabilitiesQuery from '../graphql/group_vulnerabilities.query.graphql';
@@ -249,7 +250,13 @@ export default {
 
         const { excludeMetrics } = this;
         this.tableData = hasDoraMetricValues(timePeriods)
-          ? generateDoraTimePeriodComparisonTable({ timePeriods, excludeMetrics })
+          ? generateDoraTimePeriodComparisonTable({
+              timePeriods,
+              excludeMetrics: [
+                ...excludeMetrics,
+                ...(this.useGraphqlEndpoint ? [] : [FLOW_METRICS.ISSUES_COMPLETED]),
+              ],
+            })
           : [];
       } catch (error) {
         createAlert({ message: DASHBOARD_LOADING_FAILURE, error, captureError: true });
diff --git a/ee/spec/frontend/analytics/dashboards/components/comparison_chart_spec.js b/ee/spec/frontend/analytics/dashboards/components/comparison_chart_spec.js
index 1b80b3b29398c6..f6aae45a0d2be0 100644
--- a/ee/spec/frontend/analytics/dashboards/components/comparison_chart_spec.js
+++ b/ee/spec/frontend/analytics/dashboards/components/comparison_chart_spec.js
@@ -16,7 +16,7 @@ import GroupDoraMetricsQuery from 'ee/analytics/dashboards/graphql/group_dora_me
 import ProjectDoraMetricsQuery from 'ee/analytics/dashboards/graphql/project_dora_metrics.query.graphql';
 import GroupMergeRequestsQuery from 'ee/analytics/dashboards/graphql/group_merge_requests.query.graphql';
 import ProjectMergeRequestsQuery from 'ee/analytics/dashboards/graphql/project_merge_requests.query.graphql';
-import { DORA_METRICS, VULNERABILITY_METRICS } from '~/analytics/shared/constants';
+import { DORA_METRICS, VULNERABILITY_METRICS, FLOW_METRICS } from '~/analytics/shared/constants';
 import * as utils from '~/analytics/shared/utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -437,7 +437,11 @@ describe('Comparison chart', () => {
       await createWrapperWithRESTApi({ apolloProvider: mockApolloProvider });
 
       const metricNames = getTableData().map(({ metric }) => metric);
-      expect(metricNames).toEqual(mockComparativeTableData.map(({ metric }) => metric));
+      expect(metricNames).toEqual(
+        mockComparativeTableData
+          .filter(({ metric }) => metric.identifier !== FLOW_METRICS.ISSUES_COMPLETED)
+          .map(({ metric }) => metric),
+      );
     });
 
     it('does not render DORA metrics that were in excludeMetrics', async () => {
-- 
GitLab


From b25c6e922bdf84e1fe8e92fccaa4592862834bc7 Mon Sep 17 00:00:00 2001
From: Rudy Crespo <rcrespo@gitlab.com>
Date: Fri, 2 Jun 2023 15:56:08 -0400
Subject: [PATCH 03/10] Addressed comments by @phillipwells

---
 app/assets/javascripts/analytics/shared/constants.js        | 2 +-
 doc/user/analytics/value_streams_dashboard.md               | 2 +-
 ee/app/assets/javascripts/analytics/dashboards/constants.js | 2 +-
 ee/spec/frontend/analytics/dashboards/mock_data.js          | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/analytics/shared/constants.js b/app/assets/javascripts/analytics/shared/constants.js
index 87c575406c4a7a..9463286e53efbe 100644
--- a/app/assets/javascripts/analytics/shared/constants.js
+++ b/app/assets/javascripts/analytics/shared/constants.js
@@ -118,7 +118,7 @@ export const METRIC_TOOLTIPS = {
     docsLink: helpPagePath('user/analytics/issue_analytics'),
   },
   [FLOW_METRICS.ISSUES_COMPLETED]: {
-    description: s__('ValueStreamAnalytics|Monthly number of issues closed.'),
+    description: s__('ValueStreamAnalytics|Number of issues closed by month.'),
     groupLink: '-/analytics/value_stream_analytics',
     projectLink: '-/value_stream_analytics',
     docsLink: helpPagePath('user/analytics/value_streams_dashboard', {
diff --git a/doc/user/analytics/value_streams_dashboard.md b/doc/user/analytics/value_streams_dashboard.md
index ff2ca33ed7393b..4bb29d53ad25b1 100644
--- a/doc/user/analytics/value_streams_dashboard.md
+++ b/doc/user/analytics/value_streams_dashboard.md
@@ -147,7 +147,7 @@ panels:
 | Lead time | Median time from issue created to issue closed. | [Value Stream Analytics](https://gitlab.com/groups/gitlab-org/-/analytics/value_stream_analytics) | [View the lead time and cycle time for issues](../group/value_stream_analytics/index.md#key-metrics) | `lead_time` |
 | Cycle time | Median time from the earliest commit of a linked issue's merge request to when that issue is closed. | [VSA overview](https://gitlab.com/groups/gitlab-org/-/analytics/value_stream_analytics) | [View the lead time and cycle time for issues](../group/value_stream_analytics/index.md#key-metrics) | `cycle_time` |
 | New issues | Number of new issues created. | [Issue Analytics](https://gitlab.com/groups/gitlab-org/-/issues_analytics) | Issue analytics [for projects](issue_analytics.md) and [for groups](../../user/group/issues_analytics/index.md) | `issues` |
-| Closed issues | Monthly number of issues closed. | [Value Stream Analytics](https://gitlab.com/groups/gitlab-org/-/analytics/value_stream_analytics) | [Value Stream Analytics](../group/value_stream_analytics/index.md)  | `issues_completed` |
+| Closed issues | Number of issues closed by month. | [Value Stream Analytics](https://gitlab.com/groups/gitlab-org/-/analytics/value_stream_analytics) | [Value Stream Analytics](../group/value_stream_analytics/index.md)  | `issues_completed` |
 | Number of deploys | Total number of deploys to production. | [Merge Request Analytics](https://gitlab.com/gitlab-org/gitlab/-/analytics/merge_request_analytics) | [Merge request analytics](merge_request_analytics.md) | `deploys` |
 | Critical vulnerabilities over time | Critical vulnerabilities over time in project or group | [Vulnerability report](https://gitlab.com/gitlab-org/gitlab/-/security/vulnerability_report) | [Vulnerability report](../application_security/vulnerability_report/index.md) | `vulnerability_critical` |
 | High vulnerabilities over time | High vulnerabilities over time in project or group | [Vulnerability report](https://gitlab.com/gitlab-org/gitlab/-/security/vulnerability_report) | [Vulnerability report](../application_security/vulnerability_report/index.md) | `vulnerability_high` |
diff --git a/ee/app/assets/javascripts/analytics/dashboards/constants.js b/ee/app/assets/javascripts/analytics/dashboards/constants.js
index b28b7fd7b80ab4..3cc175370286a2 100644
--- a/ee/app/assets/javascripts/analytics/dashboards/constants.js
+++ b/ee/app/assets/javascripts/analytics/dashboards/constants.js
@@ -56,7 +56,7 @@ export const TABLE_METRICS = {
     maxValue: 10001,
     maxValueMask: '10000+',
     maxValueTooltip: s__(
-      'DORA4Metrics|Note: The calculated closed issues count is a lower-bound approximation. Your group has too many issues (or merge requests) which cannot be calculated real-time.',
+      'DORA4Metrics|This is a lower-bound approximation. Your group has too many issues and MRs to calculate in real time.',
     ),
   },
   [FLOW_METRICS.DEPLOYS]: {
diff --git a/ee/spec/frontend/analytics/dashboards/mock_data.js b/ee/spec/frontend/analytics/dashboards/mock_data.js
index 5d609694cb7b84..c8ff1be978e4a3 100644
--- a/ee/spec/frontend/analytics/dashboards/mock_data.js
+++ b/ee/spec/frontend/analytics/dashboards/mock_data.js
@@ -165,7 +165,7 @@ export const mockChartsTimePeriods = MOCK_CHART_TIME_PERIODS.map((timePeriod, i)
     i * i,
     i % 4,
     i % 2,
-    i
+    i,
   ]),
 }));
 
@@ -361,7 +361,7 @@ export const mockComparativeTableData = [
     maxValue: 10001,
     maxValueMask: '10000+',
     maxValueTooltip:
-      'Note: The calculated closed issues count is a lower-bound approximation. Your group has too many issues (or merge requests) which cannot be calculated real-time.',
+      'This is a lower-bound approximation. Your group has too many issues and MRs to calculate in real time.',
     lastMonth: {
       change: 0.5,
       value: 9000,
@@ -371,7 +371,7 @@ export const mockComparativeTableData = [
       change: 0.12,
       value: '10000+',
       maxValueMessage:
-        'Note: The calculated closed issues count is a lower-bound approximation. Your group has too many issues (or merge requests) which cannot be calculated real-time.',
+        'This is a lower-bound approximation. Your group has too many issues and MRs to calculate in real time.',
     },
     twoMonthsAgo: {
       change: -0.25,
-- 
GitLab


From a2e1e9d30b8cf5dbfdd793b2fb362b1f6bf58f0d Mon Sep 17 00:00:00 2001
From: Rudy Crespo <rcrespo@gitlab.com>
Date: Fri, 2 Jun 2023 17:04:10 -0400
Subject: [PATCH 04/10] Combined max value props into single object

---
 .../components/comparison_table.vue           |   6 +-
 .../analytics/dashboards/constants.js         |  12 +-
 .../javascripts/analytics/dashboards/utils.js |  41 +++---
 .../components/comparison_table_spec.js       |  16 +--
 .../analytics/dashboards/mock_data.js         | 120 ++++++++----------
 .../analytics/dashboards/utils_spec.js        |   4 +-
 6 files changed, 88 insertions(+), 111 deletions(-)

diff --git a/ee/app/assets/javascripts/analytics/dashboards/components/comparison_table.vue b/ee/app/assets/javascripts/analytics/dashboards/components/comparison_table.vue
index 698cf1ef925a52..1741fe7a982dd4 100644
--- a/ee/app/assets/javascripts/analytics/dashboards/components/comparison_table.vue
+++ b/ee/app/assets/javascripts/analytics/dashboards/components/comparison_table.vue
@@ -65,14 +65,14 @@ export default {
       </template>
     </template>
 
-    <template #cell()="{ value: { value, change, maxValueMessage }, item: { invertTrendColor } }">
+    <template #cell()="{ value: { value, change, valueLimitMessage }, item: { invertTrendColor } }">
       {{ value }}
       <gl-icon
-        v-if="maxValueMessage"
+        v-if="valueLimitMessage"
         v-gl-tooltip.hover
         class="gl-text-blue-600"
         name="information-o"
-        :title="maxValueMessage"
+        :title="valueLimitMessage"
         data-testid="metric_max_value_info_icon"
       />
       <trend-indicator
diff --git a/ee/app/assets/javascripts/analytics/dashboards/constants.js b/ee/app/assets/javascripts/analytics/dashboards/constants.js
index 3cc175370286a2..b660a95634e9b1 100644
--- a/ee/app/assets/javascripts/analytics/dashboards/constants.js
+++ b/ee/app/assets/javascripts/analytics/dashboards/constants.js
@@ -53,11 +53,13 @@ export const TABLE_METRICS = {
   [FLOW_METRICS.ISSUES_COMPLETED]: {
     label: s__('DORA4Metrics|Closed issues'),
     units: UNITS.COUNT,
-    maxValue: 10001,
-    maxValueMask: '10000+',
-    maxValueTooltip: s__(
-      'DORA4Metrics|This is a lower-bound approximation. Your group has too many issues and MRs to calculate in real time.',
-    ),
+    valueLimit: {
+      max: 10001,
+      mask: '10000+',
+      description: s__(
+        'DORA4Metrics|This is a lower-bound approximation. Your group has too many issues and MRs to calculate in real time.',
+      ),
+    },
   },
   [FLOW_METRICS.DEPLOYS]: {
     label: s__('DORA4Metrics|Deploys'),
diff --git a/ee/app/assets/javascripts/analytics/dashboards/utils.js b/ee/app/assets/javascripts/analytics/dashboards/utils.js
index fd0de4c7376c1c..d1b7bd0978da88 100644
--- a/ee/app/assets/javascripts/analytics/dashboards/utils.js
+++ b/ee/app/assets/javascripts/analytics/dashboards/utils.js
@@ -106,9 +106,7 @@ export const hasDoraMetricValues = (timePeriods) =>
  * @param {String} units - The type of units used for this metric (ex. days, /day, count)
  * @param {Boolean} invertTrendColor - Inverts the color indicator used for metric trends.
  * @param {Array} timePeriods - Array of the metrics for different time periods
- * @param {Number} maxValue - Maximum value of the metric.
- * @param {String} maxValueMask = Replaces the value of the metric if >= the maximum value.
- * @param {String} maxValueTooltip - Tooltip that explains the reasoning behind the maximum value mask.
+ * @param {Object} valueLimit - Object representing the maximum value of a metric, mask that replaces the value if the limit is reached and a description to be used in a tooltip.
  * @returns {Object} The metric data formatted for the comparison table.
  */
 const buildMetricComparisonTableRow = ({
@@ -117,16 +115,12 @@ const buildMetricComparisonTableRow = ({
   units,
   invertTrendColor,
   timePeriods,
-  maxValue,
-  maxValueMask,
-  maxValueTooltip,
+  valueLimit,
 }) => {
   const data = {
     invertTrendColor,
     metric: { identifier, value: label },
-    maxValue,
-    maxValueMask,
-    maxValueTooltip,
+    valueLimit,
   };
   timePeriods.forEach((timePeriod, index) => {
     // The last timePeriod is not rendered, we just use it
@@ -143,15 +137,15 @@ const buildMetricComparisonTableRow = ({
           previous: hasPreviousValue ? previous.value : 0,
         })
       : null;
-    const maxValueMessage =
-      hasCurrentValue && current.value >= maxValue ? maxValueTooltip : undefined;
+    const valueLimitMessage =
+      hasCurrentValue && current.value >= valueLimit?.max ? valueLimit?.description : undefined;
     const formattedMetric = hasCurrentValue ? formatMetric(current.value, units) : '-';
-    const value = maxValueMessage ? maxValueMask : formattedMetric;
+    const value = valueLimitMessage ? valueLimit?.mask : formattedMetric;
 
     data[timePeriod.key] = {
       value,
       change,
-      maxValueMessage,
+      valueLimitMessage,
     };
   });
   return data;
@@ -168,18 +162,15 @@ const buildMetricComparisonTableRow = ({
 export const generateDoraTimePeriodComparisonTable = ({ timePeriods, excludeMetrics = [] }) =>
   Object.entries(TABLE_METRICS)
     .filter(([identifier]) => !excludeMetrics.includes(identifier))
-    .map(
-      ([identifier, { label, units, invertTrendColor, maxValue, maxValueMask, maxValueTooltip }]) =>
-        buildMetricComparisonTableRow({
-          identifier,
-          label,
-          units,
-          invertTrendColor,
-          timePeriods,
-          maxValue,
-          maxValueMask,
-          maxValueTooltip,
-        }),
+    .map(([identifier, { label, units, invertTrendColor, valueLimit }]) =>
+      buildMetricComparisonTableRow({
+        identifier,
+        label,
+        units,
+        invertTrendColor,
+        timePeriods,
+        valueLimit,
+      }),
     );
 
 /**
diff --git a/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js b/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js
index 43f41740666318..aef80ee4f14f79 100644
--- a/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js
+++ b/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js
@@ -42,17 +42,17 @@ describe('Comparison table', () => {
   });
 
   describe('date range table cell', () => {
-    const mockMaxValueProps = {
-      maxValue: 10001,
-      maxValueMask: '10000+',
-      maxValueTooltip: 'The maximum value has been exceeded',
+    const valueLimit = {
+      max: 10001,
+      mask: '10000+',
+      description: 'The maximum value has been exceeded',
     };
 
     const mockTimePeriods = [
       {
         change: 0.25,
-        value: mockMaxValueProps.maxValueMask,
-        maxValueMessage: mockMaxValueProps.maxValueTooltip,
+        value: valueLimit.max,
+        valueLimitMessage: valueLimit.description,
       },
       {
         change: 0.6,
@@ -77,8 +77,8 @@ describe('Comparison table', () => {
             tableData: [
               {
                 metric: mockMetric,
-                ...mockMaxValueProps,
                 thisMonth: timePeriod,
+                valueLimit,
               },
             ],
           });
@@ -105,7 +105,7 @@ describe('Comparison table', () => {
             const tooltip = getBinding(findMaxValueInfoIcon().element, 'gl-tooltip');
 
             expect(tooltip).toBeDefined();
-            expect(findMaxValueInfoIcon().attributes('title')).toBe(timePeriod.maxValueMessage);
+            expect(findMaxValueInfoIcon().attributes('title')).toBe(timePeriod.valueLimitMessage);
           }
         });
       },
diff --git a/ee/spec/frontend/analytics/dashboards/mock_data.js b/ee/spec/frontend/analytics/dashboards/mock_data.js
index c8ff1be978e4a3..10fdb9b8a7aecc 100644
--- a/ee/spec/frontend/analytics/dashboards/mock_data.js
+++ b/ee/spec/frontend/analytics/dashboards/mock_data.js
@@ -183,22 +183,20 @@ export const mockComparativeTableData = [
       identifier: 'deployment_frequency',
     },
     invertTrendColor: undefined,
-    maxValue: undefined,
-    maxValueMask: undefined,
-    maxValueTooltip: undefined,
+    valueLimit: undefined,
     thisMonth: {
       value: '0.0/d',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
       change: 0,
     },
     lastMonth: {
       value: '2.0/d',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
       change: -0.5,
     },
     twoMonthsAgo: {
       value: '4.0/d',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
       change: 1,
     },
   },
@@ -208,22 +206,20 @@ export const mockComparativeTableData = [
       identifier: 'lead_time_for_changes',
     },
     invertTrendColor: true,
-    maxValue: undefined,
-    maxValueMask: undefined,
-    maxValueTooltip: undefined,
+    valueLimit: undefined,
     thisMonth: {
       value: '0.5 d',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
       change: -0.8611111111111112,
     },
     lastMonth: {
       value: '3.6 d',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
       change: -0.6086956521739131,
     },
     twoMonthsAgo: {
       value: '9.2 d',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
       change: -0.5422885572139304,
     },
   },
@@ -233,22 +229,20 @@ export const mockComparativeTableData = [
       identifier: 'time_to_restore_service',
     },
     invertTrendColor: true,
-    maxValue: undefined,
-    maxValueMask: undefined,
-    maxValueTooltip: undefined,
+    valueLimit: undefined,
     thisMonth: {
       value: '0.05 d',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
       change: -0.9974999999999999,
     },
     lastMonth: {
       value: '20.0 d',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
       change: -0.375,
     },
     twoMonthsAgo: {
       value: '32.0 d',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
       change: 0,
     },
   },
@@ -258,22 +252,20 @@ export const mockComparativeTableData = [
       identifier: 'change_failure_rate',
     },
     invertTrendColor: true,
-    maxValue: undefined,
-    maxValueMask: undefined,
-    maxValueTooltip: undefined,
+    valueLimit: undefined,
     thisMonth: {
       value: '0.005%',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
       change: -0.99875,
     },
     lastMonth: {
       value: '4.0%',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
       change: -0.5,
     },
     twoMonthsAgo: {
       value: '8.0%',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
       change: 0,
     },
   },
@@ -283,23 +275,21 @@ export const mockComparativeTableData = [
       identifier: 'lead_time',
     },
     invertTrendColor: true,
-    maxValue: undefined,
-    maxValueMask: undefined,
-    maxValueTooltip: undefined,
+    valueLimit: undefined,
     lastMonth: {
       change: 1,
       value: '4.0 d',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: -0.5,
       value: '2.0 d',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
     twoMonthsAgo: {
       change: -0.5,
       value: '2.0 d',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
   },
   {
@@ -308,23 +298,21 @@ export const mockComparativeTableData = [
       identifier: 'cycle_time',
     },
     invertTrendColor: true,
-    maxValue: undefined,
-    maxValueMask: undefined,
-    maxValueTooltip: undefined,
+    valueLimit: undefined,
     lastMonth: {
       change: 0,
       value: '-',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: 0,
       value: '4.0 d',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
     twoMonthsAgo: {
       change: 0,
       value: '-',
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
   },
   {
@@ -333,23 +321,21 @@ export const mockComparativeTableData = [
       identifier: 'issues',
     },
     invertTrendColor: undefined,
-    maxValue: undefined,
-    maxValueMask: undefined,
-    maxValueTooltip: undefined,
+    valueLimit: undefined,
     lastMonth: {
       change: 1,
       value: 12,
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: -0.5,
       value: 6,
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
     twoMonthsAgo: {
       change: -0.5,
       value: 6,
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
   },
   {
@@ -358,25 +344,27 @@ export const mockComparativeTableData = [
       identifier: 'issues_completed',
     },
     invertTrendColor: undefined,
-    maxValue: 10001,
-    maxValueMask: '10000+',
-    maxValueTooltip:
-      'This is a lower-bound approximation. Your group has too many issues and MRs to calculate in real time.',
+    valueLimit: {
+      max: 10001,
+      mask: '10000+',
+      description:
+        'This is a lower-bound approximation. Your group has too many issues and MRs to calculate in real time.',
+    },
     lastMonth: {
       change: 0.5,
       value: 9000,
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: 0.12,
       value: '10000+',
-      maxValueMessage:
+      valueLimitMessage:
         'This is a lower-bound approximation. Your group has too many issues and MRs to calculate in real time.',
     },
     twoMonthsAgo: {
       change: -0.25,
       value: 6000,
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
   },
   {
@@ -385,23 +373,21 @@ export const mockComparativeTableData = [
       identifier: 'deploys',
     },
     invertTrendColor: undefined,
-    maxValue: undefined,
-    maxValueMask: undefined,
-    maxValueTooltip: undefined,
+    valueLimit: undefined,
     lastMonth: {
       change: 1,
       value: 16,
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: -0.5,
       value: 8,
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
     twoMonthsAgo: {
       change: -0.5,
       value: 8,
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
   },
   {
@@ -409,17 +395,21 @@ export const mockComparativeTableData = [
       identifier: 'merge_request_throughput',
       value: 'Merge request throughput',
     },
+    valueLimit: undefined,
     lastMonth: {
       change: 0,
       value: 2,
+      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: 1.5,
       value: 5,
+      valueLimitMessage: undefined,
     },
     twoMonthsAgo: {
       change: 0,
       value: 0,
+      valueLimitMessage: undefined,
     },
   },
   {
@@ -428,23 +418,21 @@ export const mockComparativeTableData = [
       value: 'Critical Vulnerabilities over time',
     },
     invertTrendColor: true,
-    maxValue: undefined,
-    maxValueMask: undefined,
-    maxValueTooltip: undefined,
+    valueLimit: undefined,
     lastMonth: {
       change: null,
       value: 0,
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: null,
       value: 3,
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
     twoMonthsAgo: {
       change: null,
       value: 2,
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
   },
   {
@@ -453,23 +441,21 @@ export const mockComparativeTableData = [
       value: 'High Vulnerabilities over time',
     },
     invertTrendColor: true,
-    maxValue: undefined,
-    maxValueMask: undefined,
-    maxValueTooltip: undefined,
+    valueLimit: undefined,
     lastMonth: {
       change: null,
       value: 3,
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: null,
       value: 0,
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
     twoMonthsAgo: {
       change: null,
       value: 0,
-      maxValueMessage: undefined,
+      valueLimitMessage: undefined,
     },
   },
 ];
diff --git a/ee/spec/frontend/analytics/dashboards/utils_spec.js b/ee/spec/frontend/analytics/dashboards/utils_spec.js
index bdecdb2d05f33b..c86f9ebbac5406 100644
--- a/ee/spec/frontend/analytics/dashboards/utils_spec.js
+++ b/ee/spec/frontend/analytics/dashboards/utils_spec.js
@@ -107,9 +107,7 @@ describe('Analytics Dashboards utils', () => {
         expect(Object.keys(row)).toEqual([
           'invertTrendColor',
           'metric',
-          'maxValue',
-          'maxValueMask',
-          'maxValueTooltip',
+          'valueLimit',
           'thisMonth',
           'lastMonth',
           'twoMonthsAgo',
-- 
GitLab


From 72c0592306b6a684df7ddb8d301751970e874c4c Mon Sep 17 00:00:00 2001
From: Rudy Crespo <rcrespo@gitlab.com>
Date: Fri, 2 Jun 2023 17:20:22 -0400
Subject: [PATCH 05/10] Placed excluded metrics in a computed property

---
 .../dashboards/components/comparison_chart.vue       | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/ee/app/assets/javascripts/analytics/dashboards/components/comparison_chart.vue b/ee/app/assets/javascripts/analytics/dashboards/components/comparison_chart.vue
index ee96de0c642cd3..c8deb182aea8f1 100644
--- a/ee/app/assets/javascripts/analytics/dashboards/components/comparison_chart.vue
+++ b/ee/app/assets/javascripts/analytics/dashboards/components/comparison_chart.vue
@@ -106,6 +106,12 @@ export default {
         fullPath: this.requestPath,
       };
     },
+    excludedMetrics() {
+      return [
+        ...this.excludeMetrics,
+        ...(this.useGraphqlEndpoint ? [] : [FLOW_METRICS.ISSUES_COMPLETED]),
+      ];
+    },
   },
   async mounted() {
     this.loadingTable = true;
@@ -248,14 +254,10 @@ export default {
           this.apiQueryFn,
         );
 
-        const { excludeMetrics } = this;
         this.tableData = hasDoraMetricValues(timePeriods)
           ? generateDoraTimePeriodComparisonTable({
               timePeriods,
-              excludeMetrics: [
-                ...excludeMetrics,
-                ...(this.useGraphqlEndpoint ? [] : [FLOW_METRICS.ISSUES_COMPLETED]),
-              ],
+              excludeMetrics: this.excludedMetrics,
             })
           : [];
       } catch (error) {
-- 
GitLab


From e6a49fc31067f91c1ae14fe060e870496e7eec8e Mon Sep 17 00:00:00 2001
From: Rudy Crespo <rcrespo@gitlab.com>
Date: Fri, 2 Jun 2023 17:24:42 -0400
Subject: [PATCH 06/10] Updated mock IssuesCompleted gql response

---
 ee/spec/frontend/analytics/dashboards/mock_data.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ee/spec/frontend/analytics/dashboards/mock_data.js b/ee/spec/frontend/analytics/dashboards/mock_data.js
index 10fdb9b8a7aecc..2c196a670d7a56 100644
--- a/ee/spec/frontend/analytics/dashboards/mock_data.js
+++ b/ee/spec/frontend/analytics/dashboards/mock_data.js
@@ -720,14 +720,14 @@ export const mockFlowMetricsResponseData = {
     links: [
       {
         label: 'Dashboard',
-        name: 'Lead Time',
+        name: 'Issues Completed',
         docsLink: null,
         url: '/groups/toolbox/-/issues_analytics',
         __typename: 'ValueStreamMetricLinkType',
       },
       {
         label: 'Go to docs',
-        name: 'Lead Time',
+        name: 'Issues Completed',
         docsLink: true,
         url: '/help/user/analytics/index#definitions',
         __typename: 'ValueStreamMetricLinkType',
-- 
GitLab


From a6fa4941944c9839f72fb4fad26141dbfa0b6f6d Mon Sep 17 00:00:00 2001
From: Rudy Crespo <rcrespo@gitlab.com>
Date: Fri, 2 Jun 2023 17:34:54 -0400
Subject: [PATCH 07/10] Regenerated translation file

---
 locale/gitlab.pot | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 6ca80b0a12be4d..ec5c2ef5b98d99 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -13842,9 +13842,6 @@ msgstr ""
 msgid "DORA4Metrics|No merge requests were deployed during this period"
 msgstr ""
 
-msgid "DORA4Metrics|Note: The calculated closed issues count is a lower-bound approximation. Your group has too many issues (or merge requests) which cannot be calculated real-time."
-msgstr ""
-
 msgid "DORA4Metrics|Number of incidents divided by the number of deployments to a production environment in the given time period."
 msgstr ""
 
@@ -13881,6 +13878,9 @@ msgstr ""
 msgid "DORA4Metrics|The chart displays the median time between a merge request being merged and deployed to production environment(s) that are based on the %{linkStart}deployment_tier%{linkEnd} value."
 msgstr ""
 
+msgid "DORA4Metrics|This is a lower-bound approximation. Your group has too many issues and MRs to calculate in real time."
+msgstr ""
+
 msgid "DORA4Metrics|Time to Restore Service"
 msgstr ""
 
@@ -49726,15 +49726,15 @@ msgstr ""
 msgid "ValueStreamAnalytics|Merge request analytics"
 msgstr ""
 
-msgid "ValueStreamAnalytics|Monthly number of issues closed."
-msgstr ""
-
 msgid "ValueStreamAnalytics|New Value Stream"
 msgstr ""
 
 msgid "ValueStreamAnalytics|Number of commits pushed to the default branch"
 msgstr ""
 
+msgid "ValueStreamAnalytics|Number of issues closed by month."
+msgstr ""
+
 msgid "ValueStreamAnalytics|Number of new issues created."
 msgstr ""
 
-- 
GitLab


From 0981dacdc0e5afab883d60f37deb4a4b3e1dd76f Mon Sep 17 00:00:00 2001
From: Rudy Crespo <rcrespo@gitlab.com>
Date: Fri, 2 Jun 2023 19:45:48 -0400
Subject: [PATCH 08/10] Fixed small typo in date range cell test suite

---
 .../analytics/dashboards/components/comparison_table_spec.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js b/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js
index aef80ee4f14f79..2bd679b8e70481 100644
--- a/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js
+++ b/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js
@@ -51,7 +51,7 @@ describe('Comparison table', () => {
     const mockTimePeriods = [
       {
         change: 0.25,
-        value: valueLimit.max,
+        value: valueLimit.mask,
         valueLimitMessage: valueLimit.description,
       },
       {
-- 
GitLab


From 2441ea7cee5f257a176dcffb2b4c1c5fffe44ae1 Mon Sep 17 00:00:00 2001
From: Rudy Crespo <rcrespo@gitlab.com>
Date: Mon, 5 Jun 2023 11:39:42 -0400
Subject: [PATCH 09/10] Removed unnecessary undefined properties from mock
 table data

---
 .../analytics/dashboards/mock_data.js         | 46 -------------------
 1 file changed, 46 deletions(-)

diff --git a/ee/spec/frontend/analytics/dashboards/mock_data.js b/ee/spec/frontend/analytics/dashboards/mock_data.js
index 2c196a670d7a56..c1906f79dbae83 100644
--- a/ee/spec/frontend/analytics/dashboards/mock_data.js
+++ b/ee/spec/frontend/analytics/dashboards/mock_data.js
@@ -183,20 +183,16 @@ export const mockComparativeTableData = [
       identifier: 'deployment_frequency',
     },
     invertTrendColor: undefined,
-    valueLimit: undefined,
     thisMonth: {
       value: '0.0/d',
-      valueLimitMessage: undefined,
       change: 0,
     },
     lastMonth: {
       value: '2.0/d',
-      valueLimitMessage: undefined,
       change: -0.5,
     },
     twoMonthsAgo: {
       value: '4.0/d',
-      valueLimitMessage: undefined,
       change: 1,
     },
   },
@@ -206,20 +202,16 @@ export const mockComparativeTableData = [
       identifier: 'lead_time_for_changes',
     },
     invertTrendColor: true,
-    valueLimit: undefined,
     thisMonth: {
       value: '0.5 d',
-      valueLimitMessage: undefined,
       change: -0.8611111111111112,
     },
     lastMonth: {
       value: '3.6 d',
-      valueLimitMessage: undefined,
       change: -0.6086956521739131,
     },
     twoMonthsAgo: {
       value: '9.2 d',
-      valueLimitMessage: undefined,
       change: -0.5422885572139304,
     },
   },
@@ -229,20 +221,16 @@ export const mockComparativeTableData = [
       identifier: 'time_to_restore_service',
     },
     invertTrendColor: true,
-    valueLimit: undefined,
     thisMonth: {
       value: '0.05 d',
-      valueLimitMessage: undefined,
       change: -0.9974999999999999,
     },
     lastMonth: {
       value: '20.0 d',
-      valueLimitMessage: undefined,
       change: -0.375,
     },
     twoMonthsAgo: {
       value: '32.0 d',
-      valueLimitMessage: undefined,
       change: 0,
     },
   },
@@ -252,20 +240,16 @@ export const mockComparativeTableData = [
       identifier: 'change_failure_rate',
     },
     invertTrendColor: true,
-    valueLimit: undefined,
     thisMonth: {
       value: '0.005%',
-      valueLimitMessage: undefined,
       change: -0.99875,
     },
     lastMonth: {
       value: '4.0%',
-      valueLimitMessage: undefined,
       change: -0.5,
     },
     twoMonthsAgo: {
       value: '8.0%',
-      valueLimitMessage: undefined,
       change: 0,
     },
   },
@@ -275,21 +259,17 @@ export const mockComparativeTableData = [
       identifier: 'lead_time',
     },
     invertTrendColor: true,
-    valueLimit: undefined,
     lastMonth: {
       change: 1,
       value: '4.0 d',
-      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: -0.5,
       value: '2.0 d',
-      valueLimitMessage: undefined,
     },
     twoMonthsAgo: {
       change: -0.5,
       value: '2.0 d',
-      valueLimitMessage: undefined,
     },
   },
   {
@@ -298,21 +278,17 @@ export const mockComparativeTableData = [
       identifier: 'cycle_time',
     },
     invertTrendColor: true,
-    valueLimit: undefined,
     lastMonth: {
       change: 0,
       value: '-',
-      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: 0,
       value: '4.0 d',
-      valueLimitMessage: undefined,
     },
     twoMonthsAgo: {
       change: 0,
       value: '-',
-      valueLimitMessage: undefined,
     },
   },
   {
@@ -321,21 +297,17 @@ export const mockComparativeTableData = [
       identifier: 'issues',
     },
     invertTrendColor: undefined,
-    valueLimit: undefined,
     lastMonth: {
       change: 1,
       value: 12,
-      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: -0.5,
       value: 6,
-      valueLimitMessage: undefined,
     },
     twoMonthsAgo: {
       change: -0.5,
       value: 6,
-      valueLimitMessage: undefined,
     },
   },
   {
@@ -353,7 +325,6 @@ export const mockComparativeTableData = [
     lastMonth: {
       change: 0.5,
       value: 9000,
-      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: 0.12,
@@ -364,7 +335,6 @@ export const mockComparativeTableData = [
     twoMonthsAgo: {
       change: -0.25,
       value: 6000,
-      valueLimitMessage: undefined,
     },
   },
   {
@@ -373,21 +343,17 @@ export const mockComparativeTableData = [
       identifier: 'deploys',
     },
     invertTrendColor: undefined,
-    valueLimit: undefined,
     lastMonth: {
       change: 1,
       value: 16,
-      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: -0.5,
       value: 8,
-      valueLimitMessage: undefined,
     },
     twoMonthsAgo: {
       change: -0.5,
       value: 8,
-      valueLimitMessage: undefined,
     },
   },
   {
@@ -395,21 +361,17 @@ export const mockComparativeTableData = [
       identifier: 'merge_request_throughput',
       value: 'Merge request throughput',
     },
-    valueLimit: undefined,
     lastMonth: {
       change: 0,
       value: 2,
-      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: 1.5,
       value: 5,
-      valueLimitMessage: undefined,
     },
     twoMonthsAgo: {
       change: 0,
       value: 0,
-      valueLimitMessage: undefined,
     },
   },
   {
@@ -418,21 +380,17 @@ export const mockComparativeTableData = [
       value: 'Critical Vulnerabilities over time',
     },
     invertTrendColor: true,
-    valueLimit: undefined,
     lastMonth: {
       change: null,
       value: 0,
-      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: null,
       value: 3,
-      valueLimitMessage: undefined,
     },
     twoMonthsAgo: {
       change: null,
       value: 2,
-      valueLimitMessage: undefined,
     },
   },
   {
@@ -441,21 +399,17 @@ export const mockComparativeTableData = [
       value: 'High Vulnerabilities over time',
     },
     invertTrendColor: true,
-    valueLimit: undefined,
     lastMonth: {
       change: null,
       value: 3,
-      valueLimitMessage: undefined,
     },
     thisMonth: {
       change: null,
       value: 0,
-      valueLimitMessage: undefined,
     },
     twoMonthsAgo: {
       change: null,
       value: 0,
-      valueLimitMessage: undefined,
     },
   },
 ];
-- 
GitLab


From 348b74cf71dc0521552438de98640bfbdcc24e8d Mon Sep 17 00:00:00 2001
From: Rudy Crespo <rcrespo@gitlab.com>
Date: Mon, 5 Jun 2023 12:00:57 -0400
Subject: [PATCH 10/10] Refactored date range cell test suite

---
 .../components/comparison_table_spec.js       | 101 +++++++++++-------
 1 file changed, 62 insertions(+), 39 deletions(-)

diff --git a/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js b/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js
index 2bd679b8e70481..86688a0168b460 100644
--- a/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js
+++ b/ee/spec/frontend/analytics/dashboards/components/comparison_table_spec.js
@@ -33,7 +33,7 @@ describe('Comparison table', () => {
   const findChart = () => wrapper.findByTestId('metric_chart');
   const findChartSkeleton = () => wrapper.findByTestId('metric_chart_skeleton');
   const findTrendIndicator = () => wrapper.findByTestId('metric_trend_indicator');
-  const findMaxValueInfoIcon = () => wrapper.findByTestId('metric_max_value_info_icon');
+  const findValueLimitInfoIcon = () => wrapper.findByTestId('metric_max_value_info_icon');
 
   it.each(Object.keys(TABLE_METRICS))('renders table cell for %s metric', (identifier) => {
     createWrapper();
@@ -64,52 +64,75 @@ describe('Comparison table', () => {
       },
     ];
 
-    describe.each`
-      description                                               | timePeriod            | shouldRenderTrendIndicator | shouldRenderMaxValueInfoIcon
-      ${'When value has exceeded maximum value'}                | ${mockTimePeriods[0]} | ${false}                   | ${true}
-      ${'When value has changed from previous month'}           | ${mockTimePeriods[1]} | ${true}                    | ${false}
-      ${'When value has not changed or exceeded maximum value'} | ${mockTimePeriods[2]} | ${false}                   | ${false}
-    `(
-      '$description',
-      ({ timePeriod, shouldRenderTrendIndicator, shouldRenderMaxValueInfoIcon }) => {
-        beforeEach(() => {
-          createWrapper({
-            tableData: [
-              {
-                metric: mockMetric,
-                thisMonth: timePeriod,
-                valueLimit,
-              },
-            ],
-          });
+    describe('When value has exceeded maximum value', () => {
+      const [timePeriodWithMaximum] = mockTimePeriods;
+
+      beforeEach(() => {
+        createWrapper({
+          tableData: [
+            {
+              metric: mockMetric,
+              thisMonth: timePeriodWithMaximum,
+              valueLimit,
+            },
+          ],
         });
+      });
 
-        it('displays correct value', () => {
-          const value = timePeriod.value.toString();
+      it('displays correct value', () => {
+        const { value } = timePeriodWithMaximum;
 
-          expect(wrapper.findByText(value).exists()).toBe(true);
-        });
+        expect(wrapper.findByText(value).exists()).toBe(true);
+      });
 
-        it(`${
-          shouldRenderTrendIndicator ? 'should render' : 'should not render'
-        } trend indicator`, () => {
-          expect(findTrendIndicator().exists()).toBe(shouldRenderTrendIndicator);
-        });
+      it(`should render value limit info icon with tooltip`, () => {
+        const tooltip = getBinding(findValueLimitInfoIcon().element, 'gl-tooltip');
 
-        it(`${
-          shouldRenderMaxValueInfoIcon ? 'should render' : 'should not render'
-        } maximum value info icon with tooltip`, () => {
-          expect(findMaxValueInfoIcon().exists()).toBe(shouldRenderMaxValueInfoIcon);
+        expect(findValueLimitInfoIcon().exists()).toBe(true);
+        expect(tooltip).toBeDefined();
+        expect(findValueLimitInfoIcon().attributes('title')).toBe(
+          timePeriodWithMaximum.valueLimitMessage,
+        );
+      });
 
-          if (shouldRenderMaxValueInfoIcon) {
-            const tooltip = getBinding(findMaxValueInfoIcon().element, 'gl-tooltip');
+      it('should not render trend indicator', () => {
+        expect(findTrendIndicator().exists()).toBe(false);
+      });
+    });
 
-            expect(tooltip).toBeDefined();
-            expect(findMaxValueInfoIcon().attributes('title')).toBe(timePeriod.valueLimitMessage);
-          }
+    describe.each`
+      description                                               | timePeriod            | shouldRenderTrendIndicator
+      ${'When value has changed from previous month'}           | ${mockTimePeriods[1]} | ${true}
+      ${'When value has not changed or exceeded maximum value'} | ${mockTimePeriods[2]} | ${false}
+    `('$description', ({ timePeriod, shouldRenderTrendIndicator }) => {
+      beforeEach(() => {
+        createWrapper({
+          tableData: [
+            {
+              metric: mockMetric,
+              thisMonth: timePeriod,
+              valueLimit,
+            },
+          ],
         });
-      },
-    );
+      });
+
+      it('displays correct value', () => {
+        const { value } = timePeriod;
+
+        expect(wrapper.findByText(`${value}`).exists()).toBe(true);
+      });
+
+      it(`${
+        shouldRenderTrendIndicator ? 'should render' : 'should not render'
+      } trend indicator`, () => {
+        expect(findTrendIndicator().exists()).toBe(shouldRenderTrendIndicator);
+      });
+
+      it(`should not render value limit info icon`, () => {
+        expect(findValueLimitInfoIcon().exists()).toBe(false);
+      });
+    });
   });
 
   describe('sparkline chart', () => {
-- 
GitLab