1 files changed, 23 insertions, 9 deletions

diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index 51b6108868f..d8aab25a6a8 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -1,6 +1,7 @@
-/* eslint-disable @gitlab/require-i18n-strings */
 import Vue from 'vue';
 import axios from '~/lib/utils/axios_utils';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+import { s__ } from '~/locale';
 import Translate from '~/vue_shared/translate';
 
 import initPerformanceBarLog from './performance_bar_log';
@@ -75,40 +76,53 @@ 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 = {
+              [s__('PerformanceBar|Backend')]: backend,
+              [s__('PerformanceBar|First Contentful Paint')]: firstContentfulPaint,
+              [s__('PerformanceBar|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',
+          size: entry.transferSize ? numberToHumanSize(entry.transferSize) : 'cached',
         };
       },
     },