Add latest changes from gitlab-org/gitlab@master

4 files changed, 24 insertions, 54 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 710f49b833c..0f744e858f2 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -134,6 +134,7 @@ export default {
   methods: {
     changeCurrentRequest(newRequestId) {
       this.currentRequest = newRequestId;
+      this.$emit('change-request', newRequestId);
     },
     flamegraphPath(mode) {
       return mergeUrlParams(
diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue
index a46ac620f48..ffc22c2113d 100644
--- a/app/assets/javascripts/performance_bar/components/request_selector.vue
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -1,15 +1,5 @@
 <script>
-import { GlPopover, GlSafeHtmlDirective } from '@gitlab/ui';
-import { glEmojiTag } from '~/emoji';
-import { n__ } from '~/locale';
-
 export default {
-  components: {
-    GlPopover,
-  },
-  directives: {
-    SafeHtml: GlSafeHtmlDirective,
-  },
   props: {
     currentRequest: {
       type: Object,
@@ -25,27 +15,11 @@ export default {
       currentRequestId: this.currentRequest.id,
     };
   },
-  computed: {
-    requestsWithWarnings() {
-      return this.requests.filter((request) => request.hasWarnings);
-    },
-    warningMessage() {
-      return n__(
-        '%d request with warnings',
-        '%d requests with warnings',
-        this.requestsWithWarnings.length,
-      );
-    },
-  },
   watch: {
     currentRequestId(newRequestId) {
       this.$emit('change-current-request', newRequestId);
     },
   },
-  methods: {
-    glEmojiTag,
-  },
-  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
 </script>
 <template>
@@ -58,19 +32,7 @@ export default {
         data-qa-selector="request_dropdown_option"
       >
         {{ request.truncatedUrl }}
-        <span v-if="request.hasWarnings">(!)</span>
       </option>
     </select>
-    <span v-if="requestsWithWarnings.length" class="gl-cursor-default">
-      <span
-        id="performance-bar-request-selector-warning"
-        v-safe-html:[$options.safeHtmlConfig]="glEmojiTag('warning')"
-      ></span>
-      <gl-popover
-        placement="bottom"
-        target="performance-bar-request-selector-warning"
-        :content="warningMessage"
-      />
-    </span>
   </div>
 </template>
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index eae424ae4ae..e7f84eacdca 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -1,5 +1,6 @@
 import '../webpack';
 
+import { isEmpty } from 'lodash';
 import Vue from 'vue';
 import axios from '~/lib/utils/axios_utils';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
@@ -37,9 +38,10 @@ const initPerformanceBar = (el) => {
       };
     },
     mounted() {
-      PerformanceBarService.registerInterceptor(this.peekUrl, this.loadRequestDetails);
+      PerformanceBarService.registerInterceptor(this.peekUrl, this.addRequest);
 
-      this.loadRequestDetails(this.requestId, window.location.href);
+      this.addRequest(this.requestId, window.location.href);
+      this.loadRequestDetails(this.requestId);
     },
     beforeDestroy() {
       PerformanceBarService.removeInterceptor();
@@ -51,26 +53,32 @@ const initPerformanceBar = (el) => {
           // want to trace the request.
           axios.get(urlOrRequestId);
         } else {
-          this.loadRequestDetails(urlOrRequestId, urlOrRequestId);
+          this.addRequest(urlOrRequestId, urlOrRequestId);
         }
       },
-      loadRequestDetails(requestId, requestUrl) {
+      addRequest(requestId, requestUrl) {
         if (!this.store.canTrackRequest(requestUrl)) {
           return;
         }
 
         this.store.addRequest(requestId, requestUrl);
+      },
+      loadRequestDetails(requestId) {
+        const request = this.store.findRequest(requestId);
+
+        if (request && isEmpty(request.details)) {
+          return PerformanceBarService.fetchRequestDetails(this.peekUrl, requestId)
+            .then((res) => {
+              this.store.addRequestDetails(requestId, res.data);
+              if (this.requestId === requestId) this.collectFrontendPerformanceMetrics();
+            })
+            .catch(() =>
+              // eslint-disable-next-line no-console
+              console.warn(`Error getting performance bar results for ${requestId}`),
+            );
+        }
 
-        PerformanceBarService.fetchRequestDetails(this.peekUrl, requestId)
-          .then((res) => {
-            this.store.addRequestDetails(requestId, res.data);
-
-            if (this.requestId === requestId) this.collectFrontendPerformanceMetrics();
-          })
-          .catch(() =>
-            // eslint-disable-next-line no-console
-            console.warn(`Error getting performance bar results for ${requestId}`),
-          );
+        return Promise.resolve();
       },
       collectFrontendPerformanceMetrics() {
         if (performance) {
@@ -143,6 +151,7 @@ const initPerformanceBar = (el) => {
         },
         on: {
           'add-request': this.addRequestManually,
+          'change-request': this.loadRequestDetails,
         },
       });
     },
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 51a8eb5ca69..5a69960e4d9 100644
--- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
+++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
@@ -12,7 +12,6 @@ export default class PerformanceBarStore {
         url: requestUrl,
         truncatedUrl: shortUrl,
         details: {},
-        hasWarnings: false,
       });
     }
 
@@ -27,7 +26,6 @@ export default class PerformanceBarStore {
     const request = this.findRequest(requestId);
 
     request.details = requestDetails.data;
-    request.hasWarnings = requestDetails.has_warnings;
 
     return request;
   }