Add latest changes from gitlab-org/gitlab@master

6 files changed, 95 insertions, 9 deletions

diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index f2d98cf07e1..7ce32032ed3 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -1,9 +1,12 @@
 <script>
+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,
   },
@@ -39,6 +42,16 @@ export default {
     detailsList() {
       return this.metricDetails.details;
     },
+    warnings() {
+      return this.metricDetails.warnings || [];
+    },
+    htmlId() {
+      if (this.currentRequest) {
+        return `performance-bar-warning-${this.currentRequest.id}-${this.metric}`;
+      }
+
+      return '';
+    },
   },
 };
 </script>
@@ -105,5 +118,6 @@ export default {
       <div slot="footer"></div>
     </gl-modal>
     {{ title }}
+    <request-warning :html-id="htmlId" :warnings="warnings" />
   </div>
 </template>
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 9ad6e75b86b..3b07eba02b7 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -1,14 +1,14 @@
 <script>
 import { glEmojiTag } from '~/emoji';
 
-import detailedMetric from './detailed_metric.vue';
-import requestSelector from './request_selector.vue';
+import DetailedMetric from './detailed_metric.vue';
+import RequestSelector from './request_selector.vue';
 import { s__ } from '~/locale';
 
 export default {
   components: {
-    detailedMetric,
-    requestSelector,
+    DetailedMetric,
+    RequestSelector,
   },
   props: {
     store: {
diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue
index 297507b85af..793aba3189b 100644
--- a/app/assets/javascripts/performance_bar/components/request_selector.vue
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -1,5 +1,12 @@
 <script>
+import { glEmojiTag } from '~/emoji';
+import { n__ } from '~/locale';
+import { GlPopover } from '@gitlab/ui';
+
 export default {
+  components: {
+    GlPopover,
+  },
   props: {
     currentRequest: {
       type: Object,
@@ -15,6 +22,18 @@ 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);
@@ -31,6 +50,7 @@ export default {
 
       return truncated;
     },
+    glEmojiTag,
   },
 };
 </script>
@@ -44,7 +64,16 @@ export default {
         class="qa-performance-bar-request"
       >
         {{ truncatedUrl(request.url) }}
+        <span v-if="request.hasWarnings">(!)</span>
       </option>
     </select>
+    <span v-if="requestsWithWarnings.length">
+      <span id="performance-bar-request-selector-warning" v-html="glEmojiTag('warning')"></span>
+      <gl-popover
+        target="performance-bar-request-selector-warning"
+        :content="warningMessage"
+        triggers="hover focus"
+      />
+    </span>
   </div>
 </template>
diff --git a/app/assets/javascripts/performance_bar/components/request_warning.vue b/app/assets/javascripts/performance_bar/components/request_warning.vue
new file mode 100644
index 00000000000..0da3c271214
--- /dev/null
+++ b/app/assets/javascripts/performance_bar/components/request_warning.vue
@@ -0,0 +1,41 @@
+<script>
+import { glEmojiTag } from '~/emoji';
+import { GlPopover } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlPopover,
+  },
+  props: {
+    htmlId: {
+      type: String,
+      required: true,
+    },
+    warnings: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    hasWarnings() {
+      return this.warnings && this.warnings.length;
+    },
+    warningMessage() {
+      if (!this.hasWarnings) {
+        return '';
+      }
+
+      return this.warnings.join('\n');
+    },
+  },
+  methods: {
+    glEmojiTag,
+  },
+};
+</script>
+<template>
+  <span v-if="hasWarnings">
+    <span :id="htmlId" v-html="glEmojiTag('warning')"></span>
+    <gl-popover :target="htmlId" :content="warningMessage" triggers="hover focus" />
+  </span>
+</template>
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index 29bfb7ee5df..1ae9487f391 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -6,7 +6,7 @@ export default ({ container }) =>
   new Vue({
     el: container,
     components: {
-      performanceBarApp: () => import('./components/performance_bar_app.vue'),
+      PerformanceBarApp: () => import('./components/performance_bar_app.vue'),
     },
     data() {
       const performanceBarData = document.querySelector(this.$options.el).dataset;
@@ -41,7 +41,7 @@ export default ({ container }) =>
 
         PerformanceBarService.fetchRequestDetails(this.peekUrl, requestId)
           .then(res => {
-            this.store.addRequestDetails(requestId, res.data.data);
+            this.store.addRequestDetails(requestId, res.data);
           })
           .catch(() =>
             // eslint-disable-next-line no-console
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 031e774d533..64f4f5e0c76 100644
--- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
+++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
@@ -3,12 +3,13 @@ export default class PerformanceBarStore {
     this.requests = [];
   }
 
-  addRequest(requestId, requestUrl, requestDetails) {
+  addRequest(requestId, requestUrl) {
     if (!this.findRequest(requestId)) {
       this.requests.push({
         id: requestId,
         url: requestUrl,
-        details: requestDetails,
+        details: {},
+        hasWarnings: false,
       });
     }
 
@@ -22,7 +23,8 @@ export default class PerformanceBarStore {
   addRequestDetails(requestId, requestDetails) {
     const request = this.findRequest(requestId);
 
-    request.details = requestDetails;
+    request.details = requestDetails.data;
+    request.hasWarnings = requestDetails.has_warnings;
 
     return request;
   }