Add percentage change to performance widgets

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

@@ -3,6 +3,7 @@
  * Renders Perfomance issue body text
  *  [name] :[score] [symbol] [delta] in [link]
  */
+import { formattedChangeInPercent } from '~/lib/utils/number_utils';
 import ReportLink from '~/reports/components/report_link.vue';
 
 function formatScore(value) {
@@ -34,10 +35,16 @@ export default {
       if (!this.issue.delta) {
         return false;
       }
-      if (this.issue.delta >= 0) {
-        return `+${formatScore(this.issue.delta)}`;
+      return this.issue.delta >= 0
+        ? `+${formatScore(this.issue.delta)}`
+        : formatScore(this.issue.delta);
+    },
+    issueDeltaPercentage() {
+      if (!this.issue.delta || !this.issue.score || !Number(this.issue.score)) {
+        return false;
       }
-      return formatScore(this.issue.delta);
+      const oldScore = parseFloat(this.issue.score) - this.issue.delta;
+      return formattedChangeInPercent(oldScore, this.issue.score);
     },
   },
 };
@@ -52,6 +59,7 @@ export default {
         {{ issue.name }}
       </template>
       <template v-if="issueDelta"> ({{ issueDelta }}) </template>
+      <template v-if="issueDeltaPercentage"> ({{ issueDeltaPercentage }}) </template>
     </div>
 
     <report-link v-if="issue.path" :issue="issue" />

ee/spec/frontend/vue_mr_widget/components/performance_issue_body_spec.js

@@ -4,17 +4,25 @@ import component from 'ee/vue_merge_request_widget/components/performance_issue_
 describe('performance issue body', () => {
   let wrapper;
 
-  const performanceIssue = {
-    delta: 0.1999999999998181,
-    name: 'Transfer Size (KB)',
-    path: '/',
-    score: 4974.8,
-  };
-
+  describe.each`
+    name                    | score                 | delta                 | expectedScore | expectedDelta | expectedPercentage
+    ${'Transfer Size (KB)'} | ${'4974.8'}           | ${0.1999999999998181} | ${'4974.80'}  | ${'(+0.19)'}  | ${'(+0%)'}
+    ${'Speed Index'}        | ${1474}               | ${727}                | ${'1474'}     | ${'(+727)'}   | ${'(+97%)'}
+    ${'Checks'}             | ${'97.73%'}           | ${-2.27}              | ${'97.73%'}   | ${'(-2.27)'}  | ${null}
+    ${'RPS'}                | ${22.699900441941768} | ${-1}                 | ${'22.69'}    | ${'(-1)'}     | ${'(-4%)'}
+    ${'TTFB P95'}           | ${205.02902265}       | ${0}                  | ${'205.02'}   | ${null}       | ${null}
+  `(
+    'with an example $name performance metric',
+    ({ name, score, delta, expectedScore, expectedDelta, expectedPercentage }) => {
       beforeEach(() => {
         wrapper = shallowMount(component, {
           propsData: {
-        issue: performanceIssue,
+            issue: {
+              path: '/',
+              name,
+              score,
+              delta,
+            },
           },
         });
       });
@@ -25,14 +33,33 @@ describe('performance issue body', () => {
       });
 
       it('renders issue name', () => {
-    expect(wrapper.text()).toContain(performanceIssue.name);
+        expect(wrapper.text()).toContain(name);
       });
 
       it('renders issue score formatted', () => {
-    expect(wrapper.text()).toContain('4974.80');
+        expect(wrapper.text()).toContain(expectedScore);
       });
 
+      if (delta) {
         it('renders issue delta formatted', () => {
-    expect(wrapper.text()).toContain('(+0.19)');
+          expect(wrapper.text()).toContain(expectedDelta);
+        });
+      } else {
+        it('does not render issue delta formatted', () => {
+          expect(wrapper.text()).not.toContain('(+');
+          expect(wrapper.text()).not.toContain('(-');
         });
+      }
+
+      if (expectedPercentage) {
+        it('renders issue delta as a percentage', () => {
+          expect(wrapper.text()).toContain(expectedPercentage);
+        });
+      } else {
+        it('does not render issue delta as a percentage', () => {
+          expect(wrapper.text()).not.toContain('%)');
+        });
+      }
+    },
+  );
 });