Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

6 files changed, 45 insertions, 72 deletions

diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index 1bb82e1d8e6..0640faae8b7 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, GlModal, GlModalDirective, GlSegmentedControl } from '@gitlab/ui';
+import { GlButton, GlDropdown, GlDropdownItem, GlModal, GlModalDirective } from '@gitlab/ui';
 
 import { __, s__ } from '~/locale';
 import { sortOrders, sortOrderOptions } from '../constants';
@@ -9,8 +9,9 @@ export default {
   components: {
     RequestWarning,
     GlButton,
+    GlDropdown,
+    GlDropdownItem,
     GlModal,
-    GlSegmentedControl,
   },
   directives: {
     'gl-modal': GlModalDirective,
@@ -156,13 +157,19 @@ export default {
             </div>
           </div>
         </div>
-        <gl-segmented-control
+        <gl-dropdown
           v-if="displaySortOrder"
+          :text="$options.sortOrderOptions[sortOrder]"
+          right
           data-testid="performance-bar-sort-order"
-          :options="$options.sortOrderOptions"
-          :checked="sortOrder"
-          @input="changeSortOrder"
-        />
+        >
+          <gl-dropdown-item
+            v-for="option in Object.keys($options.sortOrderOptions)"
+            :key="option"
+            @click="changeSortOrder(option)"
+            >{{ $options.sortOrderOptions[option] }}</gl-dropdown-item
+          >
+        </gl-dropdown>
       </div>
       <hr />
       <table class="table gl-table">
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/constants.js b/app/assets/javascripts/performance_bar/constants.js
index 9659383edd9..09745797424 100644
--- a/app/assets/javascripts/performance_bar/constants.js
+++ b/app/assets/javascripts/performance_bar/constants.js
@@ -5,13 +5,7 @@ export const sortOrders = {
   CHRONOLOGICAL: 'chronological',
 };
 
-export const sortOrderOptions = [
-  {
-    value: sortOrders.DURATION,
-    text: s__('PerformanceBar|Sort by duration'),
-  },
-  {
-    value: sortOrders.CHRONOLOGICAL,
-    text: s__('PerformanceBar|Sort chronologically'),
-  },
-];
+export const sortOrderOptions = {
+  [sortOrders.DURATION]: s__('PerformanceBar|Sort by duration'),
+  [sortOrders.CHRONOLOGICAL]: s__('PerformanceBar|Sort chronologically'),
+};
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index eb5b50dd1ec..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) {
@@ -82,7 +90,9 @@ const initPerformanceBar = (el) => {
           let summary = {};
           if (navigationEntries.length > 0) {
             const backend = Math.round(navigationEntries[0].responseEnd);
-            const firstContentfulPaint = Math.round(paintEntries[1].startTime);
+            const firstContentfulPaint = Math.round(
+              paintEntries.find((entry) => entry.name === 'first-contentful-paint')?.startTime,
+            );
             const domContentLoaded = Math.round(navigationEntries[0].domContentLoadedEventEnd);
 
             summary = {
@@ -141,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;
   }