Add latest changes from gitlab-org/gitlab@13-4-stable-ee

8 files changed, 68 insertions, 22 deletions

diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index ef24dbfb6ce..9f05ee5c7c2 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -1,14 +1,14 @@
 <script>
+import { GlIcon } from '@gitlab/ui';
 import RequestWarning from './request_warning.vue';
 
 import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     RequestWarning,
     GlModal: DeprecatedModal2,
-    Icon,
+    GlIcon,
   },
   props: {
     currentRequest: {
@@ -104,7 +104,7 @@ export default {
                     type="button"
                     :aria-label="__('Toggle backtrace')"
                   >
-                    <icon :size="12" name="ellipsis_h" />
+                    <gl-icon :size="12" name="ellipsis_h" />
                   </button>
                 </div>
                 <pre v-if="item.backtrace" class="backtrace-row js-toggle-content mt-2">{{
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 cccb5e1be06..165feb1b6aa 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -1,4 +1,5 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { glEmojiTag } from '~/emoji';
 
 import AddRequest from './add_request.vue';
diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue
index c22a648d17f..5a9d3a6d313 100644
--- a/app/assets/javascripts/performance_bar/components/request_selector.vue
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -1,4 +1,5 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { GlPopover } from '@gitlab/ui';
 import { glEmojiTag } from '~/emoji';
 import { n__ } from '~/locale';
diff --git a/app/assets/javascripts/performance_bar/components/request_warning.vue b/app/assets/javascripts/performance_bar/components/request_warning.vue
index 0128d5bd733..b61e1e5b7a9 100644
--- a/app/assets/javascripts/performance_bar/components/request_warning.vue
+++ b/app/assets/javascripts/performance_bar/components/request_warning.vue
@@ -1,4 +1,5 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { GlPopover } from '@gitlab/ui';
 import { glEmojiTag } from '~/emoji';
 
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index a294f3f36a6..f29b5f42d8f 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -5,14 +5,17 @@ import axios from '~/lib/utils/axios_utils';
 import PerformanceBarService from './services/performance_bar_service';
 import PerformanceBarStore from './stores/performance_bar_store';
 
-export default ({ container }) =>
-  new Vue({
-    el: container,
+import initPerformanceBarLog from './performance_bar_log';
+
+const initPerformanceBar = el => {
+  const performanceBarData = el.dataset;
+
+  return new Vue({
+    el,
     components: {
       PerformanceBarApp: () => import('./components/performance_bar_app.vue'),
     },
     data() {
-      const performanceBarData = document.querySelector(this.$options.el).dataset;
       const store = new PerformanceBarStore();
 
       return {
@@ -24,15 +27,12 @@ export default ({ container }) =>
       };
     },
     mounted() {
-      this.interceptor = PerformanceBarService.registerInterceptor(
-        this.peekUrl,
-        this.loadRequestDetails,
-      );
+      PerformanceBarService.registerInterceptor(this.peekUrl, this.loadRequestDetails);
 
       this.loadRequestDetails(this.requestId, window.location.href);
     },
     beforeDestroy() {
-      PerformanceBarService.removeInterceptor(this.interceptor);
+      PerformanceBarService.removeInterceptor();
     },
     methods: {
       addRequestManually(urlOrRequestId) {
@@ -121,3 +121,15 @@ export default ({ container }) =>
       });
     },
   });
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  const jsPeek = document.querySelector('#js-peek');
+  if (jsPeek) {
+    initPerformanceBar(jsPeek);
+  }
+});
+
+initPerformanceBarLog();
+
+export default initPerformanceBar;
diff --git a/app/assets/javascripts/performance_bar/performance_bar_log.js b/app/assets/javascripts/performance_bar/performance_bar_log.js
new file mode 100644
index 00000000000..638c544f2e1
--- /dev/null
+++ b/app/assets/javascripts/performance_bar/performance_bar_log.js
@@ -0,0 +1,28 @@
+/* eslint-disable no-console */
+import { getCLS, getFID, getLCP } from 'web-vitals';
+
+const initVitalsLog = () => {
+  const reportVital = data => {
+    console.log(`${String.fromCodePoint(0x1f4c8)} ${data.name} : `, data);
+  };
+
+  console.log(
+    `${String.fromCodePoint(
+      0x1f4d1,
+    )} To get the final web vital numbers reported you maybe need to switch away and back to the tab`,
+  );
+  getCLS(reportVital);
+  getFID(reportVital);
+  getLCP(reportVital);
+};
+
+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;',
+  );
+
+  initVitalsLog();
+};
+
+export default initPerformanceBarLog;
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 61b35b4b8f5..3c8303d102e 100644
--- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js
+++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
@@ -2,12 +2,14 @@ import axios from '../../lib/utils/axios_utils';
 import { parseBoolean } from '~/lib/utils/common_utils';
 
 export default class PerformanceBarService {
+  static interceptor = null;
+
   static fetchRequestDetails(peekUrl, requestId) {
     return axios.get(peekUrl, { params: { request_id: requestId } });
   }
 
   static registerInterceptor(peekUrl, callback) {
-    const interceptor = response => {
+    PerformanceBarService.interceptor = response => {
       const [fireCallback, requestId, requestUrl] = PerformanceBarService.callbackParams(
         response,
         peekUrl,
@@ -20,22 +22,20 @@ export default class PerformanceBarService {
       return response;
     };
 
-    return axios.interceptors.response.use(interceptor);
+    return axios.interceptors.response.use(PerformanceBarService.interceptor);
   }
 
-  static removeInterceptor(interceptor) {
-    axios.interceptors.response.eject(interceptor);
+  static removeInterceptor() {
+    axios.interceptors.response.eject(PerformanceBarService.interceptor);
+    PerformanceBarService.interceptor = null;
   }
 
   static callbackParams(response, peekUrl) {
     const requestId = response.headers && response.headers['x-request-id'];
-    // Get the request URL from response.config for Axios, and response for
-    // Vue Resource.
-    const requestUrl = (response.config || response).url;
-    const apiRequest = requestUrl && requestUrl.match(/^\/api\//);
+    const requestUrl = response.config?.url;
     const cachedResponse =
       response.headers && parseBoolean(response.headers['x-gitlab-from-cache']);
-    const fireCallback = requestUrl !== peekUrl && requestId && !apiRequest && !cachedResponse;
+    const fireCallback = requestUrl !== peekUrl && Boolean(requestId) && !cachedResponse;
 
     return [fireCallback, requestId, requestUrl];
   }
diff --git a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
index 6f443db47ed..8c88851f039 100644
--- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
+++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
@@ -47,7 +47,10 @@ export default class PerformanceBarStore {
   }
 
   canTrackRequest(requestUrl) {
-    return this.requests.filter(request => request.url === requestUrl).length < 2;
+    return (
+      requestUrl.endsWith('/api/graphql') ||
+      this.requests.filter(request => request.url === requestUrl).length < 2
+    );
   }
 
   static truncateUrl(requestUrl) {