Add latest changes from gitlab-org/gitlab@master

5 files changed, 20 insertions, 13 deletions

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 cce0976f66f..1da4a8fea73 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -121,7 +121,7 @@ export default {
       return window.URL.createObjectURL(blob);
     },
     downloadName() {
-      const fileName = this.requests[0].truncatedUrl;
+      const fileName = this.requests[0].displayName;
       return `${fileName}_perf_bar_${Date.now()}.json`;
     },
     memoryReportPath() {
diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue
index ffc22c2113d..f2177e102ec 100644
--- a/app/assets/javascripts/performance_bar/components/request_selector.vue
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -31,7 +31,7 @@ export default {
         :value="request.id"
         data-qa-selector="request_dropdown_option"
       >
-        {{ request.truncatedUrl }}
+        {{ request.displayName }}
       </option>
     </select>
   </div>
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index e7f84eacdca..84fe14fe056 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -56,12 +56,12 @@ const initPerformanceBar = (el) => {
           this.addRequest(urlOrRequestId, urlOrRequestId);
         }
       },
-      addRequest(requestId, requestUrl) {
+      addRequest(requestId, requestUrl, operationName) {
         if (!this.store.canTrackRequest(requestUrl)) {
           return;
         }
 
-        this.store.addRequest(requestId, requestUrl);
+        this.store.addRequest(requestId, requestUrl, operationName);
       },
       loadRequestDetails(requestId) {
         const request = this.store.findRequest(requestId);
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 4c0293f5b78..e67143f3ede 100644
--- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js
+++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
@@ -10,13 +10,15 @@ export default class PerformanceBarService {
 
   static registerInterceptor(peekUrl, callback) {
     PerformanceBarService.interceptor = (response) => {
-      const [fireCallback, requestId, requestUrl] = PerformanceBarService.callbackParams(
-        response,
-        peekUrl,
-      );
+      const [
+        fireCallback,
+        requestId,
+        requestUrl,
+        operationName,
+      ] = PerformanceBarService.callbackParams(response, peekUrl);
 
       if (fireCallback) {
-        callback(requestId, requestUrl);
+        callback(requestId, requestUrl, operationName);
       }
 
       return response;
@@ -36,7 +38,8 @@ export default class PerformanceBarService {
     const cachedResponse =
       response.headers && parseBoolean(response.headers['x-gitlab-from-cache']);
     const fireCallback = requestUrl !== peekUrl && Boolean(requestId) && !cachedResponse;
+    const operationName = response.config?.operationName;
 
-    return [fireCallback, requestId, requestUrl];
+    return [fireCallback, requestId, requestUrl, operationName];
   }
 }
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 5a69960e4d9..2011604534c 100644
--- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
+++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
@@ -3,15 +3,19 @@ export default class PerformanceBarStore {
     this.requests = [];
   }
 
-  addRequest(requestId, requestUrl) {
+  addRequest(requestId, requestUrl, operationName) {
     if (!this.findRequest(requestId)) {
-      const shortUrl = PerformanceBarStore.truncateUrl(requestUrl);
+      let displayName = PerformanceBarStore.truncateUrl(requestUrl);
+
+      if (operationName) {
+        displayName += ` (${operationName})`;
+      }
 
       this.requests.push({
         id: requestId,
         url: requestUrl,
-        truncatedUrl: shortUrl,
         details: {},
+        displayName,
       });
     }