Fix i18n issue

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

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

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

app/assets/javascripts/performance_bar/index.js

 /* eslint-disable @gitlab/require-i18n-strings */
 import Vue from 'vue';
 import axios from '~/lib/utils/axios_utils';
+import { s__ } from '~/locale';
 import Translate from '~/vue_shared/translate';
 
 import initPerformanceBarLog from './performance_bar_log';
@@ -82,9 +83,9 @@ const initPerformanceBar = (el) => {
             const domContentLoaded = Math.round(navigationEntries[0].domContentLoadedEventEnd);
 
             summary = {
-              Backend: backend,
-              'First contentful paint': firstContentfulPaint,
-              'Dom content loaded': domContentLoaded,
+              [s__('PerformanceBar|Backend')]: backend,
+              [s__('PerformanceBar|First contentful paint')]: firstContentfulPaint,
+              [s__('PerformanceBar|Dom content loaded')]: domContentLoaded,
             };
 
             durationString = `${backend} | ${firstContentfulPaint} | ${domContentLoaded}`;
@@ -122,7 +123,7 @@ const initPerformanceBar = (el) => {
           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 ? `${nf.format(entry.transferSize)} ${s__('bytes')}` : 'cached',
         };
       },
     },

changelogs/unreleased/qmnguyen0711-rollout-performance-bar-sort-order.yml

+---
+title: Enable chronological sort order for other items in the performance bar
+merge_request: 58572
+author:
+type: changed

spec/frontend/performance_bar/components/detailed_metric_spec.js

@@ -131,8 +131,8 @@ describe('detailedMetric', () => {
                 details: requestDetails,
                 warnings: ['gitaly calls: 456 over 30'],
                 summaryOptions: {
-                  hideTotal: true
-                }
+                  hideTotal: true,
+                },
               },
             },
           },
@@ -155,8 +155,8 @@ describe('detailedMetric', () => {
                 details: requestDetails,
                 warnings: ['gitaly calls: 456 over 30'],
                 summaryOptions: {
-                  hideDuration: true
-                }
+                  hideDuration: true,
+                },
               },
             },
           },
@@ -184,8 +184,8 @@ describe('detailedMetric', () => {
                 },
                 summaryOptions: {
                   hideDuration: true,
-                  hideTotal: true
-                }
+                  hideTotal: true,
+                },
               },
             },
           },
@@ -193,10 +193,7 @@ describe('detailedMetric', () => {
       });
 
       it('displays a summary section', () => {
-        expect(findAllSummaryItems()).toEqual([
-          'In controllers 100',
-          'In middlewares 20',
-        ]);
+        expect(findAllSummaryItems()).toEqual(['In controllers 100', 'In middlewares 20']);
       });
     });