Add performance bar summary section in the frontend side

Issue https://gitlab.com/gitlab-org/gitlab/-/issues/324649

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

@@ -48,6 +48,17 @@ export default {
     metricDetails() {
       return this.currentRequest.details[this.metric];
     },
+    metricDetailsSummary() {
+      let summary = {
+        [s__('PerformanceBar|Total')]: this.metricDetails.calls,
+        [s__('PerformanceBar|Total duration')]: this.metricDetails.duration,
+      };
+      if (this.metricDetails.summary) {
+        summary = { ...summary, ...this.metricDetails.summary };
+      }
+
+      return summary;
+    },
     metricDetailsLabel() {
       return this.metricDetails.duration
         ? `${this.metricDetails.duration} / ${this.metricDetails.calls}`
@@ -96,6 +107,21 @@ export default {
       <span class="gl-text-blue-300 gl-font-weight-bold">{{ metricDetailsLabel }}</span>
     </gl-button>
     <gl-modal :modal-id="modalId" :title="header" size="lg" footer-class="d-none" scrollable>
+      <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
+        <div class="gl-display-flex gl-align-items-center" data-testid="performance-bar-summary">
+          <div
+            v-for="(value, name) in metricDetailsSummary"
+            v-if="value"
+            :key="name"
+            class="gl-pr-8"
+            data-testid="performance-bar-summary-item"
+          >
+            <div>{{ name }}</div>
+            <div class="gl-font-size-h1 gl-font-weight-bold">{{ value }}</div>
+          </div>
+        </div>
+      </div>
+      <hr />
       <table class="table gl-table">
         <template v-if="detailsList.length">
           <tr v-for="(item, index) in detailsList" :key="index">

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

@@ -40,7 +40,7 @@ export default {
       metric: 'active-record',
       title: 'pg',
       header: s__('PerformanceBar|SQL queries'),
-      keys: ['sql', 'cached', 'db_role'],
+      keys: ['sql', 'cached', 'transaction', 'db_role'],
     },
     {
       metric: 'bullet',
@@ -69,6 +69,7 @@ export default {
     },
     {
       metric: 'external-http',
+      title: 'external',
       header: s__('PerformanceBar|External Http calls'),
       keys: ['label', 'code', 'proxy', 'error'],
     },
@@ -157,15 +158,17 @@ export default {
         class="view"
       >
         <a class="gl-text-blue-300" :href="currentRequest.details.tracing.tracing_url">{{
-          s__('PerformanceBar|trace')
+          s__('PerformanceBar|Trace')
         }}</a>
       </div>
-      <add-request v-on="$listeners" />
       <div v-if="currentRequest.details" id="peek-download" class="view">
         <a class="gl-text-blue-300" :download="downloadName" :href="downloadPath">{{
           s__('PerformanceBar|Download')
         }}</a>
       </div>
+      <div v-if="statsUrl" id="peek-stats" class="view">
+        <a class="gl-text-blue-300" :href="statsUrl">{{ s__('PerformanceBar|Stats') }}</a>
+      </div>
       <request-selector
         v-if="currentRequest"
         :current-request="currentRequest"
@@ -173,9 +176,7 @@ export default {
         class="ml-auto"
         @change-current-request="changeCurrentRequest"
       />
-      <div v-if="statsUrl" id="peek-stats" class="view">
-        <a class="gl-text-blue-300" :href="statsUrl">{{ s__('PerformanceBar|Stats') }}</a>
-      </div>
+      <add-request v-on="$listeners" />
     </div>
   </div>
 </template>