Sort changed metrics first in metrics reports MR widget

doc/ci/metrics_reports.md

@@ -26,12 +26,14 @@ Consider the following examples of data that can use Metrics Reports:
 
 ## How it works
 
-Metrics are read from the metrics report (default: `metrics.txt`). They are parsed and displayed in the MR widget.
+Metrics for a branch are read from the latest metrics report artifact (default filename: `metrics.txt`) as string values.
 
-All values are considered strings and string compare is used to find differences between the latest available `metrics` artifact from:
+For an MR, the values of these metrics from the feature branch are compared to the values from the target branch. Then they are displayed in the MR widget in this order:
 
-- `master`
-- The feature branch
+- Metrics that have been added by the MR. Marked with a **New** badge.
+- Existing metrics with changed values.
+- Existing metrics with unchanged values.
+- Metrics that have been removed by the MR. Marked with a **Removed** badge.
 
 ## How to set it up
 

ee/app/assets/javascripts/vue_shared/metrics_reports/store/mutations.js

@@ -13,11 +13,14 @@ export default {
     state.isLoading = false;
 
     state.newMetrics = response.new_metrics || [];
-    state.existingMetrics = response.existing_metrics || [];
+    state.existingMetrics = [
+      ...(response.existing_metrics?.filter((metric) => metric?.previous_value) || []),
+      ...(response.existing_metrics?.filter((metric) => !metric?.previous_value) || []),
+    ];
     state.removedMetrics = response.removed_metrics || [];
 
     state.numberOfChanges =
-      state.existingMetrics.filter((metric) => metric.previous_value !== undefined).length +
+      state.existingMetrics.filter((metric) => metric?.previous_value !== undefined).length +
       state.newMetrics.length +
       state.removedMetrics.length;
   },

ee/changelogs/unreleased/260388-sort-metrics-reports-in-widget.yml

+---
+title: Sort changed metrics first in metrics reports MR widget
+merge_request: 54729
+author:
+type: changed

ee/spec/frontend/vue_shared/metrics_reports/store/mutations_spec.js

@@ -37,12 +37,27 @@ describe('metrics reports mutations', () => {
       };
       mutations[types.RECEIVE_METRICS_SUCCESS](mockState, data);
 
-      expect(mockState.existingMetrics[0].name).toEqual(data.existing_metrics[0].name);
-      expect(mockState.existingMetrics[0].value).toEqual(data.existing_metrics[0].value);
+      expect(mockState.existingMetrics).toEqual(data.existing_metrics);
       expect(mockState.numberOfChanges).toEqual(0);
       expect(mockState.isLoading).toEqual(false);
     });
 
+    it('should set metrics with a new metric', () => {
+      const data = {
+        new_metrics: [
+          {
+            name: 'name',
+            value: 'value',
+          },
+        ],
+      };
+      mutations[types.RECEIVE_METRICS_SUCCESS](mockState, data);
+
+      expect(mockState.newMetrics).toEqual(data.new_metrics);
+      expect(mockState.numberOfChanges).toEqual(1);
+      expect(mockState.isLoading).toEqual(false);
+    });
+
     it('should set metrics with one changes', () => {
       const data = {
         existing_metrics: [
@@ -55,15 +70,38 @@ describe('metrics reports mutations', () => {
       };
       mutations[types.RECEIVE_METRICS_SUCCESS](mockState, data);
 
-      expect(mockState.existingMetrics[0].name).toEqual(data.existing_metrics[0].name);
-      expect(mockState.existingMetrics[0].value).toEqual(data.existing_metrics[0].value);
-      expect(mockState.existingMetrics[0].previous_value).toEqual(
-        data.existing_metrics[0].previous_value,
-      );
-
+      expect(mockState.existingMetrics).toEqual(data.existing_metrics);
       expect(mockState.numberOfChanges).toEqual(1);
       expect(mockState.isLoading).toEqual(false);
     });
+
+    it('should put changed metrics before unchanged metrics', () => {
+      const unchangedMetrics = [
+        {
+          name: 'an unchanged metric',
+          value: 'one',
+        },
+        {
+          name: 'another unchanged metric metric',
+          value: 'four',
+        },
+      ];
+      const changedMetric = {
+        name: 'changed metric',
+        value: 'two',
+        previous_value: 'three',
+      };
+      const data = {
+        existing_metrics: [unchangedMetrics[0], changedMetric, unchangedMetrics[1]],
+      };
+      mutations[types.RECEIVE_METRICS_SUCCESS](mockState, data);
+
+      expect(mockState.existingMetrics).toEqual([
+        changedMetric,
+        unchangedMetrics[0],
+        unchangedMetrics[1],
+      ]);
+    });
   });
 
   describe('RECEIVE_METRICS_ERROR', () => {