add performance metrics widget using mock data

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

@@ -7,7 +7,7 @@ export default {
   name: 'MRWidgetCodeQuality',
 
   props: {
-    // security | codequality
+    // security | codequality | performance
     type: {
       type: String,
       required: true,

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

@@ -8,7 +8,7 @@
         type: Array,
         required: true,
       },
-      // security || codequality
+      // security || codequality || performance
       type: {
         type: String,
         required: true,

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -16,8 +16,10 @@ export default {
   data() {
     return {
       isLoadingCodequality: false,
+      isLoadingPerformance: false,
       isLoadingSecurity: false,
       loadingCodequalityFailed: false,
+      loadingPerformanceFailed: false,
       loadingSecurityFailed: false,
     };
   },
@@ -29,6 +31,10 @@ export default {
       const { codeclimate } = this.mr;
       return codeclimate && codeclimate.head_path && codeclimate.base_path;
     },
+    shouldRenderPerformance() {
+      const { performance } = this.mr;
+      return performance && performance.head_path && performance.base_path;
+    },
     shouldRenderSecurityReport() {
       return this.mr.sast;
     },
@@ -65,6 +71,39 @@ export default {
       return text.join('');
     },
 
+    performanceText() {
+      const { improved, degraded } = this.mr.performanceMetrics;
+      const text = [];
+
+      if (!improved.length && !degraded.length) {
+        text.push('No changes to performance metrics');
+      } else if (improved.length || degraded.length) {
+        text.push('Performance metrics');
+
+        if (degraded.length) {
+          text.push(n__(
+            ' improved on %d point',
+            ' improved on %d points',
+            degraded.length,
+          ));
+        }
+
+        if (improved.length > 0 && degraded.length > 0) {
+          text.push(' and');
+        }
+
+        if (improved.length) {
+          text.push(n__(
+            ' degraded on %d point',
+            ' degraded on %d points',
+            improved.length,
+          ));
+        }
+      }
+
+      return text.join('');
+    },
+
     securityText() {
       if (this.mr.securityReport.length) {
         return n__(
@@ -86,6 +125,15 @@ export default {
       return 'success';
     },
 
+    performanceStatus() {
+      if (this.isLoadingPerformance) {
+        return 'loading';
+      } else if (this.loadingPerformanceFailed) {
+        return 'error';
+      }
+      return 'success';
+    },
+
     securityStatus() {
       if (this.isLoadingSecurity) {
         return 'loading';
@@ -115,6 +163,25 @@ export default {
         });
     },
 
+    fetchPerformance() {
+      const { head_path, base_path } = this.mr.performance;
+
+      this.isLoadingPerformance = true;
+
+      Promise.all([
+        this.service.fetchReport(head_path),
+        this.service.fetchReport(base_path),
+      ])
+        .then((values) => {
+          this.mr.comparePerformanceMetrics(values[0], values[1]);
+          this.isLoadingPerformance = false;
+        })
+        .catch(() => {
+          this.isLoadingPerformance = false;
+          this.loadingPerformanceFailed = true;
+        });
+    },
+
     fetchSecurity() {
       const { path, blob_path } = this.mr.sast;
       this.isLoadingSecurity = true;
@@ -135,6 +202,10 @@ export default {
       this.fetchCodeQuality();
     }
 
+    if (this.shouldRenderPerformance) {
+      this.fetchPerformance();
+    }
+
     if (this.shouldRenderSecurityReport) {
       this.fetchSecurity();
     }
@@ -167,6 +238,17 @@ export default {
         :unresolvedIssues="mr.codeclimateMetrics.newIssues"
         :resolvedIssues="mr.codeclimateMetrics.resolvedIssues"
         />
+      <collapsible-section
+        class="js-performance-widget"
+        v-if="shouldRenderPerformance"
+        type="performance"
+        :status="performanceStatus"
+        loading-text="Loading performance report"
+        error-text="Failed to load performance report"
+        :success-text="performanceText"
+        :unresolvedIssues="mr.performanceMetrics.degraded"
+        :resolvedIssues="mr.performanceMetrics.improved"
+        />
       <collapsible-section
         class="js-sast-widget"
         v-if="shouldRenderSecurityReport"

ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js

@@ -36,6 +36,10 @@ export default class MRWidgetService extends CEWidgetService {
   }
 
   fetchReport(endpoint) { // eslint-disable-line
+    if (endpoint === '/performance_head' || endpoint === '/performance_base') {
+      return Promise.resolve([]);
+    }
+
     return Vue.http.get(endpoint).then(res => res.json());
   }
 }

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

@@ -4,6 +4,7 @@ export default class MergeRequestStore extends CEMergeRequestStore {
   constructor(data) {
     super(data);
     this.initCodeclimate(data);
+    this.initPerformanceReport(data);
     this.initSecurityReport(data);
   }
 
@@ -57,6 +58,21 @@ export default class MergeRequestStore extends CEMergeRequestStore {
     };
   }
 
+  initPerformanceReport(data) {
+    this.performance = data.performance;
+
+    // use mock data (see mr_widget_service.js)
+    this.performance = {
+      head_path: '/performance_head',
+      base_path: '/performance_base',
+    };
+
+    this.performanceMetrics = {
+      improved: [],
+      degraded: [],
+    };
+  }
+
   initSecurityReport(data) {
     this.sast = data.sast;
     this.securityReport = [];
@@ -79,6 +95,25 @@ export default class MergeRequestStore extends CEMergeRequestStore {
       parsedHeadIssues,
     );
   }
+
+  comparePerformanceMetrics(headMetrics, baseMetrics) {
+    // eslint-disable-next-line
+    console.log(headMetrics, baseMetrics);
+
+    this.performanceMetrics.improved = [
+      {
+        name: 'Overall Score: 55',
+        path: '/foo/bar',
+      },
+    ];
+    this.performanceMetrics.degraded = [
+      {
+        name: 'Overall Score: 54',
+        path: '/foo/bar/bin',
+      },
+    ];
+  }
+
   /**
    * In order to reuse the same component we need
    * to set both codequality and security issues to have the same data structure: