Add latest changes from gitlab-org/gitlab@master

3 files changed, 32 insertions, 11 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 8ce653bf1fb..a0272b148e3 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -80,6 +80,15 @@ export default {
       }
       return '';
     },
+    downloadPath() {
+      const data = JSON.stringify(this.requests);
+      const blob = new Blob([data], { type: 'text/plain' });
+      return window.URL.createObjectURL(blob);
+    },
+    downloadName() {
+      const fileName = this.requests[0].truncatedUrl;
+      return `${fileName}_perf_bar_${Date.now()}.json`;
+    },
   },
   mounted() {
     this.currentRequest = this.requestId;
@@ -121,6 +130,9 @@ export default {
         <a :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>
+      </div>
       <request-selector
         v-if="currentRequest"
         :current-request="currentRequest"
diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue
index 793aba3189b..75ec924ef64 100644
--- a/app/assets/javascripts/performance_bar/components/request_selector.vue
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -40,16 +40,6 @@ export default {
     },
   },
   methods: {
-    truncatedUrl(requestUrl) {
-      const components = requestUrl.replace(/\/$/, '').split('/');
-      let truncated = components[components.length - 1];
-
-      if (truncated.match(/^\d+$/)) {
-        truncated = `${components[components.length - 2]}/${truncated}`;
-      }
-
-      return truncated;
-    },
     glEmojiTag,
   },
 };
@@ -63,7 +53,7 @@ export default {
         :value="request.id"
         class="qa-performance-bar-request"
       >
-        {{ truncatedUrl(request.url) }}
+        {{ request.truncatedUrl }}
         <span v-if="request.hasWarnings">(!)</span>
       </option>
     </select>
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 64f4f5e0c76..12d0ee86218 100644
--- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
+++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
@@ -5,9 +5,12 @@ export default class PerformanceBarStore {
 
   addRequest(requestId, requestUrl) {
     if (!this.findRequest(requestId)) {
+      const shortUrl = PerformanceBarStore.truncateUrl(requestUrl);
+
       this.requests.push({
         id: requestId,
         url: requestUrl,
+        truncatedUrl: shortUrl,
         details: {},
         hasWarnings: false,
       });
@@ -36,4 +39,20 @@ export default class PerformanceBarStore {
   canTrackRequest(requestUrl) {
     return this.requests.filter(request => request.url === requestUrl).length < 2;
   }
+
+  static truncateUrl(requestUrl) {
+    const [rootAndQuery] = requestUrl.split('#');
+    const [root, query] = rootAndQuery.split('?');
+    const components = root.replace(/\/$/, '').split('/');
+
+    let truncated = components[components.length - 1];
+    if (truncated.match(/^\d+$/)) {
+      truncated = `${components[components.length - 2]}/${truncated}`;
+    }
+    if (query) {
+      truncated += `?${query}`;
+    }
+
+    return truncated;
+  }
 }