Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42

6 files changed, 29 insertions, 20 deletions

diff --git a/app/assets/javascripts/performance_bar/components/add_request.vue b/app/assets/javascripts/performance_bar/components/add_request.vue
index 54bca8a1b67..d48a5acb85c 100644
--- a/app/assets/javascripts/performance_bar/components/add_request.vue
+++ b/app/assets/javascripts/performance_bar/components/add_request.vue
@@ -27,7 +27,7 @@ export default {
   <div id="peek-view-add-request" class="view">
     <form class="form-inline" @submit.prevent>
       <button
-        class="btn-blank btn-link bold"
+        class="btn-blank btn-link bold gl-text-blue-300"
         type="button"
         :title="__(`Add request manually`)"
         @click="toggleInput"
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index 930c5e50511..de4bbb36141 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlIcon, GlModal, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import RequestWarning from './request_warning.vue';
 
 export default {
@@ -7,7 +7,6 @@ export default {
     RequestWarning,
     GlButton,
     GlModal,
-    GlIcon,
   },
   directives: {
     'gl-modal': GlModalDirective,
@@ -94,10 +93,10 @@ export default {
     data-qa-selector="detailed_metric_content"
   >
     <gl-button v-gl-modal="modalId" class="gl-mr-2" type="button" variant="link">
-      {{ metricDetailsLabel }}
+      <span class="gl-text-blue-300 gl-font-weight-bold">{{ metricDetailsLabel }}</span>
     </gl-button>
-    <gl-modal :modal-id="modalId" :title="header" size="lg" modal-class="gl-mt-7" scrollable>
-      <table class="table">
+    <gl-modal :modal-id="modalId" :title="header" size="lg" footer-class="d-none" scrollable>
+      <table class="table gl-table">
         <template v-if="detailsList.length">
           <tr v-for="(item, index) in detailsList" :key="index">
             <td>
@@ -116,14 +115,16 @@ export default {
                   {{ item[key] }}
                   <gl-button
                     v-if="keyIndex == 0 && item.backtrace"
-                    class="gl-ml-3"
+                    class="gl-ml-3 button-ellipsis-horizontal"
                     data-testid="backtrace-expand-btn"
-                    type="button"
+                    category="primary"
+                    variant="default"
+                    icon="ellipsis_h"
+                    size="small"
+                    :selected="itemHasOpenedBacktrace(index)"
                     :aria-label="__('Toggle backtrace')"
                     @click="toggleBacktrace(index)"
-                  >
-                    <gl-icon :size="12" name="ellipsis_h" />
-                  </gl-button>
+                  />
                 </div>
                 <pre v-if="itemHasOpenedBacktrace(index)" class="backtrace-row mt-2">{{
                   item.backtrace
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 e38771785b7..85789cd1fdf 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -2,10 +2,10 @@
 /* eslint-disable vue/no-v-html */
 import { glEmojiTag } from '~/emoji';
 
+import { s__ } from '~/locale';
 import AddRequest from './add_request.vue';
 import DetailedMetric from './detailed_metric.vue';
 import RequestSelector from './request_selector.vue';
-import { s__ } from '~/locale';
 
 export default {
   components: {
@@ -64,6 +64,11 @@ export default {
       keys: ['request', 'body'],
     },
     {
+      metric: 'external-http',
+      header: s__('PerformanceBar|External Http calls'),
+      keys: ['label', 'code', 'proxy', 'error'],
+    },
+    {
       metric: 'total',
       header: s__('PerformanceBar|Frontend resources'),
       keys: ['name', 'size'],
@@ -120,7 +125,7 @@ export default {
   <div id="js-peek" :class="env">
     <div
       v-if="currentRequest"
-      class="d-flex container-fluid container-limited"
+      class="d-flex container-fluid container-limited justify-content-center"
       data-qa-selector="performance_bar"
     >
       <div id="peek-view-host" class="view">
@@ -147,11 +152,15 @@ export default {
         id="peek-view-trace"
         class="view"
       >
-        <a :href="currentRequest.details.tracing.tracing_url">{{ s__('PerformanceBar|trace') }}</a>
+        <a class="gl-text-blue-300" :href="currentRequest.details.tracing.tracing_url">{{
+          s__('PerformanceBar|trace')
+        }}</a>
       </div>
       <add-request v-on="$listeners" />
       <div v-if="currentRequest.details" id="peek-download" class="view">
-        <a :download="downloadName" :href="downloadPath">{{ s__('PerformanceBar|Download') }}</a>
+        <a class="gl-text-blue-300" :download="downloadName" :href="downloadPath">{{
+          s__('PerformanceBar|Download')
+        }}</a>
       </div>
       <request-selector
         v-if="currentRequest"
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index 0d5c294ea56..522e34753e9 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -1,13 +1,12 @@
 /* eslint-disable @gitlab/require-i18n-strings */
 import Vue from 'vue';
-import Translate from '~/vue_shared/translate';
 import axios from '~/lib/utils/axios_utils';
+import Translate from '~/vue_shared/translate';
 
+import initPerformanceBarLog from './performance_bar_log';
 import PerformanceBarService from './services/performance_bar_service';
 import PerformanceBarStore from './stores/performance_bar_store';
 
-import initPerformanceBarLog from './performance_bar_log';
-
 Vue.use(Translate);
 
 const initPerformanceBar = (el) => {
diff --git a/app/assets/javascripts/performance_bar/performance_bar_log.js b/app/assets/javascripts/performance_bar/performance_bar_log.js
index c61b0cb32e8..aad99e2604e 100644
--- a/app/assets/javascripts/performance_bar/performance_bar_log.js
+++ b/app/assets/javascripts/performance_bar/performance_bar_log.js
@@ -43,7 +43,7 @@ const logUserTimingMetrics = () => {
 const initPerformanceBarLog = () => {
   console.log(
     `%c ${String.fromCodePoint(0x1f98a)} GitLab performance bar`,
-    'width:100%;background-color: #292961; color: #FFFFFF; font-size:24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto; padding: 10px;display:block;padding-right: 100px;',
+    'width:100%; background-color: #292961; color: #FFFFFF; padding: 10px; display:block;',
   );
 
   initVitalsLog();
diff --git a/app/assets/javascripts/performance_bar/services/performance_bar_service.js b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
index 38255b3a37d..a614342c858 100644
--- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js
+++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
@@ -1,5 +1,5 @@
-import axios from '../../lib/utils/axios_utils';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import axios from '../../lib/utils/axios_utils';
 
 export default class PerformanceBarService {
   static interceptor = null;