Add latest changes from gitlab-org/gitlab@master

3 files changed, 40 insertions, 20 deletions

diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index 57569340aa5..e5b26a00c4c 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/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?.hideTotal) {
+        summary[s__('Total')] = this.metricDetails.calls;
+      }
+
+      if (!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) {
@@ -133,7 +139,7 @@ export default {
   >
     <gl-button v-gl-modal="modalId" class="gl-mr-2" type="button" variant="link">
       <span
-        class="gl-text-blue-300 gl-font-weight-bold"
+        class="gl-text-blue-200 gl-font-weight-bold"
         data-testid="performance-bar-details-label"
       >
         {{ metricDetailsLabel }}
@@ -208,7 +214,7 @@ export default {
         <div></div>
       </template>
     </gl-modal>
-    {{ title }}
+    <span class="gl-text-white">{{ title }}</span>
     <request-warning :html-id="htmlId" :warnings="warnings" />
   </div>
 </template>
diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 4f79d99a49b..ebe9c4eee2f 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -136,7 +136,7 @@ export default {
       <div id="peek-view-host" class="view">
         <span
           v-if="hasHost"
-          class="current-host"
+          class="current-host gl-text-white"
           :class="{ canary: currentRequest.details.host.canary }"
         >
           <span v-html="birdEmoji"></span>
@@ -157,16 +157,16 @@ export default {
         id="peek-view-trace"
         class="view"
       >
-        <a class="gl-text-blue-300" :href="currentRequest.details.tracing.tracing_url">{{
+        <a class="gl-text-blue-200" :href="currentRequest.details.tracing.tracing_url">{{
           s__('PerformanceBar|Trace')
         }}</a>
       </div>
       <div v-if="currentRequest.details" id="peek-download" class="view">
-        <a class="gl-text-blue-300" :download="downloadName" :href="downloadPath">{{
+        <a class="gl-text-blue-200" :download="downloadName" :href="downloadPath">{{
           s__('PerformanceBar|Download')
         }}</a>
       </div>
-      <a v-if="statsUrl" class="gl-text-blue-300 view" :href="statsUrl">{{
+      <a v-if="statsUrl" class="gl-text-blue-200 view" :href="statsUrl">{{
         s__('PerformanceBar|Stats')
       }}</a>
       <request-selector
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',
         };
       },
     },