Support metrics where smaller is better

changelogs/unreleased-ee/add-support-metrics-smaller.yml

+---
+title: Add support within Browser Performance Testing for metrics where smaller is
+  better
+merge_request: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/3891
+author: joshlambert
+type: added

ee/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_report_issues.vue

@@ -89,6 +89,12 @@
       modalIdTarget(index) {
         return `#${this.getmodalId(index)}`;
       },
+      formatScore(value) {
+        if (Math.floor(value) !== value) {
+          return parseFloat(value).toFixed(2);
+        }
+        return value;
+      },
       openDastModal(issue, index) {
         this.modalId = this.getmodalId(index);
         this.modalTitle = `${issue.priority}: ${issue.name}`;
@@ -156,11 +162,12 @@
         </button>
       </template>
       <template v-else>
-        {{ issue.name }}<template v-if="issue.score">: <strong>{{ issue.score }}</strong></template>
+        {{ issue.name }}<template v-if="issue.score">:
+        <strong>{{ formatScore(issue.score) }}</strong></template>
       </template>
 
       <template v-if="isTypePerformance && issue.delta != null">
-        ({{ issue.delta >= 0 ? '+' : '' }}{{ issue.delta }})
+        ({{ issue.delta >= 0 ? '+' : '' }}{{ formatScore(issue.delta) }})
       </template>
 
       <template v-if="issue.path">

ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -204,6 +204,7 @@ export default class MergeRequestStore extends CEMergeRequestStore {
 
         if (baseMetricsIndexed[subject] && baseMetricsIndexed[subject][metric]) {
           const baseMetricData = baseMetricsIndexed[subject][metric];
+          const metricDirection = 'desiredSize' in headMetricData && headMetricData.desiredSize === 'smaller' ? -1 : 1;
           const metricData = {
             name: metric,
             path: subject,
@@ -211,12 +212,12 @@ export default class MergeRequestStore extends CEMergeRequestStore {
             delta: headMetricData.value - baseMetricData.value,
           };
 
-          if (headMetricData.value > baseMetricData.value) {
+          if (metricData.delta === 0) {
+            neutral.push(metricData);
+          } else if (metricData.delta * metricDirection > 0) {
             improved.push(metricData);
-          } else if (headMetricData.value < baseMetricData.value) {
-            degraded.push(metricData);
           } else {
-            neutral.push(metricData);
+            degraded.push(metricData);
           }
         } else {
           neutral.push({

spec/javascripts/vue_mr_widget/ee_mr_widget_options_spec.js

@@ -291,7 +291,7 @@ describe('ee merge request widget options', () => {
         setTimeout(() => {
           expect(
             vm.$el.querySelector('.js-performance-widget .js-code-text').textContent.trim(),
-          ).toEqual('Performance metrics improved on 1 point and degraded on 1 point');
+          ).toEqual('Performance metrics improved on 2 points and degraded on 1 point');
           done();
         }, 0);
       });
@@ -304,7 +304,7 @@ describe('ee merge request widget options', () => {
             Vue.nextTick(() => {
               expect(
                 vm.$el.querySelector('.js-performance-widget .js-code-text').textContent.trim(),
-              ).toEqual('Performance metrics improved on 1 point');
+              ).toEqual('Performance metrics improved on 2 points');
               done();
             });
           }, 0);

spec/javascripts/vue_mr_widget/mock_data.js

@@ -326,6 +326,12 @@ export const headPerformance = [
       {
         name: 'Sitespeed Score',
         value: 79,
+        desiredSize: 'larger',
+      },
+      {
+        name: 'Requests',
+        value: 3,
+        desiredSize: 'smaller',
       },
     ],
   },
@@ -338,6 +344,7 @@ export const headPerformance = [
       },
     ],
   },
+
 ];
 
 export const basePerformance = [
@@ -356,6 +363,12 @@ export const basePerformance = [
       {
         name: 'Sitespeed Score',
         value: 80,
+        desiredSize: 'larger',
+      },
+      {
+        name: 'Requests',
+        value: 4,
+        desiredSize: 'smaller',
       },
     ],
   },
@@ -643,4 +656,4 @@ export const parsedDast = [{
     method: 'GET',
     param: 'X-Content-Type-Options'
   }]
-}];
\ No newline at end of file
+}];