Add more information into the frontend resources in performance bar

Issue https://gitlab.com/groups/gitlab-org/-/epics/5590

app/assets/javascripts/performance_bar/components/detailed_metric.vue

@@ -54,11 +54,17 @@ export default {
       return this.currentRequest.details[this.metric];
     },
     metricDetailsSummary() {
-      return {
-        [s__('Total')]: this.metricDetails.calls,
-        [s__('PerformanceBar|Total duration')]: this.metricDetails.duration,
-        ...(this.metricDetails.summary || {}),
-      };
+      const summary = {}
+
+      if (!this.metricDetails.summaryOptions || !this.metricDetails.summaryOptions.hideTotal) {
+        summary[s__('Total')] = this.metricDetails.calls
+      }
+
+      if (!this.metricDetails.summaryOptions || !this.metricDetails.summaryOptions.hideDuration) {
+        summary[s__('PerformanceBar|Total duration')] = this.metricDetails.duration
+      }
+
+      return {...summary, ...(this.metricDetails.summary || {})}
     },
     metricDetailsLabel() {
       if (this.metricDetails.duration && this.metricDetails.calls) {

app/assets/javascripts/performance_bar/index.js

@@ -75,37 +75,51 @@ const initPerformanceBar = (el) => {
           const resourceEntries = performance.getEntriesByType('resource');
 
           let durationString = '';
+          let summary = {};
           if (navigationEntries.length > 0) {
-            durationString = `${Math.round(navigationEntries[0].responseEnd)} | `;
-            durationString += `${Math.round(paintEntries[1].startTime)} | `;
-            durationString += ` ${Math.round(navigationEntries[0].domContentLoadedEventEnd)}`;
+            const backend = Math.round(navigationEntries[0].responseEnd);
+            const firstContentfulPaint = Math.round(paintEntries[1].startTime);
+            const domContentLoaded = Math.round(navigationEntries[0].domContentLoadedEventEnd);
+
+            summary = {
+              Backend: backend,
+              'First contentful paint': firstContentfulPaint,
+              'Dom content loaded': domContentLoaded,
+            };
+
+            durationString = `${backend} | ${firstContentfulPaint} | ${domContentLoaded}`;
           }
 
           let newEntries = resourceEntries.map(this.transformResourceEntry);
 
-          this.updateFrontendPerformanceMetrics(durationString, newEntries);
+          this.updateFrontendPerformanceMetrics(durationString, summary, newEntries);
 
           if ('PerformanceObserver' in window) {
             // We start observing for more incoming timings
             const observer = new PerformanceObserver((list) => {
               newEntries = newEntries.concat(list.getEntries().map(this.transformResourceEntry));
-              this.updateFrontendPerformanceMetrics(durationString, newEntries);
+              this.updateFrontendPerformanceMetrics(durationString, summary, newEntries);
             });
 
             observer.observe({ entryTypes: ['resource'] });
           }
         }
       },
-      updateFrontendPerformanceMetrics(durationString, requestEntries) {
+      updateFrontendPerformanceMetrics(durationString, summary, requestEntries) {
         this.store.setRequestDetailsData(this.requestId, 'total', {
           duration: durationString,
           calls: requestEntries.length,
           details: requestEntries,
+          summaryOptions: {
+            hideDuration: true,
+          },
+          summary,
         });
       },
       transformResourceEntry(entry) {
         const nf = new Intl.NumberFormat();
         return {
+          start: entry.startTime,
           name: entry.name.replace(document.location.origin, ''),
           duration: Math.round(entry.duration),
           size: entry.transferSize ? `${nf.format(entry.transferSize)} bytes` : 'cached',

spec/frontend/performance_bar/components/detailed_metric_spec.js

@@ -120,6 +120,86 @@ describe('detailedMetric', () => {
       });
     });
 
+    describe('when the details have summaryOptions > hideTotal option', () => {
+      beforeEach(() => {
+        createComponent({
+          currentRequest: {
+            details: {
+              gitaly: {
+                duration: '123ms',
+                calls: 456,
+                details: requestDetails,
+                warnings: ['gitaly calls: 456 over 30'],
+                summaryOptions: {
+                  hideTotal: true
+                }
+              },
+            },
+          },
+        });
+      });
+
+      it('displays a summary section', () => {
+        expect(findAllSummaryItems()).toEqual(['Total duration 123ms']);
+      });
+    });
+
+    describe('when the details have summaryOptions > hideDuration option', () => {
+      beforeEach(() => {
+        createComponent({
+          currentRequest: {
+            details: {
+              gitaly: {
+                duration: '123ms',
+                calls: 456,
+                details: requestDetails,
+                warnings: ['gitaly calls: 456 over 30'],
+                summaryOptions: {
+                  hideDuration: true
+                }
+              },
+            },
+          },
+        });
+      });
+
+      it('displays a summary section', () => {
+        expect(findAllSummaryItems()).toEqual(['Total 456']);
+      });
+    });
+
+    describe('when the details have both summary and summaryOptions field', () => {
+      beforeEach(() => {
+        createComponent({
+          currentRequest: {
+            details: {
+              gitaly: {
+                duration: '123ms',
+                calls: 456,
+                details: requestDetails,
+                warnings: ['gitaly calls: 456 over 30'],
+                summary: {
+                  'In controllers': 100,
+                  'In middlewares': 20,
+                },
+                summaryOptions: {
+                  hideDuration: true,
+                  hideTotal: true
+                }
+              },
+            },
+          },
+        });
+      });
+
+      it('displays a summary section', () => {
+        expect(findAllSummaryItems()).toEqual([
+          'In controllers 100',
+          'In middlewares 20',
+        ]);
+      });
+    });
+
     describe("when the details don't have a start field", () => {
       beforeEach(() => {
         createComponent({